@indielayer/ui 1.17.0 → 1.18.0

package/docs/pages/colors.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useColors, useNotifications, colors as TailwindColors } from '@indielayer/ui'
+import { useDocMeta } from '../composables/useDocMeta'
+
+useDocMeta({
+  title: 'Colors',
+  description: 'Color palette, semantic tokens, and color props on Indielayer UI components.',
+  path: '/colors',
+})
 
 const notifications = useNotifications()
 const { getPalette } = useColors()
@@ -23,44 +30,45 @@ function copyPalette(val: any) {
 </script>
 
 <template>
-  <h1 class="text-4xl font-semibold">Colors</h1>
-  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Generate your own palettes, use Tailwind's or use color prop to generate at runtime</h2>
-  <x-divider class="mt-4 mb-8"/>
-
-  <h2 class="text-2xl mb-2">Generate your own palettes</h2>
-  <p class="mb-8 text-gray-500 dark:text-gray-400">Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.</p>
-  <p class="font-medium"></p>
-  <div class="mt-4">
-    <x-input v-model="color500" label="Change here the middle value (500) to generate a new palette"/>
-  </div>
-  <div class="grid grid-cols-11 my-4 text-sm">
-    <div v-for="shade in Object.keys(palette)" :key="shade" class="h-32 flex items-center justify-center" :style="`background-color: ${palette[shade]}`">{{ shade }}</div>
-  </div>
+  <div class="docs-container">
+    <h1 class="text-4xl font-semibold">Colors</h1>
+    <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Generate your own palettes, use Tailwind's or use color prop to generate at runtime</h2>
+    <x-divider class="mt-4 mb-8"/>
+
+    <h2 class="text-2xl mb-2">Generate your own palettes</h2>
+    <p class="mb-8 text-gray-500 dark:text-gray-400">Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.</p>
+    <p class="font-medium"></p>
+    <div class="mt-4">
+      <x-input v-model="color500" label="Change here the middle value (500) to generate a new palette"/>
+    </div>
+    <div class="grid grid-cols-11 my-4 text-sm">
+      <div v-for="shade in Object.keys(palette)" :key="shade" class="h-32 flex items-center justify-center" :style="`background-color: ${palette[shade]}`">{{ shade }}</div>
+    </div>
 
-  <x-button icon-left="copy" :color="color500" block @click="copyPalette(palette)">Copy Palette</x-button>
+    <x-button icon-left="copy" :color="color500" block @click="copyPalette(palette)">Copy Palette</x-button>
 
-  <p class="text-gray-500 dark:text-gray-400 mt-4">This is the generated palette when you use the color directly on the color prop like &#x3C;x-button <b>color="#10B981"</b>&#x3E;Hello&#x3C;/x-button&#x3E;</p>
+    <p class="text-gray-500 dark:text-gray-400 mt-4">This is the generated palette when you use the color directly on the color prop like &#x3C;x-button <b>color="#10B981"</b>&#x3E;Hello&#x3C;/x-button&#x3E;</p>
 
-  <x-divider class="mt-4 mb-8"/>
+    <x-divider class="mt-4 mb-8"/>
 
-  <h2 class="text-2xl mb-2">Theme colors</h2>
-  <p class="mb-8 text-gray-500 dark:text-gray-400">Default theme color names and how to customize them.</p>
+    <h2 class="text-2xl mb-2">Theme colors</h2>
+    <p class="mb-8 text-gray-500 dark:text-gray-400">Default theme color names and how to customize them.</p>
 
-  <p>The default theme color names are
-    <b class="text-primary-500">primary</b>,
-    <b class="text-secondary-500">secondary</b>,
-    <b class="text-success-500">success</b>,
-    <b class="text-warning-500">warning</b> and
-    <b class="text-error-500">error</b>.
-    You can customize them or even add your own.
-  </p>
+    <p>The default theme color names are
+      <b class="text-primary-500">primary</b>,
+      <b class="text-secondary-500">secondary</b>,
+      <b class="text-success-500">success</b>,
+      <b class="text-warning-500">warning</b> and
+      <b class="text-error-500">error</b>.
+      You can customize them or even add your own.
+    </p>
 
-  <p class="my-4"></p>
+    <p class="my-4"></p>
 
-  <p class="my-2">Customize the color prop, e.g. <b>color="primary"</b> on the UI initialization.</p>
-  <code-snippet
-    lang="js"
-    :code="`import { createApp } from 'vue'
+    <p class="my-2">Customize the color prop, e.g. <b>color="primary"</b> on the UI initialization.</p>
+    <code-snippet
+      lang="js"
+      :code="`import { createApp } from 'vue'
 import UI, { colors } from '@indielayer/ui'
 
 const app = createApp(App)
@@ -76,14 +84,14 @@ app.use(UI, {
     },
   }
 })`"
-  />
+    />
 
-  <p class="my-4">Allow you to use the Tailwind classes like <b>text-primary-500</b>, <b>bg-primary-500</b>, etc:</p>
+    <p class="my-4">Allow you to use the Tailwind classes like <b>text-primary-500</b>, <b>bg-primary-500</b>, etc:</p>
 
-  <div>
-    <code-snippet
-      lang="js"
-      :code="`// tailwind.config.js
+    <div>
+      <code-snippet
+        lang="js"
+        :code="`// tailwind.config.js
 //...
 const colors = require('tailwindcss/colors')
 
