https://preview.redd.it/n8fy0bp6jp5h1.png?width=4800&format=png&auto=webp&s=65287b0be922f40117dfbcbe197bf969e295824e

Modern web development has never been faster, yet building polished interfaces still takes a significant amount of time.

Even with React, Next.js, Tailwind CSS, and shadcn/ui, developers often find themselves recreating the same sections over and over again: hero sections, pricing pages, feature grids, testimonials, call-to-actions, and more.

That's exactly why I built Bag/UI.

What is Bag/UI?

Bag/UI is a curated collection of production-ready React sections built on top of shadcn/ui and Tailwind CSS.

Instead of installing a traditional component library, Bag/UI uses the custom registry system introduced by shadcn/ui. This allows developers to install components directly into their projects while keeping full ownership of the source code.

The philosophy is simple:

• No black-box components
• No vendor lock-in
• Full source code ownership
• Easy customization
• Production-ready UI blocks

If you've used shadcn/ui before, you'll feel right at home.

Why I Built It

One thing I noticed while building client projects and personal products is that most UI libraries focus on individual components.

You get buttons.

You get dialogs.

You get inputs.

But what you actually need when shipping a product are complete sections.

A landing page isn't made of buttons.

It's made of:

• Hero sections
• Feature showcases
• Pricing tables
• Testimonials
• Call-to-actions
• Navigation bars
• Footers

Developers often spend hours rebuilding these patterns from scratch.

Bag/UI aims to solve that problem by providing reusable sections that can be installed in seconds and customized however you want.

Getting Started

Adding Bag/UI to your project takes a single command:

npx shadcn@latest registry add =https://bagui.vercel.app/r/{name}.json

Once the registry is added, you can install any available block directly from the CLI.

For example:

npx shadcn@latest add /hero-modern

Or:

npx shadcn@latest add /pricing-section

The component is copied directly into your project, following the same philosophy that made shadcn/ui popular among developers:

You own the code.

Built for Real Projects

Bag/UI isn't intended to be another showcase library full of beautiful demos that never make it to production.

Every block is designed with real-world usage in mind:

• Clean component structure
• Responsive layouts
• Tailwind CSS styling
• shadcn/ui compatibility
• Developer-friendly customization

Some blocks also leverage technologies like GSAP and Framer Motion to provide richer interactions and animations when needed.

Why a Registry Instead of an npm Package?

Traditional UI libraries often become difficult to customize as projects grow.

With a registry-based approach:

• Components are copied into your codebase
• You can modify anything
• No dependency lock-in
• Easier debugging
• Better long-term maintainability

This model has become increasingly popular because it prioritizes ownership over abstraction.

Example Workflow

Install the registry:

npx shadcn@latest registry add =https://bagui.vercel.app/r/{name}.json

Install a component:

npx shadcn@latest add u/bagui/hero-modern

Import it into your application:

import { HeroModern } from "@/components/bagui/hero-modern";

export default function HomePage() {
  return (
    <main>
      <HeroModern />
    </main>
  );
}

Customize it however you want:

<HeroModern
  title="Build Faster"
  description="Install production-ready sections directly into your project."
/>

No wrappers.

No locked APIs.

No hidden implementation details.

The Goal

Bag/UI is still in its early stages.

My goal is to build a growing catalog of high-quality sections that help developers ship faster without sacrificing flexibility.

Instead of spending hours rebuilding common layouts, you can start with a production-ready foundation and focus on what makes your product unique.

What's Coming Next?

The roadmap includes:

• More landing page sections
• SaaS-focused blocks
• Dashboard layouts
• Marketing components
• Complete page templates
• Advanced animations
• Better developer tooling

The vision is simple:

>

Try Bag/UI

🌐 Website

https://bagui.vercel.app

📚 Documentation

https://bagui.vercel.app/docs

If you're already using shadcn/ui in your projects, I'd love to hear your feedback and suggestions for future components.

Happy building 🚀