Components
Loading preview...
The Modern Progress component creates a modern progress bar. It supports hover effects, color changes, and pixel shape customization.
@bucharitesh
npx shadcn@latest add https://21st.dev/r/bucharitesh/modern-verticle-progress"use client";
import { useState } from "react";
import { useEffect } from "react";
import { Component } from "@/components/ui/modern-verticle-progress";
export default function DemoOne() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setProgress(progress + 1);
}, 100);
return () => clearInterval(interval);
}, [progress]);
return (
<div className="w-full h-full flex items-center justify-center max-w-xl">
<Component
value={progress}
className="border-purple-500"
indicatorClassName="bg-purple-500"
showText
/>
</div>
);
};