Skip to content
Velocity Velocity
View Demo

Component library

46 components. Documented for your agent.

Accessible, themeable Astro components with zero JavaScript by default, and React versions for islands where you need them. A generated reference tells your AI agent what each one does, so it reuses them instead of writing its own.

Explore the library Open the live demo
  • 9 categories
  • 26 with React versions
  • 2 themes
  • MIT licensed

The library

Every component, from the registry.

Listed from the same registry the CLI installs from and your agent reads. Pick a category, or open any one in the live demo.

Form

7

Buttons and native form controls with labels, hints and errors.

  • Button

    Button or button-styled link with variants, sizes, loading state and optional leading/trailing icons.

    Form + React Demo: Button

  • Input

    Text input with built-in label, hint, error message and optional leading/trailing icons.

    Form + React Demo: Input

  • Textarea

    Multi-line text field with built-in label, hint and error message.

    Form + React Demo: Textarea

  • Select

    Native <select> built from an options array, with label, placeholder, hint and error.

    Form + React Demo: Select

  • Checkbox

    Native checkbox with label, optional description and error message.

    Form + React Demo: Checkbox

  • Radio

    Single native radio input with label and description; give a group the same name. The card variant renders a selectable card.

    Form + React Demo: Radio

  • Switch

    Accessible on/off toggle (a checkbox with role="switch") with label and description.

    Form + React Demo: Switch

Data display

9

Cards, badges, tables and the rest of the content furniture.

  • Card

    Surface container with variants and padding; becomes a block link when given href.

    Data display + React Demo: Card

  • Badge

    Small inline label for status, tags or counts, with semantic color variants, a pill style and a pulsing dot.

    Data display + React Demo: Badge

  • Avatar

    Circular user image that falls back to initials (from fallback or alt) when there is no src.

    Data display + React Demo: Avatar

  • AvatarGroup

    Overlapping stack of Avatars that collapses extras into a "+N" count.

    Data display + React Demo: AvatarGroup

  • Table

    Responsive data table rendered from columns and rows arrays, with hover, striped and compact options.

    Data display + React Demo: Table

  • Pagination

    Page navigation (<nav>) with previous/next links and a window of numbered pages built from baseUrl.

    Data display + React Demo: Pagination

  • Progress

    Progress bar with semantic color variants and optional percentage label; omit value for an indeterminate bar.

    Data display + React Demo: Progress

  • Skeleton

    Animated placeholder block, circle or text line for content that is still loading.

    Data display + React Demo: Skeleton

  • GoogleMap

    Consent-aware Google Maps embed by coordinates or address; shows a setup prompt without PUBLIC_GOOGLE_MAPS_API_KEY and a placeholder until consent.

    Data display

Overlay

6

Dialogs, menus, tabs and disclosure, with keyboard support.

  • Dialog

    Accessible modal with focus trap, Escape/backdrop close, title, description and a footer slot. Open it with window.openDialog(id).

    Overlay + React Demo: Dialog

  • Dropdown

    Menu of links or actions (with icons, separators and disabled items) opened from a trigger slot, with keyboard support.

    Overlay + React Demo: Dropdown

  • Tabs

    Horizontal tabs with keyboard navigation; panels are children marked data-tab-content="<tab id>".

    Overlay + React Demo: Tabs

  • VerticalTabs

    Side-list tabs with optional descriptions and icons that turn into a dropdown or bottom sheet on mobile; panels use data-tab-content.

    Overlay + React Demo: VerticalTabs

  • Accordion

    Collapsible sections built on native <details>/<summary> (works without JS), with an exclusive single-open mode.

    Overlay + React Demo: Accordion

  • ConsentBanner

    Cookie consent banner and settings dialog with Google Consent Mode v2; renders only when PUBLIC_CONSENT_ENABLED is true.

    Overlay

Feedback

3

