Lsp-uikit

📦 Installation

To install the package, run:

npm install lsp-uikit

🚀 Usage

Components

You can import components from their specific path: lsp-uikit/{component}

import { Button } from 'lsp-uikit/button';

Hooks

Hooks can be imported as follows:

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

Utilities

Utility functions can be imported as follows:

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

⚙️ Tailwind Setup

Make sure you have the required PostCSS plugins installed:

npm install -D @tailwindcss/postcss autoprefixer tw-animate-css

To use @apply in local css files, use @reference for your global.css:

/* local.css */
@reference '#globals.css';

.custom-class {
  @apply ...;
}

For the convenience of importing, first add it to imports in package.json:

{
  "imports": {
    "#globals.css": "path-to-global.css"
  }
}

🎨 Global Styles

To apply global styles, import the package's styles in your main CSS file:

/* global.css */
@import 'tailwindcss';
@import 'tw-animate-css';

/* Import all CSS variables from the package */
@import 'lsp-uikit/variables.css';

@layer base {
	...
}

To compile the tailwind library classes correctly, specify it in the sourse directive:

/* global.css */
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'lsp-uikit/variables.css';

/* Define the source files from the package */
@source "../node_modules/lsp-uikit/**/*.{js,ts,jsx,tsx}";

✏️ Overriding Styles

To override the default theme variables, use inline @theme declarations:

/* global.css */
@theme inline {
  --color-background: #fff;
  /* Add your custom variables here */
}