mcpField
P
panelui-web

panelui-web

github.com/panel-uiOther89740 installsUpdated today
Repository

About panelui-web

A collection of web components for React, built on shadcn/ui and Tailwind CSS v4. It is intended for projects using that stack and pairs theme-aware components with guidance on selection, props and accessibility labels.

Key features

  1. 01React components built on shadcn/ui
  2. 02Tailwind CSS v4 theme tokens
  3. 03Copy-based or package imports
  4. 04Component props and usage guidance
  5. 05Screen reader labeling guidance

Use cases

  1. 01Build web interfaces in React projects
  2. 02Reuse project colors and dark mode
  3. 03Check component props before implementation
  4. 04Add accessibility labels to components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/panel-ui/panelui --skill panelui-web

After installing, type/panelui-webin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

components.md
components/
alert-dialog.md
alert.md
avatar.md
bar-picker.md
button-group.md
button.md
canvas.md
card.md
command-dock.md
day-grid.md
dialog.md
feedback.md
flow.md
frame.md
input.md
kpi.md
label.md
lane-board.md
menu.md
message.md
not-found.md
planet.md
prompt.md
range-meter.md
rolling-number.md
select.md
sheet.md
soundwave.md
stat.md

Details

From the project README

PanelUI for the web

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

  1. Read components.md to see what exists. Use a component from it before writing a custom one.
  2. 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.
  3. Check how the project installs: a components.json with a @panelui registry means components are copied in with the shadcn CLI; panelui-web in package.json means 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. success for good, warning for attention, destructive for bad, info for neutral emphasis, primary otherwise. 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. Kpi is 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.

Comments

Markdown supported