Skip to content
Velocity Velocity
View Docs
50+ 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

Hero

Flexible hero sections with multiple layouts, backgrounds, and slot-based content injection.

Split Layout Two-column with aside slot
New Release

Build faster with Velocity

A modern starter kit for production websites.

Trusted by developers

Aside content slot

Centered Layout Single column, center-aligned
About Us

We're on a mission

Building the tools developers love to use. Our team is dedicated to creating exceptional experiences.

Secondary Background

Secondary Background

Subtle elevation from the default background.

Gradient Background

Gradient Background

Smooth gradient transition effect.

Inverted Background Always dark, regardless of theme

Dark mode always

Perfect for CTAs and sections that need to stand out.

Join thousands of users

Size Variations sm, md, lg, xl padding options
size="sm"
Compact padding
size="md"
Default padding
size="lg"
Large padding
size="xl"
Extra-large padding
Available Props Simplified API (composition-first)

Props

  • layout centered | split
  • size sm | md | lg | xl
  • showGrid boolean
  • showBlob boolean
  • blobPosition left | right | center

Slots

  • badge Use Badge component
  • title Use h1/h2 directly
  • description Use p directly
  • actions CTA buttons
  • aside Side content (split only)

Backgrounds: Use CSS classes for custom backgrounds (e.g., class="bg-surface-invert")

Layout

Header and Footer components for consistent page structure. Variant-based with full customization via design tokens.

Default Layout Logo left, nav + actions right-aligned
Velocity Velocity
Get Started
Minimal Layout Logo + CTA only, no navigation
Velocity Velocity
Sign In
Nav Only No CTA, no actions, just navigation
Velocity Velocity
Size Variants sm (48px), md (56px), lg (64px)
size="sm" h-12 (48px) — compact
Velocity Velocity
Get Started
size="md" h-14 (56px) — default
Velocity Velocity
Get Started
size="lg" h-16 (64px) — spacious
Velocity Velocity
Get Started
Background Variants default, solid, transparent
variant="default" — backdrop blur + transparency
Velocity Velocity
variant="solid" — opaque background
Velocity Velocity
variant="transparent" — light background, dark text
Velocity Velocity
Explore
variant="transparent" colorScheme="invert" — for dark backgrounds
Velocity Velocity
Explore
Header Props Full API reference

Layout & Position

  • layout default | centered | minimal
  • position fixed | sticky | static
  • size sm | md | lg
  • variant default | solid | transparent
  • colorScheme default | invert

Navigation

  • nav NavItem[] (overrides routes)
  • extraNav NavItem[] (adds to routes)
  • showActiveState boolean
  • showMobileMenu boolean

Actions

  • showCta boolean
  • cta { label, href }
  • actions HeaderAction[]
  • showThemeToggle boolean
Footer - Simple Layout Single row with logo, nav, optional social
Minimal Layout Copyright only — perfect for simple sites

© 2026 Velocity

Stacked Layout Vertically stacked, centered — great for landing pages
Columns Layout Multi-column with link groups
Footer Props Full API reference

Layout

  • layout simple | columns | minimal | stacked
  • columns 2 | 3 | 4
  • background default | secondary | invert

Content

  • nav NavItem[]
  • linkGroups FooterLinkGroup[]
  • socialLinks SocialLink[]
  • tagline string

Copyright & Legal

  • showCopyright boolean
  • copyright string (supports {year}, {siteName})
  • legalLinks LegalLink[]
Navigation Design Tokens Customize via CSS custom properties

/* Customize nav link states in global.css */

--nav-link-color: var(--foreground-muted);

--nav-link-hover-color: var(--foreground);

--nav-link-hover-bg: var(--secondary);

--nav-link-active-color: var(--foreground);

--nav-link-active-bg: var(--secondary);

--nav-link-active-font-weight: 600;

CTA - Default Variant Light background with heading, description, and action buttons

Stop configuring. Start building.

Join the developers building faster, better websites with Velocity.

CTA - Invert Variant Dark background with inverted color scheme

Ready to build?

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

CTA - Size Variants sm, md, lg, xl padding options

/* Size variants control vertical padding */

sm: 'py-16 md:py-20'

md: 'py-20 md:py-24'

lg: 'py-24 md:py-32' (default)

xl: 'py-32 md:py-40'

/* MaxWidth variants control content width */

sm: 'max-w-xl' | md: 'max-w-2xl' | lg: 'max-w-3xl' | xl: 'max-w-4xl'

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

Must be at least 8 characters

Input with Icons Leading & trailing icons
Textarea Multi-line text input

Supports markdown formatting

Select Native dropdown
Checkboxes Custom styled controls
Radio Buttons Single-select controls
Plan Selection Card-style radio options
Switch Toggle on/off states

