taste-skill / Components / shadcn/ui Cards

shadcn/ui Card Component Styles

3 shadcn/ui card containers extracted from ui.shadcn.com: backgrounds, 24px/18px radii, borders and shadows, rendered live with CSS and Tailwind code.

Source: computed styles extracted from https://ui.shadcn.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. shadcn/ui is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with shadcn/ui.

Rendered on the shadcn/ui canvas

Card 1

radius 24px · padding 20px 0px

Card 2

radius 18px · padding 14px 16px

Card 3

radius 18px · padding 8px 10px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`#FFFFFF`	`none`	`24px`	`20px 0px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
2	`rgba(245, 245, 245, 0.5)`	`none`	`18px`	`14px 16px`	`none`
3	`rgba(229, 229, 229, 0.5)`	`none`	`18px`	`8px 10px`	`none`

Copy-paste code

Card 1

.card-shadcn-1 {
  background:#FFFFFF;
  border:1px solid #E5E5E5;
  border-radius:24px;
  padding:20px 0px;
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

Card 2

.card-shadcn-2 {
  background:rgba(245, 245, 245, 0.5);
  border:1px solid #E5E5E5;
  border-radius:18px;
  padding:14px 16px;
}

Card 3

.card-shadcn-3 {
  background:rgba(229, 229, 229, 0.5);
  border:1px solid #E5E5E5;
  border-radius:18px;
  padding:8px 10px;
}

More shadcn/ui

shadcn/ui full token spec shadcn/ui style guide shadcn/ui Buttons shadcn/ui Pricing Table Tailwind CSS vs shadcn/ui

Same component, other brands

Linear Cards Stripe Cards Resend Cards Vercel Cards Supabase Cards Raycast Cards Cursor Cards Clerk Cards Mintlify Cards Cal.com Cards Dub Cards Turso Cards

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →