StepWizard
A wizard component for multi-step processes.
StepWizard simplifies complex, multi-step CLI operations (like project initialization or installation flows). It provides a breadcrumb progress tracker and handles keyboard navigation between steps using Left/Right arrows or N/P keys.
Usage
import { StepWizard, Text } from 'caret-tui';
const steps = [
{ title: 'Configuration', content: <Text>Select your preferences...</Text> },
{ title: 'Dependencies', content: <Text>Installing packages...</Text> },
{ title: 'Complete', content: <Text>Ready to go!</Text> }
];
const App = () => (
<StepWizard
steps={steps}
onComplete={() => console.log('Wizard Finished')}
/>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | Step[] | - | The array of step definitions. |
onComplete | () => void | - | Callback fired when the user proceeds past the final step. |
isActive | boolean | true | If false, disables keyboard navigation. |
Step Definition
| Field | Type | Description |
|---|---|---|
title | string | The title displayed in the top progress tracker. |
content | React.ReactNode | The interface to render when this step is active. |