UI Blocks
Access 120+ free, production-ready UI components. Copy the latest code directly from vibestacks.io/blocks.
Vibestacks includes access to a library of 120+ free UI blocks - pre-built page sections you can copy and paste into your project.
Always Get the Latest
Blocks are continuously updated with new designs and improvements. Instead of using static copies, always fetch the latest code from vibestacks.io/blocks.
How to Use Blocks
- Browse the catalog at vibestacks.io/blocks
- Find a block that fits your needs
- Click "Copy Code" to get the latest version
- Paste into your project and customize
This ensures you always have the most up-to-date code with the latest fixes and improvements.
Available Categories
| Category | Examples |
|---|---|
| Hero Sections | Gradient, minimal, split, animated, with video |
| Features | Bento grid, cards, tabs, accordion |
| Pricing | Single tier, comparison, toggle (monthly/yearly) |
| Testimonials | Cards, carousel, marquee, grid |
| Authentication | Sign in, sign up, forgot password, reset password |
| Navigation | Navbars, sidebars, mobile menus |
| Footers | Simple, multi-column, with newsletter |
| CTA Sections | Banner, card, full-width |
| FAQ | Accordion, two-column, searchable |
| Stats | Counters, cards, animated |
| Logos | Marquee, grid, with testimonial |
| Empty States | No data, error, coming soon |
| Modals | Announcements, confirmations, newsletters |
Block Features
All blocks include:
- Dark mode support - Works with light and dark themes
- Responsive design - Mobile, tablet, and desktop layouts
- Tailwind CSS - Uses your existing Tailwind config
- shadcn/ui components - Built on the same primitives you're using
- TypeScript - Full type safety
- Customizable - Easy to modify colors, content, and layout
Where to Place Blocks
your-project/
├── blocks/ # Page sections (heroes, features, etc.)
│ ├── hero/
│ │ └── hero-gradient.tsx
│ ├── pricing/
│ │ └── pricing-cards.tsx
│ └── ...
└── components/
└── ui/ # shadcn/ui primitivesBlocks go in the blocks/ directory, organized by category. This keeps them separate from your core UI components.
Customizing Blocks
After copying a block, customize it for your brand:
// Change content
const features = [
{ title: "Your Feature", description: "Your description" },
// ...
];
// Modify colors using Tailwind classes
<div className="bg-primary text-primary-foreground">
// Adjust layout
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">AI-Assisted Block Selection
If you're using Claude Code, you can ask it to help find relevant blocks:
> I need a hero section with a gradient background and email signup formClaude will fetch the block catalog and suggest matching options for you to copy from the site.
Why Not Include Blocks Statically?
We chose this approach because:
- Always fresh - You get the latest designs and bug fixes
- No bloat - Your project only contains blocks you actually use
- Easy updates - Re-copy a block anytime to get improvements
- Smaller repo - No need to track 120+ components you might not use