@@ -101,19 +109,20 @@ module.exports = {
     },
   },
 }`"
-    />
-  </div>
+      />
+    </div>
 
-  <x-divider class="mt-4 mb-8"/>
+    <x-divider class="mt-4 mb-8"/>
 
-  <h2 class="text-2xl mb-2">Tailwind Colors</h2>
-  <p class="mb-8 text-gray-500 dark:text-gray-400">Default tailwind color palettes.</p>
+    <h2 class="text-2xl mb-2">Tailwind Colors</h2>
+    <p class="mb-8 text-gray-500 dark:text-gray-400">Default tailwind color palettes.</p>
 
-  <div class="grid gap-6 grid-cols-1 md:grid-cols-2 text-xs">
-    <div v-for="(pal, key) in TailwindColors" :key="key">
-      <div class="text-overline mb-2">{{ key }}</div>
-      <div class="grid grid-cols-11">
-        <div v-for="(color, palKey) in pal" :key="palKey" class="h-32 flex items-center justify-center" :style="`background-color: ${color}`">{{ palKey }}</div>
+    <div class="grid gap-6 grid-cols-1 md:grid-cols-2 text-xs">
+      <div v-for="(pal, key) in TailwindColors" :key="key">
+        <div class="text-overline mb-2">{{ key }}</div>
+        <div class="grid grid-cols-11">
+          <div v-for="(color, palKey) in pal" :key="palKey" class="h-32 flex items-center justify-center" :style="`background-color: ${color}`">{{ palKey }}</div>
+        </div>
       </div>
     </div>
   </div>

package/docs/pages/component/select/size.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const selected = ref<undefined | string>()
+const selected = ref<string>()
 const options = ref([
   { value: 'A', label: 'Option A' },
   { value: 'B', label: 'Option B' },

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { SelectOption } from '@indielayer/ui'
 
-const selected = ref<undefined | string>()
-const selected2 = ref<undefined | string>()
-const options = ref([
+const selected = ref<string>()
+const selected2 = ref<string>()
+const options = ref<SelectOption[]>([
   { value: 'A', label: 'Option A' },
   { value: 'B', label: 'Option B' },
   { value: 'C', label: 'Option C' },
@@ -11,16 +12,16 @@ const options = ref([
 
 // function to generate
 function genOptions(x: number) {
-  const options = []
+  const options: SelectOption[] = []
 
   for (let i = 0; i < x; i++) {
-    options.push({ value: i.toString(), label: 'Option ' + i, suffix: i })
+    options.push({ value: i.toString(), label: 'Option ' + i, prefix: 'bg-green-500', suffix: 'dude' + i.toString() })
   }
 
   return options
 }
 
-const options2 = ref(genOptions(1000))
+const options2 = ref<SelectOption[]>(genOptions(1000))
 </script>
 
 <template>
@@ -39,13 +40,18 @@ const options2 = ref(genOptions(1000))
       label="Filterable - virtual list"
       placeholder="Placeholder"
       filterable
+      filterable-prefix
+      filterable-suffix
       clearable
       virtual-list
       :virtual-list-item-height="33"
       :options="options2"
     >
+      <template #prefix="{ item }">
+        <div class="w-2 h-2 shrink-0 rounded-full text-xs" :class="item.prefix"></div>
+      </template>
       <template #suffix="{ item }">
-        <span class="text-secondary-400 text-xs font-mono w-2">#{{ item.suffix }}</span>
+        <span class="text-secondary-400 text-xs font-mono">#{{ item.suffix }}</span>
       </template>
     </x-select>
     <x-select
@@ -57,6 +63,7 @@ const options2 = ref(genOptions(1000))
     >
       <template #input="{ popover, label, disabled }">
         <button
+          type="button"
           class="w-full text-left border rounded-md px-3 py-2"
           :disabled="disabled"
           @click="popover?.show()"

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>