shadcn vs Spacious

Awesome Design Skills · Awesome Design Skills

Tied at 3/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Minimalist way: white space, one accent, and the confidence to leave things out. Both are best for: visual direction.

shadcn3/5
After: Tally landing page, made with shadcn (Awesome Design Skills)
Spacious3/5
After: Tally landing page, made with Spacious (Awesome Design Skills)

Scroll either page; the other follows.

shadcn (Awesome Design Skills)

3/5

shadcn gives Tally the familiar shadcn/ui look: Geist type, thin zinc borders, black buttons, Fira Code numbers and a solid black Plus card. The dashboard has a sidebar with the household switcher and color only for status. It is clean and correct, but it is what many AI-built apps already look like. Pick it if you build on shadcn/ui and want pages that match.

Spacious (Awesome Design Skills)

3/5

Spacious gives Tally a roomy white page on an 8pt grid with Montserrat headings, Open Sans text and a blue accent. The dashboard is calm white cards on pale grey with a dark "Left to budget" card. It is clean, but generic, and the mobile dashboard scrolls sideways. Pick it as a neutral base if you plan to add your own brand.

Side by side

Fieldshadcn (Awesome Design Skills)Spacious (Awesome Design Skills)
Fonts
  • Geist
  • Fira Code
  • Montserrat
  • Open Sans
  • IBM Plex Mono (dashboard)
Colors
  • #ffffff white
  • #fafafa sidebar
  • #000000 black
  • #e4e4e7 zinc border
  • #52525b zinc text
  • #16a34a green
  • #ffffff white
  • #f9fafb pale grey
  • #2563eb blue
  • #3b82f6 light blue
  • #8b5cf6 violet
  • #111827 ink
Pick it for
  • shadcn/ui projects
  • SaaS dashboards
  • developer tools
  • admin panels
  • SaaS landing pages
  • starter templates
  • calm dashboards
  • internal tools
Skip it for
  • brands that want to stand out
  • consumer apps that need warmth
  • editorial sites
  • brands that need personality
  • dense data tools
  • playful products
Observations
  • looks like a stock shadcn template
  • generic: close to many blue-on-white templates
  • dashboard mobile: 514 px wide on a 390 px screen, so it scrolls sideways

How the brief works

Install shadcn (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/shadcn#main .claude/skills/shadcn

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install Spacious (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/spacious#main .claude/skills/spacious

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.