Collection

---
name: shadcn-ui-blocks
description: Build websites using shadcn blocks. 929 components across 44 categories with visual reference catalog.
version: 2.0.0
dependencies: ["pnpm"], shadcn/ui
allowed-tools: ["Bash"], Read,Write,Edit
---

# 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](./docs/feature.md) | 265 | Feature grids, comparisons, showcases |
| [Hero](./docs/hero.md) | 166 | Landing page heroes, product showcases |
| [Pricing](./docs/pricing.md) | 35 | Pricing tables, tier comparisons |
| [Gallery](./docs/gallery.md) | 33 | Image galleries, portfolio showcases |
| [Project](./docs/project.md) | 32 | Project showcases, case studies |
| [Testimonial](./docs/testimonial.md) | 28 | Customer reviews, social proof |
| [CTA](./docs/cta.md) | 25 | Call-to-action sections |
| [Projects](./docs/projects.md) | 24 | Project listings, portfolios |
| [Blog](./docs/blog.md) | 22 | Blog layouts, article grids |
| [Footer](./docs/footer.md) | 21 | Site footers, information sections |
| [Stats](./docs/stats.md) | 18 | Statistics, metrics displays |
| [Services](./docs/services.md) | 18 | Service offerings, feature lists |
| [Contact](./docs/contact.md) | 17 | Contact forms, information sections |
| [About](./docs/about.md) | 16 | About sections, company info |
| [FAQ](./docs/faq.md) | 16 | Question accordions, help sections |
| [Navbar](./docs/navbar.md) | 16 | Navigation bars, site headers |
| [Timeline](./docs/timeline.md) | 14 | Timeline displays, histories |
| [Integration](./docs/integration.md) | 13 | Integration showcases, partner logos |
| [Logos](./docs/logos.md) | 12 | Logo clouds, partner displays |
| [Team](./docs/team.md) | 12 | Team member profiles, staff sections |
| [Download](./docs/download.md) | 11 | Download sections, app stores |
| [Signup](./docs/signup.md) | 10 | Signup forms, registration pages |
| [Compare](./docs/compare.md) | 10 | Comparison tables, feature matrices |
| [Careers](./docs/careers.md) | 9 | Job listings, career pages |
| [Service](./docs/service.md) | 7 | Service descriptions, offerings |
| [Banner](./docs/banner.md) | 7 | Announcement banners, alerts |
| [Changelog](./docs/changelog.md) | 7 | Update logs, version histories |
| [Community](./docs/community.md) | 7 | Community sections, social links |
| [Login](./docs/login.md) | 7 | Login forms, authentication pages |
| [Blogpost](./docs/blogpost.md) | 6 | Blog post templates, article layouts |
| [Casestudies](./docs/casestudies.md) | 5 | Case study sections, success stories |
| [Codeexample](./docs/codeexample.md) | 5 | Code snippet displays, examples |
| [Awards](./docs/awards.md) | 4 | Award displays, recognition sections |
| [Content](./docs/content.md) | 4 | General content sections |
| [Experience](./docs/experience.md) | 4 | Experience timelines, milestones |
| [Resources](./docs/resources.md) | 4 | Resource libraries, downloads |
| [Casestudy](./docs/casestudy.md) | 3 | Individual case study templates |
| [Compliance](./docs/compliance.md) | 3 | Compliance badges, certifications |
| [List](./docs/list.md) | 3 | Feature lists, bullet points |
| [Process](./docs/process.md) | 3 | Process steps, workflows |
| [Ratecard](./docs/ratecard.md) | 2 | Rate cards, pricing displays |
| [Resource](./docs/resource.md) | 2 | Resource sections, downloads |
| [Skills](./docs/skills.md) | 2 | Skills displays, capabilities |
| [Waitlist](./docs/waitlist.md) | 1 | Waitlist forms, early access |

**Total**: 929 blocks across 44 categories

---

## Usage Workflow

1. **Browse Categories**: Check category docs for screenshots and descriptions
2. **Select Block**: Choose block matching your design needs
3. **Install**: Run `pnpm dlx shadcn add @shadcnblocks/[blockname]`
4. **Customize**: Modify component to match your brand/requirements
5. **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`