JSPM – @pezeshk-book/ui-kit@1.0.4

Package Exports

@pezeshk-book/ui-kit
@pezeshk-book/ui-kit/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@pezeshk-book/ui-kit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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:

Import the CSS in your global styles:

@import "@pezeshk-book/ui-kit/ui-kit.css";

Create a tailwind.config.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:

Add Tailwind directives to your global CSS:

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

Use the configuration wrapper:

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

@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 (^_^)