Prototyper UI

The UI framework for the AI era. 56 accessible components that agents can read, compose, and render.

---

Features

• Base UI primitives -- Built on @base-ui/react, the successor to Radix from the creators of Material UI. WCAG 2.1 AA compliance, keyboard navigation, and ARIA out of the box.
• OKLCH color system -- Perceptually uniform design tokens using OKLCH and color-mix(). One set of tokens controls your entire theme, including dark mode.
• 56 components -- Actions, forms, overlays, navigation, feedback, layout, and data display categories, all production-ready.
• CSS-first animations -- Smooth transitions with signature easing curves. No runtime animation library required.
• LLM-friendly -- Components are plain files that LLMs can read and modify. Dedicated endpoints (/llms.txt, /llms-full.txt) and an MCP server for AI-assisted workflows.
• shadcn-compatible Bun CLI -- Copy-paste distribution model with scripted commands and a full-screen terminal app. Components live in your project with no runtime dependency or lock-in.

Quick Start

The Prototyper UI CLI requires Bun 1.1 or newer.

Initialize Prototyper UI in your project:

bunx @prototyperco/cli init

This scaffolds the design tokens, utility functions, and Tailwind CSS configuration. Then add components:

bunx @prototyperco/cli add button

After init, open the terminal app or jump directly into the component browser:

bunx @prototyperco/cli
bunx @prototyperco/cli browse

Or use the shadcn CLI directly:

npx shadcn@latest add https://prototyper-ui.com/r/button.json

Import and use:

import { Button } from "@/components/ui/button";

export default function App() {
  return <Button variant="outline">Click me</Button>;
}

Components

Category	Components
Actions	Button, SegmentedControl, Toggle, ToggleGroup, Toolbar
Forms	Autocomplete, Checkbox, CheckboxGroup, ColorPicker, Combobox, Field, Fieldset, Form, Input, InputGroup, Label, NumberField, RadioGroup, Select, Slider, Switch, TextField, Textarea
Overlays	AlertDialog, CommandPalette, ContextMenu, Dialog, Drawer, Menu, Menubar, Popover, PreviewCard, Tooltip
Navigation	Breadcrumb, NavigationMenu, Tabs
Layout	Accordion, Card, Collapsible, ResizablePanel, ScrollArea, Separator
Data Display	Avatar, Badge, TreeView
Feedback	Alert, Meter, Progress, Skeleton, Spinner, Toast

Documentation

• Docs -- Full component documentation with live examples
• Live Canvas -- Interactive OKLCH theme editor and AI-to-browser design workspace
• Gallery -- All components at a glance

MCP Server

Add the Prototyper UI MCP server to Claude for AI-assisted component discovery:

claude mcp add prototyper-ui -- npx -y @prototyperco/mcp@latest

The server provides tools for listing components, retrieving docs and source code, fetching themes, and searching documentation.

Credits

Built on @base-ui/react by the MUI team. Uses Tailwind CSS v4, class-variance-authority, and Lucide icons.

License

MIT -- Protochase, Inc.