H
Vijetbhat6/hoverlab
Daily Activity Heatmapactivity-heatmapA year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.
Audit Log Timelineactivity-timelineEvents 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.
Agent Cost Breakdownagent-cost-breakdownWhat one run cost, per step, so an expensive answer is attributable rather than a monthly surprise.
Proposed Edits Diff Tableagent-diff-reviewMachine-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.
Agent Retry Logagent-retry-logWhat the agent tried, what failed, and what it did about it — the run history a user needs before they trust a second attempt.
Failed Run Traceagent-run-failureThe 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.
Live Agent Task Listagent-task-listRun 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.
Collapsible Thinking Traceagent-thinking-traceThe "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 Chipsagent-tool-callsDense 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.
Working Indicator with Elapsed Timeagent-working-indicatorThe 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.
Inline AI Action Menuai-action-menuThe actions offered on a selection, each saying whether it rewrites in place or opens a draft beside it.
Ghost Text Completionai-inline-suggestionCopilot-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.
Unprompted Insight Cardsai-insight-cardsFindings 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.
Agent-Adjusted Inspectorai-inspector-panelThe 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.
Editor Slash Menuai-slash-menuThe "/" 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.
Dismissible Announcement Barannouncement-barThe 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.
API Endpoint Referenceapi-endpoint-cardMethod 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.
Applied Filters Barapplied-filters-barThe 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.
Approval Policy Listapproval-policy-listWhich agent actions run unattended and which need a signature, stated as a policy the operator can read before anything happens.
Bulk Approval Queueapproval-queueForty 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 Request with Blast Radiusapproval-request-cardThe 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.
Article Header & Bylinearticle-headerKicker, 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.
Password Reset Requestauth-forgot-passwordReset-link request with a sent state worded to avoid leaking whether an account exists.
Email & Social Login Cardauth-login-cardCentred sign-in card with social providers, a password reveal toggle and the autoComplete values password managers actually need.
Magic Link Sign Inauth-magic-link-formPasswordless sign-in that says what will land in the inbox and how long it lasts, before the address is typed.
One-Time Code Inputauth-otp-verifySix-box OTP entry that handles paste, backspace, arrow keys and iOS SMS autofill — the parts hand-rolled versions always miss.
New Password With Strength Meterauth-reset-passwordSet-a-new-password form with a four-step strength meter, confirm matching and errors announced rather than only coloured.
Split Signup With Proofauth-signup-splitRegistration form beside a testimonial panel, with live password rules and a proof column that drops rather than stacks on mobile.
Email-First SSO Sign-Inauth-sso-domainEmail 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.
Two-Factor Challengeauth-two-factorAuthenticator-code prompt with a backup-code escape hatch and an opt-in trusted-device checkbox that is off by default.
Avatar Crop & Uploadavatar-crop-uploadFraming a profile photo with keyboard-operable zoom and position, showing what gets trimmed rather than hiding it behind the mask.
Back In Stock Formback-in-stock-formThe capture that replaces a dead sold-out button, with the honest caveat that a notification is not a reservation.
CSS Bar Chart Panelbar-chart-panelCategorical bars in plain CSS with gridlines, hover values and a screen-reader table carrying the real numbers.
Bento Feature Gridbento-featuresSix tiles on an asymmetric 4x3 grid with per-tile spans, a hover glow and a mobile collapse that follows source order.
Credit Balance and Expirybilling-credit-balanceConsumable 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.
Invoice Detailbilling-invoice-detailOne 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.
Plan & Next Charge Summarybilling-plan-summaryCurrent plan, next charge with an actual figure and date, payment method, and a prominent pending-cancellation state.
Seat Count & Prorationbilling-seat-managerChanging 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.
Blog Index Gridblog-post-gridA 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.
Meeting Schedulerbooking-schedulerDay 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.
Mobile Bottom Sheetbottom-sheet-mobileHalf 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.
Month Calendar Gridcalendar-monthA 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.
Call Device Settingscall-device-settingsThe 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.
Slide-Over Cart Drawercart-drawerA basket panel with the dialog mechanics usually missing: focus trap, focus return, Escape to close and a background scroll lock.
Editable Cart Linescart-line-itemsQuantity steppers and remove-with-undo, with every total derived rather than stored so the basket can never disagree with itself.
Release Timelinechangelog-timelineA dated changelog on a vertical rail with added/changed/fixed tags and machine-readable <time> values.
Chat Beside a Canvaschat-artifact-canvasThe 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.
Prompt Attachment Traychat-attachment-trayFiles 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.
Assistant Starter Screenchat-empty-stateThe 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 Switcherchat-message-branchesThe 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.
Model Picker with Trade-offschat-model-pickerModel selection with the three numbers the choice actually turns on — capability, latency and cost per message — and locked models explained rather than greyed out.
Composer with @ Sources and / Commandschat-prompt-barThe 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 Citationschat-streaming-answerToken-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 Thread with Composerchat-thread-panelA 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.
Express Payment Rowcheckout-express-paymentThe 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.
Checkout Address & Paymentcheckout-formThe full autocomplete token set that lets a browser fill eight fields in one tap, plus address labels that follow the selected country.
Editor Window Showcasecode-showcaseA feature section paired with a tabbed fake editor — real selectable code, generated line numbers and a copy button.
Package Manager Code Tabscode-tabs-panelOne 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.
Collection Story Splitcollection-story-splitThe editorial header above a collection grid, carrying the four facts that decide a considered purchase.
Collection Sort Toolbarcollection-toolbarResult 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.
Command Palettecommand-paletteThe ⌘K switcher done properly: focus stays in the input while aria-activedescendant moves, arrows wrap, and the highlight resets on every query change.
Community Link Bandcommunity-bandA closing CTA of three link cards pointing at GitHub, chat and social — somewhere to go for the visitor who is not ready to convert.
Plan Comparison Matrixcomparison-tableA real table with scoped headers, a sticky first column and screen-reader text behind every check and dash.
Recommendation with Confidence Meterconfidence-recommendationA 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.
Destructive Confirm Dialogconfirm-dialogA 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.
Split Contact Formcontact-form-splitA 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.
Contact Sales Formcontact-sales-formA qualifying contact form that asks the three things a first reply needs, and says what happens next before you send it.
Retrieved Context Chunkscontext-chunk-cardsThe 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.
Context Scope Listcontext-scope-listWhich sources this answer may draw on, shown as a scope the user can read before asking rather than a citation list after.
Context Window Budgetcontext-window-budgetWhat 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.
Cookie Consent Bannercookie-consentPer-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.
Archive and Restorecrud-archive-restoreThe 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.
Bulk Edit Drawercrud-bulk-edit-drawerOne change applied to many records that disagree - mixed values shown as mixed, untouched fields never written, and skipped rows counted before you commit.
Create Record Drawercrud-create-drawerA 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.
Create Record Formcrud-create-formA 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 Modalcrud-create-modalThree fields over the list they add to, with the new row appearing behind the dialog rather than after it closes.
Cascade Delete Dialogcrud-delete-cascadeDeleting 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 Quick Lookcrud-read-modalThe verification modal from a table row: copyable identifiers, no editing, nothing scrolling, and the row still marked behind it.
Record Detail Pagecrud-read-pageThe 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 Created Statecrud-success-stateThe 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.
Field-Level Edit Drawercrud-update-drawerThe 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.
Edit Record Formcrud-update-formAn 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 Modalcrud-update-modalThe 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.
CSV Column Mappercsv-import-mapperThe 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.
In-article CTA Cardcta-inline-cardThe 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.
Closing CTA Panelcta-split-panelA rounded gradient panel that restates the offer for the reader who scrolled past everything — heading left, both CTAs right, reassurance points underneath.
Sticky Conversion Barcta-sticky-barThe 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.
Customer Outcome Bandcustomer-outcome-bandTestimonials reduced to the measured outcome and the conditions it happened under, for readers who skip the quotes.
Activity Feed Paneldashboard-activity-feedRecent-events list with typed icons and relative timestamps that keep the absolute value in a <time> element.
Alert Rule Listdashboard-alert-rulesThreshold 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.
Comparison Period Pickerdashboard-comparison-periodA 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.
Page Header With Tabsdashboard-page-headerBreadcrumb, title, action buttons and a counted tab row that sits flush with the bottom rule.
Saved View Tabsdashboard-saved-viewsSaved 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.
Sidebar Dashboard Shelldashboard-shellSidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.
KPI Cards With Deltasdashboard-stat-cardsMetric row where each card knows whether a rise is good news, so churn going up is red while revenue going up is green.
Data Migration Splitdata-migration-splitWhat a migration actually moves and what it cannot, stated before the switch rather than discovered after it.
Bulk Action Bardata-table-bulk-actionsThe 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.
Column Show, Hide & Reorderdata-table-column-managerReordering 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.
Expandable Detail Rowsdata-table-expandableRows that open into a full-width detail panel via colSpan, with aria-expanded and aria-controls wired to the detail row.
Grouped Table with Subtotalsdata-table-grouped-rowsCollapsible group headers that carry their own subtotals while collapsed, with a grand total that sums every row rather than only the visible ones.
Inline Editable Tabledata-table-inline-editEdit 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.
Pagination With Page Windowdata-table-paginationPage size, range summary and a fixed-width number window that stays the same size from page 1 to page 200.
Sortable Selectable Tabledata-table-sortableType-aware sorting with aria-sort, a header checkbox that goes properly indeterminate, and selection that survives a re-sort.
Table Search & Filter Bardata-table-toolbarSearch, filter count and view switch, with active filters shown as removable chips so a filtered table never looks unfiltered.
Demo Request Formdemo-request-formA demo request that offers the self-serve escape first, so the people who did not want a call do not book one.
Digest Schedule Formdigest-schedule-formThe control that turns notification volume down instead of off, which is the choice most people actually want.
Discount Offer Modaldiscount-modalThe 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.
Three-Column Docs Framedocs-layoutSidebar, 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.
Donut Breakdowndonut-breakdownWhere a total went, drawn as one conic-gradient ring with the total in the hole and every number repeated in the legend.
Record Inspector Drawerdrawer-record-detailA 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.
Empty Because of Filtersempty-filtered-resultsThe 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.
Empty State With Illustrationempty-state-ctaTwo variants — nothing created yet, versus filters excluded everything — because offering "create your first" to a bad filter is the classic bug.
Error State With Retryerror-state-retryFailed-to-load panel with a visible retry, a copyable error reference and the stack tucked behind a disclosure.
Escalation Queueescalation-queue-listWhat is waiting on a person, ordered by how long it has been waiting rather than when it arrived.
No-JS FAQ Accordionfaq-accordionExclusive accordion behaviour from named <details> elements — no state, no hooks, no JavaScript, full keyboard support for free.
FAQ Grouped by Topicfaq-categorizedAnchor-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.
Open FAQ Gridfaq-gridEvery 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.
Objection FAQfaq-objection-listAn FAQ written from the objections that stop a sale rather than from the questions that are comfortable to answer.
Filterable FAQ with Fallbackfaq-searchA 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.
Two-Column FAQ with Help Railfaq-two-columnQuestions 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.
Icon Feature Gridfeature-icon-gridUniform 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.
Alternating Feature Rowsfeature-rowsA 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.
Tabbed Feature Showcasefeature-tabsFeatures 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.
Inline Feedback Widgetfeedback-widgetOne click to rate, everything after it optional — the shape that collects a complaint from someone mid-task who would never open a contact page.
Drag & Drop Uploadfile-dropzoneDropzone with per-file progress and a drag counter that fixes the flicker every naive dragleave handler produces.
Faceted Filter Drawerfilter-drawer-facetsFacets 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.
Regulated Seller Footerfooter-complianceLegal 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.
Mega Footer with Link Columnsfooter-megaBrand 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 Barfooter-minimalOne 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 Bandfooter-newsletterA 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 Statusfooter-status-localeThe 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.
Form with Error Summaryform-error-summaryThe 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.
Conversion Funnelfunnel-conversion-panelA 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.
Gift Card Balance Checkgift-card-balanceA 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.
Gift Card Purchasegift-card-purchaseThe 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.
Gift Options Formgift-options-formThe gifting step, placed in the cart where it is a choice rather than at checkout where it is friction.
Grounding Splitgrounding-splitHow an answer is tied to its sources, and what the system does when it cannot find any.
Guest Checkoutguest-checkout-formGuest 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.
App Download Hero with Phonehero-app-downloadA 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.
Appointment Booking Herohero-bookingA 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.
Centered Announcement Herohero-centeredA linked announcement pill over a large centered headline, dual CTAs and a wordmark strip — the hero for a product with nothing to screenshot yet.
Editorial Masthead Herohero-editorialA 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.
Integration Wall Herohero-integrationsA 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.
Full-Bleed Media Herohero-media-overlayCopy 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.
Hero with Proof Metricshero-metricsA 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.
Hero with Inline Pricehero-price-anchorNames 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.
Hero with Browser Framehero-screenshotCentered 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.
Search-First Herohero-searchA 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.
Split Hero with Product Panelhero-splitCopy 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.
Developer Hero with Install Commandhero-terminalA 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.
Hero Anchored by a Customer Quotehero-testimonialPitch 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.
Waitlist Hero with Email Capturehero-waitlistA 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.
Human Oversight Splithuman-oversight-splitWhere a person sits in an automated run, written as four guarantees rather than as a promise that a human is involved.
Import From URL Formimport-from-url-formThe import path for a file that is already on the internet, which does not need to travel through the browser at all.
Inbox Reading Paneinbox-thread-detailThe reading pane with the composer always present, quoted history collapsed behind a count, and an internal-note mode whose send button names the recipient.
Inbox Thread Listinbox-thread-listThe 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.
Integration Depth Splitintegration-depth-splitAn integrations section that says how deep each one goes, instead of a wall of logos that all imply the same thing.
Integration Directory Gridintegration-gridWhat 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.
Invoice Historyinvoice-history-tablePast invoices with tabular figures, worded statuses rather than bare coloured dots, and per-invoice download labels.
Careers Openings Boardjob-listing-boardOpenings 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.
Kanban Board Columnskanban-boardFour 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.
Keyboard Shortcuts Sheetkeyboard-shortcuts-sheetThe "?" 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.
AI product kitkit-ai-productThread, reasoning trace, approvals, citations — and the meter that bills them. One install writes 22 of its 23 pieces; the template is a separate scaffold.
Content and docs kitkit-content-and-docsA blog, a documentation site, a changelog and a careers page. One install writes 19 of its 21 pieces; the templates are a separate scaffold.
Internal tools kitkit-internal-toolsTables that sort, filter, bulk-edit and page — plus the shell around them. One install writes 22 of its 23 pieces; the template is a separate scaffold.
SaaS launch kitkit-saas-launchMarketing site, auth, dashboard and billing — the whole first release. One install writes 25 of its 26 pieces; the template is a separate scaffold.
Storefront kitkit-storefrontBrowse, filter, buy, pay, and the receipt afterwards. One install writes 25 of its 26 pieces; the template is a separate scaffold.
Waitlist kitkit-waitlistOne page, one form, one evening. One install writes 13 of its 14 pieces; the template is a separate scaffold.
Knowledge Source Pickerknowledge-source-pickerChoosing 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.
KPI Summary Bandkpi-summary-bandThe top-of-dashboard figures, each carrying the comparison period that makes a delta mean anything.
Dual-Series Line Chartline-chart-panelA year-over-year trend in inline SVG with a printed axis, no charting dependency and the same data repeated as a screen-reader table.
Seamless Logo Marqueelogo-cloudAn infinite horizontal logo scroll with masked edges, a pause-on-hover affordance and a reduced-motion fallback that wraps instead of moving.
Bordered Logo Gridlogo-gridHairline-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.
Logos Grouped by Industrylogo-segmentsCustomer 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.
Under-Hero Logo Striplogo-stripOne 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.
Scheduled Maintenance Windowmaintenance-window-statePlanned 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.
Attachment Bubblesmessage-attachment-bubbleFive 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.
Message Bubble Threadmessage-bubble-threadBubbles 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.
Metric Alert Listmetric-alert-listAlert thresholds with their current distance from firing, so a quiet alert is visibly armed rather than possibly broken.
Sparkline Metric Cardsmetric-sparkline-cardsKPI cards with a hand-built SVG trend line — no charting dependency for a path this file computes in twelve lines.
Unsaved Changes Promptmodal-unsaved-changesThe interception that keeps work: three answers rather than two, the changed fields listed by name, a destructive-styled discard, and Escape resolving to cancel.
Multi-Step Form with Validationmulti-step-formA 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.
Mobile Nav Drawernav-mobile-drawerA 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 Barnavbar-authenticatedThe 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.
Navbar with Mega Menunavbar-mega-menuTop-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.
Responsive Navbarnavbar-simpleBrand, 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.
Newsletter Capture Bandnewsletter-signupEmail capture with a four-state submission machine and an aria-live status line, so the outcome is announced and not just shown.
404 With Search & Suggestionsnot-found-404A 404 that helps: a real GET search form that works without JavaScript, likely destinations, and home as the fallback rather than the headline.
Notification Channel Listnotification-channel-listWhich channel carries which event, so the loud ones can be moved rather than muted entirely.
Notification Digestnotification-digest-listA day's notifications collapsed into one digest, grouped by what they are rather than when they arrived.
Notification Inbox Panelnotification-inboxThe 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 Matrixnotification-preferencesPer-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.
Offline With Queued Changesoffline-state-bannerLeads 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.
Setup Checklist with Progressonboarding-checklistThe 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.
Import or Start Emptyonboarding-import-dataThe 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.
Role Pickeronboarding-role-pickerThe "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.
Order Confirmationorder-confirmationThe thank-you screen built to prevent two support emails: a selectable order number and a delivery date range rather than "soon".
Order Historyorder-history-listPast orders with stacked item thumbnails and worded statuses — people recognise what they bought long before the order number.
Order Lookup Formorder-lookup-formOrder tracking for the guest who never made an account, which is most of them.
Order Summary With Promoorder-summary-panelSubtotal, discount, delivery and tax all derived from the lines, with the free-delivery nudge driven by the same threshold as the charge.
Order Tracking Timelineorder-tracking-timelineThe fortnight between buying and reviewing, answered properly: an arrival range rather than a date, exceptions above the timeline, and a copyable carrier reference.
Build an AI assistantpath-ai-assistantFrom the blank thread to an action the user actually approved. One install writes all 10 blocks.
Ship a complete auth flowpath-auth-flowEvery screen a real sign-in needs, including the ones people forget. One install writes all 6 blocks.
Add billing and usagepath-billingFrom the price on the marketing page to the invoice in the account. One install writes all 5 blocks.
Build an internal dashboardpath-dashboardThe shell, the numbers, and the table underneath. One install writes all 7 blocks.
Build a landing pagepath-landing-pageEight blocks, in the order that converts. One install writes all 8 blocks.
Onboard a new userpath-onboardingThe first ten minutes, from sign-up to first real action. One install writes all 6 blocks.
Publish what you shippedpath-product-updatesA changelog, a roadmap, and a way to hear about both. One install writes all 5 blocks.
Build a settings areapath-settingsFive screens, in the order people go looking for them. One install writes all 5 blocks.
Handle the states nobody designspath-statesLoading, empty, error, missing — the four screens that decide whether it feels finished. One install writes all 6 blocks.
Build a storefrontpath-storefrontBrowse, choose, buy — the whole commerce path. One install writes all 8 blocks.
Launch a waitlist pagepath-waitlistOne screen, one field, live in an evening. One install writes all 6 blocks.
Payment Methods On Filepayment-method-cardCards 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.
Permission Denied (403)permission-denied-stateThe 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.
Agent Permission Scopespermission-scope-dialogRead 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.
Audience Persona Cardspersona-cardsA "who this is for" grid: four cards naming an audience, the outcome they want and the bullets that get them there.
Plan Limits Listplan-limits-listWhat actually runs out on each plan, including what happens when it does — the row a pricing table leaves off.
Prepaid Credit Packspricing-creditsOne-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 Pickerpricing-plan-pickerA native radiogroup of plans with the current one disabled and the prorated charge announced as it changes — the upgrade dialog, not the marketing table.
Single-Plan Price Cardpricing-singleOne price given a whole card, with the objection a one-time price raises answered under the button rather than in a FAQ further down.
Three-Plan Pricing Togglepricing-tiersThree plans with a monthly/yearly switch, yearly prices derived from the monthly figure so the two can never disagree.
Tiered Usage Calculatorpricing-usage-calculatorA 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.
Pricing Value Splitpricing-value-splitThe case for the price, made beside the price — what the alternative costs, in the units a buyer already measures.
Variant & Add-to-Cart Boxproduct-buy-boxPrice, variant radiogroup, quantity stepper and add-to-bag — with sold-out sizes disabled and visible rather than hidden.
Product Comparison Tableproduct-compare-tableThree 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.
Faceted Filter Sidebarproduct-filter-sidebarCategory, size, colour and price facets as proper fieldsets, with colour swatches that carry their name as well as their hue.
Product Image Galleryproduct-galleryMain 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.
Product Card Gridproduct-gridResponsive product cards with sale badges, ratings and a wishlist button layered above the card link so it stays clickable.
Product Details Accordionproduct-info-accordionDescription, materials, delivery and returns in named <details> elements — no JavaScript, and the copy stays indexable while collapsed.
Scroll-Snap Product Railproduct-railA "you might also like" row on native scroll-snap — touch swiping, momentum and keyboard support for free, with no carousel library.
Rating Distribution Summaryproduct-review-summaryAverage 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 Guideproduct-size-guideThe 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 Splitproduct-spec-splitThe specification table beside the product image, with the two or three figures that decide the purchase pulled out of it.
Product Tour Coach Markproduct-tour-coachmarkA 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.
Push Permission Pre-Promptpush-permission-promptThe 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.
Recent Search Listrecent-search-listThe empty state of a search box, filled with the searches that are worth repeating and the ones worth saving.
Referral Waitlist Formreferral-waitlist-formA waitlist capture that shows position and referral credit, turning a dead-end confirmation into the one action that moves the queue.
Refund Request Formrefund-request-formRefunds 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 Trackerrefund-status-trackerWhere 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 Tablerefunds-overview-tableThe operator queue, sorted oldest-open-first because recency is the wrong default, with blocked as a first-class status that names its blocker.
Service Repair Requestrepair-request-formA 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.
Nothing Found, Answered Honestlyretrieval-empty-stateThe 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.
Retrieval Freshness Listretrieval-freshness-listRetrieved sources ranked by how stale they are, because a confident answer from a two-year-old document is the failure people do not catch.
Index Freshness Panelretrieval-index-statusA 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.
Return or Exchange Pickerreturn-exchange-pickerRefund, 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 Instructionsreturn-label-instructionsThe 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.
Review Distribution Bandreview-distribution-bandThe rating summary with the numbers that make an average trustworthy — the count, the spread and the verified share.
Review Historyreview-history-listThe 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.
Customer Reviewsreview-listSortable reviews with verified-purchase badges, optimistic helpful votes and a real expand control instead of a fade that hides text.
Write a Reviewreview-submit-formThe 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.
Public Roadmap Columnsroadmap-columnsShipped / in progress / planned in three columns, with status carried by icon as well as colour.
Header Search with Suggestionssearch-autocompleteThe 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 Panelsearch-facet-panelFaceted 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.
Range Facet with Histogramsearch-facet-rangeThe 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.
Faceted Search Resultssearch-faceted-resultsThe whole faceted search assembled - rail, chips, live count and sort - with the intersection actually applied and relevance offered only when there is a query.
Grouped Search Resultssearch-results-panelResults grouped by section with visible breadcrumb paths and <mark>-highlighted matches — users recognise where a result lives faster than they read its snippet.
Search Scope Switchersearch-scope-switcherOne 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.
Security FAQsecurity-faq-listThe security questions a buyer's IT reviewer asks, answered with scope and dates rather than with the word "enterprise-grade".
Security Posture Bandsecurity-posture-bandThe compliance and security facts a procurement reviewer asks for, stated as figures with their scope rather than as badges.
Selection Action Toolbarselection-ai-toolbarHighlight 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.
API Key Managementsettings-api-keysMasked keys, a create flow that reveals the secret exactly once, and a revoke that confirms before it fires.
Audit Logsettings-audit-logA compliance-grade trail with named actors, before and after values, IP addresses, and a stated retention window — plus a count of what the active filter is hiding.
Danger Zonesettings-danger-zoneDestructive actions gated by typing the resource name exactly — the pattern GitHub and Stripe use, and for good reason.
Grouped Settings Layoutsettings-nav-layoutSidebar-and-panel settings shell that becomes a horizontal scroller on mobile instead of collapsing into a select.
Notification Channel Matrixsettings-notification-matrixEvery event against every delivery channel in one grid, with column toggles and required rows that show the policy instead of a disabled checkbox.
Profile Form With Save Barsettings-profile-formAvatar, fields and a character counter, with a sticky save bar that only appears once something has genuinely changed.
Active Sessions & Devicessettings-sessionsThe 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.
Team Members & Invitessettings-team-membersMember list with role selects, pending invites shown inline, and the last owner locked so a workspace cannot be orphaned.
Guided Setup Wizardsetup-wizardA 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.
Share & Access Dialogshare-access-dialogThe 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.
Shimmer Skeleton Listskeleton-listLoading placeholders with varied row widths and a sweep that is motion-safe only, falling back to a flat tint under reduced motion.
Slide-Over Edit Panelslide-over-panelA 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.
Answer Source Citationssource-citation-listThe 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.
Enterprise SSO Splitsso-enterprise-splitWhat SSO actually covers, written for the person who has to configure it rather than the person who asked for it.
Hairline Stats Bandstats-bandA four-up metrics strip with 1px hairline dividers, built from a single gap-px grid so the rules stay crisp on any display.
Benchmark Stat Bandstats-benchmark-bandPerformance figures with the measurement method printed beside each one, so a sceptical reader can check rather than take them.
Stat Cards with Deltasstats-cardsMetrics 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.
Before-and-After Metric Tablestats-comparisonThe 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.
Stats Beside the Argumentstats-narrativeFour 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.
Milestone Timelinestats-timelineThe 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.
Stock Availability Liststock-availability-listAvailability per variant stated before the cart, because discovering it at checkout is where the basket gets abandoned.
Subscription Cancel Flowsubscription-cancel-flowSelf-serve cancellation with no dark patterns: the exact date access ends, what breaks, one honest alternative, and a button that works.
Support Chat Widgetsupport-chat-widgetThe 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.
Support Ticket Formsupport-ticket-formA support form that asks for the one thing that halves resolution time — what you already tried — and says when a human will read it.
Support Ticket Threadsupport-ticket-threadThe 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.
Team Gridteam-gridAn 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.
Team Invite Stepteam-invite-stepThe onboarding step where a product becomes multiplayer: pasted addresses split into chips, typos marked rather than dropped, and an honest way to skip.
Scroll-Snap Quote Railtestimonial-carouselTwenty 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.
Masonry Testimonial Walltestimonial-gridQuotes packed by height using CSS multi-column, with star ratings, initial avatars and no ragged bottom edge.
Aggregate Rating Breakdowntestimonial-ratingsA 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.
Single-Quote Spotlighttestimonial-spotlightOne 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.
Video Testimonial Cardstestimonial-videoPoster 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.
Toast Notification Stacktoast-stackA 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.
Upload Progress Listupload-progress-listThe list that follows the dropzone: complete, uploading, queued and failed rows with cancel and retry — because hiding the failure is the classic upload bug.
Upload Requirements Formupload-requirements-formAn upload form that states the constraints before the file is chosen, rather than rejecting it after a two-minute transfer.
Resumable Large Uploadupload-resumableOne 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.
Quota & Usage Metersusage-meter-panelConsumption against plan limits, with warning thresholds, honest overage display and unmetered quotas that do not fake a bar.
Overage Notice with Projectionusage-overage-noticePast the included allowance, with the end-of-month projection and every number the invoice will use — because a surprise bill is a product defect.
Video Call Layoutvideo-call-layoutThe call grid with the state that makes it usable - active speaker, per-tile connection quality, hide self-view, and the you-are-muted nudge.
Voice Message Playervoice-message-playerA 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.
Warranty Coverage Panelwarranty-coverage-panelA verdict for this serial number today, with exclusions given equal weight to cover and an extension offered only while it can still be bought.
Workspace Setup Formworkspace-setup-formThe first screen after signup, asking only the two things that cannot be changed silently later.