videorc/uiInstallation
Add the videorc/ui registry to a shadcn/ui project and install the theme and components with the shadcn CLI.
videorc/ui is a shadcn registry. You add components with the shadcn CLI, and the code lands in your project.
Requirements
- React 19.2 or later and Tailwind CSS v4.
- A shadcn/ui project on Base UI (a
base-*style). The components import@base-ui/react. shadcn/tailwind.cssimported in your global stylesheet, aftertailwindcss. It defines thedata-open,data-checked,data-horizontaland other variants the components style with. Everybase-*project has it.
Set up shadcn/ui
Skip this if your project already has a components.json.
$ pnpm dlx shadcn@latest init --base baseAdd the registry
Add the @videorc namespace to components.json:
{
"registries": {
"@videorc": "https://ui.videorc.com/r/{name}.json"
}
}Add the theme
$ pnpm dlx shadcn@latest add @videorc/themeThis merges the Videorc tokens, utilities and base layer into your global stylesheet. Every component depends on it, so the CLI also adds it with the first component you install.
For a desktop app (Electron, Tauri), also add @videorc/desktop: chrome text stops selecting, the arrow stays the pointer, and the window stops rubber-banding.
$ pnpm dlx shadcn@latest add @videorc/desktopAdd a component
$ pnpm dlx shadcn@latest add @videorc/buttonWhat gets installed
| Path | What it is |
|---|---|
components/ui/* | Components, one file each |
components/* | Primitives: rows, panes, status bars, menus |
components/icons.tsx | The semantic icon set every component draws from |
hooks/*, lib/* | The shared hooks and helpers |
| Your global CSS | The theme: tokens in light and dark, @theme mappings, utilities, base layer |
Paths follow the aliases in your components.json, so they adapt to a src/ folder or custom aliases.
The ground
Videorc's surfaces are translucent coats, tuned to sit on a window's solid tone. On a plain page, give the page the theme's solid so the coats composite to the right tone:
@layer base {
html {
background-color: var(--glass-solid);
}
}For AI agents
Every page has a Copy prompt for AI button that copies the install steps, usage, examples and API as one document. The same document is served at the page URL with .md appended:
curl https://ui.videorc.com/docs/components/button.mdllms.txt indexes every page, and llms-full.txt is the whole documentation in one file.
Introduction
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.
Design language
The window family. How Videorc looks, and the rules every videorc/ui component follows.