All components
Upload Progress
Data DisplayA file row whose progress bar fills smoothly to its value.
quarterly-report.pdf68%
2.4 MB
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/upload-progress.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/upload-progress.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | File name. |
| size | string | - | Human-readable file size. |
| progress | number | 60 | Percent complete, clamped to 0-100. |
Accessibility
- The percentage is shown as text, not only as bar width.
- Long file names truncate rather than breaking the row layout.
- Values are clamped, so a bad input cannot overflow the track.
Dependencies
motionclsxtailwind-mergelucide-react