The State of React — July 2026

Picking a React component library is one of the bigger architectural calls in a project, and the honest answer to “which one” depends entirely on what you’re building. We maintain bestax, a component library for Bulma v1, so we spend a lot of time studying the field. This post maps it out fairly and in the open: every user-facing capability across seven React libraries, with each cell linking straight to that library’s own documentation so you can check our work.

It’s a point-in-time capture — the first edition of a series we’ll refresh regularly. We’re calling it The State of React, with a nod to Armin’s long-running radio show. Over time we’d like it to grow into a wider read on the React ecosystem; for now, it stays focused on component libraries.

Snapshot — July 2026

The table below reflects each library as of July 27, 2026. Component catalogs move fast — the latest edition of The State of React always has the freshest data.

In the ring: bestax (Bulma v1), react-bulma-components (the other Bulma wrapper), Mantine, MUI, Chakra UI, shadcn/ui, and React-Bootstrap.

Each row is a capability; read across to see who ships it. ✓ is a dedicated component, ◐ is available via a prop or by composition, and a muted dash means no first-party equivalent. The columns are abbreviated (hover a header for the full name); hover any cell for the component name, or click it to open that component’s docs.

Data as of July 27, 2026A newer edition may exist — see the latest edition.

✓ Dedicated component◐ Via prop / composition– NoneHover a cell for the component name; click it to open the docs.

