Arrows UI components examples

Arrows

A global navigation header with an expanded mega menu dropdown. The dropdown reveals a list of learning resources and a featured guide card.

• Flyout menu

Arrows

A dark-themed hero section featuring a prominent headline, subheadline, dual call-to-action buttons, and a logo wall of customer companies.

• Hero section

Arrows

A settings section with a title, a divider, and a single configuration option. The option includes a primary label, a secondary description, and a checked checkbox aligned to the right.

• Checkbox & radio

Arrows

A number input control with a label indicating 'Days after plan creation date'. The input features minus and plus buttons to decrement or increment the value, currently set to 0.

• Input number

Arrows

A dark tooltip displaying the text 'Duplicate template' positioned above a copy icon in a list row.

• Tooltip

Arrows

A table displaying a list of templates with their names, usage statistics, and task/phase counts. Each row includes inline edit, duplicate, and delete actions.

• Table

Arrows

A card displaying a startup plan with a progress indicator.

• Tooltip

Arrows

A pill-shaped badge displaying a numeric progress ratio alongside a circular progress indicator with a play icon.

• Progress indicator

Arrows

A paywall card prompting the user to unlock a premium feature. It includes a badge, a title with a lock icon, a video preview of the feature, a descriptive paragraph, and a primary call-to-action button to contact sales.

• Upgrade your plan

Arrows

An open dropdown menu for selecting the status of an item, showing options like Active, Complete, Failed, and Archived.

• Dropdown menu

Arrows

A simple area chart displaying engagement over the last 30 days, with a flat line that spikes at the end of the date range.

• Charts

Arrows

A row of three KPI tiles displaying activity metrics: Tasks completed, Views, and Total engagements.

• Charts