pick-ui-library

name	pick-ui-library
description	Use when picking the right library for a frontend task.
tags	["ui-libraries","frontend","react","components","tools"]
related_skills	["frontend-design","emil-design-eng"]

Picking The Right Library

A curated, opinionated list of frontend libraries. When invoked with a task, match to the list and recommend.

How to Use

1. Identify the task, not the library the user named
2. Check what's already installed in package.json
3. Recommend one library, state what it's for in one sentence
4. If the task isn't covered, say so explicitly

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
OTP / verification code inputs	input-otp
Customizable GUIs / control panels	Leva

Motion & Visuals

Task	Library
General-purpose animation	motion (Framer Motion)
Animating numbers (counters, stats)	NumberFlow
Animated text components	torph
3D globes	Cobe
Dynamic OG images	Satori
Syntax highlighting	shiki

Charts

Task	Library
Real-time / streaming charts	Liveline
General charts	recharts

Interaction & Performance

Task	Library
Drag and drop	dnd kit
Virtualization (long lists)	Virtuoso

State & Styling

Task	Library
State management	zustand
Conditional className strings	clsx
Type-safe variant styling	cva
Theme switching (no flash)	next-themes

Common Mismatches to Catch

• Toasts built by hand → Sonner
• <div>-based dropdown with manual focus → base-ui
• Animating numbers via re-render → NumberFlow
• 1,000+ row list rendered directly → Virtuoso
• useState web of props → zustand

Common Pitfalls

• ❌ Presenting a menu of options — Recommend one library
• ❌ Ignoring what's already installed — Check package.json first
• ❌ Churning dependencies unnecessarily — Use existing libraries
• ❌ Recommending outside the list without flagging it — Say when you've left the curated list

Verification Checklist

• Task correctly identified (not the library the user named)
• package.json checked for existing dependencies
• One library recommended with clear reason
• If outside curated list, explicitly flagged
• Installation/wiring provided if part of request