Prototyper UI
Prototyper UI
Gallery

Getting Started

IntroductionGetting StartedInstallationCLI ReferenceMachine Mode PackageThemingFormsIntroductionDesign PrinciplesDesign Tokens

For AI Agents

Agent SetupLLMs.txtMCP ServerAgent Skills

Live Canvas

Getting StartedMCP Tools ReferenceAPI Reference

Compose

ComposeGetting StartedSpec FormatDynamic ExpressionsStreamingActions & EventsConditional RenderingValidationDX HelpersType SafetyStore AdaptersPrompt EngineeringComponent CatalogDevToolsCode ExportMCP IntegrationAPI Reference

Components

Actions

ButtonSegmented ControlToggleToggle GroupToolbar

Forms

AutocompleteCheckboxCheckbox GroupColor PickerComboboxFieldFieldsetFormFormFieldInputInputGroupLabelNumberFieldRadio GroupSelectSliderSwitchTextFieldTextarea

Overlays

Alert DialogCommand PaletteContext MenuDialogDrawerMenuMenubarPopoverHover CardTooltip

Navigation

BreadcrumbNavigation MenuTabs

Layout

AccordionCardCollapsibleColumnsContainerResizable PanelRowScroll AreaSectionSeparator

Data Display

AvatarBadgeTree View

Feedback

AlertMeterProgressSkeletonSpinnerToastChangelog

Changelog

Version history and release notes for Prototyper UI.

v0.5.0

Initial public release

Components

  • 46+ components covering actions, forms, overlays, navigation, layout, data display, and feedback
  • Built on Base UI primitives — accessible, unstyled foundations with Prototyper UI's design layer on top
  • Compound component pattern with flat named exports
  • data-slot attributes on every element for targeted CSS customization

Design System

  • OKLCH color tokens — perceptually uniform colors with automatic derived states via color-mix()
  • Role-based surfaces — surface, surface-secondary, surface-tertiary, field-background, overlay
  • Semantic shadows — three tiers (surface, field, overlay) that adapt to dark mode
  • Dark mode — full token overrides via .dark class, with zeroed shadows and inset glow effects
  • CSS utilities — focus-ring, focus-field-ring, invalid-field-ring, status-disabled, status-pending
  • Fluid easing — signature --ease-out-fluid curve, CSS-first animations (no framer-motion)

CLI (@prototyperco/cli)

  • init — Set up tokens, utilities, and project config
  • add — Install components with interactive picker and dependency resolution
  • update — Check and apply component updates from the registry
  • doctor — Verify project health and configuration
  • machine-mode init — Scaffold URL-driven machine mode endpoints
  • JSON mode (--json) for LLM-driven setup workflows
  • Compose scaffolding (--compose, add compose)

MCP Server (@prototyperco/mcp)

  • 10 tools for AI assistants: list_components, get_component_docs, get_component_source, get_theme, search_docs, and more
  • Works with Claude Code, Cursor, and other MCP-compatible tools
  • Caching with TTL for fast repeated queries

Compose (@prototyperco/compose)

  • JSON-patch streaming renderer for AI-generated interfaces
  • Anthropic and OpenAI provider support
  • Catalog system for component props, events, and slots
  • Real-time state management with optimistic updates

LLM Endpoints

  • /llms.txt — Project overview for LLMs
  • /llms-full.txt — Complete documentation in plain text
  • /llms-components.txt — All component docs concatenated
  • /llms/[component] — Individual component documentation
  • /prototyper-tokens.css — Extractable design tokens

Registry

  • shadcn-compatible registry at prototyper-ui.com/r/{component}.json
  • Works with both bunx @prototyperco/cli add and npx shadcn@latest add
  • Automatic dependency resolution for inter-component dependencies

Toast

notification system with type variants

On this page

v0.5.0ComponentsDesign SystemCLI (@prototyperco/cli)MCP Server (@prototyperco/mcp)Compose (@prototyperco/compose)LLM EndpointsRegistry