# Installation

@oscarkalid/ui is a set of React components and the design tokens they are
built on. It needs React 19 and Tailwind CSS v4.

## Install the package

```sh
bun add @oscarkalid/ui
```

Or pnpm, npm and yarn: `pnpm add @oscarkalid/ui`, `npm install @oscarkalid/ui`,
`yarn add @oscarkalid/ui`.

## Add the stylesheet

```css
/* app/globals.css */
@import "@oscarkalid/ui/styles.css";

/* Tailwind scans the library for class names on its own. This points it at
   yours as well, relative to this file. */
@source "../app";
```

One import brings in Tailwind and the tokens. You do not need a separate
`@import "tailwindcss"` line or a Tailwind config file.

## Tell your framework about the package

The package ships TypeScript source. Whatever compiles your app has to compile
it too. In Next.js that is one line.

```ts
import type { NextConfig } from "next";

const config: NextConfig = {
  transpilePackages: ["@oscarkalid/ui"],
};

export default config;
```

Vite and other bundlers that read source need nothing here.

## Fonts

Optional. The type tokens point at `--font-geist-sans` and `--font-geist-mono`
and fall back to the system stack when those are not set.

```tsx
import { Geist, Geist_Mono } from "next/font/google";

const sans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" });
const mono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${sans.variable} ${mono.variable}`}>
      <body>{children}</body>
    </html>
  );
}
```

## Themes

Dark is the default. Light is the override.

```tsx
// Dark needs nothing. Light is the attribute.
<html data-theme="light">

// Back to dark: take it off again.
document.documentElement.removeAttribute("data-theme");
```

## Check it worked

```tsx
import { Button } from "@oscarkalid/ui";

export default function Page() {
  return <Button variant="primary">It works</Button>;
}
```

A button with no colour means the stylesheet has not been picked up. An
unstyled render usually means the `@source` line points somewhere your files
are not.

## Copying a file instead

Every component is one file. It needs itself, the token sheet and the class
merging helper.

```sh
packages/ui/src/components/Button.tsx    # the component
packages/ui/src/styles/tokens.css        # colour, type, motion
packages/ui/src/lib/cn.ts                # class merging
```