Review
- 2024-08-22 07:58
[!Summary] A component that doesn’t have a UI, but has the functionality. Headless component libraries have some powerful state, logic and data management tools that do not enforce any UI structure.
一、Introduction #
Headless UI is a collection of unstyled, fully accessible UI components that you can use to build your own custom user interfaces. It is a set of React components that provide the core functionality and accessibility features without any default styles, allowing you to customize the appearance and behavior to fit your design requirements.
The key features of Headless UI include:
- Accessibility: The components are designed with accessibility in mind, following best practices for keyboard navigation, ARIA attributes, and screen reader support.
- Unstyled: Headless UI components do not come with any default styles, allowing you to easily integrate them into your own design system and apply your own styles.
- Composable: The components are designed to be highly composable, meaning you can combine and extend them to create more complex UI elements.
- Flexible: Headless UI provides a set of primitives that you can use as building blocks to create your own custom components and interactions.
- Customizable: The API and behavior of the components can be easily customized to fit your specific use cases.
Headless UI libraries:
- Radix-UI - low-level UI component library with a focus on accessibility, customization and developer experience that can be adopted incrementally since every component is a different NPM package
- Headless UI - works great with TailwindCSS but has 10 components, however it supports both VUE and React
- Reakit - comes with hooks and components built with composition in mind
- Reach UI - created by React Router team
- React Aria - created by Adobe - library of hooks that provides primitives for your custom styling
- Ark UI https://ark-ui.com/ Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.