Installation

Install Pepulux UI in your React + Tailwind CSS v4 project.

1. Install the package

$npm install @pepulux/ui

2. Import styles in your CSS

In your global CSS file, import Tailwind and the Pepulux design tokens:

globals.css

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

3. Use components

Import any component directly from the package:

page.tsx

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

export default function Page() {
  return (
    <div>
      <Badge variant="success">Active</Badge>
      <Input placeholder="Search…" />
      <Button variant="primary">Add record</Button>
    </div>
  );
}

Peer dependencies

Ensure these are installed in your project:

peerDependencies

{
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0",
  "tailwindcss": "^4.0.0"
}