Hero Local
Local business hero with open-now status, rating, address and a quick table booking card.
- Type: Hero section
- Styles: Dark, Light
- Licence: Charcoal UI Pro
About Hero Local
Hero Local is built for places people visit: a full-bleed photo, a live open-now badge from your opening hours, rating and review count, address and phone, and a booking card where guests pick a party size and time.
It is a full-width hero section for React and Tailwind CSS 4, in a dark and light style. Preview it at any width above, then install it with one command.
When to use Hero Local
- Restaurants, bars and cafés.
- Spas, salons and studios.
- Coworking spaces and day passes.
- Bakeries taking pre-orders.
How it is built
Opening status is worked out from the visitor's clock, the booking card uses accessible radio groups, and the title, labels and time slots are props, so 'Book a table' can become 'Book a class'.
It is composed from Button, Live Dot, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Hero Local
Hero Local is part of 5 full templates, so you can see it in a finished page.
- Juniper template: Wood fire, small plates, booked tables.
- Kinfolk template: Bread, coffee and three neighbourhood shops.
- Stillwater template: Treatments, booked in a breath.
- Lotus template: Classes, teachers and a timetable.
- Hive template: Desks, rooms and people worth sitting near.
- Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
- Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
- Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
- Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
- Live Dot: A React presence dot with a pulsing halo for live, busy, away and offline
Install Hero Local
npx shadcn@latest add @charcoal/hero-localHero Local is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Hero Local work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.