# Hotel Card UI Component

> This code implements a reusable UI component for displaying hotel information, along with a theme toggle.  The `HotelCard` component takes hotel data as props (image URL, hotel name, location, rating, etc.) and renders a visually appealing card.  It leverages styling and layout features to create a clean and responsive design. The component uses image placeholders, handles different screen sizes responsively, and includes interactive elements like hover effects.  A theme toggle button dynamically switches between light and dark themes using the `next-themes` library.  The `HotelCard` component is designed to be easily integrated into any application that displays hotel listings or travel information. The application renders a list of sample hotel cards using data stored in an array.  It uses a functional component approach and JSX for UI rendering.  The `useTheme` hook from `next-themes` manages the theme state. Lucide React provides the icons.  This is useful for showcasing hotels in travel websites, travel apps, or hotel booking platforms.  It could also be integrated with a backend system to fetch hotel data dynamically.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: next-themes, lucide-react
- Live preview: https://21st.dev/@uniquesonu/components/hotel-card-ui-component

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/hotel-card-ui-component?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt