Treatment Series

Installation

pnpm dlx shadcn@latest add @cleverui/treatment-series-packages

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

Usage

tsx

import { TreatmentSeriesPackages } from '@/components/blocks/treatment-series-packages'

Exampletsx

import { TreatmentSeriesPackages } from '@/components/blocks/treatment-series-packages'

export default function TreatmentSeriesPackagesDemo() {
  return (
    <TreatmentSeriesPackages
      eyebrow="The series"
      heading="Results love rhythm"
      intro="Skin remembers rhythm, a series simply holds your place in it."
      packages={[
        {
          name: 'The Glow Trio',
          count: 'A series of three',
          totalPrice: '$360',
          perVisit: '$120 a visit',
          description: 'Three signature facials spaced four weeks apart.',
          includes: [
            'Sixty-minute custom facial each visit',
            'LED finish included',
            'Take-home sample kit after the first',
          ],
          href: '#glow-trio',
          ctaLabel: 'Reserve The Glow Trio',
        },
        {
          name: 'The Colour Rhythm',
          count: 'A series of six',
          totalPrice: '$690',
          perVisit: '$115 a visit',
          description: 'Six glosses to keep tone true through the year.',
          includes: [
            'Forty-five minute gloss appointment',
            'Bond builder add-on included twice',
            'Priority booking within forty-eight hours',
          ],
          href: '#colour-rhythm',
          ctaLabel: 'Reserve The Colour Rhythm',
        },
        {
          name: 'The Skin Year',
          count: 'A series of nine',
          totalPrice: '$1,080',
          perVisit: '$120 a visit',
          description: 'Nine visits for a full year of skin that stays settled.',
          includes: [
            'Alternating glow and deep-clean protocols',
            'Two lymphatic drainage sessions',
            'Shareable with one guest you love',
          ],
          href: '#skin-year',
          ctaLabel: 'Reserve The Skin Year',
        },
      ]}
      note="Every series is shareable with someone you love and stays valid for a full year."
    />
  )
}

API reference

TreatmentSeriesPackages accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'The series'`	–
`heading`	`string`	`'Results love rhythm'`	–
`intro`	`string`	–	one sensory sentence
`packages`*	`TreatmentSeriesPackage[]`	–	–
`note`	`string`	`'Every series is shareable with someone you love and stays valid for a full year.'`	italic serif reassurance beneath the packages

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

Referenced types

Typestsx

export interface TreatmentSeriesPackage {
  name: string
  /** e.g. 'A series of six' */
  count: string
  /** preformatted, e.g. '$690' */
  totalPrice: string
  /** preformatted, e.g. '$115 a visit' */
  perVisit: string
  description?: string
  includes?: string[]
  ctaLabel?: string
  href?: 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.

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.

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.

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 Treatment Series component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/treatment-series-packages`. 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 Treatment Series require?

Treatment Series 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 Treatment Series 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