Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Standard Card for Solid

A card titled Card Title, with a one-line description, a short content paragraph, and Cancel and Submit in the footer.

UI library: Ark UI

The header says Card Title, then Card description goes here. The body is one sentence about the content area. The footer has Cancel and Submit.

Start here for a block that needs a title, a description, content and actions. An Item is the flatter row when you do not need a footer. In Solid, Ark UI does not place Cancel and Submit.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Card anatomy: root, header, title, description, action, content, footer

Usage

<Card class="w-full max-w-[350px]">
    <CardHeader>
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Card description goes here</CardDescription>
    </CardHeader>
    <CardContent>
      <p>This is the card content area where you can place any content.</p>
    </CardContent>
    <CardFooter class="justify-between">
      <Button variant="outline">Cancel</Button>
      <Button>Submit</Button>
    </CardFooter>
  </Card>

FAQ

Which card parts does this demo use?

Card, then CardHeader with CardTitle and CardDescription, then CardContent with a paragraph, then CardFooter with two buttons. Every part is optional: leave out the ones you don't need.

How wide is the card?

Up to 350px: w-full max-w-[350px] on Card, so it shrinks on narrow screens. The parts stack in a column, and the card sets the gaps between them.

Can the header take the title and description as props?

Yes. Pass title and description on CardHeader and it renders CardTitle and CardDescription for you. Use the parts, as here, when the title needs its own markup.

How do I put a button in the header's corner?

Add CardAction inside CardHeader, after the title and the description. The header turns into two columns and the action sits at the top on the end side.

How do I tighten the card?

Pass size="sm" on Card for the compact preset. For your own value, set the --card-spacing variable on the card, which sets the gaps and the insets of every part.

API Reference

Card

No extra props in this demo. The rest is on the Card page.

Button

Sets variant="outline". The rest is on the Button page.

All 4 card examples