# ClubMed Trident UI

> The Club Med React UI component library, providing reusable components, hooks, and styles for building consistent product interfaces.

Current version: 2.1.0-beta.14

- Get Started
  - [Trident UI](/docs/index.md): Introduction
  - [Setup](/docs/setup.md): Getting started with Trident UI
  - [Configuration](/docs/configuration.md): Configure icons and class merging for Trident UI.
  - [Setup using package manager](/docs/setup-npm.md): Install Trident UI as a ready-to-use npm package.
  - [Setup with shadcn](/docs/setup-shadcn.md): Start from scratch with shadcn and Trident UI.
  - [Usage](/docs/usage.md): How to use Trident UI components in your application.
  - [Migrate to v2](/docs/migrate-to-v2.md): Upgrade guide from Trident UI v1 to v2, including form onChange breaking changes.
  - [Troubleshooting](/docs/troubleshooting.md): Troubleshooting Trident UI components.
- Components
  - [Components](/docs/components.md): Explore all the components available in the library.
  - [Accordion](/docs/components/accordion.md): A headless, accessible accordion that stacks panels animated with ElasticHeight. Accepts ReactNode headers and content; supports single-open or multi-open modes.
  - [Advanced Toast](/docs/components/advanced-toast.md): A feature-rich toast notification component with expandable details, progress indicator, and customizable accent colors
  - [AlertMessage](/docs/components/alert-message.md): A short inline feedback message with warning, success and neutral statuses, two sizes, an optional border and an optional icon on either side of the label
  - [ArrowButton](/docs/components/arrow-button.md): A round button displaying an arrow
  - [Arrows](/docs/components/arrows.md): A component that displays two arrows side by side, one going forward, one going backward, for use in sliders or carousels
  - [Avatar](/docs/components/avatar.md): A component that displays a user avatar, supporting images or initials with customizable styling
  - [Backdrop](/docs/components/backdrop.md): A fullscreen overlay component with smooth transitions and Portal rendering for modals, dialogs, and overlays.
  - [Basic Toast](/docs/components/basic-toast.md): A simple toast notification component with a link action and theme customization
  - [Breadcrumb](/docs/components/breadcrumb.md): A navigation component that displays the current page's location within a hierarchical structure, helping users understand where they are in the application
  - [Button](/docs/components/button.md): A versatile button component that supports multiple visual styles, sizes, and can render as a button, anchor, or custom element
  - [CardBackground](/docs/components/card-background.md): test
  - [Card](/docs/components/card.md): A flexible container component with customizable themes, borders, and aspect ratios
  - [Carousel](/docs/components/carousel.md): A composable carousel built on embla-carousel with keyboard navigation, wheel gestures, and RTL support
  - [Chapters](/docs/components/chapters.md): A scroll-driven page layout that highlights the active chapter in a sticky sidebar as the user scrolls, with theme support for brand ranges
  - [ChatBody](/docs/components/chat-body.md): The scrollable message log of a chat panel — messages, typing indicator, CSAT prompt, and price quotes.
  - [ChatButton](/docs/components/chat-button.md): An AI-powered chat button with smooth fold/unfold animation, optional offset positioning, and configurable expansion triggers
  - [ChatHeader](/docs/components/chat-header.md): The intro header of a chat panel — a title and a logo or AI-assistant button, on a decorative curved background.
  - [ChatInput](/docs/components/chat-input.md): A controlled text input form for the chatbot, with a send button and optional audio/attachment trigger.
  - [ChatMessageActions](/docs/components/chat-message-actions.md): The replay, edit and copy actions of a user message, revealed when the message is hovered or focused.
  - [ChatMessageEditor](/docs/components/chat-message-editor.md): The in-place editor of a user message — edit the text, then cancel or send it again.
  - [ChatMessage](/docs/components/chat-message.md): A single chat bubble that renders differently based on the sender — left-aligned for the assistant, right-aligned with a background for the user.
  - [ChatTypingIndicator](/docs/components/chat-typing-indicator.md): An animated three-dot indicator shown while the AI assistant is composing a response.
  - [ChatWindowCsatPrompt](/docs/components/chat-window-csat-prompt.md): A five-star satisfaction survey that appears inside a ChatWindow when the bot asks for user feedback. Shows a rating prompt, transitions to a thank-you state on submission.
  - [ChatWindowQuote](/docs/components/chat-window-quote.md): Displays one or more resort price quotes inside the chat message log. A single quote renders as a full inline card; two or more render as compact cards in a horizontal scroll zone.
  - [ChatWindow](/docs/components/chat-window.md): A fully controlled chatbot panel with a header, scrollable message list, typing indicator, and input bar.
  - [CheckboxSelect](/docs/components/checkbox-select.md): A dropdown trigger styled like a text field that opens a panel of checkboxes, enabling multi-value selection.
  - [Checkbox](/docs/components/checkbox.md): A form-friendly checkbox component with built-in validation support
  - [Checkboxes](/docs/components/checkboxes.md): A checkboxes group component for forms
  - [Chip](/docs/components/chip.md): A circular badge component that displays icons, typically used for status indicators, tags, or interactive elements
  - [ChoiceExpander](/docs/components/choice-expander.md): An expandable button component that transforms into a container revealing children content with smooth animation and supports selected state with check icon
  - [Clickable](/docs/components/clickable.md): A wrapper component that makes non-button elements keyboard accessible and clickable with proper ARIA attributes
  - [ContentReview](/docs/components/content-review.md): A review score from a provider — its icon in an outlined chip, the rating and a label
  - [Countdown](/docs/components/countdown.md): A live countdown timer that displays the remaining time to a target date as animated flip-card digits, broken into days, hours, minutes, and seconds.
  - [CriteriaDates](/docs/components/criteria-dates.md): A Datepicker wrapper for booking search flows, with an optional price-status legend, section card chrome, and a child slot for reinsurance messages.
  - [CriteriaParticipants](/docs/components/criteria-participants.md): Adult and child participant selector with three children-flow modes, per-child birthdate or age/month entry, animated transitions, participant chip summary, and an optional limit banner.
  - [CriteriaTransports](/docs/components/criteria-transports.md): A transport selection panel that lets users opt in to Club Med transportation and pick a departure airport from grouped, scrollable lists.
  - [Date Field](/docs/components/date-field.md): A form input for selecting dates with calendar picker, validation, and automatic range correction.
  - [Datepicker](/docs/components/datepicker.md): A range date picker built on react-day-picker v9 with price annotations, day status colors, hover-range preview, and a responsive layout that adapts between mobile scroll and desktop two-up view.
  - [Dropdown](/docs/components/dropdown.md): A composable dropdown with slot-based trigger content, outside-click handling, item-based closing, and open/close animations.
  - [ElasticHeight](/docs/components/elastic-height.md): A container component that smoothly animates height transitions based on its content, perfect for collapsible sections, accordions, and expandable UI elements
  - [ExpandableCard](/docs/components/expandable-card.md): An interactive card component that expands and collapses to reveal additional content, with optional image background, tags, and smooth animations
  - [ExpandableText](/docs/components/expandable-text.md): A text container that truncates to a configurable number of lines and expands with a toggle button
  - [Filter](/docs/components/filter.md): A styled checkbox component for filtering content, with optional dropdown indicator
  - [FloatingLabelTextField](/docs/components/floating-label-text-field.md): A pill-shaped text input where the label floats to the top when focused or filled. Optimized for search and selection flows.
  - [Form Control](/docs/components/form-control.md): A container component that wraps form inputs with labels, descriptions, and error messages, providing consistent layout and validation state management
  - [Form Label](/docs/components/form-label.md): A flexible label component for form fields with support for required indicators, descriptions, and layout options
  - [Frame](/docs/components/frame.md): An image frame primitive with aspect ratio control, composed with FrameLabelsWrapper and FrameTitle for overlaid content
  - [HamburgerIcon](/docs/components/hamburger-icon.md): An animated hamburger menu icon that transitions between menu and close states with smooth CSS animations
  - [Heading](/docs/components/heading.md): A semantic heading component that renders h1-h6 elements with proper accessibility support and flexible rendering options
  - [Image](/docs/components/image.md): An optimized image component with built-in lazy loading and responsive image support using the picture element
  - [JourneyCard](/docs/components/journey-card.md): Displays a round-trip flight itinerary as two expandable leg summaries inside a single bordered card. Each leg shows departure/arrival times, a visual timeline, operator details, cabin characteristics, and an optional per-segment itinerary accordion.
  - [LayerHeader](/docs/components/layer-header.md): The header of a Layer — a centered heading between up to two round buttons
  - [Layer](/docs/components/layer.md): A full-screen dialog that slides over the page, with a header holding a heading and up to two round buttons, and a scrollable body
  - [Link](/docs/components/link.md): A styled link component with optional icon, underline effects, and smart text formatting for enhanced hover interactions.
  - [Loader](/docs/components/loader.md): A fullscreen loading indicator with animated wave effect and custom label, displayed on a backdrop overlay
  - [Number Field](/docs/components/number-field.md): A numeric input field with increment and decrement buttons for precise value selection within a defined range.
  - [PageNavigation](/docs/components/page-navigation.md): A responsive page-level navigation bar where the active item is highlighted with an animated black pill. On desktop, all tabs display their text label. On mobile, only the active tab shows its label; inactive tabs show an icon instead.
  - [Pagination](/docs/components/pagination.md): A navigation component that allows users to navigate through multiple pages of content with numbered page buttons and previous/next controls
  - [Paragraph](/docs/components/paragraph.md): A block of editorial text — title, subtitle and an expandable HTML description — optionally next to an image
  - [Password](/docs/components/password.md): A secure password input field with show/hide toggle, validation states, and customizable validation messages for password strength requirements.
  - [Phone Field](/docs/components/phone-field.md): A form input for collecting phone numbers with automatic formatting, pattern masking, and optional country code selection.
  - [Popin](/docs/components/popin.md): A modal dialog component that displays content in a centered overlay with smooth animations and backdrop support
  - [Portal](/docs/components/portal.md): A component that renders children into a DOM node that exists outside the parent component's DOM hierarchy, useful for modals, tooltips, and overlays.
  - [ProductThumbnail](/docs/components/product-thumbnail.md): A product (resort, cruise, tour…) in a list — an image slider next to its name, tags and review
  - [Promises](/docs/components/promises.md): An auto-advancing carousel showcasing brand promises, with a dot-progress indicator, previous/next navigation, and a mobile overlay menu for item selection
  - [Prose](/docs/components/prose.md): A component that renders rich HTML content with automatic typography styling using the prose class
  - [Radio Group](/docs/components/radio-group.md): A group of radio buttons for single-choice selection with keyboard navigation and accessibility support
  - [RadioSelect](/docs/components/radio-select.md): A dropdown trigger styled like a text field that opens a panel of radio buttons, enabling single-value selection.
  - [Radio](/docs/components/radio.md): A radio button input component for single-choice selection within a group, featuring customizable size and automatic state management.
  - [Range](/docs/components/range.md): A dual-handle range slider for selecting values within a defined range, with single or dual cursor modes
  - [Scrollbar](/docs/components/scrollbar.md): A custom horizontal scrollbar component that syncs with scroll position via CSS scroll-timeline animations and supports pointer-driven interaction.
  - [Select](/docs/components/select.md): A dropdown select component with validation states, icons, and FormControl integration for form inputs
  - [SidebarLayout](/docs/components/sidebar-layout.md): A composable application layout with a responsive, collapsible sidebar and slot-based header areas
  - [SliderFrame](/docs/components/slider-frame.md): A carousel-based frame for displaying multiple images with keyboard-accessible navigation controls
  - [SparkleWrapper](/docs/components/sparkle-wrapper.md): Animates its children with a bounce-enter while Diamond sparkle icons burst outward, fading and scaling to nothing. Use it to celebrate any element on mount.
  - [Spinner](/docs/components/spinner.md): An animated loading spinner component with smooth circular rotation animation and built-in accessibility support
  - [Switch](/docs/components/switch.md): A toggle switch component for binary on/off states with accessible keyboard support and animated transitions
  - [Table](/docs/components/table.md): A data table with rounded rows, header cells, a sticky first column and row, column or cell styling
  - [Tabs](/docs/components/tabs.md): A component to display content in multiple tabs
  - [Tag](/docs/components/tag.md): A versatile badge component that displays labeled tags with customizable colors, icons, and display themes for status indicators and categorization
  - [TextField](/docs/components/text-field.md): A text input field with label, validation states, icon support, and FormControl integration
  - [Toggle](/docs/components/toggle.md): A pill-shaped button group where only one option is active at a time, with animated color transitions
  - [Tooltip](/docs/components/tooltip.md): A composable tooltip component for displaying contextual information on hover or focus with full accessibility support.
  - [ValidationMessage](/docs/components/validation-message.md): A validation feedback component that displays status indicators with icons and colored text for form field validation