Card
Card frames reusable content with title, subtitle, and optional children.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/card-billing-usage.json.
Usage
Playground
Examples
Usage meters that expand
Deployment status
Header badge and actions
Link cards
Login form
Media cards
Sections and dividers
Stat with trend and menu
API
10 props
Accessibility
Card is a structural container. Put links or buttons inside it rather than making the whole card a fake control.
Related
DropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesFieldField composes form label, description, error, and input building blocks.7 examplesInputText, search, numeric and date inputs with prefix and suffix slots.11 examplesAccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examplesPillPill renders compact category and status labels.4 examples