File Drop

A recessed drop zone with no outline at rest; while files hover it lifts, warms and shows a dashed outline that flows inward.

$149 once · every Pro piece

Customize

Label

Multiple

Max size MB (0 = none)

Simulate upload

Files land as rows that expand into place, with middle-truncated names; rejected files say why. The demo simulates uploads: a 1px line with a hot head runs along each row, then a check draws.

Install

npx shadcn@latest add @obsyde/file-drop

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { FileDrop } from '@/components/obsyde/ember/file-drop/FileDrop';

export function Example() {
  return (
    <FileDrop label="Files" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/file-drop/FileDrop.tsxcomponent
ember/file-drop/file-drop.cssstyles
ember/file-drop/FileDropDemo.tsxdemo
ember/forms-kit/kit.tsxshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`label`Label	`string`	`'Files'`
`accept`Accept	`string`	`—`
`multiple`Multiple	`boolean`	`true`
`maxSizeMb`Max size MB (0 = none)	`number`	`0`
`simulateUpload`Simulate upload	`boolean`	`true`