Deepnote UI components examples

Deepnote

A table displaying workspace members with their names, emails, and access levels. It includes a search filter in the header and dropdowns to change access levels for pending invitations.

• Table

Deepnote

A single line of text providing keyboard shortcut instructions for navigating and interacting with a command palette or menu.

• Tips

Deepnote

A dropdown menu with project actions.

• Dropdown menu

Deepnote

A read-only input field displaying a truncated URL with a copy icon button.

• Click to copy

Deepnote

A vertical list of recent events in a notebook, showing the action taken, the file affected, relative timestamps, and the user who performed the action. One item is expanded to show action buttons.

• Timeline & history

Deepnote

A light gray code block displaying a SQL query with a 'Copy to clipboard' action in the top right corner.

• Click to copy

Deepnote

A blue pill-shaped tooltip or helper text that appears inline, instructing the user on how to edit a block of content.

• Tips

Deepnote

A horizontal row of text-based tabs used for navigating between different sections of a project workspace. The 'Project' tab is currently active, indicated by bolder, darker text.

• Tabs

Deepnote

A split button with a primary action to run a notebook and a dropdown for additional options.

• Button

Deepnote

A code block component displaying a SQL query with syntax highlighting. It includes a top toolbar for selecting the database connection and saving to a variable, and a bottom footer indicating hidden output with a link to show it.

• Code block

Deepnote

This is a side navigation menu with a search bar and a list of options.

• Vertical navigation

Deepnote

A simple two-level breadcrumb showing the current location within a workspace.

• Breadcrumb