veryfront/ui

Import

import {
  cva,
  generateTokenCSS,
  getDocumentNonce,
  getFileTypeLabel,
  useAppShell,
  useColorMode,
} from "veryfront/ui";

Examples

Compose primitives

import { Button, Card, CardHeader, CardContent } from "veryfront/ui";

export function Panel() {
  return (
    <Card>
      <CardHeader>Settings</CardHeader>
      <CardContent>
        <Button onClick={() => save()}>Save</Button>
      </CardContent>
    </Card>
  );
}

Light/dark mode

import { ColorModeProvider, ColorModeToggle } from "veryfront/ui";

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ColorModeProvider>
      <ColorModeToggle />
      {children}
    </ColorModeProvider>
  );
}

Exports

Components

Name	Description	Source
`Alert`		source
`AlertAction`	Trailing action slot for `<Alert>` (button or link).	source
`AlertContent`	Message body for `<Alert>`.	source
`AlertIcon`	Leading icon slot for `<Alert>` (size-4 recommended).	source
`AppShell`	Compound AppShell. Compose:	source
`Avatar`	Render a user / agent / entity avatar.	source
`Badge`	Render a badge.	source
`Button`	Render an action button.	source
`Card`	A flat card surface (Studio `Card`).	source
`CardContent`	Card body region - vertical stack.	source
`CardHeader`	Card header row - a flex row (Studio composes these inline).	source
`Checkbox`	A checkbox with an overlaid check indicator.	source
`CheckboxField`	A checkbox paired with a clickable label and optional description.	source
`CheckboxGroup`	Vertical group of checkboxes.	source
`CodeBlock`	Render a syntax-highlighted code block (or a mermaid diagram).	source
`Collapsible`	Collapsible root - owns open state.	source
`CollapsibleContent`	Collapsible content - rendered only while open.	source
`CollapsibleTrigger`	Toggles the collapsible. `asChild` merges onto the child element.	source
`ColorModeProvider`		source
`ColorModeScript`	Inline script to prevent flash of wrong color mode on SSR. Render this in <head> before any content.	source
`ColorModeToggle`	Simple toggle button for color mode.	source
`Command`	Command root - owns the filter query and the item registry.	source
`CommandDialog`	A Command palette inside a modal Dialog overlay.	source
`CommandEmpty`	Shown when the query matches no items.	source
`CommandGroup`	A labelled group of items; auto-hides when all its items are filtered out.	source
`CommandInput`	Search input row - bound to the command’s filter query.	source
`CommandItem`	A selectable, filterable result row.	source
`CommandItemContent`	Flex column wrapper for an item’s title + description.	source
`CommandItemDescription`	Item secondary text.	source
`CommandItemTitle`	Item primary text.	source
`CommandList`	Scrollable results list.	source
`CommandSeparator`	Divider between groups.	source
`CommandShortcut`	Trailing shortcut / metadata text.	source
`DesignTokenStyle`	Scoped design-token stylesheet. Idempotent - render it anywhere.	source
`Dialog`	Dialog root - owns open state.	source
`DialogAction`	Recommended action button (primary, default size).	source
`DialogBody`	Scrollable body area with a bottom edge-fade.	source
`DialogCancel`	Alternate button (secondary, default size) that closes the dialog.	source
`DialogClose`	Closes the dialog. `asChild` merges onto the child element.	source
`DialogContent`	Modal surface - overlay + centered panel, rendered while open.	source
`DialogDescription`	Dialog description - body text, left-aligned.	source
`DialogFooter`	Sticky footer row - action left, cancel right.	source
`DialogForm`	Layout-neutral `<form>` shell (`display: contents`) wrapping header/body/footer.	source
`DialogHeader`	Left-aligned title + description block.	source
`DialogTitle`	Dialog title - Studio Heading level 2 (20px). Semibold so Inter reads at Studio’s medium-on-Söhne weight (workbench heading convention).	source
`DialogTrigger`	Trigger - opens the dialog. `asChild` merges onto the child element.	source
`Drawer`	Drawer root - owns open state.	source
`DrawerBody`	Scrollable body area.	source
`DrawerClose`	Closes the drawer. `asChild` merges onto the child element.	source
`DrawerContent`	Bottom sheet - overlay + sliding surface with a drag handle.	source
`DrawerFooter`	Sticky footer, full-width stacked actions.	source
`DrawerHeader`	Header column wrapper.	source
`DrawerTitle`	Drawer title - 18px medium (Studio Heading-ish). Add `sr-only` to hide.	source
`DrawerTrigger`	Trigger - opens the drawer. `asChild` merges onto the child element.	source
`DropdownMenu`	DropdownMenu root - owns open state and the positioning anchor.	source
`DropdownMenuContent`	Menu surface - rendered below the trigger while open. No border (Studio).	source
`DropdownMenuGroup`	Groups related items with a tight inner gap (Studio: `gap-px p-0.5`).	source
`DropdownMenuItem`	A selectable menu item. Icons render at `size-3.5` (14px).	source
`DropdownMenuItemMeta`	Trailing metadata text - keyboard shortcuts, counts, badges.	source
`DropdownMenuLabel`	Non-interactive section label - full-strength foreground (Studio).	source
`DropdownMenuSeparator`	Full-width divider between groups (Studio: `-mx-2.5 my-2`).	source
`DropdownMenuTrigger`	Trigger - toggles the menu. `asChild` merges onto the child element.	source
`FileType`	Soft-fill badge - rounded square, tinted background, extension label.	source
`FileTypeThumb`	Solid-fill thumbnail - full-saturation square with white `.ext` text.	source
`IconButton`	Render an icon-only button with a hover tooltip.	source
`Input`	Render a text input.	source
`Label`	Render a form label.	source
`List`	Vertical list container.	source
`ListItem`	A single list row.	source
`ListLabel`	Section heading - uppercase, faint. Use for date groups etc.	source
`LoadingButton`	Button that pulses subtly while pending and blocks double-submits.	source
`Pill`	Render a selection-trigger pill.	source
`Popover`	Popover root - owns open state and the positioning anchor.	source
`PopoverActions`	Right-aligned button row, for use inside a footer.	source
`PopoverBody`	Body content region (Studio: `px-5 last:pb-5 flex flex-col gap-4`).	source
`PopoverContent`	Popover surface - rendered below the trigger while open.	source
`PopoverFooter`	Footer region; pass `bordered` for a top divider (Studio).	source
`PopoverHeader`	Small section label inside a popover (Studio: Heading level 5).	source
`PopoverTitle`	Primary heading slot at the top of a popover (Studio: Heading level 4).	source
`PopoverTrigger`	Trigger - toggles the popover. `asChild` merges onto the child element.	source
`ProgressBar`	Render a progress track.	source
`Radio`	A single radio input.	source
`RadioField`	A radio paired with a clickable label and optional description.	source
`RadioGroup`	Vertical group of radios.	source
`ScrollFade`	A scroll container with auto edge-fade affordances.	source
`Select`	Select root - owns the selected value, open state, and label registry.	source
`SelectContent`	Listbox surface - rendered below the trigger while open.	source
`SelectGroup`	Groups related options (semantic only in this basic version).	source
`SelectItem`	A selectable option. Shows a check when it is the current value.	source
`SelectLabel`	Non-interactive section label.	source
`SelectSeparator`	Divider between option groups.	source
`SelectTrigger`	Trigger - shows the current value and toggles the listbox.	source
`SelectValue`	Displays the selected option’s label, or a placeholder.	source
`Shimmer`	Render shimmering text.	source
`Skeleton`	Render an animated placeholder bar.	source
`Slot`	Render `Slot` - merge props onto its single child element.	source
`Status`	Render a status dot + label.	source
`Switch`	A toggle switch.	source
`SwitchField`	A switch with a label + optional description, label-left / switch-right.	source
`Tabs`	Tablist container - manages active state and passes context to items.	source
`TabsItem`	Individual tab - renders as a button, or an anchor when `href` is set. Forwards native props/ref and composes the caller’s `onClick` with the internal selection (caller’s runs first, then the tab activates), so a consumer-supplied handler adds to - never overrides - selection.	source
`Tag`	Static metadata chip.	source
`TagButton`	Tag rendered as a button.	source
`TagGroup`	Wrapping container for a row of tags.	source
`TagLink`	Tag rendered as an external link.	source
`Textarea`	Render a textarea.	source
`Tooltip`	Tooltip root - owns open state and the positioning anchor.	source
`TooltipContent`	Tooltip content - portalled + positioned while hovered/focused.	source
`TooltipProvider`	Provider for shared tooltip config. Basic: a passthrough for API parity.	source
`TooltipTrigger`	Tooltip trigger. `asChild` merges onto the child element (e.g. a Button).	source

