Gradient File Upload
A refined upload surface with an animated glowing beam border, dynamic radial feedback, file extension badges, and multi-state progress indicators.
30.1 KB
•Updated on September 25, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-gradient-file-uploadUsage
Code
import { GradientFileUpload } from '@/components/spaceui/gradient-file-upload'Code
<GradientFileUpload
variant="original"
maxSizeMb={50}
uploadDurationMs={2500}
onFileAccepted={(file) => console.log('Selected:', file.name)}
/>API Reference
GradientFileUpload Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | original|glow | original | Visual border animation engine (original conic shader or glow) |
accept | string | * | Accepted file types (e.g. image/*,application/pdf) |
maxSizeMb | number | 50 | Maximum file size in megabytes before rejecting |
uploadDurationMs | number | 2400 | Simulated upload duration in milliseconds |
onFileAccepted | (file: File) => void | - | Callback fired immediately when a valid file is dropped or selected |
onUpload | (file: File) => Promise<...> | - | Custom async upload handler returning { status, message } |
className | string | - | Additional class name applied to outer container |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.