Price List / Menu React component
A printed-menu style price list for cafés, salons and studios: section tabs with a sliding pill, dotted leaders to each price, sizes side by side, favourites and diet filters.
About the Price List / Menu component
Price List / Menu lays out prices the way a good printed menu does: names on the left, a dotted line across, prices on the right, with sizes side by side and short descriptions underneath.
Section tabs with a sliding pill jump between categories, and filter chips built from your tags narrow the list to things like Vegan or Gluten free. It suits cafés and restaurants as well as barbers, salons, studios and repair shops.
When to use it
Use it for restaurant and café menus, salon and barber price lists, treatment lists at clinics and spas, and workshop or repair rates.
For software plans with feature lists, use Pricing Table instead.
Installation
Add the Price List / Menu component to your project with the shadcn CLI. It lands in components/price-list-menu.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/price-list-menuOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<PriceListMenu /> accepts 8 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| eyebrow | string | "Harbour Street Café" |
| title | string | "The menu" |
| sections | { title: string; note?: string; items: PriceListItem[] }[] | DEFAULT_SECTIONS |
| currency | string | "€" |
| footnote Small print under the list. | string | "Tell us about any allergies before you order. Service is never added to your bill." |
| columns Two columns on wide screens. | 1 | 2 | 2 |
| showFilters Show filter chips built from the items' tags. | boolean | true |
- theme"dark" | "light"Default: "dark"
- eyebrowstringDefault: "Harbour Street Café"
- titlestringDefault: "The menu"
- sections{ title: string; note?: string; items: PriceListItem[] }[]Default: DEFAULT_SECTIONS
- currencystringDefault: "€"
- footnote
Small print under the list.
stringDefault: "Tell us about any allergies before you order. Service is never added to your bill." - columns
Two columns on wide screens.
1 | 2Default: 2 - showFilters
Show filter chips built from the items' tags.
booleanDefault: true
npm dependencies
Installed for you by the shadcn CLI.
Price List / Menu FAQ
- How do I add sizes?
- Pass price as a list, for example [{ label: "S", price: 2.8 }, { label: "L", price: 3.4 }], and the sizes appear side by side.
- Where do the filter chips come from?
- They're built from every tag on your items, so adding tags: ["Vegan"] creates the chip. Set showFilters={false} to hide them.
- Can it be one column?
- Yes, columns={1}. With two columns the list still drops to one on narrow screens.
- Is it accessible?
- The sections are a real tablist with arrow key support, filters are toggle buttons, and the row animation is off with reduced motion.
