Shadcn Card

React card component for organizing content with headers, actions, and footers. Built with TypeScript and Tailwind CSS for Next.js with semantic HTML.

Card layouts not working?

Join our Discord community for help from other developers.

Ever tried to build a dashboard without cards? Or organize content that just... floats around the page like lost tourists? Yeah, that's painful for everyone. Cards are the unsung heroes that turn chaotic information into digestible, organized chunks. This shadcn/ui card component brings structure to your content mess.

Card showcase

Complete card structure with all the parts that matter:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Built with semantic HTML and flexible composition patterns. Styled with Tailwind CSS utilities so you can actually customize them without fighting framework styles.

npx shadcn@latest add card

Why cards actually organize information

Here's the thing—cards aren't just pretty rectangles with shadows. They're visual containers that help users process information in chunks. Without cards, your content becomes an overwhelming wall of text and buttons. With cards, each piece of info has its own space and context.

Think about Twitter (sorry, X) posts or GitHub repository cards. Each one contains related information—title, description, actions—all grouped together. Users scan cards quickly, finding what they need without reading everything. It's like having organized file folders instead of papers scattered on a desk.

This free shadcn card handles the visual structure while you focus on content organization. Whether you're building dashboards, product galleries, or settings pages in your JavaScript apps, cards that look consistent make everything feel more professional.

Common card patterns you'll actually use

Basic card structure

The foundation for all other card types:

Loading component...

Card with form

Perfect for settings panels and configuration:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Stats cards

Dashboard metrics that actually make sense:

Loading component...

import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from "@/components/ui/card"import { TrendingUpIcon, UsersIcon, DollarSignIcon, ActivityIcon } from "lucide-react"export default function CardStats() {  return (    <div className="w-full p-6 flex justify-center">      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 w-full max-w-6xl">        <Card>          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>            <DollarSignIcon className="h-4 w-4 text-muted-foreground" />          </CardHeader>          <CardContent>            <div className="text-2xl font-bold">$45,231.89</div>            <p className="text-xs text-muted-foreground">              +20.1% from last month            </p>          </CardContent>        </Card>        <Card>          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">            <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>            <UsersIcon className="h-4 w-4 text-muted-foreground" />          </CardHeader>          <CardContent>            <div className="text-2xl font-bold">+2350</div>            <p className="text-xs text-muted-foreground">              +180.1% from last month            </p>          </CardContent>        </Card>        <Card>          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">            <CardTitle className="text-sm font-medium">Sales</CardTitle>            <TrendingUpIcon className="h-4 w-4 text-muted-foreground" />          </CardHeader>          <CardContent>            <div className="text-2xl font-bold">+12,234</div>            <p className="text-xs text-muted-foreground">              +19% from last month            </p>          </CardContent>        </Card>        <Card>          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">            <CardTitle className="text-sm font-medium">Active Now</CardTitle>            <ActivityIcon className="h-4 w-4 text-muted-foreground" />          </CardHeader>          <CardContent>            <div className="text-2xl font-bold">+573</div>            <p className="text-xs text-muted-foreground">              +201 since last hour            </p>          </CardContent>        </Card>      </div>    </div>  )}

Product cards

E-commerce listings with images and actions:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Features

This free open source card component includes everything you need:

TypeScript-first - Full type safety with proper React component patterns
Tailwind CSS utilities - Style with classes, not fighting CSS-in-JS
Semantic HTML structure - Proper heading hierarchy for accessibility
Flexible composition - Mix and match header, content, footer as needed
Responsive by default - Stacks beautifully on mobile, grids on desktop
Action placement - Headers for quick actions, footers for primary CTAs
Content organization - Clear visual hierarchy with titles and descriptions

API Reference

Card Components

Component	Purpose	Common Usage
`Card`	Root container	Wraps all card content
`CardHeader`	Title and actions area	Card title, description, quick actions
`CardTitle`	Primary heading	Main card topic
`CardDescription`	Supporting text	Context or subtitle
`CardAction`	Header actions	Edit, delete, menu buttons
`CardContent`	Main content area	Forms, lists, images, text
`CardFooter`	Action area	Primary buttons, links

All components accept className and children props for full customization.

Layout Patterns

Pattern	Structure	Best For
Minimal	Header + Content	Simple information display
Complete	Header + Content + Footer	Forms, products, detailed info
Action-heavy	Header (with Action) + Content + Footer	Settings, admin panels
Stats	Header + Content (metrics)	Dashboards, analytics

Production tips

Keep card content focused. This free shadcn/ui card works best when each card covers one topic. Don't cram your entire user profile, account settings, and billing info into one card. Split them up—users' brains will thank you.

Action hierarchy matters. Quick actions (edit, delete) go in the header. Primary actions (save, submit, purchase) go in the footer. This TypeScript component gives you the structure—use it consistently across your React application.

Grid layouts need planning. Cards look great in grids, but plan for different content lengths. That product description might be two words or two paragraphs. Your Next.js app should handle both without breaking the layout.

Mobile-first responsive design. Cards stack on mobile, spread on desktop. Test your grid systems with real content. This open source shadcn component is responsive, but your content strategy needs to be too.

Loading states save sanity. Show skeleton cards while data loads. Empty states for missing content. Users need to know what's happening, especially in dashboards where cards populate from APIs.

Integration with other components

Cards are natural containers for other shadcn components in your React applications. Use Button components in headers and footers for consistent action styling. Avatar components work perfectly in profile cards and user listings.

For forms, wrap Input and Select components inside CardContent. This open source pattern keeps related form fields grouped logically. When showing data, Badge components in card headers indicate status or categories.

Complex cards might need DropdownMenu components for overflow actions. Your JavaScript cards stay clean while providing full functionality through progressive disclosure.

Shadcn Card

Card showcase

Why cards actually organize information

Common card patterns you'll actually use

Basic card structure

Card with form

Stats cards

Product cards

Features

API Reference

Card Components

Layout Patterns

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Card

Reactbutton

Reactcard

Reactinput

Reactlabel

Reactcard

Reactbutton

Reactcard

Reactinput

Reactlabel

Reactselect

Reactcard

Reactbutton

Reactcard

When should I use Card vs a regular div?

Should entire cards be clickable?

How do I make card grids responsive?

How should I handle loading cards?

Should cards always have shadows?

How do I handle varying content lengths?

Are cards accessible to screen readers?

Do lots of cards hurt performance?

On this page