@pushduck/ui

React UI components for pushduck - File upload components you can copy and paste into your apps.

Overview

@pushduck/ui provides a collection of beautiful, accessible file upload components built with React, TypeScript, and Tailwind CSS. These components are designed to work seamlessly with the pushduck library and can be customized to match your application's design.

Philosophy

Following the shadcn/ui approach, these are not distributed as an npm package. Instead, you copy the component code directly into your project, giving you:

• ✅ Complete ownership of the component code
• ✅ Full customization freedom
• ✅ No version conflicts or breaking changes
• ✅ Zero bundle impact - only install what you use
• ✅ AI-friendly - LLMs can read and modify your components

Installation

Use the pushduck CLI to add components to your project:

1# Install a specific component
2npx @pushduck/cli@latest add upload-dropzone
3
4# Install multiple components
5npx @pushduck/cli@latest add upload-dropzone file-list progress-bar
6
7# Install the complete demo
8npx @pushduck/cli@latest add upload-demo

Available Components

Core Components

• upload-dropzone - Drag-and-drop file upload zone with validation
• file-list - Display files with upload progress and status
• progress-bar - Upload progress indicator with status states
• upload-button - Simple file upload button

Composed Components

• upload-demo - Complete upload interface combining all components

Quick Start

After installing components with the CLI, use them in your React app:

1import { UploadDropzone } from "@/components/ui/upload-dropzone"
2import { FileList } from "@/components/ui/file-list"
3import { useUploadRoute } from "pushduck/client"
4
5export function MyUploader() {
6  const { files, upload } = useUploadRoute("documentUpload")
7  
8  return (
9    <div className="space-y-4">
10      <UploadDropzone
11        route="documentUpload"
12        accept="application/pdf"
13        maxSize={10 * 1024 * 1024} // 10MB
14        onFilesAdded={(files) => console.log('Files added:', files)}
15      />
16      
17      <FileList
18        files={files}
19        onRemove={(fileId) => console.log('Remove:', fileId)}
20      />
21    </div>
22  )
23}

Component Documentation

UploadDropzone

A drag-and-drop upload zone with file validation and visual feedback.

1<UploadDropzone
2  route="myRoute"
3  accept="image/*"
4  maxSize={5 * 1024 * 1024}
5  maxFiles={5}
6  multiple={true}
7  onFilesAdded={(files) => console.log(files)}
8  onUploadComplete={(results) => console.log(results)}
9/>

Props:

• route (required): Upload route name from your API
• accept: Accepted file types (MIME types or extensions)
• maxSize: Maximum file size in bytes (default: 10MB)
• maxFiles: Maximum number of files (default: 10)
• multiple: Allow multiple files (default: true)
• validator: Custom validation function
• onFilesAdded: Callback when files are dropped/selected
• onUploadComplete: Callback when upload completes
• onUploadError: Callback when upload fails

FileList

Display a list of files with upload progress and status indicators.

1<FileList
2  files={files}
3  allowRemove={true}
4  onRemove={(fileId) => removeFile(fileId)}
5  onRetry={(fileId) => retryUpload(fileId)}
6/>

Props:

• files (required): Array of FileItem objects
• allowRemove: Whether files can be removed (default: true)
• onRemove: Callback when file is removed
• onRetry: Callback when file upload is retried
• renderFile: Custom file item renderer

ProgressBar

Upload progress indicator with customizable styling.

1<ProgressBar
2  value={progress}
3  size="md"
4  variant="default"
5  showValue={true}
6  animated={true}
7/>

Props:

• value (required): Progress value (0-100)
• max: Maximum value (default: 100)
• size: Size variant ("sm" | "md" | "lg")
• variant: Color variant ("default" | "success" | "error" | "warning")
• showValue: Show percentage text
• animated: Enable animation

UploadButton

Simple file upload button with built-in file input.

1<UploadButton
2  route="myRoute"
3  accept="image/*"
4  multiple={false}
5  variant="default"
6  size="md"
7>
8  Upload Photo
9</UploadButton>

Props:

• route (required): Upload route name from your API
• accept: Accepted file types
• multiple: Allow multiple files (default: false)
• variant: Button style variant
• size: Button size variant
• onFilesSelected: Callback when files are selected

Customization

Since you own the component code, you can customize anything:

Styling

Components use Tailwind CSS classes. Modify the className props or edit the component source directly:

1<UploadDropzone
2  className="border-blue-500 bg-blue-50"
3  // ... other props
4/>

Behavior

Edit the component files directly to change behavior:

1// In your copied upload-dropzone.tsx
2const handleDrop = React.useCallback((e: React.DragEvent) => {
3  // Add your custom logic here
4  console.log('Custom drop behavior')
5  
6  // Original logic...
7  e.preventDefault()
8  // ...
9}, [])

Add New Props

Extend component interfaces to add new functionality:

1export interface UploadDropzoneProps {
2  // ... existing props
3  
4  // Your custom props
5  onCustomEvent?: () => void
6  customOption?: boolean
7}

Dependencies

Components require these peer dependencies:

• react >= 18.0.0
• react-dom >= 18.0.0
• tailwindcss >= 3.0.0
• pushduck (for upload functionality)
• lucide-react (for icons)

Registry URL

Components are served from: https://pushduck.dev/r/[component-name].json

Example:

• https://pushduck.dev/r/upload-dropzone.json
• https://pushduck.dev/r/file-list.json

Development

To contribute or modify the registry:

1# Clone the repo
2git clone https://github.com/abhay-ramesh/pushduck.git
3cd pushduck/packages/ui
4
5# Install dependencies
6pnpm install
7
8# Build the registry
9pnpm build
10
11# Watch for changes
12pnpm dev

License

MIT License - feel free to use these components in any project!

Credits

Inspired by shadcn/ui - the best component distribution system for React.