Styles that compose

Choose your look, surface, mode, and accent.

Lyra’s optional style layers keep a solid base available while looks such as shadcn and Material can be combined with surface presets. Theme inputs also cover type, radius, elevation, chart colors, contrast, and motion preferences.

Example

Import the base theme and one optional look, then select it on a scope.

import '@aceshooting/lyra-ui/theme.css';
import '@aceshooting/lyra-ui/looks/shadcn.css';
import '@aceshooting/lyra-ui/surfaces/glass.css';
import { setLyraStyle } from '@aceshooting/lyra-ui/theme.js';

setLyraStyle({ look: 'shadcn', surface: 'glass', mode: 'system',
  accent: 'emerald', density: 'comfortable' });

Browse components · Read guide (English)