Get Started

Installation

Kookie UI is an open-source React component library, forked from Radix Themes and designed for scalable, consistent UIs with a fresh look.

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:

shell

npm install @kushagradhawan/kookie-ui

shell

pnpm add @kushagradhawan/kookie-ui

shell

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.

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 in your application entry point. The CSS import must come before any component imports.

tsx

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

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.

tsx

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:

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

Next.js Pages Router

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

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:

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:

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:

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

js

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

tsx

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

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

Troubleshooting

CSS Not Loading

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 Errors

Ensure you have the React types installed:

shell

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.