UI components
Use the Stripe components library to build your user interface.
If your app needs a front end, use this reference documentation to compose a UI. The Stripe library of prebuilt components has customizable properties to help you build apps aligned with Stripe best practices. Use components to structure layouts and create graphical or interactive interfaces in your apps.
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, switch their view 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. |
| FullPageView | Use FullPageView to render your app in a full-page viewport. |
| OnboardingView | Use OnboardingView to guide users through an onboarding flow in your app. |
| 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. |
| DetailPage | Use DetailPage to implement detail-style layouts in your app. |
| Divider | Render a simple horizontal rule with the divider component. |
| OverviewPage | Use OverviewPage to implement overview-style layouts in your app. |
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. |
| DataTable | Use DataTable to display tabular data with sorting, filtering, and pagination. |
| 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. |
| PropertyList | Use PropertyList to display data as key-value pairs. |
| Spinner | Use the Spinner component to indicate something is loading. |
| Table | Display rows and columns of data. |
| TaskList | Use TaskList to help users track progress through a list of tasks. |
| 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 |
|---|---|
| Checkbox | Use checkboxes to indicate or control boolean values. |
| CurrencyField | Use CurrencyField for handling payment amounts. |
| DateField | Use DateField to create a date input field. |
| DateRangePicker | Use DateRangePicker to collect a date range from users. |
| FormFieldGroup | Group form fields with the FormFieldGroup component. |
| Radio | Use Radios to make a selection from a mutually exclusive set of options. |
| SearchField | Use SearchField to let users search and filter content in your app. |
| 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.
| Component | Description |
|---|---|
| BarChart | A bar chart visualizes data as a series of data points using bars. |
| LineChart | A line chart visualizes data as a series of data points connected into a line. |
| Sparkline | A type of line chart to display data succinctly as a simple line. |
| MeterChart | A meter chart displays a whole divided into segments, each representing a proportion of the total. |