Functions

Name	Description	Source
`cva`	Build a class-name function from a base plus a variants config.	source
`generateTokenCSS`	Generates the scoped CSS for the design tokens. Every rule matches BOTH the canonical `[data-vf-ui]` scope and the `[data-vf-chat]` compat alias, so tokens don’t leak to the page and existing consumers keep working.	source
`getDocumentNonce`	Reuse the server-issued CSP nonce for client-created style/script elements during hydration and SPA updates.	source
`getFileTypeLabel`	Human label for a file extension, falling back to the media type.	source
`useAppShell`	Access the enclosing `AppShell`’s state (external triggers, etc.).	source
`useColorMode`		source
`useColorModeOptional`	Non-throwing variant - returns `null` when there is no `ColorModeProvider`. Use for components that should render standalone (e.g. a `CodeBlock` dropped into markdown) and fall back to light mode.	source

Types

Name	Description	Source
`AlertProps`	Props accepted by `<Alert>`.	source
`AppShellHeaderProps`	Props accepted by `AppShellHeader`.	source
`AppShellOpenState`	Per-side visibility map.	source
`AppShellProps`	Props accepted by `AppShell`.	source
`AppShellSide`	Which edge a sidebar docks to.	source
`AppShellSidebarProps`	Props accepted by `AppShellSidebar`.	source
`AppShellTriggerProps`	Props accepted by `AppShellTrigger`.	source
`AvatarProps`	Props accepted by `<Avatar>`.	source
`BadgeProps`	Props accepted by `<Badge>`.	source
`ButtonProps`	Props accepted by `<Button>`.	source
`CardProps`	Props accepted by `<Card>`.	source
`CheckboxFieldProps`	Props accepted by `<CheckboxField>`.	source
`CheckboxProps`	Props accepted by `<Checkbox>`.	source
`CodeBlockProps`	Props accepted by `<CodeBlock>`.	source
`CollapsibleProps`	Props accepted by `<Collapsible>`.	source
`ColorModeProviderProps`		source
`CommandDialogProps`	Props accepted by `<CommandDialog>`.	source
`CommandInputProps`	Props accepted by `<CommandInput>`.	source
`CommandItemProps`	Props accepted by `<CommandItem>`.	source
`DialogActionProps`	Props accepted by `<DialogAction>`.	source
`DialogProps`	Props accepted by `<Dialog>`.	source
`DrawerProps`	Props accepted by `<Drawer>`.	source
`DropdownMenuContentProps`	Props accepted by `<DropdownMenuContent>`.	source
`DropdownMenuItemProps`	Props accepted by `<DropdownMenuItem>`.	source
`DropdownMenuProps`	Props accepted by `<DropdownMenu>`.	source
`FileTypeProps`	Props accepted by `<FileType>` / `<FileTypeThumb>`.	source
`IconButtonProps`	Props accepted by `<IconButton>`.	source
`InputProps`	Props accepted by `<Input>`.	source
`LabelProps`	Props accepted by `<Label>`.	source
`ListItemProps`	Props accepted by `ListItem`.	source
`ListLabelProps`	Props accepted by `ListLabel`.	source
`ListProps`	Props accepted by `List`.	source
`PillProps`	Props accepted by `<Pill>`.	source
`PopoverContentProps`	Props accepted by `<PopoverContent>`.	source
`PopoverProps`	Props accepted by `<Popover>`.	source
`ProgressBarProps`	Props accepted by `<ProgressBar>`.	source
`RadioFieldProps`	Props accepted by `<RadioField>`.	source
`RadioProps`	Props accepted by `<Radio>`.	source
`ScrollFadeProps`	Props accepted by `<ScrollFade>`.	source
`SelectItemProps`	Props accepted by `<SelectItem>`.	source
`SelectProps`	Props accepted by `<Select>`.	source
`SelectTriggerProps`	Props accepted by `<SelectTrigger>`.	source
`ShimmerProps`	Props accepted by `<Shimmer>`.	source
`SkeletonProps`	Props accepted by `<Skeleton>`.	source
`SlotProps`	Props accepted by `<Slot>`.	source
`StatusColor`	Dot colour, keyed to the `--status-*` palette.	source
`StatusProps`	Props accepted by `<Status>`.	source
`SwitchFieldProps`	Props accepted by `<SwitchField>`.	source
`SwitchProps`	Props accepted by `<Switch>`.	source
`TabsItemProps`	Props accepted by `<TabsItem>`.	source
`TabsProps`	Props accepted by `<Tabs>` (the tablist container).	source
`TagLinkProps`	Props accepted by `<TagLink>`.	source
`TextareaProps`	Props accepted by `<Textarea>`.	source
`TooltipContentProps`	Props accepted by `<TooltipContent>`.	source
`VariantProps`	Extracts the variant props of a `cva` function, like upstream’s helper.	source

