Artwork Customizer

Interactive controls for artwork alignment and pattern tiling. Automatically adapts UI based on artwork type and product placements.

Interactive Demo

ArtworkCustomizer is an optional React convenience over the mockup URL. Alignment and tiling resolve to query params on the URL — this component just gives you the controls.

Try the interactive playground below - select different artworks, adjust alignment, and see the changes in real-time:

Loading playground...

ArtworkCustomizer Props

maxHeightnumber

Regular artwork only. Maximum print area height in pixels.
Defaults to 120. Used for alignment calculations.

classNamestring

Optional CSS classes for the container.

Artwork Type

srcstringrequired

Image URL for the artwork.

type"regular" | "pattern"required

Discriminator that determines which props are available.

Usage

The component automatically adapts UI based on artwork.typeand manages all state via Design context. Try switching between regular and pattern artworks above, or try product AR2P3G to see automatic placement tabs.

Installation

npm install @snowcone-app/ui

Styling — your Tailwind v4 build compiles it. In your global stylesheet, add @import '@snowcone-app/ui/styles/globals.css' (brings in Tailwind, the theme tokens, and an @source for the package) plus an @source for your own code. In Next.js, also add transpilePackages: ['@snowcone-app/ui']. Add className="dark" on an ancestor for dark mode.