UI components
Use Stripe’s library of components to quickly build your user interface.
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 |
|---|---|
| ContextView | ContextView allows apps to render next to Stripe content in a drawer so users can look at them side by side and share context. |
| SettingsView | Use SettingsView to let users to change details about how the app works with their account. |
| SignInView | Use SignInView to display a sign in screen to users. |
Layout
Use layout components to create the structure of your pages and elements.
| Component | Description |
|---|---|
| Box | Use boxes to wrap other components and add custom styles and layouts. |
| Divider | Render a simple horizontal rule with the divider component. |
Navigation
Use navigation components to help users wayfind and interact with your app.
| Component | Description |
|---|---|
| Button | Buttons allow users to take actions in Stripe products, and you can use them to direct users’ attention or warn them of outcomes. |
| ButtonGroup | Use ButtonGroup to handle the layout for multiple buttons and collapse them into an overflow menu when space is limited. |
| Link | Links are used for navigating users from one page to another, and for actions that need more subtlety than a button provides. |
| Menu | A menu presents a group of actions that a user can choose from, often related to a particular object or context. |
| Tabs | Use tabs to display sections of content. |
Content
Use content components to organize and place information within your app.
| Component | Description |
|---|---|
| Accordion | Use accordions to split long or complex content into collapsible chunks. |
| Badge | Use badges to indicate states that an item or object might move through or change to. |
| Banner | Use the Banner to show a variety of alerts or messages you want to make explicit to the user. |
| Chip | Use chips to display and allow users to manipulate values. |
| FocusView | Use FocusView to open a dedicated space for the end user to complete a specific task. |
| Icon | Display an icon graphic in a compatible format. |
| Img | Display images with the Img UI component. |
| Inline | Use the inline component to style inline content such as text. |
| List | Display a list of information in a variety of preconfigured formats. |
| Spinner | Use the Spinner component to indicate something is loading. |
| Table | Display rows and columns of data. |
| Toast | Inform users of temporary status. |
| Tooltip | Use 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 |
|---|---|
| Tickbox | Use checkboxes to indicate or control boolean values. |
| DateField | Use DateField to create a date input field. |
| FormFieldGroup | Group form fields with the FormFieldGroup component. |
| Radio | Use Radios to make a selection from a mutually exclusive set of options. |
| Select | Use Select to pick from a set of options in a dropdown. |
| Switch | Similar to Checkboxes, you can use Switches to indicate or control boolean values. |
| TextArea | Use TextArea to create an input field for multiple lines of text. |
| TextField | Use 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.