React componentsfor app interfaces

The source lands in your app, ready to edit.

Get started Browse components

Release reviewWorking

Release reviewAgent

Can you check the release before I ship?

Tests pass. One step needs your OK.

Deploy to production?Build 248 from main

Run the tests, Done
Check bundle size, Done
Write release notes, Done

Install

Start withone line.

Works in any React 19 project with Tailwind CSS 4.

$ npx @taimatsu/paneui@latest init

Installation guide

181 components and blocks

One library,many kinds of UI.

Can you check the release before I ship?

Tests pass. One step needs your OK.

Deploy to production?Build 248 from main

Run the tests, Done
Check bundle size, Done
Write release notes, Done

PaneUI

“Every part of these windows is a live component. Press anything.”

Icons

Icons drawnon the same grid.

Two styles share every name. Swap the file and the whole app follows.

RoundedEmoji

Browse icons

Open code

The source is yours.Edit any line.

The CLI copies each component into your project. Nothing hides in a package.

CLI reference

Plain TSX
One command
Update on demand
Lives in your repo

app

layout.tsx

page.tsx

components

button.tsx

card.tsx

dialog.tsx

tabs.tsx

paneui.json

components/ui/button.tsxtsx

import { cva } from "class-variance-authority"
import { cn } from "@/lib/utils"

const button = cva("h-8 rounded-lg px-3", {
  variants: {
    tone: {
      solid: "bg-primary",
      ghost: "hover:bg-secondary",
    },
  },
})

export function Button({ tone, ...props }) {
  return (
    <button
      className={cn(button({ tone }))}
      {...props}
    />
  )
}

PaneUI

“Made for apps people keep open all day.”

Let’s get started.

Free and open source, under MIT.

Browse components Read the docs