https://github.com/reecejohnson/radix-ui-with-styled-components
Exploring using RadixUI primitives with Styled Components.
https://github.com/reecejohnson/radix-ui-with-styled-components
accessibility radix-ui react styled-components typescript
Last synced: 10 months ago
JSON representation
Exploring using RadixUI primitives with Styled Components.
- Host: GitHub
- URL: https://github.com/reecejohnson/radix-ui-with-styled-components
- Owner: reecejohnson
- Created: 2022-02-28T09:39:24.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-28T09:42:38.000Z (over 4 years ago)
- Last Synced: 2025-04-03T10:05:01.199Z (over 1 year ago)
- Topics: accessibility, radix-ui, react, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 442 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Radix UI - Proof of Concept with Styled Components
## What is Radix UI?
"Unstyled, accessible components for building high‑quality design systems and web apps in React."
## Accessibility and Radix UI
Accessibility should be something we take very seriously and should be baked into our development process from the start, not just an afterthought.
Building fully accessible and compliant UI components is challenging and time-consuming - especially when looking at more complex elements such as dropdown menus, modals, tabs, dialogs etc.
Nailing accessibility details and complex logic sucks time away from product feature development.
Out of the box, Radix UI provides:
✅ WAI-ARIA compliant components
✅ Keyboard navigation
✅ Focus management
✅ Screen reader tested
## Developer Experience and Integration with Our Stack
Radix UI is used by engineers at Vercel (creators of Next.js) and Codesandbox.
They provide a fully typed API in TypeScript purposefully built for React.
All components share a similar API, allowing for a consistent and predictable developer experience.
✅ Unstyled (Styled Components compatible)
✅ Incremental Adoption - each individual component is it's own package
✅ Detailed documentation and TypeScript Support
## Examples
I have put together two examples of different components with Radix UI primitives: Accordion and Tabs.
Ignore the styling here and focus on the accessibility, try using keyboard shortcuts or a screen reader.
To run the example application:
Install dependencies:
```bash
npm instal
```
Run the app:
```bash
npm run dev
```
## Links
[Radix UI Website](https://www.radix-ui.com/)
[Raxix UI Github](https://github.com/radix-ui/primitives)