@lyrnui/core

Core utilities, types, and styles for the LyrnUI component library.

Installation

npm install @lyrnui/core

Usage

Importing Styles

import '@lyrnui/core/styles';

Using Utilities

import { cn, DEFAULT_THEME } from '@lyrnui/core';

// Combine CSS classes
const className = cn('base-class', condition && 'conditional-class');

// Access theme constants
const primaryColor = DEFAULT_THEME.colors.primary[500];

Using Types

import { BaseComponentProps, ThemeConfig } from '@lyrnui/core';

interface MyComponentProps extends BaseComponentProps {
  // Your component props
}

API Reference

Utilities

cn(...classes)

Combines CSS class names conditionally.

import { cn } from '@lyrnui/core';

const className = cn(
  'base-class',
  condition && 'conditional-class',
  { 'object-class': true }
);

Constants

DEFAULT_THEME

Default theme configuration with colors, spacing, typography, and animations.

COMPONENT_SIZES

Predefined component size configurations.

CSS_VARIABLES

CSS custom properties for theming.

Types

BaseComponentProps

Base interface for all LyrnUI components.

ThemeConfig

Theme configuration interface.

Theming

LyrnUI uses CSS custom properties for theming. You can override them in your CSS:

:root {
  --lyrnui-primary-500: #your-color;
  --lyrnui-radius-md: 0.5rem;
}

Dark Mode

The core package includes dark mode support. Enable it by adding the dark class to your HTML element:

document.documentElement.classList.add('dark');

License

MIT