Capability	bestax	r-bulma	Mantine	MUI	Chakra	shadcn	R-Bootstrap
Buttons & actions
Button	✓	✓	✓	✓	✓	✓	✓
Button group	✓	✓	✓	✓	✓	✓	✓
Icon button	◐	◐	✓	✓	✓	◐	–none
Close / delete button	✓	✓	✓	◐	✓	◐	✓
Copy button	–none	–none	✓	–none	✓	–none	–none
File-trigger button	–none	–none	✓	–none	◐	–none	–none
Toggle button	–none	–none	◐	✓	–none	✓	✓
Segmented / toggle group	–none	–none	✓	✓	✓	✓	✓
Split button	–none	–none	◐	◐	◐	◐	✓
Floating action button	–none	–none	–none	✓	–none	–none	–none
Speed dial	–none	–none	–none	✓	–none	–none	–none
Link-styled button	✓	◐	◐	◐	◐	◐	◐
Inputs & form controls
Text input	✓	✓	✓	✓	✓	✓	✓
Textarea	✓	✓	✓	✓	✓	✓	✓
Number input (steppers)	✓	–none	✓	–none	✓	–none	–none
Password input	–none	–none	✓	–none	–none	–none	–none
Checkbox	✓	✓	✓	✓	✓	✓	✓
Checkbox group	✓	–none	✓	◐	✓	–none	–none
Radio	✓	✓	✓	✓	✓	✓	✓
Radio group	✓	–none	✓	✓	✓	✓	–none
Switch	✓	–none	✓	✓	✓	✓	✓
Select	✓	✓	✓	✓	✓	✓	✓
Multi-select	◐	–none	✓	◐	◐	–none	–none
Autocomplete	✓	–none	✓	✓	✓	✓	–none
Combobox (headless)	–none	–none	✓	–none	✓	✓	–none
Tag / token input	✓	–none	✓	◐	◐	–none	–none
Pills input (multi-value)	–none	–none	✓	–none	–none	–none	–none
PIN / OTP input	–none	–none	✓	–none	✓	✓	–none
JSON input	–none	–none	✓	–none	–none	–none	–none
Slider	✓	–none	✓	✓	✓	✓	✓
Range slider (dual thumb)	◐	–none	✓	◐	◐	◐	–none
Angle slider	–none	–none	✓	–none	–none	–none	–none
Rating	✓	–none	✓	✓	✓	–none	–none
Color input	–none	–none	✓	–none	✓	–none	–none
Color picker (palette)	–none	–none	✓	–none	✓	–none	–none
File input	✓	✓	✓	◐	✓	–none	✓
Fieldset	–none	–none	✓	◐	✓	◐	–none
Field (label+control+error)	✓	✓	✓	◐	✓	✓	✓
Input addons / adornments	✓	✓	◐	✓	✓	✓	✓
Floating label	–none	–none	–none	◐	–none	–none	✓
Date & time
Date input	✓	–none	✓	✓	–none	✓	–none
Date picker (popover)	✓	–none	✓	✓	–none	✓	–none
Date range picker	–none	–none	✓	✓	–none	◐	–none
Date-time picker	✓	–none	✓	✓	–none	–none	–none
Time input / picker	✓	–none	✓	✓	–none	–none	–none
Calendar (inline)	–none	–none	✓	✓	–none	✓	–none
Month picker	–none	–none	✓	◐	–none	–none	–none
Year picker	–none	–none	✓	◐	–none	–none	–none
Navigation
Navbar / app bar	✓	✓	◐	✓	–none	–none	✓
App shell (layout frame)	–none	–none	✓	–none	–none	–none	–none
Breadcrumb	✓	✓	✓	✓	✓	✓	✓
Menu (vertical nav)	✓	✓	✓	◐	–none	✓	◐
Dropdown menu (actions)	✓	✓	✓	✓	✓	✓	✓
Pagination	✓	✓	✓	✓	✓	✓	✓
Stepper / steps	✓	–none	✓	✓	✓	–none	–none
Tabs	✓	✓	✓	✓	✓	✓	✓
Bottom navigation	–none	–none	–none	✓	–none	–none	–none
Burger / hamburger	–none	◐	✓	–none	–none	–none	◐
Table of contents	–none	–none	✓	–none	–none	–none	–none
Command palette / spotlight	–none	–none	✓	–none	–none	✓	–none
Route progress bar	–none	–none	✓	–none	–none	–none	–none
Layout & grid
Container	✓	✓	✓	✓	✓	–none	✓
Grid — flex 12-col	✓	✓	✓	✓	◐	–none	✓
Grid — CSS grid	✓	–none	✓	◐	✓	–none	–none
Grid cell	✓	◐	◐	◐	✓	–none	✓
Stack (vertical)	◐	–none	✓	✓	✓	–none	✓
Group (horizontal)	–none	–none	✓	◐	✓	–none	◐
Flex	–none	–none	✓	◐	✓	–none	–none
Center	–none	–none	✓	–none	✓	–none	–none
Spacer	◐	–none	✓	–none	✓	–none	–none
Aspect ratio	◐	–none	✓	–none	✓	✓	✓
Scroll area (custom bars)	–none	–none	✓	–none	–none	✓	–none
Splitter (resizable)	–none	–none	✓	–none	–none	✓	–none
Affix (sticky)	–none	–none	✓	–none	–none	–none	–none
Section	✓	✓	–none	–none	–none	–none	–none
Hero / banner	✓	✓	–none	–none	–none	–none	–none
Level (space-between bar)	✓	✓	◐	–none	◐	–none	–none
Media object	✓	✓	–none	–none	–none	–none	–none
Tile (Bulma grid tile)	–none	✓	◐	◐	◐	–none	–none
Footer	✓	✓	◐	–none	–none	–none	–none
Box (polymorphic primitive)	–none	✓	✓	✓	✓	–none	–none
Paper / elevated surface	✓	✓	✓	✓	◐	◐	◐
Data display
Avatar	✓	–none	✓	✓	✓	✓	–none
Avatar group	✓	–none	✓	✓	✓	◐	–none
Badge (corner indicator)	✓	–none	✓	✓	◐	–none	–none
Tag / label	✓	✓	✓	✓	✓	✓	✓
Chip (deletable / interactive)	◐	◐	✓	✓	✓	–none	–none
Card	✓	✓	✓	✓	✓	✓	✓
Table (static)	✓	✓	✓	✓	✓	✓	✓
Data grid (sort/filter/page)	–none	–none	–none	✓	–none	✓	–none
Description / data list	–none	–none	✓	–none	✓	–none	–none
List (styled)	✓	◐	✓	✓	✓	–none	✓
Tree view	–none	–none	✓	✓	–none	–none	–none
Tree select	–none	–none	✓	–none	–none	–none	–none
Timeline	–none	–none	✓	✓	✓	–none	–none
Kbd (keyboard key)	–none	–none	✓	–none	✓	✓	–none
Number formatter	–none	–none	✓	–none	✓	–none	–none
Image	✓	✓	✓	◐	✓	–none	✓
Image list / gallery	–none	–none	◐	✓	–none	–none	–none
Background image	–none	–none	✓	–none	–none	–none	–none
Figure	✓	–none	–none	–none	–none	–none	✓
Icon	✓	✓	◐	✓	✓	–none	–none
Theme icon (colored container)	–none	–none	✓	–none	–none	–none	–none
Carousel	✓	–none	✓	–none	–none	✓	✓
Charts	–none	–none	✓	✓	–none	✓	–none
Spoiler (clamp / expand)	–none	–none	✓	–none	–none	–none	–none
Masonry layout	–none	–none	–none	✓	–none	–none	–none
Typography
Text / body	✓	◐	✓	✓	✓	◐	–none
Heading / title	✓	✓	✓	✓	✓	◐	–none
Subtitle	✓	◐	◐	◐	◐	–none	–none
Inline code	✓	–none	✓	–none	✓	–none	–none
Code block (syntax highlight)	◐	–none	✓	–none	◐	–none	–none
Blockquote	–none	–none	✓	–none	✓	◐	–none
Highlight / mark text	–none	–none	✓	–none	✓	–none	–none
Rich-HTML style wrapper	✓	✓	✓	–none	✓	◐	–none
Divider	✓	–none	✓	✓	✓	✓	–none
Inline semantic (em/strong/span)	✓	–none	◐	◐	◐	–none	–none
Feedback & status
Alert / message box	✓	✓	✓	✓	✓	✓	✓
Toast / snackbar	✓	–none	✓	✓	✓	✓	✓
Progress (linear)	✓	✓	✓	✓	✓	✓	✓
Spinner (standalone)	◐	–none	✓	✓	✓	✓	✓
Loading overlay	✓	–none	✓	◐	–none	–none	–none
Ring / circular progress	–none	–none	✓	✓	✓	–none	–none
Semi-circle progress	–none	–none	✓	–none	–none	–none	–none
Gauge	–none	–none	◐	✓	–none	–none	–none
Skeleton	✓	–none	✓	✓	✓	✓	✓
Empty state	–none	–none	✓	–none	✓	✓	–none
Overlays
Modal	✓	✓	✓	✓	✓	✓	✓
Confirm / alert dialog	✓	–none	◐	✓	◐	✓	–none
Drawer / off-canvas	✓	–none	✓	✓	✓	✓	✓
Swipeable drawer	–none	–none	–none	✓	–none	◐	–none
Popover	–none	–none	✓	✓	✓	✓	✓
Hover card	–none	–none	✓	–none	✓	✓	–none
Tooltip	✓	–none	✓	✓	✓	✓	✓
Backdrop / scrim	–none	–none	✓	✓	–none	–none	–none
Disclosure
Accordion (grouped)	–none	–none	✓	✓	✓	✓	✓
Collapse (single)	✓	–none	✓	✓	✓	✓	✓
Panel (heading + body)	✓	✓	–none	–none	–none	–none	–none
Rich input & special
Dropzone (drag-drop upload)	–none	–none	✓	–none	◐	–none	–none
Rich text editor	–none	–none	✓	–none	–none	–none	–none
Transfer list	–none	–none	–none	✓	–none	–none	–none
Utilities & infrastructure
Theme / provider	✓	–none	✓	✓	✓	◐	✓
Global config provider	✓	–none	◐	–none	◐	–none	–none
CSS reset / baseline	–none	–none	–none	✓	–none	–none	–none
Portal	–none	–none	✓	✓	✓	–none	–none
Focus trap	–none	–none	✓	✓	–none	–none	–none
Click-away listener	–none	–none	–none	✓	–none	–none	–none
Transition primitives	◐	–none	✓	✓	◐	–none	✓
Scroll-reveal (on-scroll)	✓	–none	–none	–none	–none	–none	–none
Visually hidden (a11y)	–none	–none	✓	◐	✓	–none	–none
No-SSR guard	–none	–none	–none	✓	✓	–none	–none
classNames utility	✓	–none	◐	◐	◐	◐	–none

