UI Libraries UI Component Libraries
Last updated: 2026-11-02
UI Libraries UI Component Libraries
React component libraries come in two flavours: full libraries such as Ant Design, MUI and shadcn/ui work out of the box and keep the visual behaviour under the library's control, while headless libraries such as Radix and Headless UI provide only logic and accessibility and leave the visuals to you. Choosing between them is essentially a trade-off between shipping speed and customisation freedom.
| Group | Ecosystem |
|---|---|
| Kind | Library |
| Since | Ant Design v5, MUI v6 and Radix UI keep shipping updates (2025) |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
# Full component library: install it and use it right away
npm install antd
import { Button } from 'antd'
<Button type="primary" onClick={save}>Save</Button>
# Headless library: install it and write the visuals yourself
npm install @radix-ui/react-dialog
import * as Dialog from '@radix-ui/react-dialog'
<Dialog.Root> {/* logic: state, focus and accessibility are handled by the library */}
<Dialog.Trigger>Open</Dialog.Trigger>
<Dialog.Portal>{/* the visuals are fully custom */}</Dialog.Portal>
</Dialog.Root>⚙️ Parameters
| props such as type / variant | How full libraries are customised: props pick an appearance and a behaviour from the variants the library ships with. |
|---|---|
| render / asChild | How headless libraries are customised: the library hands its interaction state and events to your render function or child element, and the visuals are entirely up to you. |
Returns：No return value — see the example for third-party library usage.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Simulation: the top half shows AntD-style buttons (a blue primary button and a dashed button) whose appearance comes from the preset variants chosen through props; the bottom half shows a Headless-style button (a purple pill) whose appearance is fully defined by the render function and darkens while pressed (the pressed state comes from the library). Every click is written to the action log below. Both API styles are simulated with plain React.💡 Key Points
💡 Tip shadcn/ui copies the source code of components built on Tailwind and Radix into your project, which puts it between full and headless libraries and has become the most popular choice in recent years.
⚠️ Warning Full component libraries are large, so import them on demand (tree-shaking) or through subpath imports to avoid shipping every component to the first screen.
ℹ️ Info Headless libraries ship without any styles, but keyboard navigation, focus management, ARIA and the rest of the accessibility details are already handled, which suits a deeply customised in-house design system.
🏷️ More Ecosystem
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How do I choose between Ant Design and MUI?
A For admin and back-office systems, or a Chinese-speaking ecosystem, choose AntD; for international projects that want Material Design and a powerful theming system, choose MUI. Both support on-demand imports and deep theme customisation.
Q When is a headless component library the right choice?
A When the design is highly custom and you want full control over the visuals, choose Radix or Headless UI. They solve the hard parts — dialog focus, keyboard operation, ARIA — and you only write the styles.
Q Is shadcn/ui a component library?
A Strictly speaking no: it copies the source code of components built on Tailwind and Radix straight into your project, so the code belongs to you and can be modified freely, combining the out-of-the-box experience with customisability.
