Otter UI components examples

Otter

An expanded accordion section for configuring notification preferences. It includes a header with an icon, title, and description, followed by a list of notification channels (Push, Email) with toggle switches.

• Toggle/Switch

Otter

A card displaying the user's current plan details, including a circular progress indicator for remaining minutes, trial expiration date, upcoming subscription cost, and a call-to-action button to subscribe.

• Progress indicator

Otter

• Table

Otter

A list view displaying deleted items with checkboxes for bulk actions. Includes a header with a warning message and an action to empty the trash.

• Table

Otter

• Progress indicator

Otter

• Dropdown menu

Otter

A simple five-star rating component prompting the user to rate transcript quality.

• Feedback

Otter

A modal overlay for searching meeting transcripts. It includes a search bar, an AI chat prompt, a results list with highlighted keywords, and a sidebar for filtering by conversation, speakers, channels, folders, and date.

• Modal

Otter

A floating search modal overlay containing a search input scoped to 'This Conversation' and a promotional banner for an AI chat feature.

• Artificial intelligence

Otter

A modal dialog for sharing a resource, allowing users to add collaborators by name, email, or channel, manage existing access, and copy a sharing link.

• Modal

Otter

A tabbed panel displaying an AI-generated meeting outline. The active 'Outline' tab shows a list of collapsible sections, each representing a topic discussed in the meeting with a timestamp. The first section is expanded, revealing a bulleted summary.

• Artificial intelligence

Otter

A sidebar panel containing an AI chat interface. It features top-level tabs for AI Chat, Outline, and Comments. The main area displays a chat interface with inner tabs for Suggestions and History, showing suggested prompts. A composer input field is at the bottom.

• Artificial intelligence