Skip to content
ui.artbloomui.artbloom home
Sign up

Docs

Install anything here in one command

ui.artbloom is a registry, not a dependency. The CLI copies real source files into your project — you own them the moment they land, and nothing on this site is in your bundle.

npx ui.artbloom add snap-toggle

Requirements

  • React 19 and either Next.js 15+ or any bundler that resolves the @/* alias.
  • Tailwind CSS v4. Pieces are written against v4 syntax — @theme inline, oklch tokens — and will not style correctly on v3.
  • motion only where a piece asks for it. Most animations here are plain CSS and need no packages at all; the CLI names every package it needs before it writes a file.

What a piece is

An animation is a file or two — the component, plus the stylesheet or hook it imports. A template is a whole site: every page, every component it composes, and the images, models and audio it needs, written into your project rather than linked from ours.

Everything in the catalogue is made and maintained in-house by @artbloom. There is no submission flow, and nothing here is behind a paywall.

Every piece is served as plain JSON. Fetch one yourself: /r/snap-toggle.json. The index of everything lives at /r/registry.json.

What lands in your project

Files go where your project already keeps things — components under components/ui, hooks under hooks, pages under app. An animation that needs a stylesheet ships one and imports it itself; where a piece needs bare keyframes or CSS variables instead, they are appended to your globals.css rather than left as a second file to wire up.

shadcn compatibility

The payload is a superset of the shadcn registry item shape, so npx shadcn@latest add https://ui.artbloom.tech/r/snap-toggle.json works too. Our extra fields sit under meta, which shadcn ignores. One thing does not survive the trip: shadcn knows nothing about our assets, so a template installed that way arrives without the bytes that cannot be inlined as text.

If a model is reading this for you

Two endpoints exist so an assistant does not have to scrape the site to answer “what is in here, and how do I install it”. /llms.txt is the whole catalogue as one page of plain text: every piece with its description, its category and the exact command that installs it. One fetch, no parsing.

/mcp is the same catalogue over the Model Context Protocol, for a client that can call tools rather than read pages — point one at https://ui.artbloom.tech/mcp. It has two tools: search_registry to find something, and get_item to read one piece’s install command, its file list with exact sizes, and — on request — its source. No key, no account, and nothing it can write. The endpoint is POST-only, so there is nothing to see by opening it.

Licence

Copy it, edit it, ship it commercially. What you may not do is republish the catalogue itself as a competing library — the full terms are on the licence page.

after: npx ui.artbloom add snap-toggle
components/ui/snap-toggle.tsx  # new
components/ui/snap-toggle.css  # new
hooks/use-canvas-scene.ts      # new