Amenity Constellation

Installation

pnpm dlx shadcn@latest add @cleverui/amenity-constellation

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

Usage

tsx

import { AmenityConstellation } from '@/components/blocks/amenity-constellation'

Exampletsx

import {
  Waves,
  Droplets,
  Flame,
  Utensils,
  Wine,
  Coffee,
  Dumbbell,
  Bike,
  ConciergeBell,
} from 'lucide-react'
import { AmenityConstellation } from '@/components/blocks/amenity-constellation'

export default function AmenityConstellationDemo() {
  return (
    <AmenityConstellation
      eyebrow="At your leisure"
      heading="The amenities"
      intro="Everything within the walls was chosen so you would not think about it, only that you are here."
      groups={[
        {
          title: 'Pool & spa',
          amenities: [
            {
              label: 'Infinity pool',
              icon: <Waves />,
              note: 'Heated year-round, overlooking the sound',
              signature: true,
            },
            {
              label: 'Thermal baths',
              icon: <Droplets />,
              note: 'Three temperatures, private cabanas',
            },
            {
              label: 'Cedar sauna',
              icon: <Flame />,
            },
          ],
        },
        {
          title: 'Dining',
          amenities: [
            {
              label: 'Harbour kitchen',
              icon: <Utensils />,
              note: 'Breakfast until noon, tasting menus after dark',
            },
            {
              label: 'Wine cellar',
              icon: <Wine />,
              note: 'Private tastings by appointment',
            },
            {
              label: 'In-room barista',
              icon: <Coffee />,
            },
          ],
        },
        {
          title: 'Movement',
          amenities: [
            {
              label: 'Studio gym',
              icon: <Dumbbell />,
              note: 'Open from first light',
            },
            {
              label: 'Coastal bikes',
              icon: <Bike />,
              note: 'Complimentary for every guest',
            },
            {
              label: 'Concierge desk',
              icon: <ConciergeBell />,
              note: 'Arrangements, always',
            },
          ],
        },
      ]}
    />
  )
}

The example itself also uses lucide-react , install it too if you copy the example as-is (the component itself does not need it).

API reference

AmenityConstellation accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'At your leisure'`	spaced small-caps serif label, never mono in this register
`heading`	`string`	`'The amenities'`	–
`intro`	`string`	–	one evocative sentence
`groups`*	`AmenityGroup[]`	–	–

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

Referenced types

Typestsx

export interface AmenityGroup {
  title: string
  amenities: AmenityItem[]
}

export interface AmenityItem {
  label: string
  icon?: React.ReactNode
  note?: string
  /** at most one signature across the constellation carries the accent */
  signature?: boolean
}

Related components

Room & Suite Card

A hotel room card in serif calm, framed view placeholder, quiet amenity icons, the from-rate in tabular figures with per-night whispered, and a single reserved booking accent.

Booking Window Bar

A check-in, check-out and guests summary bar with hairline seams and a serif reserve action, display-only fields from preformatted props, onSearch delegated, zero date-picker weight.

Guest Book Spread

Hotel guest reviews set like a guest book, one lead quote in large serif italic with stay details, smaller notes alongside. A React testimonial spread styled with Tailwind.

Destination Tabs

Destination tabs for travel sites, serif place names on a hairline rail, evocative intros and quiet fact pairs per place. Accessible React tabs themed with Tailwind tokens.

Itinerary Day Flow

A day-by-day itinerary set like a travel journal, serif day headings, a hairline timeline of moments with mono times, and evocative one-line descriptions that smell of the place.

Tour Departures List

Upcoming small-group tour departures as a serif ledger, preformatted date ranges, tabular prices and real-text availability. A React booking list themed with Tailwind.

Frequently asked questions

How do I install the Amenity Constellation component?

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

Amenity Constellation 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 Amenity Constellation 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