UI Components

The complete component library for Vienna plugins. Built on Radix UI + Tailwind CSS v4 + CVA.

Auto-generated

This reference is generated from the @tryvienna/ui source code and Storybook stories. Regenerate with pnpm --filter @vienna/docs generate:ui-reference.

Form Controls

• Button — Primary interactive element for triggering actions
• Input — Text input field with focus rings and error states
• Label — Accessible form label via Radix UI
• Textarea — Multi-line text input
• Checkbox — Toggle checkbox via Radix UI
• Switch — Toggle switch via Radix UI
• RadioGroup — Single-selection radio buttons via Radix UI
• Slider — Range input via Radix UI
• Form — React Hook Form integration with accessible labels and validation

Layout & Display

• Card — Composable content container with semantic sections
• Separator — Visual divider via Radix UI
• AspectRatio — Maintains width-to-height ratio via Radix UI
• ScrollArea — Custom scrollable area via Radix UI
• Badge — Small status indicator or label
• Avatar — User avatar with image, fallback, badge, and group layout
• Skeleton — Loading placeholder with pulse animation
• Progress — Horizontal progress bar via Radix UI
• Alert — Callout for important messages
• Table — HTML table with consistent styling

Overlays

• Tooltip — Popup text label on hover/focus via Radix UI
• Dialog — Modal dialog overlay via Radix UI
• AlertDialog — Confirmation dialog requiring user action via Radix UI
• Popover — Floating content panel via Radix UI
• HoverCard — Card that appears on hover via Radix UI
• Sheet — Side-sliding panel overlay via Radix UI Dialog
• Drawer — Bottom sheet drawer via vaul library

Navigation

• Accordion — Collapsible content sections via Radix UI
• Tabs — Tabbed interface via Radix UI
• Breadcrumb — Page hierarchy navigation
• Collapsible — Simple show/hide toggle via Radix UI
• Toggle — Two-state button via Radix UI
• ToggleGroup — Group of toggle buttons via Radix UI
• Pagination — Page navigation with previous/next and numbered links

Menus & Selection

• Select
• RichSelect — RichSelect -- Custom select with full control over option and value rendering
• DropdownMenu
• ContextMenu
• Menubar
• NavigationMenu
• Command

Data Display + Notifications

• Calendar — Individual day cell button within the Calendar
• Carousel — Access carousel context (scroll state, API, orientation).
• ChartContainer — Configuration object for chart data series.
• Toaster — Toast notification container built on Sonner
• NotificationToast — Apply to toast.custom()'s options.className to neutralize Sonner's

Sidebar System

• Sidebar — Access sidebar state and controls.

Composed Components

• ContentProvider — Context-based density system for content layout
• ContentSection — Section wrapper with optional title, actions, and collapsible state
• MetadataList — Key-value pairs in a grid layout with optional copy and link actions
• Timeline — Vertical timeline with connecting line and dot variants
• EmptyState — Placeholder for empty content areas with icon, title, description, and action
• EntityCard — Card component for displaying entities with icon, badges, and stats
• InlineEdit — Inline text editing with click-to-edit and marquee overflow
• SearchFilterBar — Search input with optional filter dropdown
• ConfirmDialog — Convenience wrapper around AlertDialog for confirmation flows
• Combobox — Advanced combobox with single and multi-select support
• LoadingState — Standardized loading indicator for panels, sections, and pages

Rich Content

• Markdown — Renders raw markdown as styled HTML with syntax highlighting
• MarkdownEditor — Write/Preview toggle editor for markdown content
• MermaidBlock — Renders Mermaid diagrams as SVG
• ChartBlock — Renders data visualizations from JSON configuration

Utility & Status Components

• Spinner — Animated SVG loading spinner with size and color variants
• StatusBadge
• FullscreenOverlay — Portal-based fullscreen overlay with Escape-to-close
• FullscreenButton — Toggle button for entering/exiting fullscreen presentation mode
• SidePanel — 8pt grid sizing table for comfortable density.
• DrawerPanel — Drawer layout primitives for composing drawer/panel content without custom CSS.
• FileTypeIcon — Generic file icon
• FileTree — File directory tree view with language-aware icons
• KeyboardHint — Displays one or more keyboard key badges