I'll recreate the circular progress indicators with text as shown on the Tailwind CSS website. I'll implement both the "Simple" linear progress bar and the "Panels" style with numbered circles.
I've created a flexible ProgressBar component that supports three different variants as shown in the Tailwind CSS UI Blocks:
- Simple - A linear progress bar with numbered circles and text labels
- Panels - A more prominent progress indicator with numbered circles (or checkmarks for completed steps) connected by lines
- Bullets - A minimal bullet-style progress indicator with small dots
The component accepts:
- An array of steps with id, name, and status (complete, current, or upcoming)
- A variant prop to switch between the different styles
Each variant has appropriate styling to match the Tailwind CSS examples, including:
- Proper coloring for completed, current, and upcoming steps
- Check icons for completed steps
- Connecting lines between steps
- Responsive layout that works on different screen sizes
You can easily customize the colors by modifying the Tailwind classes in the component.
please make Panels but make it vertical and add descriptipn to each step under title: here htmk from site if it will be helpful:
<div class="lb abg aut avn cxv dxj"><div class="wn"><nav aria-label="Progress"><ol role="list" class="afh"><li class="axs l"><div aria-hidden="true" class="j ay ct hc kc rl tj aml"></div><a href="#" class="bkj l lb abc"><span class="lb pv aba"><span class="l dr lb oq aba abg agc aml bkx"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="on beg"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg></span></span><span class="kk lb wn aat"><span class="azt bai">Create account</span><span class="azt bbl">Vitae sed mi luctus laoreet.</span></span></a></li><li class="axs l"><div aria-hidden="true" class="j ay ct hc kc rl tj ala"></div><a href="#" aria-current="step" class="bkj l lb abc"><span aria-hidden="true" class="lb pv aba"><span class="l dr lb oq aba abg agc ahj ais aoi"><span class="oj agc aml"></span></span></span><span class="kk lb wn aat"><span class="azt bai bce">Profile information</span><span class="azt bbl">Cursus semper viverra facilisis et et some more.</span></span></a></li><li class="axs l"><div aria-hidden="true" class="j ay ct hc kc rl tj ala"></div><a href="#" class="bkj l lb abc"><span aria-hidden="true" class="lb pv aba"><span class="l dr lb oq aba abg agc ahj aif aoi bkq"><span class="oj agc aog bku"></span></span></span><span class="kk lb wn aat"><span class="azt bai bbl">Business information</span><span class="azt bbl">Penatibus eu quis ante.</span></span></a></li><li class="axs l"><div aria-hidden="true" class="j ay ct hc kc rl tj ala"></div><a href="#" class="bkj l lb abc"><span aria-hidden="true" class="lb pv aba"><span class="l dr lb oq aba abg agc ahj aif aoi bkq"><span class="oj agc aog bku"></span></span></span><span class="kk lb wn aat"><span class="azt bai bbl">Theme</span><span class="azt bbl">Faucibus nec enim leo et.</span></span></a></li><li class="l"><a href="#" class="bkj l lb abc"><span aria-hidden="true" class="lb pv aba"><span class="l dr lb oq aba abg agc ahj aif aoi bkq"><span class="oj agc aog bku"></span></span></span><span class="kk lb wn aat"><span class="azt bai bbl">Preview</span><span class="azt bbl">Iusto et officia maiores porro ad non quas.</span></span></a></li></ol></nav></div></div>I'll create a vertical version of the Panels progress bar with descriptions under each step title.
I've created a new VerticalProgressBar component that displays steps in a vertical orientation with descriptions under each step title. This component:
- Displays steps in a vertical list with connecting lines between them
- Shows a checkmark icon for completed steps
- Highlights the current step with an indigo border
- Shows step numbers for current and upcoming steps
- Includes both a title and description for each step
- Uses proper styling for completed, current, and upcoming steps
The component is designed to match the HTML structure from the Tailwind CSS website while maintaining the same visual style as the original Panels variant.
Each step includes:
- A numbered circle (or checkmark for completed steps)
- A title that's highlighted for the current and completed steps
- A description in a muted gray color
The vertical connecting lines between steps are styled to match the status of the steps they connect, with completed sections showing in indigo and upcoming sections in gray.