Usage

Learn the basics of working with Pepulux UI components.

Quickstart

After installation, import any component and use it immediately — no provider or theme wrapper needed.

page.tsx

import { Button, Badge, Input } from "@pepulux/ui";

export default function Page() {
  return (
    <div className="flex items-center gap-3 p-6">
      <Badge variant="success">Active</Badge>
      <Input placeholder="Search…" label="Search" />
      <Button variant="primary">Save</Button>
    </div>
  );
}

Global setup

Components work in isolation but the following globals improve experience for all users.

Viewport meta tag

Pepulux UI is mobile-first. Add the responsive viewport tag so touch scaling works correctly on all devices.

<meta name="viewport" content="initial-scale=1, width=device-width" />

CSS tokens in your global stylesheet

All components read from CSS custom properties. Import the Pepulux token sheet once — it defines the default Pepulux purple brand. To use Omkaarya (orange), override the 4 brand vars on :root or any ancestor element.

globals.css

@import "tailwindcss";
@import "@pepulux/ui/styles";

/* Optional: Omkaarya brand override */
.brand-omkaarya {
  --brand:       #EA580C;
  --brand-hover: #C2410C;
  --brand-subtle:#FFF7ED;
  --brand-text:  #C2410C;
}

Font (optional)

Pepulux UI renders in whatever font your project provides. To match the Figma spec (Inter), add:

layout.tsx

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Component anatomy

Every component follows the same conventions derived from the Figma V8.0 spec:

variant / hierarchy

Maps to Figma's Hierarchy property — primary, secondary, tertiary, link-color, link-gray.

size

sm (36px) | md (40px) | lg (44px) — matches Figma Size property.

destructive

Boolean. Maps to Figma's Destructive=True property. Shows red border or red button.

state

disabled + loading props cover all Figma states: Default, Disabled, Loading.

leadingIcon / trailingIcon

Pass any ReactNode. Figma Icon=True variants use these slots.

hint / errorText

Supporting text below the field. errorText activates destructive state automatically.

Multi-brand switching

Set the 4 brand CSS variables at runtime to switch any subtree to a different brand — no re-render, no bundle split.

brand-switch.ts

const BRANDS = {
  pepulux: {
    "--brand":       "#7f56d9",
    "--brand-hover": "#6941c6",
    "--brand-subtle":"#f4f0fd",
    "--brand-text":  "#6941c6",
  },
  omkaarya: {
    "--brand":       "#EA580C",
    "--brand-hover": "#C2410C",
    "--brand-subtle":"#FFF7ED",
    "--brand-text":  "#C2410C",
  },
} as const;

export function setBrand(name: keyof typeof BRANDS) {
  const vars = BRANDS[name];
  for (const [k, v] of Object.entries(vars)) {
    document.documentElement.style.setProperty(k, v);
  }
}

See the live demo on the Brand tokens page.