├── .gitignore
├── assets
    └── awesome.png
├── CONTRIBUTE.md
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea


--------------------------------------------------------------------------------
/assets/awesome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hevar/awesome-react-headless-ui-components/HEAD/assets/awesome.png


--------------------------------------------------------------------------------
/CONTRIBUTE.md:
--------------------------------------------------------------------------------
 1 | ## How to contribute
 2 | 
 3 | 1. copy the template below
 4 | 2. replace all `REPLACE_WITH_...` placeholders with the actual values
 5 | 
 6 | <br>
 7 | <br>
 8 | 
 9 | **Checklist for replacing placeholders:**
10 | 
11 | - Replace `REPLACE_WITH_LIB_URL` with library main url. Example: `https://ariakit.org`
12 | - Replace `REPLACE_WITH_LIB_NAME` with library name. Example: `AriaKit`
13 | - Replace `REPLACE_WITH_LIB_DESCRIPTION` with library description. Example: `AriaKit is a collection of accessible React components...`
14 | - Replace `REPLACE_WITH_LIB_GH_USER` with library github user (`github.com/<user>`). Example: `ariakit`
15 | - Replace `REPLACE_WITH_LIB_GH_REPO_NAME` with library github repo name (`github.com/<user>/<repo-name>`). Example: `ariakit`
16 | - Replace `REPLACE_WITH_LIB_GH_REPO_URL` with library github repo url. Example: `https://github.com/ariakit/ariakit
17 | - Replace `REPLACE_WITH_NPM_PACKAGE_NAME` with library npm package name (same as used to install, `npm install @ariakit/react`). Example: `%40ariakit%2Freact` (`@ariakit/react` URL encoded) 
18 | 
19 | ---
20 | 
21 | 
22 | ## Templates
23 | 
24 | ### Compact template:
25 | <details>
26 |     <summary><a href="REPLACE_WITH_LIB_URL">REPLACE_WITH_LIB_NAME</a> - REPLACE_WITH_LIB_DESCRIPTION</summary>
27 | 
28 | [![github card](https://github-stats.h3.nu/api/pin/?username=REPLACE_WITH_LIB_GH_USER&repo=REPLACE_WITH_LIB_GH_REPO_NAME)](REPLACE_WITH_LIB_GH_REPO_URL)
29 | </details>
30 | 
31 | 
32 | ### With Stats template:
33 | <details>
34 |     <summary><a href="REPLACE_WITH_LIB_URL">REPLACE_WITH_LIB_NAME</a> - REPLACE_WITH_LIB_DESCRIPTION</summary>
35 | 
36 | [![github card](https://github-stats.h3.nu/api/pin/?username=REPLACE_WITH_LIB_GH_USER&repo=REPLACE_WITH_LIB_GH_REPO_NAME)](REPLACE_WITH_LIB_GH_REPO_URL)
37 | </details>
38 | 
39 | <div float="left">
40 |     <img alt="Github stars" src="https://img.shields.io/github/stars/REPLACE_WITH_LIB_GH_USER/REPLACE_WITH_LIB_GH_REPO_NAME?style=flat&logo=github&color=blue" />
41 |     <img alt="Downloads per month" src="https://img.shields.io/npm/dm/REPLACE_WITH_NPM_PACKAGE_NAME?style=flat&logo=npm&color=blue" />
42 |     <img alt="Downloads per year" src="https://img.shields.io/npm/dy/REPLACE_WITH_NPM_PACKAGE_NAME?style=flat&logo=npm&color=blue" />
43 |     <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/REPLACE_WITH_LIB_GH_USER/REPLACE_WITH_LIB_GH_REPO_NAME?style=flat&logo=github&color=blue" />
44 |     <img alt="Created at" src="https://img.shields.io/github/created-at/REPLACE_WITH_LIB_GH_USER/REPLACE_WITH_LIB_GH_REPO_NAME?style=flat&logoColor=github&color=blue" />
45 |     <img alt="Github discussions" src="https://img.shields.io/github/discussions/REPLACE_WITH_LIB_GH_USER/REPLACE_WITH_LIB_GH_REPO_NAME?style=flat&logo=github&color=blue" />
46 |     <img alt="Github Issues" src="https://img.shields.io/github/issues/REPLACE_WITH_LIB_GH_USER/REPLACE_WITH_LIB_GH_REPO_NAME?style=flat&logo=github&color=blue" />
47 |     <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/REPLACE_WITH_NPM_PACKAGE_NAME?style=flat&color=blue" />
48 |     <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/REPLACE_WITH_NPM_PACKAGE_NAME?style=flat&color=blue" />
49 |     <img alt="Version" src="https://img.shields.io/npm/v/REPLACE_WITH_NPM_PACKAGE_NAME?style=flat&color=blue&logo=npm" />
50 |     <img alt="Language " src="https://img.shields.io/github/languages/top/REPLACE_WITH_LIB_GH_USER/REPLACE_WITH_LIB_GH_REPO_NAME?style=flat&color=blue" />
51 |     <img alt="Types" src="https://img.shields.io/npm/types/REPLACE_WITH_NPM_PACKAGE_NAME?style=flat&color=blue&logo=npm" />
52 | </div>
53 | 
54 | ---
55 | 
56 | ## Notes:
57 | **Shields.io badges docs:**
58 | - github stars - https://shields.io/badges/git-hub-repo-stars
59 | - commit activity - https://shields.io/badges/git-hub-commit-activity
60 | - created at - https://shields.io/badges/github-created-at
61 | - npm downloads - https://shields.io/badges/npm-downloads
62 | - npm bundle size - https://shields.io/badges/npm-bundle-size
63 | - github discussions - https://shields.io/badges/git-hub-discussions
64 | - github issues - https://shields.io/badges/git-hub-issues-or-pull-requests
65 | - npm version https://shields.io/badges/npm-version
66 | - language - https://shields.io/badges/git-hub-top-language
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <p align="center">
  3 |   <img width="150" height="150" src="./assets/awesome.png">
  4 | </p>
  5 | 
  6 | # Awesome React Headless UI Components
  7 | Awesome list of React headless user interface component libraries!
  8 | 
  9 | ---
 10 | <details>
 11 |     <summary><a href="https://ariakit.org">Ariakit</a> - Open-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps.</summary>
 12 | 
 13 | [![Ariakit github card](https://github-stats.h3.nu/api/pin/?username=ariakit&repo=ariakit)](https://github.com/ariakit/ariakit)
 14 | </details>
 15 | 
 16 | <details>
 17 |     <summary><a href="https://ark-ui.com/">Aui UI</a> - Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.</summary>
 18 | 
 19 | [![github card](https://github-stats.h3.nu/api/pin/?username=chakra-ui&repo=ark)](https://github.com/chakra-ui/ark)
 20 | </details>
 21 | 
 22 | 
 23 | <details>
 24 |     <summary><a href="https://mui.com/base-ui/">Base UI</a> - Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.</summary>
 25 | 
 26 | [![github card](https://github-stats.h3.nu/api/pin/?username=mui&repo=base-ui)](https://github.com/mui/base-ui)
 27 | </details>
 28 | 
 29 | <details>
 30 |     <summary><a href="https://floating-ui.com/">Floating UI</a> - Floating UI is a library that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.</summary>
 31 | 
 32 | [![github card](https://github-stats.h3.nu/api/pin/?username=floating-ui&repo=floating-ui)](https://github.com/floating-ui/floating-ui)
 33 | </details>
 34 | 
 35 | <details>
 36 |     <summary><a href="https://headlessui.com/">Headless UI</a> - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.</summary>
 37 | 
 38 | [![github card](https://github-stats.h3.nu/api/pin/?username=tailwindlabs&repo=headlessui)](https://github.com/tailwindlabs/headlessui)
 39 | </details>
 40 | 
 41 | <details>
 42 |     <summary><a href="https://www.radix-ui.com/">Radix UI</a> - Core building blocks for your design system - Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</summary>
 43 | 
 44 | [![github card](https://github-stats.h3.nu/api/pin/?username=radix-ui&repo=primitives)](https://github.com/radix-ui/primitives)
 45 | 
 46 | > [!NOTE]
 47 | > Radix UI is divided into multiple packages, each with its own repository. The above NPM badges is for the `@radix-ui/react-accordion` package only.
 48 | 
 49 | </details>
 50 | 
 51 | <details>
 52 |     <summary><a href="https://react-spectrum.adobe.com/react-aria/index.html">React Aria</a> - Craft world-class accessible components with custom styles. Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</summary>
 53 | 
 54 | [![github card](https://github-stats.h3.nu/api/pin/?username=adobe&repo=react-spectrum)](https://github.com/adobe/react-spectrum)
 55 | </details>
 56 | 
 57 | ---
 58 | 
 59 | # With stats
 60 | 
 61 | <details>
 62 |     <summary><a href="https://ariakit.org">Ariakit</a> - Open-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps.</summary>
 63 | 
 64 | [![Ariakit github card](https://github-stats.h3.nu/api/pin/?username=ariakit&repo=ariakit)](https://github.com/ariakit/ariakit)
 65 | </details>
 66 | 
 67 | <div float="left">
 68 |   <img alt="Github stars" src="https://img.shields.io/github/stars/Ariakit/Ariakit?style=flat&logo=github&color=blue" />
 69 |   <img alt="Downloads per month" src="https://img.shields.io/npm/dm/%40ariakit%2Freact?style=flat&logo=npm&color=blue" />
 70 |   <img alt="Downloads per year" src="https://img.shields.io/npm/dy/%40ariakit%2Freact?style=flat&logo=npm&color=blue" />
 71 |   <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/ariakit/ariakit?style=flat&logo=github&color=blue" />
 72 |   <img alt="Created at" src="https://img.shields.io/github/created-at/ariakit/ariakit?style=flat&logoColor=github&color=blue" />
 73 |   <img alt="Github discussions" src="https://img.shields.io/github/discussions/ariakit/ariakit?style=flat&logo=github&color=blue" />
 74 |   <img alt="Github Issues" src="https://img.shields.io/github/issues/ariakit/ariakit?style=flat&logo=github&color=blue" />
 75 |   <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/%40ariakit%2Freact?style=flat&color=blue" />
 76 |   <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/%40ariakit%2Freact?style=flat&color=blue" />
 77 |   <img alt="Version" src="https://img.shields.io/npm/v/%40ariakit%2Freact?style=flat&color=blue&logo=npm" />
 78 |   <img alt="Language" src="https://img.shields.io/github/languages/top/ariakit/ariakit?style=flat&color=blue" />
 79 |   <img alt="Types" src="https://img.shields.io/npm/types/%40ariakit%2Freact?style=flat&color=blue&logo=npm" />
 80 | </div>
 81 | 
 82 | ---
 83 | 
 84 | <details>
 85 |     <summary><a href="https://ark-ui.com/">Ark UI</a> - Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.</summary>
 86 | 
 87 | [![github card](https://github-stats.h3.nu/api/pin/?username=chakra-ui&repo=ark)](https://github.com/chakra-ui/ark)
 88 | </details>
 89 | 
 90 | <div float="left">
 91 |   <img alt="Github stars" src="https://img.shields.io/github/stars/chakra-ui/ark?style=flat&logo=github&color=blue" />
 92 |   <img alt="Downloads per month" src="https://img.shields.io/npm/dm/%40ark-ui%2Freact?style=flat&logo=npm&color=blue" />
 93 |   <img alt="Downloads per year" src="https://img.shields.io/npm/dy/%40ark-ui%2Freact?style=flat&logo=npm&color=blue" />
 94 |   <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/chakra-ui/ark?style=flat&logo=github&color=blue" />
 95 |   <img alt="Created at" src="https://img.shields.io/github/created-at/chakra-ui/ark?style=flat&logoColor=github&color=blue" />
 96 |   <img alt="Github discussions" src="https://img.shields.io/github/discussions/chakra-ui/ark?style=flat&logo=github&color=blue" />
 97 |   <img alt="Github Issues" src="https://img.shields.io/github/issues/chakra-ui/ark?style=flat&logo=github&color=blue" />
 98 |   <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/%40ark-ui%2Freact?style=flat&color=blue" />
 99 |   <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/%40ark-ui%2Freact?style=flat&color=blue" />
100 |   <img alt="Version" src="https://img.shields.io/npm/v/%40ark-ui%2Freact?style=flat&color=blue&logo=npm" />
101 |   <img alt="Language " src="https://img.shields.io/github/languages/top/chakra-ui/ark?style=flat&color=blue" />
102 |   <img alt="Types" src="https://img.shields.io/npm/types/%40ark-ui%2Freact?style=flat&color=blue&logo=npm" />
103 | </div>
104 | 
105 | ---
106 | 
107 | <details>
108 |     <summary><a href="https://mui.com/base-ui/">Base UI</a> - Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.</summary>
109 | 
110 | [![github card](https://github-stats.h3.nu/api/pin/?username=mui&repo=base-ui)](https://github.com/mui/base-ui)
111 | </details>
112 | 
113 | <div float="left">
114 |   <img alt="Github stars" src="https://img.shields.io/github/stars/mui/base-ui?style=flat&logo=github&color=blue" />
115 |   <img alt="Downloads per month" src="https://img.shields.io/npm/dm/@mui/base?style=flat&logo=npm&color=blue" />
116 |   <img alt="Downloads per year" src="https://img.shields.io/npm/dy/@mui/base?style=flat&logo=npm&color=blue" />
117 |   <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/mui/base-ui?style=flat&logo=github&color=blue" />
118 |   <img alt="Created at" src="https://img.shields.io/github/created-at/mui/base-ui?style=flat&logoColor=github&color=blue" />
119 |   <img alt="Github discussions" src="https://img.shields.io/github/discussions/mui/base-ui?style=flat&logo=github&color=blue" />
120 |   <img alt="Github Issues" src="https://img.shields.io/github/issues/mui/base-ui?style=flat&logo=github&color=blue" />
121 |   <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/@mui/base?style=flat&color=blue" />
122 |   <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/@mui/base?style=flat&color=blue" />
123 |   <img alt="Version" src="https://img.shields.io/npm/v/@mui/base?style=flat&color=blue&logo=npm" />
124 |   <img alt="Language " src="https://img.shields.io/github/languages/top/mui/base-ui?style=flat&color=blue" />
125 |   <img alt="Types" src="https://img.shields.io/npm/types/@mui/base?style=flat&color=blue&logo=npm" />
126 | </div>
127 | 
128 | ---
129 | 
130 | <details>
131 |     <summary><a href="https://floating-ui.com/">Floating UI</a> - Floating UI is a library that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.</summary>
132 | 
133 | [![github card](https://github-stats.h3.nu/api/pin/?username=floating-ui&repo=floating-ui)](https://github.com/floating-ui/floating-ui)
134 | </details>
135 | 
136 | <div float="left">
137 |   <img alt="Github stars" src="https://img.shields.io/github/stars/floating-ui/floating-ui?style=flat&logo=github&color=blue" />
138 |   <img alt="Downloads per month" src="https://img.shields.io/npm/dm/%40floating-ui%2Freact?style=flat&logo=npm&color=blue" />
139 |   <img alt="Downloads per year" src="https://img.shields.io/npm/dy/%40floating-ui%2Freact?style=flat&logo=npm&color=blue" />
140 |   <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/floating-ui/floating-ui?style=flat&logo=github&color=blue" />
141 |   <img alt="Created at" src="https://img.shields.io/github/created-at/floating-ui/floating-ui?style=flat&logoColor=github&color=blue" />
142 |   <img alt="Github discussions" src="https://img.shields.io/github/discussions/floating-ui/floating-ui?style=flat&logo=github&color=blue" />
143 |   <img alt="Github Issues" src="https://img.shields.io/github/issues/floating-ui/floating-ui?style=flat&logo=github&color=blue" />
144 |   <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/%40floating-ui%2Freact?style=flat&color=blue" />
145 |   <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/%40floating-ui%2Freact?style=flat&color=blue" />
146 |   <img alt="Version" src="https://img.shields.io/npm/v/%40floating-ui%2Freact?style=flat&color=blue&logo=npm" />
147 |   <img alt="Language " src="https://img.shields.io/github/languages/top/floating-ui/floating-ui?style=flat&color=blue" />
148 |   <img alt="Types" src="https://img.shields.io/npm/types/%40floating-ui%2Freact?style=flat&color=blue&logo=npm" />
149 | </div>
150 | 
151 | ---
152 | 
153 | <details>
154 |     <summary><a href="https://headlessui.com/">Headless UI</a> - Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.</summary>
155 | 
156 | [![github card](https://github-stats.h3.nu/api/pin/?username=tailwindlabs&repo=headlessui)](https://github.com/tailwindlabs/headlessui)
157 | </details>
158 | 
159 | <div float="left">
160 |   <img alt="Github stars" src="https://img.shields.io/github/stars/tailwindlabs/headlessui?style=flat&logo=github&color=blue" />
161 |   <img alt="Downloads per month" src="https://img.shields.io/npm/dm/%40headlessui%2Freact?style=flat&logo=npm&color=blue" />
162 |   <img alt="Downloads per year" src="https://img.shields.io/npm/dy/%40headlessui%2Freact?style=flat&logo=npm&color=blue" />
163 |   <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/tailwindlabs/headlessui?style=flat&logo=github&color=blue" />
164 |   <img alt="Created at" src="https://img.shields.io/github/created-at/tailwindlabs/headlessui?style=flat&logoColor=github&color=blue" />
165 |   <img alt="Github discussions" src="https://img.shields.io/github/discussions/tailwindlabs/headlessui?style=flat&logo=github&color=blue" />
166 |   <img alt="Github Issues" src="https://img.shields.io/github/issues/tailwindlabs/headlessui?style=flat&logo=github&color=blue" />
167 |   <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/%40headlessui%2Freact?style=flat&color=blue" />
168 |   <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/%40headlessui%2Freact?style=flat&color=blue" />
169 |   <img alt="Version" src="https://img.shields.io/npm/v/%40headlessui%2Freact?style=flat&color=blue&logo=npm" />
170 |   <img alt="Language " src="https://img.shields.io/github/languages/top/tailwindlabs/headlessui?style=flat&color=blue" />
171 |   <img alt="Types" src="https://img.shields.io/npm/types/%40headlessui%2Freact?style=flat&color=blue&logo=npm" />
172 | </div>
173 | 
174 | ---
175 | 
176 | <details>
177 |     <summary><a href="https://www.radix-ui.com/">Radix UI</a> - Core building blocks for your design system - Unstyled, accessible, open source React primitives for high-quality web apps and design systems.</summary>
178 | 
179 | [![github card](https://github-stats.h3.nu/api/pin/?username=radix-ui&repo=primitives)](https://github.com/radix-ui/primitives)
180 | </details>
181 | 
182 | <div float="left">
183 |   <img alt="Github stars" src="https://img.shields.io/github/stars/radix-ui/primitives?style=flat&logo=github&color=blue" />
184 |   <img alt="Downloads per month" src="https://img.shields.io/npm/dm/%40radix-ui%2Freact-accordion?style=flat&logo=npm&color=blue" />
185 |   <img alt="Downloads per year" src="https://img.shields.io/npm/dy/%40radix-ui%2Freact-accordion?style=flat&logo=npm&color=blue" />
186 |   <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/radix-ui/primitives?style=flat&logo=github&color=blue" />
187 |   <img alt="Created at" src="https://img.shields.io/github/created-at/radix-ui/primitives?style=flat&logoColor=github&color=blue" />
188 |   <img alt="Github discussions" src="https://img.shields.io/github/discussions/radix-ui/primitives?style=flat&logo=github&color=blue" />
189 |   <img alt="Github Issues" src="https://img.shields.io/github/issues/radix-ui/primitives?style=flat&logo=github&color=blue" />
190 |   <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/%40radix-ui%2Freact-accordion?style=flat&color=blue" />
191 |   <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/%40radix-ui%2Freact-accordion?style=flat&color=blue" />
192 |   <img alt="Version" src="https://img.shields.io/npm/v/%40radix-ui%2Freact-accordion?style=flat&color=blue&logo=npm" />
193 |   <img alt="Language " src="https://img.shields.io/github/languages/top/radix-ui/primitives?style=flat&color=blue" />
194 |   <img alt="Types" src="https://img.shields.io/npm/types/%40radix-ui%2Freact-accordion?style=flat&color=blue&logo=npm" />
195 | </div>
196 | 
197 | > [!NOTE]
198 | > Radix UI is divided into multiple packages, each with its own repository. The above NPM badges is for the `@radix-ui/react-accordion` package only.
199 | 
200 | ---
201 | 
202 | <details>
203 |     <summary><a href="https://react-spectrum.adobe.com/react-aria/index.html">React Aria</a> - Craft world-class accessible components with custom styles. Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</summary>
204 | 
205 | [![github card](https://github-stats.h3.nu/api/pin/?username=adobe&repo=react-spectrum)](https://github.com/adobe/react-spectrum)
206 | </details>
207 | 
208 | <div float="left">
209 |   <img alt="Github stars" src="https://img.shields.io/github/stars/adobe/react-spectrum?style=flat&logo=github&color=blue" />
210 |   <img alt="Downloads per month" src="https://img.shields.io/npm/dm/react-aria-components?style=flat&logo=npm&color=blue" />
211 |   <img alt="Downloads per year" src="https://img.shields.io/npm/dy/react-aria-components?style=flat&logo=npm&color=blue" />
212 |   <img alt="Commits per year" src="https://img.shields.io/github/commit-activity/y/adobe/react-spectrum?style=flat&logo=github&color=blue" />
213 |   <img alt="Created at" src="https://img.shields.io/github/created-at/adobe/react-spectrum?style=flat&logoColor=github&color=blue" />
214 |   <img alt="Github discussions" src="https://img.shields.io/github/discussions/adobe/react-spectrum?style=flat&logo=github&color=blue" />
215 |   <img alt="Github Issues" src="https://img.shields.io/github/issues/adobe/react-spectrum?style=flat&logo=github&color=blue" />
216 |   <img alt="Bundle size min" src="https://img.shields.io/bundlephobia/min/react-aria-components?style=flat&color=blue" />
217 |   <img alt="Bundle size minzip" src="https://img.shields.io/bundlephobia/minzip/react-aria-components?style=flat&color=blue" />
218 |   <img alt="Version" src="https://img.shields.io/npm/v/react-aria-components?style=flat&color=blue&logo=npm" />
219 |   <img alt="Language " src="https://img.shields.io/github/languages/top/adobe/react-spectrum?style=flat&color=blue" />
220 |   <img alt="Types" src="https://img.shields.io/npm/types/react-aria-components?style=flat&color=blue&logo=npm" />
221 | </div>
222 | 
223 | ---
224 | 
225 | # Stats Comparison
226 | 
227 | | Library     | GitHub Stars | NPM Downloads (Monthly/Yearly) | GitHub Issues | GitHub Discussions |
228 | |-------------|--------------|-------------------------------|---------------|--------------------|
229 | | **Ariakit** | ![GitHub Stars](https://img.shields.io/github/stars/ariakit/ariakit?style=flat&logo=github&color=blue) | ![Monthly](https://img.shields.io/npm/dm/%40ariakit%2Freact?style=flat&logo=npm&color=blue) ![Yearly](https://img.shields.io/npm/dy/%40ariakit%2Freact?style=flat&logo=npm&color=blue) | ![GitHub Issues](https://img.shields.io/github/issues/ariakit/ariakit?style=flat&logo=github&color=blue) | ![Discussions](https://img.shields.io/github/discussions/ariakit/ariakit?style=flat&logo=github&color=blue) |
230 | | **Ark UI** | ![GitHub Stars](https://img.shields.io/github/stars/chakra-ui/ark?style=flat&logo=github&color=blue) | ![Monthly](https://img.shields.io/npm/dm/%40ark-ui%2Freact?style=flat&logo=npm&color=blue) ![Yearly](https://img.shields.io/npm/dy/%40ark-ui%2Freact?style=flat&logo=npm&color=blue) | ![GitHub Issues](https://img.shields.io/github/issues/chakra-ui/ark?style=flat&logo=github&color=blue) | ![Discussions](https://img.shields.io/github/discussions/chakra-ui/ark?style=flat&logo=github&color=blue) |
231 | | **Base UI** | ![GitHub Stars](https://img.shields.io/github/stars/mui/base-ui?style=flat&logo=github&color=blue) | ![Monthly](https://img.shields.io/npm/dm/@mui/base?style=flat&logo=npm&color=blue) ![Yearly](https://img.shields.io/npm/dy/@mui/base?style=flat&logo=npm&color=blue) | ![GitHub Issues](https://img.shields.io/github/issues/mui/base-ui?style=flat&logo=github&color=blue) | ![Discussions](https://img.shields.io/github/discussions/mui/base-ui?style=flat&logo=github&color=blue) |
232 | | **Floating UI** | ![GitHub Stars](https://img.shields.io/github/stars/floating-ui/floating-ui?style=flat&logo=github&color=blue) | ![Monthly](https://img.shields.io/npm/dm/%40floating-ui%2Freact?style=flat&logo=npm&color=blue) ![Yearly](https://img.shields.io/npm/dy/%40floating-ui%2Freact?style=flat&logo=npm&color=blue) | ![GitHub Issues](https://img.shields.io/github/issues/floating-ui/floating-ui?style=flat&logo=github&color=blue) | ![Discussions](https://img.shields.io/github/discussions/floating-ui/floating-ui?style=flat&logo=github&color=blue) |
233 | | **Headless UI** | ![GitHub Stars](https://img.shields.io/github/stars/tailwindlabs/headlessui?style=flat&logo=github&color=blue) | ![Monthly](https://img.shields.io/npm/dm/%40headlessui%2Freact?style=flat&logo=npm&color=blue) ![Yearly](https://img.shields.io/npm/dy/%40headlessui%2Freact?style=flat&logo=npm&color=blue) | ![GitHub Issues](https://img.shields.io/github/issues/tailwindlabs/headlessui?style=flat&logo=github&color=blue) | ![Discussions](https://img.shields.io/github/discussions/tailwindlabs/headlessui?style=flat&logo=github&color=blue) |
234 | | **Radix UI** | ![GitHub Stars](https://img.shields.io/github/stars/radix-ui/primitives?style=flat&logo=github&color=blue) | ![Monthly](https://img.shields.io/npm/dm/%40radix-ui%2Freact-accordion?style=flat&logo=npm&color=blue) ![Yearly](https://img.shields.io/npm/dy/%40radix-ui%2Freact-accordion?style=flat&logo=npm&color=blue) | ![GitHub Issues](https://img.shields.io/github/issues/radix-ui/primitives?style=flat&logo=github&color=blue) | ![Discussions](https://img.shields.io/github/discussions/radix-ui/primitives?style=flat&logo=github&color=blue) |
235 | | **React Aria** | ![GitHub Stars](https://img.shields.io/github/stars/adobe/react-spectrum?style=flat&logo=github&color=blue) | ![Monthly](https://img.shields.io/npm/dm/react-aria-components?style=flat&logo=npm&color=blue) ![Yearly](https://img.shields.io/npm/dy/react-aria-components?style=flat&logo=npm&color=blue) | ![GitHub Issues](https://img.shields.io/github/issues/adobe/react-spectrum?style=flat&logo=github&color=blue) | ![Discussions](https://img.shields.io/github/discussions/adobe/react-spectrum?style=flat&logo=github&color=blue) |
236 | 


--------------------------------------------------------------------------------