Portal Uploader

The PortalUploader is a centerpiece component for file interactions. It activates a rapidly rotating orbital ring when a file is dragged over, providing a "vortex" feel for data absorption.

Preview

Drop File

Usage

Installation

$ pnpm dlx shadcn add https://klarden.vercel.app/r/portal-uploader.json

Basic Example

import { PortalUploader } from "@/components/portal-uploader";

export default function App() {
  return (
    <PortalUploader
      accept="image/*"
      onUpload={(file) => alert(`File ${file.name} received`)}
    />
  );
}

Properties

Prop	Type	Default	Description
`onUpload`	`(file: File) => void`	`—`	Callback triggered when a file is successfully dropped.
`accept`	`string`	`—`	Accepted file types (e.g., "image/*").
`className`	`string`	`—`	Additional CSS classes for the container.