Blocks

Blocks are larger patterns built from Kookie UI components: code blocks, documentation layouts, markdown renderers and marketing sections. They are not a package. You copy the source into your project and own it from then on.

How It Works

Every block page has an Installation section with three parts:

1. The npm packages the block needs. Kookie UI is always one of them.
2. Any other blocks it imports. Copy those first.
3. The full source, read straight from this site. What you copy is exactly what these docs run on.

Put each block in its own folder under components/blocks, named after the block:

components/
  blocks/
    code-block/
      code-block.tsx
      code-block.css
    markdown/
      markdown.tsx

Blocks that use other blocks import them by relative path, such as ../code-block/code-block. Keep the folder names and those imports work as-is.

Once copied, the code is yours. Rename it, restyle it, delete the parts you don't need. There is nothing to upgrade and no version to keep in sync.

Requirements

Blocks assume Kookie UI is set up: the stylesheet imported and a Theme at the root of your app. See Installation.

A few blocks ship a CSS file next to the component. The component imports it, which works out of the box in the Next.js App Router, Vite and most modern bundlers.

Blocks marked 'use client' use state or effects. In the Next.js App Router they render as client components.

Available Blocks