ImageTabs

Accordion‑style tabs where selecting a tab reveals a description and an associated image. On desktop the image appears in a separate sticky column; on mobile images are shown inline below the descriptions. Use ImageTabs when each tab needs a visual example such as screenshots or product photos. Use regular Tabs for text‑only content.

Use Cases

• Feature showcase with screenshots
• Product comparison / feature breakdown
• How it works section with step images
• Service descriptions with visual examples

Properties

items

Array of tab objects with title, description, and optional image. Type: array.

accentColor

Border color for the active tab. Type: string. Default: #3b82f6

customCss

Custom CSS property pairs. Type: string.

Best Practices

• Use 3‑5 tabs for the best layout balance
• Always include images — they’re the visual payoff of this component
• Use descriptive tab titles (not just “Tab 1”)
• Keep descriptions to 2‑3 sentences
• Use consistent image sizes and aspect ratios

Common Mistakes

Not providing imageUrl for tabs

Why it's a problem: The image column is the main visual feature. Without images, use a regular FAQ component instead.

Fix: Always include imageUrl for every tab item

Using more than 6 tabs

Why it's a problem: Too many tabs creates a long scrollable list that defeats the purpose of tabbed navigation

Fix: Use 3‑5 tabs. For more items, use DataGrid or a regular list.

Using wrong property names: tabs, label, content

Why it's a problem: The property is ‘items’ (not ‘tabs’), each item has ‘title’ (not ‘label’) and ‘description’ (not ‘content’). Wrong names produce empty tabs.

Fix: Use: items: [{ title: ‘…’, description: ‘…’, imageUrl: ‘…’ }]