Ready-made sections

A centered authentication card with email + social login.

A create-account card with email, password, terms, and social sign-up.

A password reset flow with an email request, a sent confirmation, and a new-password form.

A two-factor authentication card with a six-digit one-time code entry.

A passwordless email link flow with a request and a sent confirmation.

Two-factor authentication setup and password management with a danger zone.

Active device sessions with per-session and bulk revoke, plus an empty sessions list.

API key management with masked secrets, scopes, a scoped create flow, and an empty keys list.

Per-channel notification controls as a matrix or grouped toggle list.

A centered marketing hero with eyebrow, headline, copy and CTAs.

A three-tier pricing grid with a highlighted plan.

A plan-comparison matrix with grouped feature rows, per-plan checks and limits, and an elevated popular column that stacks into cards on mobile.

A responsive grid of product features with icons.

A bold gradient call-to-action banner.

Social proof with avatar trust line and a wall of customer testimonials.

An accessible accordion of frequently asked questions.

A full site footer with brand block, link columns, and a newsletter sign-up.

A contained, rounded marketing navigation bar with brand mark and CTAs.

A product release feed on a vertical timeline with version badges, dates, and typed Feature/Fix/Perf change rows.

A waitlist capture hero with an early-access pill, a gradient headline, an inline email form that swaps to a joined state, and avatar social proof.

Blog index layouts: a featured hero post with a responsive post grid, and an editorial list with larger typography.

Article detail layouts with token-styled prose (headings, blockquote, inline code), author card, hero art, and a share row.

Customer trust sections built from wordmark-style text logos in text-fg-tertiary — a quiet grid and a dual counter-scrolling marquee.

Company about sections: mission story with stats, founder quote, and milestone timeline; plus a values card grid with a token-built culture collage.

A dashboard row of KPI metric cards with trends.

Account and workspace settings — profile and preferences, or name, slug, defaults, and a danger zone.

A team list with avatars, roles and a menu.

A get-started welcome panel with quick-start actions.

A multi-step setup flow with a stepper and a form panel.

A setup-progress checklist with a progress bar and per-item actions.

A social post with author, content, and engagement actions.

A threaded comment list with a composer and a nested reply.

A user profile card with a cover, stats, and a follow action.

A full application shell with sidebar nav, KPI cards, a chart, and a table.

Team member administration for a B2B SaaS workspace — a searchable directory table with role filter, status badges, per-user action menus and pagination, plus an empty directory and a card-grid variant for small teams.

Admin analytics surfaces — KPI metrics with sparklines, a 30-day traffic trend and top pages/referrers breakdowns with progress bars, plus a cohort-retention engagement variant built from token-colored heat cells.

A sprint board with four columns of labeled cards — Badge labels, assignee avatar stacks, due dates and comment counts — plus an empty board and a dense compact variant with per-column WIP limits and at-limit indicators.

A security audit trail — a grouped-by-day timeline feed with actor avatars, emphasized actor/object names and severity badges, plus an empty log and a filterable table variant with event-type badges, actors, IPs and expandable detail hints.

Subscription management, usage meters, invoices, and a plan selector.

A current-subscription card with a renewal banner, usage meters, payment method, and plan actions.

Choose a saved card from a radio list or add a new card with a full card-entry form.

A usage analytics panel with metric cards, trend sparklines, quota meters, and a top-resources table.

A cancellation survey with reason options and a retention offer to keep the subscription.

A product checkout with an order summary and a card payment form.

A creator payout dashboard with balance cards and a settlement history table.

A digital-products storefront grid of product cards with prices and buy buttons, an empty catalog, a filter sidebar, or an editorial showcase.

An invoice receipt with line items, totals, status, and a download action.

Full product page section with gallery art, rating, variant selectors, quantity stepper, add-to-cart CTA and detail accordions.

Shopping cart surfaces: a full cart page with editable line items and order summary, an empty cart, and a static slide-over drawer composition.

Shipment status card with a vertical timeline, ETA banner and courier info across in-transit, delivered and delayed states.

Customer purchase history as a dense table with row actions, an empty orders table, or stacked order cards with thumbnails and reorder.

Customer reviews: aggregate rating with distribution bars plus top reviews, an empty reviews state, or a dense compact grid of short reviews.

A page header with breadcrumbs, title, status, actions, and optional tabs.

A search and filter toolbar with chips and a result count.

Empty and error states with illustrations, guidance, and recovery actions.

A service-status section with an operational banner, per-service 45-day uptime bars, and an incident-history link.

An assistant conversation card with user and AI bubbles, a typing indicator, and a message composer.

A standalone AI composer with suggestion chips, a model picker, and attach and send actions.

An assistant answer card with formatted content, cited sources, and feedback and regenerate actions.

A dropdown notifications list with avatars, unread markers, and a mark-all-read action.

A vertical timeline of recent events with toned icons, timestamps, and detail.

A stack of success, error, warning, and info toasts with icons and dismiss actions.

A branded welcome email with a get-started CTA and onboarding quick links.

A branded purchase receipt email with an itemized table, totals, and an invoice action.

An email-confirmation message with a verify button and a fallback one-time code.

A centered 404 page with a search field and back-to-home and support actions.

A full-page error state with an error code, a retry action, and a support link.

A centered confirmation state with a success icon and follow-up actions.

A scheduled-maintenance page with an estimated downtime and a notify-me email capture.

An NPS card with a 0–10 score scale and an open-ended reason field.

A feedback card with a star rating, category chips, and an optional details field.

A two-column contact section pairing contact methods with a name, email, and message form.

A marketing integrations section with an eyebrow header and a responsive grid of connectable service tiles.

A sidebar + header application shell that wraps page content — the chrome the (app) route group uses for dashboard pages.