Client-Side Tooling · 6 of 8

Component Libraries

Pre-built buttons, modals, tables, forms — battle-tested, accessible, and themed. Save hundreds of hours; pay in bundle size and design lock-in.

UI KitsDesign SystemsHeadlessAccessibilityTheming
← Back to Client Side
Quick Facts

At a Glance

Basic Concepts

  • Three altitudes: styled component libraries, headless / unstyled primitives, and full design systems.
  • Headless = behavior + accessibility, you bring the styling. The modern winning pattern (Radix, Headless UI, React Aria).
  • Accessibility is the #1 reason to use a library — getting WAI-ARIA right yourself is a year of work.
  • Design system = component library + tokens + docs + governance. Bigger commitment.
  • Bundle cost matters — tree-shake or pick libraries with per-component imports.
Landscape

The Major Libraries

LibraryStyleFramework
Material UI (MUI)Styled, Material DesignReact
Ant DesignStyled, dense enterprise lookReact
Chakra UIStyled, theme-friendlyReact
MantineStyled, modern, large setReact
shadcn/uiCopy-paste components built on Radix + TailwindReact
Radix UIHeadless primitivesReact
Headless UIHeadless primitives by Tailwind teamReact, Vue
React Aria / React SpectrumAdobe's headless / styled linesReact
BootstrapStyled, OG frameworkAny (CSS) / React-Bootstrap
Vuetify / PrimeVue / QuasarStyled, Material / Bootstrap-ishVue
Angular Material / PrimeNG / NebularStyledAngular
Skeleton / Flowbite Svelte / Bits UIStyled / headlessSvelte
Nuxt UI / Tailwind UIPremium componentsVue, React
Mechanics

How to Choose

Styled vs Headless
—Styled (MUI, Ant, Chakra)Headless (Radix, Headless UI)
LookTheir look out of the boxYours
CustomizationTheme tokens; deep custom is fightsTotal freedom
Bundle sizeHeavier (includes styles)Lighter
Time to first screenMinutesAn afternoon
Best forInternal tools, MVPsBranded products, design systems
The shadcn/ui Pattern

Not a library you install — components you copy into your repo. Built on Radix (behavior) + Tailwind (styling). You own the code, mod freely. Wildly popular for product teams that want quick velocity without long-term lock-in.

Building Your Own Design System

For mature product orgs. Layers usually look like:

  1. Tokens — colors, spacing, type, motion (Style Dictionary, Tokens Studio).
  2. Primitives — Box, Stack, Inline, Icon (often from Radix or React Aria).
  3. Components — Button, Input, Modal, Table styled with your tokens.
  4. Patterns — Forms, Empty States, Toolbars built from components.
  5. Docs — Storybook, Ladle, or a custom site with usage guidance.
Storybook & Component Docs

Storybook is the de-facto component workshop — render every component variant in isolation, write interaction tests, generate docs. Alternatives: Ladle, Histoire, Bit.

Common Pitfalls
  • Picking too soon. Library choice locks in style for years.
  • Battling MUI for a custom look — at some point shadcn/ui or building your own is faster.
  • Importing the whole library when you wanted one button (check tree-shaking).
  • Forgetting accessibility on custom primitives. Use Radix / React Aria as a base.
Picking

Which to Choose

Internal Tools / Admin

MUI or Ant Design — pre-styled, dense, "looks enterprise."

Branded Product (React)

shadcn/ui or Radix + your own Tailwind classes.

Vue Product

Vuetify (Material) or Headless UI Vue + Tailwind.

Marketing / Landing

Plain HTML + Tailwind UI templates — keep it light.

Design System Foundation

Radix + React Aria (behavior) + your tokens + Storybook (docs).

Continue

Other Client-Side Tooling

BundlersPackage ManagersTranspilersCSS SystemsState ManagementAccessibilityInternationalization ↑ Back to Client Side