Guest Selector

Buttons 118

About

Guest Selector A dynamic and interactive counter for selecting a number of guests, with animated visuals that update with the count.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Guest Selector to your project and fits it to your theme.

Code

How Guest Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import * as React from 'react';
import { GuestSelector } from '@/components/ui/guest-selector';

// Placeholder image sources for the demo
const adultImageSources = [
  'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-aZ9FWxl7Fs2iaGqAYWDtGtYRU9G3XA.png&w=320&q=75',
  'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-keoWINYYBgXx7vwibZe2cbllJ4SaQA.png&w=320&q=75',
  'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-NjMATqJD0yKbp1dl1nkO55BUX8qAVA.png&w=320&q=75',
  'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-GfvdH3UBMTAEnsXXijXYRkVaiYtQEW.png&w=320&q=75',
];

export default function GuestSelectorDemo() {
  const [guestCount, setGuestCount] = React.useState(1);

  return (
    <div className="flex w-full items-center justify-center rounded-lg bg-background p-8">
      <div className="w-full max-w-sm rounded-xl border bg-card text-card-foreground shadow-lg">
        <div className="p-6">
          <h2 className="text-2xl font-bold">Guests</h2>
          <p className="text-muted-foreground">
            Add up to {adultImageSources.length} people, including yourself.
          </p>
        </div>
        <GuestSelector
          title="Adults"
          description="Aged 13 or above"
          maxGuests={adultImageSources.length}
          imageSources={adultImageSources}
          initialValue={guestCount}
          onValueChange={setGuestCount}
        />
      </div>
    </div>
  );
}