React Libraries Reference

A guide to the major libraries in the React ecosystem — what they do, when to use them, and how they fit together.

Section	Description
What Are React Libraries?	The concept
UI Component Libraries	MUI, Chakra, Radix, shadcn, and more
State Management	Redux Toolkit, Zustand, Jotai, Valtio
Data Fetching	TanStack Query, SWR
Routing	React Router, TanStack Router
Forms	React Hook Form, Formik
Animation	Framer Motion, React Spring
Authentication	Auth.js, Clerk, Lucia, Supabase Auth
Building Your Stack	How these fit together
Links and Resources	Component libraries, UI kits, design tools

What Are React Libraries?

React libraries are packages that extend React with reusable components, utilities, or tools. Instead of building every feature from scratch, you integrate libraries that provide proven solutions for common tasks.

The typical workflow:

Install via npm install or yarn add
Import components or hooks into your code
Pass data through props or hooks
Render in your component tree

Most modern React libraries use hooks and modular architecture. With React 19, libraries that support Server Components can run logic on the server without shipping it to the client bundle.

UI Component Libraries

Material UI (MUI)

The most widely used React component library. Implements Google's Material Design.

Detail	Value
Package	`@mui/material`
Size	Large (~80KB+ gzipped)
Styling	CSS-in-JS (Emotion), CSS variables, CSS layers in v7
TypeScript	Full support (requires TS 4.9+ for v7)
GitHub Stars	97,000+

Strengths: Massive ecosystem, extensive docs, highly customizable theming, accessibility built in.

Weaknesses: Large bundle size, Material Design aesthetic may not fit every project, migration between major versions requires effort.

Best for: Dashboards, admin panels, enterprise apps, SaaS platforms where consistency matters more than unique design.

Chakra UI

A component library focused on accessibility and developer experience with a simple, composable API.

Detail	Value
Package	`@chakra-ui/react`
Size	Medium
Styling	Style props (`bg="blue.500"`) + theme tokens
TypeScript	Full support

Strengths: Clean API, great accessibility defaults, easy to theme, style props are intuitive.

Weaknesses: Opinionated about styling approach, smaller ecosystem than MUI.

Best for: Projects that want good design defaults with less configuration than MUI.

shadcn/ui

Not a library you install — it's a collection of copy-paste components built on Radix UI + Tailwind CSS. You own the code, no dependency to update.

Detail	Value
Install	`npx shadcn@latest add button` (copies source files into your project)
Styling	Tailwind CSS
Primitives	Radix UI (headless, accessible)
TypeScript	Full support

Strengths: Full control over the code, no version lock-in, excellent Tailwind integration, beautiful defaults.

Weaknesses: You maintain the components yourself, no automatic updates.

Best for: Projects using Tailwind that want polished components without a heavy dependency.

Radix UI

Headless (unstyled) UI primitives focused purely on behavior and accessibility. The foundation that shadcn/ui builds on.

Detail	Value
Package	`@radix-ui/react-*` (individual packages per component)
Styling	None — bring your own CSS/Tailwind
Accessibility	WAI-ARIA compliant out of the box

Strengths: Perfect accessibility, zero opinions on styling, composable.

Weaknesses: You have to style everything yourself.

Best for: Custom design systems where you need accessible primitives without any visual opinions.

Headless UI

Similar to Radix — unstyled, accessible components. Built by the Tailwind CSS team.

Detail	Value
Package	`@headlessui/react`
Components	Menu, Listbox, Combobox, Dialog, Disclosure, Tabs, etc.
Styling	None — designed for Tailwind

Strengths: Tight Tailwind integration, simple API, from the Tailwind team.

Weaknesses: Smaller component set than Radix.

DaisyUI

A Tailwind CSS component library — adds class names like btn, card, modal to Tailwind. Not React-specific.

Detail	Value
Package	`daisyui` (Tailwind plugin)
Styling	Tailwind utility classes + semantic class names
Themes	30+ built-in themes, easy to customize

Strengths: Zero JS overhead (pure CSS), works with any framework, beautiful themes.

Weaknesses: Less interactive behavior than JS-based libraries — you handle state yourself.

Choosing a UI Library

Need	Best Choice
Full component library, fast setup	MUI or Chakra UI
Tailwind project, want polished components	shadcn/ui
Custom design system, need accessible primitives	Radix UI or Headless UI
Tailwind project, want CSS-only components	DaisyUI
Maximum control, no dependencies	Radix UI + your own styles

State Management

Zustand

Lightweight, hook-based state management. 490 bytes gzipped.

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Detail	Value
Size	~490 bytes gzipped
API	`create()` + hooks
Middleware	persist, devtools, immer, subscribeWithSelector
Provider needed	No

Best for: Most React projects. Simple API, tiny bundle, works for small and medium apps. Pairs well with TanStack Query (Zustand for client state, TanStack Query for server state).

