React Aria
React Aria is a library of unstyled React components and hooks that help you build accessible, high-quality UI components for your application or design system. It provides components for common UI patterns, with accessibility, internationalization, interactions, and behavior built in, allowing you to focus on your unique design and styling rather than rebuilding these challenging aspects. React Aria has been meticulously tested across a wide variety of devices, interaction modalities, and assistive technologies to ensure the best experience possible for all users. React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. All components are extensively tested using many popular screen readers and devices.
Learn more
Ariakit
Ariakit is an open source library featuring unstyled, primitive components designed to help developers build accessible web applications with React. It provides a collection of styled examples that can be copied and pasted into applications. Ariakit's components are designed with accessibility in mind, supporting features like keyboard navigation and screen reader compatibility. It also offers integration examples with tools like Next.js App Router and React's useTransition for building responsive and accessible UIs. Developers can explore the documentation, component guides, and API references to get started.
Learn more
Headless UI
Headless UI is a library of completely unstyled, fully accessible UI components designed to integrate seamlessly with Tailwind CSS. It offers a range of components for both React and Vue. These components are built with accessibility in mind, adhering to WAI-ARIA design patterns and providing full keyboard navigation support. Because they are unstyled by default, developers have complete control over the look and feel, allowing for easy customization to match any design system. Headless UI components expose state information through data attributes and render props, enabling developers to conditionally apply styles based on component states such as focus, open, selected, or disabled. This approach ensures that the components are both flexible and accessible, making them suitable for building custom, high-quality user interfaces. With Headless UI, developers can create complex UI elements like modals, dropdowns, and tabs without sacrificing accessibility or design flexibility.
Learn more
Base UI
From the creators of Radix, Material UI, and Floating UI, Base UI is an unstyled React component library for building accessible user interfaces. Our focus is on accessibility, performance, and developer experience. Our goal is to provide a complete set of open-source UI components, with a delightful developer experience, in a sustainable way.
Features:
- Headless: Base UI components are unstyled, don’t bundle CSS, and don’t prescribe a styling solution.
- Accessible: Poor accessibility can make your application difficult to navigate for all users, not just for users with disabilities.
- Composable: Component APIs are fully open, so you have direct access to each node, you can easily add or remove parts, and you can wrap them however you prefer.
Learn more
