Components for React, built on shadcn/ui. They are styled with Tailwind CSS v4 on the theme tokens a shadcn project already has, so they take the project's colours, radii and dark mode without any setup of their own.
This is the web collection. PanelUI's React Native library is a different package with a different skill; nothing here runs in React Native.
Before writing any UI
- Read components.md to see what exists. Use a component from it before writing a custom one.
- Read the component's own file in
components/before using it. It has the import line, every part and every prop, read from the source. Do not guess a prop. - Check how the project installs: a
components.jsonwith a@paneluiregistry means components are copied in with the shadcn CLI;panelui-webinpackage.jsonmeans they are imported from the package. See setup.md.
Rules
- Colour is a role, never a value. Every component that has a colour takes
color="primary" | "info" | "success" | "warning" | "destructive". Do not pass hex values or Tailwind palette classes for a component's own colour. See theming.md. - Pick the role by meaning.
successfor good,warningfor attention,destructivefor bad,infofor neutral emphasis,primaryotherwise. Do not give every component on a screen the same colour. - Give data its own text. Labels, counts and names in a component come from the project's data. Do not reuse the sample text from these files.
- Compound parts and Server Components. In a file with
"use client", write parts with a dot:Planet.Globe. A Server Component cannot read a property off a client module, so there every part is imported by name:PlanetGlobe.Kpiis not a client module and can be dotted anywhere. - Lead with a frame. A component shown as a panel sits in a frame: a muted band with a title, round an inner bordered card. See the examples in each component's file.
- Label what a screen reader needs. Components take
label, and where a value is shown,valueText. Pass them: the defaults are generic.