@root-axis/design-system
Version:
Yep! Just another Design System out there in the wild, wild web 🤠
93 lines (66 loc) • 4.39 kB
Markdown
# Root Axis Design System 🌳📐
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
Install the package with npm:
```bash
npm install @root-axis/design-system
```
## Components
These 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](https://design-system.rodrigoantunes.dev/components/accordion) | ✅ |
| Alert | 🛠️ |
| [Avatar](https://design-system.rodrigoantunes.dev/components/avatar) | ✅ |
| [Badge](https://design-system.rodrigoantunes.dev/components/badge) | ✅ |
| Breadcrumb | 🛠️ |
| [Button](https://design-system.rodrigoantunes.dev/components/button) | ✅ |
| Card | 🛠️ |
| [Checkbox](https://design-system.rodrigoantunes.dev/components/checkbox) | ✅ |
| Input | 🛠️ |
| Label | 🛠️ |
| Progress | 🛠️ |
| Select | 🛠️ |
| Separator | 🛠️ |
| Skeleton | 🛠️ |
| Switch | 🛠️ |
| Tabs | 🛠️ |
| Textarea | 🛠️ |
| Toast | 🛠️ |
| Toggle | 🛠️ |
| Tooltip | 🛠️ |
<br />
## Usage
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.
### Table of Contents
- [React](#react)
- [Next.js](#nextjs)
- [Vue](#vue)
- [Solid](#solid)
- [Svelte](#svelte)
---
### React
- [Docs](https://design-system.rodrigoantunes.dev/guides/react)
- [Example](https://root-axis-react.vercel.app/)
- [Repo](https://github.com/rodrigoant/root-axis-examples/tree/main/packages/react)
### Next.js
- [Docs](https://design-system.rodrigoantunes.dev/guides/next)
- [Example](https://root-axis-next.vercel.app/)
- [Repo](https://github.com/rodrigoant/root-axis-examples/tree/main/packages/next)
### Vue
- [Docs](https://design-system.rodrigoantunes.dev/guides/vue)
- [Example](https://root-axis-vue.vercel.app/)
- [Repo](https://github.com/rodrigoant/root-axis-examples/tree/main/packages/vue)
### Solid
- [Docs](https://design-system.rodrigoantunes.dev/guides/solid)
- [Example](https://root-axis-solid.vercel.app/)
- [Repo](https://github.com/rodrigoant/root-axis-examples/tree/main/packages/solid)
### Svelte
- [Docs](https://design-system.rodrigoantunes.dev/guides/svelte)
- [Example](https://root-axis-svelte.vercel.app/)
- [Repo](https://github.com/rodrigoant/root-axis-examples/tree/main/packages/svelte)