Card

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download card -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Card content here</CardContent>
  <CardFooter align="end">
    <Button variant="tertiary">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>;

Examples

Default

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Card content here</CardContent>
  <CardFooter >
    <Button variant="tertiary">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>;

With Form

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
<Card className="w-[350px]">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
  </CardHeader>
  <CardContent>
    <form className="grid gap-4">
      <div className="grid gap-2">
        <Label htmlFor="name">Name</Label>
        <Input id="name" placeholder="Name of your project" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="framework">Framework</Label>
        <Input id="framework" placeholder="Next.js" />
      </div>
    </form>
  </CardContent>
  <CardFooter align="justify">
    <Button variant="tertiary">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>;

Stats

import {
  Card,
  CardHeader,
  CardDescription,
  CardTitle,
  CardContent,
} from "@/components/ui/card";
<Card className="w-[280px]">
  <CardHeader>
    <CardDescription>Total revenue</CardDescription>
    <CardTitle className="text-3xl">$15,231.89</CardTitle>
  </CardHeader>
  <CardContent>
    <p className="text-sm text-neutral-mid">+20.1% from last month</p>
  </CardContent>
</Card>;

Footer Outside

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
<Card className="w-[350px]">
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Footer rendered outside the card body.</CardDescription>
  </CardHeader>
  <CardContent>Card content here</CardContent>
  <CardFooter footer="outside">
    <Button variant="tertiary">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Card

CardFooter

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.