Component Library

Production-Ready Components

Accessible, themeable, zero-JS by default. Built on Astro with progressive React hydration when you need it.

Explore Components View Demo

0 Categories Form, Data, Feedback & more

0 Components Zero-JS by default

0 Themes Default, Midnight & Ocean

0 Lighthouse Every category, every page

Design Tokens

One Token File. Three Looks.

Swap a single CSS file and every component transforms. No prop changes, no refactoring.

DashboardPro

Your project is performing well.

hello@velocity.build

Enable notifications

Storage72%

All systems operational

Clean neutrals with International Orange

default.css

:root {

2--background: var(--gray-0);

3--foreground: var(--gray-900);

4--border: var(--gray-200);

5--primary: var(--gray-900);

6--primary-foreground: var(--gray-0);

7--accent: var(--brand-500);

8--card: var(--gray-0);

9--input-border: var(--gray-300);

10--ring: var(--gray-900);

11--radius-md: 0.375rem;

}

Component Categories

Everything You Need

From form primitives to full patterns — organized by function, themed by tokens.

Form

Button, Input, Select, Checkbox, Radio, Switch, Textarea

PrimarySecondaryOutlineGhost

Enter your email...

Notifications

Data Display

Card, Badge, Avatar, AvatarGroup, Table, Pagination, Progress, Skeleton

Active

Progress68%

Feedback

Alert, Toast, Tooltip

Changes saved

Check connection

Error occurred

Overlay

Dialog, Dropdown, Tabs, VerticalTabs, Accordion

Account

Settings

Billing

Patterns

ContactForm, NewsletterForm, FormField, SearchInput, PasswordInput, StatCard, EmptyState

Send Message

Content & Marketing

CodeBlock, Logo, CTA, NpmCopyButton, SocialProof, TerminalDemo, Hero

terminal

$ npx create-velocity

npm i create-velocity

The Full Library

Every. Single. One.

ButtonInputTextareaSelectCheckboxRadioSwitchCardBadgeAvatarAvatarGroupTablePaginationProgressSkeletonAlertToastTooltipDialogDropdownTabsButtonInputTextareaSelectCheckboxRadioSwitchCardBadgeAvatarAvatarGroupTablePaginationProgressSkeletonAlertToastTooltipDialogDropdownTabs

VerticalTabsAccordionSeparatorIconCodeBlockLogoCTANpmCopyButtonSocialProofTerminalDemoContactFormNewsletterFormFormFieldSearchInputPasswordInputStatCardEmptyStateHeroHeaderFooterVerticalTabsAccordionSeparatorIconCodeBlockLogoCTANpmCopyButtonSocialProofTerminalDemoContactFormNewsletterFormFormFieldSearchInputPasswordInputStatCardEmptyStateHeroHeaderFooter

Variant System

Built on CVA

Type-safe variants with class-variance-authority. Every component follows the same pattern.

Variant

Size

fullWidthicon

Usage

1<Button>

2 Click me

3</Button>

button.variants.ts

1const buttonVariants = cva(

2 ['inline-flex items-center justify-center',

3 'font-medium rounded-md',

4 'transition-all duration-150'],

5 {

6 variants: {

7 variant: {

8 primary: 'bg-foreground text-background...',

9 secondary: 'bg-secondary border border-border...',

10 outline: 'border bg-transparent...',

11 ghost: 'text-foreground-secondary...',

12 destructive: 'bg-destructive...',

13 },

14 size: {

15 sm: 'h-8 px-3 text-xs',

16 md: 'h-10 px-4 text-sm',

17 lg: 'h-12 px-5 text-base',

18 },

19 },

20 defaultVariants: {

21 variant: 'primary',

22 size: 'md',

23 },

24 }

25);

Built Right

Accessible by Default

Every component meets or exceeds WCAG 2.1 AA standards. No extra configuration needed.

WCAG AAA contrast ratios
Full keyboard navigation
Screen reader tested
Reduced motion support
Semantic HTML throughout

Progressive Enhancement

Zero JS by Default

Astro components ship zero JavaScript. Opt into React hydration only when interactivity demands it.

Astro Islands — hydrate React components only where needed with client:visible

Ready to build with 57+ components?

Free forever. Open source. Ship with confidence.

Documentation GitHub Star on GitHub