Playful UI components built with Tailwind CSS and React.

Status		Amount
success	ken99@example.com	$316.00
success	Abe45@example.com	$242.00
processing	Monserrat44@example.com	$837.00
success	Silas22@example.com	$874.00
failed	carmella@example.com	$721.00

0 of 5 row(s) selected.

Data Table

1 Component

Date Picker

1 Component

Dialog

19 Components

Drawer

1 Component

Dropdown Menu

16 Components

Form

1 Component

Hover Card

1 Component

Input

41 Components

Input OTP

1 Component

Label

1 Component

Menubar

1 Component

Pagination

12 Components

Popover

8 Components

Progress

3 Components

Radio Group

18 Components

Resizable

1 Component

Scroll Area

1 Component

Select

29 Components

Separator

1 Component

Sheet

1 Component

Sidebar

1 Component

Skeleton

2 Components

Slider

17 Components

Sonner

5 Components

Switch

17 Components

Name	Email	Location	Status	Balance
Alex Thompson	alex.t@company.com	San Francisco, US	Active	$1,250.00
Sarah Chen	sarah.c@company.com	Singapore	Active	$600.00
James Wilson	j.wilson@company.com	London, UK	Inactive	$650.00
Maria Garcia	m.garcia@company.com	Madrid, Spain	Active	$0.00
David Kim	d.kim@company.com	Seoul, KR	Active	-$1,000.00
Total				$2,500.00

Basic table

Table

20 Components

Tabs

21 Components

Textarea

21 Components

Toggle

3 Components

Toggle Group

1 Component

Tooltip

12 Components

MCP

Browse, search and install Playful UI components from your AI editor with the shadcn MCP server. Components install with the registry's theme tokens and CSS variables.

1. Add the registry to your components.json

{
  "registries": {
    "@playful": "https://ui.playful.mustaquenadim.com/r/{name}.json"
  }
}

2. Add the shadcn MCP server to your editor

Copy and paste the code into .mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

3. Ask your assistant, e.g. “Add the accordion from the @playful registry”.