The Salon Shelf

Installation

pnpm dlx shadcn@latest add @cleverui/salon-product-shelf

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

Usage

tsx

import { SalonProductShelf } from '@/components/blocks/salon-product-shelf'

Exampletsx

import { SalonProductShelf } from '@/components/blocks/salon-product-shelf'

export default function SalonProductShelfDemo() {
  return (
    <SalonProductShelf
      eyebrow="The shelf"
      heading="What we send you home with"
      intro="Nothing sits on our shelf that hasn't earned its place in the chair first."
      columns={3}
      products={[
        {
          name: 'Nourishing Leave-In Mist',
          brand: 'Oribe',
          blurb: 'The only leave-in we trust after colour, light enough for fine hair.',
          price: '$54',
          badge: 'Salon exclusive',
        },
        {
          name: 'Bond Repair Oil',
          brand: 'Olaplex',
          blurb: 'No.7 oil for mid-lengths that have seen a few lighteners.',
          price: '$48',
        },
        {
          name: 'Colour-Lock Shampoo',
          brand: 'Kérastase',
          blurb: 'Sulphate-free wash that keeps cool tones from fading early.',
          price: '$42',
        },
        {
          name: 'Silk Pillowcase',
          brand: 'Studio Edit',
          blurb: 'Less friction overnight means longer shine between glosses.',
          price: '$68',
          badge: 'House edit',
        },
        {
          name: 'Scalp Comfort Serum',
          brand: 'Aveda',
          blurb: 'For clients who feel heat on the scalp after a full head of foil.',
          price: '$39',
        },
        {
          name: 'Finishing Texture Spray',
          brand: 'R+Co',
          blurb: 'Soft grit without the crunch, we use it on every blow-dry.',
          price: '$36',
        },
      ]}
      note="Ask your stylist what your hair actually needs, honest answers only."
    />
  )
}

API reference

SalonProductShelf accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'The shelf'`	–
`heading`	`string`	`'What we send you home with'`	–
`intro`	`string`	–	one sensory sentence
`products`*	`SalonShelfProduct[]`	–	–
`columns`	`2 \| 3 \| 4`	`3`	–
`note`	`string`	`'Ask your stylist what your hair actually needs, honest answers only.'`	italic serif closing line beneath the shelf

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

Referenced types

Typestsx

export interface SalonShelfProduct {
  name: string
  brand: string
  /** italic why-we-stock-it line */
  blurb: string
  /** preformatted, e.g. '$54' */
  price?: string
  /** e.g. 'Salon exclusive' */
  badge?: string
}

Related components

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.

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.

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.

Certification Wall

Training diplomas and brand accreditations framed like certificates on a salon wall, double-hairline frames, serif academy names, holder and year lines. React and Tailwind trust.

Salon Price List

A full salon price list set like a printed tariff document, serif category heads, whisper hairline rows of service, duration and price, and junior/senior stylist columns in tabular figures.

Frequently asked questions

How do I install the The Salon Shelf 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-product-shelf`. 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 The Salon Shelf require?

The Salon Shelf 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 The Salon Shelf 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