@hubtype/lilara-ui-web

Framework-agnostic web components built with Lit for the Hubtype design system.

Features

• 🎨 Design System Integration: Uses tokens from @lilara/foundations
• ♿ Accessible: Full keyboard navigation and WAI-ARIA patterns
• 🎯 Framework Agnostic: Works with React, Angular, Vue, or vanilla JS
• 🔧 Type Safe: Full TypeScript support
• 📦 Tree Shakeable: ES modules for optimal bundle size

Installation

pnpm install @hubtype/lilara-ui-web lit

Note: lit is a peer dependency. @lilara/foundations is automatically installed.

Quick Start

// 1. Import design tokens
import '@lilara/foundations/tokens.css'

// 2. Import components
import '@hubtype/lilara-ui-web'

// 3. Use in your app
<ht-button intent="primary">Click me</ht-button>
<ht-table .data=${data} .columns=${columns}></ht-table>

See USAGE.md for framework-specific examples (React, Angular, vanilla JS).

Components

• ht-button - Button with loading states, multiple variants
• ht-spinner - Loading indicator
• ht-table - Data table with TanStack Table integration, selection, actions, keyboard navigation

Full API reference: See Storybook autodocs for each component.

Documentation

• USAGE.md - Framework setup, installation, basic usage
• ARCHITECTURE.md - Component development patterns and best practices
• CSS_APPROACH.md - Why we use .css.ts files with Lit
• PARTS_API.md - Customization guide using CSS Shadow Parts
• FIXES.md - Historical context on Shadow DOM issues and solutions
• Storybook - Interactive component demos and API reference

Development

# Build
pnpm nx build lilara-ui-web

# Test
pnpm nx test lilara-ui-web

# Storybook (port 6006)
pnpm nx storybook lilara-ui-web

Contributing

When implementing new components, follow the patterns in ARCHITECTURE.md.

License

MIT