Redux Toolkit

The official way to use Redux. Predictable, powerful, more setup than Zustand.

Detail	Value
Package	`@reduxjs/toolkit`
Size	~15KB gzipped
Built-in	RTK Query (data fetching), Immer (immutable updates), DevTools
Provider needed	Yes

Best for: Large applications with complex global state, teams that want strict patterns and time-travel debugging.

Other Options

Library	Size	Approach	Best For
Jotai	~3KB	Atomic (bottom-up)	Fine-grained reactivity, many independent state atoms
Valtio	~3KB	Proxy-based (mutable syntax)	Developers who prefer mutable-style updates
Recoil	~20KB	Atomic (Facebook)	Derived state, async selectors (less active development)
MobX	~16KB	Observable (reactive)	Complex reactive data flows

Choosing State Management

Scenario	Recommended
Most projects, keep it simple	Zustand
Large team, strict patterns, time-travel debugging	Redux Toolkit
Many independent pieces of state	Jotai
Prefer mutable-style code	Valtio
Server state (API data)	Not state management — use TanStack Query

Data Fetching

TanStack Query (React Query)

The standard for server state management. Handles caching, background refetching, and synchronization automatically.

const { data, isLoading, error } = useQuery({
  queryKey: ['users', userId],
  queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  staleTime: 5 * 60 * 1000, // 5 minutes before refetch
});

Detail	Value
Package	`@tanstack/react-query`
Version	v5
Key features	Caching, background sync, optimistic updates, infinite queries, Suspense support

Important v5 changes:

Single-object parameter syntax for useQuery
onSuccess / onError removed — use useEffect watching data / error
useSuspenseQuery for guaranteed non-undefined data

Best for: Any app that fetches data from APIs. Replaces most useEffect + useState data fetching patterns.

SWR

Vercel's alternative to TanStack Query. Simpler API, fewer features.

Detail	Value
Package	`swr`
Size	~4KB gzipped
Key features	Stale-while-revalidate caching, automatic revalidation

Best for: Simpler data fetching needs, Next.js projects already in the Vercel ecosystem.

Routing

React Router

The most widely used routing library. v7 operates in three modes:

Mode	What It Does
SPA mode	Traditional client-side routing
Data Router mode	Loaders and actions for data management
Framework mode	Full SSR with direct database access

Route-level loaders pre-fetch data before rendering. Auto-generates TypeScript types for route parameters.

Best for: Most React SPAs. Industry standard.

TanStack Router

A newer, fully type-safe router with built-in search parameter validation and data loading.

Detail	Value
Package	`@tanstack/react-router`
Key feature	100% type-safe routes, search params, and loaders

Best for: TypeScript-heavy projects that want compile-time route safety.

Forms

React Hook Form

The performance leader. Uses uncontrolled components with ref registration — no state updates on every keystroke.

const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
  resolver: zodResolver(schema),
});

Detail	Value
Package	`react-hook-form`
Size	~10KB gzipped
Validation	Via `@hookform/resolvers` — supports Zod, Yup, Joi, etc.
Re-renders	Minimal (ref-based, not state-based)

Best for: Most form needs. Especially good for complex, multi-step forms.

Formik

An older, more established form library. Uses controlled components.

Detail	Value
Package	`formik`
Approach	Controlled components (state on every keystroke)
Status	Still maintained but less active than React Hook Form

Best for: Legacy projects already using it. For new projects, prefer React Hook Form.

Animation

Framer Motion

The most popular React animation library. Declarative API with gesture support.

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.3 }}
/>

Detail	Value
Package	`motion/react` (previously `framer-motion`)
Key features	Layout animations, gestures (hover, tap, drag), AnimatePresence for exit animations, shared element transitions via `layoutId`
Requires	React 18+

Best for: Page transitions, microinteractions, gesture-driven UIs, scroll animations.

React Spring

Physics-based animations. More control over spring physics, less opinionated than Framer Motion.

Detail	Value
Package	`@react-spring/web`
Approach	Spring physics (mass, tension, friction)

Best for: When you want physics-accurate spring animations with fine-grained control.

Authentication

For a deeper comparison of auth providers, see the Multi-Client Architecture guide.

Provider	Type	Best For
Auth.js (NextAuth)	Self-hosted	Next.js apps, 80+ OAuth providers, free
Clerk	Managed	Fast integration, pre-built UI, polished DX
Supabase Auth	Managed (BaaS)	Already using Supabase, Row Level Security
Firebase Auth	Managed (BaaS)	Google ecosystem, mobile + web
Lucia	Library	Full control, bring your own DB, no vendor lock-in
Keycloak	Self-hosted	Enterprise SSO, SAML
Auth0 / Okta	Managed	Enterprise, many integrations

Building Your Stack

