PixelPlay UI

A scalable React component library with production-ready components, layouts, and themes for SaaS products.

Built by Dennis Isaac · Live Docs

Installation

npm install pixelplay

yarn add pixelplay

pnpm add pixelplay

Requirements

• React 18+
• Tailwind CSS 4+
• TypeScript 5+ (recommended)

Quick Start

import { Button, Badge, Avatar, Input } from "pixelplay";

export function MyComponent() {
  return (
    <div>
      <Avatar name="Dennis Isaac" size="md" />
      <Badge color="purple">New</Badge>
      <Button color="primary" variant="solid">Get Started</Button>
    </div>
  );
}

Theme Setup

Add the PixelPlay theme tokens to your global CSS:

@import "pixelplay/styles";

:root {
  /* Override theme tokens as needed */
  --primary: oklch(55% 0.22 264);
}

Components

| Component | Description | |-----------|-------------| | Button | Versatile button with variants, sizes, and states | | Input | Text input with labels, validation, and add-ons | | Badge | Status and label badges with colors | | Avatar | User avatars with initials, images, and status | | Card | Content container with header, body, and footer | | Toggle | Boolean toggle switch | | Checkbox | Checkbox with variants and groups | | Select | Dropdown select with search | | Slider | Range slider with dual handles | | Tooltip | Contextual tooltips | | Modal | Dialog modals | | Spinner | Loading indicators | | Tag | Dismissable tags | | Progress | Progress bars and circular indicators |

View all components →

Versioning

PixelPlay UI follows Semantic Versioning:

• Patch (x.x.1) — bug fixes and minor adjustments
• Minor (x.1.0) — new components, non-breaking additions
• Major (1.0.0) — breaking API changes

See CHANGELOG.md for the full release history.

License

MIT © Dennis Isaac