[New Component]: Stepper / Steps

[junwen-k]

Stepper

Steppers convey progress through numbered steps.

Visual References

Description

This component could potentially borrow some ideas from existing Timeline component with subcomponents:

import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline"

Anatomy

<Stepper.Root>
    <Stepper.Item />
    <Stepper.Previous />
    <Stepper.Next />
</Stepper.Root>

Libraries / Hooks

• Radix UI's Tab - This component could be potentially built on top of Radix UI's Tab primitive.
• headless-stepper - Does not support controlled mode properly.

References

Ant Design
Chakra UI
MUI