Question 1

What is the Card?

Accepted Answer

shadcn.io's Card is a container that groups related content behind one border and one spacing system, with optional parts: CardHeader with CardTitle, CardDescription and CardAction, CardContent, CardFooter and CardMedia. Use it for forms, listings, dashboard widgets and settings panels. Each example in this gallery is one small file built from these parts.

Question 2

Are these card examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

How is this different from a styled div?

Accepted Answer

The Card gives every part the same insets and gaps from one variable, rounds and clips its corners, uses the card color tokens so dark mode follows, and lays out a header action next to the title. You could rebuild that per project; the parts keep it the same everywhere.

Question 4

When should I use a Card instead of a list, a table or an alert?

Accepted Answer

A Card for a self-contained unit with several parts, such as a picture, a title, details and actions. A list or a table for many rows that share the same few fields. An Alert for a status message.

Question 5

Which card should I start with for a login page?

Accepted Answer

The login card: a title and description in the header, email and password fields with a forgot-password link in the content, Login and Login with Google buttons, and a sign-up link in the footer. Wrap it in a form to submit it.

Question 6

How do I build an image card?

Accepted Answer

Make the image the card's first child for a photo at the top: the card drops its top padding and rounds the photo's corners. For a photo lower down, as in the image card, put it in CardContent with no padding so it reaches the side edges.

Question 7

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

Accepted Answer

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

Question 8

How do I show who took part, as in the meeting-notes card?

Accepted Answer

Put Avatar components in an AvatarGroup in the footer: it overlaps them and rings each one in the background color. Add AvatarGroupCount after them for the people you don't show.

Question 9

How do I install a card example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Card and the other components it uses if you don't have them yet.

Question 10

How do I make a card more compact?

Accepted Answer

Pass size sm on the 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 at once.

Question 11

How do I pin the footer to the bottom of a fixed-height card?

Accepted Answer

The Card is a flex column. Give it a height, such as h-full in a grid, and add mt-auto on CardFooter so the footer stays at the bottom however long the content is.

Question 12

Can I make a whole card clickable?

Accepted Answer

Yes. Put a link in the title and stretch it over the card with an absolutely positioned pseudo-element, and make the card relative. Avoid wrapping a card that holds other buttons in one link: nested interactive elements confuse keyboard and screen reader users.

Question 13

What are card examples built on?

Accepted Answer

shadcn.io's Card plus the components each example uses, such as Button, Field, Input and Avatar, styled with Tailwind CSS and Lucide icons. In React they run on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 14

Are card examples accessible?

Accepted Answer

The Card is a plain container, so accessibility comes from its content: CardTitle is a heading, so keep it in order with the page's other headings, label every field, and give images a meaningful alt or an empty one when they are decorative.

Question 15

Do the examples work with server rendering?

Accepted Answer

Yes. The Card has no state, so the examples render on the server as they are. Add a client boundary only around the parts that need interaction.

Question 16

Which Tailwind CSS version do the examples use?

Accepted Answer

Tailwind CSS v4. The classes are standard utilities and theme tokens such as bg-card and text-muted-foreground, read from your theme's CSS variables.

Card Examples

Image Card

Login Card

Meeting Notes Card

Standard Card

More component examples

Collapsible

Scroll Area

Separator

Accordion

Aspect Ratio

Carousel

Chart

Checkbox

Card examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every card example. One prompt away.