Application · Clean SaaS · 5 blocks
File processing workspace
A focused media workspace with local file selection, output controls, a filterable task queue, downloadable demo previews, and a clear usage summary.
Interactive · 1200px viewport · Scroll inside the preview
Install the complete page
One command installs the page component, its matching blocks, shared helpers, and MIT notices into your configured components directory. Prepare your existing project once, then run the page install command.
Before the first install
- 1.
Open your existing React project
Use React 19+, TypeScript/TSX, and a working Tailwind CSS 4 build. Keep the project's existing router, dependencies, and global stylesheet.
- 2.
Check components.json before installing
Reuse an existing components.json. Its aliases.components must resolve in TypeScript and the bundler, and tailwind.css must point to the stylesheet your app loads. Do not reinitialize an already configured project.
Only if components.json is missing; run inside the existing app and follow its framework setup.
npx shadcn@latest init - 3.
Include the installed sources in Tailwind
Keep the host's standard shadcn theme variables, Tailwind @theme mappings, and base border styles loaded (background, foreground, border, sidebar, and chart tokens). Ensure Tailwind scans the actual installed components directory. Restricted source(none), ignored paths, and monorepos may need an @source path relative to the stylesheet. For theme='dark', use a class-based dark variant in the host CSS.
- 4.
Import through your configured components alias
The @components/ entry is a registry target placeholder, not a JavaScript import. Replace the example's @/components prefix with components.json aliases.components, verify the file printed by the CLI, and mount it in an existing host route.
Missing styles or class-based dark mode?
Merge only the directives your Tailwind CSS 4 stylesheet needs. This source path example assumes src/styles.css and components installed under src/components; adjust it to your actual directory. Keep your host’s existing dark-mode selector and use theme="inherit", or configure this class variant when using theme="dark".
/* Example: src/styles.css */
/* Add only if this directory is outside your existing scan scope. */
@source "./components/uiblocks";
/* Required for the recipe theme="dark" class switch. */
@custom-variant dark (&:where(.dark, .dark *));Setup references: shadcn configuration · Tailwind source scanning · Dark mode
Install this page
npx shadcn@latest add https://uiblocks.org/r/recipe-tool-workspace.jsonImport one component
import ToolWorkspaceRecipe from "@/components/uiblocks/recipe-tool-workspace/recipe-tool-workspace";
export default function WorkspacePage() {
// Connect onRun/onRetry and upload/result adapters to your application.
// Controlled mode never fabricates processing, result files, or completion.
return <ToolWorkspaceRecipe mode="controlled" websiteHref="/" upgradeHref="/pricing" />;
}The import example uses the standard @/components alias. Keep your project’s existing alias and use the installed entry printed by shadcn. Pass your own copy, links, and callbacks through the component options below.
This example starts in controlled mode with no simulated results. Connect processing callbacks and your upload/result controls to your own service. The UI package does not upload or convert files. Use the separate local demo below only to inspect sample interface behavior.
Local interface demo · no upload or conversion
import ToolWorkspaceRecipe from "@/components/uiblocks/recipe-tool-workspace/recipe-tool-workspace";
export default function WorkspaceDemo() {
// Local interface simulation only. No file is uploaded or converted.
return <ToolWorkspaceRecipe mode="demo" websiteHref="/" upgradeHref="/pricing" />;
}Component options and callbacks
- mode
- Default 'controlled' mode never fabricates processing or results. Explicit mode='demo' enables browser-only timers, illustrative files, SVG downloads, and optional state controls.
- files, onFilesChange, status, progress, tasks, results
- Supply real service state in controlled mode. The default file selector retains metadata only, not File bytes. Keep File objects in the host uploader and use renderUpload for authenticated uploads.
- onRun, onRetry
- Controlled-mode callbacks receive selected file metadata/format or a task ID. The host performs network work and supplies status/results; rejected callbacks show a retryable error, never a simulated success.
- renderUpload, renderResults, headerSlot, footer
- Replace example UI with your real upload control, authenticated result/download links, navigation/account header, and product footer. Controlled mode displays supplied result records without inventing previews or downloads; explicit demo mode uses SVG examples.
- header, upload, queueTitle, resultsTitle, usage, websiteHref, upgradeHref
- Adapt workspace copy, product identity, plan/usage data, and normal host navigation links. Do not treat illustrative credits or download previews as real billing or conversion.
- searchQuery, onSearchChange
- Share one search state across the workspace header, task queue, and results, or allow the page to manage local search.
- theme, className
- Inherit the host theme, or enable its class-based dark variant with theme='dark'; customize shared Tailwind 4 theme tokens and the page className.
The page, block by block
Included in the complete page bundle. You can also reuse each block individually.
Keep the design intact
- Keep the workspace heading to one short sentence and file names to their original values, truncating visual labels when needed.
- Use shared state for file selection, queue progress, and results; keep the upload controls disabled while a task runs.
- Provide empty, processing, completed, and error states. Status must remain understandable without relying on color.
- The preview is a local interface simulation. Selected videos are never uploaded or converted; downloads are labeled SVG demo previews.
- Connect the upload and retry callbacks to your own authenticated processing service before using this as a production tool.
- Keep demo credits and illustrative usage separate from real billing data. Validate the layout with long file names and mobile widths.
Hand this recipe to your AI assistant
Build a file-processing workspace using the UIBlocks tool-workspace recipe and clean-saas style. Install the complete recipe-tool-workspace registry item in one command and import ToolWorkspaceRecipe. Inspect its full preview and preserve the neutral surfaces, violet accent, type scale, and spacing. Use explicit mode='demo' only to inspect the browser-only sample. For a real product, use controlled mode with one source of files/tasks/results/search state and onRun/onRetry service callbacks; supply renderUpload for actual File bytes and renderResults for real authenticated download URLs. Adapt the blocks' explicit demo copy. Implement empty, processing, completed, and error states without presenting simulated conversion or credits as real. Check keyboard navigation, long file names, and mobile layout.
Read the recipe JSON