Skip to content

Whimsical UI components examples

Browse Whimsical UI component design examples. Preview individual interface elements and explore related component categories. The hub for visual collaboration

Explore the examples

Whimsical — Flyout menu component
Whimsical logo
Whimsical

A large dropdown menu displaying categorized navigation links and a featured call to action.

Whimsical — Flyout menu component
Whimsical logo
Whimsical

A top navigation bar with an expanded mega menu dropdown for the 'Product' tab, displaying a grid of documentation tools and an AI feature highlight.

Whimsical — Toggle/Switch component
Whimsical logo
Whimsical

A single row containing a text label and a toggle switch, used for configuring a specific workspace setting.

Whimsical — Upgrade your plan component
Whimsical logo
Whimsical

A section header with a title on the left and a badge indicating the feature is paywalled on the right.

Whimsical — Progress indicator component
Whimsical logo
Whimsical

A card displaying the current usage of a free tier limit, showing 0 out of 3 boards used with a visual block indicator.

Whimsical — Tooltip component
Whimsical logo
Whimsical

A large, rich tooltip pointing to a toolbar icon, featuring an image, title, description, and a primary action button to dismiss it.

Whimsical — Upgrade your plan component
Whimsical logo
Whimsical

A card prompting the user to upgrade to a Pro plan to unlock custom templates and themes, featuring an illustration, descriptive text, and a primary call-to-action button.

Whimsical — Toolbox component
Whimsical logo
Whimsical

A vertical floating menu containing a list of tools and actions, each with an icon, label, and optional keyboard shortcut or nested menu indicator. A search bar is at the top.

Whimsical — Breadcrumb component
Whimsical logo
Whimsical

A breadcrumb navigation showing the current document title 'Getting Started' within 'MY FILES', accompanied by a dropdown menu trigger and a star icon for favoriting.

Whimsical — Toolbox component
Whimsical logo
Whimsical

A vertical, floating toolbar containing various design and whiteboard tools represented by icons, including sticky notes, wireframes, and text.

Whimsical — Vertical navigation component
Whimsical logo
Whimsical

A vertical sidebar navigation menu for a workspace, featuring a workspace switcher, a prominent 'Create new' button, collapsible file and team sections, an invite prompt, and utility links at the bottom.

Whimsical — FAQ component
Whimsical logo
Whimsical

A frequently asked questions section using an accordion layout. The first question is expanded to show the answer, while the rest are collapsed.

Browse the full component library

Browse the full UI component library.

Trusted by the best teams