Haedong
022

Card

Layout

Calendar

Date

Shipped via the registry

A monthly calendar with single-date and range selection and a character-scramble month transition.

Customize

Description
Footer

Code

<Card>
  <CardHeader>
    <CardTitle>Calendar</CardTitle>
    <CardDescription>Shipped via the registry</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button variant="ghost">Docs</Button>
    <Button variant="solid">Install</Button>
  </CardFooter>
</Card>

Install

npx shadcn@latest add https://components.haedong.dev/r/card.json

Props

Six thin wrappers over div / h3 / p (Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter). Each takes its element's native props; className is the API.

PropTypeDescription
Card<div>Hairline box; sections are separated with divide-y.
CardHeader<div>Padded column for CardTitle and CardDescription.
CardTitle / CardDescription<h3> / <p>System voice uppercase / muted.
CardContent<div>Padded body.
CardFooter<div>Padded row, actions right-aligned.