Progress
Displays the status of a task that takes a long time.
Progress wraps the Base UI
Progress primitive and composes
its label, track, indicator and value parts. Root renders a default track and
indicator when it has no children, and each part marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/progressExample
progress-example.tsx
'use client';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
const ProgressExample = () => {
const [value, setValue] = useState(20);
const advanceProgress = () =>
setValue((current) => Math.min(100, current + 20));
return (
<div className='flex w-full max-w-sm flex-col gap-4'>
<Progress aria-label='Loading progress' value={value} />
<Button disabled={value >= 100} onClick={advanceProgress}>
Advance progress
</Button>
</div>
);
};
export default ProgressExample;
Usage
import { Progress } from '@/components/ui/progress';
const ProgressDemo = () => <Progress value={60} />;