IT Tools

Handy tools for developer

Compare Texts

WebView Playground

ReactJS Playground

Json Web Tokens

Regular Expressions

Image Crop

Color Picker

QR Code

Generate Text

Generate API Response

JSON Formatter

Number Converter

Random Wheel

Ctrl + K

Steps

Preview

Step 1

First step

Step 2

Second step

Step 3

Final step

Show code

<Steps
  position="inline"
  color="primary"
  current={currentStepIndex}
  steps={[
    {
      title: "Step 1",
      description: "First step",
      icon: <UserIcon width={16} height={16} />,
    },
    {
      title: "Step 2",
      description: "Second step",
      icon: <CalendarIcon width={16} height={16} />,
    },
    {
      title: "Step 3",
      description: "Final step",
      icon: <WalletIcon width={16} height={16} />,
    },
  ]}
/>

Docs

Name	Description	Default	Control
position	Display type info of Steps	"inline"	inline break-line
color	Color of Steps	"primary"	primary secondary success danger warning info light dark
steps	Steps list `Step[]`	-	-
current	Current active index	-
className	Wrapper class	-	-

IT Tools

Tools

UI Components

Steps

Preview

Docs