Peelaway: a browser-local image toolbox built on shadcn/ui Base Nova

[jakeloo]

I maintain Peelaway, a commercial image-editing product. Its free utility catalogue runs resizing, compression, conversion, cropping, inspection, and batch work in the browser, without an account or source-image upload.

Open the browser-local tools

The UI uses shadcn/ui's base-nova style with Base UI primitives, Tailwind CSS v4, React 19, and Vite. The useful boundary was not “make every workflow a generic component”; it was keeping stable interaction behavior in the copied UI layer while feature components own file and Canvas state.

What stayed in the UI layer:

• Base UI-backed Button, Input, Accordion, and AlertDialog components for focus, disabled, expanded, and invalid states.
• Small CVA variants shared by upload actions, processing actions, downloads, navigation, and account screens.
• One light/dark CSS-variable mapping connecting shadcn's semantic colors to the product palette.

What stayed domain-specific:

• Image decoding, object-URL lifecycle, Canvas transforms, target-byte attempts, measured output metadata, and native share/download behavior.
• Separate state machines for exact resizing, batch work, PDFs, inspection, and color tools.
• The privacy boundary: source pixels remain in the browser-local feature layer rather than passing through a UI abstraction or application API.

Owning the copied component code helped once the workflows accumulated more states: focus, invalid, disabled, and loading behavior could change once without teaching the primitives anything about images. Moving file and Canvas behavior into generalized components made their APIs harder to reason about, so those responsibilities stayed in feature modules.

How are others drawing the boundary between copied shadcn primitives and complex domain-state components in browser-heavy applications?

Disclosure: I maintain Peelaway. It is commercial, with free no-signup browser-local tools. This post was drafted with AI assistance. The single link carries an aggregate campaign tag so I can measure whether this community surface sends useful visits.