CLI tool
swamimalode07/rare-ui avatar
swamimalode07/rare-ui

Rare UI: a shadcn registry of animated components you install as source

A collection of rare, ready-to-use UI components and animations you can actually drop into your next project. Free and open source.

1,058 stars45 forksTypeScriptMIT

At a glance

What is it?
Rare UI is a shadcn registry of animated React components built with Next.js, Tailwind CSS and Motion. It is for teams already using shadcn who want the code in their own repository rather than another runtime dependency.
Who is it for?
Adopt Rare UI if your project already runs shadcn with Tailwind CSS v4 and React 19, and you want animated components copied into your own source tree instead of another package in package.json. Skip it if you need a long-lived, versioned component library with a changelog and deprecation policy, or if you are not on the shadcn toolchain at all.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 3 days ago.
What is it written in?
Mainly TypeScript, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on September 17, 2026, and from our analysis. They are not legal advice.

DEEP OPEN-SOURCE ANALYSIS

What problem Rare UI solves, and who it is for

Most component libraries ship as an npm package. You add a dependency, import a component, and inherit whatever the maintainer decides to change in the next minor release. Rare UI takes the opposite route: the README describes it as "a shadcn registry of rare, ready-to-use components and animations", and the quick start installs a component with the shadcn CLI rather than npm install. The files land in your repository. The README states the consequence plainly: "You own the code: no package to depend on, restyle anything."

The audience is narrow and specific. You need to be on shadcn already, because the install path is the shadcn CLI. You need Tailwind CSS, since the components are styled with it. The repository's package.json pins React 19.2.4 and Next.js 16.2.9, and the README lists Motion as the animation library. If your stack is Vue, Svelte or plain React without shadcn, this registry is not aimed at you. The topic tags on the repository (components, nextjs, reactjs, shadcn-ui) confirm the intended context.

The value proposition is not breadth. It is that animated, visually distinctive components arrive as readable source you can edit, with no wrapper package mediating your changes.

How the registry mechanism works

There are two layers here, and confusing them is the main source of surprise. The first layer is the published registry: a JSON description of each component that the shadcn CLI reads when you run an add command. The second layer is this repository, which is a Next.js site that both documents the components and generates that registry output.

The repository layout reflects this. Components live in `components/ui`, as the README states. `registry.json` sits at the top level and describes what gets published. The `registry:build` script runs `shadcn build`, which regenerates the registry output from `registry.json` and the component sources. The README tells contributors to run it "after changing a component or `registry.json`". The production build chains the two: the build script is `shadcn build && next build`, so the registry is regenerated before the site is compiled.

On the consumer side, the data flow is short. The CLI fetches the registry entry for the named component, then writes the component file and any supporting files into your project, resolving the dependencies the entry declares. Nothing stays behind as a runtime package. That is the whole mechanism, and it is why the README can say there is no package to depend on.

The animation layer is Motion, listed in package.json as `motion` at ^12.40.0. The README states that every component is animated with Motion and honors `prefers-reduced-motion`. The other dependencies in package.json give a rough idea of what individual components may reach for: Radix UI's slot primitive, lucide-react for icons, vaul for drawers, and libraries such as flubber and figma-squircle for shape work.

Installing a component and using it

The install path assumes an existing shadcn project. The README gives one command form, with the owner and repository in the path and the component name at the end:

bash
npx shadcn@latest add swamimalode07/rare-ui/{component-name}

Replace the placeholder with a real component. The README's own example is fluid-orb:

bash
npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

The CLI resolves the registry entry and writes the component into your project. Since the components live in `components/ui` in the source repository, that is the conventional destination, though the CLI follows your project's components.json configuration. After the command finishes, you should see a new file in your components directory and, depending on the component, additional dependencies added to package.json. Read the generated file before committing it. That is the point of the registry model.

If you want to run the documentation site itself, the README gives four commands:

bash
git clone https://github.com/swamimalode07/rare-ui.git
cd rare-ui
npm install
npm run dev

The site then serves locally through Next.js. To regenerate the registry after editing a component, run:

bash
npm run registry:build

That runs `shadcn build` alone, without the Next.js build that the full `npm run build` performs. Browse the full component list with live previews and props at rareui.com/components, which is where you should look before installing, since the README does not enumerate components.

The limitations the registry model brings

Copying source into your project is a trade, not a free win. Once a component is in your tree, you get no upstream fixes. If the maintainer corrects a bug in fluid-orb next month, your copy does not change. The README does not document an update command, and it does not document rollback either. Removing a component means deleting the file and auditing package.json for dependencies that nothing else uses.

