Upload Island

"use client"

import { demoAdapter } from "@/examples/_demo"
import { UploadIsland } from "@/components/upload-island"

export default function UploadIslandExample() {
  return <UploadIsland adapter={demoAdapter} />
}

InstallationCopy Anchor Link

npx shadcn@latest add @uploadcn/upload-island

UsageCopy Anchor Link

import { UploadIsland } from "@/components/upload-island"

<UploadIsland maxFiles={10} />

The pill is the dropzone itself, so it's both a button and a drop target. The shape animates with motion's layout; content cross-fades with a blur. It expands on hover and on keyboard focus, and its accessible name always describes the progress.

PropsCopy Anchor Link