Receive email alerts for important updates

Get product news and feature announcements

Receive text messages for critical events

Switch Sizes & States sm, md, lg + disabled

Feedback

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

Badges Status indicators
Default Success Warning Error Info
Alerts Contextual messages
Toast Notifications Click buttons to trigger toasts

Overlays

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

Dialog Modal overlay
Dropdown Action menu
Tooltips Contextual hints
Tooltip on top Tooltip on bottom Tooltip on left Tooltip on right
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.

Card Variants 5 visual styles

Default

Standard bordered card

Solid

Filled background

Outline

Thick border, no fill

Ghost

Transparent container

Elevated

With shadow depth

Cards with Icons Compose your own layout with icon, title, description

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.

Simple Cards Title and description only

Getting Started

Quick setup guide to get your project running in minutes.

Documentation

Comprehensive API reference and usage examples.

Community

Join our Discord server and connect with other developers.

Custom Layouts Stats, profiles, actions

Total Revenue

$45,231

+12.5% from last month

Sarah Chen Sarah Chen

Sarah Chen

Product Designer

Pro San Francisco, CA

velocity-app

Production deployment

Live
Avatars User representations
John Doe
xs
Jane Smith
sm
Alex Johnson
md
Sam Wilson
lg
Chris Lee
xl
User 1 User 1
User 2 User 2
User 3 User 3
+5
Stacked
Icons Lucide icon set — 24 included
menu
x
chevron-down
arrow-right
search
plus
check
mail
phone
github
twitter
linkedin
sun
moon
zap
globe
shield
code
heart
star
alert-circle
check-circle
info
loader
Separator Horizontal, vertical, and with labels

Horizontal (default)

With label

With label text

Vertical (in flex container)

Item 1 Item 2 Item 3
Table Styled data table with hover and striping
Name Email Role Status
Sarah Chen sarah@example.com Admin Active
Alex Johnson alex@example.com Editor Active
Sam Wilson sam@example.com Viewer Inactive
Striped & Compact Table Alternating rows with reduced padding
ID Product Price Stock
001 Velocity Pro $49 120
002 Velocity Team $99 85
003 Velocity Enterprise $249 42
004 Velocity Starter Free ∞
Avatar Group Stacked avatars with overflow

max=4, 6 avatars

User 1 User 1
User 2 User 2
User 3 User 3
User 4 User 4
+2

size="xs"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="sm"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="md"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="lg"

User 1 User 1
User 2 User 2
User 3 User 3
+1

Loading

Skeleton loaders for perceived performance while content is being fetched.

Skeleton Types Text, circular, rectangular
Card Skeleton Composite loading state
Progress Bar Determinate progress indicators

25% — default

60% — brand

90% — success

Color Variants All 5 at 70%
Size Variants sm, md, lg + indeterminate

size="sm"

size="md"

size="lg"

Indeterminate

Toggles

Accordion and expandable content patterns with native HTML details/summary.

Accordion - Default Collapsible FAQ sections
What is Velocity?
Velocity is a modern Astro starter template with Tailwind CSS v4, React islands, and a comprehensive component library. It includes everything you need to build production-ready websites.
Is it free to use?
Yes! Velocity is open source and completely free. You can use it for personal and commercial projects without any restrictions.
How do I customize the theme?
Velocity uses CSS custom properties (design tokens) for theming. Edit the token files in src/styles/tokens/ to customize colors, spacing, typography, and more.
Card Variant With one item open by default
Getting Started
Run the CLI scaffolding command to create a new project. Customize with flags like --demo, --components, and --i18n.
Deployment
Deploy to Vercel, Netlify, or any static host. The build output is optimized for performance out of the box.
Support
Join our GitHub discussions or file an issue for bugs and feature requests.
Exclusive Mode Only one item open at a time
Free Plan
Perfect for personal projects and learning. Includes all core components and basic templates.
Pro Plan
Advanced components, premium templates, priority support, and commercial license.
Enterprise
Custom development, dedicated support, SLA guarantees, and team training workshops.

Patterns

Pre-composed component patterns for common UI needs — search, passwords, stats, and empty states.

Search Input Input with search icon, multiple sizes
Password Input With show/hide toggle

Must be at least 8 characters

Password Sizes sm, md, lg
Stat Cards Metric display with trend indicators

Total Revenue

$45,231

+12.5% from last month

Active Users

2,338

+8.2% from last week

Bounce Rate

24.3%

-3.1% from last month

Avg. Session

3m 42s

No change
Empty State Placeholder for empty data views

No messages yet

When you receive messages, they'll appear here. Start a conversation to get going.

New Message

No results found

Try adjusting your search or filters to find what you're looking for.

Ready to build?

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

Clone Repository Read Documentation