sapatmohit · Oct 21, 2026 · Oct 21, 2026 · Oct 21, 2026 · Oct 21, 2026 · Oct 21, 2026
@@ -1,6 +1,5 @@
 {
   "title": "Inputs",
   "icon": "TextCursorInput",
-  "pages": ["phone-input"],
-  "collapsible": false
+  "pages": ["phone-input"]
 }
@@ -1,6 +1,5 @@
 {
   "title": "Language Switchers",
   "icon": "Globe",
-  "pages": ["language-switcher", "language-switcher-pill"],
-  "collapsible": false
+  "pages": ["language-switcher", "language-switcher-pill"]
 }
@@ -1,5 +1,4 @@
 {
   "title": "Components",
-  "pages": ["language-switchers", "navigation", "inputs", "translation"],
-  "collapsible": false
+  "pages": ["index", "language-switchers", "navigation", "inputs", "translation"]
 }
@@ -1,6 +1,5 @@
 {
   "title": "Navigation",
-  "icon": "Menu",
-  "pages": ["navbar"],
-  "collapsible": false
+  "icon": "PanelTop",
+  "pages": ["navbar"]
 }
@@ -1,6 +1,5 @@
 {
-  "title": "Translation",
+  "title": "Widgets",
   "icon": "Languages",
-  "pages": ["translation-widget"],
-  "collapsible": false
+  "pages": ["translation-widget"]
 }
@@ -1,5 +1,4 @@
 {
-  "title": "Getting Started",
-  "pages": ["index", "install", "shadcn-cli", "contributing", "rulebook"],
-  "collapsible": false
+  "title": "Get Started",
+  "pages": ["index", "install", "shadcn-cli", "contributing", "rulebook"]
 }
@@ -1,4 +1,19 @@
 {
-  "pages": ["getting-started", "components", "customization"],
-  "collapsible": false
+  "pages": [
+    "---Get Started---",
+    "getting-started/index",
+    "getting-started/install",
+    "getting-started/shadcn-cli",
+    "---Components---",
+    "[LayoutGrid][Overview](/docs/components)",
+    "components/language-switchers",
+    "components/navigation",
+    "components/inputs",
+    "components/translation",
+    "---Customization---",
+    "customization/interfaces",
+    "---Contributing---",
+    "getting-started/contributing",
+    "getting-started/rulebook"
+  ]
 }
@@ -1,6 +1,6 @@
 {
   "name": "@babelize/elements",
-  "version": "1.1.2",
+  "version": "2.0.1",
   "description": "Open-source Localization UI components for React and Tailwind CSS.",
   "license": "MIT",
   "type": "module",

@@ -2,68 +2,73 @@ import type { ReactNode } from "react";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import { source } from "@/lib/source";
 import { baseOptions } from "../layout.config";
-import { FileText, ExternalLink } from "lucide-react";
+import { version as localVersion } from "../../../package.json";
+
+const DISCORD_PATH =
+  "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z";
+const GITHUB_PATH =
+  "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
+
+function IconLink({ href, label, path }: { href: string; label: string; path: string }) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={label}
+      title={label}
+      className="flex size-8 items-center justify-center rounded-md text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-foreground"
+    >
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="size-4">
+        <path d={path} />
+      </svg>
+    </a>
+  );
+}
+
+// Releases set the version from the git tag at publish time and never commit it back, so
+// package.json can lag; the latest npm release is the real current version.
+async function getLatestVersion() {
+  try {
+    const res = await fetch("https://registry.npmjs.org/@babelize/elements/latest", {
+      next: { revalidate: 3600 },
+    });
+    if (!res.ok) return localVersion;
+    const data: { version?: string } = await res.json();
+    return data.version ?? localVersion;
+  } catch {
+    return localVersion;
+  }
+}
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  const version = await getLatestVersion();
 
