Atelier — Component catalog & studio

Default snap scroll

Slide 1

Swipe or scroll horizontally

Slide 2

Snap aligns each card

Slide 3

Tab into the track to scroll

Default (no scrollbar)

Slide 1

Same snap behavior

Slide 2

Scrollbar chrome hidden

Slide 3

Track still scrolls

Circular avatars

Set variant="circular" on the track and use shape="circle" slides (or rely on the variant default).

Circular avatars (no scrollbar)

Circular sizes

Photo circles

Avatar + caption cards

Ada Lovelace

Nora Lee

James Doe

Mika Chen

Wide peek slides

Dashboard

Metrics, filters, and export actions on one surface.

Editor

Focus mode with theme-aware fields and tabs.

Mixed: card + circles

Featured

Full card slide beside avatars

Logo strip (small circles)

Many slides

Step 1

Welcome

Step 2

Pick theme

Step 3

Invite team

Step 4

Import data

Step 5

Done

Two-up compare

Before

Legacy zinc chrome

After

Atelier token-driven UI

API

Prop	Required	Type	Default	Description
variant	Optional	default \| default-no-scrollbar \| circular \| circular-no-scrollbar	—	Card or circular tracks, with optional hidden scrollbar chrome.
slideSize	Optional	sm \| md \| lg	—	Circle diameter when variant is circular.
shape	Optional	card \| circle	—	Per-slide shape override.
highlighted	Optional	boolean	—	Accent ring on active circular slide.