HeyGen UI components examples

HeyGen

Primary input area for entering video script text and configuring avatar, motion, voice, and resolution settings.

• Artificial intelligence

HeyGen

Rounded light-blue card with location pin icon, quota limit message and white Upgrade Plan button with diamond icon

• Upgrade your plan

HeyGen

Prompts user to upgrade to Creator plan to unlock video downloads and premium features

• Modal

HeyGen

Displays generated video with playback controls and timeline for review and iteration

• Video player

HeyGen

Prompts user to provide thumbs up/down rating on the AI-generated video with dismiss option

• Feedback

HeyGen

Lets the user pick an age category for the AI avatar

• Input select

HeyGen

Primary area for uploading audio or video files to create a voice clone

• File upload input

HeyGen

Encourages selection of an example prompt to quickly start AI avatar configuration

• Message

HeyGen

Shows progress and checklist of onboarding tasks for new users on the home screen.

• Progress indicator

HeyGen

Top navigation bar providing page title, global search, sort, filter, delete, and notification access for the avatar videos list view

• Horizontal navigation

HeyGen

Indicates no matching results for current filters in a list view

• Empty state

HeyGen

Lets users switch between All, Tools, and Projects filters in the search overlay

• Tabs