@indielayer/ui 1.16.0 → 1.18.0

package/docs/pages/component/virtualList/dynamicHeight.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { XVirtualList, useDynamicRowHeight } from '@indielayer/ui'
+
+const loremTexts = [
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+  'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
+  'Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.',
+  'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.',
+  'Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.',
+  'Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.',
+  'Lorem ipsum dolor sit amet.',
+  'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.',
+]
+
+const items = Array.from({ length: 1000 }, (_, i) => ({
+  id: i,
+  text: loremTexts[i % loremTexts.length],
+}))
+
+const collapsedRows = ref<Set<number>>(new Set())
+
+const toggleRow = (index: number) => {
+  const newSet = new Set(collapsedRows.value)
+
+  if (newSet.has(index)) {
+    newSet.delete(index)
+  } else {
+    newSet.add(index)
+  }
+  collapsedRows.value = newSet
+}
+
+const isRowCollapsed = (index: number) => {
+  return collapsedRows.value.has(index)
+}
+
+const getText = (index: number) => {
+  return items[index].text
+}
+
+const rowHeight = useDynamicRowHeight({
+  defaultRowHeight: 50,
+})
+</script>
+
+<template>
+  <x-virtual-list
+    :row-count="items.length"
+    :row-height="rowHeight"
+    style="height: 500px; border: 1px solid #ccc;"
+  >
+    <template #row="{ index, style }">
+      <div
+        :style="style"
+        :class="[
+          'flex items-start py-3 px-4 border-b border-gray-200 cursor-pointer transition-colors gap-2',
+          index % 2 === 0 ? 'bg-white' : 'bg-gray-50',
+          'hover:bg-gray-200',
+          isRowCollapsed(index) ? 'whitespace-nowrap overflow-hidden text-ellipsis' : ''
+        ]"
+        @click="toggleRow(index)"
+      >
+        <span class="flex-shrink-0 w-6 h-6 inline-flex items-center justify-center text-sm">
+          {{ isRowCollapsed(index) ? '➕' : '➖' }}
+        </span>
+        <span class="flex-1 leading-normal">
+          <strong class="text-gray-700 mr-2">{{ index }}:</strong>{{ getText(index) }}
+        </span>
+      </div>
+    </template>
+  </x-virtual-list>
+</template>

package/docs/pages/component/virtualList/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XVirtualList } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import DynamicHeightDemoCode from './dynamicHeight.vue?raw'
+import DynamicHeightDemo from './dynamicHeight.vue'
+
+const title = 'VirtualList'
+const description = 'VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.'
+const components = [XVirtualList]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Dynamic Height',
+  description: '',
+  code: DynamicHeightDemoCode,
+  component: DynamicHeightDemo,
+}]
+const back = ''
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/virtualList"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/virtualList/usage.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const listItems = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`)
+</script>
+
+<template>
+  <x-virtual-list
+    :row-count="listItems.length"
+    :row-height="48"
+    class="h-96 border border-gray-200 rounded-md bg-white"
+  >
+    <template #row="{ index, style }">
+      <div :style="style" class="h-12 flex items-center justify-center border-b border-gray-200">
+        {{ listItems[index] }}
+      </div>
+    </template>
+  </x-virtual-list>
+</template>

package/docs/pages/error.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="text-center px-8 py-20">
-    <img class="mb-5 mx-auto max-w-80 max-h-80" src="../assets/images/error.svg" />
-    <h2 class="text-h3">Page not found</h2>
+  <div class="docs-container text-center px-8 py-20">
+    <img class="mb-5 mx-auto max-w-80 max-h-80" src="../assets/images/error.svg" alt="" />
+    <h1 class="text-h2 mb-2">Page not found</h1>
+    <p class="text-gray-500 dark:text-gray-400 mb-8">The page you are looking for does not exist.</p>
+    <x-button to="/getting-started" color="primary">Back to docs</x-button>
   </div>
 </template>

package/docs/pages/icons.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import { useDocMeta } from '../composables/useDocMeta'
+
+useDocMeta({
+  title: 'Icons',
+  description: 'Custom icon set integration for Indielayer UI components.',
+  path: '/icons',
+})
+
 const iconExample = `// icons.js
 export default {
   check: '<polyline points="20 6 9 17 4 12"></polyline>'
@@ -35,64 +43,66 @@ const iconExample2 = `<template>
 </script>
 
 <template>
-  <h2 class="text-4xl font-semibold">Icons</h2>
-  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</h1>
-  <x-divider class="mt-4 mb-8"/>
+  <div class="docs-container">
+    <h2 class="text-4xl font-semibold">Icons</h2>
+    <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</h1>
+    <x-divider class="mt-4 mb-8"/>
 