Alerts, toasts and tooltips.

  • Alert

    Inline message box (info, success, warning, error) with an icon, optional title and dismiss button.

    Feedback + React Demo: Alert

  • Toast

    React toast notifications: ToastProvider renders the stack and useToast() returns toast()/dismiss(). Toast.astro mounts the provider as an island around its slot.

    Feedback + React Demo: Toast

  • Tooltip

    Text tooltip shown on hover and focus around a trigger passed in the default slot.

    Feedback + React Demo: Tooltip

Marketing

5

Landing page pieces: logo, CTA band, install command.

  • Logo

    The site's logo, rendered inline from the SVGs in src/assets/branding/ (logomark or full), with light/dark versions.

    Marketing

  • CTA

    Closing call-to-action band centered, with logo, heading, description and actions slots (each rendered only when filled).

    Marketing Demo: CTA

  • NpmCopyButton

    Button that shows a shell command and copies it to the clipboard, with "copied" feedback.

    Marketing Demo: NpmCopyButton

  • SocialProof

    Row of overlapping avatar circles (images or placeholders) next to a short trust line.

    Marketing Demo: SocialProof

  • TerminalDemo

    React island that animates a terminal replaying the create-velocity-astro CLI prompts. Takes no props.

    Marketing + React Demo: TerminalDemo

Patterns

10

Compositions of the primitives: forms, sections, empty states.

  • ContactForm

    Complete contact form (name, email, subject, message) submitting to the `contact` Astro Action or an external endpoint, with localized labels, validation and status.

    Patterns Demo: ContactForm

  • NewsletterForm

    Inline email signup form submitting to the `newsletter` Astro Action or an external endpoint, with localized status messages.

    Patterns Demo: NewsletterForm

  • FormField

    Label, hint, error and required marker around a custom control passed in the input slot.

    Patterns

  • SearchInput

    Search field (type="search") built from Input with a leading search icon; used by the Pagefind search page.

    Patterns Demo: SearchInput

  • PasswordInput

    Password field built from Input with a show/hide toggle button.

    Patterns Demo: PasswordInput

  • StatCard

    Metric card with label, value, optional icon and an up/down/neutral trend line.

    Patterns Demo: StatCard

  • EmptyState

    Centered placeholder for empty lists or results: icon, title, description and an optional action button or slot.

    Patterns Demo: EmptyState

  • Section

    Page section with standard spacing and width, an optional eyebrow/title/lead heading block, action slot and tinted tone.

    Patterns

  • PageHeader

    Opening band for inner pages with eyebrow, title and lead; holds the page's only <h1>.

    Patterns

  • MediaSlot

    Optimized image from src/assets/photos/<photo> at a fixed aspect ratio, or a labelled placeholder until the photo exists.

    Patterns

Layout

3

Site header and footer, plus the separator.

  • Separator

    Horizontal or vertical divider line, optionally with a centered label.

    Layout + React Demo: Separator

  • Header

    Site header with logo, nav from nav.config.ts, CTA, action buttons, theme toggle, language switcher and mobile menu; bar or floating capsule.

    Layout Demo: Header

  • Footer

    Site footer in simple, columns, minimal or stacked layouts, with nav, link groups, social and legal links, tagline and copyright.

    Layout Demo: Footer

Hero

1

The page-opening section, centered or split.

  • Hero

    Page-opening hero section, centered or split, with badge, title, description, actions and aside slots plus optional grid and blob backgrounds.

    Hero Demo: Hero

Primitives & content

2

The icon set and the code block.

  • Icon

    Inline SVG icon from a built-in set of Lucide paths (plus a few brand icons), sized by preset.

    Primitives & content + React

  • CodeBlock

    Static code display with a window header, optional filename, line numbers and a copy button.

    Primitives & content

New in 2.4

Your agent knows every component.

Every project ships .agents/components.md, a reference to all 46 components: what each is for, props with defaults, CVA variants, slots, an example and what to use instead.

  1. Generated from the source

    It is built from the registry and the component files. Velocity’s tests fail when it is stale, so it can’t drift from the code.

  2. Reuse, not reinvent

    “Use instead” notes steer agents to what exists: Button with href instead of a styled <a>, Card with href instead of a Card wrapped in a link.

  3. Read before writing code

    The add-page and add-component skills open it first, before reading component source or creating anything new.

