PlankUI

Beautiful by default, yours to shape. PlankUI is an open-source React component library for Tailwind CSS v4, on Radix or Base UI. You copy the components into your project, so you own the code. Every colour, radius and font is a token, so six themes and five component styles come from one file.

Installation

npx plankui@latest init
npx plankui@latest add button select dialog

Why PlankUI

  • You own the source: plain React and Tailwind files in your project.
  • Built for AI agents: an MCP server gives Cursor, Claude Code and VS Code the real source and props.
  • Accessible by default: focus, keyboard and screen readers handled.
  • Six themes, five styles, light and dark.

Components

Actions

  • Button: A keycap with a real bottom edge. It lifts on hover and sinks when pressed.
  • Segmented control: One choice from a short set. A raised pill slides to the chosen option.
  • Dropdown menu: A menu of actions with shortcuts, checkable items and nested submenus.
  • Button group: Buttons fused into one row, for ranges and paired actions.
  • Copy button: Copies a value and confirms with a check for a moment.

Forms

  • Input: A text field with optional leading and trailing slots. Pair it with Field for label, hint and error.
  • Textarea: A multi-line field that shares the input's border, focus ring and error states.
  • Select: A listbox for picking one value, with groups, labels and disabled options.
  • Checkbox: A binary or indeterminate choice, for lists where many items can be on.
  • Radio group: One choice from a visible set. RadioCard wraps each option in a selectable panel.
  • Switch: An on and off setting that applies immediately.
  • Slider: Pick a value or a range by dragging. Pass two values for a range.
  • Combobox: A select with a search field, for option lists too long to scan.
  • Input OTP: One-time code entry with auto-advance, paste support and grouped cells.
  • Password input: A password field with a show and hide key and an optional strength meter.

Overlays

  • Dialog: A modal window that traps focus and returns it to the trigger when closed.
  • Popover: Rich, interactive content anchored to a trigger.
  • Tooltip: A short label on hover or focus, with an optional key hint. Wrap your app in TooltipProvider.
  • Sheet: A panel that slides in from an edge, for forms and details that keep page context.
  • Alert dialog: A modal that interrupts to confirm an important or irreversible action.

Feedback

  • Toast: Brief, non-blocking messages. Mount Toaster once and call toast() from anywhere.
  • Alert: An inline message about the state of a page or section.
  • Progress: Linear progress for a task, and Meter, a cell meter for quotas.
  • Skeleton: A shimmering placeholder that holds the shape of content while it loads.
  • Spinner: An indeterminate loading indicator that inherits the text colour.

Display

  • Card: A hairline-bordered surface with header, content and a footer strip.
  • Avatar: An image with initials as fallback, a presence dot, and an overlapping group.
  • Badge: A compact label for status, version or category.
  • Kbd: A keyboard key, for shortcuts in menus, tooltips and docs.
  • Separator: A hairline between groups of content, horizontal or vertical.
  • Table: Ruled data table parts with selectable rows and a sortable header button.

Navigation

  • Tabs: Switch between views in place. Two variants: a tray with a sliding pill, and a line.
  • Accordion: Stacked sections that expand one or many at a time.
  • Breadcrumb: Where the current page sits in the hierarchy, with links back up.
  • Pagination: Move through pages of results, with gaps for long ranges.

Charts

  • Bar chart: Rounded bars on a track. Bars grow in; hover or focus a bar for its value.
  • Sparkline: A small trend line for tables, stats and cards.
  • Line chart: Lines with a y axis and legend. Dash a series for targets or last period. Hover or arrow through points.
  • Bar list: Ranked rows with a bar behind each name, for top pages, sources or countries.
  • Stage bars: Horizontal bars split into stages, such as a pipeline per rep or sleep phases per night.
  • Chart card: The shell every chart card shares: title, number and change, the chart on a white panel, a footer.
  • Steps card: Daily steps against a dashed goal line. Days over the goal are lit.
  • Most active days: Seven columns for the week with the busiest day lit and named.