Get Started

Installation

Get started with Kookie Blocks

Kookie Blocks is built on top of Kookie UI and provides higher-level components like Hero sections, CodeBlocks with syntax highlighting, and documentation layouts.

Kookie Blocks is in beta. Components and APIs are still evolving, and breaking changes may happen. Check changelogs carefully before upgrading.

Install

Add Kookie Blocks to your project using your preferred package manager:

shell

npm install @kushagradhawan/kookie-blocks

shell

pnpm add @kushagradhawan/kookie-blocks

shell

yarn add @kushagradhawan/kookie-blocks

Requirements

Kookie Blocks requires Kookie UI as a peer dependency. Make sure you have both installed:

json

{
  "peerDependencies": {
    "@kushagradhawan/kookie-ui": ">=0.1.0",
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  }
}

CSS

Import both Kookie UI and Kookie Blocks stylesheets in your application entry point. The CSS imports must come before any component imports.

tsx

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

Theme Provider

Kookie Blocks uses Kookie UI's theming system. Wrap your application with the Theme component:

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:

tsx

import '@kushagradhawan/kookie-ui/styles.css';
import '@kushagradhawan/kookie-blocks/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>
  );
}

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 '@kushagradhawan/kookie-blocks/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>
);

Usage

Import components and start building:

tsx

import { Hero, CodeBlock, StreamingMarkdown } from '@kushagradhawan/kookie-blocks';
 
export default function LandingPage() {
  return (
    <Hero.Root gap="4">
      <Hero.Title>Welcome to My App</Hero.Title>
      <CodeBlock
        code="npm install @kushagradhawan/kookie-blocks"
        language="bash"
      />
    </Hero.Root>
  );
}

Available Blocks

Kookie Blocks includes the following components:

Content Blocks

Hero - Hero section for landing pages
CodeBlock - Syntax-highlighted code display
StreamingMarkdown - Markdown renderer with streaming support

Documentation Blocks

DocsShell - Complete documentation layout shell
DocsSidebar - Navigation sidebar for docs
DocsPage - Page layout wrapper
TableOfContents - Auto-generated table of contents

Troubleshooting

CSS Not Loading

Ensure both Kookie UI and Kookie Blocks CSS imports come before any component imports:

tsx

// ✅ Correct
import '@kushagradhawan/kookie-ui/styles.css';
import '@kushagradhawan/kookie-blocks/styles.css';
import { Hero } from '@kushagradhawan/kookie-blocks';
 
// ❌ Incorrect
import { Hero } from '@kushagradhawan/kookie-blocks';
import '@kushagradhawan/kookie-blocks/styles.css';

Missing Kookie UI

Kookie Blocks requires Kookie UI as a peer dependency. Install it if missing:

shell

npm install @kushagradhawan/kookie-ui