Synthesia UI components examples

Synthesia

A toggle switch control with a label and helper text, used to enable or disable public access.

• Toggle/Switch

Synthesia

A toggle switch control with a title and descriptive text, used to enable or disable public access to a published video.

• Toggle/Switch

Synthesia

A video player component showing an AI avatar with playback controls, progress bar, closed captions, and branding.

• Video player

Synthesia

A card displaying a video thumbnail with a circular progress indicator overlaid, showing the video generation status.

• Progress indicator

Synthesia

A vertical sidebar navigation menu with a workspace switcher at the top, followed by categorized links for Home, Videos, and Assets.

• Vertical navigation

Synthesia

A top navigation and toolbar for a video editor. It includes a back button, editable video title, a central group of tool icons, undo/redo controls, and primary actions to play or generate the video.

• Toolbox

Synthesia

A tooltip pointing downwards, providing onboarding instructions with a 'Next' button and a close icon.

• Tooltip

Synthesia

A select input field with a label asking 'How did you hear about Synthesia' and a placeholder 'Select one ...'.

• Input select

Synthesia

A segmented control allowing users to switch between Monthly and Yearly billing cycles, with a discount badge on the Yearly option.

• Segmented control

Synthesia

A sign-in section displaying a title and two social/SSO login buttons.

• Social login button

Synthesia

A list of frequently asked questions presented as an accordion. Each question is a collapsible row with an icon, the question text, and a chevron indicating it can be expanded.

• FAQ

Synthesia

An open dropdown menu displaying a list of resources with icons, titles, and brief descriptions.

• Dropdown menu