@lusopoint/luso-ui
v1.0.4
Published
The official React component library and design system for the LusoPoint ecosystem.
Readme
🪐 LusoUI
LusoUI is the official React component library and design system for the LusoPoint ecosystem. Built with React, Tailwind CSS, and Framer Motion, it provides a unified, highly-polished, and accessible set of UI primitives.
✨ Features
- Unified Design Language: Shares exact design tokens, typography (Plus Jakarta Sans), and glassmorphism utilities across all LusoPoint apps.
- Tailwind Preset: Ships with a ready-to-use Tailwind preset so consuming apps don't have to rewrite configurations.
- Animated by Default: Micro-interactions and fluid layout transitions powered by Framer Motion.
- Theming Built-in: Includes CSS variable definitions for Light, Dark, and multiple tenant-level accent themes (Celestial Gold, Tech Sapphire, Eco Emerald, Crimson Ruby, Amethyst Violet).
- Fully Typed: Written in strict TypeScript for excellent IDE autocomplete and safety.
📦 Installation
To install the package in your target application, run:
npm install @lusopoint/luso-ui
Peer Dependencies LusoUI relies on a few peer dependencies. Make sure your app has them installed:
npm install react react-dom tailwindcss framer-motion lucide-react
🚀 Setup & Configuration
To get LusoUI working properly, you need to configure your app's Tailwind setup to scan the library's files and use its core CSS variables.
1. Update tailwind.config.js
In your consuming app, import the LusoUI preset and add the node_modules path to the content array so Tailwind doesn't purge the library's classes.
/** @type {import('tailwindcss').Config} */
export default {
// Inherit LusoPoint's colors, fonts, and shadows
presets: [require("@lusopoint/luso-ui/preset")],
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
// Crucial: Tell Tailwind to scan LusoUI components!
"./node_modules/@lusopoint/luso-ui/dist/**/*.js",
],
theme: {
extend: {},
},
plugins: [],
};2. Import Global Styles
Import the library's core CSS variables at the top of your app's main CSS file (usually src/index.css).
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Inject LusoUI Light/Dark/Theming Variables */
@import "@lusopoint/luso-ui/style.css";
/* Apply your base app resets here */
@layer base {
body {
background-color: var(--background);
color: var(--on-surface);
font-family: "Plus Jakarta Sans", sans-serif;
-webkit-font-smoothing: antialiased;
}
}💻 Usage
Once configured, you can import and use any component directly from the package:
import { Button, Card, CardTitle, Badge } from "@lusopoint/luso-ui";
import { ShieldAlert } from "lucide-react";
export default function SecurityPanel() {
return (
<Card variant="glass" className="max-w-md mx-auto mt-10">
<CardTitle className="flex items-center gap-2 mb-4">
<ShieldAlert className="text-primary" />
LusoIAM Security
</CardTitle>
<p className="text-sm text-on-surface-variant mb-6">
Manage your enterprise identity and access controls.
</p>
<div className="flex justify-between items-center">
<Badge status="operational" label="System Secure" />
<Button variant="primary">Access Logs</Button>
</div>
</Card>
);
}🎨 Theming
LusoUI uses CSS variables to handle theming. By default, the application will use the Celestial Gold theme.
You can override the primary accent colors globally by appending one of the following classes to your app's <html> or <body> tag:
theme-sapphire(Blue)theme-emerald(Green)theme-ruby(Red)theme-amethyst(Purple)
To toggle Dark Mode, simply apply the dark class to your <html> tag.
🛠️ Development
If you are contributing to LusoUI:
- Clone the repository.
- Install dependencies:
npm install - Make your component changes in
src/components/. - Ensure you export new components in
src/index.ts. - Build the library:
npm run build
Built with precision for the LusoPoint ecosystem.