🎉 Now with 6 Color Themes & JSON Config

Drag UI
File Upload Components

Build beautiful, accessible file upload interfaces with drag-and-drop, multiple themes, and JSON-driven configuration. Perfect for modern web applications.

Try Demo Documentation

Try it now

Drop your files here

Drag and drop files or click to browse

Everything you need for file uploads

Drag UI provides all the features you need to build modern file upload experiences

Drag & Drop

Intuitive drag-and-drop interface with keyboard accessibility support

6 Color Themes

Beautiful gradient themes with real-time switching capabilities

JSON Configuration

LLM-friendly configuration system for easy customization

5 Variants

Multiple component styles: dropzone, button, compact, preview, and image

Fully Accessible

WCAG compliant with screen reader support and keyboard navigation

TypeScript Ready

Built with TypeScript for excellent developer experience

5 Beautiful Variants

Choose from multiple component styles to match your design needs

Dropzone

Classic drag-and-drop interface

Button

Simple button-style upload

Compact

Space-efficient design

Preview

Full-featured file management

Image

Optimized for image uploads

View All Variants

JSON-Driven Configuration

Configure everything through simple JSON. Perfect for LLMs, CMSs, and dynamic applications.

LLM-friendly flat structure

Runtime configuration changes

Style presets and themes

Custom labels and text

Try JSON Editor

{
  "variant": "dropzone",
  "colorTheme": "emerald",
  "size": "md",
  "radius": "lg",
  "maxFileSize": 10485760,
  "maxFiles": 5,
  "acceptedFileTypes": [
    "image/*", 
    ".pdf", 
    ".doc"
  ],
  "labels": {
    "uploadText": "Drop files here",
    "dragText": "Drag and drop files",
    "browseText": "Browse Files"
  },
  "showProgress": true,
  "showPreview": true,
  "showColorPicker": true
}

Ready to get started?

Install Drag UI and start building beautiful file upload experiences in minutes