Skip to content
buttery

v1.0.0

Source on GitHub

Version 1.0.0

Blank

The starter on its own, a Vite and React app wired up for buttery with a desktop shell, and nothing on the screen yet.

The blank template is buttery's starter app: the provider, the styles, the bundled font, the layout checks and a Tauri v2 desktop shell, with a page header and a Next steps section on an otherwise empty page. Use it when none of the other templates is close to what you're building, or when you want the desktop app.

Start from it

  1. Make the app

    bash

    npx create-buttery my-app --template blank --desktop

    create-buttery makes my-app in the folder you're in, named after the folder, and installs it with the package manager that ran it. blank is the default, so --template blank can be left out. --desktop adds the Tauri shell, so the app also opens as a desktop window.

    Inside the buttery repository, pnpm new-app my-app --template blank copies apps/starter to apps/my-app instead, with the next free port, and adds it to the root tsconfig.json.

  2. Start it

    bash

    cd my-app
    npm run dev

    Open the address it prints.

  3. Open it as a desktop app

    bash

    npm run tauri dev

    The same app opens in a window of its own.

What's inside

FileWhat it does
index.htmlThe page the app mounts in, with the favicon and the app's title
src/main.tsxImports buttery's two stylesheets and renders the app inside ButteryProvider
src/App.tsxThe app: an AppPage with a PageHeader and a Next steps section, ready to replace
vite.config.tsVite with React and the React Compiler, the dev server on the port in package.json
e2e/smoke.spec.tsChecks the page renders with the bundled font and no console errors
e2e/layout.spec.tsRuns expectButtery on the page at a phone's and a laptop's width, light and dark
src-tauri/The desktop shell: a 1280 by 820 window with the title bar laid over the app

Its one screen is an AppPage with a PageHeader, from the app shell and page header patterns. The quick start builds a first screen in it, and desktop apps covers the Tauri shell.

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

  • Desktop apps

    Running a buttery app as a Tauri desktop app, and what changes on the desktop.