Unlumen UI is a small set - 22 components here - built around one idea: motion that responds to the page rather than motion that runs on a timer. Scroll reveals, count-ups, a navigation menu that animates between items. That focus is what makes a set of twenty-two worth knowing when sets of four hundred exist.
The components
Motion Navigation Menu is the header with an animated indicator, the pattern the tabs guide argues should animate its position and width rather than fading between states.
Scroll Reveal Image and Side By Side Slide are the scroll-driven pieces, and the scroll animation guide makes the case that a reveal is an IntersectionObserver rather than a scroll listener.
Count Up is the animated number, which the stats guide covers with the two rules that keep it honest: the final value belongs in the DOM from the start, and it should not re-run every time the element scrolls back into view.
Glow Button is the hover treatment, Pixel Liquid Background is the backdrop, Animated Sidebar is the navigation panel, and Vertical Marquee is the moving column.
Why a small set can be the right one
The long-tail guide makes the general argument; this set is a good illustration of it. Twenty-two components chosen around one idea share timing and easing, which is most of what makes a page feel coherent, and a set you can read through in ten minutes is a set you can actually choose from.
The trade is coverage. There are no primitives, no forms, no data display, so this is a second or third source rather than a foundation, and taking three components from it is the intended use rather than a compromise.
What to check
The same short list that applies to any single-author set: whether the component reads your CSS variables rather than hardcoding colours, what it installs alongside itself, and whether its file name will collide with something you already have. The CLI guide covers the last one, which is the only silent failure of the three.
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 its size and last commit | Only registries that publish an index |
| CSS scroll-driven animations | Reveals and progress with no runtime at all | Uneven support; needs a fallback |
| A large general registry | Coverage, when you need a specific variant | 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.
Browse the registry directory →
Frequently asked
- What is Unlumen UI built around?
- Motion that responds to the page rather than running on a timer: scroll reveals, an animated navigation indicator, a count-up, a sidebar that animates open. Twenty-two components chosen around one idea share timing and easing, which is most of what makes a page feel coherent.
- Is a twenty-component set worth using?
- When it is focused, yes. Coverage is the trade: no primitives, no forms, no data display, so it is a second or third source rather than a foundation. Taking three components from it is the intended use rather than a compromise.
- What rules apply to an animated counter?
- Two. The final value belongs in the DOM from the start so it exists for a crawler and for anyone who does not watch the animation, and it should not re-run every time the element scrolls back into view. Under reduced motion, render the number immediately.
- What should you check when taking from a single-author set?
- Whether the component reads your CSS variables, what it installs alongside itself, and whether its file name will collide with something you already have. The last one is the only silent failure of the three.