Pepulux Playbook

Production-ready UI component library. Token-driven, multi-brand, built for React 18+ and Tailwind CSS v4.

Docs: playbook.pepulux.com

Install

npm install @pepulux/playbook lucide-react

Peer dependencies: react >=18, react-dom >=18, lucide-react >=0.400.0

Setup

1. Add CSS variables to your globals.css

@import "tailwindcss";

:root {
  /* Brand tokens — swap these to match your product */
  --brand:        #7f56d9;
  --brand-hover:  #6941c6;
  --brand-subtle: #f4f0fd;
  --brand-text:   #6941c6;

  /* Neutral scale */
  --n-50:  #fafafa;
  --n-100: #f4f4f5;
  --n-200: #e4e4e7;
  --n-300: #d1d1d6;
  --n-400: #a0a0ab;
  --n-500: #70707b;
  --n-600: #52525b;
  --n-700: #3f3f46;
  --n-800: #27272a;
  --n-900: #18181b;

  /* Surfaces */
  --bg-page:   #ffffff;
  --border:    #e4e4e7;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
}

2. Add package to Tailwind content scan

// tailwind.config.ts  (or CSS @source for Tailwind v4)
export default {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@pepulux/playbook/dist/**/*.{js,mjs}",
  ],
}

3. Use components

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

export default function App() {
  return (
    <Button variant="primary" size="md">
      Get started
    </Button>
  );
}

Multi-brand swap

All components use CSS variables. Changing --brand recolors everything instantly — no rebuild needed:

document.documentElement.style.setProperty("--brand",        "#EA580C");
document.documentElement.style.setProperty("--brand-hover",  "#c2410c");
document.documentElement.style.setProperty("--brand-subtle", "#fff3ef");
document.documentElement.style.setProperty("--brand-text",   "#c2410c");

Try the live demo at playbook.pepulux.com.

License

This package follows a commercial licensing model:

| Plan | Usage | Price | |-------------|-----------------------------------------|----------------------------| | Community | Open-source / personal projects | Free | | Pro | Commercial projects | LKR 29,900 / project / yr | | Enterprise | Multiple products + priority support | LKR 89,900 / project / yr |

Purchase a license → playbook.pepulux.com/pricing

Questions: [email protected]