Skip to content
Velocity

Components Overview

Velocity includes 55 components organized by purpose.

Component Philosophy

Section titled “Component Philosophy”
  1. Astro-first — Components work without client JavaScript
  2. Composable — Small, single-purpose primitives
  3. Accessible — WCAG 2.2 AA compliant
  4. Token-based — No hardcoded colors/sizes
  5. Variant-rich — Multiple visual options per component

Component Categories

Section titled “Component Categories”

UI Components

31 components organized by subcategory: form, data-display, feedback, overlay, and more.

Layout Components

4 components: Header, Footer, ThemeToggle, Analytics.

Pattern Components

7 composed components: ContactForm, NewsletterForm, FormField, SearchInput, and more.

Blog Components

4 components: ArticleHero, BlogCard, ShareButtons, RelatedPosts.

Landing Components

5 components: Hero, CTA, FeatureTabs, Credibility, and more.

SEO Components

3 components: SEO, JsonLd, Breadcrumbs.

Component Count Summary

Section titled “Component Count Summary”
CategoryCountDescription
UI Components31Button, Input, Card, Badge, Alert, etc. (organized by subcategory)
Layout Components4Header, Footer, ThemeToggle, Analytics
Pattern Components7ContactForm, NewsletterForm, FormField, SearchInput, etc.
Blog Components4ArticleHero, BlogCard, ShareButtons, RelatedPosts
Landing Components5Hero, CTA, FeatureTabs, etc.
SEO Components3SEO, JsonLd, Breadcrumbs
Hero Components1Hero section
Total55All components across categories

Import Patterns

Section titled “Import Patterns”

Direct Import

Section titled “Direct Import”
---
import { Button, Card } from '@/components/ui';
---


<Button>Click me</Button>
<Card>Content</Card>

Path Alias

Section titled “Path Alias”

All components use the @/ alias pointing to src/:

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Common Patterns

Section titled “Common Patterns”

Variants and Sizes

Section titled “Variants and Sizes”

Most components accept variant and size props:

<Button variant="primary" size="lg">Large Primary</Button>
<Button variant="outline" size="sm">Small Outline</Button>

Color Schemes

Section titled “Color Schemes”

For components on dark backgrounds:

<Button colorScheme="invert">On Dark Background</Button>

Responsive Props

Section titled “Responsive Props”

Some components support responsive variants:

<Card padding={{ base: 'md', lg: 'lg' }}>
  Responsive padding
</Card>

Next Steps

Section titled “Next Steps”