UI patterns

Give every screen a clear purpose.

Six interface patterns for the everyday work of a SaaS product. Find the right structure, explore the matching Block, and make it your own.

A screen, with a system.UI / 01
  1. 01OrientA clear location
  2. 02UnderstandUseful context
  3. 03ActA visible next step

Illustrative layout · Sample data

Familiar patterns. Considered details.

Illustrative layouts with a practical starting point for each one. Open the related Block for working examples, complete source, and integration guidance.

Dashboard layout

Overview

Help people understand what matters now, what has changed, and where to go next.

  • Lead with a small set of useful metrics
  • Keep recent activity and next actions in context
Explore the stats block

Billing page

Subscription

Bring the current plan, payment details, and billing actions into one predictable place.

  • Make the current plan and status easy to find
  • Separate billing information from plan changes
Explore the billing block

Settings page

Account

Organize everyday preferences and sensitive changes around clear groups of related controls.

  • Group fields by purpose, with a clear save action
  • Keep destructive actions separate
Explore the settings block

Team management

Collaboration

Make it easy to understand who belongs to a workspace and which role each person holds.

  • Keep identity, role, and status together
  • Distinguish invitations from active membership
Explore the members block

Protected app shell

Navigation

Give signed-in screens a consistent frame, with a visible location and predictable navigation.

  • Keep workspace navigation consistent across screens
  • Enforce authentication and permissions in your app
Explore the sidebar block

Upgrade moment

Plan selection

Explain the next plan at a relevant moment, with visible terms and a clear way to continue.

  • Show the value and billing terms before the action
  • Keep the current plan and alternatives visible
Explore the pricing block

The Blocks provide interface structure. Your application supplies data, authentication, permissions, and payment behavior.

From a useful pattern to your product.

Keep the structure consistent while making the experience specific to your users.

  1. 01

    Choose the structure

    Start with the job your user needs to do. Pick the pattern that gives information and actions a clear order.

    Browse the patterns
  2. 02

    Make it your own

    Open the related Block for its example and source. Apply your tokens and adapt the content to your product.

    Open Theme Builder
  3. 03

    Connect the behavior

    Wire up your data, permissions, and actions. Review loading, empty, error, and success states in your application.

    Read the integration docs
A complete starting point

See the pieces work together.

Explore the patterns in a runnable application, then choose the foundation that matches your next step.

Explore the application screens

Starter Free

Open source

Run the screens, explore the navigation, and adapt the interface with demonstration data.

Authentication, billing, and product data are mocked.

Explore Starter Free

Starter Pro

Commercial

Start with connected foundations for authentication, billing, and protected application routes.

Configure your services, add product logic, and validate before launch.

See what’s included