How this was compiled — method & caveats

• Rows are capabilities, not raw exports — sub-parts are folded into their parent and internal utilities dropped, so a column approximates each library’s user-facing catalog.
• ◐ means the capability exists via a prop or by composing primitives, not as a dedicated named component; it is treated as “absent” when judging what a library uniquely ships.
• Official companion packages count as first-party (Mantine @mantine/*, MUI @mui/lab & @mui/x-*). shadcn/ui is a copy-paste registry powered by Radix, cmdk, TanStack Table, and react-day-picker — not an npm dependency.
• Matched by purpose, not name (e.g. bestax Badge → Mantine Indicator / MUI Badge). Competitor links are best-effort; a few resolve to a library’s component index rather than an exact page.

What the matrix says

bestax is a superset of react-bulma-components

Within the Bulma world there isn’t much contest left. react-bulma-components covers Bulma-core only and has been inactive since ~2021. bestax matches essentially all of it (bar Bulma’s Tile) and adds roughly 50 more components — date/time pickers, autocomplete, rating, tag input, slider, switch, Carousel, Steps, Avatar, Badge, Toast, Tooltip, Skeleton, Sidebar, Dialog, and Reveal.

A few honest takeaways across the wider field:

• Mantine has the widest first-party catalog — rich inputs (color, PIN, JSON), plus Spotlight, ScrollArea, HoverCard, and a full app-shell layout system.
• MUI owns heavy data and app-frame surfaces through its X packages: Data Grid, Charts, Tree View, and Date Pickers, plus FAB, Speed Dial, and Transfer List.
• Chakra UI is the closest peer to bestax’s prop-driven styling model and is deep on form controls — but ships no date pickers, charts, carousel, or data grid.
• React-Bootstrap is the smallest set: a faithful Bootstrap wrapper with no date/time pickers, rating, autocomplete, stepper, or tag input.
• bestax covers the mainstream set and adds Bulma-idiomatic layout — Hero, Level, Media, Section, Panel — that most libraries leave to composition.

shadcn/ui plays by different rules

shadcn/ui looks broad because it’s a copy-paste registry, not an npm dependency: its behavior comes from Radix UI, cmdk, TanStack Table, and react-day-picker. You own the code it drops into your project — powerful, but a different maintenance model than the others here.

Corrections welcome

We compiled this by hand from each library’s component source and documentation, so it will have edges — a mislabelled cell, a capability we scoped wrong, or a competitor link that’s drifted. It’s meant to be honest, not perfect.

Spot something off?

Please open an issue — corrections make the next edition better.

See you in the next one.