Shadcn UI Blocks - Website Component Library
Build websites using pre-built shadcn blocks. 929 components across 44 categories.
Installation Pattern: pnpm dlx shadcn add @shadcnblocks/[blockname]
Visual Documentation: Each block has screenshots and detailed descriptions in category-specific docs.
Category Index
Comprehensive block catalog organized by category. Click links for screenshots, descriptions, and install commands.
| Category | Blocks | Documentation |
|---|---|---|
| Feature | 265 | Feature grids, comparisons, showcases |
| Hero | 166 | Landing page heroes, product showcases |
| Pricing | 35 | Pricing tables, tier comparisons |
| Gallery | 33 | Image galleries, portfolio showcases |
| Project | 32 | Project showcases, case studies |
| Testimonial | 28 | Customer reviews, social proof |
| CTA | 25 | Call-to-action sections |
| Projects | 24 | Project listings, portfolios |
| Blog | 22 | Blog layouts, article grids |
| Footer | 21 | Site footers, information sections |
| Stats | 18 | Statistics, metrics displays |
| Services | 18 | Service offerings, feature lists |
| Contact | 17 | Contact forms, information sections |
| About | 16 | About sections, company info |
| FAQ | 16 | Question accordions, help sections |
| Navbar | 16 | Navigation bars, site headers |
| Timeline | 14 | Timeline displays, histories |
| Integration | 13 | Integration showcases, partner logos |
| Logos | 12 | Logo clouds, partner displays |
| Team | 12 | Team member profiles, staff sections |
| Download | 11 | Download sections, app stores |
| Signup | 10 | Signup forms, registration pages |
| Compare | 10 | Comparison tables, feature matrices |
| Careers | 9 | Job listings, career pages |
| Service | 7 | Service descriptions, offerings |
| Banner | 7 | Announcement banners, alerts |
| Changelog | 7 | Update logs, version histories |
| Community | 7 | Community sections, social links |
| Login | 7 | Login forms, authentication pages |
| Blogpost | 6 | Blog post templates, article layouts |
| Casestudies | 5 | Case study sections, success stories |
| Codeexample | 5 | Code snippet displays, examples |
| Awards | 4 | Award displays, recognition sections |
| Content | 4 | General content sections |
| Experience | 4 | Experience timelines, milestones |
| Resources | 4 | Resource libraries, downloads |
| Casestudy | 3 | Individual case study templates |
| Compliance | 3 | Compliance badges, certifications |
| List | 3 | Feature lists, bullet points |
| Process | 3 | Process steps, workflows |
| Ratecard | 2 | Rate cards, pricing displays |
| Resource | 2 | Resource sections, downloads |
| Skills | 2 | Skills displays, capabilities |
| Waitlist | 1 | Waitlist forms, early access |
Total: 929 blocks across 44 categories
Usage Workflow
- •Browse Categories: Check category docs for screenshots and descriptions
- •Select Block: Choose block matching your design needs
- •Install: Run
pnpm dlx shadcn add @shadcnblocks/[blockname] - •Customize: Modify component to match your brand/requirements
- •Integrate: Import and use in your application
Tips
- •Category Search: Use docs/[category].md for visual browsing
- •Screenshots: All blocks have full-page preview screenshots
- •Descriptions: Each block includes 5-sentence description with keywords
- •Installation: Follow install command format exactly
- •Customization: Blocks are fully customizable after installation
- •Combinations: Mix blocks from different categories for complete pages
Quick Reference
- •Documentation:
./docs/[category].md - •Screenshots:
./images/[category]/[blockname].png - •Install Command:
pnpm dlx shadcn add @shadcnblocks/[blockname] - •Example:
pnpm dlx shadcn add @shadcnblocks/hero1