Staaarter

Fine Dining Hero

Elegant hero with Michelin stars, awards, and decorative lines for luxury restaurants. Perfect for high-end dining establishments and tasting menu experiences.

By Staaarter Team
Food
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/fine-dining-hero.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/food/food13.tsx instead.

Usage

The file also exports food13Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Food13, food13Demo } from "@/components/blocks/food/food13";

export default function Page() {
  return <Food13 {...food13Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedSmall label flanked by decorative lines, e.g. "Est. 2011".
michelinStarsnumber0Number of filled star icons to render, clamped to 0-3.
headingReactNodenoneHero headline.
descriptionstringundefinedSupporting paragraph under the headline.
awardsstring[][]Award/press mentions listed in a row below the buttons, separated by a top border.
buttonsButtonItem[][]CTA buttons under the description.
classNamestringnoneExtra classes for the outer section element.

Types

interface ButtonItem {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
}

Behavior notes

  • Purely presentational: no interactivity. This is a page-section hero (py-16 sm:py-32), not a full-viewport min-h-screen screen, to match this repo's section-block convention.
  • michelinStars is clamped to the 0-3 range via Math.min/Math.max; passing 0 or omitting the prop hides the star row entirely.
  • Every button defaults to variant "default" unless it sets its own variant; buttons without an href render as plain, non-navigating buttons.
  • The awards row and its top border only render when the array is non-empty.