Interactive examples of all available UI components. Built on @base-ui/react and shadcn/ui.
Six variants, four sizes, disabled and loading states.
Variants
Sizes
States
Status and category labels.
Text input, textarea, select, and validation states.
Interactive checkboxes with indeterminate state.
Toggle switches for boolean preferences.
Tab navigation for sectioned content.
This is the Overview tab. It shows a summary of all activity and key metrics.
Modal dialog with overlay and close actions.
Status messages for info, success, warning, and error.
Info
Your changes were saved automatically.
Success
Deployment completed in 42 seconds.
Warning
API rate limit at 80%. Consider batching requests.
Error
Failed to connect to the database.
Progress bars with percentage labels.
Initials-based avatars in different sizes and colors.
Sizes
Colors
Basic data table with status badges.
| Name | Role | Status |
|---|---|---|
Alice Roper alice@example.com | Admin | active |
Bob Nolen bob@example.com | Editor | active |
Carol Chan carol@example.com | Viewer | inactive |
Spinner and animation patterns.
Inline code and pre-formatted code blocks.
Inline code: use npm run check before committing.
// Validate input at every API boundary
const schema = z.object({
name: z.string().min(1),
email: z.string().email(),
})
const result = schema.safeParse(await req.json())
if (!result.success) {
return Response.json({ error: result.error }, { status: 400 })
}Horizontal and vertical dividers.
Horizontal
Vertical (inline)