@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/base.css' // Design tokens (colors, spacing, etc.) + CSS reset

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