Sana UI components examples

Sana

A vertical settings menu with a nested popover for selecting the application theme. The 'Theme' option is currently selected, opening a secondary menu with 'Follow system settings', 'Dark', and 'Light' options.

• Theme settings

Sana

A list item displaying a user's avatar, name, email address, and role.

• Avatar

Sana

A table displaying shared integrations within a workspace, showing details like access level, number of assets, and sync status.

• Table

Sana

A card displaying an integration option for Google Calendar with a description, a link to view disclosure, a connect button, and a privacy indicator.

• Card

Sana

A vertical list of upcoming meetings grouped by relative date, showing meeting title, time, and recording status.

• Timeline & history

Sana

A small card displaying the filename, a success status indicator with an hourglass icon, and a timestamp.

• Alert

Sana

A date range picker component showing two consecutive months with a selected range highlighted.

• Input date

Sana

A toast notification displaying a generic error message with an information icon.

• Alert

Sana

A meeting management interface with calendar integration.

• Vertical navigation

Sana

A dropdown menu for selecting an AI assistant, creating a new one, or accessing settings.

• Input select

Sana

A toggle switch with a title and description, used to set an assistant as the workspace default.

• Toggle/Switch

Sana

A success toast notification confirming that assistant settings have been saved.

• Alert