File Upload

A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/file-upload.json"

Install Manually

Copy and paste the following code in the same folder

FileUpload.vue
FileUploadGrid.vue
API
FileUpload
The FileUpload component serves as a wrapper for the file upload effect. It manages mouse events to create a 3D perspective.
Props
Prop NameTypeDefaultDescription
classString-Additional classes for styling the container element.
Emits
Event NameTypeDescription
onChange(files: File[]) => voidCallback function triggered when files are added/uploaded.
Usage
MyComponent.vue
<FileUpload class="additional-class">
  <!-- Your content here -->
</FileUpload>

FileUploadGrid
The FileUploadGrid component provides the background grid pattern for the file upload area. It is intended to be used within a FileUpload component to create the visual grid effect behind the upload interface.
Props
Prop NameTypeDefaultDescription
classString-Additional classes for custom styling.
Usage
MyComponent.vue
<FileUploadGrid class="custom-class" />

Credits
Safari Mockup
An SVG mockup of the Safari browser.
Input
A versatile and visually dynamic input field with radial hover effects, styled for modern web applications.