Skip to main content
Clever Ops

Specials Board

Chef's specials as a chalkboard-turned-editorial grid, hairline tiles with course labels, dish stories, prices, and one tonight-only tile carrying the accent.

Preview & code

Loading Specials Board preview
Open in v0

Installation

pnpm dlx shadcn@latest add @cleverui/restaurant-specials

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { RestaurantSpecials } from '@/components/blocks/restaurant-specials'
Exampletsx
import { RestaurantSpecials } from '@/components/blocks/restaurant-specials'

export default function RestaurantSpecialsDemo() {
  return (
    <RestaurantSpecials
      eyebrow="Tonight"
      heading="From the wood fire and the cold case."
      specials={[
        {
          course: 'To start',
          name: 'Grilled peach & prosciutto',
          story: 'Late-summer peaches, paper-thin San Daniele, torn mint, and black pepper honey.',
          price: '18',
          marks: ['GF'],
        },
        {
          course: 'From the hearth',
          name: 'Lamb shoulder confit',
          story: 'Twelve-hour confit, smoked eggplant purée, pickled shallot, and flatbread for the juices.',
          price: '42',
          featured: true,
        },
        {
          course: 'From the sea',
          name: 'Day-boat scallops',
          story: 'Seared hard, brown-butter capers, corn pudding, and a squeeze of charred lemon.',
          price: '38',
          marks: ['GF', 'DF'],
        },
        {
          course: 'Garden',
          name: 'Charred cabbage wedge',
          story: 'Misoyaki glaze, toasted sesame, soft herbs, and crispy shallots, full plate, not a side.',
          price: '22',
          marks: ['VG'],
        },
        {
          course: 'To finish',
          name: 'Honeyed ricotta tart',
          story: 'Thyme shortcrust, whipped ricotta, wildflower honey, and crushed almonds.',
          price: '14',
          marks: ['V', 'N'],
        },
        {
          course: 'Nightcap',
          name: 'Amaro affogato',
          story: 'House vanilla gelato drowned in Averna and a float of cold-brew concentrate.',
          price: '12',
          marks: ['V', 'GF'],
        },
      ]}
    />
  )
}

API reference

RestaurantSpecials accepts the following props.

PropTypeDefaultDescription
eyebrowstring'Tonight'–
headingstring––
specials*SpecialDish[]–3–6 dishes; at most one featured

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx
export interface SpecialDish {
  course: string
  name: string
  story: string
  price: string
  /** at most one featured per board, primary keyline + tonight-only tag */
  featured?: boolean
  marks?: string[]
}

Frequently asked questions

How do I install the Specials Board component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/restaurant-specials`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Specials Board require?

Specials Board uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Specials Board to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services