windly-ui 1.0.3 → 1.0.5

package/dist/runtime/docs/index.vue

@@ -0,0 +1,2537 @@
+<template>
+  <div class="min-h-screen bg-gray-50 text-gray-800 font-sans">
+    <!-- Header -->
+    <header>
+    </header>
+    <!-- Main Content -->
+    <main class="max-w-5xl mx-auto p-6 space-y-10">
+      <DocMegaSection title="Tailwind-based UI Library"
+        sub-title="A lightweight, Tailwind CSS–powered component library for Nuxt 4">
+        <p class="text-gray-700 my-4 font-light">
+          UI Library is a component-based UI library built specifically for Nuxt 4 applications. Inspired by Quasar, it
+          focuses on simplicity, modularity, and rapid development, while ensuring seamless integration with Tailwind
+          CSS.
+        </p>
+        <p class="text-gray-700 font-light">
+          All components are auto-imported, so no manual imports are required. Each component accepts Tailwind CSS
+          utility classes directly via the class prop or standard class bindings, making customization straightforward
+          and flexible.
+        </p>
+      </DocMegaSection>
+      <!-- Getting Started -->
+      <DocMegaSection title="Getting Started" sub-title="Set up UI Library in your Nuxt 4 project in minutes.">
+        <p class="text-gray-700 my-4 font-light">
+          UI Library is designed to work out of the box with Nuxt 4 and Tailwind CSS. Once installed, all components are
+          automatically available throughout your application—no manual imports required.
+        </p>
+        <p class="text-gray-700 mb-4 font-light">
+          To begin, install the library and ensure Tailwind CSS is properly configured in your Nuxt project. You can
+          then start using components directly in your templates and customize them using Tailwind utility classes.es
+          directly via the class prop or standard class bindings, making customization straightforward and flexible.
+        </p>
+        <p class="text-gray-700 font-light">
+          This documentation will guide you through installation, basic usage, and common patterns to help you get
+          productive quickly.
+        </p>
+      </DocMegaSection>
+      <!-- Installation -->
+      <DocMegaSection title="Installation" sub-title="Install UI Library in a Nuxt 4 application.">
+        <p class="text-gray-700 my-4 font-light">
+          UI Library is designed to integrate seamlessly with Nuxt 4. Install the package using your preferred package
+          manager, then register it as a Nuxt module.
+        </p>
+      </DocMegaSection>
+      <!-- Form Controls -->
+      <DocMegaSection title="Form Controls"
+        sub-title="Interactive checkbox component for boolean and multi-state selections.">
+        <DocSection title="UIInput"
+          sub-title="Flexible input component with built-in validation, floating labels, styling variants, customizable sizes, colors, border radius options, and native input type support.">
+          <DocComponent title="Basic Input" caption="A standard text input with a floating label.">
+            <UIInput v-model="value" label="Basic Input" />
+          </DocComponent>
+          <DocComponent title="Input Variants" caption="Choose from multiple visual styles to match your design.">
+            <UIInput v-model="value" label="Default Input" />
+            <UIInput v-model="value" outlined label="Outlined Input" />
+            <UIInput v-model="value" flat label="Flat Input" />
+            <UIInput v-model="value" borderless label="Borderless Input" />
+          </DocComponent>
+          <DocComponent title="Placeholder" caption="Display placeholder text when the input is empty.">
+            <UIInput v-model="value" label="Placeholder Input" placeholder="Enter keyword" />
+            <UIInput v-model="value" outlined label="Placeholder Input" placeholder="Enter keyword" />
+            <UIInput v-model="value" flat label="Placeholder Input" placeholder="Enter keyword" />
+            <UIInput v-model="value" borderless label="Placeholder Input" placeholder="Enter keyword" />
+          </DocComponent>
+          <DocComponent title="Hint Text" caption="Provide additional guidance or instructions below the input.">
+            <UIInput v-model="value" label="Input with Hint" hint="Minimum 6 characters recommended." />
+            <UIInput v-model="value" outlined label="Input with Hint" hint="Minimum 6 characters recommended." />
+            <UIInput v-model="value" flat label="Input with Hint" hint="Minimum 6 characters recommended." />
+            <UIInput v-model="value" borderless label="Input with Hint" hint="Minimum 6 characters recommended." />
+          </DocComponent>
+          <DocComponent title="Cases" caption="Control text transformation using the case prop.">
+            <UIInput v-model="value" label="Uppercase Input" case="upper" />
+            <UIInput v-model="value" outlined label="Lowercase Input" case="lower" />
+            <UIInput v-model="value" flat label="Capitalized Input" case="capitalize" />
+            <UIInput v-model="value" borderless label="Normal Case Input" case="normal" />
+          </DocComponent>
+          <DocComponent title="Required Field" caption="Mark an input field as mandatory.">
+            <UIInput v-model="value" label="Required Field" required />
+            <UIInput v-model="value" outlined label="Required Field" required />
+            <UIInput v-model="value" flat label="Required Field" required />
+            <UIInput v-model="value" borderless label="Required Field" required />
+          </DocComponent>
+          <DocComponent title="Input Sizes" caption="Control input height and spacing using the size prop.">
+            <div class="grid grid-cols-3 gap-4">
+              <UIInput v-model="value" size="sm" label="Small Input" />
+              <UIInput v-model="value" size="md" label="Medium Input (Default)" />
+              <UIInput v-model="value" size="lg" label="Large Input" />
+              <UIInput v-model="value" outlined size="sm" label="Small Input" />
+              <UIInput v-model="value" outlined size="md" label="Medium Input (Default)" />
+              <UIInput v-model="value" outlined size="lg" label="Large Input" />
+              <UIInput v-model="value" flat size="sm" label="Small Input" />
+              <UIInput v-model="value" flat size="md" label="Medium Input (Default)" />
+              <UIInput v-model="value" flat size="lg" label="Large Input" />
+              <UIInput v-model="value" borderless size="sm" label="Small Input" />
+              <UIInput v-model="value" borderless size="md" label="Medium Input (Default)" />
+              <UIInput v-model="value" borderless size="lg" label="Large Input" />
+            </div>
+          </DocComponent>
+          <DocComponent title="HEX Color" caption="Customize the input accent color using a HEX color value.">
+            <UIInput v-model="value" color="#8200db" label="HEX Color Input" />
+            <UIInput v-model="value" outlined color="#76e322" label="HEX Color Input" />
+            <UIInput v-model="value" flat color="#f0b100" label="HEX Color Input" />
+            <UIInput v-model="value" borderless color="#7d32aa" label="HEX Color Input" />
+          </DocComponent>
+          <DocComponent title="Tailwind Color" caption="Customize the input accent color using a Tailwind color name.">
+            <UIInput v-model="value" color="purple-600" label="Tailwind Color Input" />
+            <UIInput v-model="value" outlined color="green-600" label="Tailwind Color Input" />
+            <UIInput v-model="value" flat color="orange-600" label="Tailwind Color Input" />
+            <UIInput v-model="value" borderless color="teal-600" label="Tailwind Color Input" />
+          </DocComponent>
+          <DocComponent title="Width" caption="Control the width using CSS values or Tailwind width classes.">
+            <div class="flex flex-wrap items-end gap-4">
+              <!-- CSS Width Values -->
+              <UIInput v-model="value" width="120px" label="120px" />
+              <UIInput v-model="value" width="160px" label="160px" />
+              <UIInput v-model="value" width="200px" label="200px" />
+              <UIInput v-model="value" width="240px" label="240px" />
+              <UIInput v-model="value" width="300px" label="300px" />
+              <UIInput v-model="value" width="20rem" label="20rem" />
+
+              <!-- Tailwind Width Classes -->
+              <UIInput v-model="value" width="24" label="w-24" />
+              <UIInput v-model="value" width="32" label="w-32" />
+              <UIInput v-model="value" width="40" label="w-40" />
+              <UIInput v-model="value" width="48" label="w-48" />
+              <UIInput v-model="value" width="56" label="w-56" />
+              <UIInput v-model="value" width="64" label="w-64" />
+              <UIInput v-model="value" width="72" label="w-72" />
+              <UIInput v-model="value" width="80" label="w-80" />
+              <UIInput v-model="value" width="96" label="w-96" />
+            </div>
+
+            <div class="flex flex-col tems-end gap-4">
+
+              <UIInput v-model="value" width="50%" label="50%" />
+              <UIInput v-model="value" width="full" label="w-full" />
+              <UIInput v-model="value" width="fit" label="w-fit" />
+              <UIInput v-model="value" width="auto" label="w-auto" />
+
+            </div>
+          </DocComponent>
+          <DocComponent title="Rounded Corners" caption="Control border radius using the rounded prop.">
+            <div class="flex flex-wrap justify-between items-end gap-4">
+              <UIInput v-model="value" rounded="none" label="Rounded None" />
+              <UIInput v-model="value" outlined rounded="none" label="Rounded None" />
+              <UIInput v-model="value" flat rounded="none" label="Rounded None" />
+              <UIInput v-model="value" borderless rounded="none" label="Rounded None" />
+              <UIInput v-model="value" rounded="sm" label="Rounded Small" />
+              <UIInput v-model="value" outlined rounded="sm" label="Rounded Small" />
+              <UIInput v-model="value" flat rounded="sm" label="Rounded Small" />
+              <UIInput v-model="value" borderless rounded="sm" label="Rounded Small" />
+              <UIInput v-model="value" rounded="md" label="Rounded Medium" />
+              <UIInput v-model="value" outlined rounded="md" label="Rounded Medium" />
+              <UIInput v-model="value" flat rounded="md" label="Rounded Medium" />
+              <UIInput v-model="value" borderless rounded="md" label="Rounded Medium" />
+              <UIInput v-model="value" rounded="lg" label="Rounded Large" />
+              <UIInput v-model="value" outlined rounded="lg" label="Rounded Large" />
+              <UIInput v-model="value" flat rounded="lg" label="Rounded Large" />
+              <UIInput v-model="value" borderless rounded="lg" label="Rounded Large" />
+              <UIInput v-model="value" rounded="xl" label="Rounded Extra Large" />
+              <UIInput v-model="value" outlined rounded="xl" label="Rounded Extra Large" />
+              <UIInput v-model="value" flat rounded="xl" label="Rounded Extra Large" />
+              <UIInput v-model="value" borderless rounded="xl" label="Rounded Extra Large" />
+              <UIInput v-model="value" rounded="full" label="Rounded Full" />
+              <UIInput v-model="value" outlined rounded="full" label="Rounded Full" />
+              <UIInput v-model="value" flat rounded="full" label="Rounded Full" />
+              <UIInput v-model="value" borderless rounded="full" label="Rounded Full" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Input Types"
+            caption="Supports native HTML input types for appropriate keyboards and validation.">
+            <div class="flex flex-wrap justify-between items-end gap-4">
+              <UIInput v-model="value" type="text" label="Text Input" placeholder="Enter text" />
+              <UIInput v-model="value" type="text" label="Text Input" placeholder="Enter text" flat />
+              <UIInput v-model="value" type="text" label="Text Input" placeholder="Enter text" outlined />
+              <UIInput v-model="value" type="text" label="Text Input" placeholder="Enter text" borderless />
+              <UIInput v-model="password" type="password" label="Password Input" placeholder="Enter password" />
+              <UIInput v-model="password" type="password" label="Password Input" placeholder="Enter password" flat />
+              <UIInput v-model="password" type="password" label="Password Input" placeholder="Enter password"
+                outlined />
+              <UIInput v-model="password" type="password" label="Password Input" placeholder="Enter password"
+                borderless />
+              <UIInput v-model="search" type="search" label="Search Input" placeholder="Search..." />
+              <UIInput v-model="search" type="search" label="Search Input" placeholder="Search..." flat />
+              <UIInput v-model="search" type="search" label="Search Input" placeholder="Search..." outlined />
+              <UIInput v-model="search" type="search" label="Search Input" placeholder="Search..." borderless />
+              <UIInput v-model="email" type="email" label="Email Input" placeholder="Enter your email" />
+              <UIInput v-model="email" type="email" label="Email Input" placeholder="Enter your email" flat />
+              <UIInput v-model="email" type="email" label="Email Input" placeholder="Enter your email" outlined />
+              <UIInput v-model="email" type="email" label="Email Input" placeholder="Enter your email" borderless />
+              <UIInput v-model="url" type="url" label="URL Input" placeholder="Enter your website URL" />
+              <UIInput v-model="url" type="url" label="URL Input" placeholder="Enter your website URL" flat />
+              <UIInput v-model="url" type="url" label="URL Input" placeholder="Enter your website URL" outlined />
+              <UIInput v-model="url" type="url" label="URL Input" placeholder="Enter your website URL" borderless />
+              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number" />
+              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number" flat />
+              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number"
+                outlined />
+              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number"
+                borderless />
+              <UIInput v-model="number" type="number" label="Number Input" placeholder="Enter a number" />
+              <UIInput v-model="number" type="number" label="Number Input" placeholder="Enter a number" flat />
+              <UIInput v-model="number" type="number" label="Number Input" placeholder="Enter a number" outlined />
+              <UIInput v-model="number" type="number" label="Number Input" placeholder="Enter a number" borderless />
+            </div>
+          </DocComponent>
+          <DocComponent title="Date and Time Input Types"
+            caption="Supports additional HTML input types for specialized use cases.">
+            <div class="grid grid-cols-4 gap-4">
+              <UIInput v-model="date" type="date" label="Date Input" />
+              <UIInput v-model="date" type="date" label="Date Input" flat />
+              <UIInput v-model="date" type="date" label="Date Input" outlined />
+              <UIInput v-model="date" type="date" label="Date Input" borderless />
+              <UIInput v-model="time" type="time" label="Time Input" />
+              <UIInput v-model="time" type="time" label="Time Input" flat />
+              <UIInput v-model="time" type="time" label="Time Input" outlined />
+              <UIInput v-model="time" type="time" label="Time Input" borderless />
+              <UIInput v-model="datetimeLocal" type="datetime-local" label="Datetime Local Input" />
+              <UIInput v-model="datetimeLocal" type="datetime-local" label="Datetime Local Input" flat />
+              <UIInput v-model="datetimeLocal" type="datetime-local" label="Datetime Local Input" outlined />
+              <UIInput v-model="datetimeLocal" type="datetime-local" label="Datetime Local Input" borderless />
+              <UIInput v-model="month" type="month" label="Month Input" />
+              <UIInput v-model="month" type="month" label="Month Input" flat />
+              <UIInput v-model="month" type="month" label="Month Input" outlined />
+              <UIInput v-model="month" type="month" label="Month Input" borderless />
+              <UIInput v-model="week" type="week" label="Week Input" />
+              <UIInput v-model="week" type="week" label="Week Input" flat />
+              <UIInput v-model="week" type="week" label="Week Input" outlined />
+              <UIInput v-model="week" type="week" label="Week Input" borderless />
+            </div>
+          </DocComponent>
+          <DocComponent title="Validation Triggers"
+            caption="Configure when validation occurs using the validateOn prop.">
+            <UIInput v-model="email" label="Validate on Blur" validateOn="blur" type="email" />
+            <UIInput v-model="email" label="Validate on Input" validateOn="input" type="email" />
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UITextarea"
+          sub-title="Multi-line text input with auto-grow, counters, validation, and styling support.">
+          <DocComponent title="Basic Textarea" caption="Standard multi-line text input.">
+            <UITextarea v-model="text" placeholder="Enter text..." />
+          </DocComponent>
+          <DocComponent title="Label" caption="Labels help users understand the purpose of the field.">
+            <UITextarea v-model="text" label="Description" />
+          </DocComponent>
+          <DocComponent title="Placeholder" caption="Placeholder text provides input guidance.">
+            <UITextarea v-model="text" placeholder="Tell us about yourself..." />
+          </DocComponent>
+          <DocComponent title="Auto Grow" caption="Automatically expands vertically as content grows.">
+            <UITextarea v-model="text" autoGrow placeholder="Start typing..." />
+          </DocComponent>
+          <DocComponent title="Word Count" caption="Displays the current number of words entered.">
+            <UITextarea v-model="text" showWordCount />
+          </DocComponent>
+          <DocComponent title="Character Count" caption="Displays the current number of characters entered.">
+            <UITextarea v-model="text" showCharCount />
+          </DocComponent>
+          <DocComponent title="Maximum Length" caption="Displays progress toward the maximum character limit.">
+            <UITextarea v-model="text" :maxlength="200" showCharCount />
+          </DocComponent>
+          <DocComponent title="Helper Text" caption="Provide additional guidance below the field.">
+            <UITextarea v-model="text" hint="Maximum 500 characters." />
+          </DocComponent>
+          <DocComponent title="Error State" caption="Displays validation errors and highlights the field.">
+            <UITextarea v-model="text" error errorMessage="Description is required." />
+          </DocComponent>
+          <DocComponent title="Disabled" caption="Prevents user interaction.">
+            <UITextarea v-model="text" disable />
+          </DocComponent>
+          <DocComponent title="Read Only" caption="Allows content to be viewed without editing.">
+            <UITextarea v-model="text" modelValue="This content cannot be edited." readonly />
+          </DocComponent>
+          <DocComponent title="Rounded Variants" caption="Control border radius using the rounded prop.">
+            <div class="space-y-4">
+              <UITextarea v-model="text" rounded="none" label="Rounded None" />
+
+              <UITextarea v-model="text" rounded="md" label="Rounded Medium" />
+
+              <UITextarea v-model="text" rounded="xl" label="Rounded XL" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Size Variants" caption="Adjust textarea sizing using the size prop.">
+            <div class="space-y-4">
+              <UITextarea v-model="text" size="sm" label="Small" />
+
+              <UITextarea v-model="text" size="md" label="Medium" />
+
+              <UITextarea v-model="text" size="lg" label="Large" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Tailwind Colors" caption="Apply border colors using Tailwind utility colors.">
+            <UITextarea v-model="text" color="blue-500" label="Blue Border" />
+          </DocComponent>
+          <DocComponent title="Hex Colors" caption="Custom border colors can be provided using hex values.">
+            <UITextarea v-model="text" color="#10b981" label="Green Border" />
+          </DocComponent>
+          <DocComponent title="Text Colors" caption="Customize the textarea text color.">
+            <UITextarea v-model="text" textColor="purple-600" label="Purple Text" />
+          </DocComponent>
+          <DocComponent title="Custom Classes" caption="Apply custom Tailwind utility classes using contentClass.">
+            <UITextarea v-model="text" contentClass="bg-blue-50 shadow-md" label="Custom Styled" />
+          </DocComponent>
+          <DocComponent title="Custom Styles" caption="Apply inline styles using contentStyle.">
+            <UITextarea v-model="text" contentStyle="`{
+              backgroundColor: '#fefce8',
+              borderColor: '#facc15'
+            }`" label="Inline Styled" />
+          </DocComponent>
+          <DocComponent title="Combined Example" caption="Combines multiple styling and behavior options.">
+            <UITextarea v-model="feedback" label="Feedback" placeholder="Tell us what you think..." rounded="xl"
+              size="lg" color="blue-500" autoGrow showWordCount showCharCount :maxlength="500"
+              contentClass="shadow-md" />
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIToggle" sub-title="Switch / Toggle input. Works like a checkbox.">
+          <DocComponent title="Basic Toggle" caption="A simple toggle with default styling.">
+            <UIToggle v-model="toggleInput" />
+          </DocComponent>
+          <DocComponent title="Toggle With Label" caption="Toggle with a descriptive label.">
+            <UIToggle v-model="toggleInput" label="Enable Notifications" />
+          </DocComponent>
+          <DocComponent title="Label Positions" caption="Labels can be positioned on any side of the toggle.">
+            <div class="flex flex-wrap gap-6">
+              <UIToggle v-model="toggleInput" label="Top" label-position="top" />
+              <UIToggle v-model="toggleInput" label="Bottom" label-position="bottom" />
+              <UIToggle v-model="toggleInput" label="Left" label-position="left" />
+              <UIToggle v-model="toggleInput" label="Right" label-position="right" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Toggle Sizes" caption="Small, medium, and large toggle sizes.">
+            <div class="flex items-center gap-6">
+              <UIToggle v-model="toggleInput" size="small" />
+              <UIToggle v-model="toggleInput" size="medium" />
+              <UIToggle v-model="toggleInput" size="large" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Tailwind Colors" caption="Toggle supports Tailwind utility colors.">
+            <div class="flex flex-wrap gap-6">
+              <UIToggle v-model="toggleInput" true-color="green-500" />
+              <UIToggle v-model="toggleInput" true-color="purple-500" />
+              <UIToggle v-model="toggleInput" true-color="rose-500" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Hex Colors" caption="Toggle also supports arbitrary hex colors.">
+            <div class="flex flex-wrap gap-6">
+              <UIToggle v-model="toggleInput" true-color="#22c55e" />
+              <UIToggle v-model="toggleInput" true-color="#8b5cf6" />
+              <UIToggle v-model="toggleInput" true-color="#ef4444" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Custom False Color" caption="Customize both active and inactive colors.">
+            <UIToggle v-model="toggleInput" true-color="emerald-500" false-color="red-300" />
+          </DocComponent>
+          <DocComponent title="Toggle Icons" caption="Display icons inside the toggle thumb.">
+            <div class="flex flex-wrap gap-6">
+              <UIToggle v-model="toggleInput" active-icon="check" inactive-icon="close" />
+              <UIToggle v-model="toggleInput" active-icon="light_mode" inactive-icon="dark_mode"
+                true-color="amber-400" />
+              <UIToggle v-model="toggleInput" active-icon="favorite" inactive-icon="favorite_border"
+                true-color="rose-500" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Disabled Toggle" caption="Disabled state prevents user interaction.">
+            <div class="flex flex-wrap gap-6">
+              <UIToggle v-model="toggleInput" disable />
+              <UIToggle v-model="toggleInput" disable :model-value="true" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Custom Active/Inactive Values"
+            caption="Toggle can emit custom values instead of booleans.">
+            <UIToggle v-model="toggleCustomValue" active-value="enabled" inactive-value="disabled"
+              label="Feature Status" />
+            <div class="mt-3 text-sm text-gray-500">
+              Current Value:
+              {{ toggleCustomValue }}
+            </div>
+          </DocComponent>
+          <DocComponent title="Custom Classes" caption="Apply custom utility classes to the wrapper.">
+            <UIToggle v-model="toggleInput" custom-classes="p-4 border rounded-xl bg-gray-50" label="Custom Wrapper" />
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UICheckbox" sub-title="Single or group selection.">
+          <DocComponent title="Basic Checkbox" caption="A standard checkbox used to toggle a boolean value on and off.">
+            <div class="flex gap-6 items-center">
+              <UICheckbox v-model="checked" label="Accept terms" />
+              <UICheckbox v-model="checked" label="Subscribe to newsletter" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Checkbox Sizes"
+            caption="UICheckbox supports multiple sizes to adapt to different layouts and densities.">
+            <div class="flex gap-6 items-center">
+              <UICheckbox v-model="checked" size="sm" label="Small" />
+              <UICheckbox v-model="checked" size="md" label="Medium" />
+              <UICheckbox v-model="checked" size="lg" label="Large" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Checkbox Icons" caption="You can customize the icons displayed for each checkbox state.">
+            <div class="flex gap-6 items-center">
+              <UICheckbox v-model="checked" checkedIcon="done" uncheckedIcon="close" label="Custom icons" />
+              <UICheckbox v-model="checked" checkedIcon="favorite" uncheckedIcon="favorite_border"
+                checkedColor="red-500" label="Favorite" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Checkbox Colors"
+            caption="Apply different colors to represent states or semantic meaning.">
+            <div class="flex gap-6 items-center">
+              <UICheckbox v-model="checked" checkedColor="green-500" label="Success" />
+              <UICheckbox v-model="checked" checkedColor="yellow-500" label="Warning" />
+              <UICheckbox v-model="checked" checkedColor="red-500" label="Danger" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Dense Checkbox"
+            caption="Dense checkboxes are ideal for compact layouts like tables or filter panels.">
+            <div class="flex flex-col gap-2">
+              <UICheckbox v-model="checked" dense label="Compact option 1" />
+              <UICheckbox v-model="checked" dense label="Compact option 2" />
+              <UICheckbox v-model="checked" dense label="Compact option 3" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Checkbox Values"
+            caption="UICheckbox supports custom true, false, and intermediate values.">
+            <div class="flex gap-6 items-center">
+              <UICheckbox v-model="checked" trueValue="enabled" falseValue="disabled" label="Feature status" />
+              <UICheckbox v-model="checked" trueValue="approved" intermediateValue="pending" falseValue="rejected"
+                label="Approval state" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Disabled Checkbox"
+            caption="Disabled checkboxes prevent interaction and indicate unavailable options.">
+            <div class="flex gap-6 items-center">
+              <UICheckbox v-model="checked" disable label="Locked option" />
+              <UICheckbox v-model="checked" disable checkedColor="blue-500" label="Read-only" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Rounded Checkbox" caption="Change the checkbox shape using the rounded prop.">
+            <div class="flex gap-6 items-center">
+              <UICheckbox v-model="checked" rounded="sm" label="Rounded SM" />
+              <UICheckbox v-model="checked" rounded="md" label="Rounded MD" />
+              <UICheckbox v-model="checked" rounded="full" label="Rounded Full" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Checkbox Without Label"
+            caption="Checkboxes can be used without labels for minimal or inline selection.">
+            <div class="flex gap-4 items-center">
+              <UICheckbox v-model="checked" />
+              <UICheckbox v-model="checked" checkedColor="blue-500" />
+              <UICheckbox v-model="checked" checkedIcon="check_circle" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Checkbox With Custom Values"
+            caption="Checkboxes can be used without labels for minimal or inline selection.">
+            <div class="flex gap-4 items-center">
+              <UICheckbox v-model="checkedValue" true-value="green" false-value="red" />
+              <div>Checked Value - {{ checkedValue }}</div>
+            </div>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIRadio" sub-title="Radio buttons with optional labels.">
+          <DocComponent title="Basic Radio" caption="Simple radio button usage.">
+            <UIRadio v-model="radioValue" value="apple" label="Apple" />
+          </DocComponent>
+          <DocComponent title="Radio Group" caption="Multiple radio buttons sharing the same model.">
+            <div class="flex flex-col gap-3">
+              <UIRadio v-model="radioValue" name="fruit" value="apple" label="Apple" />
+              <UIRadio v-model="radioValue" name="fruit" value="banana" label="Banana" />
+              <UIRadio v-model="radioValue" name="fruit" value="orange" label="Orange" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Radio Sizes" caption="Small, medium, and large radios.">
+            <div class="flex items-center gap-6">
+              <UIRadio v-model="radioValue" value="sm" label="Small" size="sm" />
+
+              <UIRadio v-model="radioValue" value="md" label="Medium" size="md" />
+
+              <UIRadio v-model="radioValue" value="lg" label="Large" size="lg" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Tailwind Colors" caption="Supports Tailwind color tokens.">
+            <div class="flex flex-col gap-3">
+              <UIRadio v-model="radioValue" value="blue" label="Blue" color="blue-500" icon="check" />
+
+              <UIRadio v-model="radioValue" value="green" label="Green" color="green-500" icon="check" />
+
+              <UIRadio v-model="radioValue" value="rose" label="Rose" color="rose-500" icon="check" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Hex Colors" caption="Supports arbitrary hex colors.">
+            <div class="flex flex-col gap-3">
+              <UIRadio v-model="radioValue" value="one" label="Purple" color="#7c3aed" icon="check" />
+
+              <UIRadio v-model="radioValue" value="two" label="Green" color="#22c55e" icon="check" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Rounded Variants" caption="Different rounded styles.">
+            <div class="flex flex-col gap-3">
+              <UIRadio v-model="radioValue" value="none" label="Rounded None" rounded="none" icon="check" />
+
+              <UIRadio v-model="radioValue" value="md" label="Rounded MD" rounded="md" icon="check" />
+
+              <UIRadio v-model="radioValue" value="full" label="Rounded Full" rounded="full" icon="check" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Flat Radios" caption="Remove shadows using flat mode.">
+            <UIRadio v-model="radioValue" value="flat" label="Flat Radio" flat icon="check" />
+          </DocComponent>
+          <DocComponent title="Disabled Radios" caption="Disabled state prevents interaction.">
+            <div class="flex flex-col gap-3">
+              <UIRadio v-model="radioValue" value="one" label="Disabled" disable />
+
+              <UIRadio v-model="radioValue" value="two" label="Disabled Selected" disable />
+            </div>
+          </DocComponent>
+          <DocComponent title="Label Positions" caption="Labels can appear on all sides.">
+            <div class="flex gap-8">
+              <UIRadio v-model="radioValue" value="top" label="Top" label-position="top" />
+
+              <UIRadio v-model="radioValue" value="bottom" label="Bottom" label-position="bottom" />
+
+              <UIRadio v-model="radioValue" value="left" label="Left" label-position="left" />
+
+              <UIRadio v-model="radioValue" value="right" label="Right" label-position="right" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Custom Icons" caption="Use Material Icons inside the radio.">
+            <div class="flex flex-col gap-3">
+              <UIRadio v-model="radioValue" value="favorite" label="Favorite" icon="favorite" color="rose-500" />
+
+              <UIRadio v-model="radioValue" value="done" label="Completed" icon="done" color="emerald-500" />
+            </div>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UISelect" sub-title="Material-inspired select component with native and searchable modes.">
+          <DocComponent title="Basic Select" caption="Simple native select dropdown.">
+            <UISelect v-model="selectValue" label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Filterable Select" caption="Search through available options.">
+            <UISelect v-model="selectValue" filter label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Placeholder" caption="Customize the placeholder.">
+            <UISelect v-model="selectValue" label="Framework" placeholder="Choose a framework" :options="frameworks" />
+          </DocComponent>
+
+          <DocComponent title="Hint" caption="Display helper text below the component.">
+            <UISelect v-model="selectValue" label="Theme" hint="Select your preferred theme." :options="themes" />
+          </DocComponent>
+
+          <DocComponent title="Required" caption="Mark the field as required.">
+            <UISelect v-model="selectValue" label="Country" required hint="Required field" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Disabled" caption="Prevent user interaction.">
+            <UISelect v-model="selectValue" disabled label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Readonly" caption="Display the value without allowing changes.">
+            <UISelect v-model="selectValue" readonly label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Outlined" caption="Display a full outlined border.">
+            <UISelect v-model="selectValue" outlined label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Borderless" caption="Remove borders completely.">
+            <UISelect v-model="selectValue" borderless label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Flat" caption="Remove the default shadow.">
+            <UISelect v-model="selectValue" flat outlined label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Rounded" caption="Different corner radius options.">
+            <div class="space-y-4">
+              <UISelect v-model="selectValue" rounded="sm" label="Small" :options="countries" />
+
+              <UISelect v-model="selectValue" rounded="md" label="Medium" :options="countries" />
+
+              <UISelect v-model="selectValue" rounded="lg" label="Large" :options="countries" />
+
+              <UISelect v-model="selectValue" rounded="xl" label="Extra Large" :options="countries" />
+
+              <UISelect v-model="selectValue" rounded="full" label="Full" :options="countries" />
+            </div>
+          </DocComponent>
+
+          <DocComponent title="Sizes" caption="Supports small, medium and large variants.">
+            <div class="space-y-4">
+              <UISelect v-model="selectValue" size="sm" label="Small" :options="countries" />
+
+              <UISelect v-model="selectValue" size="md" label="Medium" :options="countries" />
+
+              <UISelect v-model="selectValue" size="lg" label="Large" :options="countries" />
+            </div>
+          </DocComponent>
+
+          <DocComponent title="Dense" caption="Compact vertical spacing.">
+            <UISelect v-model="selectValue" dense label="Country" :options="countries" />
+          </DocComponent>
+
+          <DocComponent title="Tailwind Color" caption="Apply Tailwind border colors.">
+            <UISelect v-model="selectValue" outlined color="emerald-500" label="Status" :options="statuses" />
+          </DocComponent>
+
+          <DocComponent title="Hex Color" caption="Supports custom hex colors.">
+            <UISelect v-model="selectValue" outlined color="#7c3aed" label="Priority" :options="priorities" />
+          </DocComponent>
+
+          <DocComponent title="Custom Width" caption="Use Tailwind widths or CSS widths.">
+            <div class="space-y-4">
+              <UISelect v-model="selectValue" width="64" label="Tailwind Width" :options="countries" />
+
+              <UISelect v-model="selectValue" width="350px" label="CSS Width" :options="countries" />
+            </div>
+          </DocComponent>
+
+          <DocComponent title="Large Dataset" caption="Search through many options.">
+            <UISelect v-model="selectValue" filter label="City" placeholder="Search cities..." :options="cities" />
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIColorPicker" sub-title="The UIColor component provides a method to input colors.">
+          <DocComponent title="Basic Color Picker" caption="The simplest form — uses default props and behavior.">
+            <div class="flex gap-6 items-center">
+              <UIColorPicker v-model="colorPickerValue" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Color Picker with Default Color"
+            caption="The simplest form — uses default props and behavior.">
+            <div class="flex gap-6 items-center">
+              <UIColorPicker v-model="colorPickerValue" default-value="#45321f" />
+              <UIColorPicker v-model="colorPickerValue" default-value="#78aee2" />
+              <UIColorPicker v-model="colorPickerValue" default-value="#765ead" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Disabled Color Picker" caption="The simplest form — uses default props and behavior.">
+            <div class="flex gap-6 items-center">
+              <UIColorPicker v-model="colorPickerValue" :disabled="true" />
+              <UIColorPicker v-model="colorPickerValue" :disabled="true" :show-opacity="true" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Flat Color Picker" caption="The simplest form — uses default props and behavior.">
+            <div class="flex gap-6 items-center">
+              <UIColorPicker v-model="colorPickerValue" :flat="true" />
+              <UIColorPicker v-model="colorPickerValue" :flat="true" :bordered="true" :show-opacity="true" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Square Color Picker" caption="The simplest form — uses default props and behavior.">
+            <div class="flex gap-6 items-center">
+              <UIColorPicker v-model="colorPickerValue" :square="true" />
+              <UIColorPicker v-model="colorPickerValue" :flat="true" :bordered="true" :square="true" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Bordered Color Picker" caption="The simplest form — uses default props and behavior.">
+            <div class="flex gap-6 items-center">
+              <UIColorPicker v-model="colorPickerValue" :bordered="true" />
+              <UIColorPicker v-model="colorPickerValue" :bordered="true" :border-radius="20" />
+              <UIColorPicker v-model="colorPickerValue" :flat="true" :bordered="true" :border-radius="25" />
+            </div>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIDate" sub-title="The UIDate component provides a method to input date.">
+          <DocComponent title="Basic Date"
+            caption="A simple date component with default styling and single date selection.">
+            <UIDate v-model="dateValue" />
+          </DocComponent>
+          <DocComponent title="With Custom Color" caption="Apply theme color to match your design system.">
+            <UIDate v-model="dateValue" color="rose" />
+          </DocComponent>
+          <DocComponent title="Flat Style" caption="Removes background and shadow for a minimal look.">
+            <UIDate v-model="dateValue" :flat="true" />
+          </DocComponent>
+          <DocComponent title="Bordered" caption="Adds a border around the date picker.">
+            <UIDate v-model="dateValue" :bordered="true" />
+          </DocComponent>
+          <DocComponent title="Border Radius Variant" caption="Applies different border radius styles.">
+            <div class="flex gap-6 items-center py-4 w-full overflow-x-auto">
+              <UIDate v-model="dateValue" border-radius="none" />
+              <UIDate v-model="dateValue" border-radius="sm" />
+              <UIDate v-model="dateValue" border-radius="md" />
+              <UIDate v-model="dateValue" border-radius="lg" />
+              <UIDate v-model="dateValue" border-radius="xl" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Custom Text Color" caption="Control text color independently from background.">
+            <div class="flex gap-6 items-center py-4 w-full overflow-x-auto">
+              <UIDate v-model="dateValue" textColor="green-700" />
+              <UIDate v-model="dateValue" textColor="yellow-500" />
+              <UIDate v-model="dateValue" textColor="purple-400" />
+              <UIDate v-model="dateValue" textColor="pink-500" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Multiple Date Selection" caption="Select multiple dates at once.">
+            <UIDate v-model="multiDates" multiDate />
+          </DocComponent>
+          <DocComponent title="Date Range Selection" caption="Select a continuous range of dates.">
+            <UIDate v-model="rangeDates" rangeDate />
+          </DocComponent>
+          <DocComponent title="Range with Disabled Dates" caption="Prevent selection of specific dates within a range.">
+            <div class="flex gap-6 items-center py-4 w-full overflow-x-auto">
+              <UIDate v-model="rangeDates" :disabledDates="['2026-04-12', '2026-04-14']" />
+              <UIDate v-model="rangeDates" range-date :disabledDates="['2026-04-10', '2026-04-15']" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Custom Date Format" caption="Output date in a specific format.">
+            <div class="flex gap-6 items-center py-4 w-full overflow-x-auto">
+              <UIDate v-model="dateValue" format="YYYY-MM-DD" />
+              <UIDate v-model="dateValue" format="DD-MM-YYYY" />
+              <UIDate v-model="dateValue" format="MM-DD-YYYY" />
+              <UIDate v-model="dateValue" format="DD/MM/YYYY" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Timestamp Output" caption="Return selected date as a timestamp.">
+            <UIDate v-model="dateValue" format="timestamp" />
+          </DocComponent>
+          <DocComponent title="Disable Weekends" caption="Dynamically disable weekends from selection.">
+            {{ disabledWeekends }}
+            <!-- <UIDate 
+              v-model="dateValue" 
+              :disabledDates="disabledWeekends" 
+            /> -->
+          </DocComponent>
+          <DocComponent title="Highlight Events" caption="Highlight important dates with custom colors.">
+            <UIDate v-model="dateValue" :events="[
+              { date: '2026-04-10', color: 'red-500' },
+              { date: '2026-04-15', color: 'green-500' }
+            ]" />
+          </DocComponent>
+          <DocComponent title="Today Highlight" caption="Automatically highlight today's date.">
+            <UIDate v-model="dateValue" today />
+          </DocComponent>
+          <DocComponent title="Custom Header Slot" caption="Replace the default header with custom content.">
+            <UIDate v-model="dateValue">
+              <template #header>
+                <div class="text-center font-bold text-lg">
+                  Select Your Date
+                </div>
+              </template>
+            </UIDate>
+          </DocComponent>
+          <DocComponent title="Hide Header" caption="Remove the header section completely.">
+            <UIDate v-model="dateValue" :showHeader="false" />
+          </DocComponent>
+          <DocComponent title="Date & Time Picker" caption="Enable time selection along with date.">
+            <UIDate v-model="dateTime" type="datetime" />
+          </DocComponent>
+          <!-- <DocComponent 
+            title="Full Featured Example" 
+            caption="Combining multiple features into a powerful date picker."
+          >
+            <UIDate
+              v-model="rangeDates"
+              range-date
+              color="indigo-600"
+              bordered
+              :events="[
+                { date: '2026-04-12', color: 'yellow-400' }
+              ]"
+              :disabledDates="['2026-04-10']"
+              format="DD MMM YYYY"
+            />
+          </DocComponent> -->
+        </DocSection>
+        <DocSection title="UIFileUploader" sub-title="Material-inspired file uploader with drag-and-drop support.">
+          <DocComponent title="Basic Upload" caption="Default uploader.">
+            <UIFileUploader v-model="files" label="Attachments" />
+          </DocComponent>
+
+          <DocComponent title="Single File" caption="Restrict uploads to one file.">
+            <UIFileUploader v-model="singleFile" :multiple="false" label="Resume" />
+          </DocComponent>
+
+          <DocComponent title="Multiple Files" caption="Allow uploading multiple files.">
+            <UIFileUploader v-model="multipleFiles" multiple label="Project Files" />
+          </DocComponent>
+
+          <DocComponent title="Hint" caption="Display helper text.">
+            <UIFileUploader v-model="files" label="Documents" hint="Upload PDF or image files." />
+          </DocComponent>
+
+          <DocComponent title="Outlined" caption="Use outlined styling.">
+            <UIFileUploader v-model="files" outlined label="Attachments" />
+          </DocComponent>
+
+          <DocComponent title="Borderless" caption="Remove borders completely.">
+            <UIFileUploader v-model="files" borderless label="Attachments" />
+          </DocComponent>
+
+          <DocComponent title="Flat" caption="Remove shadow.">
+            <UIFileUploader v-model="files" outlined flat label="Attachments" />
+          </DocComponent>
+
+          <DocComponent title="Rounded" caption="Different rounded variants.">
+            <div class="space-y-4">
+              <UIFileUploader v-model="files" rounded="sm" label="Rounded SM" />
+
+              <UIFileUploader v-model="files" rounded="md" label="Rounded MD" />
+
+              <UIFileUploader v-model="files" rounded="lg" label="Rounded LG" />
+
+              <UIFileUploader v-model="files" rounded="xl" label="Rounded XL" />
+
+              <UIFileUploader v-model="files" rounded="full" label="Rounded Full" />
+            </div>
+          </DocComponent>
+
+          <DocComponent title="Sizes" caption="Small, medium and large variants.">
+            <div class="space-y-4">
+              <UIFileUploader v-model="files" size="sm" label="Small" />
+
+              <UIFileUploader v-model="files" size="md" label="Medium" />
+
+              <UIFileUploader v-model="files" size="lg" label="Large" />
+            </div>
+          </DocComponent>
+
+          <DocComponent title="Dense" caption="Compact vertical spacing.">
+            <UIFileUploader v-model="files" dense label="Compact Upload" />
+          </DocComponent>
+
+          <DocComponent title="Tailwind Color" caption="Apply Tailwind border colors.">
+            <UIFileUploader v-model="files" outlined color="emerald-500" label="Success Upload" />
+          </DocComponent>
+
+          <DocComponent title="Hex Color" caption="Supports custom hex colors.">
+            <UIFileUploader v-model="files" outlined color="#7c3aed" label="Custom Upload" />
+          </DocComponent>
+
+          <DocComponent title="Separator" caption="Solid, dashed and dotted borders.">
+            <div class="space-y-4">
+              <UIFileUploader v-model="files" separator="solid" label="Solid" />
+
+              <UIFileUploader v-model="files" separator="dashed" label="Dashed" />
+
+              <UIFileUploader v-model="files" separator="dotted" label="Dotted" />
+            </div>
+          </DocComponent>
+
+          <DocComponent title="Disabled" caption="Prevent interaction.">
+            <UIFileUploader v-model="files" disabled label="Disabled Upload" />
+          </DocComponent>
+
+          <DocComponent title="Readonly" caption="Display without allowing changes.">
+            <UIFileUploader v-model="files" readonly label="Readonly Upload" />
+          </DocComponent>
+
+          <DocComponent title="Width" caption="Supports Tailwind and CSS widths.">
+            <div class="space-y-4">
+              <UIFileUploader v-model="files" width="96" label="Tailwind Width" />
+
+              <UIFileUploader v-model="files" width="450px" label="CSS Width" />
+            </div>
+          </DocComponent>
+
+          <DocComponent title="File Size Limit" caption="Restrict maximum upload size.">
+            <UIFileUploader v-model="files" :fileSizeLimitKb="500" label="Max 500 KB" />
+          </DocComponent>
+
+          <DocComponent title="PDF Only" caption="Accept only PDF documents.">
+            <UIFileUploader v-model="files" fileType="application/pdf" label="PDF Upload" />
+          </DocComponent>
+
+          <DocComponent title="Images Only" caption="Accept image files.">
+            <UIFileUploader v-model="files" fileType="image/*" label="Image Upload" />
+          </DocComponent>
+
+          <DocComponent title="Custom Slot" caption="Replace the default upload content.">
+            <UIFileUploader v-model="files" label="Assets">
+              <template #content>
+                <div class="text-center py-4">
+                  <span class="material-icons text-5xl text-indigo-500">
+                    cloud_upload
+                  </span>
+
+                  <div class="mt-2 font-medium">
+                    Upload your assets
+                  </div>
+
+                  <div class="text-sm text-gray-500">
+                    Drag files here or click to browse
+                  </div>
+                </div>
+              </template>
+            </UIFileUploader>
+          </DocComponent>
+
+          <DocComponent title="Custom Remove Icon" caption="Customize the remove button icon.">
+            <UIFileUploader v-model="files" fileRemoverIcon="delete_forever" label="Attachments" />
+          </DocComponent>
+        </DocSection>
+      </DocMegaSection>
+      <!-- Button -->
+      <DocSection title="UIButton" sub-title="Represents a clickable element for triggering actions."
+        caption="UIButtons are used to trigger actions and guide user interactions across the interface. This section showcases a wide range of UIButton styles including basic, outline, flat, rounded, dense, unelevated, stacked, gradient, size variations, icon buttons, icon-with-label buttons, and disabled states. Each example demonstrates how buttons can be customized in appearance, size, elevation, and behavior to suit different UI needs while maintaining consistency and usability.">
+        <DocComponent title="Basic Button"
+          caption="Standard buttons used for primary actions. They provide clear visual emphasis and are suitable for most common interactions.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton color="blue-500" label="Click Me" />
+            <UIButton color="green-600" label="Click Me" />
+            <UIButton color="yellow-500" label="Click Me" />
+            <UIButton color="red-600" label="Click Me" />
+            <UIButton color="gray-600" label="Click Me" />
+          </div>
+          <div class="flex gap-4">
+            <UIButton color="blue-200" label="Click Me" />
+            <UIButton color="green-300" label="Click Me" />
+            <UIButton color="yellow-300" label="Click Me" />
+            <UIButton color="red-300" label="Click Me" />
+            <UIButton color="gray-200" label="Click Me" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Outline Button"
+          caption="Buttons with a transparent background and visible border. Ideal for secondary actions that need less visual weight.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton outline color="blue-500" label="Click Me" />
+            <UIButton outline color="green-600" label="Click Me" />
+            <UIButton outline color="yellow-500" label="Click Me" />
+            <UIButton outline color="red-600" label="Click Me" />
+            <UIButton outline color="gray-600" label="Click Me" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Flat Button"
+          caption="Minimal buttons without borders or elevation. Commonly used for inline actions or low-priority interactions.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton flat color="blue-500" label="Click Me" />
+            <UIButton flat color="green-600" label="Click Me" />
+            <UIButton flat color="yellow-500" label="Click Me" />
+            <UIButton flat color="red-600" label="Click Me" />
+            <UIButton flat color="gray-600" label="Click Me" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Rounded Button"
+          caption="Buttons with adjustable border radius options, ranging from subtle rounding to fully pill-shaped styles.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton rounded="none" color="blue-500" label="None" />
+            <UIButton rounded="sm" color="blue-500" label="Small" />
+            <UIButton rounded="md" color="blue-500" label="Medium (Default)" />
+            <UIButton rounded="lg" color="blue-500" label="Large" />
+            <UIButton rounded="xl" color="blue-500" label="X Large" />
+            <UIButton rounded="full" color="blue-500" label="Full" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Dense Button"
+          caption="Compact buttons with reduced padding, designed for space-constrained layouts or data-dense interfaces.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton dense color="blue-500" label="Click Me" />
+            <UIButton dense color="green-600" label="Click Me" />
+            <UIButton dense color="yellow-500" label="Click Me" />
+            <UIButton dense color="red-600" label="Click Me" />
+            <UIButton dense color="gray-600" label="Click Me" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Unelevated Button"
+          caption="Buttons without shadows or elevation, offering a flat appearance while retaining a solid background.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton unelevated color="blue-500" label="Click Me" />
+            <UIButton unelevated color="green-600" label="Click Me" />
+            <UIButton unelevated color="yellow-500" label="Click Me" />
+            <UIButton unelevated color="red-600" label="Click Me" />
+            <UIButton unelevated color="gray-600" label="Click Me" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Stacked Button"
+          caption="Buttons that combine icons and labels in a vertical layout, useful for navigation menus or feature highlights.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton stacked icon="home" color="blue-500" label="Click Me" />
+            <UIButton stacked icon="home" outlined color="green-600" label="Outlined" />
+            <UIButton stacked icon="home" flat color="yellow-500" label="Flat" />
+            <UIButton stacked icon="home" unelevated color="red-600" label="Unelevated" />
+            <UIButton stacked icon="home" dense color="gray-600" label="Dense" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Gradient Button"
+          caption="Buttons with gradient backgrounds that add visual depth and emphasis for prominent or call-to-action elements.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton gradient color="blue-500" label="Click Me" />
+            <UIButton gradient color="green-600" label="Click Me" />
+            <UIButton gradient color="yellow-500" color2="pink-500" label="Click Me" />
+            <UIButton gradient color="red-200" color2="blue-300" label="Click Me" />
+            <UIButton gradient color="gray-200" color2="purple-600" label="Click Me" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Size Button"
+          caption="Buttons available in multiple sizes to match different layout requirements and visual hierarchies.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton size="sm" color="blue-500" label="Small" />
+            <UIButton size="md" color="blue-500" label="Medium (Default)" />
+            <UIButton size="lg" color="blue-500" label="Large" />
+            <UIButton size="sm" rounded="full" color="blue-500" label="Small Rounded" />
+            <UIButton size="md" rounded="full" color="blue-500" label="Medium Rounded" />
+            <UIButton size="lg" rounded="full" color="blue-500" label="Large Rounded" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Icon Button"
+          caption="Icon-only buttons used for compact actions where space is limited or the action is universally recognizable.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton icon="home" color="blue-500" />
+            <UIButton icon="settings" color="green-600" />
+            <UIButton icon="search" color="yellow-500" />
+            <UIButton icon="refresh" color="red-600" />
+            <UIButton icon="cancel" color="gray-600" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Icon with Label Button"
+          caption="Buttons that pair icons with text labels, improving clarity and accessibility for user actions.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton icon="home" color="blue-500" label="Home" />
+            <UIButton icon="settings" color="green-600" label="Settings" />
+            <UIButton icon="search" color="yellow-500" label="Search" />
+            <UIButton icon="refresh" color="red-600" label="Refresh" />
+            <UIButton icon="cancel" color="gray-600" label="Cancel" />
+          </div>
+        </DocComponent>
+        <DocComponent title="Disabled Button"
+          caption="Buttons in an inactive state with no hover or click interaction, used to indicate unavailable actions.">
+          <div class="flex items-center gap-4 mb-4">
+            <UIButton label="Toggle Enable" @click="disable = !disable" />
+            <UIButton :disable="disable" color="blue-500" label="Click Me" />
+            <UIButton :disable="disable" outline color="green-600" label="Outlined" />
+            <UIButton :disable="disable" flat color="yellow-500" label="Flat" />
+            <UIButton :disable="disable" unelevated color="red-600" label="Unelevated" />
+            <UIButton :disable="disable" rounded="lg" color="gray-600" label="Rounded Lg" />
+          </div>
+        </DocComponent>
+      </DocSection>
+      <!-- Navigation -->
+      <DocMegaSection title="Navigation" sub-title="Components to guide users through your app efficiently.">
+        <DocSection title="UIBreadcrumbs" sub-title="Hierarchical navigation display.">
+          <DocComponent title="Basic Breadcrumbs"
+            caption="A simple breadcrumb trail showing hierarchical navigation using text-only items.">
+            <UIBreadcrumbs :items="basicBreadcrumbs" />
+          </DocComponent>
+          <DocComponent title="Icon Breadcrumbs"
+            caption="Breadcrumb items enhanced with icons to improve visual recognition and scannability.">
+            <UIBreadcrumbs :items="iconBreadcrumbs" active-color="amber-500" />
+          </DocComponent>
+          <DocComponent title="Custom Selector Breadcrumbs"
+            caption="Customize the separator character to match different design styles or branding needs.">
+            <div class="flex flex-col gap-4">
+              <UIBreadcrumbs :items="basicBreadcrumbs" separator="-" active-color="green-500" />
+              <UIBreadcrumbs :items="basicBreadcrumbs" separator=">" active-color="blue-500" />
+              <UIBreadcrumbs :items="basicBreadcrumbs" separator="::" active-color="purple-500" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Gutter Space Breadcrumbs"
+            caption="Control the spacing between breadcrumb items using the gutter property for tighter or looser layouts.">
+            <div class="flex flex-col gap-4">
+              <UIBreadcrumbs :items="breadcrumbs" gutter="0rem" active-color="blue-500" />
+              <UIBreadcrumbs :items="breadcrumbs" gutter="0.75rem" active-color="blue-500" />
+              <UIBreadcrumbs :items="breadcrumbs" gutter="1rem" active-color="green-500" />
+              <UIBreadcrumbs :items="breadcrumbs" gutter="1.5rem" active-color="amber-500" />
+            </div>
+          </DocComponent>
+          <DocComponent title="Aligned Breadcrumbs"
+            caption="Align breadcrumbs horizontally to the start, center, or end of the container.">
+            <div class="flex flex-col gap-4">
+              <UIBreadcrumbs :items="breadcrumbs" align="start" active-color="blue-600s" separator-color="blue-700" />
+              <UIBreadcrumbs :items="breadcrumbs" separator="/" align="center" active-color="green-600"
+                separator-color="green-700" />
+              <UIBreadcrumbs :items="breadcrumbs" separator="/" align="end" active-color="yellow-600"
+                separator-color="yellow-700" />
+            </div>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UITabs + UITabPanel" sub-title="Tabbed navigation for content panels."
+          caption="UITabs is a flexible tab navigation component that manages active state and renders a visual indicator for the selected tab. It can be used on its own as a tab header controller, or paired with UITabPanel to display conditional tab content.">
+          <div class="font-light text-gray-800 pl-7 my-2">UITabs uses <code>v-model</code> to control the active tab and
+            exposes shared state to child tab panels via Vue’s provide / inject mechanism.</div>
+          <div class="font-light text-gray-800 pl-7">
+            <span class="font-medium text-sky-600">Important:</span>
+            <ul class="list-disc pl-4">
+              <li>
+                UITabs can exist with or without UITabPanel
+              </li>
+              <li>
+                UITabPanel must always be used inside UITabs
+              </li>
+            </ul>
+          </div>
+          <DocComponent title="Basic Tabs (Header Only)"
+            caption="Use UITabs by itself when you only need tab navigation and want to control the content manually.">
+            <UITabs v-model="activeTab" />
+            <div class="mt-4">
+              <p v-if="activeTab === 'first'">Tab One Content</p>
+              <p v-else-if="activeTab === 'second'">Tab Two Content</p>
+            </div>
+          </DocComponent>
+          <div class="font-light text-gray-800 pl-7 my-2">UITabPanel represents a single tab and its associated content.
+            It automatically registers itself with the nearest parent UITabs component and renders its slot only when
+            active.</div>
+          <div class="font-light text-gray-800 pl-7">
+            <span class="font-medium text-sky-600">Each panel defines:</span>
+            <ul class="list-disc pl-4">
+              <li>
+                a name (used as the tab identifier)
+              </li>
+              <li>
+                a label (displayed in the tab header)
+              </li>
+            </ul>
+          </div>
+          <div class="font-light text-gray-800 pl-7 my-2">UITabPanel cannot function independently and must be nested
+            inside UITabs.</div>
+          <DocComponent title="Tabs with Panels"
+            caption="Pair UITabs with UITabPanel to automatically render content based on the active tab.">
+            <UITabs v-model="activeTab">
+              <UITabPanel name="first" label="Overview">
+                <p>Overview content goes here.</p>
+              </UITabPanel>
+
+              <UITabPanel name="second" label="Details">
+                <p>Details content goes here.</p>
+              </UITabPanel>
+
+              <UITabPanel name="third" label="Settings">
+                <p>Settings content goes here.</p>
+              </UITabPanel>
+            </UITabs>
+          </DocComponent>
+          <DocComponent title="Default Active Tab" caption="Control which tab is active by default using v-model.">
+            <UITabs v-model="activeTab">
+              <UITabPanel name="first" label="First Tab">
+                <p>This tab is active by default.</p>
+              </UITabPanel>
+              <UITabPanel name="second" label="Second Tab">
+                <p>This tab is inactive.</p>
+              </UITabPanel>
+            </UITabs>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIAccordion" sub-title="Expandable/collapsible content sections.">
+          <DocComponent title="Basic Accordion"
+            caption="A simple accordion with a title and default click-to-toggle behavior.">
+            <UIAccordion title="Basic Accordion">
+              <p>This is the content of the accordion.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Accordion with Caption"
+            caption="Accordion with a subtitle or description under the title.">
+            <UIAccordion title="Accordion with Caption" caption="This is a description">
+              <p>Here is the content of the accordion.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Controlled Expansion (Click Trigger)" caption="Toggle the accordion using click events.">
+            <UIAccordion title="Click to Expand" trigger="click">
+              <p>Click the header to expand or collapse.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Controlled Expansion (Hover Trigger)"
+            caption="xpand the accordion when hovering over the header.">
+            <UIAccordion title="Hover to Expand" trigger="hover">
+              <p>Hover over the header to expand the content.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Default Open" caption="Accordion starts open by default.">
+            <UIAccordion title="Default Open Accordion" defaultOpen>
+              <p>This content is visible when the page loads.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Controlled Accordion (v-model)"
+            caption="Programmatically control open/close state using v-model.">
+            <UIButton @click="isOpen = !isOpen" label="Toggle Accordion" />
+            <UIAccordion v-model="isOpen" title="Controlled Accordion" class="mt-4">
+              <p>The parent component controls whether this accordion is open.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Header Slot" caption="Replace the default header with a custom slot.">
+            <UIAccordion>
+              <template #header>
+                <h3 class="text-blue-600 font-bold">Custom Header</h3>
+                <p class="text-gray-400 text-sm">Custom subtitle here</p>
+              </template>
+              <p>Accordion content with a custom header.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Content Slot"
+            caption="Provide custom content inside the accordion using the default slot.">
+            <UIAccordion title="Custom Content Accordion">
+              <div class="flex flex-col gap-2">
+                <h5 class="text-2xl font-semibold text-sky-400">Header inside accordion</h5>
+                <p class="text-gray-700">Paragraph inside accordion</p>
+                <ul class="list-disc pl-4 text-gray-800">
+                  <li>List item A</li>
+                  <li>List item B</li>
+                </ul>
+              </div>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Toggle Position" caption="Show the chevron on the left or right side of the header.">
+            <UIAccordion title="Toggle Left" toggleSide="left" class="my-2">
+              <p>The chevron icon appears on the left side.</p>
+            </UIAccordion>
+            <UIAccordion title="Toggle Right" toggleSide="right" class="my-2">
+              <p>The chevron icon appears on the right side.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Dense Mode" caption="A more compact accordion with smaller paddings and text.">
+            <UIAccordion title="Dense Accordion" dense>
+              <p>This accordion uses less padding and smaller text.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="Disabled Accordion" caption="Accordion that cannot be opened or closed.">
+            <UIAccordion title="Disabled Accordion" disabled>
+              <p>This content cannot be toggled because the accordion is disabled.</p>
+            </UIAccordion>
+          </DocComponent>
+          <DocComponent title="No Margin" caption="Accordion content has no extra padding around it.">
+            <UIAccordion title="No Margin Accordion" :margin="false">
+              <p>The content spans edge-to-edge without padding.</p>
+            </UIAccordion>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIStepper" sub-title="Visual representation of a multi-step process.">
+          <DocComponent title="Basic Stepper" caption="Simple horizontal stepper with text labels.">
+            <UIStepper v-model="step" :steps="[
+              'Account',
+              'Profile',
+              'Confirmation',
+            ]" />
+          </DocComponent>
+          <DocComponent title="Vertical Stepper" caption="Display steps vertically for side layouts and forms.">
+            <UIStepper v-model="step" vertical :steps="[
+              'Shipping',
+              'Billing',
+              'Review',
+              'Payment',
+            ]">
+              <template #default="{ step }">
+                <div class="p-4 border rounded-md">
+                  Current Step: {{ step + 1 }}
+                </div>
+              </template>
+            </UIStepper>
+          </DocComponent>
+          <DocComponent title="Stepper With Icons" caption="Use icons to visually represent each step.">
+            <UIStepper v-model="step" :steps="[
+              {
+                label: 'Cart',
+                icon: 'shopping_cart',
+              },
+              {
+                label: 'Delivery',
+                icon: 'local_shipping',
+              },
+              {
+                label: 'Payment',
+                icon: 'payments',
+              },
+              {
+                label: 'Success',
+                icon: 'check_circle',
+              },
+            ]" />
+          </DocComponent>
+          <DocComponent title="Custom Colors" caption="Customize active, completed, and inactive step colors.">
+            <UIStepper v-model="step" active-color="purple-500" completed-color="green-500" inactive-color="gray-200"
+              connector-completed-color="green-500" connector-inactive-color="gray-300" :steps="[
+                'Planning',
+                'Development',
+                'Testing',
+                'Deployment',
+              ]" />
+          </DocComponent>
+          <DocComponent title="Stepper Content Slot" caption="Render dynamic content based on the active step.">
+            <UIStepper v-model="step" :steps="[
+              'Personal Info',
+              'Address',
+              'Review',
+            ]">
+              <template #default="{ step }">
+                <div class="mt-4 border rounded-lg p-4">
+                  <div v-if="step === 0">
+                    Personal information form goes here.
+                  </div>
+
+                  <div v-else-if="step === 1">
+                    Address form goes here.
+                  </div>
+
+                  <div v-else>
+                    Review and submit section.
+                  </div>
+                </div>
+              </template>
+            </UIStepper>
+          </DocComponent>
+          <DocComponent title="Workflow Stepper with Inactive Steps"
+            caption="Useful for indicating upcoming steps in a process while showing some as inactive or disabled.">
+            <UIStepper v-model="step" vertical completed-color="emerald-500" active-color="blue-500" :steps="[
+              {
+                label: 'Draft',
+                icon: 'edit_document',
+              },
+              {
+                label: 'Review',
+                icon: 'rate_review',
+              },
+              {
+                label: 'Approval',
+                icon: 'verified',
+              },
+              {
+                label: 'Published',
+                icon: 'public',
+              },
+            ]" :inactive-steps="[2]" />
+          </DocComponent>
+          <DocComponent title="Checkout Flow" caption="Perfect for ecommerce checkout experiences.">
+            <UIStepper v-model="step" :steps="[
+              {
+                label: 'Cart',
+                icon: 'shopping_bag',
+              },
+              {
+                label: 'Shipping',
+                icon: 'local_shipping',
+              },
+              {
+                label: 'Payment',
+                icon: 'credit_card',
+              },
+              {
+                label: 'Complete',
+                icon: 'task_alt',
+              },
+            ]">
+              <template #default="{ step }">
+                <div class="mt-6 p-4 border rounded-lg">
+                  Active Checkout Step: {{ step + 1 }}
+                </div>
+              </template>
+            </UIStepper>
+          </DocComponent>
+          <DocComponent title="Minimal Stepper" caption="A clean and compact stepper layout.">
+            <UIStepper flat :steps="[
+              'Start',
+              'Setup',
+              'Finish',
+            ]" />
+          </DocComponent>
+          <DocComponent title="Multi-Step Form" caption="Ideal for onboarding and registration flows.">
+            <UIStepper v-model="step" vertical :steps="[
+              'Account Setup',
+              'Personal Details',
+              'Preferences',
+              'Verification',
+              'Completion',
+            ]">
+              <template #default="{ step }">
+                <div class="border rounded-lg p-4 min-h-[120px]">
+                  Step {{ step + 1 }} Content
+                </div>
+              </template>
+            </UIStepper>
+          </DocComponent>
+        </DocSection>
+      </DocMegaSection>
+      <!-- Feedback / Popups -->
+      <DocMegaSection title="Feedback / Popups" sub-title="Notify and guide users effectively.">
+        <DocSection title="UITooltip" sub-title="Hover or focus tooltips for any element.">
+          <DocComponent title="Basic Tooltip"
+            caption="Displays helpful information when the user hovers over an element.">
+            <UITooltip text="Hello world">
+              <button class="btn">Hover me</button>
+            </UITooltip>
+          </DocComponent>
+          <DocComponent title="No Arrow Tooltip"
+            caption="A simplified tooltip without an arrow indicator for a cleaner look.">
+            <UITooltip text="No arrow here" :arrow="false">
+              <span>Hover</span>
+            </UITooltip>
+          </DocComponent>
+          <DocComponent title="Placement"
+            caption="Tooltips can be positioned on the top, right, bottom, or left of the trigger element.">
+            <div class="flex gap-4 items-center">
+              <UITooltip text="On the left" placement="left">
+                <span>Hover</span>
+              </UITooltip>
+              <UITooltip text="On the right" placement="right">
+                <span>Hover</span>
+              </UITooltip>
+              <UITooltip text="At the top" placement="top">
+                <span>Hover</span>
+              </UITooltip>
+              <UITooltip text="On the bottom" placement="bottom">
+                <span>Hover</span>
+              </UITooltip>
+            </div>
+          </DocComponent>
+          <DocComponent title="Custom Colors" caption="Supports both Tailwind utility colors and HEX values.">
+            <div class="flex gap-4">
+              <UITooltip text="Custom tooltip" color="blue-300" textColor="red-800">
+                <UIButton label="Hover" />
+              </UITooltip>
+              <UITooltip text="Tailwind color" color="indigo-500">
+                <UIButton label="Hover" />
+              </UITooltip>
+              <UITooltip text="Hex color" color="#e11d48">
+                <UIButton label="Hover" />
+              </UITooltip>
+            </div>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIAlert" sub-title="Modal dialog for confirmations, alerts, or forms.">
+          <DocComponent title="Basic Alert Dialog"
+            caption="Displays a simple dialog to present information or messages to the user.">
+            <UIButton label="Open Alert" @click="dialogToggle1 = true" />
+            <UIAlert v-model:isOpen="dialogToggle1" title="Welcome" message="This is a basic alert example." />
+          </DocComponent>
+          <DocComponent title="Alert with Custom Content"
+            caption="Use slots to fully customize the alert title, content and confirmation button.">
+            <UIButton label="Open Custom Alert" @click="dialogToggle2 = true" />
+            <UIAlert v-model:isOpen="dialogToggle2" show-confirm-btn>
+              <template #title>
+                <h2 class="text-xl font-semibold text-blue-600">
+                  Custom Title
+                </h2>
+              </template>
+              <template #message>
+                <p class="text-gray-700">
+                  You can place <strong>any content</strong> inside the dialog,
+                  including other components.
+                </p>
+              </template>
+            </UIAlert>
+          </DocComponent>
+        </DocSection>
+        <DocSection title="UIDialog" sub-title="Modal dialog for any content in a centered overlay.">
+          <DocComponent title="Basic Dialog"
+            caption="A simple modal dialog that can be opened and closed programmatically.">
+            <UIButton label="Open Dialog" @click="dialogToggle3 = true" />
+            <UIDialog v-model:isOpen="dialogToggle3">
+              <UICard>
+                <template #header>
+                  <h3 class="text-lg font-semibold">Dialog Title</h3>
+                </template>
+                <div class="grid grid-cols-2 gap-4">
+                  <UIScrollArea class="h-40 w-full">
+                    <p>
+                      This is a basic dialog content area. You can place any content here, including text, forms, or
+                      other
+                      components.
+                    </p>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed
+                      cursus
+                      ante dapibus diam.
+                    </p>
+                    <p>
+                      Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
+                    </p>
+                  </UIScrollArea>
+                  <UIImage
+                    src="https://img.magnific.com/premium-photo/red-yellow-leaf-that-is-reflecting-water-surface_1267893-21099.jpg?semt=ais_hybrid&w=740&q=80"
+                    class="w-32 h-32 object-cover rounded-md" alt="Dialog image" />
+                </div>
+              </UICard>
+            </UIDialog>
+          </DocComponent>
+        </DocSection>
+      </DocMegaSection>
+      <!-- Data Display / Media -->
+      <!-- Card -->
+      <DocSection title="UICard" sub-title="Container with header, body, footer. Supports Tailwind classes.">
+        <DocComponent title="UICard"
+          caption="This variant allows passing custom Tailwind classes for advanced styling needs. Use this when the default appearance needs to be adjusted to match a specific layout.">
+          <UICard bordered>
+            <template #header>
+              <h3 class="text-lg font-semibold">Card title</h3>
+            </template>
+            <p>This is the card content.</p>
+            <template #footer>
+              <div class="flex gap-4">
+                <UIButton flat label="Action 1" />
+                <UIButton flat label="Action 2" />
+              </div>
+            </template>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Basic Card" caption="Default card with border, elevation, and content spacing.">
+          <UICard>
+            <p>This is a basic card with default styling.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Flat Card" caption="Flat cards have no shadow and blend with the background.">
+          <UICard flat>
+            <p>This is a flat card without elevation.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Square Card" caption="Square cards remove border radius for sharp edges.">
+          <UICard square>
+            <p>This card has no border radius.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Dense Card" caption="Dense cards remove inner padding for compact layouts.">
+          <UICard dense>
+            <p>This card has no inner padding.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Border Color" caption="Change the card border color using Tailwind or hex values.">
+          <UICard bordered borderColor="blue-500">
+            <p>This card uses a Tailwind border color.</p>
+          </UICard>
+          <UICard bordered borderColor="#22c55e" class="mt-4">
+            <p>This card uses a hex border color.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Background Color" caption="Apply background colors using Tailwind classes or hex values.">
+          <UICard color="gray-100">
+            <p>This card has a Tailwind background color.</p>
+          </UICard>
+          <UICard color="#fef3c7" class="mt-4">
+            <p>This card has a hex background color.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Media Card (Image)" caption="Media content can be placed inside the default slot.">
+          <UICard bordered>
+            <img
+              src="https://img.freepik.com/free-photo/wet-vietnam-mountain-flow-stream-rural_1417-1357.jpg?t=st=1770568864~exp=1770572464~hmac=ffd2484ba81a03498d09e075b7d5eebf9509278138ecc069f0e8ddc6080fea8d&w=2000"
+              class="w-full object-cover rounded-md mb-4" alt="Card media" />
+
+            <p>This card displays an image using the default slot.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Media Card (Video)" caption="Videos can also be embedded inside the card content.">
+          <UICard bordered>
+            <div class="relative pb-[56.25%] h-0 overflow-hidden">
+              <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/bDJKs6r___g"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen>
+              </iframe>
+            </div>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Card with Header" caption="Use the header slot to display titles or actions.">
+          <UICard bordered>
+            <template #header>
+              <h3 class="text-lg font-semibold">Card Title</h3>
+            </template>
+            <p>This card has a header section.</p>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Card with Footer" caption="Use the footer slot for supplementary content.">
+          <UICard bordered>
+            <p>This card contains footer content.</p>
+            <template #footer>
+              <span class="text-sm text-gray-500">
+                Last updated 2 days ago
+              </span>
+            </template>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Card Actions (Horizontal)" caption="Actions aligned horizontally in the footer.">
+          <UICard bordered>
+            <p>Card with horizontal actions.</p>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UIButton flat label="Cancel" />
+                <UIButton label="Confirm" />
+              </div>
+            </template>
+          </UICard>
+        </DocComponent>
+        <DocComponent title="Card Actions (Vertical)" caption="Actions stacked vertically for narrow layouts.">
+          <UICard bordered>
+            <p>Card with vertical actions.</p>
+            <template #footer>
+              <div class="flex flex-col gap-2 w-32">
+                <UIButton label="Primary Action" />
+                <UIButton flat label="Secondary Action" />
+              </div>
+            </template>
+          </UICard>
+        </DocComponent>
+      </DocSection>
+      <!-- Dropdown -->
+      <DocSection title="UIDropdown" sub-title="Dropdown menu for actions, settings, or navigation links.">
+        <DocComponent title="Basic Dropdown" caption="Simple dropdown with trigger and menu slots.">
+          <UIDropdown>
+            <template #trigger>
+              <button class="px-4 py-2 bg-blue-500 text-white rounded-md">
+                Open Menu
+              </button>
+            </template>
+            <template #menu>
+              <div class="flex flex-col gap-1">
+                <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                  Profile
+                </button>
+
+                <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                  Settings
+                </button>
+
+                <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                  Logout
+                </button>
+              </div>
+            </template>
+          </UIDropdown>
+        </DocComponent>
+        <DocComponent title="Right Aligned Dropdown" caption="Align the dropdown menu to the right side.">
+          <UIDropdown align="right">
+            <template #trigger>
+              <button class="px-4 py-2 bg-purple-500 text-white rounded-md">
+                Right Menu
+              </button>
+            </template>
+            <template #menu>
+              <div class="flex flex-col gap-1">
+                <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                  Dashboard
+                </button>
+
+                <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                  Billing
+                </button>
+              </div>
+            </template>
+          </UIDropdown>
+        </DocComponent>
+        <DocComponent title="Custom Width" caption="Control dropdown width using Tailwind width utilities.">
+          <div class="flex gap-6">
+            <UIDropdown width="w-40">
+              <template #trigger>
+                <button class="px-4 py-2 bg-gray-800 text-white rounded-md">
+                  Small
+                </button>
+              </template>
+              <template #menu>
+                <div class="p-2">
+                  Small width dropdown
+                </div>
+              </template>
+            </UIDropdown>
+            <UIDropdown width="w-72">
+              <template #trigger>
+                <button class="px-4 py-2 bg-gray-800 text-white rounded-md">
+                  Large
+                </button>
+              </template>
+              <template #menu>
+                <div class="p-2">
+                  Large width dropdown
+                </div>
+              </template>
+            </UIDropdown>
+          </div>
+        </DocComponent>
+        <DocComponent title="Rounded Variants" caption="Different rounded styles for the dropdown.">
+          <div class="flex flex-wrap gap-6">
+            <UIDropdown rounded="none">
+              <template #trigger>
+                <button class="px-4 py-2 bg-slate-700 text-white rounded">
+                  None
+                </button>
+              </template>
+
+              <template #menu>
+                <div>Rounded None</div>
+              </template>
+            </UIDropdown>
+
+            <UIDropdown rounded="md">
+              <template #trigger>
+                <button class="px-4 py-2 bg-slate-700 text-white rounded">
+                  Medium
+                </button>
+              </template>
+
+              <template #menu>
+                <div>Rounded MD</div>
+              </template>
+            </UIDropdown>
+
+            <UIDropdown rounded="xl">
+              <template #trigger>
+                <button class="px-4 py-2 bg-slate-700 text-white rounded">
+                  XL
+                </button>
+              </template>
+
+              <template #menu>
+                <div>Rounded XL</div>
+              </template>
+            </UIDropdown>
+          </div>
+        </DocComponent>
+        <DocComponent title="Flat Dropdown" caption="Remove dropdown shadow using the flat prop.">
+          <UIDropdown flat bordered>
+            <template #trigger>
+              <button class="px-4 py-2 bg-emerald-500 text-white rounded-md">
+                Flat Dropdown
+              </button>
+            </template>
+
+            <template #menu>
+              <div class="flex flex-col gap-1">
+                <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                  Item One
+                </button>
+
+                <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                  Item Two
+                </button>
+              </div>
+            </template>
+          </UIDropdown>
+        </DocComponent>
+        <DocComponent title="Bordered Dropdown" caption="Add borders using bordered and borderColor props.">
+          <div class="flex flex-wrap gap-6">
+            <UIDropdown bordered border-color="blue-300">
+              <template #trigger>
+                <button class="px-4 py-2 bg-blue-500 text-white rounded-md">
+                  Tailwind Border
+                </button>
+              </template>
+
+              <template #menu>
+                <div>
+                  Blue border dropdown
+                </div>
+              </template>
+            </UIDropdown>
+
+            <UIDropdown bordered border-color="#22c55e">
+              <template #trigger>
+                <button class="px-4 py-2 bg-green-500 text-white rounded-md">
+                  Hex Border
+                </button>
+              </template>
+
+              <template #menu>
+                <div>
+                  Hex border dropdown
+                </div>
+              </template>
+            </UIDropdown>
+          </div>
+        </DocComponent>
+        <DocComponent title="Custom Background" caption="Customize the dropdown menu background.">
+          <UIDropdown menu-bg-class="bg-slate-900 text-white">
+            <template #trigger>
+              <button class="px-4 py-2 bg-slate-900 text-white rounded-md">
+                Dark Menu
+              </button>
+            </template>
+
+            <template #menu>
+              <div class="flex flex-col gap-2">
+                <button class="px-3 py-2 rounded hover:bg-slate-800 text-left">
+                  Analytics
+                </button>
+
+                <button class="px-3 py-2 rounded hover:bg-slate-800 text-left">
+                  Reports
+                </button>
+              </div>
+            </template>
+          </UIDropdown>
+        </DocComponent>
+        <DocComponent title="Complex Menu" caption="Dropdown menus can contain rich custom content.">
+          <UIDropdown width="w-80" rounded="xl" bordered>
+            <template #trigger>
+              <button class="px-4 py-2 bg-indigo-500 text-white rounded-md">
+                User Menu
+              </button>
+            </template>
+            <template #menu>
+              <div class="space-y-4">
+                <div class="flex items-center gap-3">
+                  <div class="w-10 h-10 rounded-full bg-indigo-500 text-white flex items-center justify-center">
+                    JD
+                  </div>
+
+                  <div>
+                    <div class="font-medium">
+                      John Doe
+                    </div>
+
+                    <div class="text-sm text-gray-500">
+                      john@example.com
+                    </div>
+                  </div>
+                </div>
+
+                <div class="border-t pt-3 flex flex-col gap-1">
+                  <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                    Account Settings
+                  </button>
+
+                  <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                    Team Members
+                  </button>
+
+                  <button class="px-3 py-2 rounded hover:bg-red-100 text-red-500 text-left">
+                    Logout
+                  </button>
+                </div>
+              </div>
+            </template>
+          </UIDropdown>
+        </DocComponent>
+      </DocSection>
+      <!-- Drawer -->
+      <DocSection title="UIDrawer"
+        sub-title="Flexible sliding drawer component for side panels, menus, and modal-style content.">
+        <DocComponent title="Basic Drawer" caption="A simple drawer that slides in from the side with overlay support.">
+          <button class="px-4 py-2 bg-black text-white rounded-lg" @click="drawerToggle.basic = true"> Open Drawer
+          </button>
+          <UIDrawer :isOpen="drawerToggle.basic" @close="drawerToggle.basic = false">
+            <h2 class="text-xl font-semibold mb-4"> Drawer Content </h2>
+            <p> This is a basic drawer component. </p>
+          </UIDrawer>
+        </DocComponent>
+        <DocComponent title="Left Drawer"
+          caption="Display the drawer from the left side instead of the default right placement.">
+          <button class="px-4 py-2 bg-black text-white rounded-lg" @click="drawerToggle.left = true"> Open Drawer in
+            Left
+          </button>
+          <UIDrawer :isOpen="drawerToggle.left" direction="left" @close="drawerToggle.left = false">
+            <h2 class="text-xl font-semibold mb-4"> Drawer Content </h2>
+            <p> This is a left drawer component. </p>
+          </UIDrawer>
+        </DocComponent>
+        <DocComponent title="Custom Width" caption="Control the drawer width using Tailwind width utility classes.">
+          <button class="px-4 py-2 bg-black text-white rounded-lg" @click="drawerToggle.customWidth = true"> Open Drawer
+            with
+            custom width </button>
+          <UIDrawer :isOpen="drawerToggle.customWidth" width="w-64" @close="drawerToggle.customWidth = false">
+            <h2 class="text-xl font-semibold mb-4"> Drawer Content </h2>
+            <p> This is a drawer component with custom width. </p>
+          </UIDrawer>
+        </DocComponent>
+        <DocComponent title="Custom Background"
+          caption="Apply custom background styles for light and dark themed drawers.">
+          <button class="px-4 py-2 bg-black text-white rounded-lg" @click="drawerToggle.customBg = true"> Open Drawer
+            with
+            Custom Background </button>
+          <UIDrawer :isOpen="drawerToggle.customBg" background="bg-green-200" @close="drawerToggle.customBg = false">
+            <h2 class="text-xl font-semibold mb-4"> Drawer Content </h2>
+            <p> This is a drawer component with custom background. </p>
+          </UIDrawer>
+        </DocComponent>
+      </DocSection>
+      <!-- UI List and ListItem -->
+      <DocMegaSection title="UIList + UIListItem" sub-title="List and list items for grouped content.">
+        <DocSection title="UIList"></DocSection>
+        <DocSection title="UIListItem"></DocSection>
+      </DocMegaSection>
+      <!-- Table-->
+      <DocSection title="UITable" sub-title="Data grid / table with rows, columns, and sorting.">
+        <DocComponent title="Basic Table" caption="A simple table with headers and rows.">
+          <UITable bordered>
+            <tr>
+              <th class="px-4 py-3 text-left">Name</th>
+              <th class="px-4 py-3 text-left">Email</th>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">John Doe</td>
+              <td class="px-4 py-3">john@example.com</td>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">Jane Smith</td>
+              <td class="px-4 py-3">jane@example.com</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Striped Table" caption="Table with alternating row colors for better readability.">
+          <UITable bordered striped>
+            <tr>
+              <th class="px-4 py-3 text-left">Name</th>
+              <th class="px-4 py-3 text-left">Email</th>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">John Doe</td>
+              <td class="px-4 py-3">john@example.com</td>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">Jane Smith</td>
+              <td class="px-4 py-3">jane@example.com</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Dense Table" caption="Table with reduced padding for a more compact layout.">
+          <UITable bordered dense>
+            <tr>
+              <th class="px-4 py-3 text-left">Name</th>
+              <th class="px-4 py-3 text-left">Email</th>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">John Doe</td>
+              <td class="px-4 py-3">john@example.com</td>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">Jane Smith</td>
+              <td class="px-4 py-3">jane@example.com</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Border & Border Color" caption="Customize table borders using border utilities.">
+          <UITable bordered border-color="border-blue-300 dark:border-blue-700">
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Service</th>
+                <th class="px-4 py-3 text-left">Status</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">API</td>
+              <td class="px-4 py-3">Online</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">Database</td>
+              <td class="px-4 py-3">Healthy</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Rounded Table" caption="Apply different rounded styles to the table container.">
+          <UITable bordered rounded="xl">
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Invoice</th>
+                <th class="px-4 py-3 text-left">Amount</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">INV-001</td>
+              <td class="px-4 py-3">$480</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">INV-002</td>
+              <td class="px-4 py-3">$920</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Flat Table" caption="Remove table shadow using the flat prop.">
+          <UITable flat bordered>
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Project</th>
+                <th class="px-4 py-3 text-left">Progress</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">Dashboard</td>
+              <td class="px-4 py-3">80%</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">Mobile App</td>
+              <td class="px-4 py-3">55%</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Horizontal Separators" caption="Display horizontal row separators.">
+          <UITable bordered separator="horizontal">
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Country</th>
+                <th class="px-4 py-3 text-left">Capital</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">Japan</td>
+              <td class="px-4 py-3">Tokyo</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">France</td>
+              <td class="px-4 py-3">Paris</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Vertical Separators" caption="Display separators between columns.">
+          <UITable bordered separator="vertical">
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Name</th>
+                <th class="px-4 py-3 text-left">Department</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">Sarah</td>
+              <td class="px-4 py-3">Engineering</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">David</td>
+              <td class="px-4 py-3">Design</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Cell Separators" caption="Apply borders to every table cell.">
+          <UITable bordered separator="cell">
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Language</th>
+                <th class="px-4 py-3 text-left">Creator</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">JavaScript</td>
+              <td class="px-4 py-3">Brendan Eich</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">Python</td>
+              <td class="px-4 py-3">Guido van Rossum</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="No Separators" caption="Render a clean table without internal separators.">
+          <UITable bordered separator="none">
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Framework</th>
+                <th class="px-4 py-3 text-left">Language</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">Vue</td>
+              <td class="px-4 py-3">JavaScript</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">Laravel</td>
+              <td class="px-4 py-3">PHP</td>
+            </tr>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Header & Footer Slots"
+          caption="Use header and footer slots to fully customize table sections.">
+          <UITable bordered>
+            <template #header>
+              <tr>
+                <th class="px-4 py-3 text-left">Product</th>
+                <th class="px-4 py-3 text-right">Price</th>
+              </tr>
+            </template>
+
+            <tr>
+              <td class="px-4 py-3">Keyboard</td>
+              <td class="px-4 py-3 text-right">$120</td>
+            </tr>
+
+            <tr>
+              <td class="px-4 py-3">Monitor</td>
+              <td class="px-4 py-3 text-right">$300</td>
+            </tr>
+
+            <template #footer>
+              <tr>
+                <td class="px-4 py-3 font-semibold">Total</td>
+                <td class="px-4 py-3 text-right font-semibold">$420</td>
+              </tr>
+            </template>
+          </UITable>
+        </DocComponent>
+        <DocComponent title="Table with Custom Cell Content"
+          caption="Use slots to render custom content inside table cells.">
+          <UITable bordered>
+            <tr>
+              <th class="px-4 py-3 text-left">Name</th>
+              <th class="px-4 py-3 text-left">Email</th>
+              <th class="px-4 py-3 text-left">Actions</th>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">John Doe</td>
+              <td class="px-4 py-3">john@example.com</td>
+              <td class="px-4 py-3">
+                <button class="text-blue-600 hover:underline">Edit</button>
+                <button class="text-red-600 hover:underline">Delete</button>
+              </td>
+            </tr>
+            <tr>
+              <td class="px-4 py-3">Jane Smith</td>
+              <td class="px-4 py-3">jane@example.com</td>
+              <td class="px-4 py-3">
+                <button class="text-blue-600 hover:underline">Edit</button>
+                <button class="text-red-600 hover:underline">Delete</button>
+              </td>
+            </tr>
+          </UITable>
+        </DocComponent>
+      </DocSection>
+      <!-- Scroll Area-->
+      <DocSection title="UIScrollArea" sub-title="Custom scrollable container with hidden native scrollbars.">
+        <DocComponent title="Basic Scroll Area"
+          caption="Creates a vertically scrollable container with a fixed height.">
+          <UIScrollArea height="150px" class="border rounded-md">
+            <div v-for="n in 20" :key="n" class="p-2 border-b">
+              Item {{ n }}
+            </div>
+          </UIScrollArea>
+        </DocComponent>
+
+        <DocComponent title="Horizontal Scroll"
+          caption="Enable horizontal scrolling for content wider than the container.">
+          <UIScrollArea horizontal :vertical="false" height="100px" class="border rounded-md">
+            <div class="flex gap-4 w-max p-4">
+              <UICard v-for="n in 10" :key="n" width="200px">
+                Card {{ n }}
+              </UICard>
+            </div>
+          </UIScrollArea>
+        </DocComponent>
+
+        <DocComponent title="Both Directions" caption="Allows scrolling in both horizontal and vertical directions.">
+          <UIScrollArea horizontal vertical width="300px" height="150px" class="border rounded-md">
+            <div style="width:800px;height:400px">
+              Large Content Area
+            </div>
+          </UIScrollArea>
+        </DocComponent>
+
+        <DocComponent title="Hidden Scrollbar"
+          caption="Useful when scrolling should remain functional without visible scrollbars.">
+          <UIScrollArea hideScrollbar height="150px" class="border rounded-md">
+            <div v-for="n in 20" :key="n" class="p-2">
+              Item {{ n }}
+            </div>
+          </UIScrollArea>
+        </DocComponent>
+
+        <DocComponent title="Custom Styling"
+          caption="Additional Tailwind classes can be applied through the component root.">
+          <UIScrollArea height="150px" class="border-2 border-blue-500 rounded-xl bg-gray-50">
+            <div v-for="n in 15" :key="n" class="p-2">
+              Styled Item {{ n }}
+            </div>
+          </UIScrollArea>
+        </DocComponent>
+      </DocSection>
+      <!-- Image -->
+      <DocSection title="UIImage" sub-title="Image container with optional aspect ratio and rounded corners.">
+        <DocComponent title="Basic Image" caption="Displays an image using the default sizing behavior.">
+          <UIImage src="https://picsum.photos/600/300" alt="Sample image" />
+        </DocComponent>
+
+        <DocComponent title="Custom Dimensions" caption="Control image width and height explicitly.">
+          <UIImage src="https://picsum.photos/600/300" width="300px" height="200px" />
+        </DocComponent>
+
+        <DocComponent title="Tailwind Border Color"
+          caption="Border colors can be provided using Tailwind color utilities.">
+          <UIImage src="https://picsum.photos/600/300" borderType="solid" borderColor="blue-500" />
+        </DocComponent>
+
+        <DocComponent title="Hex Border Color" caption="Hex values are also supported for border styling.">
+          <UIImage src="https://picsum.photos/600/300" borderType="solid" borderColor="#22c55e" />
+        </DocComponent>
+
+        <DocComponent title="Dashed Border" caption="Use dashed borders for alternative visual emphasis.">
+          <UIImage src="https://picsum.photos/600/300" borderType="dashed" borderColor="red-500" />
+        </DocComponent>
+
+        <DocComponent title="Object Contain"
+          caption="Contain mode preserves the full image inside the available space.">
+          <UIImage src="https://picsum.photos/600/300" width="400px" height="250px" fit="contain" class="bg-gray-100" />
+        </DocComponent>
+
+        <DocComponent title="Rounded Image" caption="Tailwind classes can be used to customize appearance.">
+          <UIImage src="https://picsum.photos/300" class="rounded-full shadow-lg" width="200px" height="200px" />
+        </DocComponent>
+
+        <DocComponent title="Placeholder Fallback" caption="Displays a fallback image when loading fails.">
+          <UIImage src="/invalid-image.jpg" placeholder="https://picsum.photos/300" />
+        </DocComponent>
+      </DocSection>
+      <!-- Icon -->
+      <DocSection title="UIIcon" sub-title="Render icons from any supported library.">
+        <DocComponent title="Material Icon" caption="Uses Google's Material Icons library.">
+          <UIIcon name="home" library="material" />
+        </DocComponent>
+
+        <DocComponent title="Material Symbols" caption="Displays icons from Material Symbols.">
+          <UIIcon name="settings" library="material-symbols" />
+        </DocComponent>
+
+        <DocComponent title="Font Awesome" caption="Supports Font Awesome icon classes.">
+          <UIIcon library="fontawesome" name="fa-solid fa-user" />
+        </DocComponent>
+
+        <DocComponent title="Icon Sizes" caption="Icons can be displayed in multiple predefined sizes.">
+          <div class="flex items-center gap-4">
+            <UIIcon name="favorite" size="xs" />
+            <UIIcon name="favorite" size="sm" />
+            <UIIcon name="favorite" size="md" />
+            <UIIcon name="favorite" size="lg" />
+            <UIIcon name="favorite" size="xl" />
+          </div>
+        </DocComponent>
+
+        <DocComponent title="Tailwind Colors" caption="Apply colors using Tailwind utility names.">
+          <div class="flex gap-4">
+            <UIIcon name="favorite" color="red-500" />
+            <UIIcon name="favorite" color="green-500" />
+            <UIIcon name="favorite" color="blue-500" />
+          </div>
+        </DocComponent>
+
+        <DocComponent title="Hex Colors" caption="Custom colors can be supplied using hex values.">
+          <UIIcon name="favorite" color="#9333ea" size="xl" />
+        </DocComponent>
+
+        <DocComponent title="Custom Styling" caption="Tailwind classes can be combined with icon props.">
+          <UIIcon name="star" size="xl" class="rotate-12" color="yellow-500" />
+        </DocComponent>
+      </DocSection>
+      <!-- Avatar -->
+      <DocSection title="UIAvatar" sub-title="Profile image or placeholder icon.">
+        <DocComponent title="Basic UIAvatar"
+          caption="The Basic UIAvatar provides a simple, circular avatar with sensible defaults. Use it when no additional styling, sizing, or customization is required.">
+          <UIAvatar />
+        </DocComponent>
+        <DocComponent title="UIAvatar with Initials"
+          caption="This variant displays user initials when an image is unavailable.It ensures a consistent visual identity while gracefully handling missing avatars.">
+          <UIAvatar initials="JD" />
+        </DocComponent>
+        <DocComponent title="UIAvatar with Image"
+          caption="The image-based UIAvatar displays a user’s profile picture inside a circular container. Use this when a reliable image URL is available for the user.">
+          <UIAvatar image="/doc/avatar.avif" alt-text="John Doe" />
+        </DocComponent>
+        <DocComponent title="UIAvatar Sizes"
+          caption="UIAvatar supports multiple predefined sizes to fit different layouts and densities. Choose the appropriate size based on context, such as lists, cards, or profile headers.">
+          <div class="flex gap-4 items-center">
+            <UIAvatar size="sm" initials="SM" />
+            <UIAvatar size="md" initials="MD" />
+            <UIAvatar size="lg" initials="LG" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIAvatar Colors"
+          caption="UIAvatar supports multiple predefined sizes to fit different layouts and densities. Choose the appropriate size based on context, such as lists, cards, or profile headers.">
+          <div class="flex gap-4 items-center">
+            <UIAvatar initials="BL" color="blue-200" />
+            <UIAvatar initials="GR" color="green-200" />
+            <UIAvatar initials="YL" color="yellow-200" />
+            <UIAvatar initials="PR" color="#dab2ff" />
+            <UIAvatar initials="IG" color="#c6d2ff" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIAvatar Text Colors"
+          caption="UIAvatar supports multiple predefined sizes to fit different layouts and densities. Choose the appropriate size based on context, such as lists, cards, or profile headers.">
+          <div class="flex gap-4 items-center">
+            <UIAvatar initials="BL" color="blue-200" text-color="blue-800" />
+            <UIAvatar initials="GR" color="green-200" text-color="green-800" />
+            <UIAvatar initials="YL" color="yellow-200" text-color="yellow-800" />
+            <UIAvatar initials="PR" color="#dab2ff" text-color="#6e11b0" />
+            <UIAvatar initials="IG" color="#c6d2ff" text-color="#372aac" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIAvatar with Custom Border"
+          caption="This variant allows customizing the avatar’s border color and thickness. It is useful for highlighting users, indicating status, or matching brand themes.">
+          <UIAvatar image="/doc/avatar.avif" border-color="#3b82f6" :border-thickness="3" />
+        </DocComponent>
+      </DocSection>
+      <!-- Badge -->
+      <DocSection title="UIBadge" sub-title="Status indicators or small labels.">
+        <DocComponent title="Basic UIBadge"
+          caption="The Basic UIBadge displays a small indicator used to highlight notifications, counts, or statuses. Use it when you need a simple visual cue without additional customization.">
+          <div class="flex gap-4 items-center">
+            <UIBadge />
+            <UIBadge color="sky-400" />
+            <UIBadge color="lime-400" />
+            <UIBadge color="amber-400" />
+            <UIBadge color="purple-400" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge with Number"
+          caption="This variant displays a numeric value inside the badge, commonly used for unread counts or alerts. It helps users quickly identify quantities that require attention.">
+          <div class="flex gap-4 items-center">
+            <UIBadge content="5" />
+            <UIBadge content="4" color="sky-400" />
+            <UIBadge content="2" color="lime-400" />
+            <UIBadge content="7" color="amber-400" />
+            <UIBadge content="10" color="purple-400" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge with Icon"
+          caption="The icon-based UIBadge displays a Material icon instead of text or numbers. Use this when a symbolic representation is more meaningful than a numeric value.">
+          <div class="flex gap-4 items-center">
+            <UIBadge icon="notifications" />
+            <UIBadge icon="person" color="sky-400" />
+            <UIBadge icon="energy_savings_leaf" content="90%" color="lime-400" />
+            <UIBadge icon="visibility" content="7" color="amber-400" />
+            <UIBadge icon="check" content="10" color="purple-400" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge Sizes"
+          caption="UIBadge supports multiple predefined sizes to fit different UI densities and components. Choose smaller sizes for subtle indicators and larger ones for prominent alerts.">
+          <div class="flex gap-4 items-center">
+            <UIBadge size="xs" content="xs" />
+            <UIBadge size="sm" content="sm" />
+            <UIBadge size="md" content="md" />
+            <UIBadge size="lg" content="lg" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge Rounded"
+          caption="UIBadge supports multiple predefined sizes to fit different UI densities and components. Choose smaller sizes for subtle indicators and larger ones for prominent alerts.">
+          <div class="flex gap-4 items-center">
+            <UIBadge rounded="xs" content="xs" />
+            <UIBadge rounded="sm" content="sm" />
+            <UIBadge rounded="md" content="mg" />
+            <UIBadge rounded="lg" content="lg" />
+            <UIBadge rounded="full" content="full" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge Colors"
+          caption="UIBadge supports multiple color variants to represent different meanings or statuses. Colors can be used to indicate urgency, success, warnings, or neutral information.">
+          <div class="flex gap-4 items-center">
+            <UIBadge color="red-400" content="!" />
+            <UIBadge color="green-400" content="✓" />
+            <UIBadge color="yellow-400" content="!" />
+            <UIBadge color="blue-400" content="i" />
+            <UIBadge color="gray-400" content="0" />
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge Superscript Position"
+          caption="This variant positions the badge as a superscript, typically attached to another UI element. It is commonly used for notification indicators on icons, avatars, or buttons.">
+          <div class="flex gap-4 items-center">
+            <UIBadge content="5">
+              <UIButton flat icon="mail" />
+            </UIBadge>
+            <UIBadge color="amber-500" content="5">
+              <UIButton label="Notification" color="amber-400" />
+            </UIBadge>
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge Visibility Control"
+          caption="UIBadge visibility can be dynamically controlled using the show prop. This is useful for conditionally displaying badges based on application state.">
+          <div class="flex gap-4 items-center">
+            <UIButton label="show/ hide" @click="isOpen = !isOpen" />
+            <UIBadge color="blue-500" content="10" :show="isOpen">
+              <UIButton color="blue-400" icon="notifications" />
+            </UIBadge>
+          </div>
+        </DocComponent>
+        <DocComponent title="UIBadge with Custom Classes"
+          caption="This variant allows passing custom Tailwind classes for advanced styling needs. Use this when the default appearance needs to be adjusted to match a specific layout.">
+          <UIBadge content-class="shadow-md bg-white border border-green-400 text-green-500" content="56">
+            <UIButton color="green-500" icon="mail" />
+          </UIBadge>
+        </DocComponent>
+      </DocSection>
+      <!-- Divider -->
+      <DocSection title="UIDivider" sub-title="Horizontal or vertical separators.">
+        <DocComponent title="Basic Divider" caption="Default horizontal divider.">
+          <div>
+            <p>Above Content</p>
+            <UIDivider class="my-4" />
+            <p>Below Content</p>
+          </div>
+        </DocComponent>
+
+        <DocComponent title="Dashed Divider" caption="Displays a dashed separator.">
+          <UIDivider type="dashed" color="blue-500" />
+        </DocComponent>
+
+        <DocComponent title="Dotted Divider" caption="Displays a dotted separator.">
+          <UIDivider type="dotted" color="green-500" />
+        </DocComponent>
+
+        <DocComponent title="Hex Color" caption="Supports custom hex color values.">
+          <UIDivider color="#f97316" />
+        </DocComponent>
+
+        <DocComponent title="Inset Divider" caption="Inset dividers add horizontal margins.">
+          <UIDivider inset color="gray-400" />
+        </DocComponent>
+
+        <DocComponent title="Thick Divider" caption="Increase divider thickness for stronger visual separation.">
+          <UIDivider thickness="4px" color="purple-500" />
+        </DocComponent>
+
+        <DocComponent title="Vertical Divider" caption="Vertical dividers separate content horizontally.">
+          <div class="flex items-center h-20 gap-4">
+            <span>Left</span>
+
+            <UIDivider vertical color="gray-400" />
+
+            <span>Right</span>
+          </div>
+        </DocComponent>
+
+        <DocComponent title="Content Separator" caption="A common usage pattern between content sections.">
+          <UICard>
+            <p>Section One</p>
+
+            <UIDivider class="my-4" />
+
+            <p>Section Two</p>
+          </UICard>
+        </DocComponent>
+      </DocSection>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import DocSection from "./section.vue";
+import DocMegaSection from "./megaSection.vue";
+import DocComponent from "./component.vue";
+import { ref } from "vue";
+const value = ref("");
+const email = ref("");
+const url = ref("");
+const password = ref("");
+const search = ref("");
+const number = ref(0);
+const telphone = ref(0);
+const date = ref("");
+const datetimeLocal = ref("");
+const month = ref("");
+const week = ref("");
+const time = ref("");
+const color = ref("");
+const range = ref(null);
+const text = ref("");
+const feedback = ref("");
+const toggleInput = ref(false);
+const toggleCustomValue = ref("disable");
+const checked = ref(null);
+const checkedValue = ref(null);
+const radioValue = ref("");
+const countries = [
+  { text: "India", value: "india" },
+  { text: "USA", value: "usa" },
+  { text: "Canada", value: "canada" },
+  { text: "Australia", value: "australia" }
+];
+const frameworks = [
+  { text: "Vue", value: "vue" },
+  { text: "React", value: "react" },
+  { text: "Angular", value: "angular" },
+  { text: "Svelte", value: "svelte" }
+];
+const statuses = [
+  { text: "Active", value: "active" },
+  { text: "Inactive", value: "inactive" }
+];
+const priorities = [
+  { text: "Low", value: "low" },
+  { text: "Medium", value: "medium" },
+  { text: "High", value: "high" }
+];
+const themes = [
+  { text: "Light", value: "light" },
+  { text: "Dark", value: "dark" }
+];
+const cities = [
+  { text: "New York", value: "ny" },
+  { text: "London", value: "london" },
+  { text: "Tokyo", value: "tokyo" },
+  { text: "Singapore", value: "singapore" },
+  { text: "Sydney", value: "sydney" },
+  { text: "Paris", value: "paris" }
+];
+const selectValue = ref("");
+const colorPickerValue = ref("");
+const dateValue = ref("");
+const multiDates = ref("");
+const rangeDates = ref("");
+const dateTime = ref("");
+const disabledWeekends = (date2) => {
+  const d = new Date(date2);
+  return d.getDay() === 0 || d.getDay() === 6;
+};
+const files = ref([]);
+const singleFile = ref([]);
+const multipleFiles = ref([]);
+const disable = ref(true);
+const isOpen = ref(false);
+const dialogToggle1 = ref(false);
+const dialogToggle2 = ref(false);
+const dialogToggle3 = ref(false);
+const drawerToggle = ref({
+  basic: false,
+  left: false,
+  customWidth: false,
+  customBg: false,
+  withContent: false
+});
+const activeTab = ref("first");
+const basicBreadcrumbs = ref([
+  {
+    label: "Home"
+  },
+  {
+    label: "Products"
+  },
+  {
+    label: "Shoes"
+  }
+]);
+const iconBreadcrumbs = ref([
+  {
+    icon: "home"
+  },
+  {
+    icon: "category"
+  },
+  {
+    icon: "umbrella"
+  }
+]);
+const breadcrumbs = ref([
+  {
+    label: "Home",
+    icon: "home",
+    to: "#"
+  },
+  {
+    label: "Products",
+    to: "#",
+    caption: "All items"
+  },
+  {
+    label: "Shoes",
+    to: "#",
+    caption: "Current page"
+  }
+]);
+const step = ref(0);
+</script>
+
+<style scoped>
+table td,table th{vertical-align:top}
+</style>