Amenity listhospitality
Grouped amenity list that maps keys to icons with a fallback and collapses after a limit.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/amenity-list의존 아이템collapsiblelocalestyle
Default
amenity-list-demo.tsx
import { TelescopeIcon } from "lucide-react";import { AmenityList } from "@/components/ui/amenity-list";
const items = [ { key: "wifi", label: "Wi-Fi", group: "Essentials" }, { key: "air-conditioning", label: "Air conditioning", group: "Essentials" }, { key: "tv", label: "TV", group: "Essentials" }, { key: "pool", label: "Pool", group: "Leisure" }, { key: "gym", label: "Gym", group: "Leisure" }, { key: "stargazing", label: "Stargazing deck", group: "Leisure" }, { key: "unknown-thing", label: "Something else" },];
export default function AmenityListDemo() { return <AmenityList items={items} limit={4} icons={{ stargazing: TelescopeIcon }} />;}