Shadcn.io is not affiliated with official shadcn/ui Build faster with thousands of production-ready shadcn/ui blocks and components. Designed for AI-assisted React and Tailwind development. Premium React Templates Hand-built Next.js + shadcn/ui templates — production-ready landing pages, portfolios, and SaaS dashboards DESIGN.md Files Hand-curated DESIGN.md specs — colors, typography, and components from real brands. Drop into Claude or Cursor. Stripe Inspired An inspired interpretation of Stripe's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of nearly every marketing page. The system pairs the proprietary Sohne family at thin (300) weights with negative letter-spacing for editorial-density display headlines, and uses tabular-figure body type where money and numerics matter. Buttons are tight-radius pills, cards live on near-white surfaces, and the dashboard track flips polarity to a familiar dark-app shell. A near-black product-focused marketing canvas built around "#010102" (the deepest dark surface of any tool in this collection), light gray text ("#f7f8f8"), and the signature Linear lavender-blue ("#5e6ad2") used as the single chromatic accent. The system reads as software-craft documentation: dense, technical, and quietly luxurious. Display type is set in the Linear custom sans (SF Pro Display fallback) at 500-700 with measured negative tracking. Cards live as charcoal panels ("#0f1011") with hairline borders. The accent lavender appears on the brand mark, focus rings, and a few intentional CTAs — never decoratively. Page rhythm leans on product UI screenshots framed in dark panels rather than atmospheric color. A photography-first interface that turns marketing into a museum gallery. Edge-to-edge product tiles alternate light and dark canvases, framed by SF Pro Display headlines with negative letter-spacing and a single Action Blue (#0066cc) interactive color. UI chrome recedes so the product can speak — no decorative gradients, no shadows on chrome, only the one signature drop-shadow under product imagery resting on a surface. A near-black developer-platform canvas anchored on "#0d1117" (the canonical GitHub dark-mode surface) and a pale arctic-blue link voltage "#8dd6ff" used as the only text accent across hero, nav, and link rests. Display type runs Mona Sans at variable weights that land between 425 and 480 — never the bold 700 most dev platforms reach for — with aggressive negative tracking on the hero ("-2.24px" at 64px). Pill nav buttons hit a "60px" pillar radius for the segmented Code/Plan/Collaborate/Automate/Secure switcher; cards land at "16px"; CTA buttons hold "8px". Accent green "#5fed83" lights the activity-glow and CTA-banner shadow gradient; success-emphasis green "#08872b" carries the actual primary action paint. The system reads as a developer console wrapped in editorial restraint — heavy use of code-screenshots and IDE mockups framed in "#151a22" panels, with purple-to-indigo radial atmospherics ("#9350ff", "#5049c2", "#7873cb") only inside the Copilot hero glow. Vercel Inspired An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / magenta / amber) that acts as the entire decorative system, paired with a custom geometric sans for headlines and a monospaced caption face for technical labels. A warm-canvas editorial interface for Anthropic's Claude product. The system anchors on a tinted cream canvas with serif display headlines, warm coral CTAs, and dark navy product surfaces (code editor mockups, model showcase cards). Brand voltage comes from the cream/coral pairing — deliberately warm and humanist where most AI brands use cool blue + slate. Type voice runs a slab-serif display ("Copernicus" / Tiempos Headline) for h1/h2 and a humanist sans for body. The signature Anthropic black-radial-spike mark anchors the wordmark. A confident black-and-white editorial frame interrupted by oversized, hand-cut pastel color blocks. The marketing canvas is rigorously monochrome — figmaSans variable type, pure white surfaces, pure black ink, pill-shaped CTAs — while each story section drops the page into a saturated lime, lavender, cream, mint, or pink panel that reads like a sticky note placed on a clean desk. The result is a design system that feels both technical and joyful — a tool for serious work, made by people who like color. A confident dark-canvas builder marketing site that treats the page like a working artboard — pure black surfaces, white display type set in GT Walsheim Medium with aggressive negative tracking, and a single confident blue (#0099ff) reserved for hyperlinks and selection states. The page rhythm is broken by oversized vibrant gradient atmosphere panels — magenta, violet, orange spotlights — that act as living showcase tiles, not decoration. Every CTA is a white pill on dark; every card is a translucent or charcoal surface; every section title pulls letter-spacing tight enough to feel like a poster. Pro Marketing Blocks Production-ready hero, pricing, CTA, and feature sections for your landing pages Pricing Section Pricing tables, plan comparisons, and subscription sections Landing page heroes, headline banners, and above-the-fold sections Conversion CTAs, announcement bars, and signup sections Features Section Bento grids, split panels, alternating rows, and capability showcases Customer quotes, social proof, and review sections Accordions, search-filtered lists, and tabbed Q&A layouts Customer logo strips, marquees, grid walls, and featured case studies Top bars, alert strips, floating pills, cookie consent, and countdowns 1 Pick any block Browse 6,000+ production-ready sections across 46 categories — from pricing rows to dashboards. shadcn.io/pricing-block 6,000+ blocks Browse 6,000+ production-ready sections across 46 categories — from pricing rows to dashboards. 2 Own the code Paste it straight into your repo. Everything is plain shadcn/ui + Tailwind — edit, theme, or compose freely. pricing.tsx < Pricing ∕ plans={…} /> // editable — just Tailwind + shadcn Paste it straight into your repo. Everything is plain shadcn/ui + Tailwind — edit, theme, or compose freely. 3 Ship today Install via the shadcn CLI or prompt an AI agent through MCP. What took a day takes minutes. Claude Code ▸ add_item("hero-block/split") Block installed. Install via the shadcn CLI or prompt an AI agent through MCP. What took a day takes minutes. Works with the editors you already use Eight most-used AI agents below — every setup guide is a single Pro URL away. Official Anthropic CLI — one-line `claude mcp add` setup One-click install via Cursor 1.0+ or ~/.cursor/mcp.json Fast, modern editor — connect via ~/.config/zed/settings.json Custom Connectors UI — paste one URL, no restart Copilot agent mode with .vscode/mcp.json per workspace Cascade MCP marketplace — token via ${env:VAR} interpolation AI Assistant across IntelliJ, WebStorm, PyCharm & more TOML config at ~/.codex/config.toml — CLI & IDE share state

1 Grab your MCP URL Copy from /dashboard/account — your personal Pro token is baked in. shadcn.io/dashboard URL shadcn.io/api/mcp?token=••• Copied to clipboard Grab your MCP URL Copy from /dashboard/account — your personal Pro token is baked in. 2 Paste into your editor Any MCP-ready client. Here's the command for Claude Code: Terminal $ claude mcp add shadcnio … ✓ Connected — 15 tools Paste into your editor Any MCP-ready client. Here's the command for Claude Code: 3 Prompt as usual Your AI agent auto-discovers all 15 MCP tools — search, preview and install any shadcn.io resource straight from your prompt. Claude Code ▸ search_items("pricing") Installed. Ready to ship. Prompt as usual Your AI agent auto-discovers all 15 MCP tools — search, preview and install any shadcn.io resource straight from your prompt. Shadcn Component Examples The 8 most-used shadcn primitives — browse 1,100+ free copy-paste examples across every component Loading states, icon buttons, variants, and keyboard-shortcut buttons Validated layouts on react-hook-form + Zod — sign-up, settings, multi-step Centered modals for forms, settings panels, and detail views Sortable, paginated tables with row selection and bulk actions Kebab menus, user profile menus, and settings dropdowns with submenus Login forms, image cards, dashboard widgets, and clickable tiles Horizontal and vertical tabbed panels with badges and scrollable rows Text, email, password show/hide, search, and validation-state variants Discover free components, patterns, and tools for your next project Free component patterns built with shadcn/ui Search across 200,000+ icons from 150+ libraries Open source React templates built with shadcn/ui Beautiful chart components for data visualization Animated text effects and typography components Animated backgrounds and visual effects AI-powered UI components and chat interfaces TypeScript React hooks for Next.js projects Ready-to-use theme configurations for shadcn/ui Animation easing functions and curve visualizer Curated shadcn/ui resources, libraries, and tools Free online tools for developers Built with shadcn.io 50k+ devs are building with shadcn.io components InfoSignal Inc. Gen Y Solutions Intero Properties Devs love shadcn.io We've been blown away by the love & support from users Used by 50k devs and across top universities What is shadcn.io? Is shadcn.io the official shadcn/ui website? Who is shadcn.io for? How do I install components from shadcn.io?