A running drawer of React component libraries, primitives, widgets, UI kits, and references — grouped by the job you're trying to do. Not a "install all of these" list. It's a place to check what already exists before building another half-modal, half-popover thing from scratch.
These are the resources I look at when I want behavior, accessibility, and composition without importing someone else's entire visual system.
| Resource | Why it is useful |
|---|---|
| Radix Primitives | Unstyled primitives for dialogs, popovers, menus, tabs, sliders, switches, and other behavior-heavy UI. |
| Ariakit | Lower-level accessible components and examples. Good for understanding how composable component APIs can work. |
| React Aria | Adobe's accessibility-focused hooks and component primitives. Useful when you want strong behavior primitives without default styling. |
| Base UI | Unstyled accessible components from the MUI team. Worth watching for design-system foundations. |
| Reach UI | Historically important accessible React primitives. I would mostly treat it as lineage and API reference now. |
| Reakit | The predecessor lineage to Ariakit. Still useful for seeing an older low-level accessible component model. |
| styleless-ui | Another take on styleless/headless React components. |
| libreact | A utility-heavy collection of React components and hooks. Good for spelunking small patterns. |
The main reason to keep these in the drawer: primitives save you from rebuilding keyboard navigation, focus management, portals, ARIA wiring, and controlled/uncontrolled component state.
These are useful when you want a strong starting point and are comfortable owning the source or the styling conventions.
| Resource | Why it is useful |
|---|---|
| shadcn/ui | Copy components into your app and own the code. Especially useful if you already like Radix and Tailwind. |
| shadcn Dialog primitive docs | Good example of composing Radix primitives into app-owned components. |
| Tailus UI | Radix/Tailwind-flavored React components and examples. |
| Preline | Tailwind-based components and UI behaviors, with dark-mode examples. |
| daisyUI | Tailwind component classes. Useful when you want fast styling conventions without writing every class from scratch. |
| Aceternity UI code block | Nice source of copyable, polished UI examples. |
| Shopify Hydrogen Button example | A small real-world component example from a production-oriented starter. |
This category is less about "install a library" and more about having implementation references when you want to move fast.
Sometimes you do not need a bespoke component system. You need a lot of conventional UI, quickly.
| Resource | Why it is useful |
|---|---|
| Mantine | Large React component and hooks library. Good for app dashboards, forms, layout, and general product UI. |
| React Spectrum | Adobe's full design system and component implementation. Useful when accessibility and consistency matter. |
| HeroUI | The project formerly known as NextUI. Useful for polished default components. |
| Base Web | Uber's React component system. Good reference for broad component API surface. |
| PrimeReact | Large component suite with lots of examples, especially for app/admin-style screens. |
| Zendesk Garden | Clean design-system reference with production product constraints. |
| Vechai UI | Radix-based component library reference. |
| Availity React | A useful collection of React utilities and app components. |
| Talend UI components | Enterprise component-library reference. |
| Vision UI Dashboard Chakra | Full dashboard kit built around Chakra. |
| GNUI | Component/design-system reference from Nordcloud. |
| Yoga | Another design-system/component-library reference. |
These are especially useful when you are building internal tools, admin surfaces, dashboards, or operational workflows where breadth matters more than bespoke visual identity.
Date UI always looks simple until localization, keyboard behavior, disabled ranges, formatting, and mobile interactions show up.
| Resource | Why it is useful |
|---|---|
| calendarx | Tiny calendar reference. |
| natscale react-calendar | Lightweight calendar component. |
| FullCalendar demos | Heavy-duty calendar and scheduling examples. |
| datepicker | Date picker implementation reference. |
| react-nice-dates | Date picker library with clean examples. |
These are the links I want when the UI stops being a static page and starts acting like a workspace.
| Resource | Why it is useful |
|---|---|
| Split.js | Split panes without taking over your whole app. |
| react-resizable-panels | Resizable panel layouts from Brian Vaughn. |
| React Virtuoso | Virtualized lists and tables. |
| Muuri | Draggable/filterable/sortable grid layouts. |
| Packery | Bin-packing grid layouts. |
| FlexLayout | Docking and tabbed layout manager for app-like interfaces. |
| react-split-pane | Older split-pane reference. |
| react-stacked | Stacked layout reference. |
| LYTS | Layout experiment/reference. |
| Vaul | Drawer component with a nice interaction model. |
I tend to check these before inventing a new layout primitive. Layout bugs are the kind that quietly eat entire days.
Drag behavior is one of those areas where the browser gives you just enough rope to regret your weekend.
| Resource | Why it is useful |
|---|---|
| dnd kit | Modern drag-and-drop toolkit for React. |
| Selecto | Drag selection for selectable elements. |
| Shopify Draggable | Drag-and-drop examples and interaction reference. |
Floating things are full of edge cases: viewport collision, scroll containers, focus, pointer behavior, and layering.
| Resource | Why it is useful |
|---|---|
| Floating UI | Positioning engine for tooltips, popovers, menus, and floating elements. |
| Sonner | Polished toast component. |
| react-hot-toast | Popular toast library with a simple API. |
| react-toast | Tiny emoji-oriented toast reference. |
| Reapop | Notification/toast system reference. |
| react-light-toast | Tiny toast implementation reference. |
The resources in this bucket are useful when the form is more than a few inputs and a submit button.
| Resource | Why it is useful |
|---|---|
| Uniforms unstyled package | Naked form components worth studying if you like schema-driven forms. |
| react-range | Range input behavior without building slider mechanics yourself. |
| react-inline-edit | Inline editing reference. |
| react-use-wizard | Wizard/step-flow utility. |
Editors are their own universe. I try very hard not to build one casually.
| Resource | Why it is useful |
|---|---|
| Editor.js | Block-style editor. |
| Slate | Highly customizable rich text editor framework. |
| phiresky CodeBlock example | Nice reference for a React code-highlighting component. |
This is the miscellaneous drawer. Not everything needs to be a design system.
| Resource | Why it is useful |
|---|---|
| cmdk | Command menu component. |
| kbar | Command palette / "genie bar" reference. |
| NProgress | Classic top-page loading indicator. |
| react-importer | CSV importer component. |
| react-transition-state | Tiny transition state utility. |
| react-scrollama | Scroll-driven story/visual trigger reference. |
| moveTo | Smooth scrolling utility reference. |
| react-move | Animation examples for React. |
| Leva | Controls panel for tweaking values, especially useful in creative/devtool interfaces. |
| Retoggle | Component toggle/devtool reference. |
| react-native-web | React Native primitives rendered on the web. Useful when thinking across native/web boundaries. |
| tw-universal-tokens | Design-token utility reference. |