Stripe UI components examples

Stripe

An open mega menu dropdown displaying a grid of resource links with icons, divided into a primary white section and a secondary light blue section.

• Flyout menu

Stripe

A large dropdown menu containing categorized links and resources, triggered from a top navigation bar.

• Flyout menu

Stripe

A large dropdown menu appearing from a top navigation bar, categorizing links by stage, use case, and integrations.

• Flyout menu

Stripe

A large dropdown menu displaying product categories on the left and specific products with icons and descriptions on the right.

• Flyout menu

Stripe

A large, multi-column dropdown menu displaying product categories and individual products with icons and descriptions.

• Flyout menu

Stripe

The hero section of the Stripe homepage featuring a large headline, a descriptive subheadline, primary and secondary call-to-action buttons, and a dynamic, colorful background. It also includes a mock UI of a payment form and a dashboard to illustrate the product's capabilities.

• Hero section

Stripe

A comprehensive data table displaying a log of developer events, including event descriptions, IDs, and timestamps. It features a header with a title, tabs for navigation, a filter button, an informational banner, and pagination controls at the bottom.

• Table

Stripe

A line chart displaying the number of successful and failed API requests over time. It includes a title, summary metrics for successful and failed requests, and a line graph with a date range on the x-axis.

• Charts

Stripe

A line chart showing API error distribution over time, with KPI summaries for GET, POST, and DELETE requests above the chart.

• Charts

Stripe

A progress indicator showing a completed integration status. It includes a title, a success message, a step counter badge, a fully green progress bar with four segments, a descriptive text block, and a 'Done' button.

• Progress indicator

Stripe

A visual workflow builder showing a sequence of automated actions for when a payment fails. It includes steps for retry policies, delays, and canceling subscriptions, connected by a vertical timeline.

• Query builder

Stripe

A combination bar and line chart showing recovery breakdown over time. It features stacked bars for different recovery statuses and a line indicating the recovery rate, with a legend and an 'Explore' button at the top.

• Charts