@odcc/ui

A modern, tree-shakeable component library built with Lit, Vite, and TypeScript.

Installation

npm install @odcc/ui
# or
pnpm add @odcc/ui
# or
yarn add @odcc/ui

Usage

Import Everything

import { ButtonComponent, CardComponent } from '@odcc/ui';

Tree-Shakeable Imports (Recommended)

Import only what you need for better bundle size:

// Import individual components
import { ButtonComponent } from '@odcc/ui/components/button';
import { CardComponent } from '@odcc/ui/components/card';
import { ThemeToggleComponent } from '@odcc/ui/components/theme-toggle';

// Import all components
import { ButtonComponent, CardComponent } from '@odcc/ui/components';

// Import core utilities
import { signal, computed, Task } from '@odcc/ui/core';

// Import styles (required for proper theming)
import '@odcc/ui/styles';
// Or import specific styles
import '@odcc/ui/styles/global.scss';

Register Components

Components are automatically registered as custom elements. Just use them in your HTML:

<ui-button variant="primary">Click me</ui-button>
<ui-card title="Card Title">Card content</ui-card>
<ui-theme-toggle></ui-theme-toggle>

With Styles

Make sure to import the styles for proper theming and colors:

import '@odcc/ui/styles';
import { ButtonComponent } from '@odcc/ui/components/button';

Components

• Button - @odcc/ui/components/button
• Card - @odcc/ui/components/card
• Theme Toggle - @odcc/ui/components/theme-toggle

Core Utilities

• Signals - @odcc/ui/core (re-exports from @lit-labs/signals)
• Task - @odcc/ui/core (re-exports from @lit/task)

Dark/Light Mode

The library includes built-in dark/light mode support. Use the <ui-theme-toggle> component or manually toggle:

document.documentElement.setAttribute('data-theme', 'dark');
// or
document.documentElement.classList.add('dark');

Framework Integration

For detailed integration guides, see FRAMEWORK_INTEGRATION.md

Quick Start

Angular:

import '@odcc/ui/styles';
import '@odcc/ui/components/button/button.component';

// Add CUSTOM_ELEMENTS_SCHEMA to your module

React:

import '@odcc/ui/styles';
import '@odcc/ui/components/button/button.component';

// Use in JSX
<ui-button variant="primary">Click Me</ui-button>

Vue.js:

<script setup>
import '@odcc/ui/styles';
import '@odcc/ui/components/button/button.component';
</script>

<template>
  <ui-button variant="primary">Click Me</ui-button>
</template>

License

MIT