Components

Anti-Gravity includes a comprehensive set of UI components built with accessibility and customization in mind.

Button

The Button component supports multiple variants, sizes, and states.

Variants

import { Button } from '@/components/ui';

// Primary (default)
<Button>Primary Button</Button>

// Secondary
<Button variant="secondary">Secondary</Button>

// Ghost
<Button variant="ghost">Ghost</Button>

// Destructive
<Button variant="destructive">Delete</Button>

// Link
<Button variant="link">Learn more</Button>

// Outline
<Button variant="outline">Outline</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
<Button size="icon"><Icon /></Button>

States

// Loading
<Button loading>Saving...</Button>

// Disabled
<Button disabled>Disabled</Button>

// With icons
<Button leftIcon={<PlusIcon />}>Add Item</Button>
<Button rightIcon={<ArrowRightIcon />}>Continue</Button>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'destructive' \| 'link' \| 'outline'`	`'primary'`	Visual style
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'icon'`	`'md'`	Button size
`loading`	`boolean`	`false`	Show loading spinner
`disabled`	`boolean`	`false`	Disable interactions
`leftIcon`	`ReactNode`	-	Icon before text
`rightIcon`	`ReactNode`	-	Icon after text
`fullWidth`	`boolean`	`false`	Full width button
`asChild`	`boolean`	`false`	Render as child element

Card

A flexible container component for grouping related content.

Basic Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content...</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Variants

// Default
<Card>...</Card>

// Elevated (with shadow)
<Card variant="elevated">...</Card>

// Ghost (no border)
<Card variant="ghost">...</Card>

// Interactive (hover effects)
<Card variant="interactive">...</Card>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'elevated' \| 'ghost' \| 'interactive'`	`'default'`	Visual style
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Internal padding

Badge

Small labels for status, categories, or counts.

Variants

import { Badge } from '@/components/ui';

<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="outline">Outline</Badge>

Sizes

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Input

Form input components with validation support.

Basic Usage

import { Input, Textarea, FormField } from '@/components/ui';

// Basic input
<Input placeholder="Enter your name" />

// With label and error
<FormField label="Email" error="Invalid email address" required>
  <Input type="email" hasError />
</FormField>

// With icons
<Input 
  leftElement={<SearchIcon />}
  placeholder="Search..."
/>

// Textarea
<Textarea placeholder="Your message..." rows={4} />

Props

Prop	Type	Default	Description
`inputSize`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input size
`hasError`	`boolean`	`false`	Error state
`leftElement`	`ReactNode`	-	Left icon/element
`rightElement`	`ReactNode`	-	Right icon/element

Theme Toggle

Toggle between light, dark, and system themes.

Usage

import { ThemeToggle, ThemeDropdown } from '@/components/ui';

// Simple toggle (cycles through themes)
<ThemeToggle />

// With label
<ThemeToggle showLabel />

// Dropdown selector
<ThemeDropdown />

Section Components

Pre-built sections for common page layouts.

Hero

---
import Hero from '@/components/sections/Hero.astro';
---

<Hero
  variant="gradient"
  badge="New Release"
  title="Build beautiful websites"
  titleHighlight="without complexity"
  description="A modern theme for Astro."
  primaryCta={{ text: 'Get Started', href: '/signup' }}
  secondaryCta={{ text: 'Learn More', href: '/docs' }}
  stats={[
    { value: '10k+', label: 'Users' },
    { value: '99%', label: 'Uptime' },
  ]}
  image={{ src: '/hero.png', alt: 'Product screenshot' }}
/>

Variants: default, gradient, split

Features

---
import Features from '@/components/sections/Features.astro';
---

<Features
  title="Everything you need"
  description="Built for modern web development."
  columns={3}
/>

Pricing

---
import Pricing from '@/components/sections/Pricing.astro';
---

<Pricing
  title="Simple pricing"
  description="Choose your plan."
  showToggle={true}
/>

FAQ

---
import FAQ from '@/components/sections/FAQ.astro';
---

<FAQ
  title="Frequently asked questions"
  description="Find answers to common questions."
/>

CTA

---
import CTA from '@/components/sections/CTA.astro';
---

<CTA
  variant="default"
  title="Ready to get started?"
  description="Join thousands of happy users."
  primaryCta={{ text: 'Sign Up', href: '/signup' }}
/>

Variants: default, centered, split

Accessibility

All components follow accessibility best practices:

Keyboard Navigation - Full keyboard support
Focus Indicators - Visible focus rings
ARIA Labels - Proper labeling for screen readers
Color Contrast - WCAG AA compliant
Reduced Motion - Respects user preferences

// Focus is automatically managed
<Button>Focusable</Button>

// Custom aria labels
<Button aria-label="Close dialog">
  <XIcon />
</Button>