Choose components and blocks

Components

Foundations

• button
• input
• textarea
• checkbox
• switch
• badge
• card
• alert
• avatar
• progress
• separator
• skeleton
• spinner

Product primitives

• filter-chip
• status-pill
• empty-state
• color-dot
• tag-chip
• legend-item
• list-row
• list-item
• color-swatch
• status-badge
• department-dot

Blocks

• blocks-dashboard-panel
• blocks-filter-toolbar
• blocks-member-list

The source of truth is registry.json. Built registry payloads are generated in public/r.

Use a local component

After adding button, import it from the generated source directory. The alias below assumes your components.json uses @/components/ui; adapt it to your configured alias.

1import { Button } from "@/components/ui/button";
2 
3export function SaveAction() {
4  return <Button variant="primary" size="md" onPress={() => console.log("Save requested")}>
5    Save
6  </Button>;
7}

Button behavior

The source exposes onPress, isPending, isIconOnly, fullWidth, and a state render callback, alongside native button attributes. The available variants are primary, secondary, tertiary, outline, ghost, danger and danger-soft; sizes are sm, md and lg. isPending disables the control. Provide an accessible label for an icon-only button.

These component details were checked against this source commit, because component source is fetched separately from the npm installer. The repository currently has no v0.1.2 tag; pin the verified commit instead of that nonexistent tag.