Installation

Get Kookie User Interface running in your React application. The library works with any React framework and requires minimal setup—import the CSS, wrap your app with Theme, and start building.

Kookie UI is in beta. Components and APIs are still evolving, and breaking changes may happen. I recommend checking changelogs carefully before upgrading.

Install

Add Kookie User Interface to your project:

npm install @kushagradhawan/kookie-ui
# or
pnpm add @kushagradhawan/kookie-ui
# or
yarn add @kushagradhawan/kookie-ui

Next.js

App Router (Recommended)

For Next.js 13+ with the App Router, import the CSS in your root layout:

// app/layout.tsx
import '@kushagradhawan/kookie-ui/styles.css';
import { Theme } from '@kushagradhawan/kookie-ui';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Theme accentColor="blue" grayColor="gray">
          {children}
        </Theme>
      </body>
    </html>
  );
}

Pages Router

For Next.js with the Pages Router, import the CSS in your _app.tsx:

// pages/_app.tsx
import '@kushagradhawan/kookie-ui/styles.css';
import { Theme } from '@kushagradhawan/kookie-ui';
import type { AppProps } from 'next/app';
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <Theme accentColor="blue" grayColor="gray">
      <Component {...pageProps} />
    </Theme>
  );
}

Vite + React

For Vite projects, import the CSS in your main entry file:

// main.tsx or index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@kushagradhawan/kookie-ui/styles.css';
import { Theme } from '@kushagradhawan/kookie-ui';
import App from './App';
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Theme accentColor="blue" grayColor="gray">
      <App />
    </Theme>
  </React.StrictMode>
);

Create React App

For Create React App projects, import the CSS in your index.tsx or App.tsx:

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@kushagradhawan/kookie-ui/styles.css';
import { Theme } from '@kushagradhawan/kookie-ui';
import App from './App';
 
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
 
root.render(
  <React.StrictMode>
    <Theme accentColor="blue" grayColor="gray">
      <App />
    </Theme>
  </React.StrictMode>
);

Remix

For Remix projects, import the CSS in your root component:

// app/root.tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react';
import { LinksFunction } from '@remix-run/node';
import { Theme } from '@kushagradhawan/kookie-ui';
import styles from '@kushagradhawan/kookie-ui/styles.css';
 
export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: styles },
];
 
export default function App() {
  return (
    <html>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Theme accentColor="blue" grayColor="gray">
          <Outlet />
        </Theme>
        <Scripts />
      </body>
    </html>
  );
}

Gatsby

For Gatsby projects, create a gatsby-browser.js file:

// gatsby-browser.js
import '@kushagradhawan/kookie-ui/styles.css';

Then wrap your app in the Theme provider:

// src/pages/_app.tsx or gatsby-browser.js
import { Theme } from '@kushagradhawan/kookie-ui';
 
export const wrapRootElement = ({ element }) => (
  <Theme accentColor="blue" grayColor="gray">
    {element}
  </Theme>
);

Requirements

Kookie User Interface works with React 16.8+ through React 19:

{
  "peerDependencies": {
    "react": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
    "react-dom": "16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
  }
}

TypeScript support is built-in. Node.js 16+ required for development.

CSS

Import the complete stylesheet:

import '@kushagradhawan/kookie-ui/styles.css';

For modular builds, import specific CSS files:

import '@kushagradhawan/kookie-ui/tokens.css';     // Design tokens
import '@kushagradhawan/kookie-ui/components.css'; // Component styles
import '@kushagradhawan/kookie-ui/utilities.css';  // Utility classes
import '@kushagradhawan/kookie-ui/layout.css';     // Layout utilities

Usage

Import components and start building:

import { Button, Flex, Text, Card, Heading } from '@kushagradhawan/kookie-ui';
 
export default function MyComponent() {
  return (
    <Card size="3" variant="soft">
      <Flex direction="column" gap="3" p="4">
        <Heading size="4">Welcome</Heading>
        <Text size="3" color="gray">
          Start building with Kookie User Interface components.
        </Text>
        <Button size="3" variant="solid">
          Get Started
        </Button>
      </Flex>
    </Card>
  );
}

Troubleshooting

CSS

If styles aren't appearing, ensure the CSS import comes before any component imports:

// Correct
import '@kushagradhawan/kookie-ui/styles.css';
import { Button } from '@kushagradhawan/kookie-ui';
 
// Incorrect  
import { Button } from '@kushagradhawan/kookie-ui';
import '@kushagradhawan/kookie-ui/styles.css';

TypeScript

Ensure you have the React types installed:

npm install --save-dev @types/react @types/react-dom