UI Primitives Shortlist
A focused shortlist of small React/UI libraries to check before hand-rolling common interaction primitives. The source signal is Emil Kowalski's July 2026 bookmark list; the adoption rule is Kevin's: use a proven primitive when it shrinks risk, but do not import a whole design system for one widget. Source: X/@emilkowalski, 2026-07-06
Coverage Answer
All eight focused libraries from the Emil Kowalski signal are covered here: NumberFlow, input-otp, Liveline, Leva, cmdk, Virtuoso, dnd kit, and Sonner. Sonner now has its own first-class page because toast and notification feedback is a recurring Kevin-stack route; keep the other seven on this combined shortlist until one becomes a repeated dependency with enough routing detail to justify a deeper page. The point of this page is fast retrieval and adoption judgment, not tiny near-duplicate tool stubs. Source: User request, 2026-07-07
Version Snapshot
Checked against npm on 2026-07-06 and refreshed on 2026-07-07.
| Primitive | Package | Latest | Published | Use when |
|---|---|---|---|---|
| NumberFlow | @number-flow/react |
0.6.1 |
2026-06-27 | Numbers change often and need readable, layout-stable animation. |
| input-otp | input-otp |
1.4.2 |
2025-01-06 | OTP, recovery-code, or segmented-code input needs accessibility and paste behavior. |
| Liveline | liveline |
0.0.7 |
2026-03-12 | Real-time line/candlestick/multi-series charts need animated updates. |
| Leva | leva |
0.10.1 |
2025-10-31 | Prototyping needs sliders, color pickers, and live knobs without code edits. |
| cmdk | cmdk |
1.1.1 |
2025-03-14 | Command menus, quick switchers, search palettes, and action launchers. |
| Virtuoso | react-virtuoso |
4.18.10 |
2026-06-27 | Lists/tables/grids are too large for normal DOM rendering. |
| dnd kit | @dnd-kit/core |
6.3.1 |
2024-12-05 | Drag-and-drop needs accessible sensors, sorting, collision, or keyboard behavior. |
| Sonner | sonner |
2.0.7 |
2025-08-02 | Toasts/notifications should feel native, compact, and non-blocking; use the first-class page for adoption details. |
Artifact Cards
Adoption Rule
Use this page as the first stop for small UI primitives:
- If the primitive is exactly covered here, prefer evaluating the library before custom code.
- If the primitive sits inside a repeated product surface, wrap it behind a local component.
- If the primitive would add bundle, style, or accessibility risk for a one-off, build local and record the reason.
- For UI-heavy work, route the implementation through design-engineering-polish and Interface Micro-Polish so the primitive choice is checked in the browser, not just by API fit.
The Leva reply in the enriched record is a good example of the boundary: it is not a production control surface by default; it is valuable when prototyping because variables, sliders, and color pickers can be adjusted live without asking the agent to rewrite code. Source: X/@emilkowalski reply, 2026-07-06
For broader component libraries, shadcn registries, animated blocks, chart systems, and style-specific sources, use UI Library Ranking and Component Library Sources instead of expanding this primitive shortlist.
Timeline
- 2026-07-07 | Promoted Sonner into its own tool page while keeping the other seven Emil-list primitives consolidated here. Source: User request, 2026-07-07; https://sonner.emilkowal.ski/
- 2026-07-07 | Rechecked npm versions and made the coverage answer explicit: the focused Emil shortlist is intentionally one combined primitive page to reduce retrieval bloat. Source: User request, 2026-07-07
- 2026-07-06 | Promoted Emil Kowalski's UI-library bookmark into a focused shortlist with direct artifact cards and npm version snapshots. Source: X bookmark artifact audit, 2026-07-06