Pepulux Playbook
An open-source React component library built from the Pepulux UI V8.0 Figma specification. Token-driven, multi-brand, and production-ready out of the box.
What is Pepulux Playbook?
Pepulux Playbook is the official design system powering every Pepulux OS product — from temple management software to the partner dashboard. It ships 74 components that are pixel-perfect to the Figma V8.0 specification, with every prop name intentionally matching the Figma property name.
The library is built on a token layer — 4 CSS custom properties control brand identity. Swap --brand, --brand-hover, --brand-subtle, and --brand-text and the entire product rebrands instantly — no component changes required.
Currently powering Pepulux OS (purple) and Omkaarya (orange) via npm install @pepulux/ui.
Advantages
Ship faster
74 production-ready components built from Figma V8.0 specs. Focus on your core product — we handle the UI.
Multi-brand by design
Swap 4 CSS variables and the entire UI rebrands. Pepulux purple, Omkaarya orange — same components, zero duplication.
Built from Figma
Every prop name, variant, size, and state maps 1:1 to the Figma V8.0 spec. Designers and engineers speak the same language.
Cross-team collaboration
Prop names match Figma property names exactly — hierarchy, destructive, supporting text. No translation layer.
TypeScript-first
Every component is fully typed. Autocomplete works for every prop value including Figma variant names.
Tailwind v4 native
No custom CSS runtime. All tokens are CSS custom properties consumed by Tailwind v4's new @theme system.