Tome UI components examples

Tome

A dark-themed dropdown menu originating from a top navigation bar. The 'Use Cases' item is active, revealing a list of specific use cases like Sales, Marketing, and Product.

• Flyout menu

Tome

A dark-themed hero section featuring a bold headline, a descriptive subheadline, and two call-to-action buttons on the left. On the right, a large, angled product screenshot showcases the presentation platform's interface.

• Hero section

Tome

An open dropdown menu for selecting a default brand theme. The list displays various theme options, each with a small preview thumbnail showing title and body text colors, alongside the theme name. The currently selected theme has a checkmark next to it.

• Theme settings

Tome

An input field for inviting members, showing an email address entered as a tag, a role selector dropdown, and an Invite button.

• Input tag

Tome

A list of features that are locked behind a Pro subscription. Each item shows a title, description, a 'PRO' badge, and an 'Upgrade' button.

• Upgrade your plan

Tome

A simple text-only empty state message indicating the user hasn't been added to any items yet.

• Empty state

Tome

A dark-themed top navigation area featuring a prominent red banner alerting the user that their workspace has exceeded the free plan's creation limit, alongside a call-to-action button to upgrade. Below the banner is a header with a user profile dropdown, a notification bell,…

• Upgrade your plan

Tome

An empty slide state in a presentation editor offering three primary actions to populate the slide: Generate (with AI), Upload, or Search. The actions are presented as large, square, semi-transparent buttons centered within a bordered slide area.

• Empty state

Tome

A grid of selectable layout templates for a presentation slide, displayed in a dark-themed popover.

• Grid list

Tome

A dark-themed command palette with a text input field at the bottom and a list of suggested actions above. The user has typed 'add page' into the input field, filtering the list to show related actions like 'Create presentation about...', 'Add page', and 'Create page…

• Upgrade your plan

Tome

A dark-themed toast notification displaying the progress of an AI presentation generation task. It includes a title, a truncated prompt snippet, and a circular progress indicator.

• Skeleton

Tome

A document preview card showing a presentation title and metadata, with an open context menu overlay displaying file actions like Open, Duplicate, and Delete.

• Dropdown menu