zaichaopan / tailwind-react-aria-components-starter-kits

Tailwind react aria components starter kits

Tailwind React Aria Components Starter kits

This project is heavily inspired by below amazing projects:

• react-aria-tailwind-starter
• Tailwind Catalyst
• shadcn/ui

If you are looking for something like Tailwind Catalyst but using React Aria Component, give it a try.

Installation

This is NOT a component library. It just contains re-usable and styled components that you can copy and past to your project.

1. Set up tailwindCSS
2. Install

npm i react-aria-components
npm i tailwindcss-animate
npm i tailwind-merge
npm i tailwindcss-react-aria-components
npm i @tailwindcss/container-queries
# if you want to use the HoverCard component
npm i @floating-ui/react
# If you want to use the Multi-Select component
npm i react-stately
# If you want to use the AlertDialog, Separator or VisuallyHidden component
npm i react-aria

3. Edit your tailwind.config.js file using ./tailwind.config.js

4. Copy components from src to your project

Visit the storybook page - https://zaichaopan.github.io/tailwind-react-aria-components-starter-kits to explore all available components.