LogoPuzzle

Interfaces,
beautifully composed.

A thoughtfully crafted React UI framework for developers who care about the details. Build accessible, consistent and beautiful interfaces without getting in your way.
Start building Explore components
✓TypeScript first✓Accessibility focused✓Open source
puzzle / playground
Interactive
Component showcase

Everything in its place.

A glimpse into what you can build.
Buttons
Button
Get startedExploreDocumentation
Preferences
Switch
Dark modeUse dark appearance
NotificationsReceive updates
Tasks
Checkbox
Project settings
Input
All components readyBuilt with Puzzle
✳
Thoughtful by designEvery detail matters.
✓
Accessible by defaultBuilt for everyone.
ONE DESIGN SYSTEMENDLESS POSSIBILITIESBUILT FOR REACTBUILT FOR NEXT.JSBUILT FOR TANSTACK START
Why Puzzle

Less boilerplate.
More building.

The foundations of a great interface, thoughtfully implemented so you can focus on creating great products.

Designed to compose

Build interfaces from small, predictable building blocks. Compose complex experiences without fighting the framework.

Accessibility first

Keyboard navigation, focus management, semantic markup and screen reader support are part of the foundation.

Developer experience

TypeScript-first APIs, predictable behavior and a consistent design system make development enjoyable.
The building blocks

Everything you need.
Nothing you don't.

A growing collection of carefully designed components. Each one built to work together as part of a consistent design system.Explore all components

Button

Trigger actions with clear sizes, variants, and loading states.

Button Group

Arrange related actions in a connected set of buttons.

Toggle Group

Select one or more options from a group of toggles.

Alert

Highlight important information, warnings, and errors.

Avatar

Represent people with profile images or initials.

Badge

Annotate content with a count, label, or status.

Card

Compose content with headers, media, actions, and footers.

Empty State

Explain missing content and offer a useful next step.

Image

Display responsive images with fitting and placeholders.

Paper

Place content on a simple themed surface.

Progress

Show activity with circular or linear progress indicators.

Rating

Display or collect a rating using familiar stars.

Skeleton

Reserve space with placeholders while content loads.

Text Editor

Edit rich text with a formatting toolbar and document renderer.

Autocomplete

Find and select options with searchable suggestions.

Checkbox

Select independent options with checked and mixed states.

Color Picker

Choose colors with swatches and editable color values.

Date Picker

Choose a date using a calendar and input field.

File Upload

Select files and communicate upload progress and errors.

Form Field

Connect inputs to labels, descriptions, and validation feedback.

Input Group

Compose inputs with leading or trailing content.

Label

Give form controls a clear, associated label.

Number Input

Enter numeric values with increment and decrement controls.

Radio Group

Choose a single option from a set of radio controls.

Select

Choose one or more values from a dropdown list.

Slider

Adjust a value along a track with optional marks.

Stepper

Guide users through the steps of a multi-stage flow.

Switch

Turn a setting on or off with a compact toggle.

Text Area Input

Collect longer messages and multi-line text.

Text Input

Collect single-line text with familiar input behavior.

Time Picker

Enter and select a time of day.

Token Input

Enter verification codes in individual character slots.

App Bar

Compose an application header with branding and navigation.

Aspect Ratio

Keep media and other content at a consistent aspect ratio.

Background

Add themed patterns, fades, and mesh backgrounds.

Bottom Navigation

Keep primary destinations within reach at the bottom of a view.

Breadcrumbs

Show the current location within a page hierarchy.

Collapsable Sidebar

Organize navigation in an expandable side panel.

Container

Constrain content width with consistent page gutters.

Page Layout

Compose page headers, sidebars, and main content regions.

Resizable Panels

Split content into panels with draggable resize handles.

Scroll Area

Contain overflowing content in a dedicated scroll region.

Section

Define page sections with themed spacing and surfaces.

Section Stack

Arrange page sections with consistent separation.

Separator

Separate related content horizontally or vertically.

Sidebar

Place supporting content and navigation beside the main view.

Stack

Arrange content with responsive direction, alignment, and gaps.

Accordion

Expand and collapse related sections of content.

Carousel

Browse items with slides, navigation, and pager controls.

Link

Navigate with themed links and optional router integration.

Pagination

Navigate between pages of a larger collection.

Tabs

Switch between related views using a tab list.

Tree View

Browse and select items in a hierarchical tree.

Backdrop

Dim the surrounding view behind focused content.

Command

Find actions through a searchable command list or dialog.

Context Menu

Offer contextual actions through a right-click menu.

Dialog

Present focused modal content with dismissal controls.

Drawer

Reveal supporting content in a sliding side panel.

Dropdown Menu

Offer grouped actions and choices in an anchored menu.

Notification

Deliver transient feedback with a provider and viewport.

Popout

Attach a contextual panel to a trigger.

Popover

Show interactive content in an anchored floating panel.

Portal

Render content outside its parent into a portal target.

Tooltip

Add a short explanation on hover or keyboard focus.

Heading

Apply heading styles independently of semantic level.

Text

Style body copy and supporting text with theme typography.

Preview

Present runnable component examples alongside their code.

Scroll Lock

Prevent background scrolling while an overlay is active.

Transition

Animate mounting and unmounting with transition templates.

Made for developers

Your ideas.
Without the friction.

Predictable APIs, powerful composition and a consistent design language. Puzzle gives you the building blocks to turn ideas into polished experiences.
01TypeScript-first

Excellent types and a predictable developer experience.

02Flexible by design

Customize and compose components to fit your product.

03Accessibility matters

Thoughtful interaction patterns and semantic foundations.

Welcome.tsx
TSX
import { Button, Card, Heading, Text } from "@puzzle/ui";

export function Welcome() {
  return (
    <Card>
      <Heading level="headline2">Welcome to Puzzle</Heading>
      <Text>Build something wonderful.</Text>
      <Button variant="primary">
        Get started
      </Button>
    </Card>
  );
}
Simple. Composable. Predictable.⌘ + C
Logo

Make something
remarkable.

Start building with Puzzle. Explore the components, create your design system and bring your ideas to life.
Get started with Puzzle