@pezeshk-book/ui-kit

React components for faster and simpler web development. Build your own design system, or start with Pezeshkbook Design system.

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

Installation

using npm:

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

React Js Config

Add the Tailwind directives to your CSS global

@tailwind base;
@tailwind components;
@tailwind utilities;

Next Js Config

Add the Tailwind directives to your global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config will be generated automatically

for more configs you can visit - tailwind Documentation

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.

@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

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:

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.

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