Examples

Production-ready SaaS UI patterns. Copy any block and adapt.

Sign-in form

Auth card with social SSO, divider, email/password fields, and link.

Welcome back

Sign in to continue to your dashboard.

OR
New here? Create an account

Multi-step signup

Onboarding wizard with progress steps, form fields, and clear next-action button.

Account
Workspace
Invite team
Done
app.lux.com/

Billing & usage

Plan card, usage progress, payment method, recent invoices table.

Current Plan

Pro

Active

$29/month · Renews Dec 15

Usage847K / 1M

Payment method

VISA
•••• 4242
Expires 12/27

Recent invoices

InvoiceDateAmountStatus
INV-2026-11Nov 15, 2026$29.00Paid↓ PDF
INV-2026-10Oct 15, 2026$29.00Paid↓ PDF
INV-2026-09Sep 15, 2026$29.00Paid↓ PDF

API keys management

Table with key preview, scopes, last-used, copy, and revoke actions.

API keys

Keys are scoped to environments. Treat them like passwords.

NameKeyScopesLast used
Productionsk-proj-…a4f2 read write2 min ago
Stagingsk-proj-…b7c3read3 hours ago
CI/CDsk-proj-…e9d1read write adminYesterday

Account settings

Sectioned settings form with switches, fields, danger zone.

Profile

SR

Preferences

Danger zone

Permanently delete your account. This cannot be undone.

AI chat input

Auto-expanding textarea with model selector, attachment, and send action.

Pricing tiers

3-tier pricing with featured "Popular" tier and feature list.

Starter
$0/mo
  • 10K tokens/month
  • 1 project
  • Community support
Pro
$29/mo
  • 1M tokens/month
  • Unlimited projects
  • Priority support
  • Custom domain
Enterprise
Custom
  • Unlimited everything
  • SAML/SSO
  • Dedicated support
  • Custom SLA

Onboarding checklist

Activation checklist with progress, completion states, and nudge.

Get started

3 of 5 complete · Almost there

  • Create account
    Welcome! Account ready.
  • Invite teammate
    3 members in workspace.
  • Connect GitHub
    2 repositories linked.
  • Deploy first app
    Push to main to trigger.
  • Configure billing
    Required before going live.

Mini dashboard tile

Stat tile with sparkline trend, comparison delta, and action.

MRR
$48.2k
↑ 23%
Active users
12.4k
↑ 12%
Churn
2.1%
↓ 0.3%
CSAT
4.8
↑ 0.2

Empty state

Illustrative empty state with primary CTA and secondary link.

No activity yet

Once your team starts deploying, you'll see activity logs here. Connect your first repo to get started.

File upload (drag & drop)

Click or drag files. Drop zone highlights on hover, shows file list below with size + remove.