KKUONIDesign System

Components

Overview

What's in the component library, how status labels work, and how to pick the right component.

The Kuoni component library is a collection of reusable, accessible building blocks for designing and building Kuoni travel experiences. Every component is built on the same foundation: the Colour, Typography, Spacing and Radius tokens, and the same accessibility standard (WCAG 2.1 AA minimum).

Info

Stable components reflect what exists today on kuoni.co.uk, audited directly from the live site. Beta components are proposed additions — designed to extend the system as Kuoni's digital product portfolio grows, following the same tokens, patterns, and documentation standards as the stable set.

Component status

Every component in this library carries one of two status labels, visible at the top of each component page.

Stable

A component is marked Stable when it satisfies all three of the following:

  1. It exists on the live kuoni.co.uk site and was audited directly from production markup.
  2. Its API is considered settled — no breaking prop changes are expected.
  3. It has been reviewed for accessibility and meets WCAG 2.1 AA.

Stable components are safe to use in production. Updates are additive and non-breaking wherever possible; any breaking change will be called out explicitly in release notes.

Beta

A component is marked Beta when it is a proposed addition to the system — either an extension of an existing pattern, a component the system needs but the live site has not yet implemented, or a component currently in active design or engineering review.

Beta components:

  • Follow the same token, pattern and documentation standards as stable components.
  • May have APIs that change before reaching stable.
  • Should be used with awareness that their props or behaviour may evolve.

Beta components become stable once they are used in at least one production Kuoni surface and have passed accessibility review.

Picking the right component

The sidebar groups every component into seven categories. Each one answers a different question about what you're trying to build:

Action — the controls a user taps to make something happen: Button, Link.

Input & Control — every way a user enters or selects a value: Checkbox, RadioButton, Toggle, Select, DatePicker, RangeSlider, Chip, Textarea, Input, CounterInput, SortDropdown.

Data Display — read-only building blocks that present information or a small piece of content: Badge, Pill, Avatar, Divider, Rating, ProgressBar, Spinner, NotificationBadge, Popover, Callout, ExpertQuote, FeatureList, ComparisonTable, Card.

Feedback & Status — components that interrupt the page to communicate something the user must notice: Alert, Banner, CookieBanner, Modal, Drawer.

Navigation — wayfinding and site structure: Navigation, MegaMenu, Breadcrumb, Footer, QuickFilterBar.

Content Display — editorial and media browsing patterns: ImageGallery, Carousel, ReadMore.

Composite Components — travel-specific patterns assembled from the categories above, not a category of their own primitives: DestinationCard, TripCard, AccommodationCard, RoomTypeCard, ResortCard, ActivityCard, BoardBasisSelector, FlightInfo, WeatherWidget, PriceDisplay, SearchBar.

A Composite Component isn't a new domain of its own — it's a purpose-built layout that assembles the same visual vocabulary as the simpler categories above: a star rating row, a price block, a promotional stamp, an image with a placeholder fallback. TripCard, for example, presents a star rating, a promotion badge and a price block together the same way Rating, Badge and PriceDisplay do individually — packaged into one travel-specific card rather than requiring you to hand-assemble those pieces yourself on every offer page. When you need a new composite pattern, look to the simpler categories first for the visual language to reuse.

Using components

All components are imported from their .jsx file and registered for use directly inside MDX. In product code, import them individually:

import Button from '@kuoni/react/Button';
import TripCard from '@kuoni/react/TripCard';
import PriceDisplay from '@kuoni/react/PriceDisplay';

Props, variants and accessibility requirements are documented on each component's own page. Every page includes:

  • Live preview — the component rendered with default and variant props
  • Anatomy — annotated diagram of every visual zone
  • Props table — every prop with type, default and description
  • Do and Don't — usage guidance with real examples
  • Accessibility — ARIA patterns, keyboard behaviour, screen reader notes