BlogRoundup
shadcn/ui add-ons that stay in the codebase after the demo
Ten registries and kits that extend shadcn/ui with animation, charts, themes and terminal components. Which ones ship, which ones are a demo.
· updated Sep 7, 2026 · 4 min read · 10 products
The short answer
Start with tweakcn for the theme, SmoothUI for 130 free animated components that drop into shadcn, and Bklit UI for charts. Add Skiper UI or Cult UI when a landing page needs an unusual voice, Evil Buttons for 31 animated buttons in one command, and termcn when the product is a terminal. shadcncraft is the pick when the Figma file has to match the code.
shadcn/ui made the copy and paste component the default, and a shelf of registries grew around it. Most of them are a demo page with one impressive scroll effect. A few of them are a codebase you keep. This is the second kind.
What makes an add-on stay?
It installs through the shadcn CLI, it uses the same tokens, and it leaves after one command. A component that carries its own colour system or its own animation runtime is a second design system in disguise, and six months later it is the reason the dark mode is broken on one page.
The theme first
tweakcn is a visual theme editor for shadcn/ui. Pick the radius, the palette and the fonts, copy the CSS variables, done. It is the tool to open before any component, because every add-on below inherits from it.
Animation on the runtime you already have
SmoothUI ships 130 free animated React components as drop-ins for shadcn. Rare UI installs tasteful animated components through the same CLI. Both use Motion, which you will have anyway, so the bundle grows by the component alone. Evil Buttons is 31 animated buttons with live previews, one command each, and it is the fastest way to find out which animation your product can carry.
An unusual voice
Skiper UI and Cult UI are the two registries with a visual opinion. Skiper sells uncommon components for shadcn, installed with the CLI. Cult UI is animated shadcn style components with a voice most templates lack. Use one of them on a landing page and keep the product UI on the plain kit.
Charts, terminals, dashboards
Bklit UI puts charts and data visualisation on top of shadcn/ui, so a dashboard reads as one system. termcn is terminal UI components for React from a registry, the pick when the product is a CLI with a web face. Watermelon UI gathers open source React components, blocks, dashboards and templates in one place for the days when the whole page is needed.
Code and Figma in step
shadcncraft is a shadcn/ui design system with a matching Figma kit and blocks, bought once. It is the pick for a team where a designer and a developer share the file, because the tokens on both sides agree.
The hub for all of this is dev tools on the board, and the general shelf is in React component libraries that make a landing page look expensive. When the site is a landing page rather than an app, read Figma vs Framer for a landing page first.
The theme editor to open before any component
Pick radius, palette and type, copy the variables into globals.css. Every add-on below inherits from this file, so it is the first ten minutes of any shadcn project.
Pros
- Free
- Outputs plain CSS variables
- Live preview on real components
Cons
- A theme is still a taste decision, the tool only speeds it up
130 free animated components that drop into shadcn
The largest free animated set on the board. Motion under the hood, the shadcn CLI for install, and enough range that a product UI and a landing page can both draw from it.
Pros
- 130 components, all free
- Installs via the shadcn CLI
- Uses Motion, which you have anyway
Cons
- A few components are showpieces you will use once
31 animated buttons, one command each
The fastest way to find out how much motion your product can carry. Install three, keep one.
Pros
- Free
- Live previews
- One command installs
Cons
- Buttons only
Tasteful animation through the shadcn CLI
Rare UI is the restrained one. The animations are small and correct, which is what a product interface needs.
Pros
- Free
- Restrained motion
- Same install path as the kit
Cons
- Smaller catalogue than SmoothUI
Uncommon components for a landing page with a voice
Skiper sells the unusual pieces: the section that makes a visitor scroll back up. Use it on the marketing site and keep the app on the plain kit.
Pros
- A visual opinion
- CLI install
- Good for a hero and a features grid
Cons
- The best pieces are paid
- Easy to overuse
Animated shadcn style components with an unusual voice
Cult UI is the other registry with taste. It pairs with Skiper on a landing page, and one of the two is plenty.
Pros
- Distinctive look
- shadcn compatible
- Free core
Cons
- Premium pieces are paid
- Strong voice needs a matching brand
Charts and data visualisation on top of shadcn
Dashboards fall apart when the chart library carries its own colour system. Bklit UI keeps charts on the shadcn tokens, so a dashboard reads as one product.
Pros
- Free
- Inherits the theme
- Covers the common chart types
Cons
- Fewer exotic chart types than a full charting library
Terminal UI components from a registry
For a product that is a CLI with a web face. Prompts, output, progress, all as React components on the same tokens.
Pros
- Free
- Registry install
- Reads right next to plain shadcn
Cons
- Narrow use case
Blocks, dashboards and templates in one place
Watermelon UI is the whole page shelf: open source components, blocks, dashboards and templates for the days when a section is needed by lunch.
Pros
- Free and open source
- Blocks and full templates
- Broad coverage
Cons
- Broad means uneven, check each block
A design system with a Figma kit that matches the code
The pick for a designer and a developer sharing one file. The tokens on both sides agree, which is rarer than it should be.
Pros
- Code and Figma in step
- Bought once
- Blocks included
Cons
- Paid
- Overkill for a solo maker with no Figma file
Questions
Do shadcn add-ons work with any React framework?
Most of them install through the shadcn CLI, which supports Next.js, Vite, Remix, Astro and others. The component lands as source in your repo, so the framework only has to render React and read Tailwind. Check that the add-on uses Tailwind 4 syntax if your project does.
Will animated components slow the page down?
The runtime is Motion in most of these registries, and Motion loads once. A page with ten animated components carries the same library as a page with one. The cost that matters is layout shift, so keep animated elements out of the first fold or give them a fixed size.
Which of these are free?
tweakcn, SmoothUI, Evil Buttons, Rare UI, Bklit UI, termcn and Watermelon UI are free. Skiper UI and Cult UI are freemium with the uncommon pieces paid. shadcncraft is a one time purchase for the code and the Figma kit together.
