Installation

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 User Interface to your project:

sh

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:

tsxapp/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:

tsxpages/_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:

tsxmain.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:

tsxsrc/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:

tsxapp/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, then wrap your app in the Theme provider:

jsgatsby-browser.js

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

tsxsrc/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. TypeScript support is built-in. Node.js 16+ required for development.

json

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

tsx

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

Usage

Import components and start building:

tsx

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:

tsx

// 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:

sh

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