Cocktail List Spread

Installation

pnpm dlx shadcn@latest add @cleverui/cocktail-list-spread

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

Usage

tsx

import { CocktailListSpread } from '@/components/blocks/cocktail-list-spread'

Exampletsx

import { CocktailListSpread } from '@/components/blocks/cocktail-list-spread'

export default function CocktailListSpreadDemo() {
  return (
    <CocktailListSpread
      eyebrow="The bar"
      heading="Cocktails"
      signatureLabel="our signature"
      note="Classics on request · Sunday evening surcharge $4 · Spirit-forward pours available neat"
      sections={[
        {
          title: 'House',
          drinks: [
            {
              name: 'Harbour Light',
              build: 'navy strength gin, suze, dry vermouth, olive brine',
              spec: 'gin · coupe · dry',
              price: '19',
              signature: true,
            },
            {
              name: 'Smoke & Cedar',
              build: 'peated scotch, amaro, maple, lemon, egg white',
              spec: 'scotch · rocks · smoky',
              price: '21',
            },
            {
              name: 'Bitter Orange Hour',
              build: 'reposado tequila, aperol, falernum, lime',
              spec: 'tequila · coupe · bright',
              price: '18',
            },
          ],
        },
        {
          title: 'Aperitivi',
          drinks: [
            {
              name: 'Fennel Spritz',
              build: 'fennel amaro, prosecco, soda, orange peel',
              spec: 'amaro · wine glass · light',
              price: '16',
            },
            {
              name: 'Cynar Highball',
              build: 'cynar, dry cider, ginger, cracked pepper',
              spec: 'amaro · highball · herbal',
              price: '15',
            },
          ],
        },
        {
          title: 'Zero proof',
          drinks: [
            {
              name: 'Garden Collins',
              build: 'seedlip garden, cucumber, elderflower, soda',
              spec: 'botanical · highball · clean',
              price: '12',
            },
            {
              name: 'Charred Lemonade',
              build: 'charred lemon, honey, thyme, soda water',
              spec: 'citrus · rocks · sharp',
              price: '11',
            },
          ],
        },
      ]}
    />
  )
}

API reference

CocktailListSpread accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Cocktails'`	–
`eyebrow`	`string`	–	spaced small-caps serif label
`sections`*	`CocktailSection[]`	–	2–4 sections (House, Aperitivi, Zero proof)
`signatureLabel`	`string`	`'our signature'`	legend text for the signature asterisk
`note`	`string`	–	mono footnote (classics on request, Sunday surcharge)

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

Referenced types

Typestsx

export interface CocktailSection {
  title: string
  drinks: CocktailDrink[]
}

export interface CocktailDrink {
  name: string
  /** ingredient line, e.g. "gin, suze, dry vermouth, olive brine" */
  build: string
  /** preformatted spirit · glass · profile */
  spec?: string
  price: string
  /** at most ONE signature:true across the entire list */
  signature?: boolean
}

Related components

Chef Story Strip

A provenance strip, the chef's name set in serif, one italic paragraph of kitchen philosophy, and a still small-caps line of the farms that supply the menu. Stillness as the trust signal.

Press Accolades Band

Restaurant press and awards band for React, accolades as serif text mastheads with mono years and one critic quote. Tailwind tokens, zero logo assets.

Private Dining Inquiry

An events block that sells the back room in serif, capacity and minimum spend as quiet data rows, and a three-field inquiry form with visible labels. Warm, unhurried, no SaaS urgency.

Ambience Mosaic

A room-first gallery mosaic built entirely from structural placeholder panels, varied warm muted token tones under a shared grain, each with a serif caption. Space, not food, no images.

Hours & Status Strip

Opening hours as a clean mono table with a live open-now lamp, today's row highlighted, next opening surfaced when closed. Print-schedule clarity, zero deps beyond motion.

Editorial Menu

A restaurant menu set like a fine editorial page, courses with dotted price leaders, dish notes in quiet ink, and dietary marks in mono. Print-menu craft for the web.

Frequently asked questions

How do I install the Cocktail List Spread component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/cocktail-list-spread`. 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 Cocktail List Spread require?

Cocktail List Spread 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 Cocktail List Spread 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.

Preview & code