Plinth

Card

Surface for grouping related content and actions.

Weekly report

Job search activity, last 7 days.

18 applications sent, 3 replies, 1 interview scheduled.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/card.json

Usage

All parts are optional; compose what the content needs.

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

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Supporting line.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

Accessibility

  • CardTitle renders an h3; adjust with the render-free approach of just styling your own heading level if the page hierarchy needs it.
  • If the whole card is clickable, put the link on the title and stretch it, rather than wrapping everything in an anchor.

Collapsible

Show and hide a single region with animated height.

Table

Styled table primitives for tabular data.

On this page

InstallUsageAccessibility