Introduction

What buttery is, what it does for an app, what's new in it, and where to go from here.

buttery is a React design system for web apps and Tauri desktop apps: tokens, layout primitives, components and motion that agree with each other, and checks that hold every screen to them. Use it when you want an app's spacing, type, surfaces and motion to agree without reviewing every screen by hand.

Try it

The card is made of buttery's components, Surface, SegmentedControl, Checkbox, Avatar, Switch and Button, and every color, size, corner and gap in it is a token, so a new theme changes all of them at once. Pick a theme, a density, a brand color (the theme's accent and primary) and a corner style, then tick the tasks and press Launch. A nested ButteryProvider applies the picks to the card alone.

What buttery gives an app

Tokens and themes

Every color, size, corner, shadow, duration and layer is a token, a CSS variable with a typed name, with values for light and dark and for comfortable and compact density. A theme from createTheme sets the accent, the grays and the corners, and every component follows. Foundations

Toolbar width100%

Layout that holds

Pages lay out with gaps instead of margins, controls take their heights from tokens, and long text truncates on purpose. A toolbar that runs out of room folds its last actions into More instead of wrapping, as the one on this card does when you narrow it. The layout contract

112 orders this week

Motion with rules

Each kind of change has its own motion: a drag follows the pointer, a toggle springs, an indicator slides to its new place and a swapped value crossfades. With reduced motion, things fade or change at once. Motion principles

Paid

Weekly summary

Components for whole apps

From Button, Switch and Avatar to DataTable, CommandSearch and AppShell, each with keyboard support, names for screen readers, examples and a page of its own. All components

Checks that say how to fix

expectButtery fails a Playwright test when anything overlaps, overflows, truncates without saying so, crowds the line under it or moves after a press, and says what to change. While you work, LayoutGuard outlines overlaps, overflow, crowded lines and controls out of line. Testing

Made for coding agents

Every page is Markdown at its address plus .md, and llms.txt lists them all. AGENTS.md and the make-it-buttery skill give a coding agent the rules, and every check's message says what to change. Using coding agents

New in 1.0

Every page of the docs, the manifest and the examples ship inside the packages, so an agent reads the version it has installed with no network, and the development layout guard checks a rule or two per frame.

Header actions

A header's actions, which fold into a More menu as the header narrows, Help first.

Spring launch

No changes yet

@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.

Release notes for 1.0.0 What comes next

Where to go next

Get started is a path to read in order, from installing buttery to a first screen and on to an app you already have.

Installation
Starting a new app with create-buttery, adding buttery to an app you have with buttery init, working in buttery's repository, and what an app on buttery is made of.
Quick start
A first screen on buttery, from an empty starter to a checked layout, in about ten minutes.
Make anything buttery
The four ways to bring buttery into an app, from wiring up the provider to whole-page patterns.
Desktop apps
Running a buttery app as a Tauri desktop app, and what changes on the desktop.
Using coding agents
How buttery helps coding agents build with it: instructions, a skill, every page as Markdown, and checks that say how to fix what fails.

The rest of the sidebar is reference. Foundations, Layout and Motion explain the rules the components follow. Components and Patterns have a page for every part, with examples to copy. Templates, Guides and Tools cover whole apps, common tasks and the command line.

Installation
Starting a new app with create-buttery, adding buttery to an app you have with buttery init, working in buttery's repository, and what an app on buttery is made of.
Quick start
A first screen on buttery, from an empty starter to a checked layout, in about ten minutes.

Introduction

Launch checklist

Header actions