Card

A container that groups related content and actions — from simple panels to image-rich product, article and profile cards.

$ pnpm dlx shadcn@latest add https://dashral.com/r/card.json

Create project

Deploy your new project in one click.

Name

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/card.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/card

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { Card } from "@/components/dashral/card"
3
4<Card
5  title="Team members"
6  description="Invite people to work with you."
7  footer={<Button size="sm">Invite</Button>}
8>
9  <p className="text-sm">3 of 5 seats used.</p>
10</Card>

Examples

With header action

action sits at the end of the header.

Total revenue

Last 30 days

$8,900

+8.5% vs last month

Variants

default, soft, shadow, inset and panel — set with the variant prop.

Default

A thin border and no shadow — the flat, everyday card.

variant="default"

Soft

No border or shadow, a tinted fill — for calm, flat layouts.

variant="soft"

Shadow

No border, a deeper shadow — for cards that should stand out.

variant="shadow"

Inset

The header on a tinted frame, the content on a panel set into it.

variant="inset"

Panel

The same frame, the panel flush with the card's sides and bottom.

variant="panel"

Inset

variant="inset": the header and footer on a tinted frame, the content on a panel set 6px into it, its corners following the frame's.

Web traffic

Visits for the selected range

86,310+11.4%

View report

Panel

variant="panel": the same frame, the panel flush with the card's edge wherever no header or footer sits, so the two borders are one line — a list over a footer, or a header over a chart or a table.

billing-api

billing-api.acme.dev

2h ago

View deployments 1.2M requests

Usage

This billing period, Oct 1 – 31

Requests1,240,000 of 10,000,000

CPU time41 ms avg of 100 ms avg

Storage2.4 GB of 5 GB

Shadow depths

Combine the shadow variant with any Tailwind shadow utility, or lift the card on hover.

shadow-sm

Static depth

shadow-md

Static depth

shadow-lg

Static depth

shadow-xl

Static depth

Hover me

Lifts on hover

Article with cover image

media runs to the card's edges; eyebrow sits above the title.

Design

Building a design system that scales

How tokens, primitives and documentation keep a growing product consistent.

OMOlivia Martin

6 min read

Product

Badge and wishlist button positioned over the image.

-20%

Cameras

Retro 35mm Film Camera

4.8(212 reviews)

$159 $199

Horizontal

orientation="horizontal": media beside the content from the sm breakpoint; stacked on mobile.

Available

Norway Fjords Hiking Trip

Five days of guided hikes, cabin stays and boat tours through the western fjords.

Bergen, Norway
12 – 17 June 2027
8 of 12 spots left

$1,240 / person

Image overlay

padding="none" for a layout of your own; a gradient keeps text readable on any photo.

New collection

Explore the wild side of the Pacific Northwest

Curated trails, waterfalls and campsites for your next weekend.

Profile with cover

classNames.body pulls the content up over the cover image.

Sofia Davis

Product Designer at Dashral

Jakarta, Indonesia

Projects: 48
Followers: 12.4K
Following: 312

API reference

Card

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`title / description`	`ReactNode` The header.	—
`eyebrow`	`ReactNode` Above the title, e.g. a badge.	—
`action`	`ReactNode` At the end of the header, e.g. a menu button.	—
`children`	`ReactNode` The content.	—
`footer`	`ReactNode` Under the content, e.g. buttons.	—
`footerDivider`	`boolean` A line above the footer.	`false`
`media`	`ReactNode` An image flush with the edge: on top, or at the start when horizontal.	—
`orientation`	`"vertical" \| "horizontal"` horizontal puts the media beside the content from sm up.	`"vertical"`
`variant`	`"default" \| "soft" \| "shadow" \| "inset" \| "panel"` Edge style; inset puts the header and footer on a tinted frame and the content on a panel set into it; panel does the same with the panel flush with the card's edge wherever no header or footer sits. "bordered" still works but is deprecated: it looks like soft.	`"default"`
`padding`	`"default" \| "none"` none, for a layout of your own.	`"default"`
`classNames`	`{ media, section, header, eyebrow, title, description, action, body, footer }` Classes for each part; section holds the padding and gap, e.g. "gap-3 py-5" for a tighter card.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

A plain container with no role. If a card is a link, make the title the link rather than wrapping the whole card.