Uai Blocks Documentation Page

Component

About

Navigation, an in-page table of contents with the current section, content, and page actions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Uai Blocks Documentation Page to your project and fits it to your theme.

Code

How Uai Blocks Documentation Page is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";

import { BookOpen, Boxes, Rocket, Settings2 } from "lucide-react";
import { useState } from "react";
import {
  DocumentationPage,
  DocumentationPageAction,
  DocumentationPageActionLink,
  DocumentationPageActions,
  DocumentationPageBreadcrumb,
  DocumentationPageContent,
  DocumentationPageDescription,
  DocumentationPageHeader,
  DocumentationPageMain,
  DocumentationPageNav,
  DocumentationPagePager,
  DocumentationPagePagerLink,
  DocumentationPageSection,
  DocumentationPageSectionTitle,
  DocumentationPageTitle,
  DocumentationPageToc,
  DocumentationPageTocItem,
  DocumentationPageTocList,
  DocumentationPageTocTitle,
  type DocumentationPageVariant,
} from "@/components/ui/uai-documentation-page";
import {
  AppSidebarGroup,
  AppSidebarGroupLabel,
  AppSidebarHeader,
  AppSidebarItem,
  AppSidebarItemIcon,
  AppSidebarItemLabel,
  AppSidebarList,
  AppSidebarMobileTrigger,
  AppSidebarNav,
  AppSidebarTitle,
} from "@/components/ui/uai-documentation-page-utils/src-components-ui-uai-app-sidebar";
import { BreadcrumbTrailItem } from "@/components/ui/uai-documentation-page-utils/src-components-ui-uai-breadcrumb-trail";

export function DocumentationPagePreview({
  variant = "columns",
}: {
  variant?: DocumentationPageVariant;
}) {
  const [copied, setCopied] = useState(false);
  return (
    <DocumentationPage variant={variant} defaultActiveSection="install">
      <DocumentationPageNav defaultValue="caching">
        <AppSidebarHeader>
          <AppSidebarTitle>Kiln docs</AppSidebarTitle>
          <AppSidebarMobileTrigger />
        </AppSidebarHeader>
        <AppSidebarNav aria-label="Documentation">
          <AppSidebarGroup>
            <AppSidebarGroupLabel>Get started</AppSidebarGroupLabel>
            <AppSidebarList>
              <AppSidebarItem value="quickstart">
                <AppSidebarItemIcon>
                  <Rocket size={16} />
                </AppSidebarItemIcon>
                <AppSidebarItemLabel>Quickstart</AppSidebarItemLabel>
              </AppSidebarItem>
              <AppSidebarItem value="concepts">
                <AppSidebarItemIcon>
                  <BookOpen size={16} />
                </AppSidebarItemIcon>
                <AppSidebarItemLabel>Core concepts</AppSidebarItemLabel>
              </AppSidebarItem>
            </AppSidebarList>
          </AppSidebarGroup>
          <AppSidebarGroup>
            <AppSidebarGroupLabel>Guides</AppSidebarGroupLabel>
            <AppSidebarList>
              <AppSidebarItem value="caching">
                <AppSidebarItemIcon>
                  <Boxes size={16} />
                </AppSidebarItemIcon>
                <AppSidebarItemLabel>Build cache</AppSidebarItemLabel>
              </AppSidebarItem>
              <AppSidebarItem value="config">
                <AppSidebarItemIcon>
                  <Settings2 size={16} />
                </AppSidebarItemIcon>
                <AppSidebarItemLabel>Configuration</AppSidebarItemLabel>
              </AppSidebarItem>
            </AppSidebarList>
          </AppSidebarGroup>
        </AppSidebarNav>
      </DocumentationPageNav>
      <DocumentationPageToc>
        <DocumentationPageTocTitle>On this page</DocumentationPageTocTitle>
        <DocumentationPageTocList>
          <DocumentationPageTocItem section="install">Turn on the cache</DocumentationPageTocItem>
          <DocumentationPageTocItem section="ci">Share it in CI</DocumentationPageTocItem>
          <DocumentationPageTocItem section="ci-keys" level={3}>
            Cache keys
          </DocumentationPageTocItem>
          <DocumentationPageTocItem section="clear">Clear the cache</DocumentationPageTocItem>
        </DocumentationPageTocList>
      </DocumentationPageToc>
      <DocumentationPageMain>
        <DocumentationPageHeader>
          <DocumentationPageBreadcrumb>
            <BreadcrumbTrailItem href="#docs">Docs</BreadcrumbTrailItem>
            <BreadcrumbTrailItem href="#guides" parent>
              Guides
            </BreadcrumbTrailItem>
            <BreadcrumbTrailItem current>Build cache</BreadcrumbTrailItem>
          </DocumentationPageBreadcrumb>
          <DocumentationPageTitle>Build cache</DocumentationPageTitle>
          <DocumentationPageDescription>
            Keep parsed templates and resized images between builds, so only changed pages do any
            work.
          </DocumentationPageDescription>
          <DocumentationPageActions>
            <DocumentationPageAction
              onClick={() => {
                void navigator.clipboard?.writeText("https://kiln.example/docs/build-cache");
                setCopied(true);
              }}
            >
              {copied ? "Link copied" : "Copy link"}
            </DocumentationPageAction>
            <DocumentationPageActionLink href="#edit">Edit this page</DocumentationPageActionLink>
          </DocumentationPageActions>
        </DocumentationPageHeader>
        <DocumentationPageContent>
          <DocumentationPageSection id="install">
            <DocumentationPageSectionTitle>Turn on the cache</DocumentationPageSectionTitle>
            <p>
              The cache is on by default from Kiln 4.2. Older projects opt in with one line in{" "}
              <code>kiln.config.ts</code>:
            </p>
            <pre>
              <code>{'export default { cache: { dir: ".kiln/cache" } };'}</code>
            </pre>
          </DocumentationPageSection>
          <DocumentationPageSection id="ci">
            <DocumentationPageSectionTitle>Share it in CI</DocumentationPageSectionTitle>
            <p>
              Restore <code>.kiln/cache</code> before the build step and save it afterwards. A
              restored cache brings a 2,400-page site from 41 seconds to about 9.
            </p>
          </DocumentationPageSection>
          <DocumentationPageSection id="ci-keys">
            <DocumentationPageSectionTitle>Cache keys</DocumentationPageSectionTitle>
            <p>
              Key the cache on your lockfile and Kiln version. Template and image entries are
              already keyed by content, so stale entries are never used.
            </p>
          </DocumentationPageSection>
          <DocumentationPageSection id="clear">
            <DocumentationPageSectionTitle>Clear the cache</DocumentationPageSectionTitle>
            <p>
              Run <code>kiln cache clear</code> after upgrading plugins that change output without
              changing their inputs.
            </p>
          </DocumentationPageSection>
        </DocumentationPageContent>
        <DocumentationPagePager>
          <DocumentationPagePagerLink direction="previous" href="#concepts">
            Core concepts
          </DocumentationPagePagerLink>
          <DocumentationPagePagerLink direction="next" href="#config">
            Configuration
          </DocumentationPagePagerLink>
        </DocumentationPagePager>
      </DocumentationPageMain>
    </DocumentationPage>
  );
}

function SourceSpecimen(){return <DocumentationPagePreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}