Charcoal UI

Juniper: Restaurant template

Wood fire, small plates, booked tables.

For restaurants and bars: a photo hero with open-now status and table booking, a printed menu with course tabs, a room accordion, reviews, press and a footer with live local time.

About the Juniper template

Juniper is for restaurants and bars. A photo hero shows if you're open now and books a table, a printed menu has course tabs and dietary tags, then rooms, reviews, press, FAQs and a footer with your hours and local time.

Wood fire, small plates, booked tables. It is a complete restaurant landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.

Who Juniper is for

  • Restaurants and bistros.
  • Bars and wine bars.
  • Cafés with table service.
  • Supper clubs and pop-ups.

What is inside

8 sections, top to bottom:

  • Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Hero Local: Local business hero with open-now status, rating, address and a quick table booking card.
  • Menu Restaurant: Printed-menu section with serif dishes, dotted price leaders, dietary tags and course tabs.
  • Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
  • 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.
  • FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
  • Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.

How it is built

Opening hours drive the open-now badge, and dishes are plain data. 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 Juniper

npx shadcn@latest add @charcoal/juniper

Templates 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 Juniper for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Juniper 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 Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
  • Hero Local: Local business hero with open-now status, rating, address and a quick table booking card.
  • Menu Restaurant: Printed-menu section with serif dishes, dotted price leaders, dietary tags and course tabs.
  • Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
  • 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.
  • FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
  • Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.

Juniper as Markdown