Your first dashboard

The fastest way to understand butter is to build a small dashboard with it. This page walks you through the moves once: load the starter, rearrange, add a widget, change the theme, save your work. Once these feel natural the rest of the product is just more widgets.

1. Open a new tab

Hit ⌘T (or Ctrl+T ) — anywhere a new tab opens, butter is there. The first time, you'll see a welcome screen with two paths: pick a role template (each tile shows a miniature preview of its layout), or start from a single widget.

Click Minimal. You'll land on a five-widget layout: clock, weather, and quick links across the top, a Pomodoro on the right, and a scratchpad below. Already usable; we'll customise from here. (Templates that include GitHub, Linear, Calendar, or the AI Inbox — Engineer and PM / Founder — follow up with a connect step so those widgets fill with your real data. It's skippable.)

2. Enter edit mode

Press E . The dashboard outlines its grid cells, drag-handles appear on every widget's title bar, and an X sits in the top-right of each card. You're now in edit mode — every widget can be dragged, resized, removed, or have its settings changed. Press E (or Esc ) again to lock it back in.

Drag the Pomodoro by its title bar to a new position. The grid snaps automatically — widget widths land on 3, 4, 6, 8, 9, or 12 of the 12 columns, and rows snap to 80-pixel increments.

3. Resize a widget

Hover the corner of the Scratchpad. Three resize handles surface: the bottom-right corner (both axes), the right edge (width only), and the bottom edge (height only). Drag any one to resize.

Or keyboard it: Tab until the widget is focused, then arrow keys to nudge its position, Shift +arrows to resize.

4. Add a widget

Press A (or click the plus icon in the header). The widget picker opens with all sixteen widgets and a search field. Pick Quick Links — it lands at the bottom of your dashboard with four starter bookmarks already filled in.

Open its settings (gear icon on the widget's title bar in edit mode, or right-click the widget) to edit the links. Drag a row by its grip handle to reorder; click Add link to append a new one.

5. Change the theme

Press , to open Settings. The Appearance section starts with the mode — Light, Dark, or System — and underneath it, a row of four theme cards for that mode:

• Dark — Butter, Dracula, Tokyo Night, or Nord.
• Light — Butter, Paper, Mist, or Linen.

Each card is a live preview rendered in that theme's actual palette, so what you see is exactly what you get. Themes are complete palettes — surfaces, text, borders, and a signature accent that widgets pick up — and your light and dark picks are remembered separately, so System mode glides between them with your OS. More detail on the themes page.

6. That's the whole product, really

There's no save button. Every drag, resize, setting change, and theme swap autosaves as you go — that's why the X removes a widget immediately and there's no "discard" path. Treat the dashboard as always-on.

From here, the rest is just more widgets, more layout, and a few more shortcuts. Three good places to go next:

• Keyboard shortcuts — the handful of keys that cover everything you'll ever do.
• Layout & edit mode — every detail of the grid, snap behaviour, and resize handles.
• Connect GitHub — pull PRs awaiting your review into the dashboard. Same flow works for Linear.

Or copy an opinionated build

If "what should I put on it?" is the next question, the dev dashboard and focus dashboard guides each walk through a complete build you can copy outright. Five-minute reads, longer-term layouts.