Beautiful components,
zero JS overhead.

import Accordion from '@/components/astro/Accordion.astro';

<Accordion items={[
  { title: 'Is it accessible?', content: 'Yes. It uses native <details>/<summary> HTML.' },
  { title: 'Is it styled?', content: 'Yes. It comes with default styles.' },
  { title: 'Is it animated?', content: 'Yes. The chevron rotates via CSS.' },
]} />

import Button from '@/components/astro/Button.astro';

<Button>Click me</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>

import Badge from '@/components/astro/Badge.astro';

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

import Card from '@/components/astro/Card.astro';
import CardHeader from '@/components/astro/CardHeader.astro';
import CardTitle from '@/components/astro/CardTitle.astro';
import CardDescription from '@/components/astro/CardDescription.astro';
import CardContent from '@/components/astro/CardContent.astro';
import CardFooter from '@/components/astro/CardFooter.astro';

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

import Alert from '@/components/astro/Alert.astro';
import AlertTitle from '@/components/astro/AlertTitle.astro';
import AlertDescription from '@/components/astro/AlertDescription.astro';

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components.</AlertDescription>
</Alert>

import Avatar from '@/components/astro/Avatar.astro';

<Avatar src="/photo.jpg" alt="Jane Doe" fallback="JD" />
<Avatar fallback="AB" />
<Avatar fallback="TZ" size="lg" />

import Separator from '@/components/astro/Separator.astro';

<Separator />
<Separator orientation="vertical" class="h-6" />

import Skeleton from '@/components/astro/Skeleton.astro';

<Skeleton class="h-4 w-48" />
<Skeleton class="h-12 w-12 rounded-full" />

import Progress from '@/components/astro/Progress.astro';

<Progress value={60} />
<Progress value={25} class="h-2" />

import Input from '@/components/astro/Input.astro';

<Input type="text" placeholder="Email address" />
<Input type="password" placeholder="Password" />

import Textarea from '@/components/astro/Textarea.astro';

<Textarea placeholder="Tell us about yourself..." />

import Label from '@/components/astro/Label.astro';
import Input from '@/components/astro/Input.astro';

<Label for="email">Email</Label>
<Input id="email" type="email" placeholder="you@example.com" />

import Breadcrumb from '@/components/astro/Breadcrumb.astro';

<Breadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Components', href: '/components' },
  { label: 'Breadcrumb' },
]} />

import Table from '@/components/astro/Table.astro';

<Table
  columns={[
    { key: 'invoice', header: 'Invoice' },
    { key: 'status', header: 'Status' },
    { key: 'amount', header: 'Amount' },
  ]}
  rows={[
    { invoice: 'INV-001', status: 'Paid', amount: '$250.00' },
  ]}
/>

import Checkbox from '@/components/astro/Checkbox.astro';
import Label from '@/components/astro/Label.astro';

<div class="flex items-center gap-2">
  <Checkbox id="terms" name="terms" />
  <Label for="terms">Accept terms and conditions</Label>
</div>

import Select from '@/components/astro/Select.astro';
import Label from '@/components/astro/Label.astro';

<Label for="framework">Framework</Label>
<Select
  id="framework"
  name="framework"
  placeholder="Select a framework…"
  options={[
    { value: 'astro', label: 'Astro' },
    { value: 'next', label: 'Next.js' },
    { value: 'remix', label: 'Remix' },
  ]}
/>