#Component Library

@krate/components is a shadcn/ui-style set of accessible UI components built on the Krate runtime. To recolour them, override --krate-primary — see Theming Components.

import { Button, Card, CardGrid, Badge, Aside, Steps, Tabs, Tooltip } from '@krate/components';

#Layout & content

#Form controls

#Overlays & navigation

#Feedback & display

#Zero-JS compound components

The interactive components use Krate's compiler-erased CSS signals and a namespaced part API, so they ship no client JavaScript. Compose them with dotted parts and literal values:

<Accordion defaultValue="q1">
  <Accordion.Item>
    <Accordion.Trigger value="q1">Question</Accordion.Trigger>
    <Accordion.Content value="q1">Answer</Accordion.Content>
  </Accordion.Item>
</Accordion>

This applies to Tabs, Accordion/AccordionMultiple, Collapsible, RadioGroup, ToggleGroup/ToggleGroupMultiple, DropdownMenu, Popover, Dialog, AlertDialog, and Sheet. See CSS Scopes for the model.

Switch, Checkbox, Progress, Select, Tooltip, and HoverCard are built on native elements or pure CSS and need no signals at all.

Every compound component is used namespaced — Breadcrumb.List, Table.Row, Steps.Step, Form.Field, FileTree.Folder, Tabs.Trigger, Dialog.Content, and so on. The flat exports (BreadcrumbList, TableRow, …) still work as deprecated aliases.

For data-driven option sets (options known only at runtime), use the native <Select options={…}/> component rather than a scope component.