Shadcn UI & Blocks — Claude Code Plugin
A Claude Code skill that gives Claude deep knowledge of 1,338 blocks and 1,189 components from ShadcnBlocks, built on shadcn/ui and Tailwind CSS.
When activated, Claude can intelligently select the right pre-built UI block or component for any frontend task — from landing page hero sections to dashboard data tables to ecommerce checkout flows — then handle setup and installation automatically.
What is a Claude Code Skill?
Skills are reusable instructions that extend Claude Code's capabilities. They activate automatically based on what you're doing (e.g., building a frontend) and give Claude domain-specific knowledge and workflows. Learn more in the Claude Code documentation.
Installation
Install as a Claude Code plugin from GitHub:
claude plugin marketplace add masonjames/Shadcnblocks-Skill
claude plugin install shadcnblocks
Plugin Structure
.claude-plugin/
plugin.json
skills/
shadcn-ui/
SKILL.md
references/
block-catalog.md
component-catalog.md
setup-guide.md
scripts/
get-api-key.sh
setup-shadcnblocks.sh
Prerequisites
- A React/Next.js project (or any framework supporting shadcn/ui)
- Tailwind CSS configured
- shadcn/ui initialized (
npx shadcn@latest init)
- A ShadcnBlocks API key (requires a paid plan)
jq installed (for automated setup: brew install jq)- (Optional) 1Password CLI for secure key management
API Key Setup
Provide your ShadcnBlocks API key in one of two ways:
Option A — Environment variable (simplest):
export SHADCNBLOCKS_API_KEY=<your-key>
Option B — 1Password CLI:
# Use the default reference path, or set your own:
export OP_SHADCNBLOCKS_REF="op://<Your Vault>/<Your Item>/credential"
The scripts check for the environment variable first, then fall back to 1Password.
Quick Start
-
Initialize shadcn/ui in your project (if not done):
npx shadcn@latest init
-
Run the setup script to configure the ShadcnBlocks registry:
bash scripts/setup-shadcnblocks.sh /path/to/your/project
-
Install blocks:
npx shadcn add @shadcnblocks/hero125
npx shadcn add @shadcnblocks/pricing3
-
Import and compose in your page — blocks are standard React components.
What's Included
The skill's primary value is its comprehensive catalog knowledge — Claude knows every available block and component category, what each is for, and which to recommend for a given need.
Block Categories (71 categories, 1,338 blocks)
Blocks are full page sections: hero, feature, pricing, testimonial, FAQ, navbar, footer, blog, contact, team, about, gallery, ecommerce (product cards, carts, checkout), app/dashboard (charts, data tables, sidebars), and more.
Component Groups (60+ groups, 1,189 components)
Components are reusable UI elements: forms, inputs, buttons, dialogs, sheets, accordions, charts, file uploads, comboboxes, alerts, toasts, and more. All components are free.
Repository Structure
.claude-plugin/
plugin.json # Plugin manifest
skills/
shadcn-ui/
SKILL.md # Skill definition with selection guides
references/
block-catalog.md # Full block catalog (71 categories)
component-catalog.md # Full component catalog (60+ groups)
setup-guide.md # Step-by-step setup instructions
scripts/
get-api-key.sh # Retrieves API key (env var or 1Password)
setup-shadcnblocks.sh # Automated project setup
Security
- API keys are never written to tracked source files. The setup script writes an environment variable placeholder (
${SHADCNBLOCKS_API_KEY}) to components.json, not the actual key.
- The actual key is stored only in
.env, which is gitignored.
- Scripts support both direct environment variables and 1Password CLI for secure credential management.
License
MIT
masonjames