Staaarter

Daily Specials Chalkboard

Dark-themed chalkboard-style menu with decorative corners, day labels, and timestamp. Perfect for daily specials, soup of the day, and rotating menu items.

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

npx shadcn add https://staaarter.com/r/daily-specials-chalkboard.json

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

Usage

The file also exports food5Demo, 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 { Food5, food5Demo } from "@/components/blocks/food/food5";

export default function Page() {
  return <Food5 {...food5Demo} />;
}

Props

PropTypeDefaultDescription
dayLabelstring"Monday"Small uppercase day label above the heading.
headingReactNode"Today's Specials"Chalkboard heading.
updatedLabelstring"Updated this morning"Static freshness caption under the list; a fixed string prop, not a live clock.
specialsSpecialItem[][]Rotating special items listed on the board.
classNamestringnoneExtra classes for the outer section element.

Types

type SpecialItem = {
  name: string;
  description: string;
  price: string;
};

Behavior notes

  • The chalkboard card deliberately breaks from semantic Tailwind tokens (hardcoded neutral-900/neutral-950 colors) to force a consistent dark, chalk-on-slate look regardless of site theme, the same one-off exception pattern used by the Auth category's terminal-window block.
  • updatedLabel is a plain string prop with a static default; it is never computed from Date.now()/new Date() so the block renders identically on every build and every card thumbnail.
  • Corner accents are purely decorative border fragments with aria-hidden set; this is a plain server component with no interactivity.