Picking The Right Library

How to use this

1. 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.
2. 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.
3. 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.
4. 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

Motion & visuals

Charts

Interaction & performance

State & styling

className

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).