How to Add a Card to a React App

Before installing the Card, make sure your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your CSS, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired up. For a custom setup, open your tsconfig.json and verify the compilerOptions.paths entry; the installation page lists the minimal viable config. The Card is unusually light on dependencies — it imports only React and the local cn class-merge helper, with no icon library and no runtime UI package, so there is nothing extra for the CLI to add. No PostCSS plugins, Babel presets, or Tailwind config changes are required.

Run the CLI from your project root to add the Card source file. The command prompts once for your install directory (defaulting to src/components/ui/), then writes card.tsx. Because the Card has no runtime dependencies, nothing is added to your package.json — the only change is one new file in your repo. No global config file is created; the Card is just a TypeScript file you can edit like any other component. Confirm the file landed correctly in your editor, then commit the change. If your project uses a monorepo layout or a non-standard path, the CLI docs cover the flags used to target a custom location during install.

Open the page where the Card should live and import it from your UI directory. A single import line gives you the root and both slots through dot notation — Card, Card.Preview, and Card.Info. The root renders a fixed-size square surface by default (w-48 aspect-square) with a bg-card background, a border-border outline, and a rounded-[20px] radius. Because the Card has no hooks and no 'use client' directive, it renders inside a Next.js Server Component without a client boundary. See the Card docs for the full prop table and the examples page for complete patterns.

The two slots split the card into a visual area and a label row. Card.Preview is the top section — flex-1 flex items-center justify-center with a border-b border-border divider and p-6 padding — so whatever you drop in (an emoji, an icon, an image, a chart) sits centered above the line. Card.Info is the bottom row — p-5 flex justify-between items-center — built to hold a title on the left and an action or badge on the right. Both accept a className so you can override padding or alignment per instance without touching the source. The compound shape means you only ever import Card; the slots come attached to it via Object.assign.

Because the Card lives in your codebase, customization is a source edit rather than a prop API. Open src/components/ui/card.tsx and find the const styles object near the top — it holds every class the component uses, grouped into base, hover, preview, and info. Widen the card by changing w-48 in base, soften the corners by editing rounded-[20px], or adjust the slot padding in preview and info. The hover lift — hover:bg-accent hover:border-border hover:-translate-y-1 — is opt-out per instance via the hover={false} prop on the root, or remove it globally by deleting the hover key. To re-theme every card at once instead, change the tokens it references — bg-card, border-border, bg-accent — in your theme tokens.