Components
Loading preview...
Guest Selector A dynamic and interactive counter for selecting a number of guests, with animated visuals that update with the count.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/guest-selector// 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>
);
}