# Uploadthing Elements > Install UploadThing file upload components from the Elements registry. Use when user needs file uploads, drag-and-drop dropzones, avatar uploads, file cards, image grids, paste-to-upload, or upload progress indicators. Triggers on "upload", "file upload", "dropzone", "uploadthing", "drag and drop upload", "image grid", "paste upload", "avatar upload". Use when this capability is needed. - Skill: `tomevault-io/uploadthing-elements` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/uploadthing-elements` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/uploadthing-elements/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/uploadthing-elements --- # UploadThing Elements 7 file upload components. Requires `@uploadthing/react` (auto-installed as dependency). ## Install Pattern ```bash npx shadcn@latest add @elements/uploadthing-{name} ``` ## Components | Component | Install | Description | |-----------|---------|-------------| | Button | `@elements/uploadthing-button` | Simple upload button | | Dropzone | `@elements/uploadthing-dropzone` | Drag-and-drop zone with progress | | Avatar | `@elements/uploadthing-avatar` | Avatar upload with crop | | File Card | `@elements/uploadthing-file-card` | File display card | | Image Grid | `@elements/uploadthing-image-grid` | Image gallery from uploads | | Paste | `@elements/uploadthing-paste` | Paste-to-upload area | | Progress | `@elements/uploadthing-progress` | Upload progress indicator | ## Quick Patterns ```bash # Basic upload npx shadcn@latest add @elements/uploadthing-button @elements/uploadthing-progress # Full file management npx shadcn@latest add @elements/uploadthing-dropzone @elements/uploadthing-file-card @elements/uploadthing-image-grid # Avatar upload npx shadcn@latest add @elements/uploadthing-avatar ``` ## Setup Requires UploadThing API key and file router. See https://docs.uploadthing.com/getting-started ## Discovery Browse https://tryelements.dev/docs/uploadthing --- > Source: [crafter-station/elements](https://github.com/crafter-station/elements) — distributed by [TomeVault](https://tomevault.io).