Skiff UI components examples

Skiff

A floating top navigation bar with an open dropdown menu showing product options.

• Flyout menu

Skiff

A bento grid layout showcasing different product features. Each card highlights a specific app (Mail, Pages, Calendar, Drive) with a title, description, and a visual preview of the interface.

• Bento box

Skiff

A standard website footer containing a logo, social media links, copyright information, and several columns of navigation links categorized by topic.

• Footer

Skiff

A wide, colorful banner prompting the user to register a new personalized domain, featuring a title, subtitle, and a primary call-to-action button.

• Illustration

Skiff

A horizontal time range input showing a start time and an end time, separated by an arrow icon.

• Input date

Skiff

A dark-themed toast notification showing the successful upload of a file to Skiff Drive.

• Notification Toast

Skiff

A syntax-highlighted code block displaying a Javascript fetch request.

• Code block

Skiff

A floating text formatting toolbar with an open color picker popover. The toolbar includes options for text style, color, alignment, and basic formatting. The color picker offers a grid of preset colors for both text and highlight.

• Color picker

Skiff

A floating popover containing a search bar, a grid of selectable icons, and a row of color swatches to customize the selected icon. A 'Remove icon' button is also present.

• Color picker

Skiff

A contextual menu with actions

• Dropdown menu

Skiff

A document editor's more options menu, showing a nested submenu for export formats.

• Dropdown menu

Skiff

A side panel displaying document version history, grouped by date. It includes an active selection, a restore button, and an upgrade prompt for full history access.

• Timeline & history