@lilara/ui-web-react

A comprehensive React UI component library with design tokens and base styles.

Installation

pnpm install @lilara/ui-web-react

Usage

Components

Import React components from the main package:

import { Button, Modal, Card } from '@lilara/ui-web-react'

CSS and Design Tokens

This package provides design tokens and base styles that should be imported in your application:

// Import the complete design system (recommended)
import '@lilara/ui-web-react/base.css'

// Or import individual CSS files if needed
import '@lilara/ui-web-react/reset.css' // CSS reset
import '@lilara/foundations/tokens.css' // Design tokens (colors, spacing, etc.)

The base.css file includes both reset.css and the foundations design tokens, so you typically only need to import base.css.

Design Tokens

The package includes CSS custom properties for:

• Colors: --color-primary-500, --color-neutral-100, etc.
• Spacing: --spacing-xs, --spacing-sm, --spacing-md, etc.
• Typography: --font-size-sm, --font-weight-medium, etc.
• Borders: --border-width-sm, --radius-md, etc.
• Shadows: --shadow-sm, --shadow-lg, etc.

Development

Releasing

To release a new version of this package:

# Dry run to see what would be released
pnpm run release-lilara-ui-web-react -- --dry-run

# Release new version
pnpm run release-lilara-ui-web-react

# Force a patch release
pnpm run release-lilara-ui-web-react -- --force-publish

# First release (for initial setup)
pnpm run release-lilara-ui-web-react -- --first-release

Peer Dependencies

This package requires:

• react >= 18.0.0
• react-dom >= 18.0.0

Used by

• @botonic/webchat-ui - Uses the design tokens and base styles
• Dashboard applications
• Bot applications