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://multidash-app.vercel.app/r/card.json

Create project

Deploy your new project in one click.

Name

Installation

Add Card with the shadcn CLI, or copy the source by hand. In this repo there's nothing to install — import it from @multidash/ui.

$ pnpm dlx shadcn@latest add https://multidash-app.vercel.app/r/card.json

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

components.json

{
  "registries": {
    "@multidash": "https://multidash-app.vercel.app/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @multidash/card

Usage

import {
  Card,
  cardVariants,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
} from "@multidash/ui/components/card"

Examples

With header action

Total revenue

Last 30 days

$8,900

+8.5% vs last month

Variants

default, bordered and shadow — set with the variant prop.

Default

Thin border with a subtle shadow.

variant="default"

Bordered

A 2px border and no shadow — for flat layouts.

variant="bordered"

Shadow

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

variant="shadow"

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

Remove the top padding with pt-0 and let the image bleed to the edges with overflow-hidden.

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

Image 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

A gradient keeps text readable on top of any photo.

New collection

Explore the wild side of the Pacific Northwest

Curated trails, waterfalls and campsites for your next weekend.

Profile with cover

A negative margin pulls the avatar up over the cover image.

Sofia Davis

Product Designer at Multidash

Jakarta, Indonesia

Projects: 48
Followers: 12.4K
Following: 312