File Upload

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

This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/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 Name	Type	Default	Description
`class`	String	-	Additional classes for styling the container element.

Emits

Event Name	Type	Description
`onChange`	`(files: File[]) => void`	Callback function triggered when files are added/uploaded.

Usage

MyComponent.vue

<FileUpload class="additional-class">
  <!-- Your content here -->
</FileUpload>

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 Name	Type	Default	Description
`class`	String	-	Additional classes for custom styling.

Usage

MyComponent.vue

<FileUploadGrid class="custom-class" />

Credits

Credits to kalix127 for porting this component.
Inspired by AcernityUI.

Color Picker

A comprehensive color picker component with support for multiple color formats, accessibility features, and custom swatches.

Halo Search

A futuristic search input component featuring multiple glowing rings and subtle animated halos for a vibrant, immersive UI experience.

On This Page

Install using CLI
Install Manually
API
- FileUpload
- FileUploadGrid
Credits

Star on GitHub Create Issues Join Discord Forum Follow on X Follow on Bluesky