Component library

A component library is a reusable collection of UI components (buttons, inputs, modals, tables) shared across an app or team. By 2026 the 'copy-paste from repo' model (shadcn) and 'npm-install opinionated kit' models coexist.

Three models in 2026: (1) npm-installed opinionated kits (MUI, Mantine, Chakra, Ant Design) — fast to start, hard to customize, version-locked; (2) headless primitives + Tailwind (Radix + custom styling, React Aria + Tailwind) — full control, more work; (3) copy-paste-into-repo (shadcn/ui, Park UI) — own the component code, edit freely, no version lock. The shadcn model exploded post-2023 because AI agents work better with code-in-repo (LLMs can see + edit components), and customization isn't blocked by upstream maintainers. Picking: npm-installed for prototype + admin; headless for highly custom product UI; shadcn / copy-paste for production with AI-assisted dev.

When to use component library

• Any product UI of non-trivial size.

Common mistakes

• Combining multiple component libraries — design system inconsistency.
• Picking npm-installed kit then heavily customizing — fights the library.

FAQ

Related terms

• Headless UI — Headless UI is the React (or framework) pattern of unstyled, accessible component primitives that handle behavior (state, keyboard nav, ARIA) but leave visual styling to the consumer. Radix UI, React Aria, Headless UI by Tailwind Labs are 2026 leaders.
• Design token — Design tokens are the named, abstracted values that capture design decisions (colors, spacing, typography, radii) in code-agnostic format — letting designers + engineers share a single source of truth across platforms.

Last updated: 2026-06-01. Raw markdown: https://promtable.com/glossary/component-library.md.