Stepper
Installation
npx shadcn@latest add https://ui.timkit.cn/r/stepper.json
Usage
import { Stepper } from "@/components/ui/stepper"
Examples
Stepper · Numeric indicators
Loading preview...
Stepper · Dot indicators
Loading preview...
Stepper · Interactive State
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · Dot indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Structured API
Component
stepper
Logic
zag / number-input
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | number-input | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/core, @zag-js/number-input, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | lucide-react | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | The active step index. |
| defaultValue | number | 0 | The initial active step index. |
| orientation | enum (horizontal | vertical) | horizontal | The orientation of the stepper. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Event handler called when active step changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The stepper items |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The stepper container |
| item | part | - | A single step |
| trigger | part | - | The step selector |
| indicator | part | - | The step number/icon |
| separator | part | - | The line between steps |
| title | part | - | The step title |
| description | part | - | The step description |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Stepper · Numeric indicators
- Stepper · Dot indicators
- Stepper · Interactive State
- Stepper · Numeric indicators
- Stepper · Numeric indicators
- Stepper · Numeric indicators
- Stepper · With step titles
- Stepper · Numeric indicators
- Stepper · Numeric indicators
- Stepper · With step titles
- Stepper · With step titles
- Stepper · With step titles
- Stepper · With step titles
- Stepper · Dot indicators
- Stepper · Numeric indicators
- Stepper · With step titles
- Stepper · With step titles
- API Reference
Stepper
Installation
npx shadcn@latest add https://ui.timkit.cn/r/stepper.json
Usage
import { Stepper } from "@/components/ui/stepper"
Examples
Stepper · Numeric indicators
Loading preview...
Stepper · Dot indicators
Loading preview...
Stepper · Interactive State
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · Dot indicators
Loading preview...
Stepper · Numeric indicators
Loading preview...
Stepper · With step titles
Loading preview...
Stepper · With step titles
Loading preview...
Structured API
Component
stepper
Logic
zag / number-input
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | zag | State and interaction provider used by this component. |
| logic.machine | string | number-input | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core, @zag-js/core, @zag-js/number-input, @zag-js/react | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | lucide-react | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | The active step index. |
| defaultValue | number | 0 | The initial active step index. |
| orientation | enum (horizontal | vertical) | horizontal | The orientation of the stepper. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Event handler called when active step changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | The stepper items |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The stepper container |
| item | part | - | A single step |
| trigger | part | - | The step selector |
| indicator | part | - | The step number/icon |
| separator | part | - | The line between steps |
| title | part | - | The step title |
| description | part | - | The step description |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Stepper · Numeric indicators
- Stepper · Dot indicators
- Stepper · Interactive State
- Stepper · Numeric indicators
- Stepper · Numeric indicators
- Stepper · Numeric indicators
- Stepper · With step titles
- Stepper · Numeric indicators
- Stepper · Numeric indicators
- Stepper · With step titles
- Stepper · With step titles
- Stepper · With step titles
- Stepper · With step titles
- Stepper · Dot indicators
- Stepper · Numeric indicators
- Stepper · With step titles
- Stepper · With step titles
- API Reference