Usage Guide

How to consume components, swap themes, and build layouts with Lemmo UI.

Importing Components

Import primitives directly from the package entrypoint:

import { Button, Card, CardHeader, CardTitle, Badge, Alert } from 'lemmoui'

Applying a Theme

Set the data-theme attribute on the HTML root or app wrapper:

// App.tsx
import { Button, Card, CardHeader, CardTitle } from 'lemmoui'
import 'lemmoui/styles.css'
import 'lemmoui/themes/neon.css'

export default function App() {
  return (
    <html data-theme="neon" className="dark">
      <body>
        <Card>
          <CardHeader>
            <CardTitle>Lemmo Studio</CardTitle>
          </CardHeader>
          <Button variant="default">Launch Canvas</Button>
        </Card>
      </body>
    </html>
  )
}

Nested Scoped Themes

Because themes are pure CSS custom properties, you can scope different themes to specific sections of your app:

<div data-theme="midnight" className="dark">
  {/* This entire section adopts the Midnight theme */}
  <Sidebar />
</div>

<div data-theme="neon" className="dark">
  {/* The main canvas adopts the high-contrast Lemmo Neon theme */}
  <CanvasWorkspace />
</div>

Dynamic Theme Switching

You can use the built-in ThemeProvider and useTheme hook provided by lemmoui:

import { ThemeProvider, useTheme, ThemeSwitcher } from 'lemmoui'

function Header() {
  const { theme, setTheme, isDark, toggleDark } = useTheme()
  return (
    <header>
      <ThemeSwitcher />
    </header>
  )
}