WL UI Kit Storybook - Installation & Usage Guide

Quick Installation

0. Prerequisite

• NodeJS >= 21.1.0
• TailwindCSS >= v3

1. Install the package

npm install wl-ui-kit

2. Import styling from Tailwind

All components use Tailwind CSS, so projects must have Tailwind configured. If you haven't set it up yet, follow the guide below:

Tailwind installation guide (Vite):

https://tailwindcss.com/docs/installation/using-vite

Add this to your main CSS file (tailwind v4):

@import "tailwindcss";
@source "../node_modules/wl-ui-kit";
/* Adjust the path depending on your project structure */

Add this to your tailwind.config.js (tailwind v3):

module.exports = {
  content: [
      "./src/**/*.{html,js,jsx,ts,tsx}",
      "./node_modules/wl-ui-kit/**/*.{html,js,jsx,ts,tsx}"],
  // ...
}

3. Example usage with React

import { Button, Checkbox } from 'wl-ui-kit';

function YourComponent() {
  return (
    <div>
      <Button variant="primary" size="medium">
        Click me
      </Button>
      
      <Checkbox label="Accept terms" checked={true} />
    </div>
  );
}