Uploading media
The file intake flow covering the drop target, constraints, progress and per-file outcome.
Forms & Interaction Flows · 7 checks · 42 resources
Before you ship
7- 01Empty state — a clear visual placeholder with an upload icon and text indicating a file can be dropped to upload
- 02Drag and drop interaction — a clear visual state change when a file is dragged over the drop area
- 03Progress indicator — progress that updates in real time so users know their upload is working
- 04File restrictions and constraints — size and format limits stated in the upload area before users attempt to upload
- 05Outcome status — visual indicators such as green checkmarks for success and red warning icons for failures
- 06Upload actions — ways to interact with an upload, choosing which actions show by default versus on hover
- 07Showing multiple uploaded files — a clean list or grid with thumbnails, in a layout that scales
Resources that help you build this
42- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- assistant-ui · React chat primitives and shadcn-installable UI for LLM apps, copilots, and agents
- Chakra UI · 114 accessible React components with a token-driven styling system
- Kibo UI · shadcn registry of 41 complex components: Gantt, Kanban, editor, sandbox, cropper
- Loading UI · 47 MIT-licensed React loaders, spinners and skeletons via shadcn CLI
- Mantine · 150+ styled React components, 70+ hooks, CSS modules, no runtime CSS-in-JS
- Material Design 3 · Google's open design system: 39 components, tokens, and Compose/Web code
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP server
- UX Patterns for Devs · 92 UX patterns with accessibility rules, an MCP server and llms.txt
- AlignUI · React + Tailwind design system with a code-synced Figma library
- Better Upload · React file uploads straight to any S3-compatible bucket, with shadcn UI parts
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registry
- beUI · 106-item Motion + Tailwind registry for React, shadcn-compatible
- Extend UI · shadcn registry of PDF, DOCX, XLSX and CSV viewers with bounding-box citations
- Fluid Functionalism · shadcn registry of 23 components where motion carries state, not decoration
- gluestack-ui · CLI-installed React Native component library built on NativeWind and Tailwind v4
- HyperUI · 537 free MIT Tailwind blocks across application, marketing and neobrutalism sets
- Kibo UI · shadcn registry of 41 hard components shadcn/ui does not ship, plus 28 blocks
- Kokonut UI · 45 animated shadcn-CLI components for landing pages, plus 7 paid templates
- Opensource UI · 154 free MIT React and Next.js components across 26 categories, copy-pasted from pages that serve the full TypeScript source in the HTML
- remove.bg API & Tools · Background-removal REST API plus Photoshop, desktop, Zapier and Make integrations
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UI
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLI
- Shopify Polaris · Shopify's admin design system, now shipped as framework-agnostic web components
- SmoothUI · 130 animated React components including 33 text effects and 16 shader transitions
- Squoosh · Browser image compressor with side-by-side comparison; codecs run locally as WebAssembly
- Supabase UI Library · shadcn registry of blocks that wire a UI straight into Supabase auth, storage and realtime
- Tamagui · Universal React styling engine, optimizing compiler and ~48 components for web and native
- TinyPNG · Hosted image compression with a real REST API, six SDKs, 500 free calls a month
- Toolcraft · MIT React starter for canvas design tools, with agent docs baked in
- Transitions.dev · 35 essential web-app transitions, packaged as an agent skill
- Watermelon UI · MIT shadcn registry: 131 animated components, 187 page blocks, 30 base primitives
- BoardUI · React 19 + Tailwind v4 design system for dashboards and agent UIs — 57 components, 47 of them free through a shadcn-schema registry
- moumenlab · shadcn registry of 13 motion-first interaction components, MIT, React 19 + Tailwind v4
- nauvalazhar/ai · 48 owned-source React components for agentic AI apps, on Base UI + Tailwind v4
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email apps
- Park UI · 59 styled Ark UI components delivered by CLI, themed with Panda CSS
- Preline UI · Free Tailwind library with 640+ examples, 204 blocks and documented plugin wiring
- Rare UI · Fourteen free MIT animated React components, one file each, installed with the shadcn CLI
- Tark UI · One-page showcase of 41 Ark UI components with 333 Tailwind-styled examples
- useLayouts · 26 Motion-driven micro-interaction components installable via the shadcn CLI
- Shadix UI · 14 motion-heavy shadcn add-ons: signature pad, datetime picker, reorder list