Read about Velocity 2.4 
## Button

Button or button-styled link with variants, sizes, loading state and optional leading/trailing icons.

- Import: `import Button from '@/components/ui/form/Button/Button.astro';`

### Props

| Prop | Type | Default |
| `variant` | `'primary' \| 'secondary' \| …` | `'primary'` |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
| `href` | `string` | |
…

### Example

<Button variant="primary" size="lg" trailingIcon="arrow-right" href="/contact">Get in touch</Button>
<Button variant="outline" type="submit" loading>Saving</Button>

### Use instead

- Use Button with href for links styled as buttons, not a styled <a>; external URLs get target="_blank" and rel automatically.
- Use icon (with size) for square icon-only buttons, and give them an aria-label.
The Button entry from Velocity’s generated component reference, abbreviated.

Themes

Two themes. One import.

Default and Midnight ship with the kit, each with light and dark modes. Components only read semantic tokens, so switching is one line in src/styles/theme.css. 

/* src/styles/theme.css */
@import './themes/default.css';

/* themes/default.css, excerpt */
:root {
  --primary: var(--gray-900);
  --accent: var(--brand-500);
  --ring: var(--gray-900);
  --theme-heading-weight: 700;
  --theme-radius-md: 0.375rem;
}
Default: Neutral grays with International Orange.

Variants

Typed variants. One definition.

Each component keeps its styles in a class-variance-authority file. The Astro and React versions share it, and the agent reference lists its options.

<Button>Get started</Button> 
export const buttonVariants = cva(  ['inline-flex items-center justify-center gap-2', …],  {    variants: {      variant: {        primary: 'bg-primary text-primary-foreground hover:bg-primary/90 …',        secondary: 'bg-secondary text-secondary-foreground border …',        outline: 'border border-border bg-transparent text-foreground …',        ghost: 'text-foreground-secondary hover:text-foreground …',        link: 'text-foreground-secondary hover:text-foreground … hover:underline',        destructive: 'bg-destructive text-destructive-foreground …',      },      size: {        sm: 'h-8 px-3 text-xs [&_svg]:h-4 [&_svg]:w-4',        md: 'h-10 px-4 text-sm [&_svg]:h-5 [&_svg]:w-5',        lg: 'h-12 px-5 text-base [&_svg]:h-5 [&_svg]:w-5',      },      fullWidth: { true: 'w-full' },      icon: { true: 'rounded-[var(--theme-radius-button,…)]' },    },    compoundVariants: [{ icon: true, size: 'sm', class: 'h-8 w-8 px-0' }, …],    defaultVariants: { variant: 'primary', size: 'md' },  });

Built right

Accessible and light. Checked in CI.

What the starter tests on every change, not what we hope is true.

  • axe on every page

    Velocity’s end-to-end suite runs axe for WCAG 2 A and AA on every page, on desktop and mobile. A serious or critical violation fails the build.

  • No CSP violations

    The same suite fails on any Content Security Policy violation, so no component depends on inline scripts or event handlers.

  • Keyboard support

    Dialog traps focus and closes on Escape. Dropdown, Tabs and VerticalTabs take arrow keys, Home and End. Accordion is native <details>.

  • Reduced motion

    When a visitor prefers reduced motion, a global rule finishes every animation and transition instantly.

Zero JavaScript by default.

Almost every component is an .astro file. JavaScript only ships where a component has to respond to the visitor.

Plain HTML
Most components, such as Button, Card, Badge, Table and Accordion, render to HTML and ship no JavaScript.
Small bundled script
Interactive ones, such as Dialog, Dropdown, Tabs and Tooltip, add a small bundled script that the CSP allows by hash. No framework runtime.
React island, opt-in
26 components also come as React components, for when an island needs them. Hydrate with client:visible.

Free forever · Open source · MIT

46 components, one command.

Open the live demo