{"id":21034712,"url":"https://github.com/reecejohnson/radix-ui-with-styled-components","last_synced_at":"2025-10-04T04:19:15.691Z","repository":{"id":216820979,"uuid":"464420567","full_name":"reecejohnson/radix-ui-with-styled-components","owner":"reecejohnson","description":"Exploring using RadixUI primitives with Styled Components.","archived":false,"fork":false,"pushed_at":"2022-02-28T09:42:38.000Z","size":453,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T10:05:01.199Z","etag":null,"topics":["accessibility","radix-ui","react","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reecejohnson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-02-28T09:39:24.000Z","updated_at":"2023-12-06T15:51:39.000Z","dependencies_parsed_at":"2024-01-13T03:27:45.041Z","dependency_job_id":"7cb13b5d-d691-4cf3-83b5-4c2066d8fdfd","html_url":"https://github.com/reecejohnson/radix-ui-with-styled-components","commit_stats":null,"previous_names":["reecejohnson/radix-ui-with-styled-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reecejohnson%2Fradix-ui-with-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reecejohnson%2Fradix-ui-with-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reecejohnson%2Fradix-ui-with-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reecejohnson%2Fradix-ui-with-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reecejohnson","download_url":"https://codeload.github.com/reecejohnson/radix-ui-with-styled-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254349638,"owners_count":22056386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","radix-ui","react","styled-components","typescript"],"created_at":"2024-11-19T13:08:04.684Z","updated_at":"2025-10-04T04:19:10.638Z","avatar_url":"https://github.com/reecejohnson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Radix UI - Proof of Concept with Styled Components\n\n## What is Radix UI?\n\n\"Unstyled, accessible components for building high‑quality design systems and web apps in React.\"\n\n\n## Accessibility and Radix UI\n\nAccessibility should be something we take very seriously and should be baked into our development process from the start, not just an afterthought.\n\nBuilding 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.\n\nNailing accessibility details and complex logic sucks time away from product feature development.\n\nOut of the box, Radix UI provides:\n\n✅ WAI-ARIA compliant components\n\n✅  Keyboard navigation\n\n✅ Focus management\n\n✅ Screen reader tested\n\n\n![So you think you can build a dropdown?](lib/dropdown.png)\n\n## Developer Experience and Integration with Our Stack\n\nRadix UI is used by engineers at Vercel (creators of Next.js) and Codesandbox.\n\nThey provide a fully typed API in TypeScript purposefully built for React.\n\nAll components share a similar API, allowing for a consistent and predictable developer experience. \n\n✅ Unstyled (Styled Components compatible)\n\n✅ Incremental Adoption - each individual component is it's own package \n\n✅ Detailed documentation and TypeScript Support\n\n\n## Examples\n\nI have put together two examples of different components with Radix UI primitives: Accordion and Tabs.\n\nIgnore the styling here and focus on the accessibility, try using keyboard shortcuts or a screen reader. \n\nTo run the example application:\n\nInstall dependencies:\n```bash\nnpm instal\n```\n\nRun the app:\n```bash\nnpm run dev\n```\n\n\n## Links\n\n[Radix UI Website](https://www.radix-ui.com/)\n\n[Raxix UI Github](https://github.com/radix-ui/primitives)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freecejohnson%2Fradix-ui-with-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freecejohnson%2Fradix-ui-with-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freecejohnson%2Fradix-ui-with-styled-components/lists"}