Search documentation

Find a vivid-layer page or product.

Product Cards

Product tiles with imagery, price and specs.

Product Card 01

A product image and price beside four spec cells on a hairline grid.

pnpm dlx shadcn@latest add @vivid-layer/product-card-01
Aurora Display silver monitor with a blue and violet screen
Aurora Displayfrom $1,299
Resolution5120 × 2880
Brightness600 nits
Refresh rate120 Hz
Ports3× Thunderbolt

Product Card 02

Three products side by side on a hairline grid, like a shop shelf: a tall image, name and edition, and a price row with an add button.

pnpm dlx shadcn@latest add @vivid-layer/product-card-02
Print of a soft mesh gradient in blue and violetNew

Mesh No. 4

Giclée · 50 × 70 cm

$180
Print of merging metaball shapesBestseller

Metaballs

Giclée · 50 × 70 cm

$180
Print of a grainy warm gradient

Grain Study

Risograph · 30 × 40 cm

$64

Product Card 03

A product detail: the photograph spans two rows over a strip of alternate views, beside a full-height buying column with rating, price, colour, size and add to cart.

pnpm dlx shadcn@latest add @vivid-layer/product-card-03
Aurora Display silver monitor with a blue and violet screen
  • Front viewFront
  • Detail viewDetail
  • Stand viewStand
Displays

Aurora Display

4.8 · 212 reviews
$1,299$1,499
Colour · Silver
Size
27″32″
Free shipping · 30-day returns