import * as React from "react"; import { tv, type VariantProps } from "tailwind-variants"; type StepsVariantProps = VariantProps; export type StepsProps = React.ComponentProps<"ul"> & StepsVariantProps & { activeStep?: number; children: React.ReactNode; }; export type StepsItemProps = React.ComponentProps<"li">; const stepsVariants = tv({ slots: { root: "steps", item: "step", }, variants: { direction: { horizontal: { root: "steps-horizontal" }, vertical: { root: "steps-vertical" }, }, active: { true: { item: "step-primary" }, }, }, }); const Steps = React.forwardRef( ( { className, direction, activeStep = 0, children, ...props }, ref ) => { const { root, item } = stepsVariants({ direction }); const items = React.Children.map(children, (child, index) => { if (!React.isValidElement(child)) return child; const isActive = index <= activeStep; const currentClassName = ( child as React.ReactElement<{ className?: string }> ).props.className; const itemClass = item({ active: isActive }); const finalClassName = currentClassName ? `${itemClass} ${currentClassName}` : itemClass; return React.cloneElement( child as React.ReactElement<{ className?: string }>, { className: finalClassName } ); }); return (

{items} ); } ); Steps.displayName = "Steps"; const StepsItem = React.forwardRef( ({ className, ...props }, ref) => (

) ); StepsItem.displayName = "StepsItem"; const StepsComponent = Object.assign(Steps, { Item: StepsItem, }); export { StepsComponent as Steps };

Prop	Type	Default	Description
`direction`	`'horizontal' \| 'vertical'`	-	The layout direction of the steps.
`activeStep`	`number`	`0`	The index of the currently active step.

Steps

Installation

Default

Vertical

Props

StepsRoot

Steps

Installation

Default

Vertical

Props

StepsRoot