Installation

Install

Both packages are on npm. Install @tidal-ds/react for the component library and @tidal-ds/tokens for the CSS variables and Tailwind preset:

npm install @tidal-ds/react @tidal-ds/tokens
# or: pnpm add @tidal-ds/react @tidal-ds/tokens
# or: yarn add @tidal-ds/react @tidal-ds/tokens

Peer requirements: react and react-dom ≥ 18.

Import token CSS

Add this to your global stylesheet (e.g. globals.css):

@import "@tidal-ds/tokens/css";

Configure Tailwind

// tailwind.config.ts
import tidalPreset from "@tidal-ds/tokens/tailwind";

export default {
  presets: [tidalPreset],
  content: [
    "./app/**/*.{ts,tsx}",
    "./node_modules/@tidal-ds/react/dist/**/*.js",
  ],
  darkMode: "class",
};

Including @tidal-ds/react/dist/**/*.js in content ensures Tailwind extracts the component class names.

Fonts

Tidal ships two typography modes. Internal (default — compact product UI) uses Inter. External (opt-in via .typography-external) uses Söhne + Georgia for a warmer editorial feel. Code is always JetBrains Mono.

  • Inter — Internal sans (default)
  • Söhne — External sans (licensed; self-host)
  • Georgia — External heading serif (system font — no install needed)
  • JetBrains Mono — monospace for code

Self-host each family and add @font-face declarations in your global stylesheet:

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Variable.ttf")
    format("truetype");
}
/* Add @font-face for Söhne only if you use .typography-external. */

Dark mode

Add class="dark" to the <html> element. For Next.js, use next-themes:

npm install next-themes
// layout.tsx
import { ThemeProvider } from "next-themes";

<ThemeProvider attribute="class" defaultTheme="system">
  {children}
</ThemeProvider>

Use components

import { Button, Input, Card, Tabs, TabsList, TabsTrigger, TabsContent } from "@tidal-ds/react";

export function Example() {
  return (
    <Card>
      <Button>Get started</Button>
    </Card>
  );
}

Local development (monorepo)

If you're contributing to the design system itself:

git clone https://github.com/Liquid4All/tidal-design-system
cd tidal-design-system
pnpm install
pnpm dev

This runs token watch, component watch, and docs dev server in parallel. The docs site is at http://localhost:3000.