Documentation

Explore the Lemon UI components and learn how to use the proxy styling engine.

Interactive button component with variants.

<LemonButton variant="primary">
  Click Me
</LemonButton>

Container for content with a consistent style.

This is a sample card content.

<LemonCard title="Hello">
  Content goes here
</LemonCard>

Dynamic styling via Proxy.

Use the Lemon object to generate styles dynamically. It supports camelCase transformation and configuration-based values.

import { Lemon } from "@/lib/lemon";

const styles = {
  ...Lemon.background("primary"),
  ...Lemon.padding(20),
  ...Lemon.borderRadius(12)
};

Type-safe font sizing.

Heading 1

Heading 2

Body text

<div style={{ ...Lemon.fontSize(32) }}>
  Large Text
</div>