-export default function Layout({ children }: { children: ReactNode }) {
   return (
     <DocsLayout
       tree={source.pageTree}
       {...baseOptions}
       sidebar={{
-        banner: (
-          <a
-            key="llms-txt"
-            href="/llms-full.txt"
-            className="flex items-center gap-2 rounded-lg p-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground"
-          >
-            <FileText className="size-4" />
-            llms-full.txt
-          </a>
-        ),
         footer: (
-          <div key="sidebar-footer" className="flex flex-col gap-1 pt-4 mt-4">
-            <a
-              href="https://discord.gg/Qqzr2g4KGx"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group flex items-center justify-between rounded-lg p-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground"
-            >
-              <div className="flex items-center gap-2.5">
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  className="size-4"
-                >
-                  <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
-                </svg>
-                <span>Community</span>
-              </div>
-              <ExternalLink className="size-3.5 opacity-50 group-hover:opacity-100" />
-            </a>
-            <a
+          <div
+            key="sidebar-footer"
+            className="flex items-center gap-1 border-t border-fd-border pt-3"
+          >
+            <IconLink href="https://discord.gg/Qqzr2g4KGx" label="Community" path={DISCORD_PATH} />
+            <IconLink
               href="https://github.com/babelize/babelize-elements"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group flex items-center justify-between rounded-lg p-2 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground"
+              label="GitHub"
+              path={GITHUB_PATH}
+            />
+            <a
+              href="/llms-full.txt"
+              className="ml-1 rounded-md border border-fd-border px-2 py-1 font-mono text-[0.6875rem] text-fd-muted-foreground transition-colors hover:border-fd-primary/40 hover:text-fd-primary"
             >
-              <div className="flex items-center gap-2.5">
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  className="size-4"
-                >
-                  <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-                </svg>
-                <span>GitHub</span>
-              </div>
-              <ExternalLink className="size-3.5 opacity-50 group-hover:opacity-100" />
+              llms-full.txt
             </a>
+            <span className="ml-auto font-mono text-[0.6875rem] text-fd-muted-foreground/60">
+              v{version}
+            </span>
           </div>
         ),
       }}

@@ -215,24 +215,33 @@ body {
   box-shadow: 0 0 30px rgba(0, 189, 125, 0.1);
 }
 
-/* ── Fumadocs brand refinements ── */
-aside a[data-active="true"],
-aside a[aria-current="page"],
-aside button[data-active="true"] {
-  color: var(--color-fd-primary) !important;
-  font-weight: 500 !important;
-  background: transparent !important;
-}
+/* ── Docs shell: sidebar sits on the page, content lives in an inset card ── */
+@media (min-width: 768px) {
+  #nd-sidebar[data-collapsed="false"] {
+    background: transparent;
+    border-inline-end: 0;
+  }
 
-aside a[data-active="true"] svg,
-aside a[aria-current="page"] svg,
-aside button[data-active="true"] svg {
-  color: var(--color-fd-primary) !important;
+  #nd-docs-layout::before {
+    content: "";
+    grid-column: 3 / -1;
+    grid-row: 1 / -1;
+    margin: 0.5rem 0.5rem 0.5rem 0;
+    border: 1px solid var(--color-fd-border);
+    border-radius: 0.875rem;
+    background: var(--color-fd-card);
+  }
+
+  #nd-docs-layout[data-sidebar-collapsed="true"]::before {
+    margin-inline-start: 0.5rem;
+  }
 }
 
-/* Remove default padding shifting if any, or just ensure it looks good */
-.fd-nav-item[data-active="true"] {
-  background: transparent !important;
+/* Active sidebar row: faint neutral pill, brand-colored label and icon */
+#nd-sidebar a[data-active="true"] {
+  color: var(--color-fd-primary);
+  font-weight: 500;
+  background: color-mix(in oklab, var(--color-fd-foreground) 8%, transparent);
 }
 
 /* ── TOC (On this page) brand refinements ── */