paneui
Getting started

Introduction

React components you own and edit.

paneui is a shadcn registry, not an npm package. Add the @paneui namespace to your project once, then the CLI copies each component and its dependencies into your codebase. From then on the code is yours.

Use it for app interfaces. Start from a template when you want the pieces already wired together.

Principles

Open code
Every item installs into your project as source through the shadcn CLI. To change a component, edit its file.
Native desktop style
Sizes and surfaces are tuned for dense app screens rather than marketing pages.
Accessible primitives
Interactive parts sit on headless primitives, so focus, keyboard and ARIA behaviour come built in.
Motion with restraint
Animations settle without bounce, and each one becomes a cross-fade when the user prefers reduced motion.
Tokens only
Components read theme tokens, never raw colours, so a theme or accent change restyles everything at once. Lint rules enforce it.

What's inside

Foundations7Forms32Overlays15Display25Navigation18Text11Motion8Data5Agents22Charts11Blocks24Templates5

Stack

  • Headless primitives for interactive parts (the base-nova style).
  • Tailwind CSS 4 with CSS-variable tokens declared in @theme inline.
  • motion/react for springs and layout animation.
  • The shadcn CLI for distribution, and an icon set shipped as @paneui/icons.

Quick start

Add the namespace (see Installation), then install the theme and a first component.

pnpm dlx shadcn@latest add @paneui/theme @paneui/button
InstallationBrowse components