# mjo-litui A collection of Web Components built with Lit 3 to create reusable, themeable interfaces with no framework dependencies. **Status: alpha (0.7.0). The component library is under active development, but it is already very advanced and should not experience breaking changes. Until version 1.0.0, minor issues will be fixed, some functionalities will be added, and some styles may be modified.** ## Features - Web Components with Shadow DOM and encapsulated styles - Powerful theming system via `` (light/dark + overrides by variables and components) - Overlays (modal, drawer, notifications) with reactive controllers - TypeScript types included and Vite support - Consistent `mjo-` prefix for all elements ## Extended Documentation See the full guide, theming, and per-component documentation at: - [docs/README.md](docs/README.md) ## Installation Use npm (or your favorite package manager): ```bash npm i mjo-litui ``` Requirements: Node.js >= 22 LTS (Vite 5). ## Quick Usage Recommended: import only the components you use so bundlers can tree-shake easily. ### Lit example ```ts import { LitElement, html } from "lit"; import { customElement } from "lit/decorators.js"; import "mjo-litui/mjo-theme"; import "mjo-litui/mjo-button"; @customElement("example-quick") export class ExampleQuick extends LitElement { render() { return html` Accept `; } } ``` Optional full import (registers every component): ```ts import "mjo-litui"; ``` ## Themes (`mjo-theme`) The `` component applies CSS variables globally or locally and allows overrides for `light`/`dark` modes and palettes. ### Minimal global theme ```ts import 'mjo-litui/mjo-theme'; ``` ### Override colors (Lit component) ```ts import { LitElement, html } from "lit"; import { customElement } from "lit/decorators.js"; import "mjo-litui/mjo-theme"; import "mjo-litui/mjo-button"; import type { MjoThemeConfig } from "mjo-litui/types/mjo-theme"; const themeOverrides: Partial = { light: { primaryColor: { default: "#7C3AED", hover: "#6D28D9" }, secondaryColor: { default: "#7dc717", hover: "#B83768" }, borderColor: { default: "#E5E7EB" }, }, colors: { success: "#4caf50", error: "#f44336", }, }; @customElement("example-theme-override") export class ExampleThemeOverride extends LitElement { render() { return html`

Primary

Secondary `; } } ``` Notes: - `scope="global"` injects a `