taste-skill / Components / Supabase Cards

Supabase Card Component Styles

6 Supabase card containers extracted from supabase.com: backgrounds, 21.3333px/8px/10.6667px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Supabase canvas

Card 1

radius 21.3333px · padding 8px 8px

Card 2

radius 8px · padding 0px 0px

Card 3

radius 10.6667px · padding 0px 0px

Card 4

radius 10.6667px 10.6667px 0px 0px · padding 0px 0px

Card 5

radius 8px · padding 32px 32px

Card 6

radius 21.3333px · padding 24px 24px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`#FDFDFD`	`1px solid rgba(0, 0, 0, 0.08)`	`21.3333px`	`8px 8px`	`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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
2	`transparent`	`1px solid rgba(0, 0, 0, 0.08)`	`8px`	`0px 0px`	`none`
3	`#FFFFFF`	`1px solid rgba(0, 0, 0, 0.08)`	`10.6667px`	`0px 0px`	`none`
4	`transparent`	`1px solid rgba(0, 0, 0, 0.09)`	`10.6667px 10.6667px 0px 0px`	`0px 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
5	`transparent`	`none`	`8px`	`32px 32px`	`rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`
6	`#FFFFFF`	`1px solid rgba(0, 0, 0, 0.08)`	`21.3333px`	`24px 24px`	`none`

Copy-paste code

Card 1

.card-supabase-1 {
  background:#FDFDFD;
  border:1px solid rgba(0, 0, 0, 0.08);
  border-radius:21.3333px;
  padding:8px 8px;
  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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

Card 2

.card-supabase-2 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.08);
  border-radius:8px;
  padding:20px;
}

Card 3

.card-supabase-3 {
  background:#FFFFFF;
  border:1px solid rgba(0, 0, 0, 0.08);
  border-radius:10.6667px;
  padding:20px;
}

Card 4

.card-supabase-4 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.09);
  border-radius:10.6667px 10.6667px 0px 0px;
  padding:20px;
  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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

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

See taste-skill Pro →

Supabase Card Component Styles

Rendered on the Supabase canvas

Card specs

Copy-paste code

More Supabase

Same component, other brands