UI Components

@puzzle-ui/ui provides reusable React components for building interfaces with consistent theme tokens, layout, and interaction patterns. Use this index to find a component's examples, props, and accessibility guidance.

Getting startedCopy Anchor Link

Follow the Getting Started guide for installation and wrap your application in the Theme provider. Import components from @puzzle-ui/ui:

import { Theme } from "@puzzle-ui/theme";
import { Button, Stack, Text } from "@puzzle-ui/ui";

const App = () => (
  <Theme>
    <Stack direction="col" gap="sm">
      <Text>Build your interface with Puzzle.</Text>
      <Button>Get started</Button>
    </Stack>
  </Theme>
);

ActionsCopy Anchor Link

Trigger actions and group related controls.

• Button
• Button Group
• Toggle Group

Data displayCopy Anchor Link

Present content, identities, status, and loading states.

• Alert
• Avatar
• Badge
• Card
• Empty State
• Image
• Paper
• Progress
• Rating
• Skeleton

EditorsCopy Anchor Link

Edit rich text and display structured documents.

• Text Editor, Toolbar, and Renderer

FormsCopy Anchor Link

Collect input, offer choices, and compose labeled fields.

• Autocomplete
• Checkbox
• Color Picker
• Date Picker
• File Upload
• Form Field
• Input Group
• Label
• Number Input
• Radio Group
• Select
• Slider
• Stepper
• Switch
• Text Area Input
• Text Input
• Time Picker
• Token Input

LayoutCopy Anchor Link

Structure pages, arrange content, and manage scrolling or resizable regions.

• App Bar
• Aspect Ratio
• Background
• Bottom Navigation
• Breadcrumbs
• Collapsable Sidebar
• Container
• Page Layout
• Resizable Panels
• Scroll Area
• Section
• Section Stack
• Separator
• Sidebar
• Stack

NavigationCopy Anchor Link

Move between destinations, browse collections, and organize related content.

• Accordion
• Carousel
• Link
• Pagination
• Tabs
• Tree View

OverlaysCopy Anchor Link

Show contextual content, modal interactions, menus, and notifications.

• Backdrop
• Command
• Context Menu
• Dialog
• Drawer
• Dropdown Menu
• Notification
• Popout
• Popover
• Portal
• Tooltip

TypographyCopy Anchor Link

Apply theme typography while keeping semantic headings and readable body copy.

• Heading
• Text

UtilitiesCopy Anchor Link

Preview components, control document scrolling, and animate transitions.

• Preview
• Scroll Lock
• Transition

ThemingCopy Anchor Link

Components consume shared CSS custom properties rather than defining a separate theme system. See Theme for an overview, Design Tokens for customization, and Colors for light, dark, and scoped color schemes.