Skip to content
Velocity

Components Overview

Velocity includes 56 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

33 primitive components: Button, Input, Card, Badge, Alert, and more.

Layout Components

4 components: Header, Footer, ThemeToggle, Analytics.

Pattern Components

3 composed components: ContactForm, NewsletterForm, FormField.

Blog Components

4 components: ArticleHero, BlogCard, ShareButtons, RelatedPosts.

Landing Components

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

SEO Components

3 components: SEO, JsonLd, Breadcrumbs.

Component Count Summary

Section titled “Component Count Summary”
CategoryCountDescription
UI Components33Button, Input, Card, Badge, Alert, etc.
Layout Components4Header, Footer, ThemeToggle, Analytics
Pattern Components3ContactForm, NewsletterForm, FormField
Blog Components4ArticleHero, BlogCard, ShareButtons, RelatedPosts
Landing Components7Hero, CTA, FeatureTabs, etc.
SEO Components3SEO, JsonLd, Breadcrumbs
Hero Components2Hero variants
Total56

Import Patterns

Section titled “Import Patterns”

Direct Import

Section titled “Direct Import”
---
import Button from '@/components/ui/Button.astro';
import Card from '@/components/ui/Card.astro';
---


<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”