Version pinning is another gap. The repository has no releases retrieved, so there is no changelog to read before an install and no version to pin against. You are pulling whatever the registry serves at the moment you run the command. For a team that needs reproducible builds across machines, that is a real concern: two developers running the add command a week apart may not receive identical files.

The stack requirements are strict. React 19.2.4 and Next.js 16.2.9 are what the repository itself runs, Tailwind CSS v4 is in devDependencies, and Motion is the animation runtime. A project on an older React or on Tailwind v3 may find that a generated component does not compile without edits. The README does not state a supported version range, so that risk is on you to check per component.

Finally, this is a curated set of visually distinctive pieces, not a design system. The README describes the components as "rare", which signals that they are meant to stand out. If you need a complete, internally consistent set of form controls, tables and navigation primitives, a general-purpose library covers more ground. Rare UI is the accent, not the foundation.

How this differs from installing an animated component package

The obvious alternative is a conventional animated component library installed from npm, where you import a component and the implementation stays in node_modules. The difference is where change happens. With a package, upgrading is one command and you get the maintainer's fixes, but customizing beyond the exposed props means fighting the library or wrapping it. With Rare UI, customization is just editing a file you already own, but every upstream improvement is manual work you may never do.

There is a second comparison worth making, inside the shadcn ecosystem itself. The shadcn CLI is the install mechanism for many registries, and Rare UI is one registry among them. Choosing between registries is mostly a question of which components you actually want and whether the code reads cleanly once it lands. Because the source is copied, you can judge that directly: install one component, open the file, and decide. That is a more honest evaluation than reading a feature list.

The dependency footprint also differs from a package. A package declares its dependencies once and resolves them centrally. A registry entry declares what that component needs, and the CLI adds it to your project. Over several installs, your package.json accumulates those dependencies. With Rare UI that includes Motion, and possibly Radix primitives, vaul or flubber depending on which components you take. The README does not publish a per-component dependency table, so check package.json after each install.

Licence and the cost of keeping components current

Rare UI is MIT licensed, and the LICENSE file is at the repository root. In practice that means you can copy the components into commercial and closed-source projects, modify them, and redistribute them, provided the licence terms are honored. This is not legal advice; read the LICENSE file and your own organization's policy before relying on it.

The upgrade cost follows from the licence and the model. Because you own the copied code, there is no upgrade path to maintain: the cost is the opposite, a decision about whether to re-run the add command for a component you have already customized, which would overwrite your edits. The README does not describe a merge or diff workflow for that case.

Maintenance of the project itself looks current. The repository is not archived, and the last push was on 2026-09-16. The README also describes a sponsorship model, with tiers at rareui.com/sponsors and the statement that "Sponsorship keeps it that way." That is the funding story, and it is worth knowing that a free MIT registry with a single named maintainer has no commercial support contract behind it. The README does not promise a support channel beyond issues and pull requests.

Editorial conclusion

Adopt Rare UI if your project already runs shadcn with Tailwind CSS v4 and React 19, and you want animated components copied into your own source tree instead of another package in package.json. Skip it if you need a long-lived, versioned component library with a changelog and deprecation policy, or if you are not on the shadcn toolchain at all. Before installing anything, run the add command for one component such as fluid-orb in a throwaway branch, read the generated file, and check which motion and Radix packages it pulls in; the README gives no rollback command, so removal means deleting the files and any dependencies you no longer use.

Frequently asked questions

How do I install a Rare UI component?

Use the shadcn CLI with the repository path and the component name, for example npx shadcn@latest add swamimalode07/rare-ui/fluid-orb. The command writes the component into your project rather than adding a runtime package.

Does Rare UI work without shadcn?

The README describes Rare UI as a shadcn registry and gives the shadcn CLI as the install method, so the documented path assumes an existing shadcn project. The README does not describe any other installation route.

What does Rare UI require in my project?

The repository runs Next.js 16.2.9, React 19.2.4, Tailwind CSS v4 and Motion, and the README states that components are animated with Motion and honor prefers-reduced-motion. The README does not state a supported version range for consumers.

Can I edit a Rare UI component after installing it?

Yes. The README states that you own the code and there is no package to depend on, so you can restyle or modify the copied file. The README does not document an update or merge workflow for components you have already changed.

Official sources

  1. Issues
  2. License: MIT
  3. Project website
  4. README
  5. swamimalode07/rare-ui on GitHub
Community notes

Community notes