Drag And Drop Flow

Installation

$ pnpm dlx shadcn@latest add @remocn/drag-and-drop-flow

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { DragAndDropFlow } from "@/components/remocn/drag-and-drop-flow";

const DragAndDropFlowScene = () => (
  <DragAndDropFlow
    accent="#0ea5e9"
    dropzoneLabel="Drop file to upload"
    fileName="design.fig"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="DragAndDropFlow"
    component={DragAndDropFlowScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`accent`	`string`	`"#0ea5e9"`	Accent color for the file icon, dropzone highlight, and progress bar
`dropzoneLabel`	`string`	`"Drop file to upload"`	Label rendered inside the dropzone
`fileName`	`string`	`"design.fig"`	File name shown above the progress bar
`background`	`string`	`"#fafafa"`	Frame background color
`className`	`string`	—	Optional className passed to the outer container