sira

English | 中文

Sira is an open source, highly customizable and accessible design system, which currently provides TailwindCSS component class name library.

Our primary goal is to create a system that can be used to build a wide variety of websites and apps, while providing a consistent and inclusive user experience to our end users. In addition, the design system and component library should be easy to use for developers and designers.

• Website - Read more about Sira.
• Playground - Quick way to edit & play with Sira in codepen.

Features

• Customizable by your own brand
• Light/dark mode design
• Tailwindcss Plugin Components

Installation

NPM

npm install @sira-ui/tailwind

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sira-ui/tailwind/dist/css/styles.css"/>
<script src="https://cdn.tailwindcss.com"></script>

Usage

<button class="btn solid success">Success</button>

Principle

• use postcss & tailwind compiler to convert basic css code with tailwind classes to tailwindcss plugin.
• use css combination selector to organize components layer.
• theme colorify by root element css style variables, and also overrided by each layer.

Development

Clone the project

git clone https://github.com/riazer-lab/sira.git

Go to the project directory

cd sira

Install dependencies

pnpm install

Start the server

pnpm run dev

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

If you have ideas for how we could improve this readme or the project in general, let us know or contribute some!

Stack with ♥

Thanks to these following projects for providing the additional dependencies & inspirations that helps us create this project.

• @riccox/colorify
• NodeJS
• TailwindCSS
• React
• Nextra
• TurboRepo
• Postcss
• chroma-js
• Ripple UI
• daisyUI

Feedback

If you have any feedback, please reach out to me at [email protected]

Maintainers

• Ricco Xie

License

Apache License 2.0