-  <p class="text-xl mt-8 my-4">SVG Icon Libraries</p>
-  <div class="font-bold text-lg">
-    <ul>
-      <li><x-link
-        external
-        color="sky"
-        underline
-        href="https://icones.js.org/"
-        target="_blank"
-      >Icônes - All the libraries</x-link></li>
-      <li><x-link
-        external
-        color="sky"
-        underline
-        href="https://heroicons.com/"
-        target="_blank"
-      >Hero Icons (MIT)</x-link></li>
-      <li><x-link
-        external
-        color="sky"
-        underline
-        href="https://tabler-icons.io/"
-        target="_blank"
-      >Tabler Icons (MIT)</x-link></li>
-      <li><x-link
-        external
-        color="sky"
-        underline
-        href="https://feathericons.com/"
-        target="_blank"
-      >Feather Icons (MIT)</x-link></li>
-    </ul>
-  </div>
+    <p class="text-xl mt-8 my-4">SVG Icon Libraries</p>
+    <div class="font-bold text-lg">
+      <ul>
+        <li><x-link
+          external
+          color="sky"
+          underline
+          href="https://icones.js.org/"
+          target="_blank"
+        >Icônes - All the libraries</x-link></li>
+        <li><x-link
+          external
+          color="sky"
+          underline
+          href="https://heroicons.com/"
+          target="_blank"
+        >Hero Icons (MIT)</x-link></li>
+        <li><x-link
+          external
+          color="sky"
+          underline
+          href="https://tabler-icons.io/"
+          target="_blank"
+        >Tabler Icons (MIT)</x-link></li>
+        <li><x-link
+          external
+          color="sky"
+          underline
+          href="https://feathericons.com/"
+          target="_blank"
+        >Feather Icons (MIT)</x-link></li>
+      </ul>
+    </div>
 
-  <h3 class="text-2xl mt-8 mb-4">1. Create the icons file -> <strong>icons.js</strong></h3>
-  <code-snippet
-    lang="js"
-    :code="iconExample"
-  />
+    <h3 class="text-2xl mt-8 mb-4">1. Create the icons file -> <strong>icons.js</strong></h3>
+    <code-snippet
+      lang="js"
+      :code="iconExample"
+    />
 
-  <h3 class="text-2xl mt-8 mb-4">2. Add icons on UI install options -> <strong>main.js</strong></h3>
-  <code-snippet
-    lang="js"
-    :code="installExample"
-  />
+    <h3 class="text-2xl mt-8 mb-4">2. Add icons on UI install options -> <strong>main.js</strong></h3>
+    <code-snippet
+      lang="js"
+      :code="installExample"
+    />
 
-  <h3 class="text-2xl mt-8 mb-4">3. Add icons from open source libraries</h3>
-  <p class="mb-2 text-xl">Start adding the icons you need.</p>
-  <p class="mb-2">SVG wrapper optional, copy only the content part of the SVG:</p>
-  <p class="mb-4 border dark:border-gray-600 rounded-md p-4">&#x3C;svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; width=&#x22;24&#x22; height=&#x22;24&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;2&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; class=&#x22;feather feather-check&#x22;&#x3E;<strong>&#x3C;polyline points=&#x22;20 6 9 17 4 12&#x22;&#x3E;&#x3C;/polyline&#x3E;</strong>&#x3C;/svg&#x3E;</p>
-  <code-snippet lang="js" :code="iconExample1"/>
+    <h3 class="text-2xl mt-8 mb-4">3. Add icons from open source libraries</h3>
+    <p class="mb-2 text-xl">Start adding the icons you need.</p>
+    <p class="mb-2">SVG wrapper optional, copy only the content part of the SVG:</p>
+    <p class="mb-4 border dark:border-gray-600 rounded-md p-4">&#x3C;svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; width=&#x22;24&#x22; height=&#x22;24&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22; stroke=&#x22;currentColor&#x22; stroke-width=&#x22;2&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; class=&#x22;feather feather-check&#x22;&#x3E;<strong>&#x3C;polyline points=&#x22;20 6 9 17 4 12&#x22;&#x3E;&#x3C;/polyline&#x3E;</strong>&#x3C;/svg&#x3E;</p>
+    <code-snippet lang="js" :code="iconExample1"/>
 
-  <div class="my-4">
-    Icon "check" <x-icon icon="check"/>
+    <div class="my-4">
+      Icon "check" <x-icon icon="check"/>
+    </div>
+    <code-snippet lang="js" :code="iconExample2"/>
   </div>
-  <code-snippet lang="js" :code="iconExample2"/>
 </template>

package/docs/pages/index.vue

