Components
Loading preview...
Here is Progress component
npx shadcn@latest add https://21st.dev/r/coss.com/progressimport * as React from 'react';
import { Progress } from '@base-ui-components/react/progress';
export default function ExampleProgress() {
const [value, setValue] = React.useState(20);
React.useEffect(() => {
const interval = window.setInterval(() => {
setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)));
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<Progress.Root className="grid w-48 grid-cols-2 gap-y-2" value={value}>
<Progress.Label className="text-sm font-medium text-gray-900 dark:text-gray-100">
Export data
</Progress.Label>
<Progress.Value className="col-start-2 text-right text-sm text-gray-900 dark:text-gray-100" />
<Progress.Track className="col-span-full h-1 overflow-hidden rounded bg-gray-200 dark:bg-gray-700 shadow-[inset_0_0_0_1px] shadow-gray-200 dark:shadow-gray-700">
<Progress.Indicator className="block bg-blue-600 dark:bg-blue-500 transition-all duration-500" />
</Progress.Track>
</Progress.Root>
);
}