React componentsfor Web and Native

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

182 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.”

Web + React Native

One design,two platforms.

Web and Native components read the same tokens. Each keeps the feel of its own platform.

Open the Native showcase

Desktop density
Touch sizes
Shared tokens
Dark mode

Icons

Icons drawnon the same grid.

Three styles share every name. Swap the import and the whole app follows.

RoundedPuffyOutline

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.”

Install

Start withone line.

Works in any React 19 project with Tailwind CSS 4.

$ npx @taimatsu/paneui@latest init

Installation guide

Let’s get started.

Free and open source, under MIT.

Browse components Read the docs