AtelierSee the skin. Ship the source.
Recolored templates don't show real product feel. Preview themes and components as they'll ship, copy the source, and pick a direction before build.
Atelier
Component preview
101 components · 21 themes · downloadable source · free to browse
Themes grounded in real products
Scroll the catalog skins. Each one tracks tokens and recipes from a shipped site, not a recolored generic kit.
Zinc Folio
Magenta Edit
Indigo Glass
Warm Ledger
Lime Meadow
Cream Block
Atelier
Sky Flat
Sage Wedge
Ember Velvet
Polar Frost
Ink Line
Bone Still
Volt Arc
Prism Scan
Bubble Gloss
Cloud Loop
Teal Ridge
Frost Pane
Noir Garden
Lunar Slate
One component, every product voice
Pass theme and mode on each instance. Fields, buttons, and shells pick up the right ink, radius, and motion without copying token blocks into every app.
- Light and dark palettes for every catalog theme
- Recipes tuned per product, not one gray border everywhere
- Docs previews let you cycle the full matrix before you download
Save draft · four skins
Zinc Folio
Magenta Edit
Indigo Glass
Lime Meadow
Same action, different product chrome · example layout
Download once, drop into your repo
The core bundle ships shared themes, field shell, and utilities. Each component is a single file with install instructions and npm deps ready to copy.
- Core zip extracts into src/app/ui/core/
- Per-component .tsx download from every docs page
- Copy-ready npm install commands on the Install tab
Install · Button
1. Core (once)
2. This component
src/app/ui/button.tsxExample install panel · not your project
Walk the room before you commit
Pick a lookbook, tour five sample screens, compare two directions side by side, then share a summary link after the review session.
- Lookbooks group themes by product mood
- Marketing, dashboard, library, auth, and workspace rooms
- Fieldnote showcase with layout variants for presentation mode
Client studio · Step 1
Pick a lookbook direction, then walk five sample rooms before you share a summary link.
Sample lookbooks · example layout
Build palettes worth saving
Tune accent, canvas, corners, type, and motion on a live preview. Save to your account, publish to the community catalog, or export when you are ready to promote a theme.
- Recipe base from any catalog theme for honest button and field chrome
- My themes library with restore from trash
- Sign in to walk lookbooks, save themes, and share review links
Production components, documented end to end
Previews cover every variant and state. Usage snippets, downloadable source, props tables, and theme compatibility checks are built in.
Actions
5 components
Buttons, links, menus, and command surfaces.
Browse actions →
Forms
29 components
Inputs, pickers, toggles, and field shells.
Browse forms →
Feedback
13 components
Alerts, toasts, progress, and empty states.
Browse feedback →
Layout
14 components
Cards, dialogs, tables, and page chrome.
Browse layout →
Navigation
14 components
Tabs, rails, sidebars, and wayfinding.
Browse navigation →
Display
26 components
Type, badges, avatars, and data presentation.
Browse display →
Preview the look. Download the files. Share the decision.
Browse the component library for free. Studio requires a sign-in. Showcase stays public.