Create Component

VerifiedStable

End-to-end guide for building new components with Base UI primitives

v1.0.0·Prototyper·Authoring

Step-by-step workflow for creating Prototyper UI components that wrap Base UI primitives — four copy-paste templates, Base UI wrapping patterns, Props & TypeScript conventions, registry registration, example files, and MDX documentation scaffolding.

$curl -fsSL https://prototyper-ui.com/install.sh | bash -s create-component

$claude skill add https://prototyper-ui.com/install.sh create-component

What Your AI Learns

Four templates — simple, compound visual, positioned overlay, dialog/sheet

Component type decision tree — pick the right template for any component

Base UI wrapping — deep imports, render= prop, data attributes, Portal/Positioner/Popup

Props & TypeScript — type intersections, destructuring order, no forwardRef

Styling patterns — cn() merge order, tokens, hover-only, motion-reduce

Registry & docs — registry entry, example files, MDX page scaffolding

Context pattern — when and how to share state between sub-components

30+ item checklist — structure, interactivity, animation, tokens, TypeScript

Prototyper UI

All Skills