# PlankUI > Beautiful by default, yours to shape. PlankUI is an open-source (MIT) React component library for Tailwind CSS v4, on Radix or Base UI. Components are copied into your project as source. 43 components, six themes, five component styles, light and dark mode, a CLI (npx plankui@latest) and an MCP server (@plankui/mcp). Install: `npx plankui@latest init`, then `npx plankui@latest add `. ## Docs - [Let's begin](https://plankui.com/docs): Everything you need to go from nothing to a working PlankUI project: what it is, how to install it, how your AI agent fits in, and where colour and type come from. - [Installation](https://plankui.com/docs/installation): Install PlankUI in any React 19 and Tailwind CSS v4 project with the plankui CLI, or copy the files by hand. Guides for Vite, Next.js and React Router. - [Theming](https://plankui.com/docs/theming): Six themes and five component styles in PlankUI: set them with data-theme and data-style, switch light and dark mode, and change the accent. - [Color](https://plankui.com/docs/color): PlankUI colour tokens: semantic OKLCH colours for surfaces, text, lines, the accent, status and charts, with dark mode built in. - [Typography](https://plankui.com/docs/typography): PlankUI typography: display, body and code font roles set by each theme, on Tailwind's type scale. - [MCP server](https://plankui.com/docs/mcp): The PlankUI MCP server gives Cursor, Claude Code, VS Code, Codex, Windsurf, Zed and Gemini CLI the real source, props and usage of every component. - [Made with PlankUI badge](https://plankui.com/docs/badge): Add the Made with PlankUI badge to your site or README, in dark, light or mark-only versions. - [Components](https://plankui.com/docs/components): 43 accessible React components for Tailwind CSS v4: buttons, forms, overlays, feedback, display and navigation, ready to copy. ## Components - [Button](https://plankui.com/docs/components/button): A keycap with a real bottom edge. It lifts on hover and sinks when pressed. - [Segmented control](https://plankui.com/docs/components/segmented): One choice from a short set. A raised pill slides to the chosen option. - [Dropdown menu](https://plankui.com/docs/components/dropdown-menu): A menu of actions with shortcuts, checkable items and nested submenus. - [Input](https://plankui.com/docs/components/input): A text field with optional leading and trailing slots. Pair it with Field for label, hint and error. - [Textarea](https://plankui.com/docs/components/textarea): A multi-line field that shares the input's border, focus ring and error states. - [Select](https://plankui.com/docs/components/select): A listbox for picking one value, with groups, labels and disabled options. - [Checkbox](https://plankui.com/docs/components/checkbox): A binary or indeterminate choice, for lists where many items can be on. - [Radio group](https://plankui.com/docs/components/radio-group): One choice from a visible set. RadioCard wraps each option in a selectable panel. - [Switch](https://plankui.com/docs/components/switch): An on and off setting that applies immediately. - [Slider](https://plankui.com/docs/components/slider): Pick a value or a range by dragging. Pass two values for a range. - [Dialog](https://plankui.com/docs/components/dialog): A modal window that traps focus and returns it to the trigger when closed. - [Popover](https://plankui.com/docs/components/popover): Rich, interactive content anchored to a trigger. - [Tooltip](https://plankui.com/docs/components/tooltip): A short label on hover or focus, with an optional key hint. Wrap your app in TooltipProvider. - [Toast](https://plankui.com/docs/components/toast): Brief, non-blocking messages. Mount Toaster once and call toast() from anywhere. - [Alert](https://plankui.com/docs/components/alert): An inline message about the state of a page or section. - [Progress](https://plankui.com/docs/components/progress): Linear progress for a task, and Meter, a cell meter for quotas. - [Skeleton](https://plankui.com/docs/components/skeleton): A shimmering placeholder that holds the shape of content while it loads. - [Spinner](https://plankui.com/docs/components/spinner): An indeterminate loading indicator that inherits the text colour. - [Card](https://plankui.com/docs/components/card): A hairline-bordered surface with header, content and a footer strip. - [Avatar](https://plankui.com/docs/components/avatar): An image with initials as fallback, a presence dot, and an overlapping group. - [Badge](https://plankui.com/docs/components/badge): A compact label for status, version or category. - [Kbd](https://plankui.com/docs/components/kbd): A keyboard key, for shortcuts in menus, tooltips and docs. - [Separator](https://plankui.com/docs/components/separator): A hairline between groups of content, horizontal or vertical. - [Tabs](https://plankui.com/docs/components/tabs): Switch between views in place. Two variants: a tray with a sliding pill, and a line. - [Accordion](https://plankui.com/docs/components/accordion): Stacked sections that expand one or many at a time. - [Combobox](https://plankui.com/docs/components/combobox): A select with a search field, for option lists too long to scan. - [Input OTP](https://plankui.com/docs/components/input-otp): One-time code entry with auto-advance, paste support and grouped cells. - [Sheet](https://plankui.com/docs/components/sheet): A panel that slides in from an edge, for forms and details that keep page context. - [Alert dialog](https://plankui.com/docs/components/alert-dialog): A modal that interrupts to confirm an important or irreversible action. - [Table](https://plankui.com/docs/components/table): Ruled data table parts with selectable rows and a sortable header button. - [Breadcrumb](https://plankui.com/docs/components/breadcrumb): Where the current page sits in the hierarchy, with links back up. - [Pagination](https://plankui.com/docs/components/pagination): Move through pages of results, with gaps for long ranges. - [Button group](https://plankui.com/docs/components/button-group): Buttons fused into one row, for ranges and paired actions. - [Bar chart](https://plankui.com/docs/components/bar-chart): Rounded bars on a track. Bars grow in; hover or focus a bar for its value. - [Password input](https://plankui.com/docs/components/password-input): A password field with a show and hide key and an optional strength meter. - [Copy button](https://plankui.com/docs/components/copy-button): Copies a value and confirms with a check for a moment. - [Sparkline](https://plankui.com/docs/components/sparkline): A small trend line for tables, stats and cards. - [Line chart](https://plankui.com/docs/components/line-chart): Lines with a y axis and legend. Dash a series for targets or last period. Hover or arrow through points. - [Bar list](https://plankui.com/docs/components/bar-list): Ranked rows with a bar behind each name, for top pages, sources or countries. - [Stage bars](https://plankui.com/docs/components/stage-bars): Horizontal bars split into stages, such as a pipeline per rep or sleep phases per night. - [Chart card](https://plankui.com/docs/components/chart-card): The shell every chart card shares: title, number and change, the chart on a white panel, a footer. - [Steps card](https://plankui.com/docs/components/steps-card): Daily steps against a dashed goal line. Days over the goal are lit. - [Most active days](https://plankui.com/docs/components/active-days-card): Seven columns for the week with the busiest day lit and named. ## Optional - [Full component reference](https://plankui.com/llms-full.txt): install command, usage and props for every component - [Source on GitHub](https://github.com/VectorLabsHQ/plankui) - [CLI on npm](https://www.npmjs.com/package/plankui) - [MCP server on npm](https://www.npmjs.com/package/@plankui/mcp)