# mockup-snippets Ready-to-paste UI patterns for the `mockup` field in plan-json. The mockup-preset stylesheet (see `vendor/mockup-preset.css`) already styles all of these without extra CSS — just drop a snippet into `steps[].mockup.html` and edit the text. Pick the right **frame** for the canvas: - `window` — desktop app UI (macOS chrome with traffic lights + title) - `browser` — web page (URL bar uses `title`) - `phone` — mobile (phone bezel) - `none` — chrome-less component fragment All snippets work in both light and dark mode automatically — the preset has matching dark tokens via `prefers-color-scheme`. --- ## 1. Login form ```html

Welcome back

Sign in to continue to Acme.

Forgot?
or sign in with Google · GitHub
``` --- ## 2. Sign up ```html

Create your account

No credit card required. Free for 14 days.

Already have one? Sign in

``` --- ## 3. Empty state with CTA ```html
📝

No notes yet

Capture your first thought to get started. Notes sync across all your devices.

``` --- ## 4. Settings list with toggles ```html

Notifications

Choose what you want to be alerted about.

Daily digestEmail summary every morning at 8am
Realtime alertsPush notifications for mentions and replies
Weekly reportProductivity summary every Monday
``` --- ## 5. Data table with row actions ```html

Customers

3 new
NameEmailStatusPlan
AS
Ava Singh
ava@stripe.comactivePro
BK
Ben Kohli
ben@acme.iotrialingFree
CR
Carla Reyes
carla@nova.devpausedTeam
``` --- ## 6. Pricing tiers ```html

Choose a plan

Cancel anytime. All plans include unlimited workspaces.

Free

For trying things out

$0/mo
  • 1 workspace
  • Up to 10 notes
  • Community support

Pro

Most popular

For active teams

$12/user/mo
  • Unlimited workspaces
  • Unlimited notes
  • Priority email support

Enterprise

For larger orgs

Custom
  • SSO + SCIM
  • Audit logs
  • Dedicated CSM
``` --- ## 7. Modal / confirmation dialog ```html

Delete this workspace?

This will permanently delete Personal and all 12 notes inside it. This action cannot be undone.

``` --- ## 8. Banner / inline alert ```html
⚠
Your trial ends in 3 daysAdd a payment method to keep your workspace active.
``` --- ## 9. Avatar stack ```html
AS
BK
CR
+5
on this workspace
``` --- ## 10. Multi-step wizard / stepper ```html
✓
Plan
2
Review
3
Execute

Review your plan

8 steps · 3 risks · 2 open questions

``` --- ## 11. File upload drop zone ```html

Upload meeting recordings

⬆
Drop audio files here

or browse from your computer

MP3 · WAV · M4A · up to 500 MB each

``` --- ## 12. Notification list ```html

Notifications

BK
Ben Kohli commented on Auth refactor"Should we keep the old endpoint around for a month?"2 min ago
SY
Sara Yang assigned you Migrate sessions table1 hour ago
DM
Diego Martín approved your PRyesterday
``` --- ## 13. Activity feed ```html

Activity

Deployment succeeded · production · 2m
v1.42.0 — 23 commits since v1.41.7
Ava Singh merged #3014 · 14m
Switch session tokens to opaque format
Alert · checkout-service · 1h
Error rate above 0.5% for 5 minutes
``` --- ## 14. Search results ```html

7 results for "auth"

Auth refactor planlast edited Tuesday · 8 steps
plan
Switch JWT to opaque sessionsnote · 3 days ago
note
Engineering sync — auth deep divemeeting · 1 week ago · 42m
meeting
``` --- ## 15. Status / progress indicator ```html

Sync status

Uploading recording…14.2 MB of 21.4 MB
~12 seconds remainingPause
``` --- ## 16. Command palette / quick search ```html
Recent
📝New note⌘N
🎙Start recording⌘R
⚙Settings⌘,
``` --- ## How to use these in a plan In a `steps[].mockup`, drop the `
` block (or the fragment for non-`
` snippets) into the `html` field. Pick the right frame and a descriptive title: ```json { "frame": "browser", "title": "app.example.com/login", "html": "
...
" } ``` Edit text, button labels, avatar initials, and colors. Don't add `