01 / login-001
Sign in
A welcoming split sign-in screen with local credential validation, password visibility, and a workspace preview.
src/app/(screens)/login-001/page.tsxdesktop defaultPIPE / SCREEN LIBRARY
A place for every part of the journey.
From the first hello to the unexpected error. Real Pipe screens, ready to explore, resize, and make your own. These local specimens send no account data.
- Available screens
- 82
- Categories
- 15
- Frame sizes
- 3
- Previewed here
- 30
01 / FIND YOUR START
Everyday work. And everything around it.
Choose a category for its complete set. Each live preview runs the actual route, with the same tokens and controls as the rest of Pipe.
016 available
Authentication
A friendly first hello, with clear validation, invitations, and a way back when access fails.
6 screensOpen group
First preview · Sign in
026 available
System states
The moments outside the happy path: empty, loading, unavailable, and ready to try again.
6 screensOpen group
First preview · Your first collection
035 available
Dashboards
Five reporting screens from five different products — a homeware shop, a weekly magazine, a freight network, a security console, and a school day. Each has its own information architecture: a chart type, a layout and a density that belong to that product, all drawn from the same fixed fixtures.
5 screensOpen group
First preview · Shop overview
045 available
Forms
Five forms from the same five fictional products as the dashboards — a product wizard, a commission table, a booking, an import, and an observation request. Each has its own shape and its own shell; validation stays close and entered work stays put.
5 screensOpen group
First preview · Add a product
055 available
Details
The full story of an order, a story, a driver, an audit report, or a lesson plan — from the same five products as the dashboards, forms and settings, with context beside the decision.
5 screensOpen group
First preview · Order detail
065 available
Settings
Five settings screens from the same five products as the dashboards and forms — a seller profile, a desk notification rhythm, a team and access console, a session review, and a connected-tools grid. Scope is explicit, and every change is local and reversible.
5 screensOpen group
First preview · Seller profile
075 available
Documentation
Five help guides, one per fictional product — add a product, organise an issue, review access, learn the shortcuts, and troubleshoot a route — each with a different teaching archetype and its own shell.
5 screensOpen group
First preview · Add your first product
085 available
Tables & lists
Five ways to hold a set of records across the same five products — a sortable ledger with selection, a queue grouped by stage, a register you choose the columns of, an expandable findings table, and a reorderable checklist. Every total is derived from the rows on screen, and every wide table becomes complete record cards on a phone.
5 screensOpen group
First preview · Stock ledger
096 available
AI & agents
Five AI workflows inside the same five fictional products as the other groups — a product story draft, an editorial edit review, a dispatch run history, a security evidence trace, and a school usage report — plus the conversation rail from the shell library mounted with its real body as a live assistant chat. Each keeps its product's own shell and its own structure, with deterministic local output, inspectable sources, and a way back.
6 screensOpen group
First preview · Product story draft
105 available
Search
Find a record across five products with visible queries, real filters, dense results, and a way back from nothing.
5 screensOpen group
First preview · Catalogue search
115 available
Notifications
Know what needs you now. Read, act, archive, and return to a calmer inbox.
5 screensOpen group
First preview · Your inbox
125 available
Onboarding
Five products' first-run setup, each a short guided journey with one step on screen at a time. Two run inside the product on its own sidebar pose; three run on the fullscreen first-run frame.
5 screensOpen group
First preview · Open your shop in three steps
139 available
Application shells
Complete application frames — canonical sidebar, header-first, mobile-first, a section tree beside an article, a conversation rail with a docked preview, a three-pane inbox, a table with an inspector, a banded dashboard and a discovery grid — rendered as their loading pose: real chrome around a skeleton body that mirrors the frame's own layout.
9 screensOpen group
First preview · Canonical sidebar shell
145 available
Pricing & billing
Five billing screens from the same five fictional products — seller plans, a membership comparison, a network plan, invoice records, and an upgrade review. Each keeps its product's own shell, and every total is derived from the same fixture with a way back.
5 screensOpen group
First preview · Seller plans
155 available
Changelog
Five release centres from the same five products — what shipped, what it means, what is coming, what people are asking for, and how to hear about it.
5 screensOpen group
First preview · What’s new
02 / 6 SCREENS
Authentication
A friendly first hello, with clear validation, invitations, and a way back when access fails.
02 / register-001
Create account
Create an example profile with retained form values, associated validation, and an explicit local-only confirmation.
src/app/(screens)/register-001/page.tsxdesktop default03 / 6 SCREENS
System states
The moments outside the happy path: empty, loading, unavailable, and ready to try again.
01 / empty-001
Your first collection
A private first collection with inline naming, local creation, undo, and a welcoming getting-started guide.
src/app/(screens)/empty-001/page.tsxdesktop default02 / loading-001
Loading your workspace
A stepped loading preview with collection-shaped skeletons, named preparation stages, and a ready-state handoff.
src/app/(screens)/loading-001/page.tsxdesktop default04 / 5 SCREENS
Dashboards
Five reporting screens from five different products — a homeware shop, a weekly magazine, a freight network, a security console, and a school day. Each has its own information architecture: a chart type, a layout and a density that belong to that product, all drawn from the same fixed fixtures.
01 / dashboard-001
Shop overview
Lumen Supply, a homeware shop: a canonical sidebar over revenue and order charts, category stock levels, and a low-stock filter.
src/app/(screens)/dashboard-001/page.tsxdesktop default02 / dashboard-002
Publishing activity
Marlow Review, a weekly magazine: a banded newsroom report with a reads-by-story chart, a publishing log, a monthly goal, and reversible local schedule controls.
src/app/(screens)/dashboard-002/page.tsxdesktop default05 / 5 SCREENS
Forms
Five forms from the same five fictional products as the dashboards — a product wizard, a commission table, a booking, an import, and an observation request. Each has its own shape and its own shell; validation stays close and entered work stays put.
01 / form-001
Add a product
Lumen Supply, a homeware shop: a four-step product wizard with step validation, a stock and pricing panel, an editable variant table, and local undo.
src/app/(screens)/form-001/page.tsxdesktop default02 / form-002
Commission writers
Marlow Review, a weekly magazine: a bulk commission batch with a desk, fee and deadline per writer, dedupe, row removal, and local confirmation.
src/app/(screens)/form-002/page.tsxdesktop default06 / 5 SCREENS
Details
The full story of an order, a story, a driver, an audit report, or a lesson plan — from the same five products as the dashboards, forms and settings, with context beside the decision.
01 / detail-001
Order detail
Lumen Supply, a homeware shop: an order hub with item cards, an activity timeline, customer context, and a fulfilment checklist.
src/app/(screens)/detail-001/page.tsxdesktop default02 / detail-002
Story and discussion
Marlow Review, a weekly magazine: a story draft with its working discussion, a local reply composer, and resolvable, reopenable threads.
src/app/(screens)/detail-002/page.tsxdesktop default07 / 5 SCREENS
Settings
Five settings screens from the same five products as the dashboards and forms — a seller profile, a desk notification rhythm, a team and access console, a session review, and a connected-tools grid. Scope is explicit, and every change is local and reversible.
01 / settings-001
Seller profile
Lumen Supply, a homeware shop: an identity form with shop details, accessible validation, and a live saved-profile card.
src/app/(screens)/settings-001/page.tsxdesktop default02 / settings-002
Desk notifications
Marlow Review, a weekly magazine: topic switches, email and quiet hours, and a saved rhythm summary beside the form.
src/app/(screens)/settings-002/page.tsxdesktop default08 / 5 SCREENS
Documentation
Five help guides, one per fictional product — add a product, organise an issue, review access, learn the shortcuts, and troubleshoot a route — each with a different teaching archetype and its own shell.
01 / docs-001
Add your first product
Lumen Supply, a homeware shop: a catalogue introduction with a first-listing example and a local starter checklist.
src/app/(screens)/docs-001/page.tsxdesktop default02 / docs-002
Organise the issue
Marlow Review, a weekly magazine: a practical desk handbook with live desk and stage grouping, story fixtures, and maintenance guidance.
src/app/(screens)/docs-002/page.tsxdesktop default09 / 5 SCREENS
Tables & lists
Five ways to hold a set of records across the same five products — a sortable ledger with selection, a queue grouped by stage, a register you choose the columns of, an expandable findings table, and a reorderable checklist. Every total is derived from the rows on screen, and every wide table becomes complete record cards on a phone.
01 / table-001
Stock ledger
Lumen Supply, a homeware shop: sort every stock line, select the ones running out, and add them to a reversible reorder list that a filter change can never smuggle a hidden row into.
src/app/(screens)/table-001/page.tsxdesktop default02 / table-002
Submissions queue
Marlow Review, a weekly magazine: a list grouped by reading stage, with per-piece word counts, topic filtering and a one-step undo on the last move.
src/app/(screens)/table-002/page.tsxdesktop default10 / 6 SCREENS
AI & agents
Five AI workflows inside the same five fictional products as the other groups — a product story draft, an editorial edit review, a dispatch run history, a security evidence trace, and a school usage report — plus the conversation rail from the shell library mounted with its real body as a live assistant chat. Each keeps its product's own shell and its own structure, with deterministic local output, inspectable sources, and a way back.
01 / ai-001
Product story draft
Lumen Supply, a homeware shop: a source-grounded product draft with a brief, counters embedded in the proposal, an editable story, and reversible accept, set aside, and restore.
src/app/(screens)/ai-001/page.tsxdesktop default02 / ai-002
Review proposed edits
Marlow Review, a weekly magazine: a bulk table of proposed editorial edits, each with its evidence and per-row accept, keep, and undo, beside a live preview and a progress read-out.
src/app/(screens)/ai-002/page.tsxdesktop default11 / 5 SCREENS
Search
Find a record across five products with visible queries, real filters, dense results, and a way back from nothing.
01 / search-001
Catalogue search
Lumen Supply, a homeware shop: search the catalogue by scope and category, read a dense results table, and open a local quick view.
src/app/(screens)/search-001/page.tsxdesktop default02 / search-002
Issue archive
Marlow Review, a magazine: search published stories grouped by issue, filter by topic, and read a most-read ranking.
src/app/(screens)/search-002/page.tsxdesktop default12 / 5 SCREENS
Notifications
Know what needs you now. Read, act, archive, and return to a calmer inbox.
01 / notifications-001
Your inbox
A contextual update feed with unread filtering, reversible read states, and a clear-inbox recovery path.
src/app/(screens)/notifications-001/page.tsxmobile default02 / notifications-002
Mentions
Two contextual conversations with validated local replies, retained drafts, and reversible resolution.
src/app/(screens)/notifications-002/page.tsxmobile default13 / 5 SCREENS
Onboarding
Five products' first-run setup, each a short guided journey with one step on screen at a time. Two run inside the product on its own sidebar pose; three run on the fullscreen first-run frame.
01 / onboarding-001
Open your shop in three steps
Lumen Supply, a homeware shop: a three-step in-product journey on the shop's canonical sidebar — shop profile, starter catalogue, then open — with validation, draft persistence and an undo.
src/app/(screens)/onboarding-001/page.tsxdesktop default02 / onboarding-002
Name your next issue
Marlow Review, a quarterly magazine's first run: a three-step masthead to desk to review journey with a live issue preview, at least one desk day, and a saved draft that survives a reload.
src/app/(screens)/onboarding-002/page.tsxdesktop default14 / 9 SCREENS
Application shells
Complete application frames — canonical sidebar, header-first, mobile-first, a section tree beside an article, a conversation rail with a docked preview, a three-pane inbox, a table with an inspector, a banded dashboard and a discovery grid — rendered as their loading pose: real chrome around a skeleton body that mirrors the frame's own layout.
01 / shell-001
Canonical sidebar shell
A collapsible sidebar with sectioned navigation, a workspace switcher, and a content column that scrolls on its own.
src/app/(screens)/shell-001/page.tsxdesktop default02 / shell-002
Header-first shell
Navigation across one top bar, with a live search field over an overview of collections and recent notes.
src/app/(screens)/shell-002/page.tsxdesktop default15 / 5 SCREENS
Pricing & billing
Five billing screens from the same five fictional products — seller plans, a membership comparison, a network plan, invoice records, and an upgrade review. Each keeps its product's own shell, and every total is derived from the same fixture with a way back.
01 / pricing-001
Seller plans
Lumen Supply, a homeware shop: three seller plans on a monthly or yearly cycle, a reversible free-plan preview, a trust band, and plan questions.
src/app/(screens)/pricing-001/page.tsxdesktop default02 / pricing-002
Membership comparison
Marlow Review, a weekly magazine: a grouped comparison matrix of membership tiers with a differences-only view and a yearly commitment.
src/app/(screens)/pricing-002/page.tsxdesktop default16 / 5 SCREENS
Changelog
Five release centres from the same five products — what shipped, what it means, what is coming, what people are asking for, and how to hear about it.
01 / changelog-001
What’s new
Lumen Supply, a homeware shop: search and filter September releases, expand change summaries, and discover shared stock views.
src/app/(screens)/changelog-001/page.tsxdesktop default02 / changelog-002
Release details
Marlow Review, a weekly magazine: an editorial release note with a working board/list example, rollout context, and reversible helpful feedback.
src/app/(screens)/changelog-002/page.tsxdesktop default