# Design patterns for Stripe Apps

Follow our recommended design patterns to expedite your Stripe app review.

Patterns function as the foundation of your app design. Think of them as a combination of components—for example, combining the **Spinner** and other individual components to create a **Loading screen**. As we establish new patterns, we’ll add guidance to this section. Follow these patterns as you design your app so that it functions in a consistent, clear, and scalable manner.

## Layout

- [Full-page apps](https://docs.stripe.com/stripe-apps/patterns/full-page-apps.md): Learn how to build a custom Stripe Dashboard page that provides a complete, multi-view interface for your users.
- [Chart layout](https://docs.stripe.com/stripe-apps/patterns/chart-layout.md): Choose the right chart for your data and control sizing, arrangement, and layout within your app.
- [Lists](https://docs.stripe.com/stripe-apps/patterns/lists.md): Use this pattern to organize information as a list.
- [Filter controls](https://docs.stripe.com/stripe-apps/patterns/filter-controls.md): Use this pattern to let users filter table rows with Chip and adjust chart views with Select.

## Onboarding

- [Onboarding](https://docs.stripe.com/stripe-apps/patterns/onboarding-experience.md): Provide users with an onboarding flow that’s secure and intuitive.
- [Sign in](https://docs.stripe.com/stripe-apps/patterns/sign-in.md): Apply this recommended sign in or sign up template as the first step in your onboarding flow.
- [Settings sign in](https://docs.stripe.com/stripe-apps/patterns/settings-signin.md): When building a back-end only app, build your onboarding flow as part of the user’s Stripe settings.
- [Demo content](https://docs.stripe.com/stripe-apps/patterns/demo.md): When showing demo content, follow this pattern to highlight the top functionality that your app offers.
- [Additional context](https://docs.stripe.com/stripe-apps/patterns/additional-context.md): When providing users with additional context, dedicate a space for it on a separate screen.
- [Redirect to Stripe](https://docs.stripe.com/stripe-apps/patterns/redirects.md): If users need to open a new tab to complete the onboarding flow, use this pattern to provide users a clear path back to Stripe.
- [Sign out](https://docs.stripe.com/stripe-apps/patterns/sign-out.md): Use this pattern to provide users with a clear and universal flow when signing out of your app.

## User actions

- [Back link](https://docs.stripe.com/stripe-apps/patterns/back-link.md): Use this pattern to allow users to go to a previous page.
- [Action buttons](https://docs.stripe.com/stripe-apps/patterns/action-buttons.md): Use this pattern to emphasize the primary action a user needs to complete.

## Status

- [Communicating state](https://docs.stripe.com/stripe-apps/patterns/communicating-state.md): Use this pattern to clearly communicate the status of a request to users.
- [Empty state](https://docs.stripe.com/stripe-apps/patterns/empty-state.md): Use this pattern to make sure that users know that there’s no data available to load.
- [Loading](https://docs.stripe.com/stripe-apps/patterns/loading.md): Use this pattern to make sure that users know that data is being downloaded.
- [Progress stepping](https://docs.stripe.com/stripe-apps/patterns/progress-stepping.md): Use this pattern to make sure users can track step-by-step progress toward a specific task.
- [Waiting screens](https://docs.stripe.com/stripe-apps/patterns/waiting-screens.md): Use this pattern to make sure users clearly understand that they’re connecting to Stripe.