Package Exports

tailwind-stepper
tailwind-stepper/dist/index.cjs.js
tailwind-stepper/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind Stepper Component

Tailwind Stepper is a customizable React component designed to create intuitive step-by-step user interfaces using Tailwind CSS.

Installation

Install the package via npm or yarn or bun:

npm install tailwind-stepper

yarn add tailwind-stepper

bun add tailwind-stepper

Configuration

add the path for tailwind in the tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "...",
    "./node_modules/tailwind-stepper/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      "..."
    },
  },
  plugins: ["..."],
};

export default config;

Usage Example

Integrate the stepper component into your React application:

import React, { useState } from "react";
import { Stepper, Step } from "tailwind-stepper";

const steps: Step[] = [
  { step: 0, label: "Step 1", content: <div>Content for Step 1</div> },
  { step: 1, label: "Step 2", content: <div>Content for Step 2</div> },
  { step: 2, label: "Step 3", content: <div>Content for Step 3</div> },
  { step: 3, label: "Step 4", content: <div>Content for Step 4</div> },
];

const App = () => {
  const [selectedStep, setSelectedStep] = useState(0);

  return (
    <Stepper
      selectedStep={selectedStep}
      steps={steps}
      orientation="horizontal" // default
      hideLabel={false}
      classNames={{
        base: "...",
        divider: "...",
      }}
    />
  );
};

export default App;

Component Props

Stepper Component

Prop	Type	Description
`selectedStep`	`number`	The currently selected step.
`steps`	`Step[]`	Array of steps to display.
`orientation`	`horizontal \| vertical`	Orientation of the stepper. Defaults to `'horizontal'`.
`hideLabel`	`boolean`	Hides the labels of steps if `true`. Default is `false`.
`classNames`	`Slots & { base?: string; divider?: string }`	Custom class names for various components.

Step Object

Property	Type	Description
`step`	`number`	Step number.
`label`	`string`	Label for the step.
`icon`	`React.ReactNode`	Optional icon for the step.
`content`	`React.ReactNode`	Optional content displayed when step is selected.
`onClick`	`() => void`	Optional click handler for the step.

Customization

Tailwind Stepper allows extensive customization through the classNames prop. You can style various elements:

wrapper: Wrapper around each step item.
icon: Icon inside each step item.
label: Label inside each step item.
gradientBorder: Gradient border for the selected step item.
base: Base class for the stepper container.
divider: Class for dividers between steps.

Example with Custom Class Names

<Stepper
  selectedStep={selectedStep}
  steps={steps}
  orientation="vertical"
  hideLabel={false}
  classNames={{
    base: "...",
    wrapper: "...",
    icon: "...",
    label: "...",
    gradientBorder: "...",
    divider: "...",
  }}
/>

License

This project is licensed under the MIT License.