I believe that a website or app's progress indicator should respect the global theme and have a touch of originality. That's why I never use an external library or package for it. I prefer to create my own component, keeping it as lightweight as possible and fully customizable.
With React and Tailwind, it's a piece of cake !
This project demonstrates how to build a custom component using inputs and buttons from the Shadcn/ui library. It allows developers to attach one or more customizable action buttons before, after, or on both sides of a text or number input field.
It leverages Tailwind CSS, React, and TypeScript for full flexibility and style consistency.
The guide covers:
Initial project setup with Vite, Tailwind CSS, and Shadcn/ui
Creation of the custom component with extended input props
Dynamic rendering of action buttons via a reusable sub-component
A working usage example with icon buttons and callbacks
This solution is ideal for enhancing form inputs with additional interactivity while maintaining a clean, composable UI design.