Home/Documentation/Installations

Ready-made blocks. Zero wasted time.

Register Bag/UI once and pull any block directly into your project with a single CLI command.

#Introduction

Bag/UI is a growing library of carefully crafted React blocks built on shadcn/ui and Tailwind CSS. Interactive sections may include Framer Motion or GSAP animations, while every block remains fully customizable and installable through the Bag/UI registry with a single CLI command.

#Create your app

Starting from zero? Pick your framework below, run the scaffold command, then jump to Requirements to wire up shadcn/ui. Already have a project with shadcn/ui configured? Skip straight to Requirements — nothing in this section applies to you.

A React framework with file-system routing and server rendering.

pnpm create next-app@latest my-app

Choose the recommended defaults when prompted — TypeScript, Tailwind CSS and the App Router are all Bag/UI needs. Next.js docs ↗

#Requirements

Your project should run React 19, Tailwind CSS v4 and shadcn/ui. Coming from the framework guide above? Run this from your new project's root — same command, no flags needed. Already have shadcn/ui running? You can skip straight to Register the namespace.

pnpm dlx shadcn@latest init

Tip: for a setup tailored to your framework, add the matching flag — for Next.js, that's -t next: -t next, -t vite, -t start, -t react-router or -t astro. Laravel doesn't use a flag — the CLI detects it automatically.

#Register the namespace

Add the Bag/UI registry to your project's components.json so the shadcn CLI knows where to fetch the blocks from. You only do this once per project — no API key needed for free blocks.

json
{
  "registries": {
    "@bagui": "https://bagui.pro/r/{name}.json"
  }
}

#Install a free block

Once the registry is wired, install any free block by its id. The CLI fetches the source, pulls the missing shadcn primitives and writes the file under components/blocks/.

pnpm dlx shadcn@latest add @bagui/hero-01
  1. 1Pick a block in /blocks and copy its id (e.g. hero-01).
  2. 2Run the install command above with your package manager of choice.
  3. 3Import the default export from components/blocks/<id>.tsx and render it.
  4. 4Replace the placeholder copy, links and brand colors.

#Customization

Blocks ship in plain JSX with utility classes only. Change copy, swap icons from lucide-react, restyle with your own Tailwind tokens or refactor the markup — there is no abstraction in the way.

If you replace lucide-react with another icon library, search and replace the imports. The semantics are kept generic so other libraries plug in easily.

#Dark mode

Every block reads the standard shadcn CSS variables (--background, --foreground, --muted, …). As long as your project toggles the .dark class on the <html> element, the blocks adapt automatically.

#Updates

When a block gets a fix or a refresh, the registry endpoint serves the new source at the same URL. Re-run the install command to pull the latest version, or watch the changelog for high-level summaries.

pnpm dlx shadcn@latest add @bagui/hero-01

#Support

Stuck on something? Email anelka.bag@gmail.com — Pro accounts get priority replies, free users still get an answer when time allows.

Still stuck?

Drop us an email at anelka.bag@gmail.com. Pro accounts get priority replies.