These libraries are designed to be composed together. Here's how they typically fit:

UI Components    -->  shadcn/ui  or  MUI  or  Chakra
Styling          -->  Tailwind CSS  or  CSS Modules  or  MUI's theme
Client State     -->  Zustand  (or Redux Toolkit for large apps)
Server State     -->  TanStack Query  (or SWR)
Routing          -->  React Router  (or TanStack Router)
Forms            -->  React Hook Form + Zod
Animation        -->  Framer Motion
Auth             -->  Auth.js  or  Clerk  (depends on project)

Common Stacks

Stack	When to Use
shadcn/ui + Tailwind + Zustand + TanStack Query + React Hook Form	Modern default for most new projects
MUI + Redux Toolkit + React Router	Enterprise / admin dashboards
Chakra UI + Zustand + SWR	Quick prototyping with good defaults
Radix UI + Tailwind + Jotai + TanStack Router	Maximum type safety and control

Links and Resources

Component Libraries

Library	URL	Notes
shadcn/ui	https://ui.shadcn.com/	Copy-paste components, Radix + Tailwind
Material UI	https://mui.com/	Google Material Design components
Chakra UI	https://chakra-ui.com/	Accessible, composable components
Radix UI	https://www.radix-ui.com/	Headless, accessible primitives
Headless UI	https://headlessui.com/	Unstyled components from the Tailwind team
DaisyUI	https://daisyui.com/	Tailwind CSS component classes
HeroUI	https://heroui.com/	Modern React component library
Mantine	https://mantine.dev/	Full-featured, hooks + components
Ant Design	https://ant.design/	Enterprise-grade, popular in Asia
Ark UI	https://ark-ui.com/	Headless components from the Chakra team
React Aria	https://react-spectrum.adobe.com/react-aria/	Adobe's accessible component hooks
Park UI	https://park-ui.com/	Components built on Ark UI + Panda CSS
Flowbite	https://flowbite.com/	Tailwind component library
Tremor	https://tremor.so/	Dashboard components for React
NextUI	https://nextui.org/	Modern components built on React Aria

shadcn/ui Ecosystem

Resource	URL	Notes
shadcn/ui	https://ui.shadcn.com/	Official component collection
shadcn Blocks	https://www.shadcnblocks.com/blocks	Pre-built page sections and layouts
shadcn Studio	https://shadcnstudio.com/	Theme builder and customizer
shadcn Space	https://shadcnspace.com/	Community components and templates

UI Kits and Design Tools

Resource	URL	Notes
Magic UI	https://magicui.design/	Animated components for landing pages
Stunning UI	https://www.stunningui.com/	Premium component inspiration
Aceternity UI	https://ui.aceternity.com/	Animated, modern components
SaaS UI	https://saas-ui.dev/	Components designed for SaaS products
Builder.io	https://www.builder.io/	Visual editor + headless CMS
v0.dev	https://v0.dev/	AI-powered UI generation (Vercel)
Tailwind UI	https://tailwindui.com/	Official Tailwind component templates (paid)
Catalyst	https://catalyst.tailwindui.com/	Tailwind Labs' React component kit

State Management

Library	URL
Zustand	https://zustand.docs.pmnd.rs/
Redux Toolkit	https://redux-toolkit.js.org/
Jotai	https://jotai.org/
Valtio	https://valtio.pmnd.rs/

Data Fetching

Library	URL
TanStack Query	https://tanstack.com/query/
SWR	https://swr.vercel.app/

Routing

Library	URL
React Router	https://reactrouter.com/
TanStack Router	https://tanstack.com/router/

Forms

Library	URL
React Hook Form	https://react-hook-form.com/
Zod	https://zod.dev/

Animation

Library	URL
Framer Motion	https://motion.dev/
React Spring	https://www.react-spring.dev/
Auto Animate	https://auto-animate.formkit.com/
GSAP	https://gsap.com/

Authentication

Library	URL
Auth.js (NextAuth)	https://authjs.dev/
Clerk	https://clerk.com/
Lucia	https://lucia-auth.com/
Supabase Auth	https://supabase.com/auth

React Libraries Reference

React Libraries Reference

Table of Contents

What Are React Libraries?

UI Component Libraries

Material UI (MUI)

Chakra UI

shadcn/ui

Radix UI

Headless UI

DaisyUI

Choosing a UI Library

State Management

Zustand

Redux Toolkit

Other Options

Choosing State Management

Data Fetching

TanStack Query (React Query)

SWR

Routing

React Router

TanStack Router

Forms

React Hook Form

Formik

Animation

Framer Motion

React Spring

Authentication

Building Your Stack

Common Stacks

Links and Resources

Component Libraries

shadcn/ui Ecosystem

UI Kits and Design Tools

State Management

Data Fetching

Routing

Forms

Animation

Authentication