Oh Dear UI components examples

Oh Dear

A bento grid layout displaying various features of a monitoring tool. Each card highlights a specific feature like uptime checking, notifications, certificate monitoring, and performance monitoring with a brief description, an illustration or UI snippet, and a 'Learn More' link.

• Bento box

Oh Dear

A numeric input field with a label, a right-aligned unit addon, and helper text below.

• Input number

Oh Dear

A composite input field for entering a URL, featuring a protocol selector dropdown and a text input for the domain.

• Input select

Oh Dear

An inline alert banner indicating an error state, featuring a red accent bar, a message about broken links, and an inline link to a settings screen.

• Message

Oh Dear

A stacked area chart displaying performance metrics over time, with a time range selector and summary statistics for highest, lowest, and average values.

• Charts

Oh Dear

A horizontal row of tabs for navigating different settings categories. The active tab has a colored bottom border and bolder text.

• Tabs

Oh Dear

An open dropdown menu triggered from a user profile button in the top navigation. It contains links for profile settings, team management, team switching, documentation, and logging out.

• Dropdown menu

Oh Dear

A simple informational alert box with an icon and a single line of text explaining notification behavior.

• Tips

Oh Dear

A read-only input field displaying an API token with an inline copy-to-clipboard button.

• Click to copy

Oh Dear

A button group containing an outlined 'Cancel' button and a filled 'Confirm' button.

• Button group

Oh Dear

A simple notification message

• Message

Oh Dear

A pill-shaped badge indicating a successful HTTP status code.

• Badge