From 979d002234a140cdc98e518ef4a7b272d76098e2 Mon Sep 17 00:00:00 2001
From: Lucas-FManager <luong.nguyen188@gmail.com>
Date: Mon, 25 May 2026 01:09:47 +0700
Subject: [PATCH 1/2] docs: fix accordion route spelling

---
 docs/app/components/blocks/accordian/page.tsx | 221 +-----------------
 .../{accordian => accordion}/page.module.css  |   0
 docs/app/components/blocks/accordion/page.tsx | 220 +++++++++++++++++
 docs/app/components/config/navigation.ts      |   6 +-
 .../shared/design-system/config/navigation.ts |   2 +-
 5 files changed, 227 insertions(+), 222 deletions(-)
 rename docs/app/components/blocks/{accordian => accordion}/page.module.css (100%)
 create mode 100644 docs/app/components/blocks/accordion/page.tsx

diff --git a/docs/app/components/blocks/accordian/page.tsx b/docs/app/components/blocks/accordian/page.tsx
index d08eb0735..b5fa81276 100644
--- a/docs/app/components/blocks/accordian/page.tsx
+++ b/docs/app/components/blocks/accordian/page.tsx
@@ -1,220 +1,5 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { BlockVariantPreview, PreviewPage, PreviewSection } from "@components/components/preview";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@openuidev/react-ui";
-import { useState } from "react";
-import styles from "./page.module.css";
-
-type VariantMode = "clear" | "card" | "sunk";
-type TypeMode = "single" | "multiple";
-
-const VARIANT_OPTIONS: { value: VariantMode; label: string }[] = [
-  { value: "clear", label: "Clear" },
-  { value: "card", label: "Card" },
-  { value: "sunk", label: "Sunk" },
-];
-
-const TYPE_OPTIONS: { value: TypeMode; label: string }[] = [
-  { value: "single", label: "Single" },
-  { value: "multiple", label: "Multiple" },
-];
-
-const ACCORDION_ITEMS = [
-  {
-    value: "item-1",
-    trigger: "What is OpenUI UI?",
-    content:
-      "OpenUI UI is a design system and component library for building consistent, polished interfaces.",
-  },
-  {
-    value: "item-2",
-    trigger: "How do I install it?",
-    content: "Install via pnpm: pnpm add @openuidev/react-ui",
-  },
-  {
-    value: "item-3",
-    trigger: "Can I customise the theme?",
-    content:
-      "Yes — OpenUI UI supports full theming through CSS custom properties and SCSS design tokens.",
-  },
-];
-
-function ClearPreview() {
-  return (
-    <div className={styles.previewWrapper}>
-      <Accordion type="single" collapsible variant="clear" defaultValue="item-1">
-        {ACCORDION_ITEMS.map((item) => (
-          <AccordionItem key={item.value} value={item.value}>
-            <AccordionTrigger text={item.trigger} />
-            <AccordionContent>{item.content}</AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </div>
-  );
-}
-
-function CardPreview() {
-  return (
-    <div className={styles.previewWrapper}>
-      <Accordion type="single" collapsible variant="card" defaultValue="item-1">
-        {ACCORDION_ITEMS.map((item) => (
-          <AccordionItem key={item.value} value={item.value}>
-            <AccordionTrigger text={item.trigger} />
-            <AccordionContent>{item.content}</AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </div>
-  );
-}
-
-function SunkPreview() {
-  return (
-    <div className={styles.previewWrapper}>
-      <Accordion type="single" collapsible variant="sunk" defaultValue="item-1">
-        {ACCORDION_ITEMS.map((item) => (
-          <AccordionItem key={item.value} value={item.value}>
-            <AccordionTrigger text={item.trigger} />
-            <AccordionContent>{item.content}</AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </div>
-  );
-}
-
-function ConfigurableAccordionPreview({ variant, type }: { variant: VariantMode; type: TypeMode }) {
-  if (type === "multiple") {
-    return (
-      <div className={styles.previewWrapper}>
-        <Accordion type="multiple" variant={variant} defaultValue={["item-1"]}>
-          {ACCORDION_ITEMS.map((item) => (
-            <AccordionItem key={item.value} value={item.value}>
-              <AccordionTrigger text={item.trigger} />
-              <AccordionContent>{item.content}</AccordionContent>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.previewWrapper}>
-      <Accordion type="single" collapsible variant={variant} defaultValue="item-1">
-        {ACCORDION_ITEMS.map((item) => (
-          <AccordionItem key={item.value} value={item.value}>
-            <AccordionTrigger text={item.trigger} />
-            <AccordionContent>{item.content}</AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </div>
-  );
-}
-
-function AccordionControls({
-  variant,
-  type,
-  onVariantChange,
-  onTypeChange,
-}: {
-  variant: VariantMode;
-  type: TypeMode;
-  onVariantChange: (next: VariantMode) => void;
-  onTypeChange: (next: TypeMode) => void;
-}) {
-  return (
-    <div className={styles.controlsPanel}>
-      <div className={styles.controlSection}>
-        <p className={styles.sectionTitle}>Variant</p>
-        <Select value={variant} onValueChange={(v) => onVariantChange(v as VariantMode)}>
-          <SelectTrigger size="sm" className={styles.selectWrapper}>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {VARIANT_OPTIONS.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className={styles.controlSection}>
-        <p className={styles.sectionTitle}>Type</p>
-        <Select value={type} onValueChange={(v) => onTypeChange(v as TypeMode)}>
-          <SelectTrigger size="sm" className={styles.selectWrapper}>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {TYPE_OPTIONS.map((opt) => (
-              <SelectItem key={opt.value} value={opt.value}>
-                {opt.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-  );
-}
-
-export default function BlocksAccordianPage() {
-  const [variant, setVariant] = useState<VariantMode>("clear");
-  const [type, setType] = useState<TypeMode>("single");
-
-  return (
-    <PreviewPage>
-      <PreviewSection
-        title="Accordion"
-        headingLevel="h1"
-        description="Vertically stacked, collapsible content sections."
-      >
-        <BlockVariantPreview
-          title="Clear"
-          description="Minimal style without borders or background. Best for inline content sections."
-          preview={<ClearPreview />}
-        />
-
-        <BlockVariantPreview
-          title="Card"
-          description="Each item rendered as a card with subtle elevation. Great for FAQ pages and settings."
-          preview={<CardPreview />}
-        />
-
-        <BlockVariantPreview
-          title="Sunk"
-          description="Recessed background style. Ideal for grouped content within a panel."
-          preview={<SunkPreview />}
-        />
-
-        <BlockVariantPreview
-          title="Configurations"
-          description="Customise variant and expand behaviour."
-          preview={<ConfigurableAccordionPreview variant={variant} type={type} />}
-          rightControls={
-            <AccordionControls
-              variant={variant}
-              type={type}
-              onVariantChange={setVariant}
-              onTypeChange={setType}
-            />
-          }
-        />
-      </PreviewSection>
-    </PreviewPage>
-  );
+export default function BlocksAccordionRedirect() {
+  redirect("/components/blocks/accordion");
 }
diff --git a/docs/app/components/blocks/accordian/page.module.css b/docs/app/components/blocks/accordion/page.module.css
similarity index 100%
rename from docs/app/components/blocks/accordian/page.module.css
rename to docs/app/components/blocks/accordion/page.module.css
diff --git a/docs/app/components/blocks/accordion/page.tsx b/docs/app/components/blocks/accordion/page.tsx
new file mode 100644
index 000000000..262644945
--- /dev/null
+++ b/docs/app/components/blocks/accordion/page.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { BlockVariantPreview, PreviewPage, PreviewSection } from "@components/components/preview";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@openuidev/react-ui";
+import { useState } from "react";
+import styles from "./page.module.css";
+
+type VariantMode = "clear" | "card" | "sunk";
+type TypeMode = "single" | "multiple";
+
+const VARIANT_OPTIONS: { value: VariantMode; label: string }[] = [
+  { value: "clear", label: "Clear" },
+  { value: "card", label: "Card" },
+  { value: "sunk", label: "Sunk" },
+];
+
+const TYPE_OPTIONS: { value: TypeMode; label: string }[] = [
+  { value: "single", label: "Single" },
+  { value: "multiple", label: "Multiple" },
+];
+
+const ACCORDION_ITEMS = [
+  {
+    value: "item-1",
+    trigger: "What is OpenUI UI?",
+    content:
+      "OpenUI UI is a design system and component library for building consistent, polished interfaces.",
+  },
+  {
+    value: "item-2",
+    trigger: "How do I install it?",
+    content: "Install via pnpm: pnpm add @openuidev/react-ui",
+  },
+  {
+    value: "item-3",
+    trigger: "Can I customise the theme?",
+    content:
+      "Yes — OpenUI UI supports full theming through CSS custom properties and SCSS design tokens.",
+  },
+];
+
+function ClearPreview() {
+  return (
+    <div className={styles.previewWrapper}>
+      <Accordion type="single" collapsible variant="clear" defaultValue="item-1">
+        {ACCORDION_ITEMS.map((item) => (
+          <AccordionItem key={item.value} value={item.value}>
+            <AccordionTrigger text={item.trigger} />
+            <AccordionContent>{item.content}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}
+
+function CardPreview() {
+  return (
+    <div className={styles.previewWrapper}>
+      <Accordion type="single" collapsible variant="card" defaultValue="item-1">
+        {ACCORDION_ITEMS.map((item) => (
+          <AccordionItem key={item.value} value={item.value}>
+            <AccordionTrigger text={item.trigger} />
+            <AccordionContent>{item.content}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}
+
+function SunkPreview() {
+  return (
+    <div className={styles.previewWrapper}>
+      <Accordion type="single" collapsible variant="sunk" defaultValue="item-1">
+        {ACCORDION_ITEMS.map((item) => (
+          <AccordionItem key={item.value} value={item.value}>
+            <AccordionTrigger text={item.trigger} />
+            <AccordionContent>{item.content}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}
+
+function ConfigurableAccordionPreview({ variant, type }: { variant: VariantMode; type: TypeMode }) {
+  if (type === "multiple") {
+    return (
+      <div className={styles.previewWrapper}>
+        <Accordion type="multiple" variant={variant} defaultValue={["item-1"]}>
+          {ACCORDION_ITEMS.map((item) => (
+            <AccordionItem key={item.value} value={item.value}>
+              <AccordionTrigger text={item.trigger} />
+              <AccordionContent>{item.content}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.previewWrapper}>
+      <Accordion type="single" collapsible variant={variant} defaultValue="item-1">
+        {ACCORDION_ITEMS.map((item) => (
+          <AccordionItem key={item.value} value={item.value}>
+            <AccordionTrigger text={item.trigger} />
+            <AccordionContent>{item.content}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}
+
+function AccordionControls({
+  variant,
+  type,
+  onVariantChange,
+  onTypeChange,
+}: {
+  variant: VariantMode;
+  type: TypeMode;
+  onVariantChange: (next: VariantMode) => void;
+  onTypeChange: (next: TypeMode) => void;
+}) {
+  return (
+    <div className={styles.controlsPanel}>
+      <div className={styles.controlSection}>
+        <p className={styles.sectionTitle}>Variant</p>
+        <Select value={variant} onValueChange={(v) => onVariantChange(v as VariantMode)}>
+          <SelectTrigger size="sm" className={styles.selectWrapper}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {VARIANT_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className={styles.controlSection}>
+        <p className={styles.sectionTitle}>Type</p>
+        <Select value={type} onValueChange={(v) => onTypeChange(v as TypeMode)}>
+          <SelectTrigger size="sm" className={styles.selectWrapper}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {TYPE_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}
+
+export default function BlocksAccordionPage() {
+  const [variant, setVariant] = useState<VariantMode>("clear");
+  const [type, setType] = useState<TypeMode>("single");
+
+  return (
+    <PreviewPage>
+      <PreviewSection
+        title="Accordion"
+        headingLevel="h1"
+        description="Vertically stacked, collapsible content sections."
+      >
+        <BlockVariantPreview
+          title="Clear"
+          description="Minimal style without borders or background. Best for inline content sections."
+          preview={<ClearPreview />}
+        />
+
+        <BlockVariantPreview
+          title="Card"
+          description="Each item rendered as a card with subtle elevation. Great for FAQ pages and settings."
+          preview={<CardPreview />}
+        />
+
+        <BlockVariantPreview
+          title="Sunk"
+          description="Recessed background style. Ideal for grouped content within a panel."
+          preview={<SunkPreview />}
+        />
+
+        <BlockVariantPreview
+          title="Configurations"
+          description="Customise variant and expand behaviour."
+          preview={<ConfigurableAccordionPreview variant={variant} type={type} />}
+          rightControls={
+            <AccordionControls
+              variant={variant}
+              type={type}
+              onVariantChange={setVariant}
+              onTypeChange={setType}
+            />
+          }
+        />
+      </PreviewSection>
+    </PreviewPage>
+  );
+}
diff --git a/docs/app/components/config/navigation.ts b/docs/app/components/config/navigation.ts
index 5fd9dcc81..463ae6ea2 100644
--- a/docs/app/components/config/navigation.ts
+++ b/docs/app/components/config/navigation.ts
@@ -39,9 +39,9 @@ export const BLOCKS_NAV_ITEMS: NavGroup[] = [
     label: "Individual blocks",
     items: [
       {
-        id: "accordian",
-        label: "Accordian",
-        href: "/components/blocks/accordian",
+        id: "accordion",
+        label: "Accordion",
+        href: "/components/blocks/accordion",
         badgeText: "Fixing",
       },
       { id: "button-group", label: "Buttons", href: "/components/blocks/button-group" },
diff --git a/docs/shared/design-system/config/navigation.ts b/docs/shared/design-system/config/navigation.ts
index 22572aea1..565566e25 100644
--- a/docs/shared/design-system/config/navigation.ts
+++ b/docs/shared/design-system/config/navigation.ts
@@ -41,7 +41,7 @@ export const BLOCKS_NAV_ITEMS: NavGroup[] = [
     id: "individual-blocks",
     label: "Individual blocks",
     items: [
-      { id: "accordian", label: "Accordian", href: `${BASE}/blocks/accordian` },
+      { id: "accordion", label: "Accordion", href: `${BASE}/blocks/accordion` },
       { id: "button-group", label: "Buttons", href: `${BASE}/blocks/button-group` },
       { id: "callout", label: "Callout", href: `${BASE}/blocks/callout` },
       { id: "image-items", label: "Image items", href: `${BASE}/blocks/image-items` },

From 9c6295d771f4993c629c64ab4bd85d993e16510c Mon Sep 17 00:00:00 2001
From: vishxrad <kashyapvisharadyt@gmail.com>
Date: Wed, 27 May 2026 03:36:39 +0530
Subject: [PATCH 2/2] Move accordion redirect to next.config.mjs as permanent
 (308)

Replaces the 307 stub page with a config-level permanent redirect,
and adds the design-system path that was missed in #571 but caught
in #561.

Co-authored-by: zqleslie <17967998@qq.com>
---
 docs/app/components/blocks/accordian/page.tsx |  5 -----
 docs/next.config.mjs                          | 10 ++++++++++
 2 files changed, 10 insertions(+), 5 deletions(-)
 delete mode 100644 docs/app/components/blocks/accordian/page.tsx

diff --git a/docs/app/components/blocks/accordian/page.tsx b/docs/app/components/blocks/accordian/page.tsx
deleted file mode 100644
index b5fa81276..000000000
--- a/docs/app/components/blocks/accordian/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default function BlocksAccordionRedirect() {
-  redirect("/components/blocks/accordion");
-}
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index f1618f9b6..fc309d0ec 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -16,6 +16,16 @@ const config = {
   reactStrictMode: true,
   async redirects() {
     return [
+      {
+        source: "/components/blocks/accordian",
+        destination: "/components/blocks/accordion",
+        permanent: true,
+      },
+      {
+        source: "/docs/design-system/blocks/accordian",
+        destination: "/docs/design-system/blocks/accordion",
+        permanent: true,
+      },
       {
         source: "/docs",
         destination: "/docs/openui-lang",