Skip to content
Create account
or
Sign in
The Stripe Docs logo
/
Ask AI
Create account
Sign in
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Developer tools
Get started
Payments
Finance automation
Get started
Payments
Finance automation
Platforms and marketplaces
Money management
Overview
Versioning
Changelog
Upgrade your API version
Upgrade your SDK version
Developer tools
SDKs
API
Testing
Workbench
Event Destinations
Workflows
Stripe CLI
Stripe Shell
Developers Dashboard
Agent toolkit
Stripe health alertsBuild with LLMsStripe for Visual Studio CodeFile uploads
Security
Security
Extend Stripe
Stripe Apps
    Overview
    Get started
    Create an app
    How Stripe Apps work
    Sample apps
    Build an app
    Store secrets
    API authentication methods
    Authorization flows
    Server-side logic
    Listen to events
    Handle different modes
    Enable sandbox support
    App settings page
    Build a UI
    Onboarding
    Distribute your app
    Distribution options
    Upload your app
    Versions and releases
    Test your app
    Publish your app
    Promote your app
    Add deep links
    Create install links
    Assign roles in UI extensions
    Post-install actions
    App analytics
    Embedded components for Apps
    Embed third-party Stripe Apps
    Migrating to Stripe Apps
    Migrate or build an extension
    Migrate a plugin to Stripe Apps or Stripe Connect
    Reference
    App manifest
    CLI
    Extension SDK
    Permissions
    Viewports
    Design patterns
    Components
      Accordion
      Badge
      Banner
      BarChart
      Box
      Button
      ButtonGroup
      Checkbox
      Chip
      ContextView
      DateField
      Divider
      FocusView
      FormFieldGroup
      Icon
      Img
      Inline
      LineChart
      Link
      List
      Menu
      PropertyList
      Radio
      Select
      SettingsView
      SignInView
      Sparkline
      Spinner
      Switch
      Table
      Tabs
      Tasklist
      TextArea
      TextField
      Toast
      Tooltip
Stripe Connectors
Partners
Partner ecosystem
Partner certification
HomeDeveloper toolsStripe Apps

UI components

Use Stripe’s library of components to quickly build your user interface.

Copy page

If your app needs a frontend, use this reference documentation to compose a UI. Stripe’s library of prebuilt components has customizable properties to help you quickly build apps aligned to Stripe best practices. Use components to structure layouts and create graphical or interactive experiences in your apps.

All components are available in Figma at @stripedesign on Figma Community.

Views

Every view you add needs a view component. These determine which view of your app the user sees at different moments, similar to different HTML pages of a website.

The most common view is ContextView. When a user begins a workflow or task in your app, their view should switch to FocusView to hide the background details. To design your app settings page, use SettingsView. To design a sign in screen, use SignInView.

Some views are root components. ContextView, SettingsView, and SignInView are view roots—the foundational components that contain all other UI elements—whereas FocusView is a child component of ContextView.

Component Description
ContextViewContextView allows apps to render next to Stripe content in a drawer so users can look at them side by side and share context.
SettingsViewUse SettingsView to let users to change details about how the app works with their account.
SignInViewUse SignInView to display a sign in screen to users.

Layout

Use layout components to create the structure of your pages and elements.

Component Description
BoxUse boxes to wrap other components and add custom styles and layouts.
DividerRender a simple horizontal rule with the divider component.

Navigation

Use navigation components to help users wayfind and interact with your app.

Component Description
ButtonButtons allow users to take actions in Stripe products, and you can use them to direct users’ attention or warn them of outcomes.
ButtonGroupUse ButtonGroup to handle the layout for multiple buttons and collapse them into an overflow menu when space is limited.
LinkLinks are used for navigating users from one page to another, and for actions that need more subtlety than a button provides.
MenuA menu presents a group of actions that a user can choose from, often related to a particular object or context.
TabsUse tabs to display sections of content.

Content

Use content components to organize and place information within your app.

Component Description
AccordionUse accordions to split long or complex content into collapsible chunks.
BadgeUse badges to indicate states that an item or object might move through or change to.
BannerUse the Banner to show a variety of alerts or messages you want to make explicit to the user.
ChipUse chips to display and allow users to manipulate values.
FocusViewUse FocusView to open a dedicated space for the end user to complete a specific task.
IconDisplay an icon graphic in a compatible format.
ImgDisplay images with the Img UI component.
InlineUse the inline component to style inline content such as text.
ListDisplay a list of information in a variety of preconfigured formats.
SpinnerUse the Spinner component to indicate something is loading.
TableDisplay rows and columns of data.
ToastInform users of temporary status.
TooltipUse Tooltips to provide additional contextual information about a particular element or subject.

Forms

Use form components to compose input fields and controls that require user input. For example, use them to create checklists or to enable users to select settings.

Component Description
CheckboxUse checkboxes to indicate or control boolean values.
DateFieldUse DateField to create a date input field.
FormFieldGroupGroup form fields with the FormFieldGroup component.
RadioUse Radios to make a selection from a mutually exclusive set of options.
SelectUse Select to pick from a set of options in a dropdown.
SwitchSimilar to Checkboxes, you can use Switches to indicate or control boolean values.
TextAreaUse TextArea to create an input field for multiple lines of text.
TextFieldUse TextField to create a text input field.

Charts

Use chart components to map data points visually. For example, use a chart in your app to help users track payments data or compare progress over time.

Component Description
BarChartA bar chart visualizes data as a series of data points using bars.
LineChartA line chart visualizes data as a series of data points connected into a line.
SparklineA type of line chart to display data succinctly as a simple line.

See also

  • Design patterns to follow
  • Style your app
  • UI testing
Was this page helpful?
YesNo
Need help? Contact Support.
Join our early access program.
Check out our changelog.
Questions? Contact Sales.
LLM? Read llms.txt.
Powered by Markdoc