npm package: @pezeshk-book/ui-kit
Description: UIkit components for use in React or Next.js.
Author: PezeshkBook Company
Latest version: 1.0.7

<p align="center" style="margin-top: 50px">
  <a href="https://pezeshkbook.com/" target="_blank"><img src="https://pezeshkbook.com/images/header/logo.svg" width="250" alt="PezeshkBook Logo" /></a>
</p>

<a href="https://reactjs.org/" target="_blank">React</a> components for faster and simpler web development. Build your own design system, or start with <a href="https://pezeshkbook.com/" target="_blank">Pezeshkbook</a> Design system.

This project was built by React and tailwind for using in React or Next.js projects.

## Installation
using npm:

```bash
npm install --save @pezeshk-book/ui-kit
```

## Configuration

PF-Kit supports both Tailwind CSS v3 and v4. Choose the approach that matches your Tailwind version:

### Tailwind CSS v4 (Recommended)

For Tailwind v4, use the CSS-first approach:

1. Import the CSS in your global styles:
```css
@import "@pezeshk-book/ui-kit/ui-kit.css";
```

2. Create a `tailwind.config.js`:
```js
const withUiKitV4 = require('@pezeshk-book/ui-kit/withUiKitV4');

module.exports = withUiKitV4({
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // your content paths
  ],
});
```

### Tailwind CSS v3 (Legacy Support)

For Tailwind v3, use the traditional approach:

1. Add Tailwind directives to your global CSS:
```css
@tailwind base;
@tailwind components; 
@tailwind utilities;
```

2. Use the configuration wrapper:
```js
const withUiKit = require('@pezeshk-book/ui-kit/withUiKit');

module.exports = withUiKit({
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // your content paths
  ],
  theme: {
    // your theme config
  },
});
```

> **Migration Guide**: If you're upgrading from v3 to v4, see our [Migration Guide](./MIGRATION_GUIDE.md) for detailed instructions.

### Add Your Own Fonts

in your tailwind.config.js file there are 4 types of font (light, regular, medium and bold) which will be use in Text component.\
the type props in Text component will handle these 4 fonts.

### Change Package Font in React.js & Next.js

First you need to create a folder named fonts in your public directory, then paste your fonts there. After that, add these lines of code in your CSS global.

```css
@font-face {
  font-family: 'mediumFont';
  src: url('{relative path to your added font}') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'regularFont';
  src: url('{relative path to your added font}') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'boldFont';
  src: url('{relative path to your added font}') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'lightFont';
  src: url('{relative path to your added font}') format('truetype');
  font-display: swap;
}
```

### Add @pezeshk-book/ui-kit config to tailwind.config.js

```js
const withUiKit = require('@pezeshk-book/ui-kit/withUiKit');

module.exports = withUiKit({
    content: [
        //...
    ],
    theme: {
        // Add your fonts which you already added to global styles
        fontFamily: {
            'family-regular': 'regularFont',
            'family-medium': 'mediumFont',
            'family-bold': 'boldFont',
            'family-light': 'lightFont',
        },
        extend: {
            // Add new colors or custom system colors
            colors: {
                'blue': {
                    50: '#F5F7FF',
                    100: '#EAEEFF',
                    200: '#D5DEFF',
                    300: '#C1CDFF',
                    400: '#ACBDFF',
                    500: '#97ACFF',
                    600: '#798ACC',
                    700: '#5B6799',
                    800: '#3C4566',
                    900: '#1E2233',
                    950: '#0F111A',
                },
            },
            // You can add other configurations here
            lineHeight: {
                //...
            },
        },
    },
});

```

## Usage

Here is a quick example to get you started, **it's all you need**:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Div, Text } from '@pezeshk-book/ui-kit';

function App() {
  return (
      <Div>
          <Text>This is a very simple example:</Text>
          <Button variant="filled">Hello World</Button>
      </Div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

## Examples
You can check the storybook in the [pbkit.pezeshkbook.com](https://pbkit.pezeshkbook.com).

and you are ready to go, just like that (^_^)