Styling Library Interoperability

1. Tailwind CSS Presets

To consume design system semantic custom properties in client applications, configure the provided Tailwind theme presets. This maps our custom token variables (such as --radius-lg or --bg-canvas) to standard Tailwind utilities:

// tailwind.config.ts
import type { Config } from "tailwindcss";
import shavinPreset from "@shavin/ui/tailwind-preset";

const config: Config = {
  presets: [shavinPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@shavin/ui/**/*.{js,ts,jsx,tsx}"
  ],
};
export default config;

2. Custom Fonts Configuration

Our typography primitives look up the global font variables --font-display (default display serif) and --font-body (default body sans-serif). Configure these custom font faces in your Next.js application layout:

// app/layout.tsx
import { Inter, Outfit } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-body" });
const outfit = Outfit({ subsets: ["latin"], variable: "--font-display" });

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${outfit.variable}`}>
      <body>{children}</body>
    </html>
  );
}

3. CSS Modules Interoperability

When styling modular sections (like custom panels or graphics grids), you can reference our semantic CSS variables in CSS Modules:

CSS Modules file

.customPanel {
  background: rgb(var(--bg-elevated));
  border: 1px solid rgb(var(--hairline));
}

Visual Parity

By consuming custom token variables directly, custom stylesheets automatically respond to runtime accent and dark-mode settings.