open-index/open-npm huggingface dataset:
npm package: @saharaai/ui
Description: ![](https://github.com/user-attachments/assets/8fcce90e-dbfb-4293-b382-aa9fd22b5b3e)
Latest version: 0.3.293

# Sahara UI System
![](https://github.com/user-attachments/assets/8fcce90e-dbfb-4293-b382-aa9fd22b5b3e)

[Figma Design](https://www.figma.com/design/ANMdWFh8oTbPo3CtS8jk5i/Sahara-design-system-1.5---In-service-?node-id=74-4601&p=f&m=dev)

[Storybook](https://storybook.saharaa.info/)

## Sahara UI Library

### 1. install package
```bash
yarn install @saharaai/ui
```
or
```bash
npm install @saharaai/ui
```

### 2. import necessary files
```javascript
import { SaButton, SaUIContextProvider } from '@saharaai/ui'
import '@saharaai/ui/build/main.less'

```

### 3. Use in tsx
```tsx
<SaUIContextProvider>
  <SaButton>Click me</SaButton>
  <SaButton type="primary">Click me</SaButton>
</SaUIContextProvider>
```

## Optional Tailwind Plugins

This package provides several Tailwind CSS plugins that you can use in your projects. These plugins include font styles and color configurations.

1. Make sure you have Tailwind CSS installed in your project.

2. Import the plugins in your `tailwind.config.js`:

```javascript
// Option 1: Import all plugins at once
module.exports = {
  // ...your other tailwind config
  plugins: [
    // This will import all plugins (font, and fontV2)
    ...require('@saharaai/ui/tailwind-plugins'),
  ],
}

// Option 2: Import specific plugins individually
module.exports = {
  // ...your other tailwind config
  plugins: [
    require('@saharaai/ui/tailwind-plugins/font'),
    require('@saharaai/ui/tailwind-plugins/fontV2'),
  ],
}
```

### Available Plugins

#### Color Plugin

Adds color CSS variables based on the theme.value.json file to your project.

```javascript
// tailwind.config.js
require('@saharaai/ui/colors.json')

theme: {
    extend: {
      colors
    }
}
```

#### Font Plugin

Adds utility classes for typography with consistent sizing, weights, and line heights.

```javascript
require('@saharaai/ui/tailwind-plugins/font')
```

#### FontV2 Plugin

An updated version of the font plugin with additional font family configurations.

```javascript
require('@saharaai/ui/tailwind-plugins/fontV2')
```

#### Shortcut Plugin

An shortcut of utilities(Still need discussion)

```javascript
require('@saharaai/ui/tailwind-plugins/shortcut')
```