feat: add base fumadocs components

Signed-off-by: ItsNeil17 <neil@willofsteel.me>

Author: ItsNeil17

bun.lock

@@ -0,0 +1,11 @@
+{
+  "aliases": {
+    "uiDir": "./components/ui",
+    "componentsDir": "./components",
+    "blockDir": "./components",
+    "cssDir": "./styles",
+    "libDir": "./lib"
+  },
+  "baseDir": "src",
+  "commands": {}
+}

cli.json

@@ -11,13 +11,20 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-presence": "^1.1.5",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "class-variance-authority": "^0.7.1",
     "fumadocs-core": "16.0.15",
     "fumadocs-mdx": "14.0.3",
     "fumadocs-ui": "16.0.15",
     "lucide-react": "^0.552.0",
     "next": "16.0.1",
+    "next-themes": "^0.4.6",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.16",

package.json

@@ -4,7 +4,7 @@ import {
   DocsDescription,
   DocsPage,
   DocsTitle,
-} from 'fumadocs-ui/page';
+} from '@/components/layout/page';
 import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';

src/app/docs/[[...slug]]/page.tsx

@@ -1,4 +1,4 @@
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { DocsLayout } from '@/components/layout/docs/';
 import { source } from '@/lib/source';
 import { baseOptions } from '@/lib/layout.shared';
 import { DocsBanner } from './docs-banner'; // Adjust path as needed

src/app/docs/layout.tsx

@@ -0,0 +1,68 @@
+'use client';
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { useI18n } from 'fumadocs-ui/contexts/i18n';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './ui/popover';
+import { cn } from '../lib/cn';
+import { buttonVariants } from './ui/button';
+
+export type LanguageSelectProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function LanguageToggle(props: LanguageSelectProps): React.ReactElement {
+  const context = useI18n();
+  if (!context.locales) throw new Error('Missing `<I18nProvider />`');
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        aria-label={context.text.chooseLanguage}
+        {...props}
+        className={cn(
+          buttonVariants({
+            color: 'ghost',
+            className: 'gap-1.5 p-1.5',
+          }),
+          props.className,
+        )}
+      >
+        {props.children}
+      </PopoverTrigger>
+      <PopoverContent className="flex flex-col overflow-x-hidden p-0">
+        <p className="mb-1 p-2 text-xs font-medium text-fd-muted-foreground">
+          {context.text.chooseLanguage}
+        </p>
+        {context.locales.map((item) => (
+          <button
+            key={item.locale}
+            type="button"
+            className={cn(
+              'p-2 text-start text-sm',
+              item.locale === context.locale
+                ? 'bg-fd-primary/10 font-medium text-fd-primary'
+                : 'hover:bg-fd-accent hover:text-fd-accent-foreground',
+            )}
+            onClick={() => {
+              context.onChange?.(item.locale);
+            }}
+          >
+            {item.name}
+          </button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function LanguageToggleText(
+  props: HTMLAttributes<HTMLSpanElement>,
+): React.ReactElement {
+  const context = useI18n();
+  const text = context.locales?.find(
+    (item) => item.locale === context.locale,
+  )?.name;
+
+  return <span {...props}>{text}</span>;
+}

src/components/language-toggle.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { Sidebar as SidebarIcon } from 'lucide-react';
+import { type ComponentProps, useMemo } from 'react';
+import { cn } from '../../../lib/cn';
+import { buttonVariants } from '../../ui/button';
+import { useSidebar } from 'fumadocs-ui/contexts/sidebar';
+import { useNav } from 'fumadocs-ui/contexts/layout';
+import { SidebarCollapseTrigger } from '../../sidebar';
+import { SearchToggle } from '../../search-toggle';
+import type { Option } from '../../root-toggle';
+import { usePathname } from 'fumadocs-core/framework';
+import { isTabActive } from '../../../lib/is-active';
+import Link from 'fumadocs-core/link';
+
+export function Navbar(props: ComponentProps<'header'>) {
+  const { isTransparent } = useNav();
+
+  return (
+    <header
+      id="nd-subnav"
+      {...props}
+      className={cn(
+        'fixed top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm',
+        !isTransparent && 'bg-fd-background/80',
+        props.className,
+      )}
+    >
+      {props.children}
+    </header>
+  );
+}
+
+export function LayoutBody(props: ComponentProps<'main'>) {
+  const { collapsed } = useSidebar();
+
+  return (
+    <main
+      id="nd-docs-layout"
+      {...props}
+      className={cn(
+        'flex flex-1 flex-col pt-(--fd-nav-height) transition-[padding] fd-default-layout',
+        !collapsed && 'mx-(--fd-layout-offset)',
+        props.className,
+      )}
+      style={{
+        ...props.style,
+        paddingInlineStart: collapsed
+          ? 'min(calc(100vw - var(--fd-page-width)), var(--fd-sidebar-width))'
+          : 'var(--fd-sidebar-width)',
+      }}
+    >
+      {props.children}
+    </main>
+  );
+}
+
+export function CollapsibleControl() {
+  const { collapsed } = useSidebar();
+
+  return (
+    <div
+      className={cn(
+        'fixed flex shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:start-4 max-xl:end-4',
+        !collapsed && 'pointer-events-none opacity-0',
+      )}
+      style={{
+        top: 'calc(var(--fd-banner-height) + var(--fd-tocnav-height) + var(--spacing) * 4)',
+      }}
+    >
+      <SidebarCollapseTrigger
+        className={cn(
+          buttonVariants({
+            color: 'ghost',
+            size: 'icon-sm',
+            className: 'rounded-lg',
+          }),
+        )}
+      >
+        <SidebarIcon />
+      </SidebarCollapseTrigger>
+      <SearchToggle className="rounded-lg" hideIfDisabled />
+    </div>
+  );
+}
+
+export function LayoutTabs({
+  options,
+  ...props
+}: ComponentProps<'div'> & {
+  options: Option[];
+}) {
+  const pathname = usePathname();
+  const selected = useMemo(() => {
+    return options.findLast((option) => isTabActive(option, pathname));
+  }, [options, pathname]);
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'flex flex-row items-end gap-6 overflow-auto',
+        props.className,
+      )}
+    >
+      {options.map((option) => (
+        <LayoutTab
+          key={option.url}
+          selected={selected === option}
+          option={option}
+        />
+      ))}
+    </div>
+  );
+}
+
+function LayoutTab({
+  option: { title, url, unlisted, props },
+  selected = false,
+}: {
+  option: Option;
+  selected?: boolean;
+}) {
+  return (
+    <Link
+      href={url}
+      {...props}
+      className={cn(
+        'inline-flex border-b-2 border-transparent transition-colors items-center pb-1.5 font-medium gap-2 text-fd-muted-foreground text-sm text-nowrap hover:text-fd-accent-foreground',
+        unlisted && !selected && 'hidden',
+        selected && 'border-fd-primary text-fd-primary',
+        props?.className,
+      )}
+    >
+      {title}
+    </Link>
+  );
+}