Pipe UI components examples

Name: Pipe
Author: Bertrand

Browse Pipe UI component design examples. Preview individual interface elements and explore related component categories. The modern capital platform

Finance app examples

Explore the examples

Pipe

A large dropdown menu showing resources, company links, and a featured blog post.

Flyout menu

Pipe

A dark-themed hero section featuring a centered headline, subheadline, and a primary call-to-action button. It includes a top navigation bar with a logo and links, and a mockup of a product interface at the bottom.

Hero section

Pipe

A bar chart showing a payback schedule over several months, with a title and explanatory text above it.

Charts

Pipe

A card displaying the status of a connected data source, showing the source name, a status badge indicating it is synced, and a timestamp of the last sync.

Card

Pipe

A settings row with a title, descriptive text, and a toggle switch to enable or disable two-factor authentication.

Toggle/Switch

Pipe

A radio group presenting four payback period options (3, 6, 9, and 12 months) with associated bid prices and trade limits. The 12-month option is currently selected.

Checkbox & radio

Pipe

A widget displaying payment statistics with a title, two KPI columns for 'Total paid' and 'Total remaining', and a segmented progress bar showing zero activity.

Charts

Pipe

An empty state for a trading activity bar chart. It displays a zero balance, a time range toggle, and a faded background chart with a prompt and button to start trading.

Charts

Pipe

A composite control allowing users to set a monetary amount using either a text input field or a horizontal slider. It includes a label, a currency symbol prefix, and helper text indicating the remaining available amount.

Slider

Pipe

A dark-themed popover explaining terms, featuring a title, description, an accordion for FAQs, and pagination controls with previous/next buttons.

Accordion

Pipe

A dark-themed popover explaining how capital access is determined, featuring a close icon, descriptive text, a dot pagination indicator showing progress through the tour, and a next arrow button.