veryfront/ui

Import

import {
  cva,
  generateTokenCSS,
  getDocumentNonce,
  getFileTypeLabel,
  useAdapter,
  useColorModeOptional,
} from "veryfront/ui";

Examples

Compose primitives

import { Button, Card, CardContent, CardHeader } 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
`Accordion`	Render a set of togglable sections.	source
`AccordionContent`	The section body: retained in the DOM and hidden while its section is closed.	source
`AccordionItem`	A single togglable section. Its open/collapse MECHANICS come from the active adapter’s `disclosure` slot (controlled by the Accordion’s single/multiple coordination), so an engine swap drives every item’s collapse while the Accordion keeps owning which sections may be open.	source
`AccordionTrigger`	The clickable header that toggles its section (via the disclosure slot).	source
`Alert`		source
`AlertAction`	Trailing action slot for `<Alert>` (button or link).	source
`AlertContent`	Message body for `<Alert>`.	source
`AlertDialog`	AlertDialog root - owns open state (shares the Dialog adapter slot).	source
`AlertDialogAction`	Confirming action - runs `onClick`, then closes unless it calls `preventDefault()`.	source
`AlertDialogCancel`	Dismissing action - runs `onClick`, then closes unless it calls `preventDefault()`.	source
`AlertDialogContent`	Alert surface - non-dismissing overlay + centered `role="alertdialog"` panel, rendered only while open. Generates the title / description ids, wires them to `aria-labelledby` / `aria-describedby`, traps focus, restores it on close, and portals outside clipping ancestors while retaining the token scope.	source
`AlertDialogDescription`	Required supporting copy - adopts the Content-generated `aria-describedby` id.	source
`AlertDialogFooter`	Right-aligned action row - Cancel first, then the Action.	source
`AlertDialogTitle`	Required accessible name - adopts the Content-generated `aria-labelledby` id.	source
`AlertDialogTrigger`	Trigger - opens the alert dialog. `asChild` merges onto the child element.	source
`AlertIcon`	Leading icon slot for `<Alert>` (size-4 recommended).	source
`AppShell`	Compound AppShell. Compose:	source
`AspectRatio`	Constrain content to a fixed aspect ratio.	source
`Autocomplete`	Autocomplete root - renders no node of its own (state + context only).	source
`AutocompleteContent`	The floating `role="listbox"` of suggestions, shown while typing.	source
`AutocompleteInput`	The free-text input that drives the suggestions.	source
`AutocompleteItem`	A single suggestion. Fills the input when chosen; hides when it doesn’t match.	source
`Avatar`	Render a user / agent / entity avatar.	source
`Badge`	Render a badge.	source
`Breadcrumb`	The landmark `<nav aria-label="Breadcrumb">` wrapping the trail.	source
`BreadcrumbEllipsis`	A collapsed-trail indicator: renders `…` with an sr-only “More” label.	source
`BreadcrumbItem`	A single item in the trail: wraps a link, the current page, or an ellipsis.	source
`BreadcrumbLink`	A navigable ancestor link in the trail.	source
`BreadcrumbList`	The ordered list of trail items.	source
`BreadcrumbPage`	The current page: a non-interactive `role="link"` marked `aria-current="page"`.	source
`BreadcrumbSeparator`	A decorative divider between items; renders its children or a default `/`.	source
`Button`	Render an action button.	source
`Calendar`	A dependency-free single-month date grid.	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 escaped source or delegate to explicit syntax/diagram capabilities.	source
`CodeBlockRendererProvider`	Provide extension-owned syntax and diagram renderers to a React subtree.	source
`Collapsible`	Collapsible root whose open-state mechanics come from the active adapter. Public parts register their realized IDs through context, so opaque wrappers and multiple triggers retain unique DOM IDs and synchronized ARIA references without inspecting or rewriting the consumer’s React tree. Supply root `triggerId` and `contentId` values when the same relationships must be present in static SSR output, before refs can register rendered parts.	source
`CollapsibleContent`	Collapsible content retained in the DOM and hidden while closed.	source
`CollapsibleTrigger`	Toggle through the active disclosure adapter. `asChild` composes onto one child.	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
`Combobox`	Combobox root - renders no node of its own (state + context only).	source
`ComboboxContent`	The floating `role="listbox"` surface, shown while filtering.	source
`ComboboxInput`	The `role="combobox"` text input that drives filtering.	source
`ComboboxItem`	A selectable, filterable option. Hides itself when it doesn’t match the query.	source
`Command`	Command root - owns the filter query and 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 nested within `CommandList`.	source
`CommandItemContent`	Flex column wrapper for an item’s title + description.	source
`CommandItemDescription`	Item secondary text.	source
`CommandItemTitle`	Item primary text.	source
`CommandList`	The root’s single scrollable results list.	source
`CommandSeparator`	Divider between groups.	source
`CommandShortcut`	Trailing shortcut / metadata text.	source
`ContextMenu`	ContextMenu root - owns open state and the pointer position. Renders a zero-size, `position: fixed` virtual anchor (kept inside the token scope so the portalled surface resolves `var(--…)`), which `Floating` measures to place the surface at the last right-click.	source
`ContextMenuContent`	Menu surface - portalled to the pointer position while open. No border (Studio).	source
`ContextMenuGroup`	Groups related items with a tight inner gap (Studio: `gap-px p-0.5`).	source
`ContextMenuItem`	A selectable menu item. Icons render at `size-3.5` (14px). Closes on select.	source
`ContextMenuLabel`	Non-interactive section label - full-strength foreground (Studio).	source
`ContextMenuSeparator`	Full-width divider between groups (Studio: `-mx-2.5 my-2`).	source
`ContextMenuTrigger`	Trigger - the region a right-click opens the menu over. Captures `onContextMenu`, calls `preventDefault()` (suppressing the browser’s native menu), and opens the surface at the pointer coordinates. `asChild` merges onto the child element, which must forward `ref` to its DOM node.	source
`DatePicker`	Root: owns `{ value, open }`, provides context, and renders the Popover.	source
`DatePickerContent`	The Popover surface wrapping the `Calendar`; picking a day commits it and closes.	source
`DatePickerTrigger`	The field-styled button that shows the formatted value (or placeholder) and opens the popover.	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. Registers its id with the adapter so the panel adopts `aria-describedby`.	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). Registers its id with the adapter so the panel adopts `aria-labelledby`.	source
`DialogTrigger`	Trigger - opens the dialog. `asChild` merges onto the child element.	source
`Drawer`	Drawer root - owns open state (via the adapter’s drawer engine).	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. Registers its id with the adapter so the sheet adopts `aria-labelledby`.	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`		source
`Field`	The field wrapper: derives ids and provides them to its sub-parts.	source
`FieldControl`	Wiring wrapper: renders no node of its own; clones its single child control with the shared `id`, `aria-describedby` (the description, plus the error id when invalid), and `aria-invalid`.	source
`FieldDescription`	Helper text describing the field: referenced by the control’s `aria-describedby`.	source
`FieldError`	The field’s error message: a live `role="alert"`; renders nothing when empty.	source
`FieldLabel`	The field’s label: wired to the control with `htmlFor`.	source
`FileType`	Soft-fill badge - rounded square, tinted background, extension label.	source
`FileTypeThumb`	Solid-fill thumbnail - full-saturation square with white `.ext` text.	source
`HoverCard`	HoverCard root - owns open state and the hover/focus timers. Renders no node of its own; the positioning anchor is the trigger element, carried on context.	source
`HoverCardContent`	HoverCard surface - the portalled floating card, rendered while open. Non-modal (no `role="dialog"`, no focus trap): it’s a supplementary preview, so the trigger keeps focus. Keeps itself open while the pointer is over it and closes shortly after the pointer leaves. Base classes mirror Popover’s surface.	source
`HoverCardTrigger`	Trigger - carries the positioning-anchor ref and the hover/focus intent. Opens the card on pointer enter (after `openDelay`) or immediately on focus; closes it on pointer leave (after `closeDelay`) or on blur. `asChild` merges the behaviour onto the child element, which must forward `ref` to its DOM node (a child that drops `ref` leaves the card unanchored - `Floating` warns).	source
`IconButton`	Render an icon-only button with a hover tooltip.	source
`Input`	Render a text input.	source
`InputOTP`	Render a segmented one-time-code 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
`Menubar`	Menubar root - the horizontal `role="menubar"` container that owns open + roving-focus state.	source
`MenubarContent`	The dropdown surface for one menu - reuses the `DropdownMenuContent` machinery.	source
`MenubarItem`	A selectable item inside a menu - `role="menuitem"`; selecting it closes the menu.	source
`MenubarMenu`	One menu in the bar - a `DropdownMenu` whose open state the bar controls.	source
`MenubarSeparator`	A horizontal divider between groups of items inside a menu.	source
`MenubarTrigger`	Top-level menu button - `role="menuitem"` with `aria-haspopup`, part of the roving-focus group.	source
`Meter`	Render a semantic gauge with a fill sized to the clamped value.	source
`NavigationMenu`	Navigation root: a `<nav>` landmark that owns which item’s panel is open.	source
`NavigationMenuContent`	The dropdown panel for one item: absolutely positioned, rendered only while open.	source
`NavigationMenuItem`	One item in the bar: an `<li>` that provides its value to its trigger/panel.	source
`NavigationMenuLink`	A single navigable link: used inside a panel or as a plain top-level item.	source
`NavigationMenuList`	The horizontal list container: a flex `<ul>` of items.	source
`NavigationMenuTrigger`	The button that toggles its item’s panel: `aria-expanded` + `aria-controls`, with a caret.	source
`NumberField`	Render a numeric input that clamps to `[min, max]` and steps by `step`.	source
`Pagination`	The paging landmark: a centered `role="navigation"` region.	source
`PaginationContent`	The list of page items: a horizontal `<ul>`.	source
`PaginationEllipsis`	A non-interactive gap marker between page ranges.	source
`PaginationItem`	A single page slot: an `<li>` wrapping a link or ellipsis.	source
`PaginationLink`	A page link: highlighted when `isActive`, otherwise hover-highlighted.	source
`PaginationNext`	A “Next ›” link: a labelled `PaginationLink` variant.	source
`PaginationPrevious`	A ”‹ Previous” link: a labelled `PaginationLink` variant.	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; the positioning anchor. `asChild` merges onto the child element, which must forward `ref` to its DOM node. The generic overload lets an `asChild` trigger carry an element-specific ref (e.g. an `<a>`); `aria-haspopup` is supplied by the adapter’s trigger.	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
`ScrollArea`	A styled, native-overflow scroll container.	source
`ScrollFade`	A scroll container with auto edge-fade affordances.	source
`Select`	Select root - owns the selected value, disclosure state, and option registry.	source
`SelectContent`	Listbox surface - rendered below the trigger while open.	source
`SelectGroup`	Groups related options. Add one SelectLabel or an explicit accessible name.	source
`SelectItem`	A selectable option nested within the root’s single SelectContent.	source
`SelectLabel`	Non-interactive label; labels its nearest SelectGroup when present.	source
`SelectSeparator`	Divider between option groups.	source
`SelectTrigger`	Trigger - keeps focus while controlling and navigating the listbox.	source
`SelectValue`	Displays custom children, the selected label, or a placeholder.	source
`Separator`	A horizontal (default) or vertical divider rule.	source
`Shimmer`	Render shimmering text.	source
`Skeleton`	Render an animated placeholder bar.	source
`Slider`	Render a range slider.	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 - delegates selection to the adapter, owns the size + look.	source
`TabsItem`	Individual tab - renders as a button, or an anchor when `href` is set. The adapter’s `tabs.Tab` supplies the `role="tab"` / `aria-selected` / `data-state` mechanics and composes selection onto the caller’s `onClick` (caller’s runs first, then the tab activates); this skin renders the visual pill and forwards native props/ref.	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
`Toast`	A single toast surface. Renders as a live region and arms an auto-dismiss timer that calls `onClose` after `duration`. Compose `ToastTitle`, `ToastDescription` and `ToastClose` inside it.	source
`ToastClose`	Manual close button for `<Toast>` (renders an ✕ glyph when given no children).	source
`ToastDescription`	Secondary supporting line for `<Toast>`.	source
`Toaster`	Render the active adapter’s viewport for `<ToastProvider viewport="manual">`.	source
`ToastProvider`	Holds the toast queue (via the active adapter: builtin by default) and mounts the viewport. Wrap the part of the app that needs notifications.	source
`ToastTitle`	Heading line for `<Toast>`.	source
`ToastViewport`	Render the active adapter’s viewport for `<ToastProvider viewport="manual">`.	source
`Toggle`	Render a pressed toggle button.	source
`ToggleGroup`	Render a group of toggles with shared selection (via the adapter engine).	source
`ToggleGroupItem`	A single toggle within a `ToggleGroup`.	source
`Toolbar`	A container that groups controls behind one tab stop with roving focus. The roving MECHANICS come from the active adapter’s `toolbar` slot (`useAdapter().toolbar`): builtin by default, swappable via `UIAdapterProvider`.	source
`ToolbarButton`	A ghost icon button that participates in the toolbar’s roving focus.	source
`ToolbarLink`	An anchor styled like a `ToolbarButton` that joins the roving focus.	source
`ToolbarSeparator`	A thin rule dividing groups of items within a toolbar.	source
`Tooltip`	Tooltip root that owns trigger interaction, IDs, and dismissal state.	source
`TooltipContent`	Tooltip content, portalled and collision-positioned against its trigger.	source
`TooltipProvider`	Provide a shared opening delay. The default is 700 ms and values are clamped to 0-5000 ms.	source
`TooltipTrigger`	Tooltip trigger. The default span is keyboard-focusable; `asChild` merges behavior onto one child element and retains that element’s focus contract.	source
`UIAdapterProvider`	Provide (a partial) UI-primitive adapter to the subtree.	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 response-scoped CSP nonce for framework-owned inline elements. During SSR it comes from the isolated render context; in the browser it is recovered from a framework-generated element during hydration and SPA updates.	source
`getFileTypeLabel`	Human label for a file extension, falling back to the media type.	source
`useAdapter`	Resolve the active UI-primitive adapter. Never returns null (defaults to builtin).	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
`useDocumentNonce`	Read the nonce from the Suspense-safe server provider or the browser DOM.	source
`useToast`	Returns `{ toast, dismiss }`. Call `toast(options)` to enqueue (returns the new id), `toast.custom((id) => node)` for a fully custom toast, and `dismiss(id)` to remove one early. Must be used within a `ToastProvider`.	source
`useTokenScope`	Returns a `ref` to attach to any element inside the token scope, plus a `getContainer()` that resolves the nearest scope element (falling back to `document.body`). Third-party adapters use this to feed their portal `container` (e.g. Base UI’s `<Portal container={…}>`).	source

Types

Name	Description	Source
`AccordionContentProps`	Props accepted by `<AccordionContent>`.	source
`AccordionItemProps`	Props accepted by `<AccordionItem>`.	source
`AccordionProps`		source
`AccordionTriggerProps`	Props accepted by `<AccordionTrigger>`.	source
`AlertDialogActionProps`	Props accepted by `<AlertDialogAction>`.	source
`AlertDialogCancelProps`	Props accepted by `<AlertDialogCancel>`.	source
`AlertDialogContentProps`	Props accepted by `<AlertDialogContent>`.	source
`AlertDialogDescriptionProps`	Props accepted by `<AlertDialogDescription>`.	source
`AlertDialogFooterProps`	Props accepted by `<AlertDialogFooter>`.	source
`AlertDialogProps`	Props accepted by `<AlertDialog>`.	source
`AlertDialogTitleProps`	Props accepted by `<AlertDialogTitle>`.	source
`AlertDialogTriggerProps`	Props accepted by `<AlertDialogTrigger>`.	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
`AspectRatioProps`	Props accepted by `<AspectRatio>`.	source
`AutocompleteContentProps`	Props accepted by `<AutocompleteContent>`.	source
`AutocompleteInputProps`	Props accepted by `<AutocompleteInput>`.	source
`AutocompleteItemProps`	Props accepted by `<AutocompleteItem>`.	source
`AutocompleteProps`	Props accepted by `<Autocomplete>` (the root; owns the input text + open state).	source
`AvatarProps`	Props accepted by `<Avatar>`.	source
`BadgeProps`	Props accepted by `<Badge>`.	source
`BreadcrumbEllipsisProps`	Props accepted by `<BreadcrumbEllipsis>`.	source
`BreadcrumbItemProps`	Props accepted by `<BreadcrumbItem>`.	source
`BreadcrumbLinkProps`	Props accepted by `<BreadcrumbLink>`.	source
`BreadcrumbListProps`	Props accepted by `<BreadcrumbList>`.	source
`BreadcrumbPageProps`	Props accepted by `<BreadcrumbPage>`.	source
`BreadcrumbProps`	Props accepted by `<Breadcrumb>`.	source
`BreadcrumbSeparatorProps`	Props accepted by `<BreadcrumbSeparator>`.	source
`ButtonProps`	Props accepted by `<Button>`.	source
`CalendarProps`	Props accepted by `<Calendar>`.	source
`CardProps`	Props accepted by `<Card>`.	source
`CheckboxFieldProps`	Props accepted by `<CheckboxField>`.	source
`CheckboxProps`	Props accepted by `<Checkbox>`.	source
`CodeBlockMode`	Light/dark presentation mode forwarded to extension-owned renderers.	source
`CodeBlockProps`	Props accepted by `<CodeBlock>`.	source
`CodeBlockRendererProviderProps`	Props accepted by `CodeBlockRendererProvider`.	source
`CodeBlockRenderers`	Optional rich rendering capabilities supplied outside core.	source
`CodeDiagramRendererProps`	Framework-neutral input for an extension-owned diagram renderer.	source
`CodeSyntaxRendererProps`	Framework-neutral input for an extension-owned syntax renderer.	source
`CollapsibleProps`	Props accepted by `<Collapsible>`.	source
`ColorModeProviderProps`		source
`ComboboxContentProps`	Props accepted by `<ComboboxContent>`.	source
`ComboboxInputProps`	Props accepted by `<ComboboxInput>`.	source
`ComboboxItemProps`	Props accepted by `<ComboboxItem>`.	source
`ComboboxProps`	Props accepted by `<Combobox>` (the root; owns query/open/value state).	source
`CommandDialogProps`	Props accepted by `<CommandDialog>`.	source
`CommandInputProps`	Props accepted by `<CommandInput>`.	source
`CommandItemProps`	Props accepted by `<CommandItem>`.	source
`ContextMenuContentProps`	Props accepted by `<ContextMenuContent>`.	source
`ContextMenuItemProps`	Props accepted by `<ContextMenuItem>`.	source
`ContextMenuProps`	Props accepted by `<ContextMenu>`.	source
`ContextMenuSlottedItemProps`	Literal slotted item contract with element-specific refs and events.	source
`ContextMenuSlottedTriggerProps`	Literal slotted trigger contract with an element-specific ref and events.	source
`ContextMenuTriggerProps`	Props accepted by `<ContextMenuTrigger>`.	source
`DatePickerContentProps`	Props accepted by `<DatePickerContent>`.	source
`DatePickerProps`	Props accepted by `<DatePicker>`.	source
`DatePickerTriggerProps`	Props accepted by `<DatePickerTrigger>`.	source
`DialogActionProps`	Props accepted by `<DialogAction>`.	source
`DialogContentProps`	Props accepted by `<DialogContent>`.	source
`DialogProps`	Props accepted by `<Dialog>`.	source
`DisclosureParts`	Role-tagged slots an adapter provides for a single open/close disclosure (the Collapsible primitive; Accordion composes one disclosure per item). The archetype is the overlay disclosure minus the portal/positioning: one or more triggers toggle a region whose node remains mounted and is hidden while closed. Public Collapsible parts coordinate their realized IDs without inspecting the consumer’s React tree, then pass synchronized `aria-controls` and `aria-labelledby` props through these slots. Adapters must preserve those explicit relationships while supplying their own defaults for direct slot use.	source
`DisclosureProps`	Normalized disclosure state shared by every overlay primitive. Matches `useDisclosure` exactly; adapters drop any engine-specific extras (e.g. Base UI’s 2nd `eventDetails` arg on `onOpenChange`).	source
`DrawerContentProps`	Props accepted by `<DrawerContent>`.	source
`DrawerProps`	Props accepted by `<Drawer>`.	source
`DropdownMenuContentProps`	Props accepted by `<DropdownMenuContent>`.	source
`DropdownMenuItemProps`	Backward-compatible props accepted by `<DropdownMenuItem>`.	source
`DropdownMenuProps`	Props accepted by `<DropdownMenu>`.	source
`DropdownMenuSlottedItemProps`	Slotted-element props accepted by `<DropdownMenuItem>`.	source
`DropdownMenuSlottedTriggerProps`	Literal slotted trigger contract with an element-specific ref.	source
`DropdownMenuTriggerProps`	Trigger - toggles the menu; the positioning anchor. `asChild` merges onto the child element, which must forward `ref` to its DOM node.	source
`FieldControlProps`	Props accepted by `<FieldControl>`.	source
`FieldDescriptionProps`	Props accepted by `<FieldDescription>`.	source
`FieldErrorProps`	Props accepted by `<FieldError>`.	source
`FieldLabelProps`	Props accepted by `<FieldLabel>`.	source
`FieldProps`	Props accepted by `<Field>`.	source
`FileTypeProps`	Props accepted by `<FileType>` / `<FileTypeThumb>`.	source
`HoverCardContentProps`	Props accepted by `<HoverCardContent>`.	source
`HoverCardProps`	Props accepted by `<HoverCard>`.	source
`HoverCardTriggerProps`	Props accepted by `<HoverCardTrigger>`.	source
`IconButtonProps`	Props accepted by `<IconButton>`.	source
`InputOTPProps`	Props accepted by `<InputOTP>`.	source
`InputProps`	Props accepted by `<Input>`.	source
`LabelProps`	Props accepted by `<Label>`.	source
`ListItemProps`	Props accepted by `ListItem`. Standalone clickable rows receive button semantics and keyboard activation by default. Rows with a trailing action should use `onActivate` so both controls have native, sibling semantics.	source
`ListLabelProps`	Props accepted by `ListLabel`.	source
`ListProps`	Props accepted by `List`.	source
`MenubarContentProps`	Props accepted by `<MenubarContent>`.	source
`MenubarItemProps`	Props accepted by `<MenubarItem>`.	source
`MenubarMenuProps`	Props accepted by `<MenubarMenu>`.	source
`MenubarProps`	Props accepted by `<Menubar>`.	source
`MenubarSeparatorProps`	Props accepted by `<MenubarSeparator>`.	source
`MenubarTriggerProps`	Props accepted by `<MenubarTrigger>`.	source
`MeterProps`	Props accepted by `<Meter>`.	source
`NavigationMenuContentProps`	Props accepted by `<NavigationMenuContent>`.	source
`NavigationMenuItemProps`	Props accepted by `<NavigationMenuItem>`.	source
`NavigationMenuLinkProps`	Props accepted by `<NavigationMenuLink>`.	source
`NavigationMenuListProps`	Props accepted by `<NavigationMenuList>`.	source
`NavigationMenuProps`	Props accepted by `<NavigationMenu>`.	source
`NavigationMenuTriggerProps`	Props accepted by `<NavigationMenuTrigger>`.	source
`NumberFieldProps`	Props accepted by `<NumberField>`.	source
`PaginationContentProps`	Props accepted by `<PaginationContent>`.	source
`PaginationEllipsisProps`	Props accepted by `<PaginationEllipsis>`.	source
`PaginationItemProps`	Props accepted by `<PaginationItem>`.	source
`PaginationLinkProps`	Props accepted by `<PaginationLink>`.	source
`PaginationNextProps`	Props accepted by `<PaginationNext>`.	source
`PaginationPreviousProps`	Props accepted by `<PaginationPrevious>`.	source
`PaginationProps`	Props accepted by `<Pagination>`.	source
`PartialUIAdapter`	A partial adapter map: unspecified keys fall back to `builtin`, so a consumer can override one primitive and leave the rest zero-dependency. This is what `UIAdapterProvider` accepts.	source
`PillProps`	Props accepted by `<Pill>`.	source
`PopoverContentProps`	Props accepted by `<PopoverContent>`.	source
`PopoverProps`	Props accepted by `<Popover>`.	source
`PopoverSlottedTriggerProps`	Literal slotted trigger contract with an element-specific `ref` - for `asChild` triggers whose child is not a `<button>` (e.g. an `<a>`), so the consumer’s ref keeps its precise element type.	source
`PopoverTriggerProps`	Props accepted by `<PopoverTrigger>`.	source
`ProgressBarProps`	Props accepted by `<ProgressBar>`.	source
`RadioFieldProps`	Props accepted by `<RadioField>`.	source
`RadioProps`	Props accepted by `<Radio>`.	source
`ScrollAreaProps`	Props accepted by `<ScrollArea>`.	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
`SeparatorProps`	Props accepted by `<Separator>`.	source
`ShimmerProps`	Props accepted by `<Shimmer>`.	source
`SkeletonProps`	Props accepted by `<Skeleton>`.	source
`SliderProps`	Props accepted by `<Slider>`.	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
`ToastAction`	A toast button: a label plus what to do when it’s pressed.	source
`ToastFn`	Imperative enqueue function: call `toast(options)`, or `toast.custom(render)`.	source
`ToastOptions`	Options accepted by `toast(...)` when enqueuing a notification.	source
`ToastParts`	Toast is imperative (a queue + hook), not a floating surface, so its adapter slot is `Provider` + `useToast` rather than role-tagged render slots. The builtin holds a queue and mounts a viewport; a Sonner adapter would mount `<Toaster/>` and map `useToast().toast` onto Sonner’s `toast()`.	source
`ToastProps`	Props accepted by `<Toast>`.	source
`ToastProviderProps`	Normalized queue and viewport options every toast adapter provider accepts.	source
`ToastState`	The imperative Toast API a skin part reads from inside a `ToastProvider`.	source
`ToastVariant`	One of the `cva` colour schemes a toast can take.	source
`ToastViewportProps`	Normalized props for an adapter-owned manual toast viewport.	source
`ToggleGroupItemProps`	Props accepted by `<ToggleGroupItem>`.	source
`ToggleGroupParts`	Role-tagged slots an adapter provides for the ToggleGroup primitive: a set of pressable items with shared `single` / `multiple` selection. The Root owns the selection state machine; the Item self-wires through the adapter’s internal context (reads its pressed state, toggles on click). The skin keeps only the visual classes; `data-state="on"\|"off"` on each Item is the styling hook.	source
`ToggleGroupProps`	Props accepted by `<ToggleGroup>`.	source
`ToggleProps`	Props accepted by `<Toggle>`.	source
`ToolbarButtonProps`	Props accepted by `<ToolbarButton>`.	source
`ToolbarLinkProps`	Props accepted by `<ToolbarLink>`.	source
`ToolbarParts`	Role-tagged slots an adapter provides for the Toolbar primitive: a `role="toolbar"` container sharing one tab stop, with roving-tabindex arrow-key navigation over its items. The Root owns the roving mechanics; each Item registers as a roving stop (engines rove their own item components, so the skin routes its buttons/links through `Item`). Separators stay pure skin.	source
`ToolbarProps`	Props accepted by `<Toolbar>`.	source
`ToolbarSeparatorProps`	Props accepted by `<ToolbarSeparator>`.	source
`TooltipContentProps`	Props accepted by `<TooltipContent>`.	source
`UIAdapter`	The adapter surface. Each new primitive must also be added to the explicit composition in `context.tsx`, which prevents `undefined` overrides from erasing inherited or builtin slots.	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
`scrollAreaVariants`		source
`selectTriggerVariants`		source
`switchTrackVariants`		source
`textareaVariants`		source
`toolbarVariants`		source
`useAppShell`		source
`useColorMode`		source

Deep imports

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

`veryfront/ui/adapter`

UI primitive-adapter contract (RFC 0001: bring-your-own UI primitive adapters). A behavioural primitive is split into a Skin (Tailwind / cva / [var(--token)] classes, authored once) and Mechanics (focus, dismiss, positioning, ARIA, keyboard) supplied by a swappable adapter. The contract is role-tagged component slots + normalized controlled or uncontrolled disclosure props (open, defaultOpen, onOpenChange): deliberately NOT prop-getters (those only fit React Aria’s hooks; Base UI / Ariakit invert composition via render). Every adapter: the zero-dependency builtin and any third-party engine (Base UI, Radix, React Aria): satisfies these exact shapes, so one set of skin classes works everywhere. Types only. No runtime, no engine imports: this file is safe to pull into veryfront/ui/adapter from a consumer-authored adapter.

import type { ComboboxParts, ComboboxState, DialogParts } from "veryfront/ui/adapter";

Types

Name	Description	Source
`ComboboxParts`	Role-tagged slots an adapter provides for the Combobox primitive.	source
`ComboboxState`	Combobox state a skin part reads. RICH by design - a Combobox is a text `role="combobox"` input filtering a `role="listbox"`, so the adapter owns the typed `query`, the substring `matches` filter, the option registry, and the `activeId` (`aria-activedescendant`) that keyboard navigation walks. Filtering lives in the ADAPTER, not the skin, because active-descendant nav must move over the filtered set - the two are one state machine. The skin’s items register `(id, value, text)` and read `matches` / `activeId` to hide/highlight; the skin never owns the filter logic.	source
`DialogParts`	Role-tagged slots an adapter provides for the Dialog primitive (Drawer is a skin over the same modal mechanics via its own instance). The builtin wraps `createModalSurfaceParts` (overlay + centered panel, Escape / overlay-click dismiss, focus containment + restoration); a Base UI / Radix engine maps these onto its own Dialog parts.	source
`DisclosureParts`	Role-tagged slots an adapter provides for a single open/close disclosure (the Collapsible primitive; Accordion composes one disclosure per item). The archetype is the overlay disclosure minus the portal/positioning: one or more triggers toggle a region whose node remains mounted and is hidden while closed. Public Collapsible parts coordinate their realized IDs without inspecting the consumer’s React tree, then pass synchronized `aria-controls` and `aria-labelledby` props through these slots. Adapters must preserve those explicit relationships while supplying their own defaults for direct slot use.	source
`DisclosureProps`	Normalized disclosure state shared by every overlay primitive. Matches `useDisclosure` exactly; adapters drop any engine-specific extras (e.g. Base UI’s 2nd `eventDetails` arg on `onOpenChange`).	source
`DrawerParts`	Role-tagged slots an adapter provides for the Drawer primitive: the same modal mechanics as Dialog on a distinct instance, plus an edge `direction`. The builtin renders a static edge sheet (the skin positions it); a Vaul specialist adapter drives real drag-to-dismiss / snap points off the same slots.	source
`ModalState`	Normalized modal state a Dialog/Drawer skin part reads from its adapter. Beyond open/close it carries the label-registration surface so `DialogTitle` / `DialogDescription` can register their ids and the adapter wires the panel’s `aria-labelledby` / `aria-describedby` (the builtin does this; an engine adapter maps these onto its own labelling). Structurally a subset of the builtin `createModalSurfaceParts` context.	source
`MultipleToggleGroupRootProps`	Multiple-selection adapter root.	source
`PartialUIAdapter`	A partial adapter map: unspecified keys fall back to `builtin`, so a consumer can override one primitive and leave the rest zero-dependency. This is what `UIAdapterProvider` accepts.	source
`PopoverParts`	Role-tagged slots an adapter provides for the Popover primitive: an anchored floating surface with a toggle trigger. The builtin wraps `createAnchoredSurfaceParts` (collision-aware positioning, Escape / outside dismiss, focus return, token-scope portal); an engine maps these onto its own Popover parts.	source
`SingleToggleGroupRootProps`	Single-selection adapter root.	source
`TabsParts`	Role-tagged slots an adapter provides for the Tabs primitive: a `role="tablist"` owning the selected value, and `role="tab"` items that select on click and publish `aria-selected` + `data-state="active"\|"inactive"`. The builtin is panel-less (the consumer renders content by value); the skin owns the size variant + visual look via `asChild`.	source
`ToastParts`	Toast is imperative (a queue + hook), not a floating surface, so its adapter slot is `Provider` + `useToast` rather than role-tagged render slots. The builtin holds a queue and mounts a viewport; a Sonner adapter would mount `<Toaster/>` and map `useToast().toast` onto Sonner’s `toast()`.	source
`ToastProviderProps`	Normalized queue and viewport options every toast adapter provider accepts.	source
`ToastState`	The imperative Toast API a skin part reads from inside a `ToastProvider`.	source
`ToastViewportProps`	Normalized props for an adapter-owned manual toast viewport.	source
`ToggleGroupParts`	Role-tagged slots an adapter provides for the ToggleGroup primitive: a set of pressable items with shared `single` / `multiple` selection. The Root owns the selection state machine; the Item self-wires through the adapter’s internal context (reads its pressed state, toggles on click). The skin keeps only the visual classes; `data-state="on"\|"off"` on each Item is the styling hook.	source
`ToggleGroupRootProps`	Discriminated selection contract implemented by every ToggleGroup adapter.	source
`ToolbarParts`	Role-tagged slots an adapter provides for the Toolbar primitive: a `role="toolbar"` container sharing one tab stop, with roving-tabindex arrow-key navigation over its items. The Root owns the roving mechanics; each Item registers as a roving stop (engines rove their own item components, so the skin routes its buttons/links through `Item`). Separators stay pure skin.	source
`UIAdapter`	The adapter surface. Each new primitive must also be added to the explicit composition in `context.tsx`, which prevents `undefined` overrides from erasing inherited or builtin slots.	source

`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/adapter`

Types

`veryfront/ui/icons`

Components

Types

​Import

​Examples

​Compose primitives

​Light/dark mode

​Exports

​Components

​Functions

​Types

​Constants

​Deep imports

​veryfront/ui/adapter

​Types

​veryfront/ui/icons

​Components

​Types

Import

Examples

Compose primitives

Light/dark mode

Exports

Components

Functions

Types

Constants

Deep imports

`veryfront/ui/adapter`

Types

`veryfront/ui/icons`

Components

Types