Atelier: Art print shop template
A gallery that happens to have a checkout.
For print shops and galleries: a centred editorial nav with bag count, a gallery hero, a filterable product grid, a full product page with frame preview, reviews, press and a newsletter footer.
About the Atelier template
Atelier is a gallery with a checkout. A centred serif shop nav, a gallery hero, a filterable product grid, a full product page with a live frame preview, reviews, press quotes and an early-access newsletter make prints feel precious.
A gallery that happens to have a checkout. It is a complete art print shop landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.
Who Atelier is for
- Art print and poster shops.
- Photographers selling prints.
- Galleries and editions.
- Framing businesses.
What is inside
8 sections, top to bottom:
- Navbar Centered: Editorial shop nav with a big centred serif wordmark that shrinks on scroll and a bag count.
- Hero Gallery: Agency hero: an oversized headline with a highlighted phrase over two counter-scrolling rows of work.
- Product Grid: Shop grid with category chips, sorting, wishlist hearts and a quick-add button that fills the bag.
- Product Detail: Product page for an art print: thumbnails, live frame preview, size pricing, quantity and add to bag.
- Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- CTA Newsletter: Newsletter signup that validates inline and confirms with a drawn check.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
How it is built
Products, sizes, frames and reviews are props, and the shop nav shows a bag count. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Atelier
npx shadcn@latest add @charcoal/atelierTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Atelier for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Atelier a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Centered: Editorial shop nav with a big centred serif wordmark that shrinks on scroll and a bag count.
- Hero Gallery: Agency hero: an oversized headline with a highlighted phrase over two counter-scrolling rows of work.
- Product Grid: Shop grid with category chips, sorting, wishlist hearts and a quick-add button that fills the bag.
- Product Detail: Product page for an art print: thumbnails, live frame preview, size pricing, quantity and add to bag.
- Testimonials Rating: Store-style review summary with an average, a star histogram that filters, and verified reviews.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- CTA Newsletter: Newsletter signup that validates inline and confirms with a drawn check.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.