Help Carousel
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The HelpCarousel component provides an interactive walkthrough experience for guiding users through your application. Built as a dialog-based carousel, it allows you to create step-by-step tutorials, onboarding flows, and feature introductions. Perfect for user onboarding, feature announcements, and contextual help systems.
Basic Usage
Onboarding Flow
Feature Announcement
Contextual Help
Different Trigger Elements
Properties
HelpCarousel
| Property | Type | Description |
|---|---|---|
triggerElement | ReactNode | The element that opens the help carousel when clicked. |
steps | HelpStep[] | Array of help steps to display in the carousel. |
HelpStep
| Property | Type | Description |
|---|---|---|
title | string | The title for this help step. |
description | string | ReactNode | The content/description for this step. Can be text or JSX. |
Navigation Features
The HelpCarousel includes built-in navigation features:
- Previous/Next Buttons - Navigate between steps with arrow buttons
- Step Indicators - Visual dots showing current step and total steps
- Keyboard Support - Arrow keys for navigation, Escape to close
- Auto-disable - Previous button disabled on first step, Next button disabled on last step
Accessibility
The HelpCarousel component includes comprehensive accessibility features:
- Keyboard Navigation - Full keyboard support with arrow keys and Escape
- Screen Reader Support - Proper ARIA labels and dialog semantics
- Focus Management - Focus trapped within dialog during interaction
- Step Announcements - Current step and total steps announced to screen readers
- Dialog Semantics - Uses proper dialog role and labeling
- Button States - Clear indication of disabled navigation buttons
Common Use Cases
The HelpCarousel component is perfect for:
- User Onboarding - Guide new users through key features
- Feature Announcements - Showcase new functionality and updates
- Contextual Help - Provide help specific to current page or feature
- Tutorial Flows - Create step-by-step learning experiences
- Product Tours - Highlight important areas of your application
- Documentation - Present help content in digestible chunks
- Training Materials - Create interactive training sequences
Best Practices
- Keep Steps Focused - Each step should cover one concept or action
- Use Clear Titles - Make step titles descriptive and scannable
- Progressive Disclosure - Start with basics and build complexity
- Visual Consistency - Maintain consistent styling across all help content
- Appropriate Length - Limit carousels to 3-7 steps for optimal engagement
- Rich Content - Use JSX for formatted text, lists, and visual elements
- Context Awareness - Tailor help content to the user's current context
- Exit Options - Always provide clear ways to close or skip the help flow