@uploadkitdev/react

Premium React upload components for UploadKit.

Features

• UploadButton — one-click file picker with built-in progress indicator
• UploadDropzone — drag-and-drop upload area with visual feedback
• UploadModal — full-featured upload dialog with file list management
• FileList — paginated file browser with sort and search
• FilePreview — image thumbnail generation via canvas, fallback for non-images
• CSS theming — override any token via --uk-* custom properties
• Dark mode — first-class dark mode support, no JavaScript required
• Accessible — WCAG 2.1 AA, keyboard navigation, aria attributes throughout

Install

# npm
npm install @uploadkitdev/react

# pnpm
pnpm add @uploadkitdev/react

# yarn
yarn add @uploadkitdev/react

Peer dependencies: react >= 18, react-dom >= 18

Import the stylesheet in your app's root:

import '@uploadkitdev/react/styles.css';

Quickstart

import { UploadKitProvider, UploadButton } from '@uploadkitdev/react';
import '@uploadkitdev/react/styles.css';

export function App() {
  return (
    <UploadKitProvider apiKey="uk_live_..." endpoint="/api/upload">
      <UploadButton
        route="imageUploader"
        onUploadComplete={(result) => {
          console.log('Uploaded:', result.url);
        }}
        onUploadError={(error) => {
          console.error(error.message);
        }}
      />
    </UploadKitProvider>
  );
}

Components

| Component | Description | |-----------|-------------| | UploadKitProvider | Context provider — wrap your app or upload section once | | UploadButton | Button that opens the file picker and uploads on selection | | UploadDropzone | Drag-and-drop area; click to browse files | | UploadModal | Full-screen modal with file queue, per-file progress, retry | | FileList | Paginated file browser with search and delete | | FilePreview | Thumbnail for images, icon for other file types |

Hooks

| Hook | Description | |------|-------------| | useUploadKit() | Access the UploadKitClient instance from context | | useDragState() | Track drag enter/leave without flicker on child elements | | useThumbnail(file) | Generate an object URL thumbnail for a File | | useAutoDismiss(ms) | Auto-dismiss state after a delay (for success/error messages) |

Theming

All visual tokens are CSS custom properties. Override them in your stylesheet:

:root {
  --uk-primary: #6366f1;         /* accent / primary button color */
  --uk-primary-hover: #818cf8;   /* hover state */
  --uk-radius: 8px;              /* border radius for buttons and dropzone */
  --uk-font-family: inherit;     /* inherits your app font by default */
  --uk-surface: #ffffff;         /* component background */
  --uk-surface-hover: #f5f5f5;  /* hover background */
  --uk-text: #111111;            /* primary text */
  --uk-text-muted: #6b6b6b;     /* secondary / muted text */
  --uk-border: rgba(0,0,0,0.08); /* border color */
  --uk-error: #dc2626;           /* error state (WCAG AA on white) */
}

Dark mode example:

[data-theme="dark"] {
  --uk-surface: #1a1a1a;
  --uk-surface-hover: #2a2a2a;
  --uk-text: #fafafa;
  --uk-text-muted: #a1a1aa;
  --uk-border: rgba(255,255,255,0.08);
}

Links

• Full documentation
• Core SDK — @uploadkitdev/core
• Next.js adapter — @uploadkitdev/next

License

MIT