swamimalode07/rare-ui

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

TypeScript

1,697

346 commits

updated Oct 11, 2026

See the code

README

A shadcn registry of rare, ready-to-use components and animations.

Next.js Tailwind CSS TypeScript shadcn registry MIT + Commons Clause + Attribution

rareui.com  ·  Components  ·  Follow on X


Rare UI is a shadcn registry built with Next.js, Tailwind CSS, and TypeScript. Every component is animated with Motion, honors prefers-reduced-motion, and installs straight into your codebase. You own the code: no package to depend on, restyle anything.

Sponsors

Runable
Diamond Sponsor
PrivateAlps
Diamond Sponsor
Context.dev
Diamond Sponsor

Platform Sponsors

Products that back Rare UI through their open-source programs.
Databuddy
Analytics Sponsor

Rare UI is free. Sponsorship keeps it that way. See the tiers at rareui.com/sponsors.

Quick start

Install any component with the shadcn CLI:

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

For example:

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

Browse every component, with live previews and props, at rareui.com/components.

MCP (Claude Code, Cursor, Codex)

In your project, add this to components.json:

{
  "registries": {
    "@rare-ui": "https://raw.githubusercontent.com/swamimalode07/rare-ui/main/public/r/{name}.json"
  }
}

Then:

npx shadcn@latest mcp init --client claude
# or: --client cursor | vscode

Ask: add @rare-ui/fluid-orb

Or just: Add the fluid orb from Rare UI

Not add fluid-orb on its own. That looks in the default shadcn registry.

Full steps: rareui.com/mcp.

Running locally

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

Components live in components/ui. After changing a component or registry.json, rebuild the registry output with npm run registry:build.

Contributing

Issues and pull requests are welcome. Read CONTRIBUTING.md for the full walkthrough, from creating a component to a working install command.

License

MIT with the Commons Clause and an attribution requirement. Use, modify and ship the components in anything you build, personal or commercial, closed source included.

Credit is required. Any project shipping a Rare UI component must credit Rare UI with a visible link to rareui.com, in a footer, an about page, a credits screen or a README, and must keep the credit and copyright notice in the source it copied.

You may not sell, sublicense or redistribute the components themselves, alone, in a bundle, or ported to another framework.

The name Rare UI, the logo and the site design are not covered by the license.


Built by @swamimalode

components
nextjs
reactjs
shadcn-ui

swamimalode07/rare-ui

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

TypeScript

1,697

346 commits

updated Oct 11, 2026

See the code

README

A shadcn registry of rare, ready-to-use components and animations.

Next.js Tailwind CSS TypeScript shadcn registry MIT + Commons Clause + Attribution

rareui.com  ·  Components  ·  Follow on X


Rare UI is a shadcn registry built with Next.js, Tailwind CSS, and TypeScript. Every component is animated with Motion, honors prefers-reduced-motion, and installs straight into your codebase. You own the code: no package to depend on, restyle anything.

Sponsors

Runable
Diamond Sponsor
PrivateAlps
Diamond Sponsor
Context.dev
Diamond Sponsor

Platform Sponsors

Products that back Rare UI through their open-source programs.
Databuddy
Analytics Sponsor

Rare UI is free. Sponsorship keeps it that way. See the tiers at rareui.com/sponsors.

Quick start

Install any component with the shadcn CLI:

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

For example:

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

Browse every component, with live previews and props, at rareui.com/components.

MCP (Claude Code, Cursor, Codex)

In your project, add this to components.json:

{
  "registries": {
    "@rare-ui": "https://raw.githubusercontent.com/swamimalode07/rare-ui/main/public/r/{name}.json"
  }
}

Then:

npx shadcn@latest mcp init --client claude
# or: --client cursor | vscode

Ask: add @rare-ui/fluid-orb

Or just: Add the fluid orb from Rare UI

Not add fluid-orb on its own. That looks in the default shadcn registry.

Full steps: rareui.com/mcp.

Running locally

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

Components live in components/ui. After changing a component or registry.json, rebuild the registry output with npm run registry:build.

Contributing

Issues and pull requests are welcome. Read CONTRIBUTING.md for the full walkthrough, from creating a component to a working install command.

License

MIT with the Commons Clause and an attribution requirement. Use, modify and ship the components in anything you build, personal or commercial, closed source included.

Credit is required. Any project shipping a Rare UI component must credit Rare UI with a visible link to rareui.com, in a footer, an about page, a credits screen or a README, and must keep the credit and copyright notice in the source it copied.

You may not sell, sublicense or redistribute the components themselves, alone, in a bundle, or ported to another framework.

The name Rare UI, the logo and the site design are not covered by the license.


Built by @swamimalode

components
nextjs
reactjs
shadcn-ui

Significant stargazers

Alex Yang

6,374 followers · starred Aug 2026

Felix-Ayush

655 followers · starred Jul 2026

Kristóf Poduszló

319 followers · starred Sep 2026

Mohammed Efaz

20 followers · starred Aug 2026