Gemini UI components examples

Gemini

A split-layout hero section featuring a large logo, headline, description, and primary call-to-action button on the left, paired with a large lifestyle image on the right. A top navigation bar includes secondary links and another sign-in button.

• Hero section

Gemini

A settings modal with toggle switches.

• Theme settings

Gemini

A card displaying an extension for Google Flights, including an icon, title, handle, description, a toggle switch to enable/disable it, and a list of suggested prompts.

• Card

Gemini

• Click to copy

Gemini

A code block component displaying generated SQL code with syntax highlighting, a language label, a horizontal scrollbar, and a footer containing a disclaimer and a copy button.

• Code block

Gemini

A vertical sidebar navigation menu for an AI chat application. It includes a hamburger menu icon, a 'New chat' button, a list of recent chats, utility links for Help, Activity, and Settings, and a location indicator at the bottom.

• Vertical navigation

Gemini

A chat composer input field showing a loading state for an uploaded file. It includes placeholder text and icons for image upload and voice input.

• File upload input

Gemini

A dark, rectangular toast notification confirming that content has been copied to the clipboard.

• Notification Toast

Gemini

A popover asking for feedback on a fact-check highlight within an AI-generated response. It offers 'Helpful' and 'Not helpful' options with thumbs up and thumbs down icons.

• Feedback

Gemini

A text editor modal with a text selection and a modify button.

• Artificial intelligence

Gemini

• Artificial intelligence

Gemini

A list of park descriptions with draft options.

• Artificial intelligence