HeroUI Chat

Component Slots

5 snippets

Override Card Header with Slot

Replace the HeroUI Card header with a custom layout using slot injection.

Customize HeroUI Card header via slot. Steps: - Create a slot named `header` - Inject a custom layout (e.g., Avatar + Title + Badge) - Style with Tailwind: `flex items-center justify-between` - Example: ```jsx <Card> <div slot="header"...

Custom Tooltip Trigger Slot

Replace default Tooltip trigger with a custom component using slots.

Replace HeroUI Tooltip trigger using a custom slot. How: - Use `<Tooltip trigger={<CustomComponent />} content="..." />` - `trigger` is passed as a slot prop - Maintain focusability and accessibility (tabIndex, aria) on custom component

Inject Custom Icon into Button Slot

Use HeroUI slot system to add a custom icon inside a Button component.

Customize HeroUI Button with slot-based icon injection. Steps: - Define a `startIcon` slot - Render an SVG icon or HeroUI icon component in slot - Ensure spacing using `gap-2` and `items-center` - Example: `<Button><Icon slot="startIcon" />...

Card Content Grid via Slot

Inject a 2-column layout into Card content using a slot-based system.

Use slot to add custom 2-column layout into HeroUI Card content. Setup: - Use `grid grid-cols-2 gap-4` inside content slot - Example: ```jsx <Card> <div slot="content" className="grid grid-cols-2 gap-4"> ... </div> </Card> ``` - Apply...

Slot Custom Action into Modal Footer

Insert a custom action (like a secondary link) in the footer of a HeroUI Modal using slots.

Use slot to add custom footer action to HeroUI Modal. Structure: - Modal.Footer accepts slot content - Inject a secondary action (e.g., "Learn More" link) - Align to the left with `ml-auto` or flex spacing - Keep primary action right-aligned