zeus-ds/README.md

35+ customizable React components for dashboards and modern web applications. Built on top of Tailwind CSS and Radix UI.

<br />
<br />
<h2 align="center">
  <a href="https://zeus-ui.com/"> 
    <picture>
       <source media="(prefers-color-scheme: dark)" srcset="public/images/zeus-logo-dark.svg">
      <source media="(prefers-color-scheme: light)" srcset="public/images/zeus-logo-light.svg">
    <img alt="Zeus Logo" src="public/images/zeus-logo-light.svg" height="50"/>
    </picture>
  </a>
  ZeusUI - Design System
</h2>
<br />
<div align="center">
  <a href="https://zeus-ui.com/docs/getting-started/installation">
    <img alt="Read the documentation" src="https://img.shields.io/badge/Docs-blue?style=flat&logo=readthedocs&color=3b82f6&labelColor=334155&logoColor=f5f5f5" height="20" width="auto">
  </a>
  <a href="https://github.com/zeuslabs/zeus-ui/blob/main/License">
    <img alt="License Apache 2.0" src="https://img.shields.io/badge/license-Apache 2.0-blue.svg?style=flat&color=3b82f6&labelColor=334155 " height="20" width="auto">
  </a>
      <a href="https://twitter.com/intent/follow?screen_name=zeuslabs">
    <img src="https://img.shields.io/badge/Follow-important.svg?color=000000&label=@zeuslabs&logo=X&labelColor=334155&logoColor=f5f5f5" alt="Follow at ZeusLabs" />
  </a>
</div>
<br />
<br />
 
 <h1 align="center">Copy & Paste React components to build <br/>  charts and dashboards</h1>

[Zeus](https://zeus-ui.com/) offers 35+ customizable, accessible React components to build dashboards and modern web applications. Built on top of Tailwind CSS and Radix UI.

<br />

<br />

## Getting Started

See our [Installation Guide](https://zeus-ui.com/docs/getting-started/installation) to get started.

### Quick Setup with Tailwind Preset

```javascript
// tailwind.config.js
import { zeusTailwindPreset } from 'zeus-ui/tailwind'

export default {
  presets: [zeusTailwindPreset],
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
}
```

```javascript
// In your main file (main.tsx or App.tsx)
import 'zeus-ui/styles'
```

For detailed font setup instructions, see our [Font Setup Guide](./docs/font-setup.md).

## Socials

- [Zeus Website](https://zeus-ui.com)
- [Zeus on X (formerly Twitter)](https://twitter.com/zeuslabs)
- [Zeus on Slack](https://zeus-ui.com/slack)

## Community and Contribution

We are always looking for new ideas or other ways to improve Zeus UI. If you have developed anything cool or found a bug, send us a pull request. Check out our Contributor License Agreement [here](https://www.zeus-ui.com/contributors).

## License

[Apache License 2.0](https://github.com/zeuslabs/zeus-ui?tab=Apache-2.0-1-ov-file#readme)

Copyright &copy; 2025 Zeus. All rights reserved.