Every file UI component
your app will ever need.
Copy-paste components for the complete file experience — upload, preview, manage, navigate. First-class Supabase, S3 and Cloudinary support. Zero config.
File Drop
drag & drop · browse
Validate
MIME · size · type
Queue
managed upload queue
Rejected
error surfaced to UI
Supabase
RLS-aware · signed URLs
AWS S3
presigned · R2 · MinIO
Cloudinary
transforms · presets
Storage adapters
24+
Components
5
Headless Hooks
3
Storage Adapters
2
Primitive Layers
0
Config Required
Built different.
Because files deserve it.
No other library treats file management as a complete UI domain. Shelf UI does — from the drop zone to the storage adapter.
You own every line.
No package lock-in. Components land directly in your codebase via the shadcn registry. Extend, restyle, delete — zero library abstraction in the way.
npx shadcn@latest add @shelf-ui/dropzoneRegistry native.
Built on the open shadcn registry spec. One command installs any component with all peer dependencies resolved.
Headless hooks included.
Every component ships with its underlying hook. Swap the UI for your own — the logic stays.
Radix UI or Base UI.
Shelf UI adapts to your existing component foundation, whether your project is built on Radix UI or Base UI. Consistent APIs, no unnecessary rewrites.
Tailwind v4 + TypeScript.
Fully typed. CSS variables. Dark mode out of the box. No config files, no wrappers.
Animation-free by default.
No Motion/Framer Motion forced on you. CSS transitions ship by default. Add the --motion flag only when you want it.
npx shadcn@latest add @shelf-ui/dropzone --motionYou own every line.
No package lock-in. Components land directly in your codebase via the shadcn registry. Extend, restyle, delete — zero library abstraction in the way.
npx shadcn@latest add @shelf-ui/dropzoneRegistry native.
Built on the open shadcn registry spec. One command installs any component with all peer dependencies resolved.
Headless hooks included.
Every component ships with its underlying hook. Swap the UI for your own — the logic stays.
Radix UI or Base UI.
Shelf UI adapts to your existing component foundation, whether your project is built on Radix UI or Base UI. Consistent APIs, no unnecessary rewrites.
Tailwind v4 + TypeScript.
Fully typed. CSS variables. Dark mode out of the box. No config files, no wrappers.
Animation-free by default.
No Motion/Framer Motion forced on you. CSS transitions ship by default. Add the --motion flag only when you want it.
npx shadcn@latest add @shelf-ui/dropzone --motionYour storage.
One consistent API.
Swap providers without touching your components. The adapter handles everything — auth, uploads, URLs.
The Postgres-native choice.
Bucket config, RLS-aware uploads, signed URLs. Plugs into your existing Supabase project with zero extra setup.
- Row-level security
- Signed URL generation
- Bucket management
useStorageProvider('supabase', config)Works everywhere S3 works.
Presigned URL flow, progress tracking, multipart uploads. Compatible with R2, Backblaze B2, and MinIO out of the box.
- Presigned URL uploads
- Multipart support
- R2 · Backblaze · MinIO
useStorageProvider('s3', config)Media transforms, built in.
Upload presets, on-the-fly transformations, auto-optimization. Replace the Cloudinary widget entirely with Shelf UI components.
- Upload presets
- On-the-fly transforms
- Auto format & quality
useStorageProvider('cloudinary', config)More adapters coming — Firebase Storage, Azure Blob, ImageKit, Uploadthing
You choose the foundation.
We support both.
Radix UI or Base UI — identical component API regardless. The registry serves the correct version for your choice.
shelf init --primitive=base-uiSwitch at any time — zero migration cost.
shelf init --primitive=base-uiZero runtime overhead. All animations run purely via CSS — no JS bundle cost, no hydration delay, no forced dependency.
- No extra dependency
- Zero bundle cost
- Works without JS
npx shadcn@latest add @shelf-ui/dropzoneOpt into Motion (formerly Framer Motion) for physics-based springs, drag interactions, and advanced entrance animations.
- Spring physics & gestures
- Drag, reorder, layout animate
- ~30kb gzipped added
npx shadcn@latest add @shelf-ui/dropzone --motionSame component API. Same props. The animation layer is an implementation detail — switch without touching your code.
Start building in
60 seconds.
Add your first component. No config, no wrappers, no surprises.
CSS transitions by default. Motion when you want it.