v0.8.0

Installation

Add the package to your app, import the stylesheet, and wrap your app in a Theme.

Kookie UI is an open-source React component library, forked from Radix Themes and designed for scalable, consistent UIs with a fresh look. Installation is simple: import the CSS, wrap your app with the Theme provider, 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 UI to your project using your preferred package manager:

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

Requirements

Kookie UI works with React 16.8+ through React 19. TypeScript support is built-in. Node.js 16+ is required for development.

{
  "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"
  }
}

CSS

Import the complete stylesheet in your application entry point. The CSS import must come before any component imports.

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

Fonts

styles.css loads no webfonts — it defaults to system stacks, so installing Kookie costs zero font requests. Choose one of:

// Kookie's own typefaces: Inter, JetBrains Mono, Playfair Display.
// Three requests to Google Fonts.
import '@kushagradhawan/kookie-ui/fonts.css';
/* Or bring your own, from next/font, a self-hosted @font-face, anywhere. */
:root {
  --font-sans: 'Your Sans', system-ui, sans-serif;
  --font-mono: 'Your Mono', monospace;
  --font-serif: 'Your Serif', serif;
}

See Typography for the full font token model, including how to give headings their own typeface.

Theme Provider

Wrap your application with the Theme component to enable theming and design tokens. The Theme provider should be placed at the root of your application.

import { Theme } from '@kushagradhawan/kookie-ui';
 
<Theme accentColor="blue" grayColor="gray">
  {/* Your app */}
</Theme>

Framework Setup

Next.js App Router

For Next.js 13+ with the App Router, import the CSS in your root layout and wrap your app with the Theme provider:

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

Next.js Pages Router

For Next.js with the Pages Router, import the CSS in your _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:

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:

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 using the links export in your root component:

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, import the CSS in gatsby-browser.js, then wrap your app in the Theme provider:

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

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" emphasis="medium">Start building with Kookie UI components.</Text>
        <Button size="3" variant="solid">Get Started</Button>
      </Flex>
    </Card>
  );
}

Blocks

For larger patterns, such as code blocks, documentation layouts and marketing sections, copy a block into your project. Blocks are source files built on Kookie UI, not a package, so there is nothing else to install beyond the few dependencies each one lists.

Troubleshooting

CSS Not Loading

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 Errors

Ensure you have the React types installed:

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

Theme Provider

Make sure the Theme component wraps your entire application at the root level. Check that you're using the correct import path and that the component is rendered before any Kookie UI components.

© 2026 Kushagra Dhawan. Licensed under MIT. GitHub.

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background