Rivi UI Kit

A React component library for Rivi web applications. It provides reusable, accessible components built on top of Skyscanner's Backpack Design System to keep UI consistent across projects.

Installation

npm install @riviai/ui-kit

react and react-dom (v18) are required peer dependencies and should already be present in your project.

Usage

Import components from the package:

import { Button, Input, Card, Text, Spinner } from "@riviai/ui-kit";

const MyApp = () => (
  <Card>
    <Text textStyle="xl">Welcome</Text>

    <Input
      id="email"
      name="email"
      type="email"
      placeholder="Enter your email"
      onChange={(e) => console.log(e.target.value)}
    />

    <Button label="Submit" onClick={() => console.log("Clicked!")} />

    <Spinner type="primary" />
  </Card>
);

Icons

All Phosphor icons are re-exported from a dedicated subpath:

import { Heart, MagnifyingGlass } from "@riviai/ui-kit/icons";

Components

| Component | Description | | --- | --- | | Button | Primary, secondary, destructive, and link button variants | | ButtonSystem | Extended button with configurable variants | | Input | Text input with validation states and multiple types | | Select | Dropdown select with options and validation states | | Checkbox | Checkbox input | | Radio | Radio input | | RangeSlider | Slider for selecting a value range | | CounterInput | Numeric stepper input | | Card | Container with padding options and click handlers | | Text | Typography component with multiple text styles | | Spinner | Loading spinner with primary, light, and dark variants | | Accordion / AccordionItem | Collapsible content sections | | Carousel | Horizontally scrollable content carousel | | TabSwitcher | Tabbed navigation | | Autosuggest | Input with suggestion dropdown | | CalendarSelector | Date range picker | | TravellerSelector | Traveller and cabin class selector | | CurrencyGrid | Currency selection grid | | ModalWrapper | Base modal container | | AuthModal | Authentication / registration modal | | SupportPopover | Support contact popover | | HotelResultsCard | Hotel result display card | | HotelResultsCardLoader | Loading skeleton for hotel result cards | | UiMap | Google Maps wrapper component |

TypeScript definitions are included for all components.

Development

Prerequisites

• Node.js 14 or higher
• npm

Setup

git clone <repository-url>
cd ui-kit
npm install

Build

Build the library into the dist directory:

npm run rollup

Test

npm run test

Storybook

Run Storybook locally:

npm run storybook

Build a static Storybook:

npm run build-storybook

Publishing

The package is published publicly to npm as @riviai/ui-kit.

Build the library first, then publish — npm publish does not run the build automatically:

npm run rollup
npm publish

Publishing requires authentication with npm and access to the @riviai organization.

License

ISC