Seasonal Dish Feature

Featured dish spotlight with seasonal badges, availability dates, pricing, and order button. Perfect for highlighting limited-time menu items and chef specials.

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 badge, button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/seasonal-dish-feature.json

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

Usage

The file also exports food14Demo, 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 { Food14, food14Demo } from "@/components/blocks/food/food14";

export default function Page() {
  return <Food14 {...food14Demo} />;
}

Props

Prop	Type	Default	Description
seasonBadge	string	undefined	Pill above the heading, e.g. "Spring Menu"; only rendered when set.
heading	ReactNode	none	Dish name.
description	string	undefined	Dish description paragraph.
availability	string	undefined	Availability window text, e.g. "Available March 1 – May 31".
price	string	undefined	Price, shown large next to availability.
tags	string[]	[]	Small outline badges below the description, e.g. dietary or chef notes.
image	{ src: string; alt: string }	undefined	Dish photo; falls back to a MediaSlot placeholder when omitted.
orderLabel	string	"Order now"	Label for the order button.
orderHref	string	undefined	When set, the order button renders as a real link to this URL.
className	string	none	Extra classes for the outer section element.

Behavior notes

Purely presentational: no interactivity.
The order button renders as a real link when orderHref is set, and as an inert, non-functional button (no onClick) otherwise - there is no cart or ordering logic behind it either way.
price and availability sit side by side in a single row and each renders independently; either can be omitted without leaving a gap.

More Food Blocks

View all →

Loyalty Rewards Program

Four-tier rewards program with points earning steps, benefit lists, and app store download buttons.

Gift Card Shop

Gift card purchase interface with preset amounts, custom input, digital/physical delivery options, and live preview.

Online Ordering Hub

Delivery platform cards with logos, fees, and delivery times alongside pickup info with address and phone.

Expandable Menu Accordion

Collapsible menu items revealing full images, calorie counts, protein info, and allergen badges.

Daily Specials Chalkboard

Dark-themed chalkboard-style menu with decorative corners, day labels, and timestamp.

Dietary Filter Menu

Interactive menu with dietary filter buttons (vegetarian, vegan, gluten-free) and allergen warnings.