skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Shadcn UI & Blocks

Recommends and installs shadcn/ui components and ShadcnBlocks page sections into React projects.

1|Updated Feb 24, 2026
Search Tags:#landing page#frontend#next.js#tailwind css#ui components#shadcn#block installation
One-click install
npx skills add https://github.com/masermediagroup-stack/maser-media --skill shadcn-ui-blocks-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Shadcn UI & Blocks
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/Shadcnblocks-Skill/skills/shadcn-ui
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill shadcn-ui-blocks-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Choosing the right UI section from thousands of shadcn/ui components and ShadcnBlocks variants is slow and error-prone, and wiring up the premium registry with API keys adds setup friction. ## Core Features & Use Cases - Intelligent Block Selection: Infers layout, tone, goal, and media constraints from a request, asks at most two clarifying questions, and returns 2-3 best-fit block recommendations from a tagged index. - Registry Setup Automation: Shell scripts configure the @shadcnblocks registry in components.json and resolve the API key from an environment variable or 1Password CLI. - Use Case: When asked to build a SaaS landing page, the skill recommends a navbar, hero, feature grid, pricing, FAQ, and footer combination, then installs each via npx shadcn add and composes them into a Next.js page. ## Quick Start Ask the assistant to build a landing page with shadcn blocks for a modern SaaS product and let it recommend and install the sections.

Frequently Asked Questions about Shadcn UI & Blocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install shadcn blocks into a Next.js project?▼

Initialize shadcn/ui with npx shadcn@latest init, add the @shadcnblocks registry to components.json, then run npx shadcn add @shadcnblocks/<block-name> such as hero125 or pricing3. The skill's setup script automates the registry and API key configuration.

What is the difference between shadcn blocks and components?▼

Blocks are full page sections like heroes, pricing tables, and footers, with 1,338 premium variants requiring an API key. Components are smaller free UI elements like buttons, dialogs, and inputs, with 1,189 variants installed via the same registry.

Do ShadcnBlocks require a paid plan or API key?▼

Premium blocks require a ShadcnBlocks API key set as SHADCNBLOCKS_API_KEY in .env, retrieved from shadcnblocks.com or via 1Password CLI. The 1,189 free components do not require a paid plan.

Why does shadcn block installation fail with an auth error?▼

Auth errors occur when SHADCNBLOCKS_API_KEY is missing or invalid in .env, or when the registries entry is absent from components.json. Verify the key with the get-api-key.sh script and confirm the registry URL includes the {name} placeholder.

Can I customize shadcn blocks after installing them?▼

Yes, installed blocks are editable source code added to your components directory, not locked dependencies. You can modify props, content, styling, and layout directly after installation.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
Muath2000Muath2000

theme-factory

Apply professional design themes to slide decks, documents, reports, and HTML pages.

Community
Intermediate
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced