Introduction

What is Prototyper UI?

Prototyper UI is a collection of beautifully designed, accessible components built on Base UI and styled with Tailwind CSS v4. Components are copied into your project as source files — you own and control every line of code.

Install any component with a single command:

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

The component lands in your codebase as a real file you can read, edit, and extend. No runtime dependency, no version lock-in, no abstraction layer to fight.

Design Principles

Composable — Own the Code

Components follow the shadcn model: the library is a starting point, not a dependency. You install a component, it becomes your file. Need to change how a select renders its trigger? Open the file and change it.

Beautiful by Default

The design system uses OKLCH color tokens, multi-layer shadows, role-based surfaces, and fluid easing curves. Components look exceptional without any customization. Beauty comes from precise tokens and consistent spacing — not decoration.

Base UI Native

Every interactive component is built on Base UI, the unstyled primitive library from the Material UI team. Base UI handles focus management, keyboard navigation, ARIA attributes, scroll locking, and portal rendering. Prototyper UI handles design.

LLM-Friendly

Every component follows identical patterns: "use client", imports, component functions, exports. Consistent naming (Select, SelectTrigger, SelectContent), consistent props (className + ...props spread), consistent styling (cn() + Tailwind + data-slot). When an LLM reads one component, it understands all of them.

Comparison with Alternatives

Feature	Prototyper UI	shadcn/ui	HeroUI	Radix Themes
Primitive library	Base UI	Radix UI	React Aria	Radix UI
Styling	Tailwind-in-component	Tailwind-in-component	Slots + Tailwind	CSS-in-JS
Owns code	Yes (copy-paste)	Yes (copy-paste)	No (npm)	No (npm)
Color space	OKLCH	HSL	HSL	Custom
Surface system	Role-based (surface/overlay/field)	Ad-hoc	Role-based	Ad-hoc
Shadow system	Semantic (surface/field/overlay)	Size-based (sm/md/lg)	Semantic	Size-based
Component API	Flat named exports	Flat named exports	Compound (dot notation)	Compound (dot notation)
Dark mode shadows	Zeroed / inset glow	Same as light	Zeroed / inset glow	Same as light

Architecture

Prototyper UI uses a registry-based architecture, compatible with the shadcn CLI:

Registry (prototyper-ui.com/r/*.json)
  → Component source files (registry/ui/*.tsx)
    → Your project (components/ui/*.tsx)

The registry hosts JSON manifests that describe each component, its source code, and its dependencies.
The CLI (npx shadcn@latest add) reads the manifest, resolves dependencies, and copies the component source into your project.
Your project owns the resulting files. Components import from @/components/ui/* and @/lib/utils — standard paths that work in any Next.js project.

Key Dependencies

Every component builds on the same foundation:

Base UI (@base-ui/react) — Unstyled, accessible primitives
Tailwind CSS v4 (tailwindcss) — Utility-first CSS framework
class-variance-authority (class-variance-authority) — Variant management for components
tailwind-merge (tailwind-merge) — Intelligent class merging
clsx (clsx) — Conditional class construction

Utility Function

All components use a shared cn() utility that combines clsx and tailwind-merge:

// lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

This lets you safely merge and override Tailwind classes when composing components.

On this page