diff --git a/src/components/SassStylesShowcase.tsx b/src/components/SassStylesShowcase.tsx
index 87208c2..1b1bd0f 100644
--- a/src/components/SassStylesShowcase.tsx
+++ b/src/components/SassStylesShowcase.tsx
@@ -1,319 +1,47 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Code, Palette, Sparkle, CheckCircle } from '@phosphor-icons/react'
+import showcaseData from '@/data/sass-styles-showcase.json'
+
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { AnimationsTab } from '@/components/sass-styles-showcase/AnimationsTab'
+import { ButtonsTab } from '@/components/sass-styles-showcase/ButtonsTab'
+import { CardsTab } from '@/components/sass-styles-showcase/CardsTab'
+import { ChipsTab } from '@/components/sass-styles-showcase/ChipsTab'
+import { InputsTab } from '@/components/sass-styles-showcase/InputsTab'
+import { LayoutTab } from '@/components/sass-styles-showcase/LayoutTab'
+import { type SassStylesShowcaseData } from '@/components/sass-styles-showcase/types'
+
+const data = showcaseData as SassStylesShowcaseData
+
+const tabContent = {
+  buttons: ButtonsTab,
+  inputs: InputsTab,
+  cards: CardsTab,
+  chips: ChipsTab,
+  layout: LayoutTab,
+  animations: AnimationsTab,
+}
 
 export function SassStylesShowcase() {
   return (
     <div className="h-full p-6 space-y-6">
       <div>
-        <h1 className="text-3xl font-bold mb-2">Custom Material UI Sass Styles</h1>
-        <p className="text-muted-foreground">
-          Non-standard Material UI CSS components built with Sass
-        </p>
+        <h1 className="text-3xl font-bold mb-2">{data.page.title}</h1>
+        <p className="text-muted-foreground">{data.page.description}</p>
       </div>
 
-      <Tabs defaultValue="buttons" className="flex-1">
+      <Tabs defaultValue={data.tabOrder[0]} className="flex-1">
         <TabsList className="h-auto flex-wrap">
-          <TabsTrigger value="buttons">Buttons</TabsTrigger>
-          <TabsTrigger value="inputs">Inputs</TabsTrigger>
-          <TabsTrigger value="cards">Cards</TabsTrigger>
-          <TabsTrigger value="chips">Chips</TabsTrigger>
-          <TabsTrigger value="layout">Layout</TabsTrigger>
-          <TabsTrigger value="animations">Animations</TabsTrigger>
+          {data.tabOrder.map((tabKey) => (
+            <TabsTrigger key={tabKey} value={tabKey}>
+              {data.tabs[tabKey].label}
+            </TabsTrigger>
+          ))}
         </TabsList>
 
-        <TabsContent value="buttons" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Custom Button Styles</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-3">
-                <div className="flex gap-3 flex-wrap">
-                  <button className="mui-custom-button mui-custom-button--primary">
-                    Primary Button
-                  </button>
-                  <button className="mui-custom-button mui-custom-button--secondary">
-                    Secondary Button
-                  </button>
-                  <button className="mui-custom-button mui-custom-button--accent">
-                    Accent Button
-                  </button>
-                </div>
-                
-                <div className="flex gap-3 flex-wrap">
-                  <button className="mui-custom-button mui-custom-button--outline">
-                    Outline Button
-                  </button>
-                  <button className="mui-custom-button mui-custom-button--ghost">
-                    Ghost Button
-                  </button>
-                </div>
-              </div>
+        {data.tabOrder.map((tabKey) => {
+          const TabComponent = tabContent[tabKey]
 
-              <div className="mt-4">
-                <pre className="custom-mui-code-block">
-{`<button className="mui-custom-button mui-custom-button--primary">
-  Primary Button
-</button>
-
-<button className="mui-custom-button mui-custom-button--accent">
-  Accent Button
-</button>`}
-                </pre>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="inputs" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Custom Input Styles</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-3">
-                <input 
-                  type="text" 
-                  placeholder="Default input" 
-                  className="mui-custom-input w-full"
-                />
-                <input 
-                  type="text" 
-                  placeholder="Error state" 
-                  className="mui-custom-input mui-custom-input--error w-full"
-                />
-                <input 
-                  type="text" 
-                  placeholder="Success state" 
-                  className="mui-custom-input mui-custom-input--success w-full"
-                />
-              </div>
-
-              <div className="mt-4">
-                <pre className="custom-mui-code-block">
-{`<input 
-  className="mui-custom-input" 
-  placeholder="Your input" 
-/>
-
-<input 
-  className="mui-custom-input mui-custom-input--error" 
-  placeholder="Error state" 
-/>`}
-                </pre>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="cards" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Custom Card Styles</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                <div className="mui-custom-card p-6">
-                  <h3 className="font-bold mb-2">Standard Card</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Basic card with elevation and hover effect
-                  </p>
-                </div>
-                
-                <div className="mui-custom-card mui-custom-card--gradient p-6">
-                  <h3 className="font-bold mb-2">Gradient Card</h3>
-                  <p className="text-sm opacity-90">
-                    Card with gradient background
-                  </p>
-                </div>
-                
-                <div className="mui-custom-card mui-custom-card--glass p-6">
-                  <h3 className="font-bold mb-2">Glass Card</h3>
-                  <p className="text-sm text-muted-foreground">
-                    Glassmorphism effect card
-                  </p>
-                </div>
-              </div>
-
-              <div className="mt-4">
-                <pre className="custom-mui-code-block">
-{`<div className="mui-custom-card">
-  Standard Card
-</div>
-
-<div className="mui-custom-card mui-custom-card--gradient">
-  Gradient Card
-</div>
-
-<div className="mui-custom-card mui-custom-card--glass">
-  Glass Card
-</div>`}
-                </pre>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="chips" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Custom Chip/Badge Styles</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex gap-2 flex-wrap">
-                <span className="mui-custom-chip mui-custom-chip--primary">
-                  Primary
-                </span>
-                <span className="mui-custom-chip mui-custom-chip--secondary">
-                  Secondary
-                </span>
-                <span className="mui-custom-chip mui-custom-chip--accent">
-                  Accent
-                </span>
-                <span className="mui-custom-chip mui-custom-chip--success">
-                  <CheckCircle size={14} weight="fill" />
-                  Success
-                </span>
-                <span className="mui-custom-chip mui-custom-chip--error">
-                  Error
-                </span>
-                <span className="mui-custom-chip mui-custom-chip--warning">
-                  Warning
-                </span>
-              </div>
-
-              <div className="mt-4">
-                <pre className="custom-mui-code-block">
-{`<span className="mui-custom-chip mui-custom-chip--primary">
-  Primary
-</span>
-
-<span className="mui-custom-chip mui-custom-chip--success">
-  <CheckCircle size={14} />
-  Success
-</span>`}
-                </pre>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Custom Tags</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex gap-2 flex-wrap">
-                <span className="custom-mui-tag">Default</span>
-                <span className="custom-mui-tag custom-mui-tag--sm">Small</span>
-                <span className="custom-mui-tag custom-mui-tag--lg">Large</span>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="layout" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Custom Layout Components</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div>
-                <h3 className="font-semibold mb-3">Custom Stack</h3>
-                <div className="custom-mui-stack custom-mui-stack--gap-3">
-                  <div className="p-4 bg-card border rounded">Item 1</div>
-                  <div className="p-4 bg-card border rounded">Item 2</div>
-                  <div className="p-4 bg-card border rounded">Item 3</div>
-                </div>
-              </div>
-
-              <div>
-                <h3 className="font-semibold mb-3">Custom Grid (Responsive)</h3>
-                <div className="custom-mui-grid custom-mui-grid--responsive">
-                  <div className="p-4 bg-card border rounded">Grid 1</div>
-                  <div className="p-4 bg-card border rounded">Grid 2</div>
-                  <div className="p-4 bg-card border rounded">Grid 3</div>
-                  <div className="p-4 bg-card border rounded">Grid 4</div>
-                </div>
-              </div>
-
-              <div>
-                <h3 className="font-semibold mb-3">Custom Surface</h3>
-                <div className="custom-mui-surface custom-mui-surface--interactive">
-                  <p>Interactive surface with hover effects</p>
-                </div>
-              </div>
-
-              <div className="mt-4">
-                <pre className="custom-mui-code-block">
-{`<div className="custom-mui-stack custom-mui-stack--gap-3">
-  <div>Item 1</div>
-  <div>Item 2</div>
-</div>
-
-<div className="custom-mui-grid custom-mui-grid--responsive">
-  <div>Grid Item</div>
-</div>`}
-                </pre>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="animations" className="space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle>Animation Classes</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-                <div className="p-4 bg-card border rounded animate-fade-in">
-                  Fade In
-                </div>
-                <div className="p-4 bg-card border rounded animate-slide-in-up">
-                  Slide Up
-                </div>
-                <div className="p-4 bg-card border rounded animate-scale-in">
-                  Scale In
-                </div>
-                <div className="p-4 bg-card border rounded animate-pulse">
-                  Pulse
-                </div>
-                <div className="p-4 bg-card border rounded animate-bounce">
-                  Bounce
-                </div>
-                <div className="p-4 bg-card border rounded animate-float">
-                  Float
-                </div>
-              </div>
-
-              <div className="mt-4">
-                <pre className="custom-mui-code-block">
-{`<div className="animate-fade-in">Fade In</div>
-<div className="animate-slide-in-up">Slide Up</div>
-<div className="animate-pulse">Pulse</div>
-<div className="animate-bounce">Bounce</div>`}
-                </pre>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Skeleton Loading</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-3">
-                <div className="mui-custom-skeleton mui-custom-skeleton--text" />
-                <div className="mui-custom-skeleton mui-custom-skeleton--text" />
-                <div className="mui-custom-skeleton mui-custom-skeleton--rect" />
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
+          return <TabComponent key={tabKey} data={data.tabs[tabKey]} value={tabKey} />
+        })}
       </Tabs>
     </div>
   )
diff --git a/src/components/sass-styles-showcase/AnimationsTab.tsx b/src/components/sass-styles-showcase/AnimationsTab.tsx
new file mode 100644
index 0000000..d6c743c
--- /dev/null
+++ b/src/components/sass-styles-showcase/AnimationsTab.tsx
@@ -0,0 +1,46 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TabsContent } from '@/components/ui/tabs'
+import { type AnimationsTabData } from './types'
+
+type AnimationsTabProps = {
+  data: AnimationsTabData
+  value: string
+}
+
+export function AnimationsTab({ data, value }: AnimationsTabProps) {
+  return (
+    <TabsContent value={value} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+            {data.items.map((item) => (
+              <div key={item.label} className={item.className}>
+                {item.label}
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-4">
+            <pre className="custom-mui-code-block">{data.codeSample}</pre>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.skeletonTitle}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-3">
+            {data.skeletonClasses.map((className, index) => (
+              <div key={`skeleton-${index}`} className={className} />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  )
+}
diff --git a/src/components/sass-styles-showcase/ButtonsTab.tsx b/src/components/sass-styles-showcase/ButtonsTab.tsx
new file mode 100644
index 0000000..4fc9bb7
--- /dev/null
+++ b/src/components/sass-styles-showcase/ButtonsTab.tsx
@@ -0,0 +1,37 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TabsContent } from '@/components/ui/tabs'
+import { type ButtonsTabData } from './types'
+
+type ButtonsTabProps = {
+  data: ButtonsTabData
+  value: string
+}
+
+export function ButtonsTab({ data, value }: ButtonsTabProps) {
+  return (
+    <TabsContent value={value} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-3">
+            {data.rows.map((row, rowIndex) => (
+              <div key={`button-row-${rowIndex}`} className="flex gap-3 flex-wrap">
+                {row.map((button) => (
+                  <button key={button.label} className={button.className}>
+                    {button.label}
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-4">
+            <pre className="custom-mui-code-block">{data.codeSample}</pre>
+          </div>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  )
+}
diff --git a/src/components/sass-styles-showcase/CardsTab.tsx b/src/components/sass-styles-showcase/CardsTab.tsx
new file mode 100644
index 0000000..3b89981
--- /dev/null
+++ b/src/components/sass-styles-showcase/CardsTab.tsx
@@ -0,0 +1,34 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TabsContent } from '@/components/ui/tabs'
+import { type CardsTabData } from './types'
+
+type CardsTabProps = {
+  data: CardsTabData
+  value: string
+}
+
+export function CardsTab({ data, value }: CardsTabProps) {
+  return (
+    <TabsContent value={value} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {data.items.map((item) => (
+              <div key={item.title} className={item.className}>
+                <h3 className="font-bold mb-2">{item.title}</h3>
+                <p className={item.descriptionClassName}>{item.description}</p>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-4">
+            <pre className="custom-mui-code-block">{data.codeSample}</pre>
+          </div>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  )
+}
diff --git a/src/components/sass-styles-showcase/ChipsTab.tsx b/src/components/sass-styles-showcase/ChipsTab.tsx
new file mode 100644
index 0000000..5e12468
--- /dev/null
+++ b/src/components/sass-styles-showcase/ChipsTab.tsx
@@ -0,0 +1,51 @@
+import { CheckCircle } from '@phosphor-icons/react'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TabsContent } from '@/components/ui/tabs'
+import { type ChipsTabData } from './types'
+
+type ChipsTabProps = {
+  data: ChipsTabData
+  value: string
+}
+
+export function ChipsTab({ data, value }: ChipsTabProps) {
+  return (
+    <TabsContent value={value} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.chipCardTitle}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex gap-2 flex-wrap">
+            {data.chips.map((chip) => (
+              <span key={chip.label} className={chip.className}>
+                {chip.showIcon ? <CheckCircle size={14} weight="fill" /> : null}
+                {chip.label}
+              </span>
+            ))}
+          </div>
+
+          <div className="mt-4">
+            <pre className="custom-mui-code-block">{data.codeSample}</pre>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.tagCardTitle}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex gap-2 flex-wrap">
+            {data.tags.map((tag) => (
+              <span key={tag.label} className={tag.className}>
+                {tag.label}
+              </span>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  )
+}
diff --git a/src/components/sass-styles-showcase/InputsTab.tsx b/src/components/sass-styles-showcase/InputsTab.tsx
new file mode 100644
index 0000000..50dd163
--- /dev/null
+++ b/src/components/sass-styles-showcase/InputsTab.tsx
@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TabsContent } from '@/components/ui/tabs'
+import { type InputsTabData } from './types'
+
+type InputsTabProps = {
+  data: InputsTabData
+  value: string
+}
+
+export function InputsTab({ data, value }: InputsTabProps) {
+  return (
+    <TabsContent value={value} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-3">
+            {data.fields.map((field) => (
+              <input
+                key={field.placeholder}
+                type="text"
+                placeholder={field.placeholder}
+                className={field.className}
+              />
+            ))}
+          </div>
+
+          <div className="mt-4">
+            <pre className="custom-mui-code-block">{data.codeSample}</pre>
+          </div>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  )
+}
diff --git a/src/components/sass-styles-showcase/LayoutTab.tsx b/src/components/sass-styles-showcase/LayoutTab.tsx
new file mode 100644
index 0000000..b2e900e
--- /dev/null
+++ b/src/components/sass-styles-showcase/LayoutTab.tsx
@@ -0,0 +1,44 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { TabsContent } from '@/components/ui/tabs'
+import { type LayoutSection, type LayoutTabData } from './types'
+
+type LayoutTabProps = {
+  data: LayoutTabData
+  value: string
+}
+
+const renderSectionItems = (section: LayoutSection) => {
+  const ItemTag = section.itemTag ?? 'div'
+
+  return section.items.map((item) => (
+    <ItemTag key={item.label} className={item.className}>
+      {item.label}
+    </ItemTag>
+  ))
+}
+
+export function LayoutTab({ data, value }: LayoutTabProps) {
+  return (
+    <TabsContent value={value} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>{data.title}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {data.sections.map((section) => (
+            <div key={section.title}>
+              <h3 className="font-semibold mb-3">{section.title}</h3>
+              <div className={section.containerClassName}>
+                {renderSectionItems(section)}
+              </div>
+            </div>
+          ))}
+
+          <div className="mt-4">
+            <pre className="custom-mui-code-block">{data.codeSample}</pre>
+          </div>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  )
+}
diff --git a/src/components/sass-styles-showcase/types.ts b/src/components/sass-styles-showcase/types.ts
new file mode 100644
index 0000000..99f54a7
--- /dev/null
+++ b/src/components/sass-styles-showcase/types.ts
@@ -0,0 +1,83 @@
+export type ButtonRowItem = {
+  label: string
+  className: string
+}
+
+export type ButtonsTabData = {
+  label: string
+  title: string
+  rows: ButtonRowItem[][]
+  codeSample: string
+}
+
+export type InputsTabData = {
+  label: string
+  title: string
+  fields: Array<{ placeholder: string; className: string }>
+  codeSample: string
+}
+
+export type CardsTabData = {
+  label: string
+  title: string
+  items: Array<{
+    title: string
+    description: string
+    className: string
+    descriptionClassName: string
+  }>
+  codeSample: string
+}
+
+export type ChipsTabData = {
+  label: string
+  chipCardTitle: string
+  chips: Array<{ label: string; className: string; showIcon?: boolean }>
+  codeSample: string
+  tagCardTitle: string
+  tags: Array<{ label: string; className: string }>
+}
+
+export type LayoutSectionItem = {
+  label: string
+  className?: string
+}
+
+export type LayoutSection = {
+  title: string
+  containerClassName: string
+  itemTag?: 'div' | 'p'
+  items: LayoutSectionItem[]
+}
+
+export type LayoutTabData = {
+  label: string
+  title: string
+  sections: LayoutSection[]
+  codeSample: string
+}
+
+export type AnimationsTabData = {
+  label: string
+  title: string
+  items: Array<{ label: string; className: string }>
+  codeSample: string
+  skeletonTitle: string
+  skeletonClasses: string[]
+}
+
+export type SassStylesShowcaseData = {
+  page: {
+    title: string
+    description: string
+  }
+  tabOrder: Array<'buttons' | 'inputs' | 'cards' | 'chips' | 'layout' | 'animations'>
+  tabs: {
+    buttons: ButtonsTabData
+    inputs: InputsTabData
+    cards: CardsTabData
+    chips: ChipsTabData
+    layout: LayoutTabData
+    animations: AnimationsTabData
+  }
+}
diff --git a/src/data/sass-styles-showcase.json b/src/data/sass-styles-showcase.json
new file mode 100644
index 0000000..36d42e7
--- /dev/null
+++ b/src/data/sass-styles-showcase.json
@@ -0,0 +1,227 @@
+{
+  "page": {
+    "title": "Custom Material UI Sass Styles",
+    "description": "Non-standard Material UI CSS components built with Sass"
+  },
+  "tabOrder": ["buttons", "inputs", "cards", "chips", "layout", "animations"],
+  "tabs": {
+    "buttons": {
+      "label": "Buttons",
+      "title": "Custom Button Styles",
+      "rows": [
+        [
+          {
+            "label": "Primary Button",
+            "className": "mui-custom-button mui-custom-button--primary"
+          },
+          {
+            "label": "Secondary Button",
+            "className": "mui-custom-button mui-custom-button--secondary"
+          },
+          {
+            "label": "Accent Button",
+            "className": "mui-custom-button mui-custom-button--accent"
+          }
+        ],
+        [
+          {
+            "label": "Outline Button",
+            "className": "mui-custom-button mui-custom-button--outline"
+          },
+          {
+            "label": "Ghost Button",
+            "className": "mui-custom-button mui-custom-button--ghost"
+          }
+        ]
+      ],
+      "codeSample": "<button className=\"mui-custom-button mui-custom-button--primary\">\n  Primary Button\n</button>\n\n<button className=\"mui-custom-button mui-custom-button--accent\">\n  Accent Button\n</button>"
+    },
+    "inputs": {
+      "label": "Inputs",
+      "title": "Custom Input Styles",
+      "fields": [
+        {
+          "placeholder": "Default input",
+          "className": "mui-custom-input w-full"
+        },
+        {
+          "placeholder": "Error state",
+          "className": "mui-custom-input mui-custom-input--error w-full"
+        },
+        {
+          "placeholder": "Success state",
+          "className": "mui-custom-input mui-custom-input--success w-full"
+        }
+      ],
+      "codeSample": "<input\n  className=\"mui-custom-input\"\n  placeholder=\"Your input\"\n/>\n\n<input\n  className=\"mui-custom-input mui-custom-input--error\"\n  placeholder=\"Error state\"\n/>"
+    },
+    "cards": {
+      "label": "Cards",
+      "title": "Custom Card Styles",
+      "items": [
+        {
+          "title": "Standard Card",
+          "description": "Basic card with elevation and hover effect",
+          "className": "mui-custom-card p-6",
+          "descriptionClassName": "text-sm text-muted-foreground"
+        },
+        {
+          "title": "Gradient Card",
+          "description": "Card with gradient background",
+          "className": "mui-custom-card mui-custom-card--gradient p-6",
+          "descriptionClassName": "text-sm opacity-90"
+        },
+        {
+          "title": "Glass Card",
+          "description": "Glassmorphism effect card",
+          "className": "mui-custom-card mui-custom-card--glass p-6",
+          "descriptionClassName": "text-sm text-muted-foreground"
+        }
+      ],
+      "codeSample": "<div className=\"mui-custom-card\">\n  Standard Card\n</div>\n\n<div className=\"mui-custom-card mui-custom-card--gradient\">\n  Gradient Card\n</div>\n\n<div className=\"mui-custom-card mui-custom-card--glass\">\n  Glass Card\n</div>"
+    },
+    "chips": {
+      "label": "Chips",
+      "chipCardTitle": "Custom Chip/Badge Styles",
+      "chips": [
+        {
+          "label": "Primary",
+          "className": "mui-custom-chip mui-custom-chip--primary"
+        },
+        {
+          "label": "Secondary",
+          "className": "mui-custom-chip mui-custom-chip--secondary"
+        },
+        {
+          "label": "Accent",
+          "className": "mui-custom-chip mui-custom-chip--accent"
+        },
+        {
+          "label": "Success",
+          "className": "mui-custom-chip mui-custom-chip--success",
+          "showIcon": true
+        },
+        {
+          "label": "Error",
+          "className": "mui-custom-chip mui-custom-chip--error"
+        },
+        {
+          "label": "Warning",
+          "className": "mui-custom-chip mui-custom-chip--warning"
+        }
+      ],
+      "codeSample": "<span className=\"mui-custom-chip mui-custom-chip--primary\">\n  Primary\n</span>\n\n<span className=\"mui-custom-chip mui-custom-chip--success\">\n  <CheckCircle size={14} />\n  Success\n</span>",
+      "tagCardTitle": "Custom Tags",
+      "tags": [
+        {
+          "label": "Default",
+          "className": "custom-mui-tag"
+        },
+        {
+          "label": "Small",
+          "className": "custom-mui-tag custom-mui-tag--sm"
+        },
+        {
+          "label": "Large",
+          "className": "custom-mui-tag custom-mui-tag--lg"
+        }
+      ]
+    },
+    "layout": {
+      "label": "Layout",
+      "title": "Custom Layout Components",
+      "sections": [
+        {
+          "title": "Custom Stack",
+          "containerClassName": "custom-mui-stack custom-mui-stack--gap-3",
+          "itemTag": "div",
+          "items": [
+            {
+              "label": "Item 1",
+              "className": "p-4 bg-card border rounded"
+            },
+            {
+              "label": "Item 2",
+              "className": "p-4 bg-card border rounded"
+            },
+            {
+              "label": "Item 3",
+              "className": "p-4 bg-card border rounded"
+            }
+          ]
+        },
+        {
+          "title": "Custom Grid (Responsive)",
+          "containerClassName": "custom-mui-grid custom-mui-grid--responsive",
+          "itemTag": "div",
+          "items": [
+            {
+              "label": "Grid 1",
+              "className": "p-4 bg-card border rounded"
+            },
+            {
+              "label": "Grid 2",
+              "className": "p-4 bg-card border rounded"
+            },
+            {
+              "label": "Grid 3",
+              "className": "p-4 bg-card border rounded"
+            },
+            {
+              "label": "Grid 4",
+              "className": "p-4 bg-card border rounded"
+            }
+          ]
+        },
+        {
+          "title": "Custom Surface",
+          "containerClassName": "custom-mui-surface custom-mui-surface--interactive",
+          "itemTag": "p",
+          "items": [
+            {
+              "label": "Interactive surface with hover effects"
+            }
+          ]
+        }
+      ],
+      "codeSample": "<div className=\"custom-mui-stack custom-mui-stack--gap-3\">\n  <div>Item 1</div>\n  <div>Item 2</div>\n</div>\n\n<div className=\"custom-mui-grid custom-mui-grid--responsive\">\n  <div>Grid Item</div>\n</div>"
+    },
+    "animations": {
+      "label": "Animations",
+      "title": "Animation Classes",
+      "items": [
+        {
+          "label": "Fade In",
+          "className": "p-4 bg-card border rounded animate-fade-in"
+        },
+        {
+          "label": "Slide Up",
+          "className": "p-4 bg-card border rounded animate-slide-in-up"
+        },
+        {
+          "label": "Scale In",
+          "className": "p-4 bg-card border rounded animate-scale-in"
+        },
+        {
+          "label": "Pulse",
+          "className": "p-4 bg-card border rounded animate-pulse"
+        },
+        {
+          "label": "Bounce",
+          "className": "p-4 bg-card border rounded animate-bounce"
+        },
+        {
+          "label": "Float",
+          "className": "p-4 bg-card border rounded animate-float"
+        }
+      ],
+      "codeSample": "<div className=\"animate-fade-in\">Fade In</div>\n<div className=\"animate-slide-in-up\">Slide Up</div>\n<div className=\"animate-pulse\">Pulse</div>\n<div className=\"animate-bounce\">Bounce</div>",
+      "skeletonTitle": "Skeleton Loading",
+      "skeletonClasses": [
+        "mui-custom-skeleton mui-custom-skeleton--text",
+        "mui-custom-skeleton mui-custom-skeleton--text",
+        "mui-custom-skeleton mui-custom-skeleton--rect"
+      ]
+    }
+  }
+}