@telia/tomi

React design-system components for Telia products (Telia / One Call / My Call).

Requirements

• React >= 18 and React DOM >= 18 (React 19 supported)
• Works with any React setup. First-class support for Next.js App Router — interactive components already ship with the "use client" boundary, so you can import them directly into Server Components. No transpilePackages config is needed.

Install

npm install @telia/tomi
# or: pnpm add @telia/tomi

Setup (Next.js App Router)

Two things are required, both in your root layout:

1. Import the stylesheet once (includes all design tokens).
2. Set a platform via the data-platform attribute on a wrapping element (usually <html>). This is required — component colors, typography and radii resolve from platform-scoped tokens.

// app/layout.tsx
import '@telia/tomi/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-platform="telia">
      <body>{children}</body>
    </html>
  );
}

Then use components anywhere — including inside Server Components:

// app/page.tsx  (Server Component — no "use client" needed)
import { Button, Toggle, Badge } from '@telia/tomi';

export default function Page() {
  return (
    <main>
      <Badge text="New" type="success" />
      <Toggle defaultChecked />
      <Button variant="primary">Save</Button>
    </main>
  );
}

Platform

Every product must declare a platform. Set data-platform on the element that wraps your app (e.g. <html>); all descendants inherit its theme.

| Platform | data-platform value | | ---------- | --------------------- | | Telia | telia | | One Call | one-call | | My Call | my-call |

<html data-platform="one-call">

Dark mode (optional)

Add data-theme="dark" alongside data-platform on the same (or a nested) element:

<html data-platform="telia" data-theme="dark">

Icons and platform

Icon (and components that render icons) automatically use the platform from the nearest data-platform in the DOM. To override per icon, pass the platform prop:

import { Icon } from '@telia/tomi';

<Icon name="check" platform="one-call" />;

Icons missing for a platform fall back to Telia by default (fallbackToTelia).

Other frameworks (Vite, CRA, plain React)

Same two steps: import @telia/tomi/styles.css once, and set data-platform on a wrapping element (e.g. your root <div id="root"> or <html>). The "use client" directives are inert outside React Server Components, so nothing else changes.

Notes

• Import styles from @telia/tomi/styles.css exactly once at the app root.
• Without a data-platform ancestor, components render unstyled — always set it.
• The package ships ESM and CJS builds with type definitions.