Radix Primitives are designed without any predefined styles and are compatible with any styling solution, empowering you with full control over the styling process.
For displaying icons that align with specific requirements, I've incorporated icons from alternative sources. Feel free to use icons from any source that suits your preferences.
npm install @radix-ui/react-icons
npm install @heroicons/react
npm install lucide-react
I've utilized icons from Radix Icons, Heroicons, and Lucide React. To learn more about how to employ these icons, you can visit their official websites for detailed guidance on usage and integration.
You have complete authority over every facet of styling, even functional styles. Take, for instance, a Dialog Overlay, which won't inherently span the entire viewport. It's your prerogative to incorporate these styles along with any presentation styles.
All components and their constituents accept a className prop. This prop will be transferred to the underlying DOM element, enabling you to utilize it in CSS as you would anticipate.
In scenarios where components exhibit state, that state is exposed through data attributes. For instance, when an Accordion Item is expanded, it includes a data-state="open" attribute.