Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

File tools template

A complete file converter site that actually works: drop a file and the home page lists only what can be done to it, and every tool page shows results as files go in, with the new size, a before and after slider and a download. Fourteen image and PDF tools and nine conversion pages run in the browser, so nothing is uploaded.

Pro
pnpm dlx shadcn@latest add @caliper/file-tools-template
Stayput

Convert and edit files. They never leave this tab.

Images and PDFs, done right here in your browser. No upload to wait for, no account, no daily limit.

Files stay on this device

Drop a file to begin

Paste with Ctrl V, or try a sample

Every tool

Popular conversions

Nothing to intercept

There is no upload step, so there is no server holding your passport scan or your payslip. Turn off your Wi-Fi and try it.

As fast as your device

No queue and no progress bar for a transfer. A photo is finished before an upload would have started.

No limits to run into

No account, no credits and no daily cap. Add a hundred files if your device can hold them.

Questions

No. The work happens inside this browser tab, so your files never leave your device. Disconnect from the internet once the page has loaded and it carries on working.

There is no account, quota or daily cap. The only limit is what your device can hold in memory, so very large batches take longer on a phone than a laptop.

There is nothing to keep. Results exist in this tab until you close it, and your originals are never changed.

Installs components/ui/file-tools-template.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-react, pdf-libMotion none in component source

When to use

Use it for

  • A free converter or PDF toolkit built around privacy and search traffic.
  • Adding file tools to a product, with your own engines behind the same interface.

Skip it when

  • Formats a browser can't read, such as HEIC in Chrome, without adding a decoder through a tool's `run`.
  • Workflows that need accounts and stored files; use `FileManager`.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

The drop area answers
A dropped or pasted file turns the home page's drop area into a bench listing only the tools that open that file, so nobody has to choose a tool first.
Results without a button
A tool runs as soon as files go in and again when an option changes, so the size and preview are always current and Download is the only action.
Files follow you
Moving to another tool keeps the files it can open, so a photo can be cropped, then compressed, then turned into a PDF.

Usage

A tool is data
Each tool is a name, fields and a run function. Reword, remove or add tools by changing the list; point run at any engine, in the browser or not, and the interface stays the same.
Real addresses
Render it from a catch-all route with basePath="" and initialTool, and each tool gets its own page for search engines. Your generateMetadata can read each tool's title and lead.
No PDF drawing
Pages show as numbered sheets of the right shape rather than pictures, which avoids shipping a PDF renderer. PDF to JPG needs one, so it isn't in the default list.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/file-tools-template

Adds its 27 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { FileToolsTemplate } from "@/components/ui/file-tools-template"

The worked example comes with Pro

The 33-line example behind the preview opens here, ready to copy.

  • 602 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

FileToolsTemplate

component
PropTypeDefaultDescription
brand *{ name: string; logo?: ReactNode; }—
hero *{ title: string; titleSoft?: string | undefined; body: string; }—
promises{ title: string; body: string; }[][]Reasons to trust the site, under the tools.
toolsFileTool[]fileTools
familiesToolFamily[]fileToolFamilies
samplesFileToolSample[][]Small files people can try without one of their own.
faq{ q: string; a: string; }[]fileToolsFaq
footer{ note: string; links?: { label: string; href: string; }[] | undefined; }—
headerActionsReactNode—Beside search in the header: a theme switch, an install button.
basePathstring—The path the tools live under, "" for the site root, so each tool has a real address (see the docs). Leave it out for #/ addresses.
initialToolstring""The tool to open first, from your router.
classNamestring—

Accessibility

It exposes alert and status semantics, with aria-hidden, aria-label, aria-pressed, aria-labelledby, aria-busy and aria-current kept in step with state. Changes that matter are announced through a live region.

Keyboard and focus handling comes from Radix dialog and popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Files examples