# videorc/ui

> The component library behind Videorc: buttons, menus, rows, panes, status bars and a ⌘K palette for React and shadcn/ui, built on Base UI.

Install components with the shadcn CLI after adding "@videorc": "https://ui.videorc.com/r/{name}.json" to the registries in components.json.

Append `.md` to any page below for a Markdown version with install steps, usage and the full API, written for AI agents.

## Docs

- [Activity Feed](https://ui.videorc.com/docs/blocks/activity-feed): The Stream Manager's Activity pane. Follows, subs, gifts, tips, raids, streaks and destinations as rows that lead with who, kind chips with their counts, the platform filter and Auto-show.
- [Chat Composer](https://ui.videorc.com/docs/blocks/chat-composer): The Stream Manager's composer. The "To:" picker, the message field with its count, the ↵ key and send, local commands after "/", and one quiet line for the exceptions.
- [Chat Message](https://ui.videorc.com/docs/blocks/chat-message): One chat message in the Stream Manager, the big-text row. A click puts it on stream under the live chrome plate; members, paid messages, mentions, Buddy's marks and removals each read at a glance, and the rest waits in its ⋯ menu.
- [Chat Platform](https://ui.videorc.com/docs/blocks/chat-platform): The Stream Manager's platform vocabulary. One name per platform, its 20 px mark in its brand tint, and a destination's chat state in the words every window shares.
- [Chat Toolbar](https://ui.videorc.com/docs/blocks/chat-toolbar): The Stream Manager chat's filter strip. Platform chips, Buddy's Questions, Mentions and a search field with its ⌘F key; below 640 px of Stream Manager the filters fold into one Filters menu.
- [Blocks](https://ui.videorc.com/docs/blocks): Whole pieces of Videorc's windows, built from the components and primitives. The Stream Manager first, and every part of it on its own.
- [Platform Filter](https://ui.videorc.com/docs/blocks/platform-filter): The one platform filter for the Stream Manager's chat and Activity. An All chip and a chip per platform mark, and the same choice as radio items for a Filters menu. Nothing at all with one platform.
- [Stream Manager Status Bar](https://ui.videorc.com/docs/blocks/stream-manager-status-bar): The Stream Manager's 32 px status bar. Each destination's chat state as its mark and a dot, a word only when something needs the streamer, and the window's labelled controls, folding into one ⋯ menu below 640 px.
- [Stream Manager](https://ui.videorc.com/docs/blocks/stream-manager): Videorc's live dashboard window, whole. The title row, the stats bar, Chat beside Activity and Buddy, and the status bar, laid out by the window's own width.
- [Stream Stats Bar](https://ui.videorc.com/docs/blocks/stream-stats-bar): The Stream Manager's stats bar. One 32 px row with the ON AIR clock, viewers and followers in the main slots and the rest after a hairline; monochrome numbers, details one hover away, and stats the streamer drags and picks.
- [Accordion](https://ui.videorc.com/docs/components/accordion): Stacked sections that open in place, in a bordered group on the row radius. One open at a time, or several with multiple.
- [Alert Dialog](https://ui.videorc.com/docs/components/alert-dialog): The question before something destructive, on the dialog tier. No close button, Cancel has focus on open, and Escape is the safe answer.
- [Alert](https://ui.videorc.com/docs/components/alert): A flush inline status row, never a card. The variant is the tone and brings its own icon, and only a destructive alert interrupts a screen reader.
- [Avatar](https://ui.videorc.com/docs/components/avatar): A round picture of a chat author or a channel, with initials while the picture loads or when it fails, in three sizes.
- [Badge](https://ui.videorc.com/docs/components/badge): Glass chips for status, tags and counts. A status chip keeps its text monochrome and glows its tone in a dot; failed and on air tint the glass itself.
- [Button](https://ui.videorc.com/docs/components/button): Desktop-sized buttons on Base UI. The default is polished chrome, secondary is a glass chip, and record is metallic red that lights while a session runs.
- [Chart](https://ui.videorc.com/docs/components/chart): shadcn's Recharts wrapper on Videorc's tokens. Series stay neutral unless their colour means something, and the tooltip floats on the popup glass.
- [Checkbox](https://ui.videorc.com/docs/components/checkbox): A 16 px checkbox on Base UI. Checked or mixed, it wears the chrome fill; mixed draws a dash instead of the check.
- [Chrome Row](https://ui.videorc.com/docs/components/chrome-row): The class names for the Stream Manager's chrome rows, the plate on the row that's on stream and the quieter one on a member's row, so a screen never names a chrome material itself.
- [Collapsible](https://ui.videorc.com/docs/components/collapsible): One section that opens and closes under its trigger, such as advanced settings. Unstyled, so the trigger is whatever control fits.
- [Command](https://ui.videorc.com/docs/components/command): A searchable list on cmdk at the ⌘K palette scale, with a borderless 18 px search field, 40 px rows and a footer. It paints no coat; the dialog or popover around it does.
- [Context Menu](https://ui.videorc.com/docs/components/context-menu): A menu at the pointer on right-click or long press, with the same popup tier and 28 px items as Dropdown Menu.
- [Dialog](https://ui.videorc.com/docs/components/dialog): A modal on the dialog tier of the float glass in four widths, with a body that scrolls between a header and a footer that stay put, and no backdrop blur.
- [Disabled Reason](https://ui.videorc.com/docs/components/disabled-reason): Says why a control is disabled, on hover and on keyboard focus. A focusable wrapper carries the tooltip, and the reason stays the control's description.
- [Dropdown Menu](https://ui.videorc.com/docs/components/dropdown-menu): A menu of actions from a button, on the popup tier of the float glass, with 28 px items, a destructive variant, shortcuts, checkbox and radio items and submenus.
- [Empty](https://ui.videorc.com/docs/components/empty): What a pane or a list says when there's nothing in it. Short muted text, centred, with an optional title and action, and no illustration, media tile or dashed box.
- [Fader](https://ui.videorc.com/docs/components/fader): audiocn's volume fader in decibels, restyled for Videorc. The range is the chrome fill and the thumb a chrome bead, with tapers, detents, a scale, reset and an editable value.
- [Field](https://ui.videorc.com/docs/components/field): Labels, descriptions and errors for a form control, plus Videorc's SettingsRow and the grouped settings list. A Field names and describes its control with no ids to wire.
- [Hover Card](https://ui.videorc.com/docs/components/hover-card): A preview of what a link points at, shown on hover or focus, on the popup tier of the float glass. Base UI's Preview Card under shadcn's name.
- [Components](https://ui.videorc.com/docs/components): shadcn/ui components rebuilt for Videorc on Base UI, and Videorc's own controls.
- [Info Tooltip](https://ui.videorc.com/docs/components/info-tooltip): Explains a chip, a dot or a short status word on hover and on keyboard focus, and keeps the text in the DOM as its description for screen readers.
- [Input Group](https://ui.videorc.com/docs/components/input-group): One 28 px field with icons, text and buttons inside it, on the chip radius. Its focus and invalid rings draw around the whole group.
- [Input](https://ui.videorc.com/docs/components/input): A text field at the 28 px desktop control height, on Base UI's Input. Inside a Field, its label names it and its descriptions describe it with no ids to wire.
- [Kbd](https://ui.videorc.com/docs/components/kbd): Videorc's key chip, a glass keycap with a bright top edge and a dark bottom edge. Inside a filled button it takes the button's own ink instead.
- [Label](https://ui.videorc.com/docs/components/label): The 14 px medium label for a control. It dims with a disabled peer and keeps the desktop's arrow cursor.
- [Parameter Slider](https://ui.videorc.com/docs/components/parameter-slider): audiocn's labelled slider with a numeric input, unit, marks and reset, restyled for Videorc. For every setting that isn't a volume.
- [Popover](https://ui.videorc.com/docs/components/popover): A floating panel for a short task, on the popup tier of the float glass. An Anchor part lines it up with something other than its trigger.
- [Progress](https://ui.videorc.com/docs/components/progress): One determinate bar on Base UI, a 6 px round track with the chrome fill. Name it with a label or aria-label, and say the number in words when the streamer needs it.
- [Scroll Area](https://ui.videorc.com/docs/components/scroll-area): A native scroller with a thumb-only scrollbar, like macOS overlay scrollbars. The thumb shows while you scroll, on the theme's --scrollbar-* tokens.
- [Segmented Control](https://ui.videorc.com/docs/components/segmented-control): Pick one of 2–4 exclusive options on the glass Tabs track. A radio group with roving focus and one tab stop, manual activation for heavy changes, and a disabled state that always says why.
- [Select](https://ui.videorc.com/docs/components/select): Choose one value from a list. A 28 px trigger (24 px in dense rows) and a list on the popup tier of the float glass; inside a Field, its label names it.
- [Separator](https://ui.videorc.com/docs/components/separator): A 1 px hairline between groups, horizontal or vertical, on Base UI.
- [Shortcut Keys](https://ui.videorc.com/docs/components/shortcut-keys): The one way to show a shortcut. Takes an Electron accelerator and prints it the way the platform's own menus do, as a keycap or as the status bar's quiet text.
- [Shortcut Tooltip](https://ui.videorc.com/docs/components/shortcut-tooltip): A control's tooltip with its bound shortcut as one keycap, keyboard-first and quiet. It wraps the control, so the tooltip never touches the control's own attributes.
- [Skeleton](https://ui.videorc.com/docs/components/skeleton): A muted placeholder that pulses where content is loading, on the 8 px row radius.
- [Slider](https://ui.videorc.com/docs/components/slider): A slider on Base UI with a chrome-fill range and chrome-bead thumbs. Its name and spoken value go on the thumbs, where a screen reader reads them.
- [Sonner](https://ui.videorc.com/docs/components/sonner): Toasts on sonner. Every toast is the same neutral float glass, a type colours its 16 px icon only, and each one can be dismissed.
- [Spinner](https://ui.videorc.com/docs/components/spinner): The one spinner for work in flight, on the icon set's SpinnerIcon. It announces itself as a status unless it sits beside its own words.
- [Switch](https://ui.videorc.com/docs/components/switch): The one control for a boolean, on Base UI. On, its track is the chrome fill and its knob the inverse chrome bead.
- [Tabs](https://ui.videorc.com/docs/components/tabs): Switch a view on Base UI. The default list is the glass segmented track with the active tab as a chrome plate; the line variant underlines it instead. A Field's label names the list.
- [Textarea](https://ui.videorc.com/docs/components/textarea): A multi-line text field that grows with its content, at 14 px on the chip radius. Inside a Field, its label names it and its descriptions describe it.
- [Toggle Group](https://ui.videorc.com/docs/components/toggle-group): Filter chips on Base UI. Pressed items wear the chrome plate, a Field's label names the group, and items can sit apart, wrap, or join into one outlined strip.
- [Toggle](https://ui.videorc.com/docs/components/toggle): A two-state button on Base UI at the 28 px desktop height. Pressed wears the chrome plate, the same material as a selected segment and an active tab.
- [Tooltip](https://ui.videorc.com/docs/components/tooltip): A short label for a control on the tooltip tier of the float glass. It waits 600 ms for a deliberate hover, and its neighbours under one provider then open at once.
- [Design language](https://ui.videorc.com/docs/concepts/design-language): The window family. How Videorc looks, and the rules every videorc/ui component follows.
- [Desktop scale](https://ui.videorc.com/docs/concepts/desktop-scale): One control height, one row, one toolbar and one status bar for every screen. The sizes that make videorc/ui feel like a desktop app.
- [Desktop base](https://ui.videorc.com/docs/concepts/desktop): How a desktop app's chrome behaves. Chrome text doesn't select, the arrow stays the pointer, and the window doesn't rubber-band.
- [Using it in Electron](https://ui.videorc.com/docs/concepts/electron): Install videorc/ui into an Electron renderer built with Vite. The aliases, the window's background, platform glyphs, accelerators, and keeping your copy in sync.
- [Icons](https://ui.videorc.com/docs/concepts/icons): The semantic icon set. Components ask for a meaning, never a glyph, so you swap an icon or the whole set in one file. Phosphor underneath.
- [Theme](https://ui.videorc.com/docs/concepts/theme): The Videorc tokens in light and dark, the glass, chrome and tone utilities, and the base layer. Every videorc/ui component depends on it.
- [Accelerator](https://ui.videorc.com/docs/hooks/accelerator): Parses Electron accelerators such as CmdOrCtrl+Shift+J and prints them the way each platform's menus do, with aria-keyshortcuts to match.
- [Hooks and libs](https://ui.videorc.com/docs/hooks): The small pieces videorc/ui components share. Accelerators, platform glyphs, the modal check, the theme toggle and reduced motion.
- [Modal open](https://ui.videorc.com/docs/hooks/modal-open): One answer to "is something modal open?" Global keys ask it before acting, so they never fire from under a dialog, an alert, a menu or an open select.
- [Platform](https://ui.videorc.com/docs/hooks/platform): The current platform, from your app, data-platform on the html element or the user agent, for shortcut labels and OS words such as Finder and Trash.
- [Status word](https://ui.videorc.com/docs/hooks/status-word): The status vocabulary Status Badge and Status Dot share. Five tones, their chip utilities, and a guard that a status says a word, never a machine value.
- [useReducedMotion](https://ui.videorc.com/docs/hooks/use-reduced-motion): True when the system asks to reduce motion, plus smoothScrollBehavior() for script-driven scrolls.
- [useThemeToggle](https://ui.videorc.com/docs/hooks/use-theme-toggle): Toggles light and dark with next-themes and the D key, never from a field or under a popup. Flipping back to the computer's own look returns to System.
- [Introduction](https://ui.videorc.com/docs): videorc/ui is the component library behind Videorc, the AI-native recording and livestreaming studio. Desktop-sized controls, menus, rows, panes and status bars, built on Base UI and shipped as a shadcn registry.
- [Installation](https://ui.videorc.com/docs/installation): Add the videorc/ui registry to a shadcn/ui project and install the theme and components with the shadcn CLI.
- [Confirm Dialog](https://ui.videorc.com/docs/primitives/confirm-dialog): The one recipe for a destructive confirmation, over Alert Dialog. A "Verb object?" title, one sentence on what is lost, a focused safe answer, and the owner closes it.
- [Device Picker](https://ui.videorc.com/docs/primitives/device-picker): The one picker for a screen, window, camera or microphone. A popover list with words for every state, so it's never blank while discovery runs or a device is gone.
- [Error Boundary](https://ui.videorc.com/docs/primitives/error-boundary): The one render-crash boundary. Its fallback draws what it caught and gets a reset that renders the children again, so a crash stays in its page and the window keeps a way back.
- [Primitives](https://ui.videorc.com/docs/primitives): The shared building blocks of every Videorc screen. Rows and grouped lists, panes and toolbars, status bars, menus and confirm dialogs.
- [Kebab Context Menu](https://ui.videorc.com/docs/primitives/kebab-context-menu): The right-click twin of a row's ⋯ menu, built from the same item list, so the two menus can never disagree.
- [Kebab Menu](https://ui.videorc.com/docs/primitives/kebab-menu): The ⋯ menu for an item's low-frequency actions. One item list grouped by hairlines, the destructive item last in red, keys on the right, and a trigger that can wait for its row's hover.
- [List Row](https://ui.videorc.com/docs/primitives/list-row): The one row for every icon, title and meta list, and the inset grouped list it sits in. 32 px rows split by hairlines, facts unless they say otherwise, with a whole-row button or a stretched title button when a row acts.
- [Lock Alert](https://ui.videorc.com/docs/primitives/lock-alert): Why the controls under it are off. A lock, the reason in one line and at most one action, leading the section it locks. Premium features stay on screen behind it.
- [Media Card](https://ui.videorc.com/docs/primitives/media-card): A card for an object with a picture, such as a scene, a background or a takeover screen. The row radius, a 4% fill, a hairline and no shadow; the one in use wears the chrome plate.
- [Navigable Row](https://ui.videorc.com/docs/primitives/navigable-row): A fact row of icon, label and value. When the value's home is another page, the row becomes a button with a chevron that jumps there, and a hint lists the facts a short value stands for.
- [Page Tabs](https://ui.videorc.com/docs/primitives/page-tabs): A page with tabs. One segmented tab list pinned in a strip under the toolbar, and only the region under it scrolls. The selected tab is the caller's, so the app can remember it and open a named tab from a link.
- [Page](https://ui.videorc.com/docs/primitives/page): The page vocabulary under a pane's toolbar. A flush intro line, the config grid of sections in one column or two, the picture gallery and the plain stack, with no page column, so every page fills its pane edge to edge.
- [Pane](https://ui.videorc.com/docs/primitives/pane): The flush column every page lives in. A 40 px toolbar with the page title on the window's drag band, a body that's the only thing that scrolls, and a strip pinned under the toolbar for tabs or filters.
- [Panel Section](https://ui.videorc.com/docs/primitives/panel-section): The flush section every pane is built from. A 13 px header as an h2, a 12 px description, an action on the title line, 16 px of padding and a hairline to the next section, with no box around it.
- [Pin Window Button](https://ui.videorc.com/docs/primitives/pin-window-button): Keep on top, the pin every detached window shares. One name in every window, a filled pin while the window stays over other apps, a pressed state a screen reader hears, and a header or a status-bar look.
- [Power Slider](https://ui.videorc.com/docs/primitives/power-slider): A labelled slider for one engine setting. The value with its unit or a typed number, a reset to the default, marks under the track, and a live preview apart from the commit.
- [Record Button](https://ui.videorc.com/docs/primitives/record-button): Record and its stop button as one control. Metallic red, lit from the click, with a glow that breathes like a camera's tally light while the session runs. One width through every state.
- [Section Label](https://ui.videorc.com/docs/primitives/section-label): The small name over a group of rows or fields, 11 px at 600 in the tertiary tier. One recipe for the sidebar's groups, a grouped list's label and a block of fields.
- [Status Badge](https://ui.videorc.com/docs/primitives/status-badge): The status pill, a round glass chip. The words stay monochrome and the tone glows in its dot; a failure or an on-air session tints the whole chip.
- [Status Bar Action](https://ui.videorc.com/docs/primitives/status-bar-action): One action in a status bar. An icon, a word or both, with its shortcut, named for assistive tech and on hover by a tooltip, never a native title. It can be a toggle, or a menu's trigger.
- [Status Bar](https://ui.videorc.com/docs/primitives/status-bar): The window's 26 px status bar. The session state on the left, and quiet shortcut hints on the right that stay clickable, each pressed while the window it opens is open.
- [Status Dot](https://ui.videorc.com/docs/primitives/status-dot): Ambient status. The glass dot in its tone, pulsing while something runs, beside a quiet label. It replaces a loud header badge.
- [Theme Toggle](https://ui.videorc.com/docs/primitives/theme-toggle): The light and dark switch. A ghost icon button with D as its shortcut, shown in its tooltip; a flip back to the computer's own look returns to System.
- [Window Frame](https://ui.videorc.com/docs/primitives/window-frame): The frame of a single-pane window and its header row. The content coat over the window coat, and a 40 px header that shares its line with the macOS traffic lights, carries the window's title and drags the window.