Constants

Name	Description	Source
`badgeVariants`		source
`buttonVariants`		source
`cx`	Re-export of the class joiner, matching upstream’s `cx`.	source
`inputVariants`		source
`labelVariants`		source
`pillVariants`		source
`selectTriggerVariants`		source
`switchTrackVariants`		source
`textareaVariants`		source

Deep imports

These import paths group focused functionality under this module. Each is a separate barrel; import only what you need.

`veryfront/ui/icons`

Ai - Icons

import { AlertTriangleIcon, ArrowDownIcon, ArrowRightIcon } from "veryfront/ui/icons";

Components

Name	Description	Source
`AlertTriangleIcon`		source
`ArrowDownIcon`		source
`ArrowRightIcon`		source
`ArrowUpIcon`		source
`BrainIcon`		source
`CheckCircleIcon`		source
`CheckIcon`		source
`ChevronDownIcon`		source
`CircleIcon`		source
`ClockIcon`		source
`CodeBracketsIcon`		source
`CopyIcon`		source
`FileTextIcon`		source
`InfoIcon`		source
`MessageSquareIcon`		source
`MoreHorizontalIcon`		source
`PanelLeftIcon`		source
`PanelRightIcon`		source
`PaperclipIcon`		source
`PencilIcon`		source
`PlusIcon`		source
`RefreshCwIcon`		source
`SearchIcon`		source
`SendIcon`		source
`SparklesIcon`		source
`StopIcon`		source
`TargetIcon`		source
`TrashIcon`		source
`WrenchIcon`		source
`XCircleIcon`		source
`XIcon`		source

Types

Name	Description	Source
`IconProps`		source

Getting Started

Concepts

Guides

API Reference

Import

Examples

Compose primitives

Light/dark mode

Exports

Components

Functions

Types

Constants

Deep imports

`veryfront/ui/icons`

Components

Types

​Import

​Examples

​Compose primitives

​Light/dark mode

​Exports

​Components

​Functions

​Types

​Constants

​Deep imports

​veryfront/ui/icons

​Components

​Types

Import

Examples

Compose primitives

Light/dark mode

Exports

Components

Functions

Types

Constants

Deep imports

`veryfront/ui/icons`

Components

Types