arch-atlas

Wireframe Kit

Coded wireframes — screens as data, no PNGs. 44 reusable blocks and 17 full-screen templates for documenting any project's user flows. Theme-aware and resolution-independent; drop the blocks into a ScreenSpec.wire.

Screen templates

Onboarding & auth

Onboarding

Single onboarding slide with illustration, copy and CTA.

Login

Email + password sign-in with social and reset links.

Sign up

Account creation with a live password-strength meter.

OTP verification

Enter the code sent by SMS/email, with resend.

Browse & discover

Home feed

Greeting, search, category chips, promo and a product grid.

List + filters

Search results with segmented sort and a scrollable list.

Search

Focused search with recent terms and suggestions.

Detail & commerce

Product detail

Gallery, title, rating, price, options and add-to-cart.

Cart

Line items with quantity steppers and an order summary.

Checkout

Address, shipping method, payment and place-order.

Order status

Order confirmation with a delivery timeline.

Account

Profile

Profile header, stats and a menu list.

Settings

Grouped preferences with toggles and a picker.

Data & messaging

Dashboard

KPI tiles, a chart and a recent-activity list.

Chat

Conversation thread with an input row.

Notifications

Grouped notification list with unread markers.

Empty state

A friendly empty state with a primary action.

Block reference

Text & media

Headings, copy, images and profile blocks.

logoLogo / icon

Crossed circle or square — the classic image placeholder.

{ kind: "logo" }
Welcome back
headingHeading

Real heading text, left/center/right.

{ kind: "heading", text: "Welcome back", align: "center" }
linesText lines

Placeholder paragraph bars; widths are % of the row.

{ kind: "lines", widths: [100, 90, 70] }
imageImage

Crossed image box, aspect-ratio or fixed height.

{ kind: "image" }
Summer sale −40%
bannerBanner

Hero/promo image with an optional centered label.

{ kind: "banner", text: "Summer sale −40%" }
Amina K.Premium member
avatarAvatar row

Profile header: avatar, name and subtitle.

{ kind: "avatar", name: "Amina K.", subtitle: "Premium member" }

Inputs & forms

Everything the user types, taps or toggles.

inputText field

Labeled input; supports filled and error states.

{ kind: "input", label: "Email" }
textareaText area

Multi-line input with a set number of lines.

{ kind: "textarea", label: "Message", lines: 3 }
selectSelect / picker

Dropdown field with a value and chevron.

{ kind: "select", label: "Country", value: "Algeria" }
Search products
searchSearch field

Search input with a magnifier and placeholder.

{ kind: "search", label: "Search products" }
Continue
buttonButton

Primary/secondary; loading swaps to three dots.

{ kind: "button", label: "Continue" }
Forgot password?
linkLink

Small inline text link.

{ kind: "link", text: "Forgot password?", align: "center" }
✓Email
SMS
✓Push
checkboxCheckboxes

Multi-select rows; `checked` lists ticked indices.

{ kind: "checkbox", items: ["Email", "SMS", "Push"], checked: [0, 2] }
Home
Work
Other
radioRadio group

Single-select rows; `active` is the chosen index.

{ kind: "radio", items: ["Home", "Work", "Other"], active: 1 }
Notifications
Dark mode
switchToggle rows

Settings switches; `on` lists enabled indices.

{ kind: "switch", items: ["Notifications", "Dark mode"], on: [0] }
Budget
sliderSlider

Range slider with a knob; value 0–100.

{ kind: "slider", label: "Budget", value: 60 }
Quantity
−2+
stepperQuantity stepper

− value + control for quantities.

{ kind: "stepper", label: "Quantity", value: 2 }
••
otpOTP code

Verification code boxes; `filled` = digits entered.

{ kind: "otp", count: 4, filled: 2 }
AllFoodDrinksDeals
chipsFilter chips

Row of selectable chips.

{ kind: "chips", items: ["All", "Food", "Drinks", "Deals"], active: 0 }
Password strength: medium
meterMeter

Segmented strength/progress with a caption.

{ kind: "meter", segments: 3, filled: 2, label: "Password strength: medium", tone: "warning" }

Data display

Cards, lists, metrics and richer content.

Wireless headphones
cardCard

Content card with optional image, title and body.

{ kind: "card", title: "Wireless headphones", lines: 2, image: true }
listList

Avatar + text rows; optional trailing value.

{ kind: "list", items: 3, trailing: true }
gridGrid

Image cards with caption bars, 2 or 3 columns.

{ kind: "grid", cols: 2, items: 4 }
1.2kFollowers
318Following
4.9Rating
statsStat tiles

KPI row — value over label.

{ kind: "stats", items: [{ value: "1.2k", label: "Followers" }, { value: "318", label: "Following" }, { value: "4.9", label: "Rating" }] }
ratingRating

Star rating out of `count`.

{ kind: "rating", value: 4, count: 5 }
$49.00$79.00
−1+
pricePrice row

Amount with optional old price and quantity stepper.

{ kind: "price", amount: "$49.00", note: "$79.00", stepper: true }
In stockLowSold out
badgeStatus badges

Row of coloured status pills.

{ kind: "badge", items: [{ text: "In stock", tone: "success" }, { text: "Low", tone: "warning" }, { text: "Sold out", tone: "error" }] }
Ordered
Shipped
Out for delivery
Delivered
timelineTimeline

Vertical steps; up to `active` are done.

{ kind: "timeline", items: ["Ordered", "Shipped", "Out for delivery", "Delivered"], active: 1 }
Shipping & returns
Size guide
Reviews
accordionAccordion

Expandable rows; the `open` index shows body.

{ kind: "accordion", items: ["Shipping & returns", "Size guide", "Reviews"], open: 0 }
Hi! Is this available?
Yes — in stock.
chatChat

Message bubbles — out (right) vs in (left).

{ kind: "chat", bubbles: [{ side: "in", text: "Hi! Is this available?" }, { side: "out", text: "Yes — in stock." }] }
mapMap

Map placeholder with a centered pin.

{ kind: "map" }
chartChart

Bar or line chart placeholder.

{ kind: "chart", variant: "bars" }
tableTable

Simple table with an optional header row.

{ kind: "table", rows: 3, cols: 3 }

States & layout

Feedback, empty/loading states and spacing.

✓Saved successfully
toastToast / banner

Inline feedback with a tone (success/error/info/warning).

{ kind: "toast", text: "Saved successfully", tone: "success" }
Your cart is emptyBrowse products
emptyEmpty state

Icon, message and an optional action button.

{ kind: "empty", text: "Your cart is empty", button: "Browse products" }
Loading…
spinnerSpinner

Centered loading indicator with a label.

{ kind: "spinner", label: "Loading…" }
spacerSpacer

Vertical gap; `grow` pushes the rest to the bottom.

{ kind: "spacer", size: 2 }
dividerDivider

Hairline separator between sections.

{ kind: "divider" }