Installation

Install

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

npm install @liquidai/react @liquidai/tokens
# or: pnpm add @liquidai/react @liquidai/tokens
# or: yarn add @liquidai/react @liquidai/tokens

Peer requirements: react and react-dom ≥ 18.

Import token CSS

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

@import "@liquidai/tokens/css";

Configure Tailwind

// tailwind.config.ts
import tidalPreset from "@liquidai/tokens/tailwind";

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

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

Fonts

One compact typography scale. Inter for sans (and headings), Iowan Old Style for serif, and JetBrains Mono for mono (code + eyebrow labels).

  • Inter — sans + headings (self-host)
  • Iowan Old Style — serif (macOS system font; license a webfont to self-host for all platforms)
  • JetBrains Mono — mono / code (OFL; self-host)

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");
}

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 "@liquidai/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.