Sahara UI System

Figma Design

Storybook

Sahara UI Library

1. install package

yarn install @saharaai/ui

or

npm install @saharaai/ui

2. import necessary files

import { SaButton, SaUIContextProvider } from '@saharaai/ui'
import '@saharaai/ui/build/main.less'

3. Use in 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:

// 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.

// 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.

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

FontV2 Plugin

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

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

Shortcut Plugin

An shortcut of utilities(Still need discussion)

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