HeroUI Chat

Interaction Patterns

5 snippets

Dropdown with Avatar Menu

Create a profile dropdown menu triggered by avatar using HeroUI Dropdown and Popover.

Create an avatar dropdown menu using HeroUI. Features: - Avatar as trigger - Dropdown items: Profile, Settings, Logout - Hover and keyboard navigation - Close on outside click - Use HeroUI Dropdown + Popover components

Onboarding Modal Flow

Create a multi-step onboarding modal using HeroUI Dialog with progress indicator.

Build an onboarding flow using HeroUI Modal/Dialog. Requirements: - Multi-step content - Step indicators or progress bar - Next / Back buttons - Final success message - Smooth transitions between steps

Floating Action Button

Add a FAB (Floating Action Button) at bottom-right using HeroUI Button and fixed positioning.

Create a floating action button using HeroUI. Features: - Positioned bottom-right (fixed, z-50) - Round icon button with shadow - Trigger any action (e.g., create, message) - Accessible with aria-label and keyboard

Confirm Delete Dialog

Prompt user for confirmation before deleting an item using HeroUI AlertDialog.

Create a delete confirmation modal using HeroUI AlertDialog. Details: - Trigger from a Delete button - Modal with warning icon and message - Cancel and Confirm buttons - Focus trap and escape to close

Accordion FAQ Block

Build a collapsible FAQ section using HeroUI Accordion with Tailwind styling.

Create an FAQ section using HeroUI Accordion. Setup: - Question as Accordion.Header - Answer as Accordion.Content - Allow multiple open sections - Tailwind padding and border styles