A State of React Libs — 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 something we plan to refresh regularly. Call it A State of React Libs (with apologies to Armin).

Snapshot — July 2026

The table below reflects each library as of July 27, 2026. Component catalogs move fast; for the newest edition, see the latest A State of React Libs.

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

Read a column top-to-bottom for one library’s catalog; read a row across to see who ships what. ✓ is a dedicated component, ◐ is available via a prop or by composition, and a muted dash means no first-party equivalent. Click any ✓ or ◐ to open that component’s docs.

Data as of July 27, 2026A newer edition may exist — see the latest “A State of React Libs”.

✓ Dedicated component◐ Via prop / composition– NoneEvery ✓/◐ links to that library’s own docs.

Capability	bestax	r-bulma	Mantine	MUI	Chakra UI	shadcn/ui	React-Bootstrap
Buttons & actions
Button	✓Button	✓	✓Button	✓Button	✓Button	✓Button	✓Button
Button group	✓Buttons	✓	✓Button.Group	✓ButtonGroup	✓Group	✓ButtonGroup	✓ButtonGroup
Icon button	◐Button	◐	✓ActionIcon	✓IconButton	✓IconButton	◐Button	–none
Close / delete button	✓Delete	✓	✓CloseButton	◐IconButton	✓CloseButton	◐Button	✓CloseButton
Copy button	–none	–none	✓CopyButton	–none	✓Clipboard	–none	–none
File-trigger button	–none	–none	✓FileButton	–none	◐FileUpload	–none	–none
Toggle button	–none	–none	◐Chip	✓ToggleButton	–none	✓Toggle	✓ToggleButton
Segmented / toggle group	–none	–none	✓SegmentedControl	✓ToggleButtonGroup	✓SegmentGroup	✓ToggleGroup	✓ToggleButtonGroup
Split button	–none	–none	◐Menu	◐ButtonGroup	◐Menu	◐DropdownMenu	✓SplitButton
Floating action button	–none	–none	–none	✓Fab	–none	–none	–none
Speed dial	–none	–none	–none	✓SpeedDial	–none	–none	–none
Link-styled button	✓LinkButton	◐	◐Button	◐Button	◐Button	◐Button	◐Button
Inputs & form controls
Text input	✓Input	✓	✓TextInput	✓TextField	✓Input	✓Input	✓Form.Control
Textarea	✓TextArea	✓	✓Textarea	✓TextField	✓Textarea	✓Textarea	✓Form.Control
Number input (steppers)	✓Numberinput	–none	✓NumberInput	–none	✓NumberInput	–none	–none
Password input	–none	–none	✓PasswordInput	–none	–none	–none	–none
Checkbox	✓Checkbox	✓	✓Checkbox	✓Checkbox	✓Checkbox	✓Checkbox	✓Form.Check
Checkbox group	✓Checkboxes	–none	✓Checkbox.Group	◐FormGroup	✓Checkbox.Group	–none	–none
Radio	✓Radio	✓	✓Radio	✓Radio	✓RadioGroup	✓RadioGroup	✓Form.Check
Radio group	✓Radios	–none	✓Radio.Group	✓RadioGroup	✓RadioGroup	✓RadioGroup	–none
Switch	✓Switch	–none	✓Switch	✓Switch	✓Switch	✓Switch	✓Form.Check
Select	✓Select	✓	✓Select	✓Select	✓Select	✓Select	✓Form.Select
Multi-select	◐Select	–none	✓MultiSelect	◐Select	◐Select	–none	–none
Autocomplete	✓Autocomplete	–none	✓Autocomplete	✓Autocomplete	✓Combobox	✓Combobox	–none
Combobox (headless)	–none	–none	✓Combobox	–none	✓Combobox	✓Combobox	–none
Tag / token input	✓Taginput	–none	✓TagsInput	◐Autocomplete	◐Combobox	–none	–none
Pills input (multi-value)	–none	–none	✓PillsInput	–none	–none	–none	–none
PIN / OTP input	–none	–none	✓PinInput	–none	✓PinInput	✓InputOTP	–none
JSON input	–none	–none	✓JsonInput	–none	–none	–none	–none
Slider	✓Slider	–none	✓Slider	✓Slider	✓Slider	✓Slider	✓Form.Range
Range slider (dual thumb)	◐Slider	–none	✓RangeSlider	◐Slider	◐Slider	◐Slider	–none
Angle slider	–none	–none	✓AngleSlider	–none	–none	–none	–none
Rating	✓Rate	–none	✓Rating	✓Rating	✓RatingGroup	–none	–none
Color input	–none	–none	✓ColorInput	–none	✓ColorPicker	–none	–none
Color picker (palette)	–none	–none	✓ColorPicker	–none	✓ColorPicker	–none	–none
File input	✓File	✓	✓FileInput	◐Button + input	✓FileUpload	–none	✓Form.Control
Fieldset	–none	–none	✓Fieldset	◐FormControl	✓Fieldset	◐Field	–none
Field (label+control+error)	✓Field	✓	✓Input.Wrapper	◐FormControl	✓Field	✓Field	✓Form.Group
Input addons / adornments	✓Control	✓	◐Input	✓InputAdornment	✓InputAddon	✓InputGroup	✓InputGroup
Floating label	–none	–none	–none	◐TextField	–none	–none	✓FloatingLabel
Date & time
Date input	✓DateInput	–none	✓DateInput	✓DateField	–none	✓DatePicker	–none
Date picker (popover)	✓DateInput	–none	✓DatePickerInput	✓DatePicker	–none	✓DatePicker	–none
Date range picker	–none	–none	✓DatePickerInput	✓DateRangePicker	–none	◐DatePicker	–none
Date-time picker	✓DateTimeInput	–none	✓DateTimePicker	✓DateTimePicker	–none	–none	–none
Time input / picker	✓TimeInput	–none	✓TimePicker	✓TimePicker	–none	–none	–none
Calendar (inline)	–none	–none	✓Calendar	✓DateCalendar	–none	✓Calendar	–none
Month picker	–none	–none	✓MonthPicker	◐DatePicker	–none	–none	–none
Year picker	–none	–none	✓YearPicker	◐DatePicker	–none	–none	–none
Navigation
Navbar / app bar	✓Navbar	✓	◐AppShell	✓AppBar	–none	–none	✓Navbar
App shell (layout frame)	–none	–none	✓AppShell	–none	–none	–none	–none
Breadcrumb	✓Breadcrumb	✓	✓Breadcrumbs	✓Breadcrumbs	✓Breadcrumb	✓Breadcrumb	✓Breadcrumb
Menu (vertical nav)	✓Menu	✓	✓NavLink	◐MenuList	–none	✓Sidebar	◐Nav
Dropdown menu (actions)	✓Dropdown	✓	✓Menu	✓Menu	✓Menu	✓DropdownMenu	✓Dropdown
Pagination	✓Pagination	✓	✓Pagination	✓Pagination	✓Pagination	✓Pagination	✓Pagination
Stepper / steps	✓Steps	–none	✓Stepper	✓Stepper	✓Steps	–none	–none
Tabs	✓Tabs	✓	✓Tabs	✓Tabs	✓Tabs	✓Tabs	✓Tabs
Bottom navigation	–none	–none	–none	✓BottomNavigation	–none	–none	–none
Burger / hamburger	–none	◐	✓Burger	–none	–none	–none	◐Navbar.Toggle
Table of contents	–none	–none	✓TableOfContents	–none	–none	–none	–none
Command palette / spotlight	–none	–none	✓Spotlight	–none	–none	✓Command	–none
Route progress bar	–none	–none	✓NavigationProgress	–none	–none	–none	–none
Layout & grid
Container	✓Container	✓	✓Container	✓Container	✓Container	–none	✓Container
Grid — flex 12-col	✓Columns	✓	✓Grid	✓Grid	◐SimpleGrid	–none	✓Row / Col
Grid — CSS grid	✓Grid	–none	✓SimpleGrid	◐Box	✓Grid	–none	–none
Grid cell	✓Cell	◐	◐SimpleGrid	◐Grid	✓GridItem	–none	✓Col
Stack (vertical)	◐Block	–none	✓Stack	✓Stack	✓Stack	–none	✓Stack
Group (horizontal)	–none	–none	✓Group	◐Stack	✓Group	–none	◐Stack
Flex	–none	–none	✓Flex	◐Box	✓Flex	–none	–none
Center	–none	–none	✓Center	–none	✓Center	–none	–none
Spacer	◐Block	–none	✓Space	–none	✓Spacer	–none	–none
Aspect ratio	◐Image	–none	✓AspectRatio	–none	✓AspectRatio	✓AspectRatio	✓Ratio
Scroll area (custom bars)	–none	–none	✓ScrollArea	–none	–none	✓ScrollArea	–none
Splitter (resizable)	–none	–none	✓Splitter	–none	–none	✓Resizable	–none
Affix (sticky)	–none	–none	✓Affix	–none	–none	–none	–none
Section	✓Section	✓	–none	–none	–none	–none	–none
Hero / banner	✓Hero	✓	–none	–none	–none	–none	–none
Level (space-between bar)	✓Level	✓	◐Group	–none	◐Group	–none	–none
Media object	✓Media	✓	–none	–none	–none	–none	–none
Tile (Bulma grid tile)	–none	✓	◐SimpleGrid	◐Grid	◐Grid	–none	–none
Footer	✓Footer	✓	◐AppShell	–none	–none	–none	–none
Box (polymorphic primitive)	–none	✓	✓Box	✓Box	✓Box	–none	–none
Paper / elevated surface	✓Box	✓	✓Paper	✓Paper	◐Box	◐Card	◐Card
Data display
Avatar	✓Avatar	–none	✓Avatar	✓Avatar	✓Avatar	✓Avatar	–none
Avatar group	✓Avatars	–none	✓Avatar.Group	✓AvatarGroup	✓Avatar.Group	◐Avatar	–none
Badge (corner indicator)	✓Badge	–none	✓Indicator	✓Badge	◐Float	–none	–none
Tag / label	✓Tag	✓	✓Badge	✓Chip	✓Tag	✓Badge	✓Badge
Chip (deletable / interactive)	◐Tag	◐	✓Chip	✓Chip	✓Tag	–none	–none
Card	✓Card	✓	✓Card	✓Card	✓Card	✓Card	✓Card
Table (static)	✓Table	✓	✓Table	✓Table	✓Table	✓Table	✓Table
Data grid (sort/filter/page)	–none	–none	–none	✓DataGrid	–none	✓DataTable	–none
Description / data list	–none	–none	✓DataList	–none	✓DataList	–none	–none
List (styled)	✓UnorderedList	◐	✓List	✓List	✓List	–none	✓ListGroup
Tree view	–none	–none	✓Tree	✓TreeView	–none	–none	–none
Tree select	–none	–none	✓TreeSelect	–none	–none	–none	–none
Timeline	–none	–none	✓Timeline	✓Timeline	✓Timeline	–none	–none
Kbd (keyboard key)	–none	–none	✓Kbd	–none	✓Kbd	✓Kbd	–none
Number formatter	–none	–none	✓NumberFormatter	–none	✓FormatNumber	–none	–none
Image	✓Image	✓	✓Image	◐ImageList	✓Image	–none	✓Image
Image list / gallery	–none	–none	◐SimpleGrid	✓ImageList	–none	–none	–none
Background image	–none	–none	✓BackgroundImage	–none	–none	–none	–none
Figure	✓Figure	–none	–none	–none	–none	–none	✓Figure
Icon	✓Icon	✓	◐ThemeIcon	✓Icon	✓Icon	–none	–none
Theme icon (colored container)	–none	–none	✓ThemeIcon	–none	–none	–none	–none
Carousel	✓Carousel	–none	✓Carousel	–none	–none	✓Carousel	✓Carousel
Charts	–none	–none	✓@mantine/charts	✓@mui/x-charts	–none	✓Chart	–none
Spoiler (clamp / expand)	–none	–none	✓Spoiler	–none	–none	–none	–none
Masonry layout	–none	–none	–none	✓Masonry	–none	–none	–none
Typography
Text / body	✓Paragraph	◐	✓Text	✓Typography	✓Text	◐Typography	–none
Heading / title	✓Title	✓	✓Title	✓Typography	✓Heading	◐Typography	–none
Subtitle	✓SubTitle	◐	◐Title	◐Typography	◐Heading	–none	–none
Inline code	✓Code	–none	✓Code	–none	✓Code	–none	–none
Code block (syntax highlight)	◐Pre	–none	✓CodeHighlight	–none	◐Code	–none	–none
Blockquote	–none	–none	✓Blockquote	–none	✓Blockquote	◐Typography	–none
Highlight / mark text	–none	–none	✓Highlight	–none	✓Highlight	–none	–none
Rich-HTML style wrapper	✓Content	✓	✓TypographyStylesProvider	–none	✓Prose	◐Typography	–none
Divider	✓Divider	–none	✓Divider	✓Divider	✓Separator	✓Separator	–none
Inline semantic (em/strong/span)	✓Emphasis/Strong/Span	–none	◐Text	◐Typography	◐Text	–none	–none
Feedback & status
Alert / message box	✓Notification	✓	✓Alert	✓Alert	✓Alert	✓Alert	✓Alert
Toast / snackbar	✓Toast	–none	✓Notifications	✓Snackbar	✓Toaster	✓Sonner	✓Toast
Progress (linear)	✓Progress	✓	✓Progress	✓LinearProgress	✓Progress	✓Progress	✓ProgressBar
Spinner (standalone)	◐Loading	–none	✓Loader	✓CircularProgress	✓Spinner	✓Spinner	✓Spinner
Loading overlay	✓Loading	–none	✓LoadingOverlay	◐Backdrop	–none	–none	–none
Ring / circular progress	–none	–none	✓RingProgress	✓CircularProgress	✓ProgressCircle	–none	–none
Semi-circle progress	–none	–none	✓SemiCircleProgress	–none	–none	–none	–none
Gauge	–none	–none	◐SemiCircleProgress	✓Gauge	–none	–none	–none
Skeleton	✓Skeleton	–none	✓Skeleton	✓Skeleton	✓Skeleton	✓Skeleton	✓Placeholder
Empty state	–none	–none	✓EmptyState	–none	✓EmptyState	✓Empty	–none
Overlays
Modal	✓Modal	✓	✓Modal	✓Modal	✓Dialog	✓Dialog	✓Modal
Confirm / alert dialog	✓Dialog	–none	◐modals	✓Dialog	◐Dialog	✓AlertDialog	–none
Drawer / off-canvas	✓Sidebar	–none	✓Drawer	✓Drawer	✓Drawer	✓Drawer	✓Offcanvas
Swipeable drawer	–none	–none	–none	✓SwipeableDrawer	–none	◐Drawer	–none
Popover	–none	–none	✓Popover	✓Popover	✓Popover	✓Popover	✓Popover
Hover card	–none	–none	✓HoverCard	–none	✓HoverCard	✓HoverCard	–none
Tooltip	✓Tooltip	–none	✓Tooltip	✓Tooltip	✓Tooltip	✓Tooltip	✓Tooltip
Backdrop / scrim	–none	–none	✓Overlay	✓Backdrop	–none	–none	–none
Disclosure
Accordion (grouped)	–none	–none	✓Accordion	✓Accordion	✓Accordion	✓Accordion	✓Accordion
Collapse (single)	✓Collapse	–none	✓Collapse	✓Collapse	✓Collapsible	✓Collapsible	✓Collapse
Panel (heading + body)	✓Panel	✓	–none	–none	–none	–none	–none
Rich input & special
Dropzone (drag-drop upload)	–none	–none	✓Dropzone	–none	◐FileUpload	–none	–none
Rich text editor	–none	–none	✓RichTextEditor	–none	–none	–none	–none
Transfer list	–none	–none	–none	✓TransferList	–none	–none	–none
Utilities & infrastructure
Theme / provider	✓Theme	–none	✓MantineProvider	✓ThemeProvider	✓ChakraProvider	◐ThemeProvider	✓ThemeProvider
Global config provider	✓ConfigProvider	–none	◐MantineProvider	–none	◐ChakraProvider	–none	–none
CSS reset / baseline	–none	–none	–none	✓CssBaseline	–none	–none	–none
Portal	–none	–none	✓Portal	✓Portal	✓Portal	–none	–none
Focus trap	–none	–none	✓FocusTrap	✓TrapFocus	–none	–none	–none
Click-away listener	–none	–none	–none	✓ClickAwayListener	–none	–none	–none
Transition primitives	◐Reveal	–none	✓Transition	✓Fade / Grow / Slide	◐Presence	–none	✓Fade
Scroll-reveal (on-scroll)	✓Reveal	–none	–none	–none	–none	–none	–none
Visually hidden (a11y)	–none	–none	✓VisuallyHidden	◐visuallyHidden	✓VisuallyHidden	–none	–none
No-SSR guard	–none	–none	–none	✓NoSsr	✓ClientOnly	–none	–none
classNames utility	✓classNames	–none	◐clsx	◐clsx	◐cx	◐cn	–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.