@@ -1,57 +1,73 @@
+<script setup lang="ts">
+import DocsHero from '../components/common/DocsHero.vue'
+import DocsFeatures from '../components/common/DocsFeatures.vue'
+import { useDocMeta } from '../composables/useDocMeta'
+
+useDocMeta({
+  title: 'Indielayer UI',
+  description: 'Tailwind CSS UI components for Vue.js 3 and Nuxt.js 3. Build and prototype fast web applications.',
+  path: '/getting-started',
+})
+</script>
+
 <template>
-  <h2 class="text-4xl font-semibold">Getting Started</h2>
-  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.</h1>
-  <x-divider class="mt-4 mb-8"/>
+  <docs-hero />
+  <docs-features />
+
+  <div class="docs-container">
+    <section id="installation">
+      <h2 class="text-h3 mb-2">Getting started</h2>
+      <p class="text-gray-500 dark:text-gray-400 mb-8">
+        Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.
+      </p>
 
-  <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
-  <p class="my-4">
-    This following command will install and execute <x-link
-      external
-      href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
-      target="_blank"
-      shadow
-      color="primary"
-    >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
-  </p>
-  <code-snippet :code="`npm init @indielayer/ui`" lang="bash"/>
-  <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
+      <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
+      <p class="my-4">
+        This following command will install and execute <x-link
+          external
+          href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
+          target="_blank"
+          shadow
+          color="primary"
+        >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
+      </p>
+      <code-snippet :code="`pnpm create @indielayer/ui`" lang="bash"/>
+      <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
 ❯   Vue 3
     Nuxt 3</pre>
 
-  <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
-  <h3 class="text-2xl mb-4">1. Install via package manager</h3>
-  <multi-snippet
-    :snippets="[{
-      label: 'npm',
-      lang: 'bash',
-      code: 'npm install @indielayer/ui'
-    }, {
-      label: 'yarn',
-      lang: 'bash',
-      code: 'yarn add @indielayer/ui'
-    }, {
-      label: 'pnpm',
-      lang: 'bash',
-      code: 'pnpm add @indielayer/ui'
-    }]"
-  />
+      <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
+      <h3 class="text-2xl mb-4">1. Install via package manager</h3>
+      <multi-snippet
+        :snippets="[{
+          label: 'npm',
+          lang: 'bash',
+          code: 'npm install @indielayer/ui'
+        }, {
+          label: 'yarn',
+          lang: 'bash',
+          code: 'yarn add @indielayer/ui'
+        }, {
+          label: 'pnpm',
+          lang: 'bash',
+          code: 'pnpm add @indielayer/ui'
+        }]"
+      />
 
-  <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
-  <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
-  <p class="my-4">
-    Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
-  </p>
-  <code-snippet
-    lang="js"
-    :code="`// tailwind.config.js
+      <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
+      <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
+      <p class="my-4">
+        Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
+      </p>
+      <code-snippet
+        lang="js"
+        :code="`// tailwind.config.js
 const colors = require('tailwindcss/colors')
 const indielayer = require('@indielayer/ui/tailwind.preset')
 
 module.exports = {
   darkMode: 'class',
-  // load indielayer ui presets
   presets: [indielayer()],
-  // allow PurgeCSS to analyze components
   content: [
     './index.html',
     './**/*.vue',
@@ -71,12 +87,12 @@ module.exports = {
   },
   plugins: [],
 }`"
-  />
-  <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
-  <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
-  <code-snippet
-    lang="js"
-    :code="`import { createApp } from 'vue'
+      />
+      <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
+      <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
+      <code-snippet
+        lang="js"
+        :code="`import { createApp } from 'vue'
 import UI, { BaseTheme } from '@indielayer/ui'
 
 const app = createApp(App)
@@ -84,38 +100,31 @@ const app = createApp(App)
 app.use(UI, {
   theme: BaseTheme,
 })`"
-  />
-  <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
-  <multi-snippet
-    class="my-4"
-    :snippets="[{
-      label: 'npm',
-      lang: 'bash',
-      code: 'npm install @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
-    }, {
-      label: 'yarn',
-      lang: 'bash',
-      code: 'yarn add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
-    }, {
-      label: 'pnpm',
-      lang: 'bash',
-      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
-    }]"
-  />
-  <code-snippet
-    lang="js"
-    :code="`
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
+      />
+      <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
+      <multi-snippet
+        class="my-4"
+        :snippets="[{
+          label: 'npm',
+          lang: 'bash',
+          code: 'npm install @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
+        }, {
+          label: 'yarn',
+          lang: 'bash',
+          code: 'yarn add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
+        }, {
+          label: 'pnpm',
+          lang: 'bash',
+          code: 'pnpm add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
+        }]"
+      />
+      <code-snippet
+        lang="js"
+        :code="`export default defineNuxtConfig({
   modules: [
     ['@indielayer/ui/nuxt'],
   ],
   css: ['~/assets/tailwind.css'],
