Magic Beans UI components examples

Browse Magic Beans UI component design examples. Preview individual interface elements and explore related component categories. Run your startup finances from Notion

Finance app examples

Explore the examples

Magic Beans — Alert component

A success message modal

Alert

Magic Beans — Checkbox & radio component

Checkbox & radio

Magic Beans — Notification Toast component

A confirmation message

Notification Toast

Magic Beans — Illustration component

A stack of cards displaying bank account balances.

Illustration

Magic Beans — Tooltip component

A button with a tooltip

Tooltip

Magic Beans — Dropdown menu component

A dropdown menu with selectable options.

Dropdown menu

Magic Beans — Card component

A card displaying financial information.

Card

Magic Beans — Table component

A table of invoices with different statuses.

Table

Magic Beans — Tooltip component

Tooltip

Magic Beans — Charts component

A card displaying expense splits with progress bars.

Charts

Magic Beans — Card component

A card displaying financial expenses with a progress bar.

Card

Magic Beans — Charts component

A line chart showing revenue over expenses.

Charts

Browse the full component library

Browse the full UI component library.

Trusted by the best teams

Related apps

Related screens

SaaS screen examples

Related marketing pages

SaaS marketing page examples

Related components

SaaS UI component examples

Related flows

User flow examples from SaaS apps