Card

TS

import { … } from "@fungi.computer/caps/components/card";

Header and actions

TSX

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@fungi.computer/caps/components/card";
import { Button } from "@fungi.computer/caps/components/button";

export default function HeaderAndActions() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Lion's mane</CardTitle>
        <CardDescription>Ready to harvest in 3 days</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Keep humidity above 85% until the caps fully fan out.</p>
      </CardContent>
      <CardFooter>
        <Button size="sm" variant="outline">
          Snooze
        </Button>
        <Button size="sm">Mark done</Button>
      </CardFooter>
    </Card>
  );
}

Variants

TSX

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  type CardProps,
} from "@fungi.computer/caps/components/card";

const variants: readonly NonNullable<CardProps["variant"]>[] = [
  "surface",
  "outline",
  "interactive",
  "game",
];

export default function Variants() {
  return (
    <div className="grid w-full max-w-sm gap-3 sm:grid-cols-2">
      {variants.map((variant) => (
        <Card key={variant} variant={variant}>
          <CardHeader>
            <CardTitle>{variant}</CardTitle>
          </CardHeader>
          <CardContent>
            <p>A {variant} card.</p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

States

TSX

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from "@fungi.computer/caps/components/card";

export default function States() {
  return (
    <div className="grid w-full max-w-sm gap-3 sm:grid-cols-3">
      <Card featured>
        <CardHeader>
          <CardTitle>Featured</CardTitle>
          <CardDescription>This week's pick</CardDescription>
        </CardHeader>
      </Card>
      <Card density="compact">
        <CardHeader>
          <CardTitle>Compact</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Less padding for dense lists.</p>
        </CardContent>
      </Card>
      <Card state="empty">
        <CardContent>
          <p>No spores logged yet.</p>
        </CardContent>
      </Card>
    </div>
  );
}

Props

CardProps

Prop	Type	Description
variant?	"surface" | "outline" | "interactive" | "game" | "fit"
featured?	boolean	Emphasize a featured item without changing its interaction.
state?	"empty"	Present the absence of content within the same card shell.
density?	"regular" | "compact"	Reduce card section padding when several related details share a page.

• variant?"surface" | "outline" | "interactive" | "game" | "fit"
• featured?boolean

  Emphasize a featured item without changing its interaction.

• state?"empty"

  Present the absence of content within the same card shell.

• density?"regular" | "compact"

  Reduce card section padding when several related details share a page.

CenteredCardProps

Prop	Type	Description
width?	"default" | "wide"

• width?"default" | "wide"

CardHeaderProps

Prop	Type	Description
alignment?	"start" | "center"

• alignment?"start" | "center"

CardTitleProps

Prop	Type	Description
level?	2 | 3	Heading level; the host keeps its document outline. Defaults to 3.

• level?2 | 3

  Heading level; the host keeps its document outline. Defaults to 3.

Full types: API reference.