-  /**
-   * @tailwind base;
-   * @tailwind components;
-   * @tailwind utilities;
-   */
   postcss: {
     plugins: {
       'tailwindcss/nesting': {},
@@ -124,11 +133,11 @@ export default defineNuxtConfig({
     },
   },
 })`"
-  />
-  <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
-  <code-snippet
-    lang="js"
-    :code="`import { createApp } from 'vue'
+      />
+      <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
+      <code-snippet
+        lang="js"
+        :code="`import { createApp } from 'vue'
 import { createUI, BaseTheme, XButton, XAlert } from '@indielayer/ui'
 
 const app = createApp(App)
@@ -139,5 +148,7 @@ const UI = createUI({
 })
 
 app.use(UI)`"
-  />
+      />
+    </section>
+  </div>
 </template>

package/docs/pages/typography.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import { useDocMeta } from '../composables/useDocMeta'
+
+useDocMeta({
+  title: 'Typography',
+  description: 'Type scale and typography utilities used across Indielayer UI.',
+  path: '/typography',
+})
+
 const textClasses = {
   'text-xs': {
     size: '0.75rem',
@@ -57,37 +65,39 @@ const textClasses = {
 </script>
 
 <template>
-  <h1 class="text-4xl font-semibold">Typography</h1>
-  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
+  <div class="docs-container">
+    <h1 class="text-4xl font-semibold">Typography</h1>
+    <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
 
-  <x-divider class="mt-4 mb-8"/>
+    <x-divider class="mt-4 mb-8"/>
 
-  <div>
-    <div>Main font</div>
-    <div class="text-gray-500 dark:text-gray-400">Inter</div>
-    <div class="text-6xl mt-4">AaBbCc</div>
-  </div>
+    <div>
+      <div>Main font</div>
+      <div class="text-gray-500 dark:text-gray-400">Inter</div>
+      <div class="text-6xl mt-4">AaBbCc</div>
+    </div>
 
-  <div class="mt-10">
-    <table class="text-left w-full">
-      <tbody>
-        <tr>
-          <th class="py-2">Class</th>
-          <th>Size</th>
-          <th>Line Height</th>
-          <th>Preview</th>
-        </tr>
-        <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
-          <td class="py-2">{{ key }}</td>
-          <td class="text-secondary-500 font-light">{{ c.size }}</td>
-          <td class="text-secondary-500 font-light">{{ c.line }}</td>
-          <td :class="key" class="max-w-lg truncate">Preview text</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+    <div class="mt-10">
+      <table class="text-left w-full">
+        <tbody>
+          <tr>
+            <th class="py-2">Class</th>
+            <th>Size</th>
+            <th>Line Height</th>
+            <th>Preview</th>
+          </tr>
+          <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
+            <td class="py-2">{{ key }}</td>
+            <td class="text-secondary-500 font-light">{{ c.size }}</td>
+            <td class="text-secondary-500 font-light">{{ c.line }}</td>
+            <td :class="key" class="max-w-lg truncate">Preview text</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-  <div class="text-secondary-500 mt-4">
-    See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
+    <div class="text-secondary-500 mt-4">
+      See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
+    </div>
   </div>
 </template>

package/docs/router/index.ts

@@ -10,6 +10,7 @@ import IconsPage from '../pages/icons.vue'
 import PlayPage from '../pages/play.vue'
 import TypographyPage from '../pages/typography.vue'
 import ColorsPage from '../pages/colors.vue'
+import ErrorPage from '../pages/error.vue'
 
 const pages: Record<string, any> = import.meta.glob('../pages/component/*/index.vue', { eager: true })
 
@@ -59,14 +60,41 @@ const routes: RouteRecordRaw[] = [{
   path: '/play',
   component: PlayPage,
 }, {
-  path: '/:pathMatch(.*)*', name: 'NotFound', redirect: { name: 'getting-started' },
+  path: '/:pathMatch(.*)*',
+  name: 'NotFound',
+  component: ErrorPage,
 }]
 
 const router = createRouter({
-  history: createWebHistory('/'),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
   scrollBehavior(to, from, savedPosition) {
-    document.getElementById('main')?.scrollTo(0, 0)
+    const main = document.getElementById('main')
+
+    if (to.hash) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const el = document.querySelector(to.hash)
+
+          if (el && main) {
+            const top = (el as HTMLElement).offsetTop - 80
+
+            main.scrollTo({ top, behavior: 'smooth' })
+          }
+          resolve({ el: to.hash, behavior: 'smooth', top: 80 })
+        }, 100)
+      })
+    }
+
+    if (savedPosition) {
+      main?.scrollTo(savedPosition)
+
+      return savedPosition
+    }
+
+    main?.scrollTo(0, 0)
+
+    return { top: 0 }
   },
 })