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 and a sent confirmation.

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.

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

A three-tier pricing grid with a highlighted plan.

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 dashboard row of KPI metric cards with trends.

An account settings form with switches and inputs.

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.

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 invoice receipt with line items, totals, status, and a download action.

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.

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.