Skip to content

feat: LiveKit OSS Shadcn initial components #1249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
thomasyuill-livekit merged 5 commits into from
Dec 10, 2025
Merged

feat: LiveKit OSS Shadcn initial components #1249

thomasyuill-livekit merged 5 commits into from
Dec 10, 2025

Conversation

@thomasyuill-livekit
Copy link
Contributor

@thomasyuill-livekit thomasyuill-livekit commented Dec 10, 2025

Summary

This PR introduces the core agent control components for the @livekit/shadcn package, providing the foundational UI elements for building voice/video agent interfaces.

New Components

AgentControlBar

The main control bar component for agent sessions featuring:

  • Integrated chat input with keyboard controls
  • Track toggle controls (microphone/camera)
  • Permission-aware UI with usePublishPermissions hook
  • Input state management via useInputControls hook

AgentTrackControl

A compound control component that combines track toggling with device selection, providing users the ability to both mute/unmute and switch between available devices.

AgentTrackToggle

A simple toggle button for enabling/disabling audio or video tracks in agent sessions.

AgentDisconnectButton

A styled button to disconnect from the current agent session.

AudioVisualizerBar

A bar-style audio visualizer with smooth animations via the useBarAnimator hook, useful for displaying agent or participant audio activity.

Also Includes

  • Storybook stories for all new components
  • cloneSingleChild utility for component composition
  • Minor style fixes in existing visualizer components

@changeset-bot
Copy link

changeset-bot bot commented Dec 10, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: 77be9bb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@thomasyuill-livekit thomasyuill-livekit self-assigned this Dec 10, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Dec 10, 2025 •
edited
Loading

size-limit report 📦

Path Size
LiveKitRoom only 6 KB (0%)
LiveKitRoom with VideoConference 32.46 KB (0%)
All exports 43.29 KB (+0.08% 🔺)

1egoman
1egoman approved these changes Dec 10, 2025
View reviewed changes
@thomasyuill-livekit thomasyuill-livekit merged commit e5329db into main Dec 10, 2025
6 checks passed
@thomasyuill-livekit thomasyuill-livekit deleted the ty/shadcn-components-1 branch December 10, 2025 18:36
woodside-david-francoeur
woodside-david-francoeur reviewed Jan 16, 2026
View reviewed changes
packages/react/src/components/participant/BarVisualizer.tsx
ref,
) {
const elementProps = mergeProps(props, { className: 'lk-audio-bar-visualizer' });
const elementProps = mergeProps(props, { className: 'lk-audio-visualizer-bar' });
Copy link

@woodside-david-francoeur woodside-david-francoeur Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey folks, thanks for this lib.

I think components-react got published (2.9.18) while the component-styles were not. This means that if you refresh your package lock and pull in the latest for both, you get a broken BarVisualizer (the bars don't have style)

Copy link
Contributor Author

@thomasyuill-livekit thomasyuill-livekit Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahh, good catch
thank you @woodside-david-francoeur
this was an inadvertent change
we'll get a fix out ASAP

not sure if you use shadcn or tailwind,
but you might want to look at https://docs.livekit.io/reference/components/shadcn/component/agent-audio-visualizer-bar/

Copy link

@woodside-david-francoeur woodside-david-francoeur Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

None, but our override (through var va-fg) stopped working and I eventually fouund this as the bug

Thanks for the quick answer, and there is no rush, we can just pin for now

Copy link
Contributor Author

@thomasyuill-livekit thomasyuill-livekit Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#1271

Copy link
Contributor Author

@thomasyuill-livekit thomasyuill-livekit Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v2.9.19 has been released
https://www.npmjs.com/package/@livekit/components-react

Please let us know if you encounter issues

@thomasyuill-livekit thomasyuill-livekit mentioned this pull request Jan 16, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lukasIO lukasIO lukasIO left review comments

@1egoman 1egoman 1egoman approved these changes

+1 more reviewer

@woodside-david-francoeur woodside-david-francoeur woodside-david-francoeur left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

@thomasyuill-livekit thomasyuill-livekit

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@thomasyuill-livekit @1egoman @lukasIO @woodside-david-francoeur