Make anything buttery.

A React design system with the layout and motion to match, for web and desktop apps, and checks that hold every screen to it.

Get started Browse components

npx create-buttery my-app

It makes the app in the folder you're in. Installation has the other ways in.

Where to start

A new app

npx create-buttery my-app starts one from a template, with the provider, the styles, the lint configs and the layout checks already in place, for the web and the desktop.

Installation

An existing app

npx buttery init adds the packages, the provider and the styles, then move one screen at a time onto buttery's components, with the layout check watching.

Make an existing app buttery

With a coding agent

AGENTS.md, the skill and the MCP server give an agent the rules and buttery's components, and every check says how to fix what it finds.

Using coding agents

What's new

1.0.0Latest

The docs in the packages

October 25, 2026

@butteryui/core ships every page of the docs as Markdown, with llms.txt and llms-full.txt, and @butteryui/react ships manifest.json, the examples as files and what the MCP server answers from, so an agent in an app reads the installed version's docs from node_modules, offline. buttery create and buttery init point an app's agents at them.
Stylelint fails a var(--bt-*) of a name that buttery and the project don't declare, naming the nearest token. Development warnings end with a link to the docs. An OverflowCluster in a section's actions folds and unfolds with the page.
LayoutGuard checks a rule or two per frame, so a check doesn't hold up what the page is doing, and the overlap rule is seven times cheaper. The agent evaluation ran its seven tasks with two coding agents, and what it found is fixed: a layout check under load no longer waits on an animation that reduced motion cut short, and a Grid with responsive columns warns when nothing above it is a size container.

0.11.0

The command line

October 24, 2026

npx create-buttery my-app --template dashboard starts an app from a template in any folder, with its lint configs, Playwright specs, agent files and the MCP server in each coding agent's config. buttery add page writes any of 16 pages from buttery's patterns, wired into a dashboard app's routes and sidebar, and buttery create component starts a component on buttery's public parts.
buttery check runs the checks from @butteryui/test on pages of the running app, starting its dev server when it isn't running, and prints each problem once with its fix, or every one with --json. buttery doctor checks an app's setup and buttery init sets buttery up in an app you have.
The dashboard template has a page of every kind, and buttery_scaffold sets an example that isn't a whole page inside an AppPage or a section of a Page, so every scaffolded page has the page grammar's padding and title.

0.10.0

The MCP server, and passwordless sign-in

October 23, 2026

@butteryui/mcp gives coding agents five read-only tools over the Model Context Protocol: search, get, scaffold, lint and a layout check, on protocol 2026-07-28 and the 2025 handshake. Lint catches literal values a component's props don't take, such as gap="16px", and says what to write instead.
AuthFlow signs people in or up with a code sent to their email or phone, built from IdentifierField, OneTimeCodeField and the useOtpFlow hook, which work on their own too. The roastery demo and the dashboard template sign in with it.
The docs search finds sign-in for "login" and "passwordless", and the segmented control for "switch between".

Every release and change