Card

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/card

UsageCopy Anchor Link

import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardPanel,
  CardTitle,
} from "@/components/ui/card";

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

CardTitle renders a <div>. When the title is a heading in your page, pass render={<h2 />} (or the right level) so screen reader users can find it.

Header actionCopy Anchor Link

Put a button in CardAction inside CardHeader to place it at the top right.

Card frameCopy Anchor Link

CardFrame groups cards under one header, with an optional action. Cards inside it lose their own border and shadow so they read as one block.

API referenceCopy Anchor Link

This is a custom component, not a Base UI wrapper. Every part renders a <div> and accepts every native <div> attribute, plus render. CardPanel is also exported as CardContent.

The parts are Card, CardHeader, CardTitle, CardDescription, CardAction, CardPanel, and CardFooter, and for frames CardFrame, CardFrameHeader, CardFrameTitle, CardFrameDescription, CardFrameAction, and CardFrameFooter.