Skip to content
Velocity Velocity
View Docs
40+ 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"
pt-20 pb-12
size="md"
pt-24 pb-16
size="lg"
pt-32 pb-20
size="xl"
pt-40 pb-28
Available Props Full API reference

Layout

  • align center | left | right
  • layout single | split
  • splitRatio 1:1 | 1:2 | 2:1

Appearance

  • background default | secondary | invert | gradient | image
  • size sm | md | lg | xl
  • showGrid boolean
  • showBlob boolean

Slots

  • badge Top label
  • title Main heading
  • description Supporting text
  • actions CTA buttons
  • aside Side content
  • social-proof Trust indicators

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 logo, heading highlight, and action buttons
Velocity

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

Feedback

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

Badges Status indicators
Default Success Warning Error Info
Alerts Contextual messages

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

Structured Cards With icon, title, subtitle & 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 only, no icon

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

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