@yaakdoc/react

Unstyled React components, hooks and the island runtime for building yaakdoc themes.

npm i @yaakdoc/react react react-dom

// src/entry.tsx
import { Content, Footer, Logo, NavTree, type ThemeRuntime } from "@yaakdoc/react";
import { ColorModeToggle } from "@yaakdoc/react/islands";

const theme: ThemeRuntime = {
  Layout: () => (
    <div className="layout">
      <aside>
        <Logo />
        <NavTree />
      </aside>
      <ColorModeToggle />
      <Content />
      <Footer />
    </div>
  ),
};

export default theme;

| Import | Contents | | --- | --- | | @yaakdoc/react | Components, hooks, overrides, types. | | @yaakdoc/react/islands | Islands and headless hooks (client-safe). | | @yaakdoc/react/client | hydrateIslands() (used by yaakdoc's client entry). | | @yaakdoc/react/server | renderPage() (used by yaakdoc's SSR entry). | | @yaakdoc/react/theme | defineTheme() and theme types (Node-safe). |

The theme authoring guide is on the website:

• Writing a theme: the manifest, layout, data hooks, components, overrides, branding tokens and environments
• Islands: built-in islands, headless hooks and search
• Publishing a theme