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.

#Requirements

Your project should already run React 19, Tailwind CSS v4 and shadcn/ui. If shadcn isn't initialized yet, run init from your project root and follow the prompts.

pnpm dlx shadcn@latest init

#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.vercel.app/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.