文件上传

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.

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/file-upload.json"

手动安装

在同一个文件中，复制并粘贴以下代码：

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 名称	类型	默认值	描述
`class`	String	-	Additional classes for styling the container element.

Emits

Event Name	类型	描述
`onChange`	`(files: File[]) => void`	Callback function triggered when files are added/uploaded.

用例

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 名称	类型	默认值	描述
`class`	String	-	Additional classes for custom styling.

用例

MyComponent.vue

<FileUploadGrid class="custom-class" />

感谢

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

Safari 模拟

Safari浏览器的SVG模型。

Halo 搜索

一款未来感十足的搜索输入组件，拥有多重发光环与细腻的动态光晕，为界面带来炫彩、沉浸式体验。

本页

通过 CLI 安装
手动安装
API
- FileUpload
- FileUploadGrid
感谢

GitHub 收藏创建问题加入 Discord 社区关注 X 关注 Bluesky