Split Hero with Product Panel
Copy on the left, a drawn product panel on the right — the default hero for anything with an interface to show, with no image asset to host and no layout shift while it loads.
A block is one finished section of a page — a pricing table, a hero, a footer.
Whole sections, not just the parts
Laid out, responsive and accessible, in plain markup and Tailwind classes — paste one into your project and it works, with no component library to install first.
Recently added
Nothing new in the last 7 days — this is the most recent
Heroes
View all 14Centered Announcement Hero
A linked announcement pill over a large centered headline, dual CTAs and a wordmark strip — the hero for a product with nothing to screenshot yet.
Hero with Browser Frame
Centered copy above a screenshot in window chrome, masked at the bottom so a tall image never dictates the height of the fold. Wraps your own img or video.
Waitlist Hero with Email Capture
A pre-launch hero whose only ask is an email address, with pending and success states and a signup count that argues for finishing rather than starting.
Search-First Hero
A hero whose primary action is a real search form with prefilling suggestion chips — for marketplaces and directories, where sending the visitor below the fold to find the search box is the whole failure.
Developer Hero with Install Command
A drawn terminal whose install line is real, selectable text with a working copy button and a feature-detected clipboard call — the hero for anything adopted by typing rather than signing up.
App Download Hero with Phone
A drawn phone beside two store links built as real anchors rather than badge images, so they inherit the theme, need no hosted asset and carry an accessible name that is not a filename.
Hero Anchored by a Customer Quote
Pitch on the left, a marked-up figure and blockquote on the right, so the claim and the evidence for it share the fold instead of sitting a scroll apart.
Hero with Proof Metrics
A centered hero closing on a definition list of scale numbers, with a masked grid wash behind it — for infrastructure and payments, where "how many" is the second question a buyer asks.
Editorial Masthead Hero
A serif display headline over a 60-character standfirst and a real byline, with one text link and no competing CTAs — the hero for publications and essays, where the writing is the product.
Full-Bleed Media Hero
Copy over your own image or video, with a graded scrim and deliberately fixed light-on-dark text — because the background is a photograph in both themes, so flipping the copy would break it.
Integration Wall Hero
A hero whose visual is the connector list itself, marked up as a real list so a visitor can skim it for their own stack — asset-free initials tiles, no third-party marks to license.
Appointment Booking Hero
A day strip built as a radio group rather than buttons, so arrow keys move between dates and sold-out days disable properly — the fold for anything sold by the appointment.
Hero with Inline Price
Names the price above the fold for single-plan and one-time products, with the former price in a real strikethrough element so it is never announced as the current one.
Feature Sections
View all 8Bento Feature Grid
Six tiles on an asymmetric 4x3 grid with per-tile spans, a hover glow and a mobile collapse that follows source order.
Alternating Feature Rows
A full row per feature with the media side flipping each time, so the eye re-enters the page instead of skimming a stack of identical blocks.
Icon Feature Grid
Uniform cells, no spans, no state — the grid for nine things that matter equally, where a bento would be a wall and tabs would be a filing cabinet.
Integration Directory Grid
What each integration actually does, not a wall of logos — with availability as a text pill rather than a tinted border, and the name as the link so the card is not one enormous one.
Audience Persona Cards
A "who this is for" grid: four cards naming an audience, the outcome they want and the bullets that get them there.
Editor Window Showcase
A feature section paired with a tabbed fake editor — real selectable code, generated line numbers and a copy button.
Tabbed Feature Showcase
Features as a real tablist — arrow keys, roving focus and a drawn product panel per tab — for the section where four features would otherwise fight for one scroll.
Integration Depth Split
An integrations section that says how deep each one goes, instead of a wall of logos that all imply the same thing.
Pricing
View all 8Three-Plan Pricing Toggle
Three plans with a monthly/yearly switch, yearly prices derived from the monthly figure so the two can never disagree.
Single-Plan Price Card
One price given a whole card, with the objection a one-time price raises answered under the button rather than in a FAQ further down.
Tiered Usage Calculator
A slider that turns a rate card into the number a buyer actually cares about, with a per-tier breakdown so the total can be checked rather than taken on trust.
Plan Comparison Matrix
A real table with scoped headers, a sticky first column and screen-reader text behind every check and dash.
Prepaid Credit Packs
One-time packs with the per-credit price worked out for the reader and the saving stated rather than implied — the pricing shape for a product that sells quantity, not a subscription.
In-App Plan Picker
A native radiogroup of plans with the current one disabled and the prorated charge announced as it changes — the upgrade dialog, not the marketing table.
Pricing Value Split
The case for the price, made beside the price — what the alternative costs, in the units a buyer already measures.
Plan Limits List
What actually runs out on each plan, including what happens when it does — the row a pricing table leaves off.
Testimonials
View all 6Masonry Testimonial Wall
Quotes packed by height using CSS multi-column, with star ratings, initial avatars and no ragged bottom edge.
Single-Quote Spotlight
One customer, quoted at length and backed by a stat row — the section for when a single believable story argues better than a wall of five-star fragments.
Aggregate Rating Breakdown
A mean score over a stated sample with all five rating bands left visible, including the one-star row — proof that survives the objection every hand-picked quote wall invites.
Scroll-Snap Quote Rail
Twenty quotes in the height of six, scrolled by CSS snap points with arrows that disable at the ends — no auto-advance, and every quote stays in the DOM for search and Cmd-F.
Video Testimonial Cards
Poster tiles linking out to recordings, each with a pull-quote that has to land for the majority who never press play, and a drawn placeholder until you supply a still.
Customer Outcome Band
Testimonials reduced to the measured outcome and the conditions it happened under, for readers who skip the quotes.
Logo Clouds
View all 4Seamless Logo Marquee
An infinite horizontal logo scroll with masked edges, a pause-on-hover affordance and a reduced-motion fallback that wraps instead of moving.
Bordered Logo Grid
Hairline-separated cells that hold still and show the whole set at once — the logo wall for a footer, a customers page, or anywhere the count is the claim.
Under-Hero Logo Strip
One unbordered line of wordmarks beside a claim you can actually be wrong about, sized to sit under a hero without pushing the CTA down or moving while the headline is being read.
Logos Grouped by Industry
Customer logos under segment headings as a description list, with an “and 40 more” count for the ones under NDA — answers whether you have done this for someone like the reader, which a flat wall cannot.
FAQ
View all 7No-JS FAQ Accordion
Exclusive accordion behaviour from named <details> elements — no state, no hooks, no JavaScript, full keyboard support for free.
Two-Column FAQ with Help Rail
Questions on the right against a sticky rail that keeps a route to a human in view — for the visitor whose objection is not on the list.
Open FAQ Grid
Every answer rendered and visible in a two-column description list — the FAQ shape for a marketing page, where collapsed text is text a search engine will not quote.
FAQ Grouped by Topic
Anchor-linked topic pills over per-topic details groups with the first answer open — for the FAQ that outgrew a single list, working with JavaScript disabled.
Filterable FAQ with Fallback
A search that narrows the list across answers and keywords, announces the count, and turns an empty result into the contact route it should always have been.
Objection FAQ
An FAQ written from the objections that stop a sale rather than from the questions that are comfortable to answer.
Security FAQ
The security questions a buyer's IT reviewer asks, answered with scope and dates rather than with the word "enterprise-grade".
CTA Sections
View all 7Newsletter Capture Band
Email capture with a four-state submission machine and an aria-live status line, so the outcome is announced and not just shown.
Community Link Band
A closing CTA of three link cards pointing at GitHub, chat and social — somewhere to go for the visitor who is not ready to convert.
Closing CTA Panel
A rounded gradient panel that restates the offer for the reader who scrolled past everything — heading left, both CTAs right, reassurance points underneath.
Sticky Conversion Bar
The call to action that follows a long page down — held back until the reader is past a scroll threshold, dismissible, and spaced so it never covers the content it is selling.
In-article CTA Card
The offer that sits inside the column instead of interrupting it — a labelled aside a screen reader can skip in one keystroke, tied to the paragraph above it, with the friction admitted before the click.
Referral Waitlist Form
A waitlist capture that shows position and referral credit, turning a dead-end confirmation into the one action that moves the queue.
Demo Request Form
A demo request that offers the self-serve escape first, so the people who did not want a call do not book one.
Stats
View all 7Hairline Stats Band
A four-up metrics strip with 1px hairline dividers, built from a single gap-px grid so the rules stay crisp on any display.
Stat Cards with Deltas
Metrics carrying the direction they moved, with the good direction declared per stat so a falling churn rate reads as a win — arrow and text, never colour alone.
Stats Beside the Argument
Four figures in a hairline card next to the paragraph making the claim, each carrying an optional source line — for numbers that mean nothing without knowing lower than what, over how long, across how many.
Before-and-After Metric Table
The buyer’s current situation in one column and yours in the next, as a real table with scoped headers — the comparison they are actually making, which a delta against your own past cannot express.
Milestone Timeline
The same measurement taken year after year down a vertical rail, each with the event that explains it — the shape for trajectory, which no snapshot of four numbers can claim.
Benchmark Stat Band
Performance figures with the measurement method printed beside each one, so a sceptical reader can check rather than take them.
Security Posture Band
The compliance and security facts a procurement reviewer asks for, stated as figures with their scope rather than as badges.
Responsive Navbar
Brand, links and CTAs with a mobile panel that unmounts when closed — so its links are never tabbable while invisible — plus escape-to-close and focus return.
Dismissible Announcement Bar
The strip above the navbar, with the three things it usually gets wrong fixed: a named region, a live role only when it earns one, and a dismissal that persists.
Navbar with Mega Menu
Top-level items that open a described-link panel, opening on hover and focus, closing on escape, outside click and focus leaving the group — and collapsing to an accordion on mobile.
Mobile Nav Drawer
A slide-in site menu that behaves like a dialog: focus trap, focus restoration, body scroll lock and a transition that drops under prefers-reduced-motion.
Signed-in Application Bar
The bar above an app rather than a site: workspace and environment named in the open, a bell that counts in words, and an impersonation strip that cannot be dismissed.
Mega Footer with Link Columns
Brand column, four labelled nav columns, socials and a legal bar — the one place every page links to every section. Ships no client JavaScript.
Minimal Footer Bar
One row — brand, a handful of links, socials, copyright — for a site where a five-column footer would be whitespace pretending to be structure.
Footer with Newsletter Band
A raised email-capture band overlapping a three-column link footer, with the confirmation replacing the field in place rather than navigating away.
App Footer with Status
The footer of a signed-in product rather than a marketing site: a live status line with words as well as colour, plus locale and theme as native selects.
Regulated Seller Footer
Legal entity, company number, registered address, VAT and the consumer links an EU or UK seller has to publish — with a region control that changes the terms, not just the currency.
Content & Blog
View all 12Release Timeline
A dated changelog on a vertical rail with added/changed/fixed tags and machine-readable <time> values.
Public Roadmap Columns
Shipped / in progress / planned in three columns, with status carried by icon as well as colour.
Blog Index Grid
A featured post at full width above a card grid, with drawn covers built from tokens — a blog index with no image pipeline and no broken-thumbnail state.
Case Study Card Grid
A grid of case-study cards that lead with the metric rather than the company name, each one linking out to the full write-up — the block a customer-stories section or a home page needed and only had a full case-study page for.
Article Header & Byline
Kicker, headline, standfirst, byline and share row, with the opening prose and a pull quote included — the type scale of a post, decided once instead of per-article.
Team Grid
An about-page team section on initials avatars rather than photos, so shipping it never waits on headshots and there is no broken-image state to design.
Careers Openings Board
Openings grouped by department with location, type and salary on every row — candidates self-select by craft first, and a flat list makes them scan for it.
Three-Column Docs Frame
Sidebar, article and on-this-page rail — each column answers a different question, and they collapse on mobile in the order that keeps the article alive.
API Endpoint Reference
Method badge, path, parameter table and a request/response pair kept side by side — an example request whose response is a scroll away gets pasted blind.
Package Manager Code Tabs
One install command behind npm/pnpm/yarn/bun tabs with a working copy button — every reader uses exactly one package manager, so showing all four wastes three lines.
Résumé Document
A CV as a document rather than a timeline of cards — one column, dates on the end edge, and a print layer that puts it on paper without a separate PDF to keep in step.
Video Player Shell
The watch screen with no playback in it: a ratio-locked stage, a control bar drawn down to the buffered layer, and an up-next rail. Drop a video element in and wire your own player.
Contact & Forms
View all 6Split Contact Form
A contact form beside the channels that bypass it — a real address, a support link and a response-time promise, which is what makes a form people cannot see into feel worth filling.
Multi-Step Form with Validation
A three-step form where each step validates only its own fields, errors are wired to inputs with aria-describedby, and advancing moves focus to the new heading.
Inline Feedback Widget
One click to rate, everything after it optional — the shape that collects a complaint from someone mid-task who would never open a contact page.
Form with Error Summary
The state every form reaches and none of them illustrate: a focused summary at the top linking to each bad field, validation that waits for submit, and somewhere for the failure that belongs to no field.
Contact Sales Form
A qualifying contact form that asks the three things a first reply needs, and says what happens next before you send it.
Support Ticket Form
A support form that asks for the one thing that halves resolution time — what you already tried — and says when a human will read it.
Email Templates
View all 4Feature Launch Email
A feature-announcement email as HTML that survives Outlook — nested tables, inline styles and a hidden preheader, previewed in a sandboxed iframe so the styles cannot leak onto the page around it.
Newsletter Digest Email
A periodic roundup of several stories in one email, each reduced to a kicker, a headline and one line — the shape a reader can scan in order instead of a wall of paragraphs.
Promotional Offer Email
A time-boxed discount email that leads with the number, states a deadline rather than a live countdown email cannot run, and letter-spaces the code so it survives being copied out of an inbox.
Re-Engagement Email
A win-back email to a dormant account that opens with a fact about their own data, not a feature list, and asks for one tap instead of a click back into a product they stopped opening.
Authentication
View all 9Email & Social Login Card
Centred sign-in card with social providers, a password reveal toggle and the autoComplete values password managers actually need.
Split Signup With Proof
Registration form beside a testimonial panel, with live password rules and a proof column that drops rather than stacks on mobile.
One-Time Code Input
Six-box OTP entry that handles paste, backspace, arrow keys and iOS SMS autofill — the parts hand-rolled versions always miss.
Password Reset Request
Reset-link request with a sent state worded to avoid leaking whether an account exists.
New Password With Strength Meter
Set-a-new-password form with a four-step strength meter, confirm matching and errors announced rather than only coloured.
Two-Factor Challenge
Authenticator-code prompt with a backup-code escape hatch and an opt-in trusted-device checkbox that is off by default.
Email-First SSO Sign-In
Email first, then whatever that domain uses. The password field is absent rather than disabled when SSO is enforced, the button names the company it redirects to, and a personal address is a normal answer instead of an error.
Magic Link Sign In
Passwordless sign-in that says what will land in the inbox and how long it lasts, before the address is typed.
Enterprise SSO Split
What SSO actually covers, written for the person who has to configure it rather than the person who asked for it.
Dashboards
View all 9Sidebar Dashboard Shell
Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.
KPI Cards With Deltas
Metric row where each card knows whether a rise is good news, so churn going up is red while revenue going up is green.
Activity Feed Panel
Recent-events list with typed icons and relative timestamps that keep the absolute value in a <time> element.
Page Header With Tabs
Breadcrumb, title, action buttons and a counted tab row that sits flush with the bottom rule.
Kanban Board Columns
Four columns of prioritised, tagged, assigned task cards with a blocked state — the board as a layout contract, leaving drag behaviour to your own state and library.
Audit Log Timeline
Events grouped by day on a vertical rail, icons varying by type and one entry expanded into a detail card — what keeps forty events scannable instead of forty gray dots.
Saved View Tabs
Saved views with the third state most implementations drop: a shared view with unsaved edits, where Save changes what a colleague sees tomorrow. Two honest buttons instead of one, ownership on the tab, and dirty said in words.
Comparison Period Picker
A reporting window with the comparison window spelled out beside it — resolved dates, UTC arithmetic, and an option to align weekdays so a weekend is never compared against a Tuesday.
Alert Rule List
Threshold alerts with the two facts most rule lists omit: how often each has fired, and whether its channel is muted — so a rule that is on but delivering nowhere reads as its own state.
Grouped App Sidebar
Brand header, search trigger, labelled link groups and a user row, with each group announced as a list and the active link marked aria-current.
Collapsible Icon-Rail Sidebar
Folds between a full list and an icon rail without losing any accessible names, with a Ctrl/Cmd+B shortcut and tooltips that show on keyboard focus too.
Rail Plus Secondary Panel
A narrow rail of labelled sections beside a panel that lists the pages inside the chosen one, for products with more destinations than one list can hold.
Nested Accordion Sidebar
Groups that fold open to child pages, starting with the group that owns the current page already open and every aria-controls resolving.
Sidebar With Workspace Switcher
A header that opens a real menu of workspaces: arrow keys, Home/End, Escape returning focus to the trigger, and checked state announced as a radio choice.
Floating Inset Sidebar
A floating card on a tinted canvas beside an inset content surface, with a labelled usage meter and an upgrade card that is one skippable Tab stop.
Resizable Sidebar With Splitter
A drag handle that is also a keyboard-operable separator, with arrow keys that swap in RTL, pointer capture for touch and pen, and double-click to reset.
Docs Sidebar With Filter
Version picker, a labelled filter that announces its match count, and sections that vanish rather than leave a heading over an empty list.
Chat History Sidebar
Conversations grouped by recency with a per-row pin toggle that announces itself, and a hover control that stays reachable by keyboard and on touch.
Mail Folders Sidebar
Compose button, folders whose unread counts are spoken, colour labels that never rely on colour alone, and a storage meter with a text warning.
File Explorer Tree Sidebar
A real ARIA tree with roving focus, arrow-key expand and collapse, type-ahead and one tab stop, drawn flat so a screen reader is told the structure.
Data Tables
View all 8Sortable Selectable Table
Type-aware sorting with aria-sort, a header checkbox that goes properly indeterminate, and selection that survives a re-sort.
Table Search & Filter Bar
Search, filter count and view switch, with active filters shown as removable chips so a filtered table never looks unfiltered.
Pagination With Page Window
Page size, range summary and a fixed-width number window that stays the same size from page 1 to page 200.
Expandable Detail Rows
Rows that open into a full-width detail panel via colSpan, with aria-expanded and aria-controls wired to the detail row.
Column Show, Hide & Reorder
Reordering that works from the keyboard rather than by drag alone, pinned columns that cannot be hidden or moved, and a guard so the last visible column cannot be unchecked into a blank table.
Bulk Action Bar
The selection bar that asks the question most tables skip: this page, or all 1,284 rows the filter matches. Typed confirmation above a threshold, an undo with the window counting down, and a select-all that names its own scope.
Inline Editable Table
Edit cells in the grid with staged changes, per-cell validation, the original value kept beside the attempt, and a save that counts what is still pending.
Grouped Table with Subtotals
Collapsible group headers that carry their own subtotals while collapsed, with a grand total that sums every row rather than only the visible ones.
CRUD
View all 12Create Record Form
A full-page create form with a guidance rail and a Save-and-create-another that keeps the shared fields - the shape a record with more than six fields actually needs.
Create Record Modal
Three fields over the list they add to, with the new row appearing behind the dialog rather than after it closes.
Create Record Drawer
A long create form in a side drawer: the fields scroll, the header and the action bar do not, and the list stays legible beside it.
Record Detail Page
The read view arranged by what a reader came for - a verdict band of four facts, then details, then the related records a field dump can never show.
Record Quick Look
The verification modal from a table row: copyable identifiers, no editing, nothing scrolling, and the row still marked behind it.
Edit Record Form
An edit page that shows the diff - per-field change markers carrying the previous value, a per-field revert, and a Save button that counts what it will write.
Edit Record Modal
The edit modal including the parts nobody draws: the in-flight state, the rejected save that keeps your typing, and the conflict when someone else got there first.
Field-Level Edit Drawer
The save-on-blur model, with per-field confirmation, per-field failure and a written-in-this-session log - the only honest answer to what did I just change.
Cascade Delete Dialog
Deleting a record other records depend on: dependents counted and grouped by fate - deleted, orphaned, retained - with a guard that scales to the blast radius.
Record Created State
The screen after the write: the reference copyable, next actions ranked rather than listed, and an undo window that counts down honestly and then says why it is gone.
Bulk Edit Drawer
One change applied to many records that disagree - mixed values shown as mixed, untouched fields never written, and skipped rows counted before you commit.
Archive and Restore
The bin with the clock on it: days until purge per row, who archived it, and a restore disabled with a reason when the parent has already gone.
Charts & Metrics
View all 10Sparkline Metric Cards
KPI cards with a hand-built SVG trend line — no charting dependency for a path this file computes in twelve lines.
CSS Bar Chart Panel
Categorical bars in plain CSS with gridlines, hover values and a screen-reader table carrying the real numbers.
Quota & Usage Meters
Consumption against plan limits, with warning thresholds, honest overage display and unmetered quotas that do not fake a bar.
Dual-Series Line Chart
A year-over-year trend in inline SVG with a printed axis, no charting dependency and the same data repeated as a screen-reader table.
Donut Breakdown
Where a total went, drawn as one conic-gradient ring with the total in the hole and every number repeated in the legend.
Daily Activity Heatmap
A year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.
Conversion Funnel
A funnel that leads with the step-to-step rate and the people who fell out of it, not the tidy share-of-top percentages nobody can act on. Biggest drop named in words, and a footnote saying which definition of funnel this is.
Metric Alert List
Alert thresholds with their current distance from firing, so a quiet alert is visibly armed rather than possibly broken.
KPI Summary Band
The top-of-dashboard figures, each carrying the comparison period that makes a delta mean anything.
Market Price Ticker
The moving price rail that sits under an exchange’s navbar — direction carried by an arrow and a sign as well as by colour, and the duplicate half dropped rather than read twice.
Settings
View all 8Grouped Settings Layout
Sidebar-and-panel settings shell that becomes a horizontal scroller on mobile instead of collapsing into a select.
Profile Form With Save Bar
Avatar, fields and a character counter, with a sticky save bar that only appears once something has genuinely changed.
Team Members & Invites
Member list with role selects, pending invites shown inline, and the last owner locked so a workspace cannot be orphaned.
API Key Management
Masked keys, a create flow that reveals the secret exactly once, and a revoke that confirms before it fires.
Danger Zone
Destructive actions gated by typing the resource name exactly — the pattern GitHub and Stripe use, and for good reason.
Active Sessions & Devices
The screen people go looking for after losing a laptop. Sign out everywhere states what it does not reach — API keys keep working — locations are written as estimates, and this device is labelled rather than revocable by misclick.
Notification Channel Matrix
Every event against every delivery channel in one grid, with column toggles and required rows that show the policy instead of a disabled checkbox.
Empty & Error States
View all 8Empty State With Illustration
Two variants — nothing created yet, versus filters excluded everything — because offering "create your first" to a bad filter is the classic bug.
Error State With Retry
Failed-to-load panel with a visible retry, a copyable error reference and the stack tucked behind a disclosure.
404 With Search & Suggestions
A 404 that helps: a real GET search form that works without JavaScript, likely destinations, and home as the fallback rather than the headline.
Shimmer Skeleton List
Loading placeholders with varied row widths and a sweep that is motion-safe only, falling back to a flat tint under reduced motion.
Permission Denied (403)
The state where the page exists and the account is not on the list: names who can grant access, sends the request, and leaks nothing about what is inside.
Offline With Queued Changes
Leads with what still works — three edits saved on this device — instead of with the failure. The retry backoff counts down in the open, and the three things that genuinely cannot work offline are named rather than discovered.
Empty Because of Filters
The empty state for a list emptied by its own filters: every active filter shown as a removable chip ordered by how many results it would restore, with clear-all deliberately second.
Scheduled Maintenance Window
Planned downtime with a live countdown, an end time in the reader’s timezone, what still works — and a different sentence once the window overruns rather than a negative timer.
Modals & Drawers
View all 8Destructive Confirm Dialog
A type-to-confirm dialog built on native <dialog>, so the focus trap, top layer and escape handling come from the browser. Focus lands on Cancel, and the button says the verb.
Cookie Consent Banner
Per-category consent where refusing is exactly as easy as accepting, nothing non-essential is pre-ticked, and the page behind it stays readable — the shape the law expects, wired to your own script gating.
Slide-Over Edit Panel
A side sheet for editing a record without losing the list behind it — native <dialog> for the trapping, a data attribute for the slide, and a sticky footer so Save never scrolls away.
Faceted Filter Drawer
Facets with per-option counts, zero-result options disabled rather than hidden so the list never jumps, and a pending selection applied on a button that says how many choices changed.
Share & Access Dialog
The share modal where a design mistake is a data leak: general access stated as its consequence rather than its setting, and a copy button that never silently widens access.
Mobile Bottom Sheet
Half and full snap points where the content owns the scroll and overscroll-contain keeps the page behind still. The drag handle is a real button, Escape and the backdrop close it, and safe-area padding keeps the last row pressable.
Unsaved Changes Prompt
The interception that keeps work: three answers rather than two, the changed fields listed by name, a destructive-styled discard, and Escape resolving to cancel.
Record Inspector Drawer
A non-modal drawer that keeps the list on screen, with previous and next controls for moving between records and an activity tab beside the fields.
Onboarding
View all 8Setup Checklist with Progress
The get-started card that ships with its first item already ticked, a native <progress> element rather than a div bar, and a dismiss control that appears only once there is nothing left to abandon.
Guided Setup Wizard
A choice-driven wizard with a persistent side rail, real radio groups in a fieldset so arrow keys work, and visited steps navigable while steps ahead stay out of the tab order.
Team Invite Step
The onboarding step where a product becomes multiplayer: pasted addresses split into chips, typos marked rather than dropped, and an honest way to skip.
Product Tour Coach Mark
A tour step anchored to the control it explains, with a spotlight cut by one spread shadow, a visible step count and focus that follows the step.
Role Picker
The "what best describes you" step, asked honestly — every option states what it actually changes, the skip is visible and names what you get instead, and the choice is reversible.
Import or Start Empty
The empty product’s real first question. Sample data is offered with equal weight rather than as grey small print, every connector names its scope before the redirect, and each option carries the honest duration.
Workspace Setup Form
The first screen after signup, asking only the two things that cannot be changed silently later.
Data Migration Split
What a migration actually moves and what it cannot, stated before the switch rather than discovered after it.
Notifications
View all 7Toast Notification Stack
A corner stack whose live region is mounted before any message exists, errors announce assertively, and the auto-dismiss timer pauses on hover and on focus.
Notification Inbox Panel
The bell panel: filterable list with read state, the unread count in the accessible name rather than only in a badge, and machine-readable timestamps beside the human ones.
Notification Preferences Matrix
Per-event, per-channel switches as a real table, with required notifications locked and explained, and column headers that toggle a whole channel and report a mixed state honestly.
Push Permission Pre-Prompt
The soft ask before the browser dialog you only get one shot at — what will be sent, what will not, and a decline of the same weight as the yes.
Notification Digest
A day's notifications collapsed into one digest, grouped by what they are rather than when they arrived.
Digest Schedule Form
The control that turns notification volume down instead of off, which is the choice most people actually want.
Notification Channel List
Which channel carries which event, so the loud ones can be moved rather than muted entirely.
Communication
View all 9Support Chat Widget
The corner launcher, with real availability instead of a stock reassurance, article deflection before the form, no self-opening, and a way to make it go away.
Message Bubble Thread
Bubbles with the parts that get skipped: per-message delivery state, grouping by author and time, day separators, and a retry on the failed bubble itself.
Attachment Bubbles
Five kinds of thing that is not text - image, document, link, location and an upload still in flight - each answering the question its own kind raises.
Inbox Thread List
The list half of a two-pane inbox, with unread and selected as visibly different states and bulk selection as a mode rather than a hover checkbox.
Inbox Reading Pane
The reading pane with the composer always present, quoted history collapsed behind a count, and an internal-note mode whose send button names the recipient.
Voice Message Player
A voice note you can navigate: a waveform that is a real seek control, a speed button, a transcript, and a played state that survives finishing.
Video Call Layout
The call grid with the state that makes it usable - active speaker, per-tile connection quality, hide self-view, and the you-are-muted nudge.
Call Device Settings
The green room, where every picker has a test beside it - an input meter, a test tone, a camera preview - and blocked permission is a state, not an error.
Support Ticket Thread
The customer side of a ticket, where a named owner and a deadline replace Status: Open - including the waiting-on-you state that stops the argument about response times.
Command & Search
View all 10Command Palette
The ⌘K switcher done properly: focus stays in the input while aria-activedescendant moves, arrows wrap, and the highlight resets on every query change.
Grouped Search Results
Results grouped by section with visible breadcrumb paths and <mark>-highlighted matches — users recognise where a result lives faster than they read its snippet.
Keyboard Shortcuts Sheet
The "?" overlay, with chords written once in one notation and rendered per platform — mod becomes Command on Apple and Ctrl everywhere else, decided after mount so the markup never mismatches.
Applied Filters Bar
The strip above a result set that answers "why am I only seeing four things" — every active constraint as a removable chip, with the excluded count beside it.
Header Search with Suggestions
The field in the header, not the palette over it: Enter searches for what you typed unless you arrowed to a suggestion, late responses are dropped by sequence number, and recent searches are removable one at a time.
Faceted Refinement Panel
Faceted search with result counts on every option, zero-count options kept visible and disabled so the list stays stable, and a note explaining why the counts do not sum.
Search Scope Switcher
One query counted across every scope it could have matched, as a real tablist with arrow-key movement — so an answer that is nowhere is visible without opening four tabs.
Recent Search List
The empty state of a search box, filled with the searches that are worth repeating and the ones worth saving.
Faceted Search Results
The whole faceted search assembled - rail, chips, live count and sort - with the intersection actually applied and relevance offered only when there is a query.
Range Facet with Histogram
The facet that is a number: a distribution over a dual-thumb slider built from two real range inputs, with typed bounds clamped on blur rather than per keystroke.
File Upload
View all 7Drag & Drop Upload
Dropzone with per-file progress and a drag counter that fixes the flicker every naive dragleave handler produces.
Upload Progress List
The list that follows the dropzone: complete, uploading, queued and failed rows with cancel and retry — because hiding the failure is the classic upload bug.
Resumable Large Upload
One big file on a connection that will drop: a bar allowed to go backwards when a chunk is retried, a time estimate that is a range or nothing, and a promise about closing the tab made before it is needed.
CSV Column Mapper
The screen between "file uploaded" and "data imported": source columns mapped to schema fields, with a sample value under each and required fields blocking the button.
%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22252%22%20cy%3D%2266%22%20r%3D%2230%22%20fill%3D%22%23fde68a%22%20opacity%3D%220.75%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M126%20246c62%200%20112%2034%20112%2074H14c0-40%2050-74%20112-74Z%22%20fill%3D%22url(%23coat)%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M104%20196h44v56h-44z%22%20fill%3D%22%23eab894%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22126%22%20cy%3D%22132%22%20r%3D%2274%22%20fill%3D%22%23f5d0b0%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M52%20130a74%2074%200%200%201%20148-8c4-44-30-72-74-72s-78%2032-74%2080Z%22%20fill%3D%22%236b4226%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22102%22%20cy%3D%22138%22%20r%3D%226%22%20fill%3D%22%233f2a1c%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%22152%22%20cy%3D%22138%22%20r%3D%226%22%20fill%3D%22%233f2a1c%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M108%20170c10%209%2028%209%2038%200%22%20stroke%3D%22%23b9795a%22%20stroke-width%3D%226%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E)
Avatar Crop & Upload
Framing a profile photo with keyboard-operable zoom and position, showing what gets trimmed rather than hiding it behind the mask.
Upload Requirements Form
An upload form that states the constraints before the file is chosen, rather than rejecting it after a two-minute transfer.
Import From URL Form
The import path for a file that is already on the internet, which does not need to travel through the browser at all.
Billing & Usage
View all 8Plan & Next Charge Summary
Current plan, next charge with an actual figure and date, payment method, and a prominent pending-cancellation state.
Invoice History
Past invoices with tabular figures, worded statuses rather than bare coloured dots, and per-invoice download labels.
Payment Methods On File
Cards on file with the two failures that cost the subscription: expiry called out before it fails, and the default stated on the row rather than implied by ordering.
Subscription Cancel Flow
Self-serve cancellation with no dark patterns: the exact date access ends, what breaks, one honest alternative, and a button that works.
Overage Notice with Projection
Past the included allowance, with the end-of-month projection and every number the invoice will use — because a surprise bill is a product defect.
Seat Count & Proration
Changing seats with the bill shown first: the part-period charge and the new recurring amount as two numbers, the arithmetic spelled out, and the asymmetry stated where it bites — removing a seat refunds nothing today.
Invoice Detail
One invoice with the arithmetic shown: proration split into a credit and a charge with their own date ranges, tax as a line with its jurisdiction, and totals in a real tfoot.
Credit Balance and Expiry
Consumable credits split into the buckets they actually live in, rendered in spend order, with a proportional warning that only appears when a meaningful balance is about to expire.
Scheduling & Calendar
View all 3Meeting Scheduler
Day strip, slot grid and a time zone the visitor can change — because a slot list with no zone on it is how this pattern wastes an hour of everyone involved.
Month Calendar Grid
A month view where event chips truncate and overflow becomes "+n more", so a busy Tuesday never changes the height of the row it sits in.
Conference Agenda Grid
Time down the side, tracks across, breaks spanning the width — the one comparison a month view cannot make. Falls to a linear list on a phone, from the same array.
Agent Chat
View all 8Assistant Thread with Composer
A scrolling conversation with per-turn actions, announced as a polite log restricted to additions — so a streaming reply is not re-read on every token — and auto-scroll that only pins when the user is already at the bottom.
Composer with @ Sources and / Commands
The trigger menus done properly: @ and / open only at a token boundary, the query is derived from the caret so the menu closes itself, and focus never leaves the textarea — the combobox pattern, not a floating div.
Streaming Answer with Citations
Token-by-token text with linked citations, follow-up chips and a caret that stops the moment the stream does. The status is announced once; the prose is deliberately outside every live region.
Assistant Starter Screen
The blank thread, answered: grouped starter prompts as real lists of buttons, each group labelled, so the highest-leverage screen in an AI product is not a centred logo.
Message Version Switcher
The answers a regenerate throws away — siblings rather than replacements, an edited question that branches in place, and a plain sentence about what happens to the replies below.
Chat Beside a Canvas
The two-pane assistant layout, with the mismatch nobody else states: the canvas names the version it is showing and says so when that is not the one the conversation is about. Versions link back to the turn that made them.
Model Picker with Trade-offs
Model selection with the three numbers the choice actually turns on — capability, latency and cost per message — and locked models explained rather than greyed out.
Prompt Attachment Tray
Files staged against a prompt with a running context-token budget, unreadable files flagged before send, removal allowed mid-upload, and a send button that names its one blocker.
Agent Reasoning
View all 7Collapsible Thinking Trace
The "thought for 5s" panel: a native details/summary outside, individually expandable steps inside — buttons rather than nested disclosures, which are announced as a disclosure within a disclosure.
Tool Call Chips
Dense tool invocations that open into their arguments and result, with status carried by icon and word rather than colour, and errors marked as alerts only once the user opens them.
Live Agent Task List
Run status as rows — done, running, failed, queued — with native progress elements, per-task retry buttons that name their task, and progress announced from one small status region instead of every row.
Working Indicator with Elapsed Time
The gap before the first token: a shimmer grid, a phase label that advances as the wait lengthens, and a running counter — which is the only honest answer to "is it stuck". The timer is hidden from the live region on purpose.
Failed Run Trace
The trace after something broke: retries counted in the open with what each one cost, a step that was silently worked around drawn in amber rather than green, and the raw error kept apart from the agent’s reading of it.
Agent Retry Log
What the agent tried, what failed, and what it did about it — the run history a user needs before they trust a second attempt.
Agent Cost Breakdown
What one run cost, per step, so an expensive answer is attributable rather than a monthly surprise.
Human in the Loop
View all 8Approval Request with Blast Radius
The agent stops and asks: the effect stated before the verb, choices as radios in a fieldset so picking is separate from committing, no pre-focused Approve, and the decision left on screen afterwards.
Proposed Edits Diff Table
Machine-proposed row edits accepted one at a time, with before and after in real del/ins elements, a tri-state select-all that actually sets indeterminate, and a running count of what will be written.
Recommendation with Confidence Meter
A suggestion scored with a native meter rather than a styled bar, banded in words as well as numbers, and showing what the model rejected — the fastest way a human catches a bad recommendation.
Agent Permission Scopes
Read and write scopes separated rather than bundled, writes off by default, a required expiry, and switches that are real checkboxes with role="switch" — so the grant is toggleable by keyboard and announced as on or off.
Bulk Approval Queue
Forty decisions and an honest way to clear them: bulk approve that cannot reach the high-impact rows, a select-all that says how many it takes, and the auto-approve deadline on every line.
Approval Policy List
Which agent actions run unattended and which need a signature, stated as a policy the operator can read before anything happens.
Escalation Queue
What is waiting on a person, ordered by how long it has been waiting rather than when it arrived.
Human Oversight Split
Where a person sits in an automated run, written as four guarantees rather than as a promise that a human is involved.
Retrieval & Context
View all 9Retrieved Context Chunks
The RAG debugging surface: ranked passages with similarity as a meter, matched spans in real mark elements, and filter chips wired as a radiogroup so arrows move between them.
Answer Source Citations
The published footnotes under an answer — ordered list, real cite and time elements, the claim each source supports, and a staleness warning written in words rather than shown as an amber dot.
Knowledge Source Picker
Choosing what the assistant may read, with indexing state told honestly — a half-indexed source says so rather than showing a green tick — and the footer stating the effect of the selection, not its cardinality.
Nothing Found, Answered Honestly
The refusal screen: says plainly that nothing was found, shows where it looked and the near-misses below threshold, and offers the two real ways out instead of inventing an answer.
Context Window Budget
What is in the context and what fell out of it — a stacked budget with the reply reserve drawn as a segment, and the dropped chunks named with the reason, which is the part nobody ships.
Index Freshness Panel
A green tick means the connector works, not that the answers are current. Freshness as an age in words per source, the headline taken from the stalest one, and a failed sync that still says what age it is answering from.
Retrieval Freshness List
Retrieved sources ranked by how stale they are, because a confident answer from a two-year-old document is the failure people do not catch.
Context Scope List
Which sources this answer may draw on, shown as a scope the user can read before asking rather than a citation list after.
Grounding Split
How an answer is tied to its sources, and what the system does when it cannot find any.
Inline AI Actions
View all 6Selection Action Toolbar
Highlight a passage and hand it to the model. Positioned from the range rect relative to its container, raised by selectionchange so Shift-Arrow works, and every button prevents the mousedown that would collapse the selection.
Ghost Text Completion
Copilot-style completion in a plain textarea: a transparent-caret field over a metric-matched mirror, Tab to accept, Escape that actually sticks, and the suggestion announced rather than left as invisible grey text.
Agent-Adjusted Inspector
The model edits real properties and every change is attributed and reversible — per-property provenance in words, per-property revert, and sliders whose aria-valuetext carries the unit.
Unprompted Insight Cards
Findings the agent surfaced on its own, paged one at a time, each stating its magnitude rather than its direction, dismissible, and carrying a sparkline that is also a sentence for anyone who cannot see it.
Editor Slash Menu
The "/" menu inside a document: focus never leaves the editor, every row names what it acts on, and Escape cleans up the trigger text it inserted instead of leaving you to backspace it.
Inline AI Action Menu
The actions offered on a selection, each saying whether it rewrites in place or opens a draft beside it.
Product Listings
View all 9Product Card Grid
Responsive product cards with sale badges, ratings and a wishlist button layered above the card link so it stays clickable.
Faceted Filter Sidebar
Category, size, colour and price facets as proper fieldsets, with colour swatches that carry their name as well as their hue.
Collection Sort Toolbar
Result count, sort and density switch — with the count in an aria-live region, since it is the only feedback a filter change gives some users.
Scroll-Snap Product Rail
A "you might also like" row on native scroll-snap — touch swiping, momentum and keyboard support for free, with no carousel library.
Product Comparison Table
Three products side by side with the row labels pinned through a horizontal scroll, an "only show differences" toggle that says how many rows it hid, and "best" marked only where better means something.
Stock Availability List
Availability per variant stated before the cart, because discovering it at checkout is where the basket gets abandoned.
Collection Story Split
The editorial header above a collection grid, carrying the four facts that decide a considered purchase.
Map and Results Split
Results on one side, a drawn map on the other, scrolling independently. The map is explicitly decorative and out of the tab order — the list is the content, not its companion.
Menu Course List
A restaurant menu typeset as a bill of fare rather than a product grid — dotted leaders to the price, dietary marks as abbreviations with a key, and prices as strings so “market price” still fits.
Product Detail
View all 7Product Image Gallery
Main image with a thumbnail strip built as a real tablist, so arrow keys work and the ratio is fixed to stop the buy box shifting.
Variant & Add-to-Cart Box
Price, variant radiogroup, quantity stepper and add-to-bag — with sold-out sizes disabled and visible rather than hidden.
Product Details Accordion
Description, materials, delivery and returns in named <details> elements — no JavaScript, and the copy stays indexable while collapsed.
Rating Distribution Summary
Average rating with a clickable histogram — because a 4.3 of forties and fives is a different product from a 4.3 of ones and fives.
Size Guide
The panel that decides whether the parcel comes back: what the model is wearing and what previous buyers did, above a table whose inches are converted rather than maintained twice.
Product Spec Split
The specification table beside the product image, with the two or three figures that decide the purchase pulled out of it.
Back In Stock Form
The capture that replaces a dead sold-out button, with the honest caveat that a notification is not a reservation.
Cart & Checkout
View all 9Slide-Over Cart Drawer
A basket panel with the dialog mechanics usually missing: focus trap, focus return, Escape to close and a background scroll lock.
Editable Cart Lines
Quantity steppers and remove-with-undo, with every total derived rather than stored so the basket can never disagree with itself.
Checkout Address & Payment
The full autocomplete token set that lets a browser fill eight fields in one tap, plus address labels that follow the selected country.
Order Summary With Promo
Subtotal, discount, delivery and tax all derived from the lines, with the free-delivery nudge driven by the same threshold as the charge.
Express Payment Row
The wallet buttons above the form, and what they do to it: the address a wallet returns is shown and stays editable, and the row disappears entirely when no wallet is actually available.
Gift Options Form
The gifting step, placed in the cart where it is a choice rather than at checkout where it is friction.
Gift Card Purchase
The only checkout where the buyer is not the recipient - live preview, a send date with a stated timezone, and the confirm-the-address field that prevents the expensive typo.
Guest Checkout
Guest as the default and the whole form, with a real autocomplete token on every field and the account offer moved to the end, where it costs one checkbox.
Discount Offer Modal
The offer popup with four rules applied: triggered by intent, a decline button of equal weight, a dismissal that is remembered, and the terms on its face.
Orders & Reviews
View all 7Order Confirmation
The thank-you screen built to prevent two support emails: a selectable order number and a delivery date range rather than "soon".
Order History
Past orders with stacked item thumbnails and worded statuses — people recognise what they bought long before the order number.
Customer Reviews
Sortable reviews with verified-purchase badges, optimistic helpful votes and a real expand control instead of a fade that hides text.
Order Tracking Timeline
The fortnight between buying and reviewing, answered properly: an arrival range rather than a date, exceptions above the timeline, and a copyable carrier reference.
Write a Review
The form that produces the reviews the other blocks display — a real radio group for stars, and a prompt that changes with the rating because one star and five need different questions.
Order Lookup Form
Order tracking for the guest who never made an account, which is most of them.
Review Distribution Band
The rating summary with the numbers that make an average trustworthy — the count, the spread and the verified share.
After-Sale Service
View all 9Warranty Coverage Panel
A verdict for this serial number today, with exclusions given equal weight to cover and an extension offered only while it can still be bought.
Refund Request Form
Refunds are per line, not per order: a reason on each line that drives what is asked for next, and a running total itemising the restocking fee and the delivery rule.
Refund Status Tracker
Where the money is and who is holding it - four stages, each naming the responsible party, including the bank stage every where-is-my-refund contact comes from.
Refunds Overview Table
The operator queue, sorted oldest-open-first because recency is the wrong default, with blocked as a first-class status that names its blocker.
Return or Exchange Picker
Refund, exchange or credit decided per line, with live stock on the variants and the price difference shown before the goods are posted rather than after.
Return Label and Instructions
The screen between approved and posted: three drop-off methods with the thing that actually blocks each one, the packing rules that get returns refused, and a date rather than a duration.
Service Repair Request
A repair is not a return - a symptom picker that filters the service routes, warranty resolved inside the form, and an estimate with its uncertainty stated.
Review History
The reviews you wrote and the ones you owe, with editing that is honest about being marked as edited and moderation that names the rule it applied.
Gift Card Balance Check
A balance checker built for the two ways it goes wrong - an empty card and an expired one - answering with a transaction history rather than a bare zero.
Dashboards, tables and auth are next
The taxonomy already covers product and commerce — sidebars, data tables, settings screens, checkout flows. Those categories appear here as their first block lands.