Uploader + Viewer

retab-ui/dropzone-file-viewer-example

FreeBlock

One upload surface that becomes a file viewer, with the uploaded blob rendered by FileViewer.

Install it

npx shadcn@latest add https://ui.retab.com/r/dropzone-file-viewer-example.json

Source

registry/new-york-v4/blocks/dropzone-file-viewer-example.tsxui.retab.com/r/dropzone-file-viewer-example.json

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5import { type DropzoneExampleProps } from "./dropzone-example-shared";
6import { FileIntakeViewer } from "./dropzone-uploader-viewer";
7 
8export function DropzoneFileViewerExample({ className }: DropzoneExampleProps) {
9  return <FileIntakeViewer className={cn("h-[34rem]", className)} />;
10}

What it pulls in

npm packages

lucide-react

Other registry items

@retab/dropzone
@retab/file-viewer
@retab/file-size-format
@retab/file-thumbnail

Files it writes

registry/new-york-v4/blocks/dropzone-file-viewer-example.tsx
registry/new-york-v4/blocks/dropzone-uploader-viewer.tsx
registry/new-york-v4/blocks/dropzone-uploader-viewer-parts.tsx
registry/new-york-v4/blocks/dropzone-example-shared.tsx

More from retab-ui

All 130 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Classify Consensusclassify-consensus-viewer-block	retab-ui	Blocks	Free	1 dep · 4 files
CSV Sourcescsv-sources-block	retab-ui	Blocks	Free	no deps · 2 files
DOCX Sourcesdocx-sources-block	retab-ui	Blocks	Free	no deps · 2 files
Avatar Image Slotdropzone-avatar-image-slot	retab-ui	Blocks	Free	1 dep · 2 files
Dropzonedropzone-block	retab-ui	Blocks	Free	1 dep · 26 files
Comparison Pairdropzone-comparison-pair-upload	retab-ui	Blocks	Free	1 dep · 2 files
Controlled Queuedropzone-controlled-queue	retab-ui	Blocks	Free	1 dep · 2 files
Custom Thumbnail Griddropzone-custom-thumbnail-grid	retab-ui	Blocks	Free	1 dep · 2 files