1.0.16-alpha

@itilite/lumina-ui

Itilite Lumina Design System UI Components - A React component library built with TypeScript, Ant Design, and Tailwind CSS.

Installation

npm install @itilite/lumina-ui
# or
pnpm add @itilite/lumina-ui
# or
yarn add @itilite/lumina-ui

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react antd

Usage

Prerequisites

This component library requires Tailwind CSS to be set up in your consuming application. The components use Tailwind utility classes and will not be styled without it.

Setting up Tailwind CSS in your app

1. Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Configure Tailwind to scan your app (you don't need to scan the component library):

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    // No need to scan node_modules - component utilities are pre-compiled
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add Tailwind directives to your main CSS file:

/* app.css or index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Important: The component library includes only the Tailwind utilities it uses. Your app must provide the base/reset styles via @tailwind base.

Importing Components

You can import components individually (recommended for tree-shaking):

import { Button } from '@itilite/lumina-ui/button';
import { Checkbox } from '@itilite/lumina-ui/checkbox';
import '@itilite/lumina-ui/styles.css'; // Import component styles

Or import all components from the main entry point:

import { Button, Checkbox } from '@itilite/lumina-ui';
import '@itilite/lumina-ui/styles.css'; // Import component styles

Button Component

import { Button } from '@itilite/lumina-ui/button';

function App() {
  return (
    <Button onClick={() => console.log('Clicked!')}>
      Click Me
    </Button>
  );
}

Checkbox Component

import { Checkbox } from '@itilite/lumina-ui/checkbox';

function App() {
  return (
    <Checkbox onChange={(checked) => console.log(checked)}>
      Accept Terms
    </Checkbox>
  );
}

Requirements

• Tailwind CSS: This library requires Tailwind CSS to be configured in your consuming application
• React: 18+
• Ant Design: 5.13.1

Available Components

• Button - Customizable button component
• Checkbox - Checkbox input component

More components coming soon!

TypeScript Support

This package is built with TypeScript and includes type definitions out of the box.

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• React 18+

License

MIT

Contributing

For bugs and feature requests, please visit our GitHub repository.

Maintainer

Itilite