Getting Started

Installation

The @blanc/ui package lives in packages/ui and is already wired into both apps/web and apps/docs as a local workspace dependency. These steps are for reference when adding a new app to the monorepo.

1. Add the workspace dependency

In your new app's package.json, reference the local package:

json

{
  "dependencies": {
    "@blanc/ui": "workspace:*"
  }
}

Then run pnpm install from the monorepo root.

2. Import global styles

In your root layout, import the design system styles. This injects the token layer and base Tailwind reset.

tsx

// app/layout.tsx
import '@blanc/ui/styles'

3. Load the fonts

Cal Sans is the display font (local .woff2). Inter is loaded from Google Fonts. Both expose CSS variables that the tokens reference.

tsx

import localFont from 'next/font/local'
import { Inter } from 'next/font/google'

const calSans = localFont({
  src: './fonts/CalSans-SemiBold.woff2',
  variable: '--font-display',
  display: 'swap',
})

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-body',
  display: 'swap',
})

// Apply both variables to <html>:
<html className={`${calSans.variable} ${inter.variable}`}>

Copy CalSans-SemiBold.woff2 into your app's app/fonts/ directory.

4. Configure Tailwind

Extend the Blanc Tailwind config, which wires up all design tokens as utilities.

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import blancPreset from '@blanc/ui/tailwind'

export default {
  presets: [blancPreset],
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    '../../packages/ui/src/**/*.{ts,tsx}',
  ],
} satisfies Config

5. FOUC prevention (dark mode)

Add a synchronous inline script before React hydrates to apply the saved theme without flicker. Also add suppressHydrationWarning to <html>.

tsx

<html suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: `(function(){
      try {
        var t = localStorage.getItem('theme');
        var d = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (t === 'dark' || (t === null && d)) {
          document.documentElement.classList.add('dark');
        }
      } catch(e) {}
    })();` }} />
  </head>

Dev Commands

pnpm dev

Start all apps in watch mode (Turbo)

pnpm dev --filter=web

Start only apps/web (localhost:3000)

pnpm dev --filter=docs

Start only apps/docs (localhost:3001)

pnpm build

Build all apps and packages

pnpm typecheck

TypeScript check across monorepo

pnpm lint

ESLint across monorepo