Utilities

The documentation template includes several utility functions and helpers used across components.

`cn()`

A class name utility that merges Tailwind CSS classes with conflict resolution. Combines clsx and tailwind-merge.

lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage:

tsx

import { cn } from "@/lib/utils"

<div className={cn(
  "rounded-lg border",
  isActive && "border-accent bg-accent/5",
  className
)} />

`docsConfig`

The centralised navigation configuration object. Used by the sidebar, mobile nav, and search dialog.

lib/docs-config.ts

import { docsConfig } from "@/lib/docs-config"

// Access all sidebar sections
docsConfig.sidebarNav.forEach((section) => {
  console.log(section.title, section.items)
})

`getAllPages()`

A helper used by the search dialog to flatten the navigation config into a searchable list:

components/docs/search-dialog.tsx

interface SearchResult {
  title: string
  href: string
  section: string
}

function getAllPages(): SearchResult[] {
  const results: SearchResult[] = []
  for (const section of docsConfig.sidebarNav) {
    if (section.items) {
      for (const item of section.items) {
        results.push({
          title: item.title,
          href: item.href,
          section: section.title,
        })
      }
    }
  }
  return results
}