Pace UI is a small set with an unusual hit rate: seven components published here, and one of them is among the most-taken loaders in the catalogue. That ratio is the argument for looking at small registries at all, which the long-tail guide makes in general.
The components
Dot Loader is the one people find first: a compact dot animation that is the right answer for the case the loading guide describes as a spinner's job - the shape of the result is unknown, so a small centred indicator beats a skeleton.
Dot Flow is the continuous variant, Flip Reveal is the card transition, and Draw Line Text animates a stroke through a headline.
Liquid Glass and Liquid Cursor are the material and pointer effects, covered by the glass guide and the custom cursor guide respectively, and Profile Peek is the hover preview - which is a hover card, with the obligation from the tooltip guide that everything inside it stays reachable on touch.
What a seven-component set is for
One or two components, taken deliberately. That is not a limitation of this particular registry, it is what a focused set is: the layered setup puts primitives at the base, one general registry for product surfaces, and individual components for the pieces meant to stand out.
The advantage a small set has is that you can read all of it in five minutes, so the decision is informed rather than sampled. The disadvantage is that there is no second component when the first one nearly fits.
The check that matters for effects
Everything in this set except the loaders is an effect, and effects have one question the animation cost guide puts first: which cost tier are you buying into.
A dot loader is CSS. A liquid glass surface is backdrop-filter, which is the most expensive common CSS property. A liquid cursor is a frame loop tracking the pointer. Those are three different decisions wearing one registry's name, and the component page lists what each one installs.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| The registry directory | Every tracked registry with size and last commit | Only registries that publish an index |
| CSS keyframes | Dot loaders and stroke animations, with no runtime | You write them |
| A large general registry | A second option when the first nearly fits | Search it rather than browse it |
| 21st | This set with previews, beside everything nearby | 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.
Frequently asked
- What is Pace UI best known for?
- Its dot loader, which is among the most-taken loading components in the catalogue. It fits the case where a spinner beats a skeleton: the shape of the result is unknown, so a small centred indicator is the honest choice.
- How should you use a seven-component registry?
- Take one or two components deliberately. A focused set is a second or third source by design, and the advantage is that you can read all of it in five minutes, so the choice is informed rather than sampled.
- What should you check across a set of effects?
- Which cost tier each one is. A dot loader is CSS and effectively free; a liquid glass surface uses backdrop-filter, the most expensive common CSS property; a liquid cursor is a frame loop tracking the pointer. Those are three different decisions under one name.
- What obligation comes with a hover preview component?
- Everything inside it must be reachable without hovering, because hover does not exist on touch. A hover card is an enhancement over a link, never the only route to the information it shows.