React Components & Libraries Catalog

Inspired by the awesome-react-components but lists only the components I use and can recommend. It's a living document that I'll update as technologies and best practices change.

UI Components

Unstyled component libraries

Also known as headless libraries, they provide great unstyled and accessible components that you can customize to your liking.

• headlessui — completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
• radix-ui — Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps.

Styled component libraries

When you just want your app to look fine or prototype quickly.

• shadcn/ui — beautifully designed components that you can copy and paste into your apps. Accessible. Customizable.
• daisyUI — Tailwind CSS components.
• HeroUI — beautiful, fast and modern React UI library.

Class variance authority

For building UI Libraries.

• Panda CSS — universal, type-safe, CSS-in-JS framework for product teams.
• Pigment CSS — zero-runtime CSS-in-JS tool that extracts the colocated styles to their own CSS files at build time. Brings better end users' performance, and you get RSC and App Router compatibility without having to significantly change how you author component styles.
• cva — helps creating component variants.

Carousel

• nuka-carousel — small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior.

Notification

• Sonner — an opinionated toast component.

Select

• react-select — filtering, multiple selection, etc.

Chart

• Recharts — off the shelf charts, great composability, optional customization due to opt-in composability.
• tremor — build charts and dashboards fast by copy-paste.

Date picker

• react-date-picker — flexible date picker.
• react-daterange-picker — flexible date range picker.

Icons

• Heroicons — beautiful hand-crafted SVG icons.
• Lucide — beautiful & consistent icon toolkit forked from Feather Icons.

Autosize textarea

• react-textarea-autosize — replacement for the textarea element which automatically resizes textarea as content changes.

Slider

• rc-slider — flexible slider component.

Tooltips / popovers / dropdowns

• Floating UI — create "floating" elements such as tooltips, popovers, dropdowns, and more.

Masked input

• imaskjs — input masking with simple API and attention to small usability details such as cursor position, copy-paste, etc.

Tables

• TanStack Table — headless UI for building powerful tables & datagrids for TS/JS.

Syntax highlighting

• Shiki — manage syntax highlighting. It is designed to work at compile-time, making it perfect fit for React Server Components. It adds 0kb to the JavaScript bundle and it can support dozens of languages at no additional cost.
• rehype-pretty-code — beautiful code blocks powered by shiki.

UI Animation

• Motion — for complex animations (i.e. layout animations) with declarative code.
• React Spring — smoothly interpolate between values in a fluid, organic fashion.
• AutoAnimate — for animations with a single line of code.
• CountUp — quickly create animations that display numerical data in a more interesting way.

Real-time

• PartyKit — add real-time experience to your projects. It uses WebSockets so that the changes are lightning-fast.

UI Utilities

• TanStack Router — fully typesafe router for React.
• dnd-kit — lightweight, performant, accessible and extensible drag & drop toolkit.
• react-virtualized — components for efficiently rendering large lists and tabular data.
• react-collapse — collapse animation with CSS.

Validation

• Zod — TypeScript-first schema validation with static type inference.

Utilities

• clsx — construct className strings conditionally.
• tempo — the easiest way to work with dates in JS/TS.
• date-fns — comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

Backend

• Next.js — react (meta) full-stack framework.
• Hono — fast and lightweight web application framework, on built Web Standards.

Authentication

• Lucia — step by step self-hosted authentication implementation.
  • Oslo — auth and cryptography packages.
  • Arctic — OAuth 2.0 client library with support for 50+ providers.

Database

• Drizzle — headless TypeScript ORM.

Dev Tools

• Storybook — style guide generator and a workbench for building UI components and pages in isolation.

Testing

• Vitest — unit/integration testing framework.
• Playwright — e2e testing.

Miscellaneous

• vaul — an unstyled drawer component for React.
• cmdk — fast, composable, unstyled command menu for React.
• TanStack Query — powerful asynchronous state management, server-state utilities and data fetching.
• React Hook Form — performant, flexible and extensible forms with easy-to-use validation.
  • with zod integration for validation
• React Email — reliable and responsive html emails.
• fastcomments-react — FastComments component for embedding a live comment thread on a page or SPA.
• react-dropzone — react hook to handle drag and drop for files.

Contributing

Suggestions are welcome! Just create an issue if you know something better and efficient than what I use.

Author

Nick Plekhanov, a consulting frontend engineer.