Foundation Primitives

These components use the existing Base UI runtime and Vibecape design tokens. No Shadcn visual styles or runtime dependencies are required.

<Accordion><AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger><AccordionContent>Content</AccordionContent></AccordionItem></Accordion>
<Alert variant="destructive"><AlertTitle>Delete project</AlertTitle></Alert>
<Progress value={60}><ProgressTrack><ProgressIndicator /></ProgressTrack></Progress>
<Avatar><AvatarImage src={avatar_url} /><AvatarFallback>DC</AvatarFallback></Avatar>
<InputGroup><InputGroupAddon>⌕</InputGroupAddon><InputGroupInput placeholder="Search" /></InputGroup>

Also available: AlertDialog, Drawer, Pagination, RadioGroup, ScrollArea, and Table.

Advanced interaction primitives

FileUpload only reports browser File objects to the host. DataTable receives data and column definitions, keeping sorting, data fetching, and selection ownership in the application. HoverCard provides a compact delayed summary, and ResizablePanelGroup composes adjustable work areas.

<FileUpload files={files} onFilesChange={set_files} accept="image/*" />
<DataTable data={rows} columns={columns} getRowId={(row) => row.id} />
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel defaultSize="30%">Navigation</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel>Content</ResizablePanel>
</ResizablePanelGroup>

Color themes

Every primitive consumes the same semantic variables: background, foreground, surface-subtle, control-surface, divider, interaction-hover, interaction-selected, and primary. Host applications set the theme through ThemeContainer, without changing component classes.

<ThemeContainer variant="slate" mode="dark">
  <Application />
</ThemeContainer>

The showcase keeps its page chrome fixed and wraps only the component display area in ThemeContainer. It includes neutral, zinc, slate, stone, and blue presets, each compatible with light and dark appearance.

Theme container

ThemeContainer is the theme boundary for the complete component tree. It provides colors, control surfaces, borders, interaction states, and floating tokens together. Individual components do not receive theme props or theme-specific classes.

import { Button, Input, ThemeContainer } from "@downcity/ui";

export function ThemedApplication() {
  return (
    <ThemeContainer variant="slate" mode="dark">
      <Input placeholder="Project name" />
      <Button variant="primary">Save</Button>
    </ThemeContainer>
  );
}

variant supports neutral, zinc, slate, stone, and blue; mode supports light and dark. Dropdown, ContextMenu, Select, Popover, Tooltip, HoverCard, Dialog, AlertDialog, Sheet, Drawer, and ImagePreview overlays automatically mount inside ThemeContainer, so no separate theme synchronization is required. The showcase validates every component in four ThemeContainer blocks: Neutral Light, Neutral Dark, Blue Light, and Blue Dark.