# @pr0gramm/design-system
[![CI](https://github.com/pr0gramm-com/design-system/actions/workflows/CI.yml/badge.svg)](https://github.com/pr0gramm-com/design-system/actions/workflows/CI.yml) [![CD](https://github.com/pr0gramm-com/design-system/actions/workflows/CD.yml/badge.svg)](https://github.com/pr0gramm-com/design-system/actions/workflows/CD.yml) [![version](https://img.shields.io/npm/v/%40pr0gramm/design-system)](https://www.npmjs.com/package/@pr0gramm/design-system) [![downloads](https://img.shields.io/npm/dm/%40pr0gramm/design-system)](https://www.npmjs.com/package/@pr0gramm/design-system) ![License](https://img.shields.io/npm/l/%40pr0gramm%2Fdesign-system)

The react design system that powers pr0gramm.com built with [StyleX](https://stylexjs.com). Assumes `react`, `react-dom` and `react-router`.

Links:
- [Demo/Showcase](https://pr0gramm-com.github.io/design-system)
- [API-Docs](https://pr0gramm-com.github.io/design-system/docs)

## Installation
```sh
npm i @pr0gramm/design-system
```

## Usage with Vite + React
1. Install StyleX + StyleX for Vite: `npm i -D vite-plugin-stylex @stylexjs/stylex`

2. Use StyleX plugin in `vite.config.ts`:
```js
import styleX from "vite-plugin-stylex";

export default defineConfig({
  plugins: [
    react(),
    styleX({
      libraries: ["@pr0gramm/design-system"],
    }),
  ],
});
```

3. Add this to `index.css`: `@stylex stylesheet;`