Atelier
A complete portfolio page for an architecture or design studio: serif statement, work index with cursor previews, and contact.
Overview
A full page for studios that sell taste. The hero is a single serif statement with a short colophon. The work index is a ruled list where hovering a project dims the others and slides out a preview plate that follows the cursor. Each plate wipes in with a clip-path reveal.
Below it sit three numbered practice areas and a dark contact footer, where the email address is the call to action, set large with an underline that draws in on hover.
Preview plates are compositions generated from two colours per project, so the template looks finished before you add photography. Replace Plate with next/image when you have real images. It is one file written in Tailwind, and every section is a clear block you can lift out.
When to use
- Starting a whole site or app from a finished, consistent base.
When not to use
- Adding one section to an existing design.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/atelier-template.jsonnpx shadcn@latest add https://sundaeui.dev/r/atelier-template.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/atelier-template.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/atelier-template.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy atelier-template.tsx into components/sundae/.
- Make sure Tailwind scans that folder (v4 detects it automatically; v3 needs it in `content`).
- Import the component and use it as shown below.
Usage
import { AtelierTemplate } from '@/components/sundae/atelier-template'
export default function Page() {
return (
<AtelierTemplate
studio="Atelier Vos"
city="Amsterdam"
email="studio@ateliervos.nl"
projects={[{ year: '2026', title: 'House on the Dune', place: 'Texel, NL', discipline: 'Residential', plate: ['#c8b79a', '#3b3a33'], href: '/work/dune' }]}
/>
)
}Props
| Prop | Type | Default |
|---|---|---|
studioStudio name in the nav and footer. | string | 'Atelier Vos' |
statementHero statement. Use <em> for the muted italic phrase. | ReactNode | — |
projects{ year, title, place, discipline, plate: [colorA, colorB], href? }. | AtelierProject[] | — |
servicesPractice areas, best with three. | { title, body }[] | — |
emailContact address, used for Enquire and in the footer. | string | — |
cityShown in the colophon and footer. | string | — |
Accessibility
- Uses landmarks throughout: header, nav, sections with headings, and footer. There is a single h1.
- The cursor preview is decorative (aria-hidden), and the project rows are ordinary links that respond to focus as well as hover.
- Text contrast passes AA on both the light and dark surfaces.
Customization
- Map font-serif to a refined serif such as Canela or GT Super, or use the system serif for zero setup.
- Swap Plate for <Image> once you have photography. The 190×240 frame suits a 4:5 crop.
FAQ
- Is Atelier free?
- Atelier is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Atelier?
- Run npx shadcn@latest add https://sundaeui.dev/r/atelier-template.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Atelier support keyboard and screen readers?
- Uses landmarks throughout: header, nav, sections with headings, and footer. There is a single h1. The cursor preview is decorative (aria-hidden), and the project rows are ordinary links that respond to focus as well as hover.
- Does Atelier respect reduced motion?
- Yes. With prefers-reduced-motion set, decorative motion is removed and state changes are instant.
More like this
All templates →Margin Quote
Sections · Editorial- Pro
Ledger Pricing
Sections · Editorial - Pro
Billboard Hero
Sections · Brutalist Fold Accordion
Components · Understated- Pro
Bento Features
Sections · Understated - Pro
Word Morph
Motion · Expressive