UI
UI overview
The editor shell, the design tokens powering it, the icon system, and the UI primitives you can use in your own panels.
The UI layer ships three things you'll actually touch when extending the SDK:
- A theme system — CSS custom properties for color, radius, motion, surface, border, text, and timeline/track styling. Overridable per-mode (light/dark) and per-instance.
- An icon system — a typed icon map (
StudioIconMap) with ~100 semantic names. Override any icon globally; plugins can register their own. - A UI component library — Button, Input, Dialog, Popover, Tooltip, Tabs, Slider, etc., all
re-exported from
@studio-dev/vsdk-uithrough the@studio-dev/vsdk/uisubpath.
Color system
The token map, per-mode overrides, the full Tailwind utility surface, programmatic application.
Icon system
Override icons globally, look icons up at runtime, register plugin icons. Full icon-name reference.
Components
The UI primitives re-exported from @studio-dev/vsdk/ui — use these in your panels for visual consistency.
Import paths
Most UI primitives are exposed in two places — pick whichever import path fits your code:
| Import path | What you get |
|---|---|
@studio-dev/vsdk | Everything, including Button, Input, hooks, provider |
@studio-dev/vsdk/ui | Same, but only UI-layer exports (smaller tree-shake target) |
@studio-dev/vsdk-ui/components/<name> | Direct, deep import of a single component |
// All three work — pick one and be consistent.
import { Button, useStudioStore } from '@studio-dev/vsdk'
import { Button, useStudioStore } from '@studio-dev/vsdk/ui'
import { Button } from '@studio-dev/vsdk-ui/components/button'What's underneath
| Library | Role |
|---|---|
| Tailwind v4 | Utility classes — including all studio tokens registered as --color-studio-* |
| Radix UI / Base UI | Headless behavior for Dialog, Popover, Dropdown, Select, Tabs, Toggle, Tooltip, etc. |
| class-variance-authority | Variant systems on Button, Badge, Toggle |
| Hugeicons + Lucide | Default icon set (overridable) |
| dnd-kit, react-moveable, @tanstack/react-virtual | Timeline DnD, transform handles, virtualization |
You don't need to import these directly — VSDK wraps them. But it's useful context when reading source or composing your own panels.