Salon Price List

Installation

pnpm dlx shadcn@latest add @cleverui/salon-price-list

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

Usage

tsx

import { SalonPriceList } from '@/components/blocks/salon-price-list'

Exampletsx

import { SalonPriceList } from '@/components/blocks/salon-price-list'

export default function SalonPriceListDemo() {
  return (
    <SalonPriceList
      eyebrow="Services"
      heading="Price list"
      levels={['Junior stylist', 'Senior stylist']}
      note="All colour services include a consultation, toner and blow-dry."
      sections={[
        {
          title: 'Cut & finish',
          items: [
            {
              name: 'Restyle cut',
              duration: '60 min',
              prices: ['$95', '$140'],
            },
            {
              name: 'Trim & blow-dry',
              duration: '45 min',
              prices: ['$75', '$110'],
            },
            {
              name: 'Fringe tidy',
              duration: '15 min',
              prices: ['$28'],
            },
            {
              name: 'Blow-dry',
              duration: '30 min',
              prices: ['$55', '$75'],
            },
          ],
        },
        {
          title: 'Colour',
          items: [
            {
              name: 'Full head colour',
              duration: '90 min',
              prices: ['$165', '$210'],
            },
            {
              name: 'Root retouch',
              duration: '60 min',
              prices: ['$115', '$145'],
            },
            {
              name: 'Balayage',
              duration: '150 min',
              prices: ['$240', '$320'],
            },
            {
              name: 'Toner gloss',
              duration: '30 min',
              prices: ['$65', '$85'],
            },
          ],
        },
        {
          title: 'Treatments',
          items: [
            {
              name: 'Olaplex bond rebuild',
              duration: '20 min',
              prices: ['$45'],
            },
            {
              name: 'Scalp ritual',
              duration: '25 min',
              prices: ['$55', '$70'],
            },
            {
              name: 'Bridal trial',
              duration: '90 min',
              prices: ['$180'],
            },
          ],
        },
      ]}
    />
  )
}

API reference

SalonPriceList accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Services'`	spaced small-caps serif label
`heading`	`string`	`'Price list'`	–
`levels`	`string[]`	`['Junior stylist', 'Senior stylist']`	column labels for stylist seniority; pass one level to collapse to a single price column
`sections`*	`SalonPriceSection[]`	–	–
`note`	`string`	`'All colour services include a consultation, toner and blow-dry.'`	quiet closing line under the document

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

Referenced types

Typestsx

export interface SalonPriceSection {
  title: string
  items: SalonPriceItem[]
}

export interface SalonPriceItem {
  name: string
  /** e.g. '45 min' */
  duration?: string
  /** preformatted strings aligned to levels, e.g. ['$95', '$140']; a single value spans both columns */
  prices: string[]
}

Related components

Membership Glow

Beauty memberships with serif tier names like The Monthly Ritual, included treatments as airy lists, per-month prices in tabular figures, and a soft masked halo behind the signature tier.

Treatment Menu

A spa treatment menu set like a printed ritual card, serif italic treatment names, duration and price in quiet tabular figures, delicate hairline leaders. Sensory and unhurried.

Treatment Series

Prepaid treatment series set like an invitation, serif packs of three, six or nine with per-visit prices in quiet figures and an italic sharing note. React and Tailwind salon packages.

Booking Ritual CTA

An appointment CTA framed as the start of a ritual, a light serif invitation, a softened primary action, and a quiet phone path beside it. Unhurried, sensory, certain of itself.

Gift Voucher Card

A voucher presented like the gift itself, certificate hairlines, a light serif denomination display, a from-someone-lovely line, and a purchase CTA. E-commerce in the beauty voice.

Quiet Hours

Sensory-friendly quiet hours, weekly low-stimulation session times beside a gentle list of what changes, from dimmed lights to no dryers. A React and Tailwind panel for salons.

Frequently asked questions

How do I install the Salon Price List component?

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

Salon Price List 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 Salon Price List 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