@hotelcard/ui

Shared UI component library for HotelCard applications. Built with React, CSS Modules, and design tokens from Figma.

Installation

npm install @hotelcard/ui
# or
pnpm add @hotelcard/ui

Setup

Wrap your app with the provider and import the styles:

import { HotelCardUIProvider } from '@hotelcard/ui';
import '@hotelcard/ui/styles.css';
import '@hotelcard/ui/tokens.css';

function App() {
  return (
    <HotelCardUIProvider locale="en" t={(key) => key}>
      {/* your app */}
    </HotelCardUIProvider>
  );
}

Components

| Component | Description | |-----------|-------------| | Button | Primary, secondary, and text buttons | | Badge | Status and label badges | | Block | Content block container | | Card | Hotel card with image, rating, badges | | Checkbox | Checkbox input | | Chip | Filter chips | | Divider | Horizontal divider | | Dropdown | Dropdown select | | Input | Text input with variants (default, dropdown, phone) | | Pin | Map pin marker | | RadioButton | Radio button input | | Rating | Star rating display | | HotelCardSkeleton | Loading skeleton for hotel cards |

Hooks

| Hook | Description | |------|-------------| | useResponsive() | Returns { isMobile, isTablet, isDesktop } based on breakpoints | | useDebounce(value, delay) | Debounces a value |

Design Tokens

Import @hotelcard/ui/tokens.css for CSS custom properties:

• --color-* — Colors
• --size-rem-* — Spacing
• --text-* — Typography
• --radius-* — Border radius
• --general-* — General tokens

Peer Dependencies

• react ^18.0.0
• react-dom ^18.0.0
• react-i18next ^14.0.0 || ^15.0.0 || ^16.0.0

License

MIT - HotelCard AG