Card

A collection of components for displaying data in a card format.

Source

Create an account

Create a new account to get started

Installation

npx @rahimstack@latest add card

API Reference

const CardAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Card__root",
        "rounded-lg border bg-[--paper] shadow-sm",
    ]),
    header: cva([
        "UI-Card__header",
        "flex flex-col space-y-1.5 p-4",
    ]),
    title: cva([
        "UI-Card__title",
        "text-2xl font-semibold leading-none tracking-tight",
    ]),
    description: cva([
        "UI-Card__description",
        "text-sm text-[--muted]",
    ]),
    content: cva([
        "UI-Card__content",
        "p-4 pt-0",
    ]),
    footer: cva([
        "UI-Card__footer",
        "flex items-center p-4 pt-0",
    ]),
})