Coffee shop website template
Little Dune Coffee
A sunny, playful template for cafés, roasteries and bakeries. Warm sand and terracotta, a friendly serif and pill-shaped buttons give it a beach-town warmth. Inside: a photo collage hero, menu teaser and full price list, a roasting story, bean subscription tiers, catering, a cupping schedule, reviews and a brew-guide blog.
Free
The full site in all three formats. No email required.
Download Little Dune CoffeeAll 20 sites + future ones$49Instant download · 7-day refund before first download
Every page, finished
9 pages · 39 sections · 18 photos
Design system
- Display face
- Young Serif
- Body face
- Outfit
- Header · footer · images
- pill · mega · rounded
- paper
#F4E8D4 - surface
#EBDBC1 - ink
#3A2316 - muted
#765A48 - line
#D9C4A5 - brand
#C4553C - brandInk
#FFF6EA - accent
#2D6A5C
What’s inside
- Next.js 16 project — App Router, static export, TypeScript
- Astro 7 project — same components as .astro files
- Plain HTML — compiled Tailwind CSS, open index.html
- 18 photos as WebP at 1600px and 800px, plus the prompts
- All copy in one site.json — names, prices, hours, posts
- Working contact form markup (Formspree-ready) and thank-you page
- SEO titles, descriptions and Open Graph tags on every page
Sections used
- Collage hero
- Marquee
- Price list / menu
- Image + text
- Service cards
- Testimonials
- Info bar
- Call to action
- Page header
- Story
- Team
- Process steps
- Timetable
- Pricing tiers
- FAQ
- Contact form + details
- Newsletter
- Article grid
- Article layout
Next.js 16
App Router · static export
Astro 7
Components + content JSON
Tailwind 4
Theme as CSS variables
HTML
Compiled CSS, no build
About the coffee shop template
Can I use it for a café that does not roast?
Yes. Swap the roastery feature for your bakery or sourcing story and the template works just as well.
How do I show my opening hours?
Hours appear in the footer, the info bar and the contact page, with room for separate weekday, weekend and pickup times.
Can I list dietary information?
Each menu item has a description and tag, ideal for oat milk, vegan or gluten-free notes.
Can I use it for a client?
Yes — unlimited personal and client projects. You just can’t resell the template itself.
How do I change the business name, colours and photos?
Edit site.json for words and images; change the eight colour variables and two font names at the top of global.css. Every page follows.
Building for this industry? Read the coffee shop website template guide.
