Flowbite, Preline and TailGrids belong to a category that predates the registry model: Tailwind component kits with a free tier and a paid one. They are still a reasonable answer to a real question, and they answer it differently enough from a registry that the comparison is worth making properly.
What a Tailwind kit is
Markup plus classes, usually with a small JavaScript layer for the interactive parts, distributed as documentation you copy from rather than as files a CLI writes. Framework-agnostic by design: the same block works in a React app, a Rails view or a static page.
TailGrids indexes 61 items in the shadcn-compatible portion of its catalogue and carries around 1,600 stars, which is a fair illustration of the shape - a kit's main catalogue lives on its own site rather than in a registry index.
Where they beat a registry
No framework requirement. If your templates are Blade, ERB or plain HTML, a registry that copies React files is not an option.
Volume of finished blocks. These kits ship hundreds of marketing and application sections, which is more than most registries carry.
A single visual system. Everything is drawn by one team, so blocks fit together without a normalisation pass.
Where a registry beats them
Installation. npx shadcn add resolves dependencies and writes files to the paths your project defines. Copying markup out of a documentation page tracks nothing, declares nothing and updates nothing, which the free libraries guide sets out as the difference between a component and a snippet.
Behaviour. The interactive parts of a kit are usually a small JavaScript layer of their own, which sits awkwardly beside React's rendering model. A registry component built on primitives does not have that problem.
Your tokens. Kit markup carries the kit's colours. A registry component that reads CSS variables adapts to your theme automatically, which is the first item on the compatibility test.
The free tier question
All three follow the same model: a generous free set, with the blocks people actually want behind a licence. That is legitimate, and the failure mode is discovering the boundary halfway through a page.
Check three things before starting: which components are free, whether the licence is per project or per developer, and whether client work is covered. Those are cheaper to read now than to renegotiate after the design is built around a paid block.
The practical recommendation
If you are in React, prefer the registry model and use a kit for the framework-agnostic parts you cannot get otherwise. If you are not in React, a kit is the better tool and the comparison is not close.
And if you do take kit markup into a React project, treat it as a starting point rather than a component: replace its colours with your tokens, replace its JavaScript layer with real components for anything interactive, and normalise the spacing before it propagates.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| Flowbite / Preline / TailGrids | Framework-agnostic blocks in one visual system | Copy-paste distribution, and the good blocks are paid |
| The registry directory | Components installed by a CLI with dependencies resolved | React, and quality varies by registry |
| Tailwind Plus | The most polished conventional sections | Paid, and widely used |
| 21st | Individual components with previews, installed by the same CLI | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Browse the registry directory →
Frequently asked
- When is a Tailwind kit better than a registry?
- When you are not in React. Blade, ERB or plain HTML templates cannot use a CLI that copies React files, and kits are framework-agnostic by design. Kits also ship more finished marketing blocks than most registries, all drawn by one team so they fit together.
- Where does a registry win?
- Installation, behaviour and tokens. A CLI resolves dependencies and writes files where your project expects them; a kit's interactive JavaScript layer sits awkwardly beside React; and registry components that read CSS variables adapt to your theme, while pasted markup carries the kit's colours forever.
- What should you check in a kit's free tier?
- Which components are actually free, whether the licence is per project or per developer, and whether client work is covered. The failure mode is discovering the boundary halfway through a page, after the design has been built around a paid block.
- How should you use kit markup inside a React project?
- As a starting point rather than as a component. Replace its colours with your tokens, replace its JavaScript layer with real components for anything interactive, and normalise the spacing before the pattern propagates through other screens.