LSP UI KIT

Installation

To install the package, run:

npm install lsp-uikit
# or (if you are using React 19)
npm install lsp-uikit --force

Usage

Importing Components

You can import components directly from the package:

import { Button } from 'lsp-uikit';

Importing Hooks

Hooks can be imported as follows:

import { useMobile } from 'lsp-uikit/useMobile';
import { useToast } from 'lsp-uikit/useToast';

Importing Utility Functions

Utility functions can be imported as follows:

import { cn } from 'lsp-uikit/cn';

Tailwind Configuration

To use Tailwind with this library, extend your Tailwind config:

1. Import the package's Tailwind base configuration:

   // tailwind.config.js
   module.exports = {
     ...baseConfig,
     content: [
       ...,
       './node_modules/lsp-uikit/**/*.{js,ts,jsx,tsx}',
     ],
     presets: [require('lsp-uikit/tailwind-config.js')],
   };

2. Ensure you have Tailwind installed in your project:

   npm install tailwindcss postcss autoprefixer -D

Importing Global Styles

To apply global styles, import the CSS files in your main entry file:

/* global.css */
@import 'lsp-uikit/styles.css';

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

@layer base {
    ...
}

This will ensure that the library's styles are applied properly.