Steps

Pass items as { title, description, content }. The machine tracks the active step and built-in controls move through the flow.

import { Steps } from '@manti-ui/react';

const items = [
  { title: 'Dough', description: 'Knead & rest', content: 'Make the dough.' },
  { title: 'Fill', description: 'Spoon & fold', content: 'Fill the wrappers.' },
  { title: 'Steam', description: 'Cook through', content: 'Steam until done.' },
];

export default function StepsBasic() {
  return (
    <div className="w-full">
      <Steps items={items} variant="primary" orientation="horizontal" />
    </div>
  );
}

Vertical layout

Make the dough.

API

Prop	Type	Default	Description
`items`	`StepItem[]`	—	The steps. Each item: { title, description?, content? }.
`variant`	`MantiVariant`	`'primary'`	Variant of the active and completed steps.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`linear`	`boolean`	—	Require steps to be completed in order.
`step`	`number`	—	Controlled active step index.
`defaultStep`	`number`	`0`	Initial active step for uncontrolled usage.
`onStepChange`	`(step: number) => void`	—	Called whenever the active step changes.
`controls`	`boolean`	`true`	Render the built-in prev/next controls.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="steps"][data-part="root"]`	The flow container.
`list`	`[data-scope="steps"][data-part="list"]`	The row of step triggers.
`item`	`[data-scope="steps"][data-part="item"]`	A single step in the list.
`trigger`	`[data-scope="steps"][data-part="trigger"]`	The clickable step header.
`indicator`	`[data-scope="steps"][data-part="indicator"]`	The numbered step marker.
`item-content`	`[data-scope="steps"][data-part="item-content"]`	Wraps the step title and description.
`item-title`	`[data-scope="steps"][data-part="item-title"]`	The step title.
`item-description`	`[data-scope="steps"][data-part="item-description"]`	The optional step description.
`separator`	`[data-scope="steps"][data-part="separator"]`	The connector line between steps.
`content`	`[data-scope="steps"][data-part="content"]`	The panel shown for the active step.
`controls`	`[data-scope="steps"][data-part="controls"]`	The built-in prev/next buttons.

Tokens

Token	Controls
`--manti-steps-indicator-size`	indicator size

Last updated 13 September 2026