This is a modern, open-source design system built with Web Components. It delivers reusable, accessible, and scalable UI components to create consistent and performant web experiences across any framework.
Install the package with npm:
npm install @root-axis/design-systemThese components are built to ensure consistency, scalability, and ease of integration across projects.
Each component is:
- Framework-agnostic: Can be used with any modern framework or even vanilla JavaScript.
- Customizable: Easily themeable with light and dark modes to match your design needs.
- Accessible: Developed with a focus on inclusivity and usability for all users.
This collection is continually evolving to include more components and features to enhance your development workflow.
| Component | Status |
|---|---|
| Accordion | ✅ |
| Alert | 🛠️ |
| Avatar | ✅ |
| Badge | ✅ |
| Breadcrumb | 🛠️ |
| Button | ✅ |
| Card | 🛠️ |
| Checkbox | ✅ |
| Input | 🛠️ |
| Label | 🛠️ |
| Progress | 🛠️ |
| Select | 🛠️ |
| Separator | 🛠️ |
| Skeleton | 🛠️ |
| Switch | 🛠️ |
| Tabs | 🛠️ |
| Textarea | 🛠️ |
| Toast | 🛠️ |
| Toggle | 🛠️ |
| Tooltip | 🛠️ |
Below is a guide on how to use it with some of the most popular frameworks in 2024. Whether you're working with React, Angular, or newer frameworks like Qwik or Astro, Root Axis provides a seamless and consistent developer experience.