Prototyper UI
Beautiful, accessible components built on Base UI
Prototyper UI is the component library powering prototyper.co. Every component is built on Base UI—the successor to Radix, from the creators of Material UI and Floating UI.
Components are files you copy into your project. No runtime dependency, no hidden layers, no lock-in. Read the source, change anything, ship it as your own.
The design system uses OKLCH color tokens, role-based surface tiers, and consistent interaction patterns across every component. Dark mode, keyboard navigation, and WCAG 2.1 AA compliance are built in from the start.
Component Showcase
Real components, rendered live. Every component is accessible, composable, and beautifully styled out of the box.
Features
Beautiful, ready-to-use components built with simple patterns. Easy to customize and designed for both humans and AI — from accessible components to smooth animations.
Base UI native
Built on the most modern React primitive library. WCAG 2.1 AA compliance, keyboard navigation, and ARIA for free.
CLI & shadcn compatible
Set up with prototyper-ui init, add components interactively, or use the shadcn CLI. Full --json mode for LLM-driven workflows.
OKLCH design tokens
Perceptually uniform colors with role-based surfaces. One set of tokens controls everything.
Accessible
Components are built on Base UI primitives with full screen reader support and assistive technology compatibility.
Optimized for LLMs
Components are files LLMs can read and modify. Optimized for Prototyper, Cursor, Claude, and more.
Smooth animations
CSS-first transitions with signature easing curves and micro-interactions that work out of the box.
AI-Powered UI Generation
Stream UI lets AI models generate real, interactive components in real time — type-safe, theme-aware, and ready to export.
Select a prompt above to see streaming UI generation
Real-Time Streaming
Watch components appear as the model generates them. JSON patches stream over the wire and render instantly.
Type-Safe Catalog
Every component is validated against a typed catalog. The AI can only produce UI that compiles and renders correctly.
Export to Code
One click to copy the generated JSX into your project. No lock-in — it's the same components you already use.
Start building today
Install your first component in seconds. Every component is yours to own, customize, and extend.