Shadcn-style File Upload

Installation

Usage

Import File Upload from @otfdashkit/ui.

// File Upload — Shadcn-style file upload for React. Drag-and-drop file upload with preview, validation, and progress.
//
// Install:
//   bun add @otfdashkit/ui

import { FileUpload } from '@otfdashkit/ui'

export function Example() {
  return (
    <FileUpload>
      {/* your content */}
    </FileUpload>
  )
}

Props

Props declared in the FileUpload source. Inherited HTML attributes are not listed.

Related

• Select
• Combobox
• Date Picker
• Form

Upload progress bar

Pair the file upload with OTF's Progress component. Pass the current upload percentage as its value.

import { Progress } from '@otfdashkit/ui'

<Progress value={65} aria-label="Upload progress" />