ChatGPT UI components examples

ChatGPT

A pricing comparison modal showing two plans: Plus (current) and Team (upgrade option). It lists features for each plan and provides a primary call to action to add a Team workspace.

• Upgrade your plan

ChatGPT

• Feedback

ChatGPT

A dropdown menu with several options.

• Dropdown menu

ChatGPT

A modal dialog for configuring sharing permissions for a custom GPT. It presents three options: 'Only me', 'Anyone with the link', and 'GPT Store', with 'Only me' currently selected.

• Modal

ChatGPT

A segmented control with two options: Create and Configure. The Configure option is currently selected.

• Segmented control

ChatGPT

A search input field with a dropdown list of results showing custom GPTs related to the query 'Data'. Each result includes an avatar, title, description, creator name, and usage count.

• Input search

ChatGPT

A search input field for finding GPTs, accompanied by a horizontal row of category tabs below it.

• Input search

ChatGPT

A chat input field showing an active 'Edit selection' state above the main message input area.

• Input text

ChatGPT

A vertical sidebar navigation menu showing recent chat history grouped by date, along with primary app links and a workspace upgrade prompt.

• Vertical navigation

ChatGPT

A line chart showing weekly running distance with a color picker modal.

• Color picker

ChatGPT

A three-column pricing table comparing Free, Plus, and Team plans. Each column lists features, price, and includes a call-to-action button.

• Pricing section

ChatGPT

A code snippet modal

• Code block