18+ Production Components

Component Library

Production-ready UI primitives built with accessibility and performance in mind. Copy, paste, and customize to match your brand.

Browse Components View Source

Buttons

Interactive elements for actions and navigation. All variants support icons, loading states, and full accessibility.

Variants 6 styles for different contexts

Sizes Responsive scaling

States

With Icons

Form Inputs

Text fields, selects, checkboxes, and more. Built with native validation and ARIA support.

Text Input With labels & validation

Email address

Password

Must be at least 8 characters

Disabled

Textarea Multi-line text input

Message

Supports markdown formatting

Select Native dropdown

Country

Checkboxes Multi-select controls

I agree to the terms of service

Send me product updates

Enable notifications

Receive alerts for important updates

Plan Selection Card-style radio options

Free

Basic features for personal projects

Pro

Advanced tools for professionals

Team

Collaboration features for teams

Feedback

Badges, alerts, and status indicators to communicate state and guide user actions.

Badges Status indicators

Default Success Warning Error Info

Alerts Contextual messages

Tip

Use keyboard shortcuts to navigate faster. Press ⌘K to open the command palette.

Deployment successful

Your changes are now live at your-app.vercel.app

Approaching limit

You've used 80% of your monthly API quota. Consider upgrading your plan.

Build failed

Error in src/components/Button.tsx — missing required prop "variant"

Overlays

Dialogs, dropdowns, tooltips, and tabs. Full keyboard navigation and focus management.

Dialog Modal overlay

Dropdown Action menu

Tooltips Contextual hints

Tabs Content organization

Project overview with key metrics and recent activity. Tabs support full keyboard navigation.

Analytics data with charts and performance insights. Press arrow keys to navigate between tabs.

Configure your project settings. Use Home/End to jump to first/last tab.

Data Display

Cards, avatars, and icons for presenting content and user information.

Cards Content containers

Performance

100/100 Lighthouse

Zero JavaScript by default. Islands architecture with selective hydration for optimal speed.

Type-Safe

Full TypeScript

Strict types throughout with IDE autocompletion and compile-time error checking.

i18n Ready

Multi-language

Built-in translation system with SEO-friendly URLs and automatic locale detection.

Avatars User representations

Stacked

Icons Lucide icon set — 24 included

Loading

Skeleton loaders for perceived performance while content is being fetched.

Skeleton Types Text, circular, rectangular

Card Skeleton Composite loading state

Ready to build?

These components are just the beginning. Clone Velocity and start shipping faster.

Clone Repository Read Documentation