File Upload
Drag-and-drop file upload component with animated states and file preview.
Preview
File Upload
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Content upload flows and asset management interfaces.
Why this component matters
A well-designed upload area reduces anxiety about file operations and provides clear feedback at every step.
Usage guidance
Use for single or multi-file uploads. Show file type validation feedback immediately. Include drag-over highlight state and upload progress animation.
Installation
bash
npx shadcn@latest add @aceternity/file-uploadUsage
example.tsxtsx
import { FileUpload } from "@/components/ui/file-upload";
export default function Example() {
return (
<FileUpload>
{/* Your content here */}
</FileUpload>
);
}Source
file-upload.tsx
components/ui/file-upload.tsx