@playaos/ui-default

Shadcn-style React components for PlayaOS — vanilla Tailwind utility classes, no third-party theme required.

Choosing the right package

| Package | Style | When to use | |---------|-------|-------------| | @playaos/ui | Unstyled | Bring your own design system | | @playaos/ui-default | Vanilla Tailwind | Start here, override freely | | @playaos/ui-kit | PlayaOS branded | Drop-in PlayaOS look and feel |

Install

npm install @playaos/ui-default @playaos/ui

Tailwind must be configured in your project. This package ships only utility classes — no compiled CSS.

Usage

import { PlanLimitAlert, DataTable } from "@playaos/ui-default";

All components accept a className prop for overrides (merged with tailwind-merge).

Tailwind preset

Extend your Tailwind config with the PlayaOS preset to get CSS variable-aware color and radius tokens:

// tailwind.config.js
import preset from "@playaos/ui-default/tailwind.preset";

export default {
  presets: [preset],
  content: [
    // include ui-default so Tailwind scans its classes
    "./node_modules/@playaos/ui-default/dist/**/*.js",
  ],
};

Components

| Component | Description | |-----------|-------------| | AdminShellLayout | Responsive sidebar shell (requires DaisyUI) | | DataTable | Sortable, paginated data table | | DataTableColumnHeader | Sortable column header with dropdown | | DataTablePagination | Pagination controls bar | | DataTableViewOptions | Column visibility toggle dropdown | | DraggableRow | Drag-and-drop table row | | DirectoryProfileCard | Member profile card | | PlanLimitAlert | Plan upgrade prompt |

Note: AdminShellLayout ships from @playaos/ui with DaisyUI classes already applied. Add DaisyUI to your Tailwind config to use it.