Can I limit the types of files users can upload?

Yes, the Dropzone component includes an 'accept' prop that supports categories like images, audio, video, PDF, and text.

Is the UI customizable?

Absolutely. The components are built using shadcn/ui and Tailwind CSS, allowing you to easily modify the styling to match your application's design system.

Does this skill handle large file uploads?

Yes, it includes progress tracking and state management to handle multiple uploads, though actual size limits are usually defined by your underlying storage configuration.

What dependencies are required for the Storage UI skill?

You need the 'storage' skill installed for API endpoints, shadcn/ui for core components, and @phosphor-icons/react for iconography.

Storage UI Components

Name: Storage UI Components
Author: mattwoodco

bymattwoodco

•

デザインツール

Provides a complete set of React UI components for file uploads, browsing, and management integrated with storage APIs.

The Storage UI skill offers a suite of production-ready React components designed to handle end-to-end file management. It includes a drag-and-drop upload zone, a versatile file list with toggleable grid/list views, real-time upload progress tracking, and interactive file previews. Built on top of shadcn/ui and optimized for use with the storage skill's API endpoints, it allows developers to quickly implement professional asset management features without building complex state management and UI logic from scratch.

主な機能

01Real-time upload progress tracking with status and error handling

023 GitHub stars

03Integrated React Context provider for global file state management

04Drag-and-drop file upload with multi-file support and type validation

05Versatile file list component with toggleable grid and list layouts

06Built-in file preview modal for images, documents, and media

ユースケース

01Implementing file attachment and management systems for productivity apps

02Creating a dedicated media library or asset manager for a custom CMS

03Building a user dashboard with profile image or document upload capabilities

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills storage-ui

For use in Claude.ai and ChatGPT

Download Skill