Utilities

import { cn } from 'fumadocs-ui/utils/cn';

function cn(...inputs: ClassValue[]): string

import { cn } from 'fumadocs-ui/utils/cn';

function Button({ className, variant }) {
  return (
    <button
      className={cn(
        'px-4 py-2 rounded',
        variant === 'primary' && 'bg-blue-500 text-white',
        variant === 'secondary' && 'bg-gray-200 text-black',
        className
      )}
    >
      Click me
    </button>
  );
}

import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';

function useCopyButton(
  onCopy: () => void | Promise<void>
): [checked: boolean, onClick: MouseEventHandler]

import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
import { Check, Copy } from 'lucide-react';

function CopyCodeButton({ code }: { code: string }) {
  const [copied, onClick] = useCopyButton(() => {
    return navigator.clipboard.writeText(code);
  });
  
  return (
    <button onClick={onClick}>
      {copied ? <Check /> : <Copy />}
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}

import { mergeRefs } from 'fumadocs-ui/utils/merge-refs';

function mergeRefs<T>(
  ...refs: (React.Ref<T> | undefined)[]
): React.RefCallback<T>

import { mergeRefs } from 'fumadocs-ui/utils/merge-refs';
import { useRef, forwardRef } from 'react';

const Component = forwardRef<HTMLDivElement>((props, forwardedRef) => {
  const localRef = useRef<HTMLDivElement>(null);
  
  return (
    <div 
      ref={mergeRefs(localRef, forwardedRef)}
      {...props}
    />
  );
});

import { isActive } from 'fumadocs-ui/utils/urls';

function isActive(
  href: string,
  pathname: string,
  nested?: boolean
): boolean

import { isActive } from 'fumadocs-ui/utils/urls';
import { usePathname } from 'next/navigation';

function NavLink({ href, children }) {
  const pathname = usePathname();
  const active = isActive(href, pathname, true);
  
  return (
    <a 
      href={href}
      className={active ? 'font-bold' : ''}
    >
      {children}
    </a>
  );
}

import { normalize } from 'fumadocs-ui/utils/urls';

function normalize(urlOrPath: string): string

import { normalize } from 'fumadocs-ui/utils/urls';

normalize('/docs/');     // '/docs'
normalize('/docs');      // '/docs'
normalize('/');          // '/'

import { useFooterItems } from 'fumadocs-ui/utils/use-footer-items';

function useFooterItems(): PageTree.Item[]

import { useFooterItems } from 'fumadocs-ui/utils/use-footer-items';
import { usePathname } from 'next/navigation';

function PageNavigation() {
  const items = useFooterItems();
  const pathname = usePathname();
  
  const currentIndex = items.findIndex(item => item.url === pathname);
  const previous = items[currentIndex - 1];
  const next = items[currentIndex + 1];
  
  return (
    <nav>
      {previous && (
        <a href={previous.url}>← {previous.name}</a>
      )}
      {next && (
        <a href={next.url}>{next.name} →</a>
      )}
    </nav>
  );
}

import { LinkItem } from 'fumadocs-ui/utils/link-item';

import { LinkItem } from 'fumadocs-ui/utils/link-item';
import { GithubIcon } from 'lucide-react';

const links = [
  {
    type: 'main' as const,
    url: '/docs',
    text: 'Documentation',
    icon: <BookIcon />
  },
  {
    type: 'icon' as const,
    url: 'https://github.com/user/repo',
    text: 'GitHub',
    icon: <GithubIcon />,
    label: 'GitHub Repository',
    external: true
  }
];

function Navigation() {
  return (
    <nav>
      {links.map((item, i) => (
        <LinkItem key={i} item={item} />
      ))}
    </nav>
  );
}

import { useLinkItemActive } from 'fumadocs-ui/utils/link-item';

function useLinkItemActive(link: LinkItemType): boolean

import { useLinkItemActive } from 'fumadocs-ui/utils/link-item';

function CustomNavLink({ item }) {
  const active = useLinkItemActive(item);
  
  return (
    <a 
      href={item.url}
      data-active={active}
      className="data-[active=true]:font-bold"
    >
      {item.text}
    </a>
  );
}

import { resolveLinkItems } from 'fumadocs-ui/layouts/shared';

function resolveLinkItems({
  links,
  githubUrl
}: {
  links?: LinkItemType[];
  githubUrl?: string;
}): LinkItemType[]

import { resolveLinkItems } from 'fumadocs-ui/layouts/shared';

const links = resolveLinkItems({
  links: [
    { type: 'main', url: '/docs', text: 'Docs' }
  ],
  githubUrl: 'https://github.com/user/repo'
});
// Returns: [...original links, GitHub icon link]

import { useLinkItems } from 'fumadocs-ui/layouts/shared';

function useLinkItems({
  links,
  githubUrl
}: {
  links?: LinkItemType[];
  githubUrl?: string;
}): {
  navItems: LinkItemType[];
  menuItems: LinkItemType[];
  all: LinkItemType[];
}

import { useLinkItems } from 'fumadocs-ui/layouts/shared';

function Layout({ links, githubUrl }) {
  const { navItems, menuItems } = useLinkItems({ links, githubUrl });
  
  return (
    <>
      <nav>
        {navItems.map((item, i) => (
          <NavItem key={i} item={item} />
        ))}
      </nav>
      <aside>
        {menuItems.map((item, i) => (
          <MenuItem key={i} item={item} />
        ))}
      </aside>
    </>
  );
}