Getting Started

Installation

Add the Kuoni component library to a React or Next.js project.

The Kuoni component library is distributed as an npm package. It targets React 18 and works with both Next.js (App Router) and any modern bundler.

Install

npm install @kuoni/react

Peer dependencies — install them if they aren't already in your project:

npm install react react-dom

Set up the theme

Import the token stylesheet once, at the root of your app. This registers the Kuoni CSS variables (Wow Yellow, Dark, Terracotta and the neutral scale) that the components read from.

// app/layout.jsx
import '@kuoni/react/styles.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Use a component

Every component is a named export:

Using design tokens directly

The raw tokens are also exported as JavaScript constants, so you can reference the brand values in custom styling without hard-coding hex codes.

import { color, space, radius } from '@kuoni/react/tokens';

color.yellow; // #F5C518 — Wow Yellow
space[4]; // 16px
radius.md; // 8px

Prefer the components and tokens over raw hex values. It keeps your UI in sync when the brand evolves.