Shadcn UI Blocks

A command-line tool to easily install Shadcn UI block components into your Next.js project.

Installation

# Install globally
npm install -g shadcn-ui-blocks

# Or use directly with npx
npx shadcn-ui-blocks

Prerequisites

Before using this tool, make sure you have:

1. A Next.js project set up
2. Shadcn UI initialized in your project with npx shadcn-ui@latest init

Semi-Automated Prompt Handling

This tool uses a balanced approach to handle interactive prompts:

1. Manual React 19 Compatibility: You'll need to manually select your preferred option for React 19 compatibility (--force or --legacy-peer-deps)

2. Automatic Overwrite Responses: The tool automatically responds "No" to file overwrite prompts, preventing modification of your existing page files

This provides the best of both worlds - you maintain control over important dependency decisions, while avoiding repetitive page overwrite prompts that would otherwise interrupt the installation flow.

Usage

Interactive Mode

Simply run the command without any arguments to use the interactive mode:

npx shadcn-ui-blocks

This will guide you through selecting categories and components to install.

Install All Components

npx shadcn-ui-blocks install-all

Install Components by Category

npx shadcn-ui-blocks install-category "Hero Section"

Verify Installed Components

To check which components are installed and which are missing:

npx shadcn-ui-blocks verify

List Categories

npx shadcn-ui-blocks list-categories

List Components in a Category

npx shadcn-ui-blocks list-components "Hero Section"

Troubleshooting

If components are not being installed properly:

1. Make sure your Next.js project has shadcn-ui properly initialized
2. Try installing components one category at a time
3. Check your npm/Node.js version
4. Run the verify command to see which components are missing
5. Install missing dependencies if needed

Common issues:

• Some components might require additional dependencies like framer-motion or custom motion primitives
• Components might have dependencies on other components that need to be installed first
• Components might be installed with different names than expected

Available Categories

• Hero Section
• Logo Cloud
• Features
• Content
• Stats
• Team
• Testimonial
• Call To Action
• Footer
• Pricing
• Comparator
• FAQs
• Contact

Components

This tool provides easy access to the following UI blocks:

Hero Section

• hero-section-1.json to hero-section-7.json

Logo Cloud

• logo-cloud-1.json to logo-cloud-3.json

Features

• features-1.json to features-12.json

Content

• content-1.json to content-7.json

Stats

• stats-1.json to stats-4.json

Team

• team-1.json to team-2.json

Testimonial

• testimonials-1.json to testimonials-6.json

Call To Action

• call-to-action-1.json to call-to-action-3.json

Footer

• footer-1.json to footer-5.json

Pricing

• pricing-1.json to pricing-5.json

Comparator

• comparator-1.json

FAQs

• faqs-1.json

Contact

• contact-1.json to contact-2.json

License

MIT