Alpine Theme

Pro
Tweakcn

A cobalt-and-coral shadcn/ui theme with alpine-night ink, a warm blush canvas, and soft product chrome — premium SaaS with a pulse.

DESIGN.md

Typography

Font families used by this theme.

DisplayMontserrat

The quick brown fox jumps

TextMontserrat

Body copy for paragraphs, descriptions, and UI labels.

SansMontserrat

The quick brown fox jumps over the lazy dog

SerifPlayfair Display

The quick brown fox jumps over the lazy dog

MonoFira Code

const theme = { primary, radius }

Colors

Palette tokens for the light mode.

Brand

primary
primary foreground
secondary
secondary foreground
accent
accent foreground
muted
muted foreground
destructive

Surface

background
foreground
card
card foreground
popover
popover foreground
border
input
ring

Charts

chart 1
chart 2
chart 3
chart 4
chart 5

Sidebar

sidebar
sidebar foreground
sidebar primary
sidebar primary foreground
sidebar accent
sidebar accent foreground
sidebar border
sidebar ring

Theme showcase

Components, charts, bento, and marketing on the same theme tokens.

defaultsecondaryoutlinedestructiveghost
HBCNLRSC
New feature available
NameStatusBalance
John DoeActive$1,234.56
Jane SmithActive$2,345.67
Bob JohnsonInactive$567.89
OR
Performance Overview
Revenue, cost, and profit trends
Device Breakdown
Traffic by device type
Desktop
42%
Mobile
28%
Tablet
14%
TV
10%
Other
6%
Customer Types
New, returning, and VIP
Hourly Traffic
Visitors and conversions by hour (today)

AI Voice

Easily explore residential and commercial properties featuring comprehensive profiles, stunning images, and immersive virtual tours.

Performance Indictor

Easily explore or compile residential and commercial properties featuring comprehensive profiles, photos, and virtual walkthroughs.

Sales Analytics

Effortlessly list or browse residential and commercial properties with detailed profiles, images, and virtual tours.

Fast

Quickly explore and manage residential and commercial properties with comprehensive profiles

May 08, 2025
Submitted
Pending
Completed

Task Overview

Effortlessly manage your tasks with a Kanban board, where you can visualize your workflow, prioritize tasks, and track progress.

Dashboard Design

16 Jan 2025

In progress

Dashboard Design

16 Jan 2025

In progress

Dashboard Design

16 Jan 2025

In progress
Shadcn UI NavbarShadcnblocks.com
Changelog v1.1
Check out our latest updates

Blocks Built With Shadcn & Tailwind

Finely crafted components built with React, Tailwind and shadcn/ui. Developers can copy and paste these blocks directly into their project.

Browse ComponentsView GitHub
No credit card required
Brand guidelines · DESIGN.md

Ship Alpine with AI

A portable design system agents can follow — colors, type, layout, and taste rules packed into one markdown file.

Color system

Live tokens

Primary

primary

Secondary

secondary

Accent

accent

Canvas

background

Surface

card

Muted

muted

Danger

destructive

Sidebar

sidebar

Typography

Montserrat

Body · Montserrat

Playfair Display for display moments

Fira Code · code & tokens

Shape & depth

sm
lg
xl

Soft radii, quiet shadows, and layered surfaces — the shape language agents should keep consistent.

OverviewColorsTypeComponents

How agents use it

  1. 01

    Copy

    Grab the full DESIGN.md in one click.

  2. 02

    Paste

    Drop it into Cursor, Claude Code, or .agents/.

  3. 03

    Build

    Ask for UI — agents stay on-brand.

More themes

Browse other premade themes in the library.

View all

Vercel

Supabase

Claude

Claymorphism

Amber Minimal

Cleanslate

Themes + library access

Style everything.Ship faster with Pro.

Themes are free to browse and install. Pair them with Pro or Premium to unlock 1,780+ blocks, 1,914+ components, and 49 pages—all on the same design tokens.

  • 14 free shadcn themes with light & dark mode
  • Apply to 1,780+ blocks & 1,914+ components
  • Official CSS variables—compatible with Tweakcn, StyleGlide & Tinte
  • One-line CLI install into your globals.css
  • Unlock Pro/Premium for the full blocks & components library
Snow-capped alpine mountain peaks under a clear blue sky
DESIGN.md
Agent

Design.md

Alpine

Cobalt structure, coral heat, and a blush canvas—brand guidelines agents can paste straight into Cursor or Claude.

Shadcn Themes

14
  • Alpine
  • Vercel
  • Supabase
  • Claude