Card

Surface container composed of header, content, and footer.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@aspyn-io/kit";

Composition

Cards are compound components — compose exactly the sections you need.

Team plan

$29/user/month, billed annually.

Unlimited projects, priority support, SSO.

<Card>
  <CardHeader>
    <CardTitle>Team plan</CardTitle>
    <CardDescription>$29/user/month, billed annually.</CardDescription>
  </CardHeader>
  <CardContent>Unlimited projects, priority support, SSO.</CardContent>
  <CardFooter>
    <Button className="w-full">Upgrade</Button>
  </CardFooter>
</Card>

Stat card

The dashboard-metric pattern used across Aspyn products.

Active subscriptions

632.9K

+19% from last month

<Card>
  <CardHeader className="pb-2">
    <CardDescription>Active subscriptions</CardDescription>
    <CardTitle className="text-2xl">632.9K</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-xs text-muted-foreground">+19% from last month</p>
  </CardContent>
</Card>

With separated actions

API keys

3 active

Rotate keys regularly. Keys are shown once at creation.

<Card>
  <CardHeader>
    <div className="flex items-center justify-between">
      <CardTitle>API keys</CardTitle>
      <Badge variant="secondary">3 active</Badge>
    </div>
  </CardHeader>
  <Separator />
  <CardContent className="pt-6">…</CardContent>
</Card>