Picking The Right Library
A lookup skill. When invoked with a task ("I need toasts", "what should I use for drag and drop?"), match the task to the curated list below and recommend the library. These are deliberate, taste-driven picks — don't substitute alternatives outside this list unless the user asks for one or the task genuinely isn't covered.
How to use this
- Identify the task, not the library the user named. "I need to show a dropdown" is a UI-primitives task (base-ui), even if they asked about something else.
- Check what's already installed. Look at
package.json first. If the project already uses a listed library, use it. If it uses a competitor (e.g. react-window instead of Virtuoso), flag the recommendation but don't churn the dependency without being asked.
- Recommend one library, state what it's for in one sentence, and install/wire it up if that's part of the request. Don't present a menu of options when the list has a clear answer.
- If the task isn't covered by the list, say so explicitly and recommend from your own knowledge — but be clear you've left the curated list.
The list
UI components & primitives
| Task |
Library |
| Unstyled, accessible UI components (dialogs, popovers, menus, selects…) |
base-ui |
| Command menus (⌘K palettes) |
cmdk |
| Toasts / notifications |
Sonner |
| One-time password / verification code inputs |
input-otp |
| Customizable GUIs / control panels |
Leva — dialkit is an alternative |
Motion & visuals
| Task |
Library |
| General-purpose animation (springs, layout animations, enter/exit) |
motion (Framer Motion) |
| Animating numbers (counters, prices, stats) |
NumberFlow |
| Animated text components |
torph |
| 3D globes |
Cobe |
| Dynamic OG images (HTML/CSS → SVG/PNG) |
Satori |
| Syntax highlighting |
shiki |
Reach for motion when you need springs, layout animations, exit animations, or gesture-driven values. A simple hover or fade doesn't need it — plain CSS transitions are the right tool there.
Charts
| Task |
Library |
| Real-time / streaming charts |
Liveline |
| General charts (static or interactive dashboards) |
recharts |
The split: if data points arrive live and the chart scrolls with time, use Liveline. Everything else is recharts.
Interaction & performance
| Task |
Library |
| Drag and drop |
dnd kit |
| Virtualization (long lists, large tables) |
Virtuoso |
State & styling
| Task |
Library |
| State management |
zustand |
Constructing className strings conditionally |
clsx |
| Type-safe, variant-driven styling for Tailwind |
cva |
| Theme switching / dark mode (no flash on load) |
next-themes |
The styling split: clsx for ad-hoc conditional classes; cva when a component has real variants (size, intent, state) that deserve a typed API. They compose — cva uses clsx-style inputs internally.
Common mismatches to catch
- Toasts built by hand or with a modal library → Sonner exists for exactly this.
- A
<div>-based dropdown/dialog with manual focus handling → base-ui, which handles accessibility, focus trapping, and dismissal.
- Animating a number by re-rendering text → NumberFlow handles digit transitions properly.
- Rendering a 1,000+ row list directly → Virtuoso before reaching for pagination hacks.
- A
useState-per-component web of props for shared state → zustand.
- Template-literal className ternaries three conditions deep → clsx (or cva if it's variant-shaped).
1---2name: pick-ui-library3description: Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.4---5
6# Picking The Right Library
7
8A lookup skill. When invoked with a task ("I need toasts", "what should I use for drag and drop?"), match the task to the curated list below and recommend the library. These are deliberate, taste-driven picks — don't substitute alternatives outside this list unless the user asks for one or the task genuinely isn't covered.
9
10## How to use this
11
121. **Identify the task**, not the library the user named. "I need to show a dropdown" is a UI-primitives task (base-ui), even if they asked about something else.
132. **Check what's already installed.** Look at `package.json` first. If the project already uses a listed library, use it. If it uses a competitor (e.g. react-window instead of Virtuoso), flag the recommendation but don't churn the dependency without being asked.
143. **Recommend one library**, state what it's for in one sentence, and install/wire it up if that's part of the request. Don't present a menu of options when the list has a clear answer.
154. If the task isn't covered by the list, say so explicitly and recommend from your own knowledge — but be clear you've left the curated list.
16
17## The list
18
19### UI components & primitives
20
21| Task | Library |
22| --- | --- |
23| Unstyled, accessible UI components (dialogs, popovers, menus, selects…) | [base-ui](https://base-ui.com) |
24| Command menus (⌘K palettes) | [cmdk](https://cmdk.paco.me) |
25| Toasts / notifications | [Sonner](https://sonner.emilkowal.ski) |
26| One-time password / verification code inputs | [input-otp](https://input-otp.rodz.dev) |
27| Customizable GUIs / control panels | [Leva](https://github.com/pmndrs/leva) — [dialkit](https://joshpuckett.me/dialkit) is an alternative |
28
29### Motion & visuals
30
31| Task | Library |
32| --- | --- |
33| General-purpose animation (springs, layout animations, enter/exit) | [motion](https://motion.dev) (Framer Motion) |
34| Animating numbers (counters, prices, stats) | [NumberFlow](https://number-flow.barvian.me) |
35| Animated text components | [torph](https://torph.lochie.me/) |
36| 3D globes | [Cobe](https://cobe.vercel.app) |
37| Dynamic OG images (HTML/CSS → SVG/PNG) | [Satori](https://github.com/vercel/satori) |
38| Syntax highlighting | [shiki](https://shiki.style) |
39
40Reach for motion when you need springs, layout animations, exit animations, or gesture-driven values. A simple hover or fade doesn't need it — plain CSS transitions are the right tool there.
41
42### Charts
43
44| Task | Library |
45| --- | --- |
46| Real-time / streaming charts | [Liveline](https://github.com/benjitaylor/liveline) |
47| General charts (static or interactive dashboards) | [recharts](https://recharts.org) |
48
49The split: if data points arrive live and the chart scrolls with time, use Liveline. Everything else is recharts.
50
51### Interaction & performance
52
53| Task | Library |
54| --- | --- |
55| Drag and drop | [dnd kit](https://dndkit.com) |
56| Virtualization (long lists, large tables) | [Virtuoso](https://virtuoso.dev) |
57
58### State & styling
59
60| Task | Library |
61| --- | --- |
62| State management | [zustand](https://zustand.docs.pmnd.rs) |
63| Constructing `className` strings conditionally | [clsx](https://github.com/lukeed/clsx) |
64| Type-safe, variant-driven styling for Tailwind | [cva](https://cva.style) |
65| Theme switching / dark mode (no flash on load) | [next-themes](https://github.com/pacocoursey/next-themes) |
66
67The styling split: clsx for ad-hoc conditional classes; cva when a component has real variants (size, intent, state) that deserve a typed API. They compose — cva uses clsx-style inputs internally.
68
69## Common mismatches to catch
70
71- **Toasts built by hand or with a modal library** → Sonner exists for exactly this.
72- **A `<div>`-based dropdown/dialog with manual focus handling** → base-ui, which handles accessibility, focus trapping, and dismissal.
73- **Animating a number by re-rendering text** → NumberFlow handles digit transitions properly.
74- **Rendering a 1,000+ row list directly** → Virtuoso before reaching for pagination hacks.
75- **A `useState`-per-component web of props for shared state** → zustand.
76- **Template-literal className ternaries three conditions deep** → clsx (or cva if it's variant-shaped).
usekaneo