Dot Stepper - HapplyUI

A minimal dot-based stepper component with two sizes and active state highlighting for step navigation.

Installation

bunx @happlyui/cli@latest add dot-stepper

Dependencies

npm packages

@radix-ui/react-slot

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
recursive-clone-children
tv

Usage

import * as DotStepper from "@/components/ui/dot-stepper"

<DotStepper.Root size="small">
  <DotStepper.Item active onClick={() => {}} />
  <DotStepper.Item onClick={() => {}} />
</DotStepper.Root>

Examples

Demo

Dot stepper in small and xsmall sizes with interactive step selection.

<DotStepper.Root size="small">
  <DotStepper.Item active={activeStep === 0} onClick={() => setActiveStep(0)} />
  <DotStepper.Item active={activeStep === 1} onClick={() => setActiveStep(1)} />
</DotStepper.Root>

With Radix Tabs

Dot stepper composed with Radix UI Tabs using the asChild pattern for accessible tab navigation.

content 1

<TabsPrimitives.Root value={activeStep} onValueChange={setActiveStep}>
  <DotStepper.Root asChild>
    <TabsPrimitives.List>
      <DotStepper.Item active={activeStep === step.id} asChild>
        <TabsPrimitives.Trigger value={step.id} />
      </DotStepper.Item>
    </TabsPrimitives.List>
  </DotStepper.Root>
</TabsPrimitives.Root>

API Reference

DotStepper.Root

The container for dot stepper items. Propagates size to children via recursiveCloneChildren.

Prop	Type	Default	Description
`size`	`'small' \| 'xsmall'`	`'small'`	The size of the dots
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

DotStepper.Item

An individual dot step. Renders as a button by default.

Prop	Type	Default	Description
`active`	`boolean`	`false`	Whether this step is currently active
`asChild`	`boolean`	`false`	Render as child element using Radix Slot