https://github.com/screentechnicals/tailwind-stepper
Tailwind Stepper is a flexible UI component designed for React applications, integrating seamlessly with Tailwind CSS. It provides intuitive stepper interfaces for guided user interactions, enhancing usability and visual clarity in multi-step workflows.
https://github.com/screentechnicals/tailwind-stepper
javascript nextjs nodejs react rollupjs typescript
Last synced: 2 months ago
JSON representation
Tailwind Stepper is a flexible UI component designed for React applications, integrating seamlessly with Tailwind CSS. It provides intuitive stepper interfaces for guided user interactions, enhancing usability and visual clarity in multi-step workflows.
- Host: GitHub
- URL: https://github.com/screentechnicals/tailwind-stepper
- Owner: ScreenTechnicals
- License: mit
- Created: 2024-07-05T17:39:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-23T18:46:59.000Z (over 1 year ago)
- Last Synced: 2025-10-12T16:48:53.519Z (8 months ago)
- Topics: javascript, nextjs, nodejs, react, rollupjs, typescript
- Language: TypeScript
- Homepage:
- Size: 46.9 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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:
```jsx
import React, { useState } from "react";
import { Stepper, Step } from "tailwind-stepper";
const steps: Step[] = [
{ step: 0, label: "Step 1", content:
Content for Step 1 },
{ step: 1, label: "Step 2", content: Content for Step 2 },
{ step: 2, label: "Step 3", content: Content for Step 3 },
{ step: 3, label: "Step 4", content: Content for Step 4 },
];
const App = () => {
const [selectedStep, setSelectedStep] = useState(0);
return (
);
};
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` | `StepperClassNames` | 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
```jsx
```
## License
This project is licensed under the MIT License.