Introduction
A shadcn-style file UI component library. Copy-paste components for the complete file experience.
Shelf UI is an open-source component library for building file-related interfaces in React. It gives you composable, copy-paste components designed for the complete file experience — upload, preview, manage, and navigate — built on React 19, Tailwind CSS v4, and Radix UI.
Think of it as shadcn/ui, purpose-built for file UIs.
Why Shelf UI?
File-domain first
No other library treats file management as a complete UI domain. Shelf UI owns the entire experience — from the dropzone to the file tree.
Copy-paste ownership
Components are not installed as a dependency. You copy them into your project and own them entirely. Edit, extend, delete — no abstraction in the way.
Storage adapters built in
First-class Supabase Storage, AWS S3, and Cloudinary support. Drop in your config and uploads just work.
Headless hooks included
Every component ships with its underlying hook. Use the UI layer or go fully headless — your choice.
Shadcn registry native
Built on the shadcn open registry spec. Install any component with a single CLI command. Peer dependencies resolved automatically.
How it works
Shelf UI is built on the shadcn registry. Components are not installed as a package — you copy them into your project and own them entirely.
npx shadcn@latest add @shelf-ui/dropzonepnpm dlx shadcn@latest add @shelf-ui/dropzoneyarn dlx shadcn@latest add @shelf-ui/dropzonebunx shadcn@latest add @shelf-ui/dropzoneThis copies the component source into your components/shelf-ui directory. Customize it however you want.
Components
| Component | Category | Description | Status |
|---|---|---|---|
| Dropzone | Upload | Drag and drop file upload area with accept filtering and validation | Available |
| FileCard | Display | Smart preview card per file type — image, PDF, video, archive | Available |
| AttachmentChip | Display | Inline pill with icon, filename, and remove | Soon |
| FileTree | Management | Recursive folder/file browser with expand/collapse | Soon |
| FileBreadcrumb | Management | Path navigation bar | Soon |
Note: For complex layouts like Avatar Uploads, Queues, and Grids, we use Patterns combining the core components. See the Patterns guide for examples.
More components are being actively developed. Follow the repo for updates.
FAQ
Last Updated on Jun 25, 2026