Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A polished accordion component that displays image previews when hovering over each item. On desktop, images appear as floating tooltips. On mobile and touch devices, images display inline within the expanded content for better accessibility.
Key Features:
| Prop | Type | Default | Description |
|---|---|---|---|
items | AccordionItemData[] | required | Array of accordion items with images |
defaultOpenId | string | undefined | ID of the item to open by default |
className | string | undefined | Additional CSS classes for the wrapper |
tooltipDelay | number | 120 | Delay in ms before tooltip appears |
tooltipSide | "top" | "right" | "bottom" | "left" | "right" | Position of the tooltip relative to the title |
tooltipImageClassName | string | undefined | Custom dimensions for tooltip images (e.g., "h-64 w-80") |
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the item |
title | string | Display title |
content | string | Expanded content text |
image | string | URL to the preview image |
The component automatically detects touch devices and small screens:
This ensures a consistent experience across all devices without requiring additional configuration.