diff --git a/.changeset/few-foxes-cough.md b/.changeset/few-foxes-cough.md
new file mode 100644
index 00000000..f52f4e87
--- /dev/null
+++ b/.changeset/few-foxes-cough.md
@@ -0,0 +1,13 @@
+---
+"@indielayer/ui": minor
+---
+
+fix(tab): update value
+chore: merge documentation inside ui
+feat(tab): add carbon block
+feat(form): add title and description
+fix(tab): dark mode
+feat: add stepper component
+feat(modal): add composed view
+feat: add formgroup component
+feat(checkbox): add indeterminate state
diff --git a/.eslintignore b/.eslintignore
index 62faafc8..33b7007d 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -15,5 +15,4 @@ Thumbs.db
 lib
 packages/ui/lib
 packages/create-ui/outfile.cjs
-packages/docs/dist
 packages/create-ui/templates
diff --git a/.github/workflows/release_canary.yml b/.github/workflows/release_canary.yml
index 64011dcb..1cafbf4f 100644
--- a/.github/workflows/release_canary.yml
+++ b/.github/workflows/release_canary.yml
@@ -48,7 +48,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.P_GITHUB_TOKEN }}
 
       - name: Build
-        run: pnpm run build:ui
+        run: pnpm run build
         if: steps.checkStatus.outcome == 'success'
 
       - name: Publish canary
diff --git a/.github/workflows/update_docs.yml b/.github/workflows/update_docs.yml
index 8b53e25f..d1545a55 100644
--- a/.github/workflows/update_docs.yml
+++ b/.github/workflows/update_docs.yml
@@ -34,10 +34,10 @@ jobs:
       - name: Build documentation
         run: |
           pnpm run build:docs
-          cp ./packages/docs/dist/index.html ./packages/docs/dist/404.html
+          cp ./packages/ui/dist/index.html ./packages/ui/dist/404.html
 
       - name: Update pages
-        working-directory: ./packages/docs/dist
+        working-directory: ./packages/ui/dist
         run: |
           git config --global init.defaultBranch master
           git init
diff --git a/.vscode/launch.json b/.vscode/launch.json
index aefa9070..e9ea97b8 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -6,7 +6,7 @@
       "request": "launch",
       "name": "Debug Docs",
       "webRoot": "${workspaceFolder}",
-      "preLaunchTask": "npm: dev - packages/docs",
+      "preLaunchTask": "npm: dev - packages/ui",
       "postDebugTask": "stop server",
       "url": "http://localhost:3001",
     }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 548a01f5..4a5a6bd2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,7 +4,7 @@
     "pnpm-lock.yaml": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "stylelint.validate": [
     "css",
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 3559cbd0..ae5e6c35 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -4,10 +4,10 @@
     {
       "type": "npm",
       "script": "dev",
-      "path": "packages/docs",
+      "path": "packages/ui",
       "isBackground": true,
       "problemMatcher": [],
-      "label": "npm: dev - packages/docs",
+      "label": "npm: dev - packages/ui",
       "detail": "vite"
     },
     {
diff --git a/LICENSE b/LICENSE
index 0dacd836..e8ccc170 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 - Indielayer
+Copyright (c) 2024 - Indielayer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/package.json b/package.json
index e548a9de..10129119 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,8 @@
   "scripts": {
     "prepare": "is-ci || simple-git-hooks",
     "dev": "cd packages/ui && pnpm dev",
-    "docs": "cd packages/docs && pnpm dev",
     "build": "cd packages/ui && pnpm build:prod",
-    "build:docs": "pnpm build && cd packages/docs && pnpm build",
+    "build:docs": "cd packages/ui && pnpm build:prod && pnpm build:docs",
     "lint": "eslint --ext .js,.ts,.vue .",
     "lint:ui": "eslint --ext .js,.ts,.vue ./packages/ui",
     "lint:style": "cd packages/ui && pnpm run stylelint",
diff --git a/packages/docs/.eslintrc.cjs b/packages/docs/.eslintrc.cjs
deleted file mode 100644
index 55349819..00000000
--- a/packages/docs/.eslintrc.cjs
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-  root: true,
-  extends: [
-    '@indielayer/eslint-config-vue',
-  ],
-  env: {
-    'vue/setup-compiler-macros': true,
-  },
-}
diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore
deleted file mode 100644
index 38adffa6..00000000
--- a/packages/docs/.gitignore
+++ /dev/null
@@ -1,28 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/packages/docs/.stylelintrc.js b/packages/docs/.stylelintrc.js
deleted file mode 100644
index 22c62ffc..00000000
--- a/packages/docs/.stylelintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ['@indielayer/stylelint-config'],
-}
diff --git a/packages/docs/README.md b/packages/docs/README.md
deleted file mode 100644
index 0e70d5aa..00000000
--- a/packages/docs/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-![IndielayerUI-Logo-Dark](../../.github/logo_dark.svg#gh-dark-mode-only)
-![IndielayerUI-Logo-Light](../../.github/logo.svg#gh-light-mode-only)
-
-Vue 3 & Nuxt 3 UI Components built with Tailwind 3. **Build and prototype fast web applications.** 🚀
-
-## 📖 Documentation
-Read the <a href="https://indielayer.com/ui">Online Documentation</a>.
diff --git a/packages/docs/env.d.ts b/packages/docs/env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/packages/docs/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/packages/docs/package.json b/packages/docs/package.json
deleted file mode 100644
index 876b1d50..00000000
--- a/packages/docs/package.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "name": "docs",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview --port 5050",
-    "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore"
-  },
-  "dependencies": {
-    "vue": "^3.3.9",
-    "vue-router": "^4.2.2"
-  },
-  "devDependencies": {
-    "@indielayer/eslint-config-vue": "^3.3.1",
-    "@indielayer/stylelint-config": "^1.0.0",
-    "@indielayer/ui": "workspace:*",
-    "@rushstack/eslint-patch": "^1.3.2",
-    "@tsconfig/node18": "^2.0.1",
-    "@types/node": "^18.16.18",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.43.0",
-    "eslint-plugin-vue": "^9.15.1",
-    "postcss": "^8.4.24",
-    "shiki": "^0.14.3",
-    "tailwindcss": "^3.3.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.11",
-    "vue-tsc": "^1.8.2"
-  }
-}
diff --git a/packages/docs/postcss.config.js b/packages/docs/postcss.config.js
deleted file mode 100644
index fd976518..00000000
--- a/packages/docs/postcss.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// postcss.config.js
-module.exports = {
-  plugins: [
-    require('tailwindcss/nesting'),
-    require('tailwindcss'),
-    require('autoprefixer'),
-  ],
-}
diff --git a/packages/docs/src/components/common/CodeSnippet.vue b/packages/docs/src/components/common/CodeSnippet.vue
deleted file mode 100644
index cb7d7111..00000000
--- a/packages/docs/src/components/common/CodeSnippet.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-import { setCDN, getHighlighter } from 'shiki'
-import theme from './Indielayer-theme.json'
-
-setCDN('/shiki/')
-// // setCDN('/')
-// setCDN('https://cdn.jsdelivr.net/npm/shiki-es@0.10.1/dist/assets/')
-// setCDN(`-`)
-// setCDN('https://unpkg.com/shiki@')
-
-// const t = loadTheme('./Indielayer-theme.json')
-
-const highlighter = getHighlighter({
-  // theme: 'nord',
-  theme: 'indielayer',
-  langs: [{
-    id: 'ts',
-    scopeName: 'source.ts',
-    path: './languages/typescript.tmLanguage.json',
-  }, {
-    id: 'vue-html',
-    scopeName: 'text.html.vue-html',
-    path: './languages/vue-html.tmLanguage.json',
-  }, {
-    id: 'html',
-    scopeName: 'text.html.basic',
-    path: './languages/html.tmLanguage.json',
-  }, {
-    id: 'bash',
-    scopeName: 'source.shell',
-    path: './languages/shellscript.tmLanguage.json',
-  }, {
-    id: 'vue',
-    scopeName: 'source.vue',
-    path: './languages/vue.tmLanguage.json',
-  }, {
-    id: 'js',
-    scopeName: 'source.js',
-    path: './languages/javascript.tmLanguage.json',
-  }],
-})
-
-</script>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-
-const props = defineProps({
-  code: String,
-  lang: {
-    type: String,
-    default: 'vue',
-  },
-  showCopyButton: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const highlighted = ref('')
-
-onMounted(async () => {
-  highlighted.value = (await highlighter).codeToHtml(props.code, { lang: props.lang })
-})
-</script>
-
-<template>
-  <div class="relative">
-    <div v-html="highlighted"></div>
-    <copy-button v-if="showCopyButton" class="!absolute top-2 right-2" :text="code"/>
-  </div>
-</template>
-
-<style lang="postcss">
-.shiki {
-  @apply rounded-md overflow-x-auto p-4 text-sm;
-
-  code { font-family: "Fira Code", monospace; }
-
-  @supports (font-variation-settings: normal) {
-    code { font-family: "Fira Code VF", monospace; }
-  }
-}
-</style>
diff --git a/packages/docs/src/pages/component/collapse/expanded.vue b/packages/docs/src/pages/component/collapse/expanded.vue
deleted file mode 100644
index 8820bf32..00000000
--- a/packages/docs/src/pages/component/collapse/expanded.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <x-collapse expanded show-icon>
-    <template #default="{ collapsed }">
-      <div class="p-2 border dark:border-gray-600">This is collapsed: {{ collapsed }} (click me to {{ collapsed ? 'expand' : 'collapse' }})</div>
-    </template>
-    <template #content>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.
-    </template>
-  </x-collapse>
-</template>
diff --git a/packages/docs/src/pages/component/collapse/index.vue b/packages/docs/src/pages/component/collapse/index.vue
deleted file mode 100644
index e4d30d45..00000000
--- a/packages/docs/src/pages/component/collapse/index.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { XCollapse } from '@indielayer/ui'
-import UsageDemoCode from './usage.vue?raw'
-import UsageDemo from './usage.vue'
-import ExpandedDemoCode from './expanded.vue?raw'
-import ExpandedDemo from './expanded.vue'
-
-const title = 'Collapse'
-const description = 'Collapse is used to show and hide content.'
-const components = [XCollapse]
-const demos = [{
-  name: 'Usage',
-  description: '',
-  code: UsageDemoCode,
-  component: UsageDemo,
-}, {
-  name: 'Expanded',
-  description: '',
-  code: ExpandedDemoCode,
-  component: ExpandedDemo,
-}]
-const back = 'carousel'
-const next = 'container'
-</script>
-
-<template>
-  <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/collapse"
-    :title="title"
-    :description="description"
-    :components="components"
-    :demos="demos"
-    :back="back"
-    :next="next"
-  />
-</template>
diff --git a/packages/docs/src/pages/component/collapse/usage.vue b/packages/docs/src/pages/component/collapse/usage.vue
deleted file mode 100644
index 8eb59660..00000000
--- a/packages/docs/src/pages/component/collapse/usage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <x-collapse icon="heart" show-icon>
-    <div class="p-2 bg-gray-100 dark:bg-gray-600">I'm a collapsible item (click me)</div>
-    <template #content>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.
-    </template>
-  </x-collapse>
-</template>
diff --git a/packages/docs/src/pages/component/form/usage.vue b/packages/docs/src/pages/component/form/usage.vue
deleted file mode 100644
index dd853f43..00000000
--- a/packages/docs/src/pages/component/form/usage.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup>
-import { useNotifications } from '@indielayer/ui'
-import { ref } from 'vue'
-
-const notifications = useNotifications('notifica')
-
-const email = ref('')
-const password = ref('')
-const description = ref('')
-const country = ref('')
-const country2 = ref('')
-const countries = [
-  { label: 'United States', value: 'us' },
-  { label: 'Canada', value: 'ca' },
-  { label: 'Mexico', value: 'mx' },
-]
-const agree = ref(false)
-const rules = {
-  isEmail: (v) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
-  isRequired: (v) => !!v  || 'Field is required',
-}
-
-function onSubmit(isValid) {
-  if (isValid) notifications.success('Valid! Sumitted.')
-  else notifications.error('Invalid! Form has errors')
-}
-</script>
-
-<template>
-  <x-form @submit="onSubmit">
-    <div class="grid grid-cols-2 gap-4">
-      <x-input
-        v-model="email"
-        :rules="[rules.isRequired, rules.isEmail]"
-        name="email"
-        label="Email"
-        placeholder="Enter your email"
-      />
-      <x-input
-        v-model="password"
-        type="password"
-        :rules="[rules.isRequired]"
-        name="password"
-        label="Password"
-        placeholder="Enter your password"
-        helper="Must be between 8 and 10 characters"
-      />
-    </div>
-    <x-textarea
-      v-model="description"
-      name="description"
-      label="Description"
-      placeholder="Description"
-    />
-    <x-select
-      v-model="country"
-      :rules="[rules.isRequired]"
-      :options="countries"
-      native
-      name="country"
-      placeholder="Select a country"
-      label="Country"
-    />
-    <x-select
-      v-model="country2"
-      :rules="[rules.isRequired]"
-      :options="countries"
-      name="country2"
-      placeholder="Select another country"
-      label="Country"
-    />
-    <x-checkbox v-model="agree" :rules="[rules.isRequired]" name="agree" label="Agree with all the terms"/>
-    <x-button block color="primary" type="submit">Submit</x-button>
-  </x-form>
-</template>
diff --git a/packages/docs/src/pages/component/radio/usage.vue b/packages/docs/src/pages/component/radio/usage.vue
deleted file mode 100644
index 77343c36..00000000
--- a/packages/docs/src/pages/component/radio/usage.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="grid grid-cols-4 gap-4">
-    <x-radio v-model="selected" value="a" label="Option A" />
-    <x-radio v-model="selected" value="b" label="Option B" />
-    <x-radio v-model="selected" value="c" label="Option C" />
-    <x-radio v-model="selected" value="d" label="Option D" />
-  </div>
-</template>
-
-<script>
-export default {
-  data() { return { selected: 'a' } },
-}
-</script>
diff --git a/packages/docs/tailwind.config.js b/packages/docs/tailwind.config.js
deleted file mode 100644
index e09c3ac8..00000000
--- a/packages/docs/tailwind.config.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const indielayer = require('@indielayer/ui/tailwind.preset')
-
-module.exports = {
-  content: [
-    '../ui/lib/**/*',
-    './src/**/*.vue',
-    './src/theme.ts',
-  ],
-  darkMode: 'class',
-  presets: [
-    indielayer(),
-  ],
-}
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json
deleted file mode 100644
index a5182ca7..00000000
--- a/packages/docs/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "../ui/volar.d.ts"],
-  // "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "compilerOptions": {
-    "allowJs": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-  },
-  "references": [
-    {
-      "path": "./tsconfig.vite-config.json"
-    }
-  ]
-}
diff --git a/packages/docs/tsconfig.vite-config.json b/packages/docs/tsconfig.vite-config.json
deleted file mode 100644
index 662f137b..00000000
--- a/packages/docs/tsconfig.vite-config.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "@tsconfig/node18/tsconfig.json",
-  "include": ["vite.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node"]
-  }
-}
diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts
deleted file mode 100644
index 2b9b246a..00000000
--- a/packages/docs/vite.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { fileURLToPath, URL } from 'url'
-
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  base: '/ui/',
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
-  server: {
-    port: 3001,
-  },
-})
diff --git a/packages/ui/README.md b/packages/ui/README.md
index b63f1064..20ae86b3 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -31,13 +31,13 @@ npm init @indielayer/ui
 
 ### Documentation
 
-The documentation is located inside [/packages/docs](./packages/docs)
+The documentation is located inside [/packages/ui/docs](./packages/ui/docs)
 
-- Run `pnpm build` once from project root to build the UI library
-- Run `pnpm run docs` from project root to enter docs dev mode
+- Run `pnpm dev` for development
+- Run `pnpm build:docs` from project root to build the documentation
 
 ## License
 
 [MIT](./LICENSE)
 
-Copyright (c) 2023, Indielayer
+Copyright (c) 2024, Indielayer
diff --git a/packages/docs/src/App.vue b/packages/ui/docs/App.vue
similarity index 91%
rename from packages/docs/src/App.vue
rename to packages/ui/docs/App.vue
index a5d64e96..313b320f 100644
--- a/packages/docs/src/App.vue
+++ b/packages/ui/docs/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provide, ref } from 'vue'
 import { RouterView } from 'vue-router'
-import { BaseTheme, CarbonTheme } from '@indielayer/ui'
+import { BaseTheme, CarbonTheme } from '../src'
 
 const lastTheme = localStorage.getItem('THEME') || ''
 
diff --git a/packages/docs/src/assets/css/hljs.css b/packages/ui/docs/assets/css/hljs.css
similarity index 100%
rename from packages/docs/src/assets/css/hljs.css
rename to packages/ui/docs/assets/css/hljs.css
diff --git a/packages/docs/src/assets/css/tailwind.css b/packages/ui/docs/assets/css/tailwind.css
similarity index 100%
rename from packages/docs/src/assets/css/tailwind.css
rename to packages/ui/docs/assets/css/tailwind.css
diff --git a/packages/docs/src/assets/images/error.svg b/packages/ui/docs/assets/images/error.svg
similarity index 100%
rename from packages/docs/src/assets/images/error.svg
rename to packages/ui/docs/assets/images/error.svg
diff --git a/packages/docs/src/assets/images/logo.png b/packages/ui/docs/assets/images/logo.png
similarity index 100%
rename from packages/docs/src/assets/images/logo.png
rename to packages/ui/docs/assets/images/logo.png
diff --git a/packages/docs/src/assets/images/logo_white.png b/packages/ui/docs/assets/images/logo_white.png
similarity index 100%
rename from packages/docs/src/assets/images/logo_white.png
rename to packages/ui/docs/assets/images/logo_white.png
diff --git a/packages/docs/src/components/Cookies.vue b/packages/ui/docs/components/Cookies.vue
similarity index 100%
rename from packages/docs/src/components/Cookies.vue
rename to packages/ui/docs/components/Cookies.vue
diff --git a/packages/docs/src/components/common/CodePreview.vue b/packages/ui/docs/components/common/CodePreview.vue
similarity index 79%
rename from packages/docs/src/components/common/CodePreview.vue
rename to packages/ui/docs/components/common/CodePreview.vue
index 0ea67595..d8c17a37 100644
--- a/packages/docs/src/components/common/CodePreview.vue
+++ b/packages/ui/docs/components/common/CodePreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useNotifications } from '@indielayer/ui'
+import { useNotifications } from '../../../src'
 import { ref } from 'vue'
 
 const props = defineProps({
@@ -24,7 +24,9 @@ function toggleCode() {
   expandedSync.value = !expandedSync.value
 }
 
-function copy(text: string) {
+function copy(text?: string) {
+  if (!text) return
+
   const el = document.createElement('textarea')
 
   el.value = text
@@ -32,7 +34,7 @@ function copy(text: string) {
   el.select()
   document.execCommand('copy')
   document.body.removeChild(el)
-  notifications.success('Copied to clipboard!')
+  notifications?.success('Copied to clipboard!')
 }
 </script>
 
@@ -43,9 +45,13 @@ function copy(text: string) {
       <div class="mr-2 cursor-pointer" @click="toggleCode">{{ title }}</div>
       <x-spacer/>
       <x-tooltip position="top">
-        <x-link :href="`${github}/${title?.toLowerCase()}.vue`" target="blank">
-          <x-button icon="edit" ghost size="sm"/>
-        </x-link>
+        <x-button
+          icon="edit"
+          ghost
+          size="sm"
+          :href="`${github}/${title?.toLowerCase()}.vue`"
+          target="blank"
+        />
         <template #tooltip>
           Edit on <span class="text-gray-300">GitHub</span>
         </template>
@@ -63,12 +69,12 @@ function copy(text: string) {
     </h2>
     <p>{{ description }}</p>
     <slot></slot>
-    <x-collapse ref="codeRef" :expanded="expanded">
+    <x-accordion-item ref="codeRef" :expanded="expanded" :show-icon="false">
       <template #content>
         <div class="mt-4">
           <code-snippet :code="code" :lang="lang" :show-copy-button="false"/>
         </div>
       </template>
-    </x-collapse>
+    </x-accordion-item>
   </div>
 </template>
diff --git a/packages/ui/docs/components/common/CodeSnippet.vue b/packages/ui/docs/components/common/CodeSnippet.vue
new file mode 100644
index 00000000..4c16aa87
--- /dev/null
+++ b/packages/ui/docs/components/common/CodeSnippet.vue
@@ -0,0 +1,49 @@
+<script lang="ts">
+import { getHighlighter } from 'shiki'
+
+const highlighter = getHighlighter({
+  themes: ['github-dark'],
+  langs: ['js', 'ts', 'vue-html', 'bash', 'vue'],
+})
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  code: String,
+  lang: {
+    type: String,
+    default: 'vue',
+  },
+  showCopyButton: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const highlighted = ref('')
+
+onMounted(async () => {
+  highlighted.value = (await highlighter).codeToHtml(props.code, { lang: props.lang, theme: 'github-dark' })
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div v-html="highlighted"></div>
+    <copy-button v-if="showCopyButton" class="!absolute top-2 right-2" :text="code"/>
+  </div>
+</template>
+
+<style lang="postcss">
+.shiki {
+  @apply rounded-md overflow-x-auto p-4 text-sm;
+
+  code { font-family: "Fira Code", monospace; }
+
+  @supports (font-variation-settings: normal) {
+    code { font-family: "Fira Code VF", monospace; }
+  }
+}
+</style>
diff --git a/packages/docs/src/components/common/CopyButton.vue b/packages/ui/docs/components/common/CopyButton.vue
similarity index 94%
rename from packages/docs/src/components/common/CopyButton.vue
rename to packages/ui/docs/components/common/CopyButton.vue
index 25ec46cc..051e3b31 100644
--- a/packages/docs/src/components/common/CopyButton.vue
+++ b/packages/ui/docs/components/common/CopyButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useNotifications } from '@indielayer/ui'
+import { useNotifications } from '../../../src'
 import { onUnmounted, ref } from 'vue'
 
 const props = defineProps({
diff --git a/packages/docs/src/components/common/DocumentPage.vue b/packages/ui/docs/components/common/DocumentPage.vue
similarity index 100%
rename from packages/docs/src/components/common/DocumentPage.vue
rename to packages/ui/docs/components/common/DocumentPage.vue
diff --git a/packages/docs/src/components/common/Indielayer-theme.json b/packages/ui/docs/components/common/Indielayer-theme.json
similarity index 100%
rename from packages/docs/src/components/common/Indielayer-theme.json
rename to packages/ui/docs/components/common/Indielayer-theme.json
diff --git a/packages/docs/src/components/common/MultiSnippet.vue b/packages/ui/docs/components/common/MultiSnippet.vue
similarity index 100%
rename from packages/docs/src/components/common/MultiSnippet.vue
rename to packages/ui/docs/components/common/MultiSnippet.vue
diff --git a/packages/docs/src/components/menu/DocsMenu.vue b/packages/ui/docs/components/menu/DocsMenu.vue
similarity index 93%
rename from packages/docs/src/components/menu/DocsMenu.vue
rename to packages/ui/docs/components/menu/DocsMenu.vue
index f125640a..664fa12b 100644
--- a/packages/docs/src/components/menu/DocsMenu.vue
+++ b/packages/ui/docs/components/menu/DocsMenu.vue
@@ -18,6 +18,7 @@ export default {
             { to: '/component/button', label: 'Button' },
             { to: '/component/checkbox', label: 'Checkbox' },
             { to: '/component/form', label: 'Form' },
+            { to: '/component/formGroup', label: 'Form Group' },
             { to: '/component/input', label: 'Input' },
             { to: '/component/radio', label: 'Radio' },
             { to: '/component/select', label: 'Select' },
@@ -32,13 +33,13 @@ export default {
           collapseIcon: 'chevron-down',
           expanded: true,
           items: [
+            { to: '/component/accordion', label: 'Accordion' },
             { to: '/component/alert', label: 'Alert' },
             { to: '/component/avatar', label: 'Avatar' },
             { to: '/component/badge', label: 'Badge' },
             { to: '/component/breadcrumbs', label: 'Breadcrumbs' },
             { to: '/component/card', label: 'Card' },
             { to: '/component/carousel', label: 'Carousel' },
-            { to: '/component/collapse', label: 'Collapse' },
             { to: '/component/container', label: 'Container' },
             { to: '/component/divider', label: 'Divider' },
             { to: '/component/drawer', label: 'Drawer' },
@@ -54,6 +55,7 @@ export default {
             { to: '/component/progress', label: 'Progress' },
             { to: '/component/skeleton', label: 'Skeleton' },
             { to: '/component/spinner', label: 'Spinner' },
+            { to: '/component/stepper', label: 'Stepper' },
             { to: '/component/table', label: 'Table' },
             { to: '/component/tabs', label: 'Tabs' },
             { to: '/component/tag', label: 'Tag' },
@@ -84,6 +86,7 @@ export default {
       class="m-4"
       color="primary"
       filled
+      @item-click="$emit('close')"
     />
     <x-divider class="px-4"/>
     <div class="title text-overline text-sm font-light ml-6 mt-6 mb-4">Components</div>
@@ -92,6 +95,7 @@ export default {
       class="m-4"
       color="primary"
       filled
+      @item-click="$emit('close')"
     />
   </div>
 </template>
diff --git a/packages/docs/src/components/toolbar/PreToolbar.vue b/packages/ui/docs/components/toolbar/PreToolbar.vue
similarity index 100%
rename from packages/docs/src/components/toolbar/PreToolbar.vue
rename to packages/ui/docs/components/toolbar/PreToolbar.vue
diff --git a/packages/docs/src/components/toolbar/Toolbar.vue b/packages/ui/docs/components/toolbar/Toolbar.vue
similarity index 84%
rename from packages/docs/src/components/toolbar/Toolbar.vue
rename to packages/ui/docs/components/toolbar/Toolbar.vue
index b4b06978..6097098c 100644
--- a/packages/docs/src/components/toolbar/Toolbar.vue
+++ b/packages/ui/docs/components/toolbar/Toolbar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject, ref, unref, watch } from 'vue'
-import { version, type UITheme } from '@indielayer/ui'
+import { version, type UITheme } from '../../../src'
 
 const selectTheme = inject('selectTheme', {
   theme: {} as UITheme,
@@ -25,8 +25,8 @@ watch(selected, (val) => {
   <div class="bg-white dark:bg-secondary-700 px-4">
     <div class="flex justify-items-center items-center py-5">
       <a href="/" class="flex items-start">
-        <img class="logo-dark" src="@/assets/images/logo.png" width="180" alt=""/>
-        <img class="logo-white" src="@/assets/images/logo_white.png" width="180" alt=""/>
+        <img class="logo-dark" src="../../assets/images/logo.png" width="180" alt=""/>
+        <img class="logo-white" src="../../assets/images/logo_white.png" width="180" alt=""/>
         <div class="px-2 text-overline font-bold">UI</div>
       </a>
 
diff --git a/packages/docs/src/components/toolbar/ToolbarColorToggle.vue b/packages/ui/docs/components/toolbar/ToolbarColorToggle.vue
similarity index 100%
rename from packages/docs/src/components/toolbar/ToolbarColorToggle.vue
rename to packages/ui/docs/components/toolbar/ToolbarColorToggle.vue
diff --git a/packages/docs/src/icons.ts b/packages/ui/docs/icons.ts
similarity index 100%
rename from packages/docs/src/icons.ts
rename to packages/ui/docs/icons.ts
diff --git a/packages/docs/src/layouts/default.vue b/packages/ui/docs/layouts/default.vue
similarity index 69%
rename from packages/docs/src/layouts/default.vue
rename to packages/ui/docs/layouts/default.vue
index b8c60a98..be220281 100644
--- a/packages/docs/src/layouts/default.vue
+++ b/packages/ui/docs/layouts/default.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import PreToolbar from '@/components/toolbar/PreToolbar.vue'
-import Toolbar from '@/components/toolbar/Toolbar.vue'
-import Cookies from '@/components/Cookies.vue'
-import DocsMenu from '@/components/menu/DocsMenu.vue'
+import PreToolbar from '../components/toolbar/PreToolbar.vue'
+import Toolbar from '../components/toolbar/Toolbar.vue'
+import Cookies from '../components/Cookies.vue'
+import DocsMenu from '../components/menu/DocsMenu.vue'
 
 const drawer = ref(false)
 </script>
@@ -21,7 +21,7 @@ const drawer = ref(false)
   </div>
   <div class="flex-1 flex overflow-hidden">
     <x-drawer v-model="drawer" breakpoint="lg" width="260" class="border-r flex">
-      <docs-menu class="flex-1" />
+      <docs-menu class="flex-1" @close="drawer = false" />
     </x-drawer>
     <x-notifications inject-key="notifica">
       <router-view class="flex-1 overflow-y-scroll" />
diff --git a/packages/docs/src/layouts/simple.vue b/packages/ui/docs/layouts/simple.vue
similarity index 100%
rename from packages/docs/src/layouts/simple.vue
rename to packages/ui/docs/layouts/simple.vue
diff --git a/packages/docs/src/main.ts b/packages/ui/docs/main.ts
similarity index 93%
rename from packages/docs/src/main.ts
rename to packages/ui/docs/main.ts
index d7885005..e187da78 100644
--- a/packages/docs/src/main.ts
+++ b/packages/ui/docs/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import UI, { BaseTheme, CarbonTheme } from '@indielayer/ui'
+import UI, { BaseTheme, CarbonTheme } from '../src'
 import App from './App.vue'
 import router from './router'
 import icons from './icons'
diff --git a/packages/docs/src/pages/colors.vue b/packages/ui/docs/pages/colors.vue
similarity index 98%
rename from packages/docs/src/pages/colors.vue
rename to packages/ui/docs/pages/colors.vue
index 32466764..4a32b148 100644
--- a/packages/docs/src/pages/colors.vue
+++ b/packages/ui/docs/pages/colors.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useColors, useNotifications, colors as TailwindColors } from '@indielayer/ui'
+import { useColors, useNotifications, colors as TailwindColors } from '../../src'
 
 const notifications = useNotifications('notifica')
 const { getPalette } = useColors()
@@ -63,7 +63,7 @@ function copyPalette(val: any) {
       <code-snippet
         lang="js"
         :code="`import { createApp } from 'vue'
-import UI, { colors } from '@indielayer/ui'
+import UI, { colors } from '../../../../src'
 
 const app = createApp(App)
 
diff --git a/packages/ui/docs/pages/component/accordion/index.vue b/packages/ui/docs/pages/component/accordion/index.vue
new file mode 100644
index 00000000..e0d226e8
--- /dev/null
+++ b/packages/ui/docs/pages/component/accordion/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XAccordion, XAccordionItem } from '../../../../src'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Accordion'
+const description = 'Accordion'
+const components = [XAccordion, XAccordionItem]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'toggle'
+const next = 'alert'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/Accordion"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>
diff --git a/packages/ui/docs/pages/component/accordion/usage.vue b/packages/ui/docs/pages/component/accordion/usage.vue
new file mode 100644
index 00000000..9d812ecf
--- /dev/null
+++ b/packages/ui/docs/pages/component/accordion/usage.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="space-y-8">
+    <x-accordion>
+      <x-accordion-item>
+        Hey
+        <template #content>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.
+        </template>
+      </x-accordion-item>
+
+      <x-accordion-item expanded>
+        <template #default="{ collapsed }">
+          This is collapsed: {{ collapsed }} (click me to {{ collapsed ? 'expand' : 'collapse' }})
+        </template>
+        <template #content>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti veritatis unde natus esse minima, quibusdam nesciunt atque id assumenda inventore numquam vel consectetur est illum ratione perferendis optio architecto sapiente fuga et commodi harum ea? Error doloribus illum tempora obcaecati quam voluptatum cumque magnam nemo, perspiciatis quas mollitia. Aliquid nulla corrupti sit mollitia dolor sequi nobis eveniet cumque cupiditate perspiciatis magnam laudantium in ducimus fuga quaerat, ipsam assumenda consequatur obcaecati atque? Sint asperiores labore quidem minima modi odio autem rerum eligendi, quisquam incidunt quae enim eos vitae dolores praesentium debitis, consequatur fuga hic nostrum, dolorem dicta quod ea assumenda. Expedita.
+        </template>
+      </x-accordion-item>
+    </x-accordion>
+
+    <x-accordion icon-align="left">
+      <x-accordion-item>
+        Left side icon
+        <template #content>
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est, rem.
+        </template>
+      </x-accordion-item>
+    </x-accordion>
+  </div>
+</template>
diff --git a/packages/docs/src/pages/component/alert/index.vue b/packages/ui/docs/pages/component/alert/index.vue
similarity index 86%
rename from packages/docs/src/pages/component/alert/index.vue
rename to packages/ui/docs/pages/component/alert/index.vue
index 380c2e31..ae6104df 100644
--- a/packages/docs/src/pages/component/alert/index.vue
+++ b/packages/ui/docs/pages/component/alert/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XAlert } from '@indielayer/ui'
+import { XAlert } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -12,13 +12,13 @@ const demos = [{
   code: UsageDemoCode,
   component: UsageDemo,
 }]
-const back = 'toggle'
+const back = 'accordion'
 const next = 'avatar'
 </script>
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/alert"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/alert"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/alert/usage.vue b/packages/ui/docs/pages/component/alert/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/alert/usage.vue
rename to packages/ui/docs/pages/component/alert/usage.vue
diff --git a/packages/docs/src/pages/component/avatar/index.vue b/packages/ui/docs/pages/component/avatar/index.vue
similarity index 92%
rename from packages/docs/src/pages/component/avatar/index.vue
rename to packages/ui/docs/pages/component/avatar/index.vue
index 4351bb5d..0ccd01e6 100644
--- a/packages/docs/src/pages/component/avatar/index.vue
+++ b/packages/ui/docs/pages/component/avatar/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XAvatar } from '@indielayer/ui'
+import { XAvatar } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -32,7 +32,7 @@ const next = 'badge'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/avatar"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/avatar"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/avatar/size.vue b/packages/ui/docs/pages/component/avatar/size.vue
similarity index 100%
rename from packages/docs/src/pages/component/avatar/size.vue
rename to packages/ui/docs/pages/component/avatar/size.vue
diff --git a/packages/docs/src/pages/component/avatar/usage.vue b/packages/ui/docs/pages/component/avatar/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/avatar/usage.vue
rename to packages/ui/docs/pages/component/avatar/usage.vue
diff --git a/packages/docs/src/pages/component/avatar/variants.vue b/packages/ui/docs/pages/component/avatar/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/avatar/variants.vue
rename to packages/ui/docs/pages/component/avatar/variants.vue
diff --git a/packages/docs/src/pages/component/badge/index.vue b/packages/ui/docs/pages/component/badge/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/badge/index.vue
rename to packages/ui/docs/pages/component/badge/index.vue
index ad6b2665..21b47b5b 100644
--- a/packages/docs/src/pages/component/badge/index.vue
+++ b/packages/ui/docs/pages/component/badge/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XBadge } from '@indielayer/ui'
+import { XBadge } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'breadcrumbs'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/badge"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/badge"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/badge/usage.vue b/packages/ui/docs/pages/component/badge/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/badge/usage.vue
rename to packages/ui/docs/pages/component/badge/usage.vue
diff --git a/packages/docs/src/pages/component/breadcrumbs/index.vue b/packages/ui/docs/pages/component/breadcrumbs/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/breadcrumbs/index.vue
rename to packages/ui/docs/pages/component/breadcrumbs/index.vue
index f8bfd003..643cc71d 100644
--- a/packages/docs/src/pages/component/breadcrumbs/index.vue
+++ b/packages/ui/docs/pages/component/breadcrumbs/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XBreadcrumbs } from '@indielayer/ui'
+import { XBreadcrumbs } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'card'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/breadcrumbs"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/breadcrumbs"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/breadcrumbs/usage.vue b/packages/ui/docs/pages/component/breadcrumbs/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/breadcrumbs/usage.vue
rename to packages/ui/docs/pages/component/breadcrumbs/usage.vue
diff --git a/packages/docs/src/pages/component/button/button-group.vue b/packages/ui/docs/pages/component/button/button-group.vue
similarity index 88%
rename from packages/docs/src/pages/component/button/button-group.vue
rename to packages/ui/docs/pages/component/button/button-group.vue
index b702d12c..3024ec99 100644
--- a/packages/docs/src/pages/component/button/button-group.vue
+++ b/packages/ui/docs/pages/component/button/button-group.vue
@@ -11,7 +11,7 @@
     </x-button-group>
     <x-button-group color="indigo" outlined disabled>
       <x-button>left</x-button>
-      <x-button loading loading-label="Loading..">middle</x-button>
+      <x-button>middle</x-button>
       <x-button>right</x-button>
     </x-button-group>
   </div>
diff --git a/packages/docs/src/pages/component/button/icons.vue b/packages/ui/docs/pages/component/button/icons.vue
similarity index 100%
rename from packages/docs/src/pages/component/button/icons.vue
rename to packages/ui/docs/pages/component/button/icons.vue
diff --git a/packages/docs/src/pages/component/button/index.vue b/packages/ui/docs/pages/component/button/index.vue
similarity index 94%
rename from packages/docs/src/pages/component/button/index.vue
rename to packages/ui/docs/pages/component/button/index.vue
index bddadd14..84d9bbb5 100644
--- a/packages/docs/src/pages/component/button/index.vue
+++ b/packages/ui/docs/pages/component/button/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XButton, XButtonGroup } from '@indielayer/ui'
+import { XButton, XButtonGroup } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -53,7 +53,7 @@ const next = 'checkbox'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/button"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/button"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/button/size.vue b/packages/ui/docs/pages/component/button/size.vue
similarity index 72%
rename from packages/docs/src/pages/component/button/size.vue
rename to packages/ui/docs/pages/component/button/size.vue
index 5aefba7c..5b3af7d1 100644
--- a/packages/docs/src/pages/component/button/size.vue
+++ b/packages/ui/docs/pages/component/button/size.vue
@@ -4,6 +4,6 @@
     <x-button size="sm">sm</x-button>
     <x-button>md</x-button>
     <x-button size="lg">lg</x-button>
-    <x-button size="xl">xl</x-button>
+    <x-button size="xl" icon-right="plus" color="primary">Add new</x-button>
   </div>
 </template>
diff --git a/packages/docs/src/pages/component/button/states.vue b/packages/ui/docs/pages/component/button/states.vue
similarity index 100%
rename from packages/docs/src/pages/component/button/states.vue
rename to packages/ui/docs/pages/component/button/states.vue
diff --git a/packages/docs/src/pages/component/button/usage.vue b/packages/ui/docs/pages/component/button/usage.vue
similarity index 70%
rename from packages/docs/src/pages/component/button/usage.vue
rename to packages/ui/docs/pages/component/button/usage.vue
index ef3f7e18..a3e8eade 100644
--- a/packages/docs/src/pages/component/button/usage.vue
+++ b/packages/ui/docs/pages/component/button/usage.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="grid gap-4 grid-cols-4">
     <x-button>Default</x-button>
-    <x-button color="primary" icon="smile" icon-right="star">Submit</x-button>
+    <x-button color="primary" icon-right="star">Submit</x-button>
     <x-button color="primary" light>Light</x-button>
     <x-button color="primary" ghost>Ghost</x-button>
     <x-button color="primary" outlined>Outlined</x-button>
-    <x-button color="primary" disabled loading loading-label="Uploading..">Loading</x-button>
+    <x-button color="primary" loading loading-label="Uploading..">Loading</x-button>
     <x-button color="primary" rounded>filled Rounded</x-button>
     <x-button color="primary" light outlined>light + outlined</x-button>
   </div>
diff --git a/packages/docs/src/pages/component/button/variants.vue b/packages/ui/docs/pages/component/button/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/button/variants.vue
rename to packages/ui/docs/pages/component/button/variants.vue
diff --git a/packages/docs/src/pages/component/card/index.vue b/packages/ui/docs/pages/component/card/index.vue
similarity index 90%
rename from packages/docs/src/pages/component/card/index.vue
rename to packages/ui/docs/pages/component/card/index.vue
index 61df238c..aff79a23 100644
--- a/packages/docs/src/pages/component/card/index.vue
+++ b/packages/ui/docs/pages/component/card/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XCard } from '@indielayer/ui'
+import { XCard } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'carousel'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/card"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/card"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/card/usage.vue b/packages/ui/docs/pages/component/card/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/card/usage.vue
rename to packages/ui/docs/pages/component/card/usage.vue
diff --git a/packages/docs/src/pages/component/carousel/index.vue b/packages/ui/docs/pages/component/carousel/index.vue
similarity index 85%
rename from packages/docs/src/pages/component/carousel/index.vue
rename to packages/ui/docs/pages/component/carousel/index.vue
index 88190076..140afd45 100644
--- a/packages/docs/src/pages/component/carousel/index.vue
+++ b/packages/ui/docs/pages/component/carousel/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XCarousel } from '@indielayer/ui'
+import { XCarousel } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -13,12 +13,12 @@ const demos = [{
   component: UsageDemo,
 }]
 const back = 'card'
-const next = 'collapse'
+const next = 'container'
 </script>
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/carousel"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/carousel"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/carousel/usage.vue b/packages/ui/docs/pages/component/carousel/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/carousel/usage.vue
rename to packages/ui/docs/pages/component/carousel/usage.vue
diff --git a/packages/docs/src/pages/component/checkbox/index.vue b/packages/ui/docs/pages/component/checkbox/index.vue
similarity index 94%
rename from packages/docs/src/pages/component/checkbox/index.vue
rename to packages/ui/docs/pages/component/checkbox/index.vue
index 9052e945..18b0b650 100644
--- a/packages/docs/src/pages/component/checkbox/index.vue
+++ b/packages/ui/docs/pages/component/checkbox/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XCheckbox } from '@indielayer/ui'
+import { XCheckbox } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -39,7 +39,7 @@ const next = 'form'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/checkbox"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/checkbox"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/checkbox/size.vue b/packages/ui/docs/pages/component/checkbox/size.vue
similarity index 100%
rename from packages/docs/src/pages/component/checkbox/size.vue
rename to packages/ui/docs/pages/component/checkbox/size.vue
diff --git a/packages/docs/src/pages/component/checkbox/states.vue b/packages/ui/docs/pages/component/checkbox/states.vue
similarity index 82%
rename from packages/docs/src/pages/component/checkbox/states.vue
rename to packages/ui/docs/pages/component/checkbox/states.vue
index 1d1bbb94..c4837934 100644
--- a/packages/docs/src/pages/component/checkbox/states.vue
+++ b/packages/ui/docs/pages/component/checkbox/states.vue
@@ -3,6 +3,7 @@
     <x-checkbox disabled label="Disabled" />
     <x-checkbox helper="Helper text">Helper</x-checkbox>
     <x-checkbox loading>Loading</x-checkbox>
+    <x-checkbox indeterminate>Indeterminate</x-checkbox>
     <x-checkbox error="Invalid input">Error</x-checkbox>
   </div>
 </template>
diff --git a/packages/docs/src/pages/component/checkbox/usage.vue b/packages/ui/docs/pages/component/checkbox/usage.vue
similarity index 61%
rename from packages/docs/src/pages/component/checkbox/usage.vue
rename to packages/ui/docs/pages/component/checkbox/usage.vue
index b239359e..09c953af 100644
--- a/packages/docs/src/pages/component/checkbox/usage.vue
+++ b/packages/ui/docs/pages/component/checkbox/usage.vue
@@ -1,11 +1,12 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 const checked = ref(true)
 </script>
 
 <template>
-  <div class="space-x-4">
-    <x-checkbox v-model="checked" label="Primary" color="primary" />
+  <div class="grid grid-cols-5">
+
+    <x-checkbox v-model="checked" label="Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, unde." color="primary" />
     <x-checkbox color="secondary" label="Secondary" />
     <x-checkbox color="success" label="Success" />
     <x-checkbox color="warning" label="Warning" />
diff --git a/packages/docs/src/pages/component/checkbox/variants.vue b/packages/ui/docs/pages/component/checkbox/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/checkbox/variants.vue
rename to packages/ui/docs/pages/component/checkbox/variants.vue
diff --git a/packages/docs/src/pages/component/container/index.vue b/packages/ui/docs/pages/component/container/index.vue
similarity index 85%
rename from packages/docs/src/pages/component/container/index.vue
rename to packages/ui/docs/pages/component/container/index.vue
index cf217348..5084b5f2 100644
--- a/packages/docs/src/pages/component/container/index.vue
+++ b/packages/ui/docs/pages/component/container/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XContainer } from '@indielayer/ui'
+import { XContainer } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -12,13 +12,13 @@ const demos = [{
   code: UsageDemoCode,
   component: UsageDemo,
 }]
-const back = 'collapse'
+const back = 'carousel'
 const next = 'divider'
 </script>
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/container"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/container"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/container/usage.vue b/packages/ui/docs/pages/component/container/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/container/usage.vue
rename to packages/ui/docs/pages/component/container/usage.vue
diff --git a/packages/docs/src/pages/component/divider/index.vue b/packages/ui/docs/pages/component/divider/index.vue
similarity index 92%
rename from packages/docs/src/pages/component/divider/index.vue
rename to packages/ui/docs/pages/component/divider/index.vue
index 93e328c0..4333d149 100644
--- a/packages/docs/src/pages/component/divider/index.vue
+++ b/packages/ui/docs/pages/component/divider/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XDivider } from '@indielayer/ui'
+import { XDivider } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import LabelDemoCode from './label.vue?raw'
@@ -32,7 +32,7 @@ const next = 'drawer'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/divider"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/divider"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/divider/label.vue b/packages/ui/docs/pages/component/divider/label.vue
similarity index 100%
rename from packages/docs/src/pages/component/divider/label.vue
rename to packages/ui/docs/pages/component/divider/label.vue
diff --git a/packages/docs/src/pages/component/divider/usage.vue b/packages/ui/docs/pages/component/divider/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/divider/usage.vue
rename to packages/ui/docs/pages/component/divider/usage.vue
diff --git a/packages/docs/src/pages/component/divider/vertical.vue b/packages/ui/docs/pages/component/divider/vertical.vue
similarity index 100%
rename from packages/docs/src/pages/component/divider/vertical.vue
rename to packages/ui/docs/pages/component/divider/vertical.vue
diff --git a/packages/docs/src/pages/component/drawer/index.vue b/packages/ui/docs/pages/component/drawer/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/drawer/index.vue
rename to packages/ui/docs/pages/component/drawer/index.vue
index a69713fc..11c2d509 100644
--- a/packages/docs/src/pages/component/drawer/index.vue
+++ b/packages/ui/docs/pages/component/drawer/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XDrawer } from '@indielayer/ui'
+import { XDrawer } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'icon'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/drawer"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/drawer"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/drawer/usage.vue b/packages/ui/docs/pages/component/drawer/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/drawer/usage.vue
rename to packages/ui/docs/pages/component/drawer/usage.vue
diff --git a/packages/docs/src/pages/component/form/index.vue b/packages/ui/docs/pages/component/form/index.vue
similarity index 86%
rename from packages/docs/src/pages/component/form/index.vue
rename to packages/ui/docs/pages/component/form/index.vue
index 9e158c0c..845e130e 100644
--- a/packages/docs/src/pages/component/form/index.vue
+++ b/packages/ui/docs/pages/component/form/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XForm } from '@indielayer/ui'
+import { XForm } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -13,12 +13,12 @@ const demos = [{
   component: UsageDemo,
 }]
 const back = 'checkbox'
-const next = 'input'
+const next = 'formGroup'
 </script>
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/form"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/form"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/ui/docs/pages/component/form/usage.vue b/packages/ui/docs/pages/component/form/usage.vue
new file mode 100644
index 00000000..68e4830e
--- /dev/null
+++ b/packages/ui/docs/pages/component/form/usage.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useNotifications, type SelectOption } from '../../../../src'
+import { ref } from 'vue'
+
+const notifications = useNotifications('notifica')
+
+const email = ref('')
+const password = ref('')
+const description = ref('')
+const checked = ref()
+const selected = ref()
+const country = ref('')
+const countries: SelectOption[] = [
+  { label: 'United States', value: 'us' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Mexico', value: 'mx' },
+]
+const agree = ref(false)
+const rules = {
+  isEmail: (v: string) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
+  isRequired: (v: string) => {
+    if (Array.isArray(v)) return !!v.length || 'Field is required'
+
+    return !!v  || 'Field is required'
+  },
+}
+
+function onSubmit(isValid: string) {
+  if (isValid) notifications?.success('Valid! Sumitted.')
+  else notifications?.error('Invalid! Form has errors')
+}
+</script>
+
+<template>
+  <x-form title="Edit user information" description="Almost all fields are required" @submit="onSubmit">
+    <div class="grid grid-cols-2 gap-4">
+      <x-input
+        v-model="email"
+        :rules="[rules.isRequired, rules.isEmail]"
+        name="email"
+        label="Email"
+        placeholder="Enter your email"
+      />
+      <x-input
+        v-model="password"
+        type="password"
+        :rules="[rules.isRequired]"
+        name="password"
+        label="Password"
+        placeholder="Enter your password"
+        helper="Must be between 8 and 10 characters"
+      />
+    </div>
+
+    <x-textarea
+      v-model="description"
+      name="description"
+      label="Description"
+      placeholder="Description"
+    />
+
+    <x-form-group v-model="selected" label="Group of checkboxes" helper="Helper text" :rules="[rules.isRequired]">
+      <x-checkbox value="a" label="Lorem ipsum dolor" />
+      <x-checkbox value="b" label="Second option" />
+    </x-form-group>
+
+    <x-form-group v-model="checked" label="Group of radio buttons" helper="Helper text" :rules="[rules.isRequired]">
+      <x-radio name="inputName" value="a" label="Option A" />
+      <x-radio name="inputName" value="b" label="Option B" />
+    </x-form-group>
+
+    <x-select
+      v-model="country"
+      :rules="[rules.isRequired]"
+      :options="countries"
+      name="country"
+      placeholder="Select another country"
+      label="Country"
+    />
+    <x-checkbox v-model="agree" :rules="[rules.isRequired]" name="agree" label="Agree with all the terms"/>
+
+    <template #secondary-action>
+      <x-button color="gray">Cancel</x-button>
+    </template>
+    <template #primary-action>
+      <x-button color="primary" type="submit">Submit</x-button>
+    </template>
+  </x-form>
+</template>
diff --git a/packages/ui/docs/pages/component/formGroup/index.vue b/packages/ui/docs/pages/component/formGroup/index.vue
new file mode 100644
index 00000000..69c2bff0
--- /dev/null
+++ b/packages/ui/docs/pages/component/formGroup/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XFormGroup } from '../../../../src'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'FormGroup'
+const description = 'A form group is a wrapper for form elements.'
+const components = [XFormGroup]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'form'
+const next = 'input'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/checkbox"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>
diff --git a/packages/ui/docs/pages/component/formGroup/usage.vue b/packages/ui/docs/pages/component/formGroup/usage.vue
new file mode 100644
index 00000000..1741817c
--- /dev/null
+++ b/packages/ui/docs/pages/component/formGroup/usage.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { useNotifications } from '../../../../src'
+import { ref } from 'vue'
+
+const notifications = useNotifications('notifica')
+
+const selected = ref(['a'])
+const checked = ref()
+
+const rules = {
+  isRequired: (v: string) => {
+    if (Array.isArray(v)) return !!v.length || 'Field is required'
+
+    return !!v  || 'Field is required'
+  },
+}
+
+function onSubmit(isValid: string) {
+  if (isValid) notifications?.success('Valid! Sumitted.')
+  else notifications?.error('Invalid! Form has errors')
+}
+</script>
+
+<template>
+  <x-form title="Form with form groups" @submit="onSubmit">
+    <x-form-group
+      v-model="selected"
+      label="Group of checkboxes"
+      helper="Helper text"
+      :rules="[rules.isRequired]"
+      vertical
+    >
+      <x-checkbox name="selectgroup" value="a" label="Lorem ipsum dolor" />
+      <x-checkbox name="selectgroup" value="b" label="Second option" />
+    </x-form-group>
+
+    <x-form-group v-model="checked" label="Group of radio buttons" helper="Helper text" :rules="[rules.isRequired]">
+      <x-radio name="radiogroup" value="a" label="Option A" />
+      <x-radio name="radiogroup" value="b" label="Option B" />
+    </x-form-group>
+
+    <template #primary-action>
+      <x-button color="primary" type="submit">Submit</x-button>
+    </template>
+  </x-form>
+</template>
diff --git a/packages/docs/src/pages/component/icon/index.vue b/packages/ui/docs/pages/component/icon/index.vue
similarity index 92%
rename from packages/docs/src/pages/component/icon/index.vue
rename to packages/ui/docs/pages/component/icon/index.vue
index c344d3ad..9607ebb1 100644
--- a/packages/docs/src/pages/component/icon/index.vue
+++ b/packages/ui/docs/pages/component/icon/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XIcon } from '@indielayer/ui'
+import { XIcon } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -25,7 +25,7 @@ const next = 'image'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/icon"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/icon"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/icon/usage.vue b/packages/ui/docs/pages/component/icon/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/icon/usage.vue
rename to packages/ui/docs/pages/component/icon/usage.vue
diff --git a/packages/docs/src/pages/component/icon/variants.vue b/packages/ui/docs/pages/component/icon/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/icon/variants.vue
rename to packages/ui/docs/pages/component/icon/variants.vue
diff --git a/packages/docs/src/pages/component/image/index.vue b/packages/ui/docs/pages/component/image/index.vue
similarity index 90%
rename from packages/docs/src/pages/component/image/index.vue
rename to packages/ui/docs/pages/component/image/index.vue
index 8e5c8147..e4e95fff 100644
--- a/packages/docs/src/pages/component/image/index.vue
+++ b/packages/ui/docs/pages/component/image/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XImage } from '@indielayer/ui'
+import { XImage } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'link'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/image"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/image"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/image/usage.vue b/packages/ui/docs/pages/component/image/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/image/usage.vue
rename to packages/ui/docs/pages/component/image/usage.vue
diff --git a/packages/docs/src/pages/component/input/index.vue b/packages/ui/docs/pages/component/input/index.vue
similarity index 94%
rename from packages/docs/src/pages/component/input/index.vue
rename to packages/ui/docs/pages/component/input/index.vue
index cc17555c..442fc177 100644
--- a/packages/docs/src/pages/component/input/index.vue
+++ b/packages/ui/docs/pages/component/input/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XInput } from '@indielayer/ui'
+import { XInput } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -39,7 +39,7 @@ const next = 'radio'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/input"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/input"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/input/size.vue b/packages/ui/docs/pages/component/input/size.vue
similarity index 100%
rename from packages/docs/src/pages/component/input/size.vue
rename to packages/ui/docs/pages/component/input/size.vue
diff --git a/packages/docs/src/pages/component/input/states.vue b/packages/ui/docs/pages/component/input/states.vue
similarity index 100%
rename from packages/docs/src/pages/component/input/states.vue
rename to packages/ui/docs/pages/component/input/states.vue
diff --git a/packages/docs/src/pages/component/input/usage.vue b/packages/ui/docs/pages/component/input/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/input/usage.vue
rename to packages/ui/docs/pages/component/input/usage.vue
diff --git a/packages/docs/src/pages/component/input/variants.vue b/packages/ui/docs/pages/component/input/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/input/variants.vue
rename to packages/ui/docs/pages/component/input/variants.vue
diff --git a/packages/docs/src/pages/component/link/index.vue b/packages/ui/docs/pages/component/link/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/link/index.vue
rename to packages/ui/docs/pages/component/link/index.vue
index f9e57083..ade93485 100644
--- a/packages/docs/src/pages/component/link/index.vue
+++ b/packages/ui/docs/pages/component/link/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XLink } from '@indielayer/ui'
+import { XLink } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'loader'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/link"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/link"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/link/usage.vue b/packages/ui/docs/pages/component/link/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/link/usage.vue
rename to packages/ui/docs/pages/component/link/usage.vue
diff --git a/packages/docs/src/pages/component/loader/index.vue b/packages/ui/docs/pages/component/loader/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/loader/index.vue
rename to packages/ui/docs/pages/component/loader/index.vue
index 0ffb6b3f..a762a3e3 100644
--- a/packages/docs/src/pages/component/loader/index.vue
+++ b/packages/ui/docs/pages/component/loader/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XLoader } from '@indielayer/ui'
+import { XLoader } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'menu'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/loader"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/loader"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/loader/usage.vue b/packages/ui/docs/pages/component/loader/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/loader/usage.vue
rename to packages/ui/docs/pages/component/loader/usage.vue
diff --git a/packages/docs/src/pages/component/menu/index.vue b/packages/ui/docs/pages/component/menu/index.vue
similarity index 88%
rename from packages/docs/src/pages/component/menu/index.vue
rename to packages/ui/docs/pages/component/menu/index.vue
index 7c8a9d32..6b116402 100644
--- a/packages/docs/src/pages/component/menu/index.vue
+++ b/packages/ui/docs/pages/component/menu/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XMenu, XMenuItem } from '@indielayer/ui'
+import { XMenu, XMenuItem } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'modal'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/menu"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/menu"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/menu/usage.vue b/packages/ui/docs/pages/component/menu/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/menu/usage.vue
rename to packages/ui/docs/pages/component/menu/usage.vue
diff --git a/packages/ui/docs/pages/component/modal/composed.vue b/packages/ui/docs/pages/component/modal/composed.vue
new file mode 100644
index 00000000..5bfbaea1
--- /dev/null
+++ b/packages/ui/docs/pages/component/modal/composed.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useNotifications } from '../../../../src'
+
+const show = ref(false)
+
+const notifications = useNotifications('notifica')
+
+const email = ref('')
+const password = ref('')
+const description = ref('')
+
+const rules = {
+  isEmail: (v: string) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
+  isRequired: (v: string) => !!v  || 'Field is required',
+}
+
+function onSubmit(isValid: boolean) {
+  if (isValid) notifications?.success('Valid! Sumitted.')
+  else notifications?.error('Invalid! Form has errors')
+}
+</script>
+
+<template>
+  <x-modal
+    v-model="show"
+    show-close
+    backdrop
+    is-form
+    title="Modal title"
+    label="Modal label"
+    description="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, fugit."
+    @submit="onSubmit"
+  >
+    <x-input
+      v-model="email"
+      :rules="[rules.isRequired, rules.isEmail]"
+      name="email"
+      label="Email"
+      placeholder="Enter your email"
+    />
+    <x-input
+      v-model="password"
+      type="password"
+      :rules="[rules.isRequired]"
+      name="password"
+      label="Password"
+      placeholder="Enter your password"
+      helper="Must be between 8 and 10 characters"
+    />
+    <x-textarea
+      v-model="description"
+      name="description"
+      label="Description"
+      placeholder="Description"
+    />
+
+    <!-- <template #tertiary-action>
+      <x-button color="gray" size="lg">Tertiary</x-button>
+    </template> -->
+    <template #secondary-action>
+      <x-button color="gray" size="lg" tabindex="-1" @click="show = false">Cancel</x-button>
+    </template>
+    <template #primary-action>
+      <x-button color="primary" size="lg" type="submit">Confirm</x-button>
+    </template>
+  </x-modal>
+
+  <x-button class="mr-2" @click="show = true">Open modal</x-button>
+</template>
diff --git a/packages/docs/src/pages/component/modal/index.vue b/packages/ui/docs/pages/component/modal/index.vue
similarity index 71%
rename from packages/docs/src/pages/component/modal/index.vue
rename to packages/ui/docs/pages/component/modal/index.vue
index f538cd28..a22635da 100644
--- a/packages/docs/src/pages/component/modal/index.vue
+++ b/packages/ui/docs/pages/component/modal/index.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { XModal } from '@indielayer/ui'
+import { XModal } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import ComposedDemoCode from './composed.vue?raw'
+import ComposedDemo from './composed.vue'
 
 const title = 'Modal'
 const description = 'Modals are used to display content on top of the current page.'
@@ -11,6 +13,11 @@ const demos = [{
   description: '',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Composed',
+  description: '',
+  code: ComposedDemoCode,
+  component: ComposedDemo,
 }]
 const back = 'menu'
 const next = 'notifications'
@@ -18,7 +25,7 @@ const next = 'notifications'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/modal"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/modal"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/modal/usage.vue b/packages/ui/docs/pages/component/modal/usage.vue
similarity index 99%
rename from packages/docs/src/pages/component/modal/usage.vue
rename to packages/ui/docs/pages/component/modal/usage.vue
index 90ab48a2..b124c93c 100644
--- a/packages/docs/src/pages/component/modal/usage.vue
+++ b/packages/ui/docs/pages/component/modal/usage.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 const show = ref(false)
 const show1 = ref(false)
diff --git a/packages/docs/src/pages/component/notifications/index.vue b/packages/ui/docs/pages/component/notifications/index.vue
similarity index 88%
rename from packages/docs/src/pages/component/notifications/index.vue
rename to packages/ui/docs/pages/component/notifications/index.vue
index 813f851f..5562fa2a 100644
--- a/packages/docs/src/pages/component/notifications/index.vue
+++ b/packages/ui/docs/pages/component/notifications/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XNotifications } from '@indielayer/ui'
+import { XNotifications } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'pagination'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/notifications"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/notifications"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/notifications/usage.vue b/packages/ui/docs/pages/component/notifications/usage.vue
similarity index 97%
rename from packages/docs/src/pages/component/notifications/usage.vue
rename to packages/ui/docs/pages/component/notifications/usage.vue
index 58aef3c8..1a7e5fcd 100644
--- a/packages/docs/src/pages/component/notifications/usage.vue
+++ b/packages/ui/docs/pages/component/notifications/usage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useNotifications } from '@indielayer/ui'
+import { useNotifications } from '../../../../src'
 
 const notification = useNotifications('notifica')
 
diff --git a/packages/docs/src/pages/component/pagination/index.vue b/packages/ui/docs/pages/component/pagination/index.vue
similarity index 88%
rename from packages/docs/src/pages/component/pagination/index.vue
rename to packages/ui/docs/pages/component/pagination/index.vue
index 55f3cb15..284abb57 100644
--- a/packages/docs/src/pages/component/pagination/index.vue
+++ b/packages/ui/docs/pages/component/pagination/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XPagination } from '@indielayer/ui'
+import { XPagination } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'popover'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/pagination"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/pagination"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/pagination/usage.vue b/packages/ui/docs/pages/component/pagination/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/pagination/usage.vue
rename to packages/ui/docs/pages/component/pagination/usage.vue
diff --git a/packages/docs/src/pages/component/popover/index.vue b/packages/ui/docs/pages/component/popover/index.vue
similarity index 87%
rename from packages/docs/src/pages/component/popover/index.vue
rename to packages/ui/docs/pages/component/popover/index.vue
index c2b577d5..8338da14 100644
--- a/packages/docs/src/pages/component/popover/index.vue
+++ b/packages/ui/docs/pages/component/popover/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XPopover, XPopoverContainer } from '@indielayer/ui'
+import { XPopover, XPopoverContainer } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'progress'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/popover"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/popover"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/popover/usage.vue b/packages/ui/docs/pages/component/popover/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/popover/usage.vue
rename to packages/ui/docs/pages/component/popover/usage.vue
diff --git a/packages/docs/src/pages/component/progress/index.vue b/packages/ui/docs/pages/component/progress/index.vue
similarity index 91%
rename from packages/docs/src/pages/component/progress/index.vue
rename to packages/ui/docs/pages/component/progress/index.vue
index 2db0ad4d..ea44e45c 100644
--- a/packages/docs/src/pages/component/progress/index.vue
+++ b/packages/ui/docs/pages/component/progress/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XProgress } from '@indielayer/ui'
+import { XProgress } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -25,7 +25,7 @@ const next = 'skeleton'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/progress"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/progress"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/progress/usage.vue b/packages/ui/docs/pages/component/progress/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/progress/usage.vue
rename to packages/ui/docs/pages/component/progress/usage.vue
diff --git a/packages/docs/src/pages/component/progress/variants.vue b/packages/ui/docs/pages/component/progress/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/progress/variants.vue
rename to packages/ui/docs/pages/component/progress/variants.vue
diff --git a/packages/docs/src/pages/component/radio/index.vue b/packages/ui/docs/pages/component/radio/index.vue
similarity index 94%
rename from packages/docs/src/pages/component/radio/index.vue
rename to packages/ui/docs/pages/component/radio/index.vue
index 9cf6dadb..89778584 100644
--- a/packages/docs/src/pages/component/radio/index.vue
+++ b/packages/ui/docs/pages/component/radio/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XRadio } from '@indielayer/ui'
+import { XRadio } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -39,7 +39,7 @@ const next = 'select'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/radio"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/radio"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/radio/size.vue b/packages/ui/docs/pages/component/radio/size.vue
similarity index 100%
rename from packages/docs/src/pages/component/radio/size.vue
rename to packages/ui/docs/pages/component/radio/size.vue
diff --git a/packages/docs/src/pages/component/radio/states.vue b/packages/ui/docs/pages/component/radio/states.vue
similarity index 100%
rename from packages/docs/src/pages/component/radio/states.vue
rename to packages/ui/docs/pages/component/radio/states.vue
diff --git a/packages/ui/docs/pages/component/radio/usage.vue b/packages/ui/docs/pages/component/radio/usage.vue
new file mode 100644
index 00000000..41f127db
--- /dev/null
+++ b/packages/ui/docs/pages/component/radio/usage.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="grid grid-cols-4 gap-4">
+    <x-radio v-model="selected" name="inputName" value="a" label="Option A" />
+    <x-radio v-model="selected" name="inputName" value="b" label="Option B" />
+    <x-radio v-model="selected" name="inputName" value="c" label="Option C" />
+    <x-radio v-model="selected" name="inputName" value="d" label="Option D" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { selected: 'a' } },
+}
+</script>
diff --git a/packages/docs/src/pages/component/radio/variants.vue b/packages/ui/docs/pages/component/radio/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/radio/variants.vue
rename to packages/ui/docs/pages/component/radio/variants.vue
diff --git a/packages/docs/src/pages/component/scroll/horizontal.vue b/packages/ui/docs/pages/component/scroll/horizontal.vue
similarity index 100%
rename from packages/docs/src/pages/component/scroll/horizontal.vue
rename to packages/ui/docs/pages/component/scroll/horizontal.vue
diff --git a/packages/docs/src/pages/component/scroll/index.vue b/packages/ui/docs/pages/component/scroll/index.vue
similarity index 92%
rename from packages/docs/src/pages/component/scroll/index.vue
rename to packages/ui/docs/pages/component/scroll/index.vue
index 83e98540..3a05f012 100644
--- a/packages/docs/src/pages/component/scroll/index.vue
+++ b/packages/ui/docs/pages/component/scroll/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XScroll } from '@indielayer/ui'
+import { XScroll } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import HorizontalDemoCode from './horizontal.vue?raw'
@@ -25,7 +25,7 @@ const next = 'spacer'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/scroll"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/scroll"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/scroll/usage.vue b/packages/ui/docs/pages/component/scroll/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/scroll/usage.vue
rename to packages/ui/docs/pages/component/scroll/usage.vue
diff --git a/packages/docs/src/pages/component/select/index.vue b/packages/ui/docs/pages/component/select/index.vue
similarity index 93%
rename from packages/docs/src/pages/component/select/index.vue
rename to packages/ui/docs/pages/component/select/index.vue
index 7b548939..a54294ff 100644
--- a/packages/docs/src/pages/component/select/index.vue
+++ b/packages/ui/docs/pages/component/select/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XSelect } from '@indielayer/ui'
+import { XSelect } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -32,7 +32,7 @@ const next = 'slider'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/select"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/select"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/select/states.vue b/packages/ui/docs/pages/component/select/states.vue
similarity index 100%
rename from packages/docs/src/pages/component/select/states.vue
rename to packages/ui/docs/pages/component/select/states.vue
diff --git a/packages/docs/src/pages/component/select/usage.vue b/packages/ui/docs/pages/component/select/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/select/usage.vue
rename to packages/ui/docs/pages/component/select/usage.vue
diff --git a/packages/docs/src/pages/component/select/variants.vue b/packages/ui/docs/pages/component/select/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/select/variants.vue
rename to packages/ui/docs/pages/component/select/variants.vue
diff --git a/packages/docs/src/pages/component/skeleton/index.vue b/packages/ui/docs/pages/component/skeleton/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/skeleton/index.vue
rename to packages/ui/docs/pages/component/skeleton/index.vue
index f5ef59a4..b393e654 100644
--- a/packages/docs/src/pages/component/skeleton/index.vue
+++ b/packages/ui/docs/pages/component/skeleton/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XSkeleton } from '@indielayer/ui'
+import { XSkeleton } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'slider'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/skeleton"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/skeleton"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/skeleton/usage.vue b/packages/ui/docs/pages/component/skeleton/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/skeleton/usage.vue
rename to packages/ui/docs/pages/component/skeleton/usage.vue
diff --git a/packages/docs/src/pages/component/slider/index.vue b/packages/ui/docs/pages/component/slider/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/slider/index.vue
rename to packages/ui/docs/pages/component/slider/index.vue
index f85f7f54..de6d8bd5 100644
--- a/packages/docs/src/pages/component/slider/index.vue
+++ b/packages/ui/docs/pages/component/slider/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XSlider } from '@indielayer/ui'
+import { XSlider } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'textarea'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/slider"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/slider"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/slider/usage.vue b/packages/ui/docs/pages/component/slider/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/slider/usage.vue
rename to packages/ui/docs/pages/component/slider/usage.vue
diff --git a/packages/docs/src/pages/component/spacer/index.vue b/packages/ui/docs/pages/component/spacer/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/spacer/index.vue
rename to packages/ui/docs/pages/component/spacer/index.vue
index 3c527094..5741b1a4 100644
--- a/packages/docs/src/pages/component/spacer/index.vue
+++ b/packages/ui/docs/pages/component/spacer/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XSpacer } from '@indielayer/ui'
+import { XSpacer } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = ''
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/spacer"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/spacer"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/spacer/usage.vue b/packages/ui/docs/pages/component/spacer/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/spacer/usage.vue
rename to packages/ui/docs/pages/component/spacer/usage.vue
diff --git a/packages/docs/src/pages/component/spinner/index.vue b/packages/ui/docs/pages/component/spinner/index.vue
similarity index 91%
rename from packages/docs/src/pages/component/spinner/index.vue
rename to packages/ui/docs/pages/component/spinner/index.vue
index 7851733f..4839f764 100644
--- a/packages/docs/src/pages/component/spinner/index.vue
+++ b/packages/ui/docs/pages/component/spinner/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XSpinner } from '@indielayer/ui'
+import { XSpinner } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -25,7 +25,7 @@ const next = 'table'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/spinner"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/spinner"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/spinner/usage.vue b/packages/ui/docs/pages/component/spinner/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/spinner/usage.vue
rename to packages/ui/docs/pages/component/spinner/usage.vue
diff --git a/packages/docs/src/pages/component/spinner/variants.vue b/packages/ui/docs/pages/component/spinner/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/spinner/variants.vue
rename to packages/ui/docs/pages/component/spinner/variants.vue
diff --git a/packages/ui/docs/pages/component/stepper/index.vue b/packages/ui/docs/pages/component/stepper/index.vue
new file mode 100644
index 00000000..be425890
--- /dev/null
+++ b/packages/ui/docs/pages/component/stepper/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XStepper } from '../../../../src'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Stepper'
+const description = 'Stepper is a navigation component that guides users through the steps of a task.'
+const components = [XStepper]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'spinner'
+const next = 'table'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/stepper"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>
diff --git a/packages/ui/docs/pages/component/stepper/usage.vue b/packages/ui/docs/pages/component/stepper/usage.vue
new file mode 100644
index 00000000..750f3cb4
--- /dev/null
+++ b/packages/ui/docs/pages/component/stepper/usage.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const step = ref(1)
+const steps = [
+  { label: 'Initial step', description: 'This is the description', status: 'complete' },
+  { label: 'One more step i know', status: 'incomplete' },
+  { label: 'Almost there', status: 'error' },
+  { label: 'Lets go' },
+  { label: 'Finish line', disabled: true },
+]
+</script>
+
+<template>
+  <x-stepper v-model="step" :steps="steps">
+    <div v-if="step === 0">Initial step!</div>
+    <div v-if="step === 1">One more step!</div>
+    <div v-if="step === 2">Almost there!</div>
+    <div v-if="step === 3">Finish line!</div>
+  </x-stepper>
+</template>
diff --git a/packages/docs/src/pages/component/table/index.vue b/packages/ui/docs/pages/component/table/index.vue
similarity index 75%
rename from packages/docs/src/pages/component/table/index.vue
rename to packages/ui/docs/pages/component/table/index.vue
index c13d5fbc..8f9c769c 100644
--- a/packages/docs/src/pages/component/table/index.vue
+++ b/packages/ui/docs/pages/component/table/index.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow } from '@indielayer/ui'
+import { XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
 
 const title = 'Table'
 const description = 'Tables are used to display data in a tabular format.'
@@ -11,6 +13,11 @@ const demos = [{
   description: '',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'States',
+  description: '',
+  code: StatesDemoCode,
+  component: StatesDemo,
 }]
 const back = 'spinner'
 const next = 'tabs'
@@ -18,7 +25,7 @@ const next = 'tabs'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/table"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/table"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/ui/docs/pages/component/table/states.vue b/packages/ui/docs/pages/component/table/states.vue
new file mode 100644
index 00000000..36d195da
--- /dev/null
+++ b/packages/ui/docs/pages/component/table/states.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type TableHeader } from '../../../../src'
+import { ref } from 'vue'
+
+const headers: TableHeader[] = [
+  { text: '#', value: 'id', sortable: true, align: 'center' },
+  { text: 'Title', value: 'title' },
+  { text: 'Description', value: 'description' },
+  { text: 'Published', value: 'published', sortable: true },
+  { text: 'Status', value: 'status' },
+]
+
+const items = ref([])
+</script>
+
+<template>
+  <x-table :headers="headers" :items="items">
+    <template #empty>
+      <div class="p-4">
+        <div class="p-8 border-dashed border rounded-lg text-center">
+          Empty state slot
+        </div>
+      </div>
+    </template>
+  </x-table>
+
+  <x-table :headers="headers" :items="items" loading/>
+</template>
diff --git a/packages/docs/src/pages/component/table/usage.vue b/packages/ui/docs/pages/component/table/usage.vue
similarity index 84%
rename from packages/docs/src/pages/component/table/usage.vue
rename to packages/ui/docs/pages/component/table/usage.vue
index 0b6bdc05..29545b67 100644
--- a/packages/docs/src/pages/component/table/usage.vue
+++ b/packages/ui/docs/pages/component/table/usage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useNotifications, type TableHeader, type TableHeaderSort } from '@indielayer/ui'
+import { useNotifications, type TableHeader } from '../../../../src'
 import { computed, ref } from 'vue'
 
 const notifications = useNotifications('notifica')
@@ -7,7 +7,7 @@ const notifications = useNotifications('notifica')
 const headers: TableHeader[] = [
   { text: '#', value: 'id', sortable: true, align: 'center' },
   { text: 'Title', value: 'title' },
-  { text: 'Description', value: 'description' },
+  { text: 'Description', value: 'description', truncate: true, width: 400 },
   { text: 'Published', value: 'published', sortable: true },
   { text: 'Status', value: 'status' },
 ]
@@ -65,10 +65,22 @@ const itemsSorted = computed<Book[]>(() => {
 <template>
   <x-table
     v-model:sort="sort"
+    expandable
     :headers="headers"
     :items="itemsSorted"
-    @click-row="notifications.log('open')"
   >
+    <template #expanded-row="{ item }">
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+      {{ item }}
+    </template>
+
     <template #item-published="{ item }">
       {{ formatDate(item.published) }}
     </template>
@@ -83,7 +95,7 @@ const itemsSorted = computed<Book[]>(() => {
     striped
     :headers="headers"
     :items="itemsSorted"
-    @click-row="notifications.log('open')"
+    @click-row="notifications?.log('open')"
   >
     <template #item-published="{ item }">
       {{ formatDate(item.published) }}
diff --git a/packages/docs/src/pages/component/tabs/index.vue b/packages/ui/docs/pages/component/tabs/index.vue
similarity index 88%
rename from packages/docs/src/pages/component/tabs/index.vue
rename to packages/ui/docs/pages/component/tabs/index.vue
index 5f3b567a..abb4990a 100644
--- a/packages/docs/src/pages/component/tabs/index.vue
+++ b/packages/ui/docs/pages/component/tabs/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XTabGroup, XTab } from '@indielayer/ui'
+import { XTabGroup, XTab } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'tag'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/tabs"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/tabs"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/tabs/usage.vue b/packages/ui/docs/pages/component/tabs/usage.vue
similarity index 93%
rename from packages/docs/src/pages/component/tabs/usage.vue
rename to packages/ui/docs/pages/component/tabs/usage.vue
index e1b8abd6..f807ac94 100644
--- a/packages/docs/src/pages/component/tabs/usage.vue
+++ b/packages/ui/docs/pages/component/tabs/usage.vue
@@ -62,7 +62,7 @@ const linkTab = ref(null)
       content e
     </x-tab>
   </x-tab-group>
-  <x-tab-group v-model="tab" class="pb-10" variant="block">
+  <x-tab-group v-model="tab" class="pb-10" variant="block" grow>
     <x-tab value="a" label="Tab A">
       content a
     </x-tab>
@@ -79,11 +79,17 @@ const linkTab = ref(null)
       content e
     </x-tab>
   </x-tab-group>
-  <x-tab-group v-model="tab" class="pb-10" variant="block" grow>
-    <x-tab value="a" label="Tab A">
+  <x-tab-group
+    v-model="tab"
+    class="pb-10"
+    variant="block"
+    grow
+    :full-width="false"
+  >
+    <x-tab value="a" label="Tab A" removable>
       content a
     </x-tab>
-    <x-tab value="b" label="Tab B">
+    <x-tab value="b" label="Tab B" icon="smile">
       content b
     </x-tab>
     <x-tab value="c" label="Tab c">
diff --git a/packages/docs/src/pages/component/tag/index.vue b/packages/ui/docs/pages/component/tag/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/tag/index.vue
rename to packages/ui/docs/pages/component/tag/index.vue
index bfe99c3a..4b4ff2d1 100644
--- a/packages/docs/src/pages/component/tag/index.vue
+++ b/packages/ui/docs/pages/component/tag/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XTag } from '@indielayer/ui'
+import { XTag } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = 'tooltip'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/tag"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/tag"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/tag/usage.vue b/packages/ui/docs/pages/component/tag/usage.vue
similarity index 81%
rename from packages/docs/src/pages/component/tag/usage.vue
rename to packages/ui/docs/pages/component/tag/usage.vue
index 361a3de4..0c5e40ba 100644
--- a/packages/docs/src/pages/component/tag/usage.vue
+++ b/packages/ui/docs/pages/component/tag/usage.vue
@@ -3,6 +3,8 @@
     <x-tag color="primary">Hello</x-tag>
     <x-tag color="amber">Amber</x-tag>
     <x-tag outlined>I'm a tag</x-tag>
+    <x-tag rounded outlined color="pink">I'm a tag</x-tag>
+    <x-tag color="pink">I'm a tag</x-tag>
     <x-tag removable @remove="notifications.log('remove me')">I'm a tag</x-tag>
     <x-tag removable size="xs" @remove="notifications.log('remove me')">I'm a tag</x-tag>
     <x-tag removable size="lg" @remove="notifications.log('remove me')">I'm a tag</x-tag>
@@ -11,7 +13,7 @@
 </template>
 
 <script>
-import { useNotifications } from '@indielayer/ui'
+import { useNotifications } from '../../../../src'
 
 export default {
   setup() {
diff --git a/packages/docs/src/pages/component/textarea/index.vue b/packages/ui/docs/pages/component/textarea/index.vue
similarity index 92%
rename from packages/docs/src/pages/component/textarea/index.vue
rename to packages/ui/docs/pages/component/textarea/index.vue
index 5705d3d2..d7c8d3c9 100644
--- a/packages/docs/src/pages/component/textarea/index.vue
+++ b/packages/ui/docs/pages/component/textarea/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XTextarea } from '@indielayer/ui'
+import { XTextarea } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -32,7 +32,7 @@ const next = 'toggle'
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/textarea"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/textarea"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/textarea/states.vue b/packages/ui/docs/pages/component/textarea/states.vue
similarity index 100%
rename from packages/docs/src/pages/component/textarea/states.vue
rename to packages/ui/docs/pages/component/textarea/states.vue
diff --git a/packages/docs/src/pages/component/textarea/usage.vue b/packages/ui/docs/pages/component/textarea/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/textarea/usage.vue
rename to packages/ui/docs/pages/component/textarea/usage.vue
diff --git a/packages/docs/src/pages/component/textarea/variants.vue b/packages/ui/docs/pages/component/textarea/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/textarea/variants.vue
rename to packages/ui/docs/pages/component/textarea/variants.vue
diff --git a/packages/docs/src/pages/component/toggle/index.vue b/packages/ui/docs/pages/component/toggle/index.vue
similarity index 90%
rename from packages/docs/src/pages/component/toggle/index.vue
rename to packages/ui/docs/pages/component/toggle/index.vue
index 22dc1620..bb26d973 100644
--- a/packages/docs/src/pages/component/toggle/index.vue
+++ b/packages/ui/docs/pages/component/toggle/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XToggle } from '@indielayer/ui'
+import { XToggle } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 import VariantsDemoCode from './variants.vue?raw'
@@ -27,12 +27,12 @@ const demos = [{
   component: StatesDemo,
 }]
 const back = 'textarea'
-const next = 'alert'
+const next = 'accordion'
 </script>
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/toggle"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/toggle"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/toggle/states.vue b/packages/ui/docs/pages/component/toggle/states.vue
similarity index 100%
rename from packages/docs/src/pages/component/toggle/states.vue
rename to packages/ui/docs/pages/component/toggle/states.vue
diff --git a/packages/docs/src/pages/component/toggle/usage.vue b/packages/ui/docs/pages/component/toggle/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/toggle/usage.vue
rename to packages/ui/docs/pages/component/toggle/usage.vue
diff --git a/packages/docs/src/pages/component/toggle/variants.vue b/packages/ui/docs/pages/component/toggle/variants.vue
similarity index 100%
rename from packages/docs/src/pages/component/toggle/variants.vue
rename to packages/ui/docs/pages/component/toggle/variants.vue
diff --git a/packages/docs/src/pages/component/tooltip/index.vue b/packages/ui/docs/pages/component/tooltip/index.vue
similarity index 89%
rename from packages/docs/src/pages/component/tooltip/index.vue
rename to packages/ui/docs/pages/component/tooltip/index.vue
index 57788363..cc31675d 100644
--- a/packages/docs/src/pages/component/tooltip/index.vue
+++ b/packages/ui/docs/pages/component/tooltip/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { XTooltip } from '@indielayer/ui'
+import { XTooltip } from '../../../../src'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
@@ -18,7 +18,7 @@ const next = ''
 
 <template>
   <document-page
-    github="https://github.com/indielayer/ui/blob/main/packages/docs/src/pages/component/tooltip"
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/tooltip"
     :title="title"
     :description="description"
     :components="components"
diff --git a/packages/docs/src/pages/component/tooltip/usage.vue b/packages/ui/docs/pages/component/tooltip/usage.vue
similarity index 100%
rename from packages/docs/src/pages/component/tooltip/usage.vue
rename to packages/ui/docs/pages/component/tooltip/usage.vue
diff --git a/packages/docs/src/pages/error.vue b/packages/ui/docs/pages/error.vue
similarity index 57%
rename from packages/docs/src/pages/error.vue
rename to packages/ui/docs/pages/error.vue
index 17823e68..a0786e36 100644
--- a/packages/docs/src/pages/error.vue
+++ b/packages/ui/docs/pages/error.vue
@@ -1,6 +1,6 @@
 <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" />
+    <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>
 </template>
diff --git a/packages/docs/src/pages/icons.vue b/packages/ui/docs/pages/icons.vue
similarity index 99%
rename from packages/docs/src/pages/icons.vue
rename to packages/ui/docs/pages/icons.vue
index 9ec144fc..8ba92c18 100644
--- a/packages/docs/src/pages/icons.vue
+++ b/packages/ui/docs/pages/icons.vue
@@ -75,7 +75,7 @@ export default {
 }`,
       installExample: `// main.js
 import { createApp } from 'vue'
-import UI from '@indielayer/ui'
+import UI from '../../../src'
 import icons from './icons'
 
 const app = createApp(App)
diff --git a/packages/docs/src/pages/index.vue b/packages/ui/docs/pages/index.vue
similarity index 90%
rename from packages/docs/src/pages/index.vue
rename to packages/ui/docs/pages/index.vue
index b7242120..f3f14bb1 100644
--- a/packages/docs/src/pages/index.vue
+++ b/packages/ui/docs/pages/index.vue
@@ -58,7 +58,7 @@ module.exports = {
     './index.html',
     './**/*.vue',
     './src/**/*.{vue,js,ts,jsx,tsx}',
-    'node_modules/@indielayer/ui/{lib,src}/**/*',
+    'node_modules/../../../src/{lib,src}/**/*',
   ],
   theme: {
     extend: {
@@ -79,7 +79,7 @@ module.exports = {
       <code-snippet
         lang="js"
         :code="`import { createApp } from 'vue'
-import UI from '@indielayer/ui'
+import UI from '../../../src'
 
 const app = createApp(App)
 
@@ -93,25 +93,25 @@ app.use(UI, {
         :snippets="[{
           label: 'npm',
           lang: 'bash',
-          code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
+          code: 'npm install ../../../src @vueuse/core floating-vue -D'
         }, {
           label: 'yarn',
           lang: 'bash',
-          code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
+          code: 'yarn add ../../../src @vueuse/core floating-vue -D'
         }, {
           label: 'pnpm',
           lang: 'bash',
-          code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
+          code: 'pnpm add ../../../src @vueuse/core floating-vue -D'
         }]"
       />
       <code-snippet
         lang="js"
-        :code="`import { colors } from '@indielayer/ui'
+        :code="`import { colors } from '../../../../src'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
-    ['@indielayer/ui/nuxt', {
+    ['../../../src/nuxt', {
       theme: {
         colors: {
           primary: colors.emerald,
@@ -142,7 +142,7 @@ export default defineNuxtConfig({
       <code-snippet
         lang="js"
         :code="`import { createApp } from 'vue'
-import { createUI, XButton, XAlert } from '@indielayer/ui'
+import { createUI, XButton, XAlert } from '../../../../src'
 
 const app = createApp(App)
 
diff --git a/packages/docs/src/pages/play.vue b/packages/ui/docs/pages/play.vue
similarity index 100%
rename from packages/docs/src/pages/play.vue
rename to packages/ui/docs/pages/play.vue
diff --git a/packages/docs/src/pages/typography.vue b/packages/ui/docs/pages/typography.vue
similarity index 100%
rename from packages/docs/src/pages/typography.vue
rename to packages/ui/docs/pages/typography.vue
diff --git a/packages/docs/src/router/index.ts b/packages/ui/docs/router/index.ts
similarity index 74%
rename from packages/docs/src/router/index.ts
rename to packages/ui/docs/router/index.ts
index f650da37..d08dadc5 100644
--- a/packages/docs/src/router/index.ts
+++ b/packages/ui/docs/router/index.ts
@@ -1,17 +1,17 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 
 // layouts
-import DefaultLayout from '@/layouts/default.vue'
-import SimpleLayout from '@/layouts/simple.vue'
+import DefaultLayout from '../layouts/default.vue'
+import SimpleLayout from '../layouts/simple.vue'
 
 // help
-import HomePage from '@/pages/index.vue'
-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 HomePage from '../pages/index.vue'
+import IconsPage from '../pages/icons.vue'
+import PlayPage from '../pages/play.vue'
+import TypographyPage from '../pages/typography.vue'
+import ColorsPage from '../pages/colors.vue'
 
-const pages: Record<string, any> = import.meta.glob('@/pages/component/*/index.vue', { eager: true })
+const pages: Record<string, any> = import.meta.glob('../pages/component/*/index.vue', { eager: true })
 
 const componentPages: RouteRecordRaw[] = []
 
diff --git a/packages/ui/exports/tailwind.preset.js b/packages/ui/exports/tailwind.preset.js
index e152fe46..1938c3f7 100644
--- a/packages/ui/exports/tailwind.preset.js
+++ b/packages/ui/exports/tailwind.preset.js
@@ -28,6 +28,7 @@ module.exports = () => ({
         secondary: getColorVarPallete('secondary'),
         success: getColorVarPallete('success'),
         warning: getColorVarPallete('warning'),
+        danger: getColorVarPallete('error'),
         error: getColorVarPallete('error'),
       },
       borderColor: getColorVar('border'),
diff --git a/packages/docs/index.html b/packages/ui/index.html
similarity index 91%
rename from packages/docs/index.html
rename to packages/ui/index.html
index 6d540780..1a0cdc7b 100644
--- a/packages/docs/index.html
+++ b/packages/ui/index.html
@@ -11,6 +11,6 @@
   </head>
   <body>
     <div id="app" class="flex flex-col h-full"></div>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/docs/main.ts"></script>
   </body>
 </html>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c2fab779..e00d20f8 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -42,9 +42,11 @@
   },
   "sideEffects": false,
   "scripts": {
-    "dev": "pnpm generate && vite build --watch",
+    "dev": "vite dev --mode docs",
     "build": "pnpm generate && vite build",
+    "build:docs": "pnpm build --mode docs",
     "build:prod": "pnpm build && pnpm gen-types",
+    "build:watch": "pnpm generate && vite build --watch",
     "build:only": "vite build",
     "build:stats": "VITE_VISUALIZER=Y npm run build",
     "generate": "pnpm gen-version",
@@ -78,12 +80,14 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
+    "shiki": "1.0.0-beta.1",
     "stylelint": "^14.16.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",
     "vitest": "^0.32.2",
     "vue": "^3.3.9",
+    "vue-router": "^4.2.2",
     "vue-tsc": "^1.8.2"
   },
   "browserslist": [
diff --git a/packages/docs/public/favicon.ico b/packages/ui/public/favicon.ico
similarity index 100%
rename from packages/docs/public/favicon.ico
rename to packages/ui/public/favicon.ico
diff --git a/packages/docs/public/robots.txt b/packages/ui/public/robots.txt
similarity index 100%
rename from packages/docs/public/robots.txt
rename to packages/ui/public/robots.txt
diff --git a/packages/docs/public/shiki/languages/html.tmLanguage.json b/packages/ui/public/shiki/languages/html.tmLanguage.json
similarity index 100%
rename from packages/docs/public/shiki/languages/html.tmLanguage.json
rename to packages/ui/public/shiki/languages/html.tmLanguage.json
diff --git a/packages/docs/public/shiki/languages/javascript.tmLanguage.json b/packages/ui/public/shiki/languages/javascript.tmLanguage.json
similarity index 100%
rename from packages/docs/public/shiki/languages/javascript.tmLanguage.json
rename to packages/ui/public/shiki/languages/javascript.tmLanguage.json
diff --git a/packages/docs/public/shiki/languages/shellscript.tmLanguage.json b/packages/ui/public/shiki/languages/shellscript.tmLanguage.json
similarity index 100%
rename from packages/docs/public/shiki/languages/shellscript.tmLanguage.json
rename to packages/ui/public/shiki/languages/shellscript.tmLanguage.json
diff --git a/packages/docs/public/shiki/languages/typescript.tmLanguage.json b/packages/ui/public/shiki/languages/typescript.tmLanguage.json
similarity index 100%
rename from packages/docs/public/shiki/languages/typescript.tmLanguage.json
rename to packages/ui/public/shiki/languages/typescript.tmLanguage.json
diff --git a/packages/docs/public/shiki/languages/vue-html.tmLanguage.json b/packages/ui/public/shiki/languages/vue-html.tmLanguage.json
similarity index 100%
rename from packages/docs/public/shiki/languages/vue-html.tmLanguage.json
rename to packages/ui/public/shiki/languages/vue-html.tmLanguage.json
diff --git a/packages/docs/public/shiki/languages/vue.tmLanguage.json b/packages/ui/public/shiki/languages/vue.tmLanguage.json
similarity index 100%
rename from packages/docs/public/shiki/languages/vue.tmLanguage.json
rename to packages/ui/public/shiki/languages/vue.tmLanguage.json
diff --git a/packages/docs/public/shiki/themes/indielayer.json b/packages/ui/public/shiki/themes/indielayer.json
similarity index 100%
rename from packages/docs/public/shiki/themes/indielayer.json
rename to packages/ui/public/shiki/themes/indielayer.json
diff --git a/packages/ui/src/common/icons.ts b/packages/ui/src/common/icons.ts
index e53fcd98..8dfc617e 100644
--- a/packages/ui/src/common/icons.ts
+++ b/packages/ui/src/common/icons.ts
@@ -11,5 +11,8 @@ export const dotsIcon = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2
 export const prevIcon = '<path d="M15 19l-7-7 7-7" />'
 export const nextIcon = '<path d="M9 5l7 7-7 7" />'
 export const checkIcon = '<path d="M5 13l4 4L19 7" />'
-export const chevronDownIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
+export const selectIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
 export const externalIcon = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />'
+export const stepperPristineIcon = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>'
+export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>'
+export const chevronDownIcon = '<path d="M19 9l-7 7-7-7" />'
diff --git a/packages/ui/src/components/accordion/Accordion.vue b/packages/ui/src/components/accordion/Accordion.vue
new file mode 100644
index 00000000..eed9dfa0
--- /dev/null
+++ b/packages/ui/src/components/accordion/Accordion.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+const accordionProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  icon: String,
+  iconAlign: String as PropType<AccordionItemAlign>,
+}
+
+export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
+
+type InternalClasses = 'wrapper'
+export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {}
+
+export default {
+  name: 'XAccordion',
+  validators: {},
+}
+</script>
+
+<script setup lang="ts">
+import { type ExtractPublicPropTypes, type PropType, provide } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import type { AccordionItemAlign } from './AccordionItem.vue'
+import { injectAccordionKey } from '../../composables/keys'
+
+const props = defineProps(accordionProps)
+
+provide(injectAccordionKey, props)
+
+const { styles, classes, className } = useTheme('Accordion', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/ui/src/components/collapse/Collapse.vue b/packages/ui/src/components/accordion/AccordionItem.vue
similarity index 65%
rename from packages/ui/src/components/collapse/Collapse.vue
rename to packages/ui/src/components/accordion/AccordionItem.vue
index 2cfd44b1..c1da33b8 100644
--- a/packages/ui/src/components/collapse/Collapse.vue
+++ b/packages/ui/src/components/accordion/AccordionItem.vue
@@ -1,35 +1,58 @@
 <script lang="ts">
-const collapseProps = {
-  ...useColors.props(),
+const accordionItemAlign = ['left', 'right'] as const
+const accordionItemProps = {
   tag: {
     type: String,
     default: 'div',
   },
   disabled: Boolean,
   expanded: Boolean,
-  showIcon: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
   icon: String,
+  iconAlign: {
+    type: String as PropType<AccordionItemAlign>,
+    default: 'right',
+  },
 }
 
-export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>
+export type AccordionItemAlign = typeof accordionItemAlign[number]
+export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProps>
 
 type InternalClasses = 'wrapper' | 'icon' | 'content'
-export interface CollapseTheme extends ThemeComponent<CollapseProps, InternalClasses> {}
+type InternalData = {
+  collapsed: boolean;
+}
+export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {}
 
-export default { name: 'XCollapse' }
+export default {
+  name: 'XAccordionItem',
+  validators: {
+    iconAlign: accordionItemAlign,
+  },
+}
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes, type PropType, inject, computed, reactive } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
-import { useColors } from '../../composables/useColors'
 
 import XIcon from '../../components/icon/Icon.vue'
+import { injectAccordionKey } from '../../composables/keys'
 
-const props = defineProps(collapseProps)
+const props = defineProps(accordionItemProps)
 
 const emit = defineEmits(['expand'])
 
+const accordionProps = inject(injectAccordionKey, {})
+
+const computedIconAlign = computed(() => accordionProps.iconAlign || props.iconAlign)
+const computedProps = reactive({
+  iconAlign: computedIconAlign,
+})
+
 const collapsed = ref(!props.expanded)
 const animated = ref(true)
 
@@ -101,7 +124,10 @@ function onExpand(anim = true) {
   emit('expand')
 }
 
-const { styles, classes, className } = useTheme('Collapse', {}, props)
+const { styles, classes, className } = useTheme('AccordionItem', {}, {
+  ...props,
+  ...computedProps,
+}, { collapsed })
 
 defineExpose({ toggle, open, close })
 </script>
@@ -114,7 +140,7 @@ defineExpose({ toggle, open, close })
     :aria-disabled="disabled"
     :aria-expanded="collapsed ? 'false' : 'true'"
   >
-    <div
+    <button
       :class="classes.wrapper"
       @click="toggle"
     >
@@ -123,29 +149,19 @@ defineExpose({ toggle, open, close })
       </div>
 
       <div v-if="showIcon" :class="classes.icon">
-        <span
-          class="flex transform transition-transform duration-150"
-          :class="[
-            {
-              'rotate-180': !collapsed,
-              'text-gray-300': disabled
-            }
-          ]"
+        <x-icon v-if="icon" :icon="icon" />
+        <svg
+          v-else
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          fill="none"
+          role="presentation"
+          class="stroke-2 w-4 h-4"
         >
-          <x-icon v-if="icon" :icon="icon" />
-          <svg
-            v-else
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            fill="none"
-            role="presentation"
-            class="stroke-2 w-5 h-5"
-          >
-            <path d="M19 9l-7 7-7-7" />
-          </svg>
-        </span>
+          <path d="M19 9l-7 7-7-7" />
+        </svg>
       </div>
-    </div>
+    </button>
 
     <template v-if="$slots.summary">
       <slot name="summary"></slot>
diff --git a/packages/ui/src/components/accordion/__tests__/Accordion.spec.ts b/packages/ui/src/components/accordion/__tests__/Accordion.spec.ts
new file mode 100644
index 00000000..e05ba011
--- /dev/null
+++ b/packages/ui/src/components/accordion/__tests__/Accordion.spec.ts
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Accordion from '../Accordion.vue'
+
+describe('Accordion', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Accordion)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})
diff --git a/packages/ui/src/components/accordion/index.ts b/packages/ui/src/components/accordion/index.ts
new file mode 100644
index 00000000..0a1ec84d
--- /dev/null
+++ b/packages/ui/src/components/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as XAccordion } from './Accordion.vue'
+export type { AccordionProps, AccordionTheme } from './Accordion.vue'
+export { default as XAccordionItem } from './AccordionItem.vue'
+export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue'
diff --git a/packages/ui/src/components/accordion/theme/Accordion.base.theme.ts b/packages/ui/src/components/accordion/theme/Accordion.base.theme.ts
new file mode 100644
index 00000000..416d17e4
--- /dev/null
+++ b/packages/ui/src/components/accordion/theme/Accordion.base.theme.ts
@@ -0,0 +1,9 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+const theme: AccordionTheme = {
+  classes: {
+    wrapper: 'grid grid-cols-1 divide-y',
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/accordion/theme/Accordion.carbon.theme.ts b/packages/ui/src/components/accordion/theme/Accordion.carbon.theme.ts
new file mode 100644
index 00000000..4905e525
--- /dev/null
+++ b/packages/ui/src/components/accordion/theme/Accordion.carbon.theme.ts
@@ -0,0 +1,9 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+const theme: AccordionTheme = {
+  classes: {
+    wrapper: 'grid grid-cols-1 divide-y border-b border-t',
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/accordion/theme/AccordionItem.base.theme.ts b/packages/ui/src/components/accordion/theme/AccordionItem.base.theme.ts
new file mode 100644
index 00000000..7bfa771a
--- /dev/null
+++ b/packages/ui/src/components/accordion/theme/AccordionItem.base.theme.ts
@@ -0,0 +1,35 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+const theme: AccordionItemTheme = {
+  classes: {
+    wrapper: ({ props, slots }) => {
+      const classes = ['relative flex items-center w-full text-left']
+
+      if (slots.default) {
+        classes.push('px-4 py-2')
+        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
+      }
+
+      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
+
+      if (!props.disabled) classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['flex transform transition-transform duration-150']
+
+      if (!data.collapsed) classes.push('rotate-180')
+      if (props.disabled) classes.push('text-gray-300')
+
+      if (props.iconAlign === 'left') classes.push('mr-4')
+
+      return classes
+    },
+
+    content: 'transition-[height] duration-150 overflow-y-hidden',
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/accordion/theme/AccordionItem.carbon.theme.ts b/packages/ui/src/components/accordion/theme/AccordionItem.carbon.theme.ts
new file mode 100644
index 00000000..747eb565
--- /dev/null
+++ b/packages/ui/src/components/accordion/theme/AccordionItem.carbon.theme.ts
@@ -0,0 +1,35 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+const theme: AccordionItemTheme = {
+  classes: {
+    wrapper: ({ props, slots }) => {
+      const classes = ['relative flex items-center w-full text-left']
+
+      if (slots.default) {
+        classes.push('px-4 py-2')
+        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
+      }
+
+      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
+
+      if (!props.disabled) classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['flex transform transition-transform duration-150']
+
+      if (!data.collapsed) classes.push('rotate-180')
+      if (props.disabled) classes.push('text-gray-300')
+
+      if (props.iconAlign === 'left') classes.push('mr-4')
+
+      return classes
+    },
+
+    content: 'px-4 pt-2 pb-6 transition-[height] duration-150 overflow-y-hidden',
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/alert/theme/Alert.carbon.theme.ts b/packages/ui/src/components/alert/theme/Alert.carbon.theme.ts
index 78656a72..501a9d86 100644
--- a/packages/ui/src/components/alert/theme/Alert.carbon.theme.ts
+++ b/packages/ui/src/components/alert/theme/Alert.carbon.theme.ts
@@ -1,7 +1,59 @@
 import type { AlertTheme } from '../Alert.vue'
 
-import BaseTheme from './Alert.base.theme'
+const theme: AlertTheme = {
+  classes: {
+    wrapper: 'flex items-center space-x-2 px-4 py-3 border border-l-4 text-sm',
+  },
+  styles: ({ props, colors, css }) => {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
 
-const theme: AlertTheme = BaseTheme
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+
+    if (props.color) {
+      if (props.light) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: gray[900],
+          icon: color[600],
+          border: props.outlined ? color[600] : color[50],
+          dark: {
+            bg: gray[800],
+            text: gray[100],
+            icon: color[600],
+            border: props.outlined ? color[500] : color[200],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: props.outlined ? 'transparent' : color[600],
+          text: props.outlined ? color[600] : color[50],
+          icon: props.outlined ? color[600] : color[50],
+          border: color[600],
+          dark: {
+            border: color[400],
+            text: props.outlined ? color[400] : color[50],
+          },
+        }))
+      }
+
+      return vars
+    }
+
+    vars.push(css.variables({
+      bg: 'transparent',
+      text: color[500],
+      border: color[300],
+      dark: {
+        bg: 'transparent',
+        text: color[300],
+        border: color[500],
+      },
+    }))
+
+    return vars
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/button/theme/Button.carbon.theme.ts b/packages/ui/src/components/button/theme/Button.carbon.theme.ts
index d2c73cc6..e7ca39d1 100644
--- a/packages/ui/src/components/button/theme/Button.carbon.theme.ts
+++ b/packages/ui/src/components/button/theme/Button.carbon.theme.ts
@@ -3,7 +3,7 @@ import type { ButtonTheme } from '../Button.vue'
 const theme: ButtonTheme = {
   classes: {
     wrapper({ props, slots, data }) {
-      const classes = ['relative transition duration-150 focus:outline-none inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
+      const classes = ['relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
 
       // radius
       if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : '')
diff --git a/packages/ui/src/components/checkbox/Checkbox.vue b/packages/ui/src/components/checkbox/Checkbox.vue
index 52031b4b..2c9e8cdb 100644
--- a/packages/ui/src/components/checkbox/Checkbox.vue
+++ b/packages/ui/src/components/checkbox/Checkbox.vue
@@ -4,15 +4,15 @@ const checkboxProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  label: String,
-  helper: String,
+  value: [String, Number],
+  indeterminate: Boolean,
   glow: Boolean,
 }
 
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>
 
-type InternalClasses = 'wrapper' | 'box' | 'icon' | 'label'
-type InternalExtraData = { checked: Ref<boolean>; }
+type InternalClasses = 'wrapper' | 'content' | 'box' | 'icon' | 'label'
+type InternalExtraData = { checked: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean;}
 export interface CheckboxTheme extends ThemeComponent<CheckboxProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -24,7 +24,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes, type Ref, unref, nextTick } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
@@ -41,14 +41,6 @@ const emit = defineEmits(useInputtable.emits(false))
 const elRef = ref<HTMLElement | null>(null)
 const checked = ref(false)
 
-watch(() => props.modelValue, (value) => {
-  checked.value = !!value
-}, { immediate: true })
-
-watch(() => checked.value, (value) => {
-  emit('update:modelValue', value)
-})
-
 function toggle() {
   checked.value = !checked.value
 }
@@ -57,13 +49,69 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
   reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('Checkbox', {}, props, { checked })
+if (isInsideFormGroup) {
+  watch(() => formGroup.value, () => {
+    const formGroupValue = unref(formGroup.value)
+
+    if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) checked.value = true
+    else checked.value = false
+  }, { immediate: true, deep: true })
+
+  watch(() => checked.value, (value) => {
+    if (!props.value) return
+
+    const formGroupValue = unref(formGroup.value)
+
+    if (value) {
+      if (formGroupValue && Array.isArray(formGroupValue)) {
+        if (!formGroupValue.includes(props.value as never)) {
+          const newValue = [...formGroupValue, props.value]
+
+          formGroup.setValue(newValue as any)
+        }
+      } else {
+        formGroup.setValue([props.value as any])
+      }
+    } else {
+      if (formGroupValue && Array.isArray(formGroupValue) && formGroupValue.includes(props.value as never)) {
+        const index = formGroupValue.findIndex((v) => v === props.value)
+        const newValue = [...formGroupValue]
+
+        newValue.splice(index, 1)
+        formGroup.setValue(newValue as any)
+      }
+    }
+  })
+} else {
+  watch(() => props.modelValue, (value) => {
+    checked.value = !!value
+  }, { immediate: true })
+
+  watch(() => checked.value, (value) => {
+    emit('update:modelValue', value)
+  })
+}
+
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
+
+const { styles, classes, className } = useTheme('Checkbox', {}, props, { checked, isInsideForm, isInsideFormGroup })
 
 defineExpose({ focus, blur, toggle, reset, validate, setError })
 </script>
@@ -74,25 +122,25 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm }
     ]"
   >
     <div
       ref="elRef"
-      class="flex items-center"
-      :class="{ 'cursor-not-allowed': disabled }"
+      :class="classes.content"
       tabindex="0"
       @keypress.prevent.stop.space="toggle"
     >
       <input
+        :id="id"
         v-model="checked"
-        :aria-checked="checked ? 'true' : 'false'"
+        :name="name"
+        :aria-checked="indeterminate ? 'mixed' : (checked ? 'true' : 'false')"
         :aria-disabled="disabled ? 'true' : undefined"
         type="checkbox"
         class="invisible absolute"
         :disabled="disabled || loading"
-        :name="name"
         :required="required"
+        v-on="listeners"
       />
       <div
         :class="[
@@ -101,6 +149,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
+        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-gray-900"></span>
         <slot v-else name="icon">
           <svg
             viewBox="0 0 20 20"
@@ -116,7 +165,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 
diff --git a/packages/ui/src/components/checkbox/theme/Checkbox.base.theme.ts b/packages/ui/src/components/checkbox/theme/Checkbox.base.theme.ts
index 1425273f..1c47747b 100644
--- a/packages/ui/src/components/checkbox/theme/Checkbox.base.theme.ts
+++ b/packages/ui/src/components/checkbox/theme/Checkbox.base.theme.ts
@@ -2,7 +2,13 @@ import type { CheckboxTheme } from '../Checkbox.vue'
 
 const theme: CheckboxTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer align-middle',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm) classes.push('mb-3')
+
+      return classes
+    },
 
     box: ({ props }) => {
       const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
@@ -14,6 +20,14 @@ const theme: CheckboxTheme = {
       return classes
     },
 
+    content: ({ props }) => {
+      const classes = ['flex items-center']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
     icon: ({ props }) => {
       const classes = ['fill-current text-white dark:text-gray-900']
 
diff --git a/packages/ui/src/components/checkbox/theme/Checkbox.carbon.theme.ts b/packages/ui/src/components/checkbox/theme/Checkbox.carbon.theme.ts
index 0b325844..1d30fdc6 100644
--- a/packages/ui/src/components/checkbox/theme/Checkbox.carbon.theme.ts
+++ b/packages/ui/src/components/checkbox/theme/Checkbox.carbon.theme.ts
@@ -2,10 +2,16 @@ import type { CheckboxTheme } from '../Checkbox.vue'
 
 const theme: CheckboxTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer align-middle',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer align-middle']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
 
     box: ({ props }) => {
-      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+      const classes = ['rounded-sm flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)] mt-0.5']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-5 w-5')
@@ -14,6 +20,14 @@ const theme: CheckboxTheme = {
       return classes
     },
 
+    content: ({ props }) => {
+      const classes = ['flex']
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+
+      return classes
+    },
+
     icon: ({ props }) => {
       const classes = ['fill-current text-white dark:text-gray-900']
 
@@ -25,7 +39,7 @@ const theme: CheckboxTheme = {
     },
 
     label: ({ props }) => {
-      const classes = ['inline-block text-gray-800 dark:text-gray-200 pl-2 text-sm']
+      const classes = ['text-gray-800 dark:text-gray-200 pl-2 text-sm']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')
diff --git a/packages/ui/src/components/collapse/index.ts b/packages/ui/src/components/collapse/index.ts
deleted file mode 100644
index 0f3f8176..00000000
--- a/packages/ui/src/components/collapse/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as XCollapse } from './Collapse.vue'
-export type { CollapseProps, CollapseTheme } from './Collapse.vue'
diff --git a/packages/ui/src/components/collapse/theme/Collapse.base.theme.ts b/packages/ui/src/components/collapse/theme/Collapse.base.theme.ts
deleted file mode 100644
index 8dcfcc07..00000000
--- a/packages/ui/src/components/collapse/theme/Collapse.base.theme.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { CollapseTheme } from '../Collapse.vue'
-
-const theme: CollapseTheme = {
-  classes: {
-    wrapper: ({ props }) => `relative flex items-center ${props.icon ?  'flex-row-reverse' : ''} ${props.disabled ? '' : 'cursor-pointer'}`,
-
-    icon: 'absolute top-1/2 transform -translate-y-1/2 right-3',
-
-    content: 'transition-[height] duration-150 overflow-y-hidden',
-  },
-}
-
-export default theme
diff --git a/packages/ui/src/components/collapse/theme/Collapse.carbon.theme.ts b/packages/ui/src/components/collapse/theme/Collapse.carbon.theme.ts
deleted file mode 100644
index 888f53cb..00000000
--- a/packages/ui/src/components/collapse/theme/Collapse.carbon.theme.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { CollapseTheme } from '../Collapse.vue'
-
-import BaseTheme from './Collapse.base.theme'
-
-const theme: CollapseTheme = BaseTheme
-
-export default theme
diff --git a/packages/ui/src/components/form/Form.vue b/packages/ui/src/components/form/Form.vue
index d2e07128..87556bfb 100644
--- a/packages/ui/src/components/form/Form.vue
+++ b/packages/ui/src/components/form/Form.vue
@@ -13,6 +13,12 @@ const formProps = {
     type: [Array, Object] as PropType<[FormError[], FormError]>,
     default: () => ([]),
   },
+  title: String,
+  description: String,
+  hasFooter: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type FormProps = ExtractPublicPropTypes<typeof formProps>
@@ -35,12 +41,11 @@ export type FormInput = {
   setError: (val: string) => void;
 }
 
-type InternalClasses = 'wrapper'
+type InternalClasses = 'wrapper' | 'content' | 'title' | 'description' | 'footer'
 export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {}
 
 export default {
   name: 'XForm',
-  inheritAttrs: false,
 }
 </script>
 
@@ -73,8 +78,10 @@ provide(injectFormKey, {
   isInsideForm: true,
 })
 
-onMounted(() => {
-  if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
+onMounted(async () => {
+  if (props.autoFocus && inputs && inputs.length > 0) {
+    setTimeout(inputs[0].focus, 50)
+  }
 })
 
 watch(() => props.errors, (errors) => {
@@ -131,8 +138,22 @@ const { styles, classes, className } = useTheme('Form', {}, props)
     ]"
     @submit="submit"
   >
-    <fieldset :disabled="disabled">
+    <slot name="header">
+      <div v-if="title || description" class="mb-10">
+        <p v-if="title" :class="classes.title">{{ title }}</p>
+        <p v-if="description" :class="classes.description">{{ description }}</p>
+      </div>
+    </slot>
+
+    <fieldset :disabled="disabled" :class="classes.content">
       <slot></slot>
     </fieldset>
+
+    <slot v-if="hasFooter" name="footer">
+      <div :class="classes.footer">
+        <slot name="primary-action"></slot>
+        <slot name="secondary-action"></slot>
+      </div>
+    </slot>
   </form>
 </template>
diff --git a/packages/ui/src/components/form/theme/Form.base.theme.ts b/packages/ui/src/components/form/theme/Form.base.theme.ts
index cd250e2e..b6a7c380 100644
--- a/packages/ui/src/components/form/theme/Form.base.theme.ts
+++ b/packages/ui/src/components/form/theme/Form.base.theme.ts
@@ -2,7 +2,15 @@ import type { FormTheme } from '../Form.vue'
 
 const theme: FormTheme = {
   classes: {
-    wrapper: '',
+    wrapper: 'relative',
+
+    content: '',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'space-x-4 mt-4',
   },
 }
 
diff --git a/packages/ui/src/components/form/theme/Form.carbon.theme.ts b/packages/ui/src/components/form/theme/Form.carbon.theme.ts
index c47565b4..e6d822b6 100644
--- a/packages/ui/src/components/form/theme/Form.carbon.theme.ts
+++ b/packages/ui/src/components/form/theme/Form.carbon.theme.ts
@@ -1,7 +1,17 @@
 import type { FormTheme } from '../Form.vue'
 
-import BaseTheme from './Form.base.theme'
+const theme: FormTheme = {
+  classes: {
+    wrapper: 'relative',
 
-const theme: FormTheme = BaseTheme
+    content: 'grid',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'grid grid-cols-2 gap-4 lg:flex mt-8',
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/formGroup/FormGroup.vue b/packages/ui/src/components/formGroup/FormGroup.vue
new file mode 100644
index 00000000..abd0bae6
--- /dev/null
+++ b/packages/ui/src/components/formGroup/FormGroup.vue
@@ -0,0 +1,116 @@
+<script lang="ts">
+const formGroupProps = {
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>
+
+export type FormGroupInjection = {
+  registerInputGroup: (name: string, focus: () => void) => void;
+  unregisterInputGroup: (name: string) => void;
+  setValue: (val: string | number | string[] | number[]) => void;
+  value: MaybeRef<string | number | string[] | number[] | null | undefined>;
+  isInsideFormGroup: boolean;
+}
+
+export type FormGroupInput = {
+  name: string;
+  focus: () => void;
+}
+
+type InternalClasses = 'wrapper'
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {}
+
+export default {
+  name: 'XFormGroup',
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { injectFormGroupKey } from '../../composables/keys'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(formGroupProps)
+
+const inputs: FormGroupInput[] = []
+
+const value = computed<string | number | string[] | number[]>(() => {
+  if (typeof props.modelValue === 'string') return props.modelValue
+  if (typeof props.modelValue === 'number') return props.modelValue
+  if (Array.isArray(props.modelValue)) return props.modelValue
+
+  return ''
+})
+
+provide(injectFormGroupKey, {
+  registerInputGroup: (name: string, focus: () => void) => {
+    inputs.push({ name, focus })
+  },
+  unregisterInputGroup: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
+
+    inputs.splice(index, 1)
+  },
+  setValue: (val) => {
+    emit('update:modelValue', val)
+  },
+  isInsideFormGroup: true,
+  value,
+})
+
+function focus() {
+  inputs[0]?.focus()
+}
+
+const emit = defineEmits(useInputtable.emits())
+
+const {
+  errorInternal,
+  isInsideForm,
+  isFirstValidation,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const listeners = {
+  change: (event: Event) => {
+    if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+  },
+}
+
+const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    tag="fieldset"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
+    :class="[
+      className,
+    ]"
+    v-on="listeners"
+  >
+    <div :class="classes.wrapper">
+      <slot></slot>
+    </div>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
+</template>
diff --git a/packages/ui/src/components/formGroup/__tests__/FormGroup.spec.ts b/packages/ui/src/components/formGroup/__tests__/FormGroup.spec.ts
new file mode 100644
index 00000000..4e2ff3ef
--- /dev/null
+++ b/packages/ui/src/components/formGroup/__tests__/FormGroup.spec.ts
@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormGroup from '../FormGroup.vue'
+
+describe('FormGroup', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(FormGroup)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})
diff --git a/packages/ui/src/components/formGroup/index.ts b/packages/ui/src/components/formGroup/index.ts
new file mode 100644
index 00000000..c330a5a9
--- /dev/null
+++ b/packages/ui/src/components/formGroup/index.ts
@@ -0,0 +1,2 @@
+export { default as XFormGroup } from './FormGroup.vue'
+export type { FormGroupProps, FormGroupInjection, FormGroupInput, FormGroupTheme } from './FormGroup.vue'
diff --git a/packages/ui/src/components/formGroup/theme/FormGroup.base.theme.ts b/packages/ui/src/components/formGroup/theme/FormGroup.base.theme.ts
new file mode 100644
index 00000000..c96a542b
--- /dev/null
+++ b/packages/ui/src/components/formGroup/theme/FormGroup.base.theme.ts
@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-2')
+      else classes.push('grid gap-1')
+
+      return classes
+    },
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/formGroup/theme/FormGroup.carbon.theme.ts b/packages/ui/src/components/formGroup/theme/FormGroup.carbon.theme.ts
new file mode 100644
index 00000000..3210c5f9
--- /dev/null
+++ b/packages/ui/src/components/formGroup/theme/FormGroup.carbon.theme.ts
@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-4')
+      else classes.push('grid gap-3')
+
+      return classes
+    },
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/icon/theme/Icon.base.theme.ts b/packages/ui/src/components/icon/theme/Icon.base.theme.ts
index 8ad1418a..17452121 100644
--- a/packages/ui/src/components/icon/theme/Icon.base.theme.ts
+++ b/packages/ui/src/components/icon/theme/Icon.base.theme.ts
@@ -3,7 +3,7 @@ import type { IconTheme } from '../Icon.vue'
 const theme: IconTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = 'inline'
+      const classes = 'inline shrink-0'
 
       if (props.size === 'xs') return classes + ' h-3 w-3'
       else if (props.size === 'sm') return classes + ' h-4 w-4'
diff --git a/packages/ui/src/components/icon/theme/Icon.carbon.theme.ts b/packages/ui/src/components/icon/theme/Icon.carbon.theme.ts
index 53274c80..76c8bf2d 100644
--- a/packages/ui/src/components/icon/theme/Icon.carbon.theme.ts
+++ b/packages/ui/src/components/icon/theme/Icon.carbon.theme.ts
@@ -3,12 +3,11 @@ import type { IconTheme } from '../Icon.vue'
 const theme: IconTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = 'inline'
+      const classes = 'inline shrink-0'
 
       if (props.size === 'xs') return classes + ' h-3 w-3'
-      else if (props.size === 'sm') return classes + ' h-4 w-4'
-      else if (props.size === 'lg') return classes + ' h-6 w-6'
-      else if (props.size === 'xl') return classes + ' h-9 w-9'
+      else if (props.size === 'lg') return classes + ' h-5 w-5'
+      else if (props.size === 'xl') return classes + ' h-8 w-8'
 
       return classes + ' h-4 w-4'
     },
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index a6f1b0a0..05d6278a 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './accordion'
 export * from './alert'
 export * from './avatar'
 export * from './badge'
@@ -6,11 +7,11 @@ export * from './button'
 export * from './card'
 export * from './carousel'
 export * from './checkbox'
-export * from './collapse'
 export * from './container'
 export * from './divider'
 export * from './drawer'
 export * from './form'
+export * from './formGroup'
 export * from './icon'
 export * from './image'
 export * from './input'
@@ -31,6 +32,7 @@ export * from './skeleton'
 export * from './slider'
 export * from './spacer'
 export * from './spinner'
+export * from './stepper'
 export * from './tab'
 export * from './table'
 export * from './tag'
diff --git a/packages/ui/src/components/input/Input.vue b/packages/ui/src/components/input/Input.vue
index 9123cd67..0ac0c5b3 100755
--- a/packages/ui/src/components/input/Input.vue
+++ b/packages/ui/src/components/input/Input.vue
@@ -8,8 +8,6 @@ const inputProps = {
     type: Boolean,
     default: true,
   },
-  helper: String,
-  label: String,
   dir: {
     type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr',
@@ -91,6 +89,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -128,6 +127,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
 
       <input
+        :id="id"
         ref="elRef"
         :class="[
           classes.input,
@@ -176,6 +176,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>
diff --git a/packages/ui/src/components/input/theme/Input.carbon.theme.ts b/packages/ui/src/components/input/theme/Input.carbon.theme.ts
index d6096cab..8d66d2b3 100644
--- a/packages/ui/src/components/input/theme/Input.carbon.theme.ts
+++ b/packages/ui/src/components/input/theme/Input.carbon.theme.ts
@@ -18,7 +18,7 @@ const theme: InputTheme = {
       } else if (props.readonly) {
         classes.push('bg-white dark:bg-gray-900 text-gray-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
       }
 
       return classes
diff --git a/packages/ui/src/components/inputFooter/theme/InputFooter.base.theme.ts b/packages/ui/src/components/inputFooter/theme/InputFooter.base.theme.ts
index 042046fb..a4e7a7bb 100644
--- a/packages/ui/src/components/inputFooter/theme/InputFooter.base.theme.ts
+++ b/packages/ui/src/components/inputFooter/theme/InputFooter.base.theme.ts
@@ -2,7 +2,7 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 
 const theme: InputFooterTheme = {
   classes: {
-    wrapper: 'min-h-[1rem] text-sm mt-1',
+    wrapper: 'min-h-[1.3rem] text-sm mt-1',
     helperText: 'text-gray-500 dark:text-gray-400',
     errorText: 'text-red-500 dark:text-red-400',
   },
diff --git a/packages/ui/src/components/inputFooter/theme/InputFooter.carbon.theme.ts b/packages/ui/src/components/inputFooter/theme/InputFooter.carbon.theme.ts
index 9a7258db..d6a4d07c 100644
--- a/packages/ui/src/components/inputFooter/theme/InputFooter.carbon.theme.ts
+++ b/packages/ui/src/components/inputFooter/theme/InputFooter.carbon.theme.ts
@@ -2,7 +2,7 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 
 const theme: InputFooterTheme = {
   classes: {
-    wrapper: 'min-h-[1rem] text-xs mt-1',
+    wrapper: 'text-xs mt-1',
     helperText: 'text-gray-500 dark:text-gray-400',
     errorText: 'text-red-500 dark:text-red-400',
   },
diff --git a/packages/ui/src/components/label/theme/Label.carbon.theme.ts b/packages/ui/src/components/label/theme/Label.carbon.theme.ts
index b147010c..4859136a 100644
--- a/packages/ui/src/components/label/theme/Label.carbon.theme.ts
+++ b/packages/ui/src/components/label/theme/Label.carbon.theme.ts
@@ -1,10 +1,15 @@
 import type { LabelTheme } from '../Label.vue'
 
-import BaseTheme from './Label.base.theme'
-
 const theme: LabelTheme = {
   classes: {
-    wrapper: BaseTheme.classes?.wrapper,
+    wrapper: ({ props }) => {
+      const classes  = ['block relative align-bottom focus:outline-none']
+
+      if (props.isInsideForm) classes.push('mb-8')
+      if (props.block) classes.push('w-full')
+
+      return classes
+    },
 
     label: 'text-xs text-gray-500 dark:text-gray-200 mb-2',
   },
diff --git a/packages/ui/src/components/link/Link.vue b/packages/ui/src/components/link/Link.vue
index 1845659d..75a26a16 100644
--- a/packages/ui/src/components/link/Link.vue
+++ b/packages/ui/src/components/link/Link.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 const linkProps = {
-  ...useColors.props(),
+  ...useColors.props('primary'),
   tag: {
     type: String,
     default: 'a',
diff --git a/packages/ui/src/components/link/theme/Link.carbon.theme.ts b/packages/ui/src/components/link/theme/Link.carbon.theme.ts
index 3f60484a..1a6947f1 100644
--- a/packages/ui/src/components/link/theme/Link.carbon.theme.ts
+++ b/packages/ui/src/components/link/theme/Link.carbon.theme.ts
@@ -1,7 +1,28 @@
 import type { LinkTheme } from '../Link.vue'
 
-import BaseTheme from './Link.base.theme'
+const theme: LinkTheme = {
+  classes: {
+    wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex text-sm',
+  },
 
-const theme: LinkTheme = BaseTheme
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color || 'gray')
+
+    return css.variables({
+      text: props.color ? color[600] : '',
+      hover: {
+        text: !props.shadow ? color[700] : '',
+      },
+      shadow: color[100],
+      dark: {
+        text: props.color ? color[400] : '',
+        hover: {
+          text: color[300],
+        },
+        shadow: color[900],
+      },
+    })
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/loader/theme/Loader.carbon.theme.ts b/packages/ui/src/components/loader/theme/Loader.carbon.theme.ts
index a0555358..0b792b83 100644
--- a/packages/ui/src/components/loader/theme/Loader.carbon.theme.ts
+++ b/packages/ui/src/components/loader/theme/Loader.carbon.theme.ts
@@ -5,7 +5,7 @@ const theme: LoaderTheme = {
     wrapper: 'inline-flex items-center justify-center',
     iconSuccess: 'text-green-500',
     iconError: 'text-red-500',
-    label: 'mx-1 text-sm',
+    label: 'mx-2 text-sm',
   },
 }
 
diff --git a/packages/ui/src/components/menu/Menu.vue b/packages/ui/src/components/menu/Menu.vue
index 3067e8cd..2fc1c0f6 100644
--- a/packages/ui/src/components/menu/Menu.vue
+++ b/packages/ui/src/components/menu/Menu.vue
@@ -65,12 +65,12 @@ import { useColors } from '../../composables/useColors'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XMenuItem from './MenuItem.vue'
-import XCollapse from '../../components/collapse/Collapse.vue'
+import XAccordionItem from '../../components/accordion/AccordionItem.vue'
 import XDivider from '../../components/divider/Divider.vue'
 
 const props = defineProps(menuProps)
 
-defineEmits(['expand'])
+defineEmits(['expand', 'item-click'])
 
 const { styles, classes, className } = useTheme('Menu', {}, props)
 </script>
@@ -87,7 +87,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
   >
     <template v-for="(item, index) in items" :key="index">
       <template v-if="item.items">
-        <x-collapse
+        <x-accordion-item
           v-if="item.collapsible !== false"
           :icon="item.collapseIcon || collapseIcon"
           :expanded="item.expanded || expanded"
@@ -121,9 +121,10 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :rounded="rounded"
               :filled="filled"
               @expand="expand(false)"
+              @item-click="$emit('item-click')"
             />
           </template>
-        </x-collapse>
+        </x-accordion-item>
         <template v-else>
           <x-menu-item
             :item="item"
@@ -134,6 +135,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             :disabled="disabled || item.disabled"
             class="font-medium"
             inactive
+            @click="$emit('item-click')"
           />
           <x-menu
             class="x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700"
@@ -162,6 +164,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
           :size="item.size || size"
           :disabled="disabled || item.disabled"
           :class="{ 'my-2': item.divider }"
+          @click="$emit('item-click')"
           @active="$emit('expand')"
         />
       </template>
diff --git a/packages/ui/src/components/menu/MenuItem.vue b/packages/ui/src/components/menu/MenuItem.vue
index 1f5108d2..f51ae2da 100644
--- a/packages/ui/src/components/menu/MenuItem.vue
+++ b/packages/ui/src/components/menu/MenuItem.vue
@@ -128,7 +128,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
     ref="elRef"
     v-bind="computedProps.attrs"
     :to="computedProps.to"
-    :href="computedProps.href"
+    :href="computedProps.href || computedProps.to || ''"
     :target="computedProps.target"
     :color="computedProps.color"
     :style="styles"
diff --git a/packages/ui/src/components/menu/theme/MenuItem.base.theme.ts b/packages/ui/src/components/menu/theme/MenuItem.base.theme.ts
index ddf3ba81..5de2bb6d 100644
--- a/packages/ui/src/components/menu/theme/MenuItem.base.theme.ts
+++ b/packages/ui/src/components/menu/theme/MenuItem.base.theme.ts
@@ -44,10 +44,10 @@ const theme: MenuItemTheme = {
             text: color[500],
           },
           dark: {
-            bg: props.selected ? color[800] : color[700],
+            bg: props.selected ? color[700] : color[700],
             text: color[100],
             hover: {
-              bg: props.selected ? color[800] : color[700],
+              bg: props.selected ? color[700] : color[700],
               text: color[100],
             },
           },
diff --git a/packages/ui/src/components/modal/Modal.vue b/packages/ui/src/components/modal/Modal.vue
index 5a05af40..6f60399f 100644
--- a/packages/ui/src/components/modal/Modal.vue
+++ b/packages/ui/src/components/modal/Modal.vue
@@ -3,18 +3,49 @@ const modalSize = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
 const modalProps = {
   size: {
     type: String as PropType<ModalSize>,
-    default: 'md',
+    default: 'xl',
   },
   modelValue: Boolean,
   showClose: Boolean,
   backdrop: Boolean,
+  hasActions: {
+    type: Boolean,
+    default: true,
+  },
+  hasHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: String,
+  description: String,
+  label: String,
+  loading: Boolean,
+  loadingText: String,
+  fluid: Boolean,
+
+  // form props
+  isForm: Boolean,
+  formDisabled: Boolean,
+  formDescription: String,
+  formTitle: String,
+  formAutoValidate: {
+    type: Boolean,
+    default: true,
+  },
+  formErrors: {
+    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    default: () => ([]),
+  },
 }
 
 export type ModalSize = typeof modalSize[number]
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
 
-type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions'
-export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses> {}
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label'
+type InternaData = {
+  visible: boolean;
+}
+export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses, InternaData> {}
 
 export default {
   name: 'XModal',
@@ -25,21 +56,27 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { ref, watch, type PropType, type ExtractPublicPropTypes, computed, nextTick, onMounted } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useFocusTrap } from '../../composables/useFocusTrap'
 import { closeIcon } from '../../common/icons'
 
-import XScroll from '../../components/scroll/Scroll.vue'
-import XIcon from '../icon/Icon.vue'
+import XButton from '../button/Button.vue'
+import XScroll from '../scroll/Scroll.vue'
+import XForm, { type FormError } from '../form/Form.vue'
+import { useSlots } from 'vue'
 
 const props = defineProps(modalProps)
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'submit'])
 
 const value = ref(props.modelValue)
 const visible = ref(false)
 const modalRef = ref<HTMLElement | null>(null)
+const modalWrapperRef = ref<HTMLElement | null>(null)
+
+const { initFocusTrap, clearFocusTrap } = useFocusTrap()
 
 let stopClickOutside: undefined | (() => void) = undefined
 
@@ -56,21 +93,29 @@ watch(value, (val) => {
   }
 })
 
-watch(() => props.modelValue, (val) => {
+watch(() => props.modelValue, checkVisibiliy, { immediate: true })
+
+async function checkVisibiliy() {
+  const val = props.modelValue
+
   if (val) {
     value.value = val
 
-    setTimeout(() => {
-      visible.value = val
-    })
-  } else {
+    await nextTick()
+
     visible.value = val
 
-    setTimeout(() => {
-      value.value = val
-    }, 150)
+    await nextTick()
+
+    initFocusTrap(modalRef)
+    document.body.style.overflow = 'hidden'
+  } else {
+    visible.value = val
+    value.value = val
+    clearFocusTrap()
+    document.body.style.overflow = 'auto'
   }
-})
+}
 
 if (typeof window !== 'undefined') useEventListener(document, 'keydown', onKeyDown)
 
@@ -80,23 +125,27 @@ function onKeyDown(event: KeyboardEvent) {
 
 function close() {
   visible.value = false
-
   setTimeout(() => {
-    value.value = false
     emit('update:modelValue', false)
   }, 150)
 }
 
 function open() {
-  value.value = true
   emit('update:modelValue', true)
-
-  setTimeout(() => {
-    visible.value = true
-  })
+  visible.value = true
 }
 
-const { styles, classes, className } = useTheme('Modal', {}, props)
+const slots = useSlots()
+
+const hasPlaceholder = computed(() => {
+  if (slots['tertiary-action'] || slots['cancel-action']) return true
+
+  return false
+})
+
+const { styles, classes, className } = useTheme('Modal', {}, props, {
+  visible,
+})
 
 defineExpose({ open, close })
 </script>
@@ -105,6 +154,7 @@ defineExpose({ open, close })
   <teleport to="body">
     <div
       v-if="value"
+      ref="modalWrapperRef"
       :style="styles"
       :class="[
         className,
@@ -114,38 +164,32 @@ defineExpose({ open, close })
     >
       <div
         v-if="backdrop"
-        :class="[
-          classes.backdrop,
-          visible ? 'ease-out duration-200 opacity-30 dark:opacity-70' : 'ease-in duration-100 opacity-0',
-        ]"
+        :class="classes.backdrop"
       ></div>
 
       <div class="flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen">
-        <div
+        <component
+          :is="isForm ? XForm : 'div'"
           ref="modalRef"
-          :class="[
-            classes.modal,
-            visible ?
-              'ease-out duration-200 opacity-100 translate-y-0 sm:scale-100'
-              : 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-          ]"
+          :disabled="formDisabled"
+          :auto-validate="formAutoValidate"
+          :title="formTitle"
+          :description="formDescription"
+          :errors="formErrors"
+          :class="classes.modal"
+          auto-focus
+          :has-footer="false"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
+          @submit="$emit('submit')"
         >
-          <div
-            v-if="showClose"
-            :class="[
-              classes.closeIcon,
-              $slots.image ? 'bg-gray-900 text-white' : 'bg-gray-500 text-gray-800 dark:text-gray-300'
-            ]"
-            @click="close"
-          >
-            <x-icon :icon="closeIcon"/>
-          </div>
           <slot name="image"></slot>
-          <div v-if="$slots.header" :class="classes.header">
-            <slot name="header"></slot>
+          <div v-if="hasHeader" :class="classes.header">
+            <slot name="header">
+              <div v-if="label" :class="classes.label">{{ label }}</div>
+              <div v-if="title" :class="classes.title">{{ title }}</div>
+            </slot>
           </div>
           <x-scroll
             v-if="$slots.default"
@@ -153,13 +197,29 @@ defineExpose({ open, close })
             vertical
           >
             <div :class="classes.content">
+              <div v-if="description" :class="classes.description">{{ description }}</div>
               <slot></slot>
             </div>
           </x-scroll>
-          <div v-if="$slots.actions" :class="classes.actions">
-            <slot name="actions"></slot>
+          <x-button
+            v-if="showClose"
+            ghost
+            size="lg"
+            tabindex="-1"
+            :icon="closeIcon"
+            :class="classes.closeIcon"
+            @click="close"
+          />
+          <div v-if="hasActions" :class="classes.actions">
+            <slot name="actions">
+              <slot name="cancel-action"></slot>
+              <div v-if="hasPlaceholder"></div>
+              <slot name="tertiary-action"></slot>
+              <slot name="secondary-action"></slot>
+              <slot name="primary-action"></slot>
+            </slot>
           </div>
-        </div>
+        </component>
       </div>
     </div>
   </teleport>
diff --git a/packages/ui/src/components/modal/theme/Modal.base.theme.ts b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
index 725d5c79..8edcab95 100644
--- a/packages/ui/src/components/modal/theme/Modal.base.theme.ts
+++ b/packages/ui/src/components/modal/theme/Modal.base.theme.ts
@@ -4,27 +4,43 @@ const theme: ModalTheme = {
   classes: {
     wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
 
-    backdrop: 'fixed inset-0 bg-gray-500 dark:bg-black transition-opacity',
+    backdrop: ({ data }) => {
+      const classes = ['fixed inset-0 bg-gray-500 dark:bg-black transition-opacity']
 
-    modal: ({ props }) => {
-      let c = 'relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full'
+      if (data.visible) classes.push('ease-out duration-200 opacity-30 dark:opacity-70')
+      else classes.push('ease-in duration-100 opacity-0')
 
-      if (props.size === 'xs') c += ' sm:max-w-xs'
-      else if (props.size === 'sm') c += ' sm:max-w-sm'
-      else if (props.size === 'lg') c += ' sm:max-w-xl'
-      else if (props.size === 'xl') c += ' sm:max-w-3xl'
-      else c += ' sm:max-w-lg'
+      return classes
+    },
+
+    modal: ({ props, data }) => {
+      const classes = ['relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-100 translate-y-0 sm:scale-100')
+      else classes.push('ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
+
+      if (props.size === 'xs') classes.push('sm:max-w-xs')
+      else if (props.size === 'sm') classes.push('sm:max-w-sm')
+      else if (props.size === 'lg') classes.push('sm:max-w-xl')
+      else if (props.size === 'xl') classes.push('sm:max-w-3xl')
+      else classes.push('sm:max-w-lg')
 
-      return c
+      return classes
     },
 
-    closeIcon: 'flex absolute p-1 top-4 z-10 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer',
+    closeIcon: '!absolute top-2 z-10 right-2',
 
-    header: 'text-lg font-semibold px-6 py-4 border-b',
+    header: 'text-lg pl-6 py-4 border-b pr-12',
 
     content: 'px-6 py-4',
 
-    actions: 'bg-slate-50 dark:bg-gray-800 p-4',
+    actions: 'bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4',
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl font-semibold mb-4',
+
+    description: 'text-sm',
   },
 }
 
diff --git a/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts b/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts
index a9ebc64e..932e71e7 100644
--- a/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts
+++ b/packages/ui/src/components/modal/theme/Modal.carbon.theme.ts
@@ -1,7 +1,60 @@
 import type { ModalTheme } from '../Modal.vue'
 
-import BaseTheme from './Modal.base.theme'
+const theme: ModalTheme = {
+  classes: {
+    wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
 
-const theme: ModalTheme = BaseTheme
+    backdrop: ({ data }) => {
+      const classes = ['fixed inset-0 bg-gray-500 dark:bg-black transition-opacity']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-70 dark:opacity-70')
+      else classes.push('ease-in duration-100 opacity-0')
+
+      return classes
+    },
+
+    modal: ({ props, data }) => {
+      const classes = ['relative flex flex-col z-10 bg-gray-200 dark:bg-gray-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-100 translate-y-0 sm:scale-100')
+      else classes.push('ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
+
+      if (props.size === 'xs') classes.push('sm:max-w-xs')
+      else if (props.size === 'sm') classes.push('sm:max-w-sm')
+      else if (props.size === 'lg') classes.push('sm:max-w-xl')
+      else if (props.size === 'xl') classes.push('sm:max-w-3xl')
+      else classes.push('sm:max-w-lg')
+
+      return classes
+    },
+
+    closeIcon: '!absolute top-0 z-10 right-0',
+
+    header: 'text-lg pl-4 pt-4 pr-12',
+
+    content: ({ props }) => {
+      const classes = ['pb-8']
+
+      if (!props.fluid) classes.push('px-4')
+
+      return classes
+    },
+
+    actions: ({ props, slots }) => {
+      const classes = ['grid grid-flow-col gap-[1px]']
+
+      if (slots['tertiary-action'] || slots['cancel-action']) classes.push('grid-cols-4')
+      else classes.push('grid-cols-2')
+
+      return classes
+    },
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl mb-4',
+
+    description: 'text-sm mb-4',
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/notifications/Notifications.vue b/packages/ui/src/components/notifications/Notifications.vue
index 7620bedc..71c8134e 100644
--- a/packages/ui/src/components/notifications/Notifications.vue
+++ b/packages/ui/src/components/notifications/Notifications.vue
@@ -286,25 +286,25 @@ defineExpose({ log, info, success, warn, warning: warn, error })
             viewBox="0 0 20 20"
           />
           <div class="flex items-center flex-wrap">
-            <span v-if="notification.title" class="font-semibold mr-2">{{ notification.title }}</span>
+            <span v-if="notification.title" class="font-medium mr-2">{{ notification.title }}</span>
             <span>{{ notification.message }}</span>
           </div>
           <x-spacer/>
-          <div
+          <button
             v-if="notification.action"
             class="
                 ml-3
-                font-semibold
+                font-medium
                 cursor-pointer
                 text-[color:var(--x-notification-action)]
                 hover:text-[color:var(--x-notification-action-hover)]
                 dark:text-[color:var(--x-notification-dark-action)]
                 dark:hover:text-[color:var(--x-notification-dark-action-hover)]
               "
-            @click="notification.action.onClick"
+            @click="() => { notification.action?.onClick(); remove(notification); }"
           >
             {{ notification.action.label }}
-          </div>
+          </button>
           <x-icon
             v-if="notification.removable"
             :icon="closeIcon"
diff --git a/packages/ui/src/components/notifications/theme/Notifications.base.theme.ts b/packages/ui/src/components/notifications/theme/Notifications.base.theme.ts
index 0443081b..b5179083 100644
--- a/packages/ui/src/components/notifications/theme/Notifications.base.theme.ts
+++ b/packages/ui/src/components/notifications/theme/Notifications.base.theme.ts
@@ -2,7 +2,7 @@ import type { NotificationsTheme } from '../Notifications.vue'
 
 const theme: NotificationsTheme = {
   classes: {
-    wrapper: 'fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen',
+    wrapper: 'fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen',
 
     list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
 
diff --git a/packages/ui/src/components/notifications/theme/Notifications.carbon.theme.ts b/packages/ui/src/components/notifications/theme/Notifications.carbon.theme.ts
index 33e1f2df..2645279a 100644
--- a/packages/ui/src/components/notifications/theme/Notifications.carbon.theme.ts
+++ b/packages/ui/src/components/notifications/theme/Notifications.carbon.theme.ts
@@ -1,7 +1,17 @@
 import type { NotificationsTheme } from '../Notifications.vue'
 
-import BaseTheme from './Notifications.base.theme'
+const theme: NotificationsTheme = {
+  classes: {
+    wrapper: 'fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen',
 
-const theme: NotificationsTheme = BaseTheme
+    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
+
+    item: () => {
+      const classes = ['w-full flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border-l-2 border-[color:var(--x-notification-icon)]']
+
+      return classes
+    },
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/radio/Radio.vue b/packages/ui/src/components/radio/Radio.vue
index 2f96aac1..1617bcf9 100644
--- a/packages/ui/src/components/radio/Radio.vue
+++ b/packages/ui/src/components/radio/Radio.vue
@@ -4,16 +4,14 @@ const radioProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  value: [String, Number, Boolean, Function, Object, Array],
-  label: String,
-  helper: String,
+  value: [String, Number],
   glow: Boolean,
 }
 
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
 
 type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
-type InternalExtraData = { selected: Ref<boolean>; }
+type InternalExtraData = { selected: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean; }
 export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
 
 export default {
@@ -25,7 +23,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { computed, ref, type ExtractPublicPropTypes, type Ref, unref } from 'vue'
 import { useCommon } from '../../composables/useCommon'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useColors } from '../../composables/useColors'
@@ -41,25 +39,49 @@ const emit = defineEmits(useInputtable.emits(false))
 
 const elRef = ref<HTMLElement | null>(null)
 
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
 const selected = computed({
   get() {
+    const formGroupValue = unref(formGroup.value)
+
+    if (isInsideFormGroup) return formGroupValue === props.value
+
     return props.value === props.modelValue
   },
   set() {
     emit('update:modelValue', props.value)
+    formGroup.setValue(props.value as any)
   },
 })
 
-const { focus, blur } = useInteractive(elRef)
+function select() {
+  emit('update:modelValue', props.value)
+  formGroup.setValue(props.value as any)
+}
 
-const {
-  errorInternal,
-  reset,
-  validate,
-  setError,
-} = useInputtable(props, { focus, emit, withListeners: false })
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
 
-const { styles, classes, className } = useTheme('Radio', {}, props, { selected })
+const { styles, classes, className } = useTheme('Radio', {}, props, { selected, isInsideForm, isInsideFormGroup })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -75,19 +97,21 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
-    @keypress.prevent.stop.space="$emit('update:modelValue', value)"
+    @keypress.prevent.stop.space="select"
   >
     <div
       class="flex items-center"
       :class="{ 'cursor-not-allowed': disabled }"
     >
       <input
+        :id="id"
         v-model="selected"
         :name="name"
         :required="required"
         :disabled="disabled || loading"
         type="radio"
         class="invisible absolute"
+        v-on="listeners"
       />
       <div
         :class="[
@@ -125,7 +149,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 
diff --git a/packages/ui/src/components/radio/theme/Radio.base.theme.ts b/packages/ui/src/components/radio/theme/Radio.base.theme.ts
index c3c61c29..146e3d30 100644
--- a/packages/ui/src/components/radio/theme/Radio.base.theme.ts
+++ b/packages/ui/src/components/radio/theme/Radio.base.theme.ts
@@ -2,7 +2,13 @@ import type { RadioTheme } from '../Radio.vue'
 
 const theme: RadioTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
+
+      if (data.isInsideForm) classes.push('mb-3')
+
+      return classes
+    },
 
     circle: ({ props }) => {
       let c = 'rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline'
diff --git a/packages/ui/src/components/radio/theme/Radio.carbon.theme.ts b/packages/ui/src/components/radio/theme/Radio.carbon.theme.ts
index 0d1eca0e..483b25d7 100644
--- a/packages/ui/src/components/radio/theme/Radio.carbon.theme.ts
+++ b/packages/ui/src/components/radio/theme/Radio.carbon.theme.ts
@@ -2,16 +2,22 @@ import type { RadioTheme } from  '../Radio.vue'
 
 const theme: RadioTheme = {
   classes: {
-    wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
 
     circle: ({ props }) => {
-      let c = 'rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline'
+      const classes = ['rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline']
 
-      if (props.size === 'xs' || props.size === 'sm') c += ' h-4 w-4'
-      if (props.size === 'xl') c += ' h-6 w-6'
-      else c += ' h-5 w-5'
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
+      else if (props.size === 'xl') classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
 
-      return c
+      return classes
     },
 
     circleIcon: ({ props, data }) => {
@@ -84,7 +90,7 @@ const theme: RadioTheme = {
       } else {
         vars.push(css.variables({
           bg: '#fff',
-          border: props.glow ? color[300] : gray[300],
+          border: props.glow ? color[300] : gray[900],
           dark: {
             bg: gray[900],
             border: props.glow ? color[300] : gray[300],
diff --git a/packages/ui/src/components/select/Select.vue b/packages/ui/src/components/select/Select.vue
index 2642ff25..ef2f09ca 100755
--- a/packages/ui/src/components/select/Select.vue
+++ b/packages/ui/src/components/select/Select.vue
@@ -6,16 +6,14 @@ const selectProps = {
   placeholder: String,
   options: Array as PropType<SelectOption[]>,
   multiple: Boolean,
-  label: String,
-  helper: String,
   flat: Boolean,
   native: Boolean,
 }
 
 export type SelectOption = {
   value: number | string;
-  disabled: boolean;
   label: string;
+  disabled?: boolean;
 }
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
@@ -39,7 +37,7 @@ import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
-import { checkIcon, chevronDownIcon } from '../../common/icons'
+import { checkIcon, selectIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
 import XTag from '../tag/Tag.vue'
@@ -230,6 +228,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   inputListeners,
   reset,
   validate,
@@ -335,7 +334,8 @@ defineExpose({ focus, blur, reset, validate, setError })
             <x-tag
               v-for="value in selected"
               :key="value"
-              size="sm"
+              size="xs"
+              outlined
               removable
               @remove="(e: Event) => { handleRemove(e, value) }"
             >{{ getLabel(value) }}</x-tag>
@@ -357,10 +357,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-popover
         v-else
         ref="popoverRef"
-        block
         :disabled="disabled || loading || readonly"
-        :dismiss-on-click="!multiple"
-        align="left"
       >
         <div
           :class="[classes.box]"
@@ -370,7 +367,8 @@ defineExpose({ focus, blur, reset, validate, setError })
               <x-tag
                 v-for="value in selected"
                 :key="value"
-                size="sm"
+                size="xs"
+                outlined
                 removable
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >{{ getLabel(value) }}</x-tag>
@@ -415,6 +413,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </x-popover>
 
       <select
+        :id="id"
         ref="elRef"
         v-model="selected"
         tabindex="-1"
@@ -439,7 +438,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         <x-spinner v-if="loading" :size="size" />
         <slot v-else name="icon">
           <x-icon
-            :icon="chevronDownIcon"
+            :icon="selectIcon"
             :class="[classes.icon]"
           />
         </slot>
@@ -447,6 +446,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>
diff --git a/packages/ui/src/components/select/theme/Select.base.theme.ts b/packages/ui/src/components/select/theme/Select.base.theme.ts
index ba786e5e..5558cc2b 100644
--- a/packages/ui/src/components/select/theme/Select.base.theme.ts
+++ b/packages/ui/src/components/select/theme/Select.base.theme.ts
@@ -27,7 +27,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'py-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 
diff --git a/packages/ui/src/components/select/theme/Select.carbon.theme.ts b/packages/ui/src/components/select/theme/Select.carbon.theme.ts
index e2c72dc3..6ce87ebf 100644
--- a/packages/ui/src/components/select/theme/Select.carbon.theme.ts
+++ b/packages/ui/src/components/select/theme/Select.carbon.theme.ts
@@ -18,7 +18,7 @@ const theme: SelectTheme = {
       } else if (props.readonly) {
         classes.push('bg-white dark:bg-gray-900 text-gray-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
       }
 
       if (data.errorInternal) {
@@ -30,7 +30,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'py-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 
diff --git a/packages/ui/src/components/skeleton/Skeleton.vue b/packages/ui/src/components/skeleton/Skeleton.vue
index e243e9b1..6913cbb0 100644
--- a/packages/ui/src/components/skeleton/Skeleton.vue
+++ b/packages/ui/src/components/skeleton/Skeleton.vue
@@ -1,9 +1,22 @@
 <script lang="ts">
+const shapes = ['line', 'circle'] as const
+
+export type SkeletonShape = typeof shapes[number]
+
+const validators = {
+  shape: shapes,
+}
+
 const skeletonProps = {
   tag: {
     type: String,
     default: 'div',
   },
+  shape: {
+    type: String as PropType<SkeletonShape>,
+    default: 'line',
+    validator: (val: SkeletonShape) => validators.shape.includes(val),
+  },
 }
 
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
@@ -11,11 +24,14 @@ export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
 type InternalClasses = 'wrapper'
 export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
 
-export default { name: 'XSkeleton' }
+export default {
+  name: 'XSkeleton',
+  validators,
+}
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(skeletonProps)
diff --git a/packages/ui/src/components/skeleton/theme/Skeleton.base.theme.ts b/packages/ui/src/components/skeleton/theme/Skeleton.base.theme.ts
index 25c2f1c9..d7bbf30c 100644
--- a/packages/ui/src/components/skeleton/theme/Skeleton.base.theme.ts
+++ b/packages/ui/src/components/skeleton/theme/Skeleton.base.theme.ts
@@ -2,7 +2,14 @@ import type { SkeletonTheme } from '../Skeleton.vue'
 
 const theme: SkeletonTheme = {
   classes: {
-    wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
+    wrapper: ({ props }) => {
+      const classes = ['animate-pulse bg-gray-300 dark:bg-gray-600']
+
+      if (props.shape === 'circle') classes.push('w-8 h-8 rounded-full')
+      else classes.push('rounded-md')
+
+      return classes
+    },
   },
 }
 
diff --git a/packages/ui/src/components/slider/Slider.vue b/packages/ui/src/components/slider/Slider.vue
index 80013aee..5e23e0b3 100644
--- a/packages/ui/src/components/slider/Slider.vue
+++ b/packages/ui/src/components/slider/Slider.vue
@@ -4,7 +4,6 @@ const sliderProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  label: String,
   min: Number,
   max: Number,
   step: {
@@ -183,7 +182,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       classes.wrapper,
     ]"
   >
-    <div class="flex items-center relative w-full" >
+    <div class="flex items-center relative w-full">
       <slot name="prefix" :value="value"></slot>
       <div
         ref="progressRef"
diff --git a/packages/ui/src/components/spinner/Spinner.vue b/packages/ui/src/components/spinner/Spinner.vue
index 8c0962b1..0b6c4dd2 100644
--- a/packages/ui/src/components/spinner/Spinner.vue
+++ b/packages/ui/src/components/spinner/Spinner.vue
@@ -3,7 +3,7 @@ const spinnerProps = {
   ...useCommon.props(),
   icon: {
     type: String,
-    default: '<g fill="none" fill-rule="evenodd"><g transform="translate(1 1)" stroke-width="2"><circle stroke-opacity=".8" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.5s" repeatCount="indefinite"/></path></g></g>',
+    default: '<g stroke-width="0"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" dur="0.65s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></g>',
   },
 }
 
@@ -27,5 +27,5 @@ defineProps(spinnerProps)
 </script>
 
 <template>
-  <x-icon :icon="icon" :size="size" view-box="0 0 38 38"/>
+  <x-icon :icon="icon" :size="size" />
 </template>
diff --git a/packages/ui/src/components/stepper/Stepper.vue b/packages/ui/src/components/stepper/Stepper.vue
new file mode 100644
index 00000000..e018639e
--- /dev/null
+++ b/packages/ui/src/components/stepper/Stepper.vue
@@ -0,0 +1,153 @@
+<script lang="ts">
+const validators = {
+  ...useCommon.validators(),
+  variant: ['line'] as const,
+}
+const stepperProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  modelValue: [String, Number],
+  steps: {
+    type: Array as PropType<StepperStep[]>,
+    default: () => [],
+  },
+  variant: {
+    type: String as PropType<StepperVariant>,
+    default: 'line',
+  },
+  grow: Boolean,
+  fullWidth: {
+    type: Boolean,
+    default: true,
+  },
+  interactive: {
+    type: Boolean,
+    default: true,
+  },
+  iconPristine: String,
+  iconComplete: String,
+  iconIncomplete: String,
+  iconCurrent: String,
+  iconError: String,
+}
+
+export type StepperStepStatus = 'pristine' | 'complete' | 'incomplete' | 'error'
+
+export type StepperStep = {
+  status: StepperStepStatus;
+  label: string;
+  description: string;
+  disabled?: boolean;
+}
+
+export type StepperVariant = typeof validators.variant[number]
+export type StepperProps = ExtractPublicPropTypes<typeof stepperProps>
+
+type InternalClasses = 'wrapper' | 'list' | 'scroller' | 'content' | 'step' | 'label' | 'icon'
+export interface StepperTheme extends ThemeComponent<StepperProps, InternalClasses> {}
+
+export default {
+  name: 'XStepper',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+import { type PropType, ref, type ExtractPublicPropTypes } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+import XIcon from '../../components/icon/Icon.vue'
+import { stepperPristineIcon, stepperIncompleteIcon, errorIcon, successIcon } from '../../common/icons'
+
+const props = defineProps(stepperProps)
+
+const emit = defineEmits(['update:modelValue'])
+
+const scrollRef = ref<InstanceType<typeof XScroll> | null>(null)
+const wrapperRef = ref<HTMLElement | null>(null)
+const stepperRef = ref<HTMLElement | null>(null)
+
+function activateStep(step: StepperStep, index: number) {
+  if (step.disabled || !props.interactive) return
+
+  emit('update:modelValue', index)
+}
+
+function calcIcon(step: StepperStep, index: number) {
+  if (step.status === 'incomplete') return props.iconIncomplete || stepperIncompleteIcon
+  if (step.status === 'error') return props.iconError || errorIcon
+  if (step.status === 'complete') return props.iconComplete || successIcon
+
+  return props.iconPristine || stepperPristineIcon
+}
+
+const { styles, classes, className } = useTheme('Stepper', {}, props)
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapperRef"
+      class="relative"
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper,
+      ]"
+    >
+      <x-scroll
+        ref="scrollRef"
+        :scrollbar="false"
+        horizontal
+        mousewheel
+        :class="classes.scroller"
+      >
+        <div
+          ref="stepperRef"
+          class="relative"
+          :class="classes.list"
+        >
+          <component
+            :is="interactive ? 'button' : 'div'"
+            v-for="(step, index) in steps"
+            :key="index"
+            :class="[classes.step, {
+              'cursor-pointer': interactive && !step.disabled,
+              'text-gray-400 dark:text-gray-600': step.disabled,
+              'flex-1': grow,
+            }]"
+            :disabled="step.disabled || !interactive"
+            @click="activateStep(step, index)"
+          >
+            <div class="overflow-hidden">
+              <div
+                class="h-0.5 w-full mb-2"
+                :class="[step.status === 'complete' || step.status === 'incomplete' ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-700']"
+              ></div>
+              <div class="flex items-start pr-4">
+                <x-icon
+                  :icon="calcIcon(step, index)"
+                  size="sm"
+                  :class="[classes.icon, {
+                    'text-primary-500': step.status === 'complete' || step.status === 'incomplete',
+                    'text-error-500': step.status === 'error',
+                  }]"
+                />
+                <div class="grid text-left">
+                  <div class="text-sm truncate">{{ step.label }}</div>
+                  <div v-if="step.description" class="text-xs text-gray-500">{{ step.description }}</div>
+                </div>
+              </div>
+            </div>
+          </component>
+        </div>
+      </x-scroll>
+    </div>
+    <div :class="classes.content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/components/collapse/__tests__/Collapse.spec.ts b/packages/ui/src/components/stepper/__tests__/Stepper.spec.ts
similarity index 62%
rename from packages/ui/src/components/collapse/__tests__/Collapse.spec.ts
rename to packages/ui/src/components/stepper/__tests__/Stepper.spec.ts
index fcdb5e1e..ac256e57 100644
--- a/packages/ui/src/components/collapse/__tests__/Collapse.spec.ts
+++ b/packages/ui/src/components/stepper/__tests__/Stepper.spec.ts
@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import Collapse from '../Collapse.vue'
+import Stepper from '../Stepper.vue'
 
-describe('Collapse', () => {
+describe('Stepper', () => {
   it('renders without errors', () => {
-    const wrapper = mount(Collapse)
+    const wrapper = mount(Stepper)
 
     expect(wrapper.vm).toBeTruthy()
   })
diff --git a/packages/ui/src/components/stepper/index.ts b/packages/ui/src/components/stepper/index.ts
new file mode 100644
index 00000000..600c9383
--- /dev/null
+++ b/packages/ui/src/components/stepper/index.ts
@@ -0,0 +1,6 @@
+export { default as XStepper } from './Stepper.vue'
+export type {
+  StepperProps,
+  StepperVariant,
+  StepperTheme,
+} from './Stepper.vue'
diff --git a/packages/ui/src/components/stepper/theme/Stepper.base.theme.ts b/packages/ui/src/components/stepper/theme/Stepper.base.theme.ts
new file mode 100644
index 00000000..fafa217c
--- /dev/null
+++ b/packages/ui/src/components/stepper/theme/Stepper.base.theme.ts
@@ -0,0 +1,45 @@
+import type { StepperTheme } from '../Stepper.vue'
+
+const theme: StepperTheme = {
+  classes: {
+    wrapper: '',
+
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+
+      return c
+    },
+
+    list: ({ props }) => {
+      const c = ['flex min-w-full w-fit items-start']
+
+      return c
+    },
+
+    step: ({ props, data }) => {
+      const classes = ['']
+
+      if (!props.grow) classes.push('w-[8rem]')
+
+      return classes
+    },
+
+    label: ({ props, data }) => {
+      const classes = ['']
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['mr-2 mt-0.5']
+
+      return classes
+    },
+
+    content: 'mt-2 mb-4',
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/stepper/theme/Stepper.carbon.theme.ts b/packages/ui/src/components/stepper/theme/Stepper.carbon.theme.ts
new file mode 100644
index 00000000..bf815935
--- /dev/null
+++ b/packages/ui/src/components/stepper/theme/Stepper.carbon.theme.ts
@@ -0,0 +1,7 @@
+import type { StepperTheme } from '../Stepper.vue'
+
+import BaseTheme from './Stepper.base.theme'
+
+const theme: StepperTheme = BaseTheme
+
+export default theme
diff --git a/packages/ui/src/components/tab/Tab.vue b/packages/ui/src/components/tab/Tab.vue
index fb53823a..0dc3e1e0 100644
--- a/packages/ui/src/components/tab/Tab.vue
+++ b/packages/ui/src/components/tab/Tab.vue
@@ -6,18 +6,19 @@ const tabProps = {
   },
   tag: {
     type: String,
-    default: 'div',
+    default: 'button',
   },
   to: [String, Object],
   label: String,
   icon: String,
   disabled: Boolean,
   exact: Boolean,
+  removable: Boolean,
 }
 
 export type TabProps = ExtractPublicPropTypes<typeof tabProps>
 
-type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon'
+type InternalClasses = 'wrapper' | 'content' | 'label' | 'icon' | 'tabpanel'
 type InternalExtraData = {
   selected: boolean;
 } & Pick<TabGroupInjection, 'state'>['state']
@@ -34,13 +35,15 @@ export default {
 <script setup lang="ts">
 import { inject, reactive, computed, ref, onMounted, type ExtractPublicPropTypes } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
-import { injectTabKey } from '../../composables/keys'
+import { injectTabGroupKey } from '../../composables/keys'
 import { useCommon, type Size } from '../../composables/useCommon'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../icon/Icon.vue'
 import XLink from '../link/Link.vue'
 
+import { closeIcon } from '../../common/icons'
+
 import type { TabGroupInjection, TabGroupVariant } from './TabGroup.vue'
 
 const props = defineProps(tabProps)
@@ -50,7 +53,7 @@ const computedLabel = computed(() => props.label || props.value)
 const teleportTo = ref<HTMLElement | null>(null)
 const elRef = ref<HTMLElement | typeof XLink | null>(null)
 
-const tabs = inject(injectTabKey, {
+const tabs = inject(injectTabGroupKey, {
   tabsContentRef: ref(null),
   activateTab: () => {},
   state: reactive({
@@ -99,9 +102,11 @@ function onClickTab(e: MouseEvent) {
     return
   }
 
-  if (!props.to && computedValue.value) tabs.activateTab(computedValue.value)
+  if (!props.to && typeof computedValue.value !== 'undefined') tabs.activateTab(computedValue.value)
 }
 
+defineEmits(['remove'])
+
 const { styles, classes, className } = useTheme('Tab', {}, ref({
   ...props,
   size: computedSize.value,
@@ -156,10 +161,19 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
           :class="classes.icon"
         />
         <div :class="classes.label">{{ computedLabel }}</div>
+        <x-icon
+          v-if="removable"
+          size="sm"
+          :icon="closeIcon"
+          class="ml-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-500 transition-colors duration-150"
+          @click="(e: Event) => $emit('remove', e)"
+        />
       </div>
     </slot>
     <teleport v-if="selected && teleportTo" :to="teleportTo">
-      <slot></slot>
+      <div role="tabpanel" :class="classes.tabpanel">
+        <slot></slot>
+      </div>
     </teleport>
   </component>
 </template>
diff --git a/packages/ui/src/components/tab/TabGroup.vue b/packages/ui/src/components/tab/TabGroup.vue
index dc0c0f1b..7848b425 100644
--- a/packages/ui/src/components/tab/TabGroup.vue
+++ b/packages/ui/src/components/tab/TabGroup.vue
@@ -54,7 +54,7 @@ export default {
 <script setup lang="ts">
 import { reactive, computed, provide, type PropType, ref, watch, onMounted, watchEffect, type ExtractPublicPropTypes, type Ref, nextTick } from 'vue'
 import { useMutationObserver, useResizeObserver, useThrottleFn } from '@vueuse/core'
-import { injectTabKey } from '../../composables/keys'
+import { injectTabGroupKey } from '../../composables/keys'
 import { useCommon, type Size } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
@@ -92,7 +92,7 @@ function activateTab(tab: string | number | null) {
   emit('update:modelValue', tab)
 }
 
-provide(injectTabKey, {
+provide(injectTabGroupKey, {
   tabsContentRef,
   activateTab,
   state,
diff --git a/packages/ui/src/components/tab/theme/Tab.base.theme.ts b/packages/ui/src/components/tab/theme/Tab.base.theme.ts
index 3fa87338..ca16e117 100644
--- a/packages/ui/src/components/tab/theme/Tab.base.theme.ts
+++ b/packages/ui/src/components/tab/theme/Tab.base.theme.ts
@@ -20,6 +20,8 @@ const theme: TabTheme = {
     label: 'font-medium',
 
     icon: 'mr-1.5',
+
+    tabpanel: 'py-2',
   },
 }
 
diff --git a/packages/ui/src/components/tab/theme/Tab.carbon.theme.ts b/packages/ui/src/components/tab/theme/Tab.carbon.theme.ts
index 30afc263..e35733b6 100644
--- a/packages/ui/src/components/tab/theme/Tab.carbon.theme.ts
+++ b/packages/ui/src/components/tab/theme/Tab.carbon.theme.ts
@@ -3,9 +3,9 @@ import type { TabTheme } from '../Tab.vue'
 const theme: TabTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left min-w-[8rem]']
+      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-left']
 
-      if (data.variant === 'block') c.push('px-8')
+      if (data.variant === 'block') c.push('px-4')
       else c.push('px-4')
 
       if (props.size === 'lg') c.push('text-lg')
@@ -26,6 +26,8 @@ const theme: TabTheme = {
     },
 
     icon: 'mr-1.5',
+
+    tabpanel: 'py-4',
   },
 }
 
diff --git a/packages/ui/src/components/tab/theme/TabGroup.carbon.theme.ts b/packages/ui/src/components/tab/theme/TabGroup.carbon.theme.ts
index 7038e103..65690b39 100644
--- a/packages/ui/src/components/tab/theme/TabGroup.carbon.theme.ts
+++ b/packages/ui/src/components/tab/theme/TabGroup.carbon.theme.ts
@@ -1,7 +1,55 @@
 import type { TabGroupTheme } from '../TabGroup.vue'
 
-import BaseTheme from './TabGroup.base.theme'
+const theme: TabGroupTheme = {
+  classes: {
+    wrapper: '',
 
-const theme: TabGroupTheme = BaseTheme
+    scroller: ({ props }) => {
+      const c = ['']
+
+      if (!props.fullWidth) c.push('!w-fit')
+      if (props.variant === 'block') c.push('')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-gray-200 dark:bg-gray-800')
+
+      return c
+    },
+
+    list: ({ props }) => {
+      const c = ['flex min-w-full w-fit']
+
+      if (props.variant === 'line') c.push('border-b border-gray-200 dark:border-gray-700')
+      if (props.variant === 'line' && !props.grow) c.push('')
+      if (props.variant === 'block') c.push('z-[1] py-1.5')
+      if (props.align === 'center') c.push('justify-center')
+      if (props.align === 'right') c.push('justify-end')
+
+      return c
+    },
+
+    tracker: ({ props }) => {
+      const c = ['absolute transition-all duration-150']
+
+      if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
+
+      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-gray-100 dark:bg-gray-700')
+
+      return c
+    },
+  },
+
+  styles: ({ props, colors, css }) => {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      text: color[600],
+      bg: props.ghost ? color[50] : '#fff',
+      dark: {
+        text: color[400],
+        bg: props.ghost ? color[900] : gray[700],
+      },
+    })
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/table/Table.vue b/packages/ui/src/components/table/Table.vue
index 1094457f..df24c4cc 100644
--- a/packages/ui/src/components/table/Table.vue
+++ b/packages/ui/src/components/table/Table.vue
@@ -13,6 +13,12 @@ const tableProps = {
     default: () => [],
   },
   loading: Boolean,
+  loadingSkeleton: Boolean,
+  loadingLines: {
+    type: [Number, String],
+    default: 3,
+  },
+  error: Boolean,
   dense: Boolean,
   fixed: Boolean,
   striped: Boolean,
@@ -25,6 +31,7 @@ const tableProps = {
     type: Boolean,
     default: true,
   },
+  expandable: Boolean,
 }
 
 export type TableHeader = {
@@ -34,26 +41,32 @@ export type TableHeader = {
   value?: string;
   text?: string;
   width?: string | number;
+  truncate?: boolean;
+  skeletonShape?: SkeletonShape;
 }
 
 export type TableProps = ExtractPublicPropTypes<typeof tableProps>
 
-type InternalClasses = 'wrapper' | 'loadingWrapper'
+type InternalClasses = 'wrapper' | 'table' | 'loadingWrapper'
 export interface TableTheme extends ThemeComponent<TableProps, InternalClasses> {}
 
 export default { name: 'XTable' }
 </script>
 
 <script setup lang="ts" generic="T">
-import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { ref, type ExtractPublicPropTypes, type PropType, watch } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
-import XTableHead from './TableHead'
+import XTableHead from './TableHead.vue'
 import XTableHeader, { type TableHeaderSort, type TableHeaderAlign } from './TableHeader.vue'
 import XTableBody from './TableBody'
 import XTableRow from './TableRow.vue'
 import XTableCell from './TableCell.vue'
 import XSpinner from '../spinner/Spinner.vue'
+import XSkeleton from '../skeleton/Skeleton.vue'
+import type { SkeletonShape } from '../skeleton/Skeleton.vue'
+
+import { chevronDownIcon } from '../../common/icons'
 
 const props = defineProps({
   ...tableProps,
@@ -63,6 +76,24 @@ const props = defineProps({
   },
 })
 
+type internalT = T & {
+  __expanded?: boolean;
+}
+
+function clone<T>(source: T[]): T[] {
+  try {
+    return JSON.parse(JSON.stringify(source))
+  } catch (e) {
+    return []
+  }
+}
+
+const internalItems = ref<internalT[]>([])
+
+watch(() => props.items, (newValue) => {
+  if (props.expandable) internalItems.value = clone(newValue as any)
+}, { immediate: true })
+
 const emit = defineEmits(['update:sort', 'click-row'])
 
 function getSort(headerValue: string | undefined, sort: string[]): TableHeaderSort {
@@ -120,15 +151,16 @@ const { styles, classes, className } = useTheme('Table', {}, props)
 </script>
 
 <template>
-  <div class="w-full overflow-x-auto">
+  <div :class="[className, classes.wrapper]">
+    <slot name="title"></slot>
+    <slot name="actions"></slot>
+
     <table
       :style="styles"
-      :class="[
-        className,
-        classes.wrapper,
-      ]"
+      :class="classes.table"
     >
       <x-table-head>
+        <x-table-header v-if="expandable" width="48" class="!p-0" :sticky-header="stickyHeader"/>
         <x-table-header
           v-for="(header, index) in headers"
           :key="index"
@@ -139,29 +171,93 @@ const { styles, classes, className } = useTheme('Table', {}, props)
           :width="header.width"
           @click="header.sortable ? sortHeader(header) : null"
         >
-          {{ header.text }}
+          <slot :name="`header-${header.value}`" :header="header">
+            {{ header.text }}
+          </slot>
         </x-table-header>
       </x-table-head>
       <x-table-body>
-        <x-table-row
-          v-for="(item, index) in (items as T[])"
-          :key="index"
-          :pointer="pointer"
-          :striped="striped"
-          @click="$emit('click-row', item)"
-        >
-          <x-table-cell
-            v-for="(header, index2) in headers"
-            :key="index2"
-            :text-align="header.align"
-            :dense="dense"
-            :fixed="fixed"
+        <template v-if="loading">
+          <x-table-row
+            v-for="(item, index) in Number(loadingLines)"
+            :key="index"
+            :striped="striped"
+          >
+            <x-table-cell
+              v-for="(header, index2) in headers"
+              :key="index2"
+              :text-align="header.align"
+              :width="header.width"
+              :dense="dense"
+              :fixed="fixed"
+            >
+              <slot :name="`loading-${header.value}`" :item="item">
+                <x-skeleton
+                  class="max-w-[60%]"
+                  :shape="header.skeletonShape || 'line'"
+                  :class="{
+                    'mx-auto': header.align === 'center',
+                    'ml-auto': header.align === 'right',
+                  }"
+                />
+              </slot>
+            </x-table-cell>
+          </x-table-row>
+        </template>
+        <template v-else-if="error">
+          <tr>
+            <td :colspan="headers.length">
+              <slot name="error"></slot>
+            </td>
+          </tr>
+        </template>
+        <template v-else-if="!items || items.length === 0">
+          <tr>
+            <td :colspan="headers.length">
+              <slot name="empty"></slot>
+            </td>
+          </tr>
+        </template>
+        <template v-for="(item, index) in items" v-else :key="index">
+          <x-table-row
+            :pointer="pointer"
+            :striped="striped"
+            @click="$emit('click-row', item)"
           >
-            <slot :name="`item-${header.value}`" :item="item">
-              {{ getValue(item, header.value) }}
-            </slot>
-          </x-table-cell>
-        </x-table-row>
+            <x-table-cell v-if="expandable" width="48" class="!p-1">
+              <button class="p-4" @click="internalItems[index].__expanded = !internalItems[index].__expanded">
+                <x-icon
+                  :icon="chevronDownIcon"
+                  :size="dense ? 'xs' : 'md'"
+                  class="transition-transform"
+                  :class="{
+                    'rotate-180': internalItems[index]?.__expanded,
+                  }"
+                />
+              </button>
+            </x-table-cell>
+            <x-table-cell
+              v-for="(header, index2) in headers"
+              :key="index2"
+              :text-align="header.align"
+              :truncate="header.truncate"
+              :width="header.width"
+              :dense="dense"
+              :fixed="fixed"
+            >
+              <slot :name="`item-${header.value}`" :item="item">
+                {{ getValue(item, header.value) }}
+              </slot>
+            </x-table-cell>
+          </x-table-row>
+          <tr v-if="expandable">
+            <td colspan="999">
+              <div class="overflow-hidden transition-opacity" :class="[internalItems[index]?.__expanded ? '' : 'opacity-0 max-h-0']">
+                <slot name="expanded-row" :item="item"></slot>
+              </div>
+            </td>
+          </tr>
+        </template>
       </x-table-body>
       <div
         v-if="loading"
diff --git a/packages/ui/src/components/table/TableCell.vue b/packages/ui/src/components/table/TableCell.vue
index 30cd694c..1f3a6142 100644
--- a/packages/ui/src/components/table/TableCell.vue
+++ b/packages/ui/src/components/table/TableCell.vue
@@ -10,7 +10,7 @@ const tableCellProps = {
   },
   truncate: Boolean,
   dense: Boolean,
-  fixed: Boolean,
+  width: [String, Number],
   verticalAlign: {
     type: String as PropType<TableCellVerticalAlign>,
     default: 'middle',
@@ -32,22 +32,21 @@ export default {
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(tableCellProps)
 
-if (props.truncate && !props.fixed) {
-  console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
-}
+const computedWidth = computed(() => typeof props.width === 'number' ? `${props.width}px` : props.width)
 
 const { styles, classes, className } = useTheme('TableCell', {}, props)
 </script>
 
 <template>
   <td
-    :style="styles"
+    :style="[styles, { width: computedWidth, minWidth: computedWidth, maxWidth: computedWidth }]"
     :class="[
+      'relative',
       className,
       classes.wrapper,
     ]"
diff --git a/packages/ui/src/components/table/TableHead.tsx b/packages/ui/src/components/table/TableHead.tsx
deleted file mode 100644
index 2794ea1e..00000000
--- a/packages/ui/src/components/table/TableHead.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'XTableHead',
-  setup(props, { slots }) {
-    return () => (
-      <thead class="align-bottom">
-        <tr class="text-sm text-gray-600 dark:text-gray-400 border-b">
-          {slots.default?.()}
-        </tr>
-      </thead>
-    )
-  },
-})
diff --git a/packages/ui/src/components/table/TableHead.vue b/packages/ui/src/components/table/TableHead.vue
new file mode 100644
index 00000000..69a69147
--- /dev/null
+++ b/packages/ui/src/components/table/TableHead.vue
@@ -0,0 +1,25 @@
+<script lang="ts">
+const tableHeadProps = {}
+
+export type TableHeadProps = ExtractPublicPropTypes<typeof tableHeadProps>
+
+type InternalClasses = 'thead' | 'row'
+export interface TableHeadTheme extends ThemeComponent<TableHeadProps, InternalClasses> {}
+
+export default { name: 'XTableHead' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const { styles, classes, className } = useTheme('TableHead', {}, {})
+</script>
+
+<template>
+  <thead :class="[className, classes.thead]" :style="styles">
+    <tr :class="classes.row">
+      <slot></slot>
+    </tr>
+  </thead>
+</template>
diff --git a/packages/ui/src/components/table/TableHeader.vue b/packages/ui/src/components/table/TableHeader.vue
index 2f9224f8..b3719bfe 100644
--- a/packages/ui/src/components/table/TableHeader.vue
+++ b/packages/ui/src/components/table/TableHeader.vue
@@ -22,74 +22,53 @@ export type TableHeaderSort = typeof validators.sort[number]
 export type TableHeaderAlign = typeof validators.textAlign[number]
 export type TableHeaderProps = ExtractPublicPropTypes<typeof tableHeaderProps>
 
+type InternalClasses = 'th' | 'sortIcon'
+export interface TableHeaderTheme extends ThemeComponent<TableHeaderProps, InternalClasses> {}
+
 export default { name: 'XTableHeader', validators }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(tableHeaderProps)
 
-defineProps(tableHeaderProps)
+const { styles, classes, className } = useTheme('TableHeader', {}, props)
 </script>
 
 <template>
-  <th
-    class="py-2 font-semibold tracking-widest uppercase text-xs px-3"
-    :class="[
-      {
-        // sort
-        'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': sortable,
-        // stickyHeader
-        'sticky top-0': stickyHeader,
-        // textAlign
-        'text-left': textAlign === 'left',
-        'text-right': textAlign === 'right',
-        'text-center': textAlign === 'center',
-        'text-justify': textAlign === 'justify',
-      },
-    ]"
-  >
-    <div
+  <th :style="styles" :class="[className, classes.th, 'group/th']">
+    <slot></slot>
+
+    <svg
       v-if="sortable"
-      class="relative inline-block"
+      :class="[
+        classes.sortIcon,
+        [sort && [1, -1].includes(sort) ? '' : 'invisible group-hover/th:visible']
+      ]"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-linejoin="round"
+      stroke-linecap="round"
+      fill="none"
+      role="presentation"
     >
-      <slot></slot>
-
-      <svg
-        v-if="sort && [1, -1].includes(sort)"
-        class="absolute stroke-2 w-3 h-3 ml-0.5 -right-3 top-0.5"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill="none"
-        role="presentation"
-      >
-        <template v-if="sort === -1">
-          <line
-            x1="12"
-            y1="5"
-            x2="12"
-            y2="19"
-          />
-          <polyline points="19 12 12 19 5 12" />
-        </template>
+      <template v-if="sort === -1">
+        <line x1="12" y1="5" x2="12" y2="19"/>
+        <polyline points="19 12 12 19 5 12" />
+      </template>
 
-        <template v-if="sort === 1">
-          <line
-            x1="12"
-            y1="19"
-            x2="12"
-            y2="5"
-          />
-          <polyline points="5 12 12 5 19 12" />
-        </template>
-      </svg>
-    </div>
+      <template v-else-if="sort === 1">
+        <line x1="12" y1="19" x2="12" y2="5"/>
+        <polyline points="5 12 12 5 19 12" />
+      </template>
 
-    <template v-else>
-      <slot></slot>
-    </template>
+      <template v-else>
+        <path d="m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"/>
+      </template>
+    </svg>
   </th>
 </template>
diff --git a/packages/ui/src/components/table/TableRow.vue b/packages/ui/src/components/table/TableRow.vue
index eb8a5394..da4ae9dd 100644
--- a/packages/ui/src/components/table/TableRow.vue
+++ b/packages/ui/src/components/table/TableRow.vue
@@ -3,13 +3,7 @@ const validators = {
   verticalAlign: ['baseline', 'bottom', 'middle', 'text-bottom', 'text-top', 'top'],
 }
 
-export default { name: 'XTableRow', validators }
-</script>
-
-<script setup lang="ts">
-import { computed, type PropType } from 'vue'
-
-const props = defineProps({
+const tableRowProps = {
   pointer: Boolean,
   striped: Boolean,
   verticalAlign: {
@@ -17,7 +11,21 @@ const props = defineProps({
     default: 'top',
     validator: (value: string) => validators.verticalAlign.includes(value),
   },
-})
+}
+
+export type TableRowProps = ExtractPublicPropTypes<typeof tableRowProps>
+
+type InternalClasses = 'row'
+export interface TableRowTheme extends ThemeComponent<TableRowProps, InternalClasses> {}
+
+export default { name: 'XTableRow', validators }
+</script>
+
+<script setup lang="ts">
+import { computed, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(tableRowProps)
 
 const alignClass = computed(() => {
   if (props.verticalAlign === 'baseline') return 'align-baseline'
@@ -29,18 +37,12 @@ const alignClass = computed(() => {
 
   return ''
 })
+
+const { styles, classes, className } = useTheme('TableRow', {}, props)
 </script>
 
 <template>
-  <tr
-    :class="[
-      striped ? 'odd:bg-gray-50 dark:odd:bg-gray-800' : 'border-b border-gray-200 dark:border-gray-700',
-      {
-        'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': pointer,
-      },
-      alignClass
-    ]"
-  >
+  <tr :style="styles" :class="[className, classes.row, alignClass]">
     <slot></slot>
   </tr>
 </template>
diff --git a/packages/ui/src/components/table/index.ts b/packages/ui/src/components/table/index.ts
index f8738a7b..0e040725 100644
--- a/packages/ui/src/components/table/index.ts
+++ b/packages/ui/src/components/table/index.ts
@@ -1,10 +1,12 @@
 export { default as XTable } from './Table.vue'
 export { default as XTableBody } from './TableBody'
 export { default as XTableCell } from './TableCell.vue'
-export { default as XTableHead } from './TableHead'
+export { default as XTableHead } from './TableHead.vue'
 export { default as XTableHeader } from './TableHeader.vue'
 export { default as XTableRow } from './TableRow.vue'
 
 export type { TableProps, TableHeader, TableTheme } from './Table.vue'
-export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort } from './TableHeader.vue'
+export type { TableHeadProps, TableHeadTheme } from './TableHead.vue'
+export type { TableRowProps, TableRowTheme } from './TableRow.vue'
+export type { TableHeaderProps, TableHeaderAlign, TableHeaderSort, TableHeaderTheme } from './TableHeader.vue'
 export type { TableCellProps, TableCellTextAlign, TableCellVerticalAlign, TableCellTheme } from './TableCell.vue'
diff --git a/packages/ui/src/components/table/theme/Table.base.theme.ts b/packages/ui/src/components/table/theme/Table.base.theme.ts
index c4aa6f51..09d52976 100644
--- a/packages/ui/src/components/table/theme/Table.base.theme.ts
+++ b/packages/ui/src/components/table/theme/Table.base.theme.ts
@@ -2,19 +2,21 @@ import type { TableTheme } from '../Table.vue'
 
 const theme: TableTheme = {
   classes: {
-    wrapper: ({ props }) => {
-      const c = ['w-full relative']
+    wrapper: 'w-full h-full overflow-x-auto',
 
-      if (props.scrollable) c.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table')
+    table: ({ props }) => {
+      const classes = ['w-full relative']
 
-      if (props.stickyHeader) c.push('relative')
+      if (props.scrollable) classes.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal')
 
-      if (props.fixed) c.push('table-fixed')
+      if (props.stickyHeader) classes.push('relative')
 
-      return c
+      if (props.fixed) classes.push('md:table-fixed')
+
+      return classes
     },
 
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
   },
 }
 
diff --git a/packages/ui/src/components/table/theme/Table.carbon.theme.ts b/packages/ui/src/components/table/theme/Table.carbon.theme.ts
index ba1a81ed..2413749a 100644
--- a/packages/ui/src/components/table/theme/Table.carbon.theme.ts
+++ b/packages/ui/src/components/table/theme/Table.carbon.theme.ts
@@ -1,7 +1,23 @@
 import type { TableTheme } from '../Table.vue'
 
-import BaseTheme from './Table.base.theme'
+const theme: TableTheme = {
+  classes: {
+    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-gray-800',
 
-const theme: TableTheme = BaseTheme
+    table: ({ props }) => {
+      const classes = ['w-full relative']
+
+      if (props.scrollable) classes.push('overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal')
+
+      if (props.stickyHeader) classes.push('relative')
+
+      if (props.fixed) classes.push('md:table-fixed')
+
+      return classes
+    },
+
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/table/theme/TableCell.base.theme.ts b/packages/ui/src/components/table/theme/TableCell.base.theme.ts
index 6e58ab48..7cdca67c 100644
--- a/packages/ui/src/components/table/theme/TableCell.base.theme.ts
+++ b/packages/ui/src/components/table/theme/TableCell.base.theme.ts
@@ -19,7 +19,7 @@ const theme: TableCellTheme = {
       else if (props.verticalAlign === 'text-top') c.push('align-text-top')
       else if (props.verticalAlign === 'top') c.push('align-top')
 
-      if (props.truncate && props.fixed) c.push('truncate')
+      if (props.truncate) c.push('truncate')
 
       return c
     },
diff --git a/packages/ui/src/components/table/theme/TableCell.carbon.theme.ts b/packages/ui/src/components/table/theme/TableCell.carbon.theme.ts
index 3c818eee..7cdca67c 100644
--- a/packages/ui/src/components/table/theme/TableCell.carbon.theme.ts
+++ b/packages/ui/src/components/table/theme/TableCell.carbon.theme.ts
@@ -1,7 +1,29 @@
 import type { TableCellTheme } from '../TableCell.vue'
 
-import BaseTheme from './TableCell.base.theme'
+const theme: TableCellTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const c = ['last:pr-0 px-3']
 
-const theme: TableCellTheme = BaseTheme
+      c.push(props.dense ? 'py-2' : 'py-4')
+
+      if (props.textAlign === 'left') c.push('text-left')
+      else if (props.textAlign === 'center') c.push('text-center')
+      else if (props.textAlign === 'right') c.push('text-right')
+      else if (props.textAlign === 'justify') c.push('text-justify')
+
+      if (props.verticalAlign === 'baseline') c.push('align-baseline')
+      else if (props.verticalAlign === 'bottom') c.push('align-bottom')
+      else if (props.verticalAlign === 'middle') c.push('align-middle')
+      else if (props.verticalAlign === 'text-bottom') c.push('align-text-bottom')
+      else if (props.verticalAlign === 'text-top') c.push('align-text-top')
+      else if (props.verticalAlign === 'top') c.push('align-top')
+
+      if (props.truncate) c.push('truncate')
+
+      return c
+    },
+  },
+}
 
 export default theme
diff --git a/packages/ui/src/components/table/theme/TableHead.base.theme.ts b/packages/ui/src/components/table/theme/TableHead.base.theme.ts
new file mode 100644
index 00000000..10796ac6
--- /dev/null
+++ b/packages/ui/src/components/table/theme/TableHead.base.theme.ts
@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-sm text-gray-600 dark:text-gray-400 border-b',
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/table/theme/TableHead.carbon.theme.ts b/packages/ui/src/components/table/theme/TableHead.carbon.theme.ts
new file mode 100644
index 00000000..363767f0
--- /dev/null
+++ b/packages/ui/src/components/table/theme/TableHead.carbon.theme.ts
@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-gray-900 dark:text-gray-50',
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/table/theme/TableHeader.base.theme.ts b/packages/ui/src/components/table/theme/TableHeader.base.theme.ts
new file mode 100644
index 00000000..76f72db8
--- /dev/null
+++ b/packages/ui/src/components/table/theme/TableHeader.base.theme.ts
@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-2 font-semibold tracking-widest uppercase text-xs px-3']
+
+      if (props.sortable) classes.push('cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-3 h-3 top-2.5 right-0.5']
+
+      return classes
+    },
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/table/theme/TableHeader.carbon.theme.ts b/packages/ui/src/components/table/theme/TableHeader.carbon.theme.ts
new file mode 100644
index 00000000..de88109e
--- /dev/null
+++ b/packages/ui/src/components/table/theme/TableHeader.carbon.theme.ts
@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-gray-200 dark:bg-gray-700 select-none']
+
+      if (props.sortable) classes.push('cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-150 ease-in-out pr-5')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-4 h-4 top-4 right-2']
+
+      return classes
+    },
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/table/theme/TableRow.base.theme.ts b/packages/ui/src/components/table/theme/TableRow.base.theme.ts
new file mode 100644
index 00000000..fd552b19
--- /dev/null
+++ b/packages/ui/src/components/table/theme/TableRow.base.theme.ts
@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+      } else {
+        classes.push('border-b border-gray-200 dark:border-gray-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/table/theme/TableRow.carbon.theme.ts b/packages/ui/src/components/table/theme/TableRow.carbon.theme.ts
new file mode 100644
index 00000000..5485c18c
--- /dev/null
+++ b/packages/ui/src/components/table/theme/TableRow.carbon.theme.ts
@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+      } else {
+        classes.push('border-b border-gray-200 dark:border-gray-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme
diff --git a/packages/ui/src/components/tag/Tag.vue b/packages/ui/src/components/tag/Tag.vue
index 180372d6..477c8a7a 100644
--- a/packages/ui/src/components/tag/Tag.vue
+++ b/packages/ui/src/components/tag/Tag.vue
@@ -13,7 +13,7 @@ const tagProps = {
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
 
-type InternalClasses = 'wrapper' | 'loadingWrapper'
+type InternalClasses = 'wrapper'
 export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {}
 
 export default {
@@ -52,13 +52,13 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
 <template>
   <component
     :is="tag"
-    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"
     :style="styles"
     :class="
       [
         className,
         classes.wrapper,
-        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)]',
+        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >
@@ -70,7 +70,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        class="ml-1.5 cursor-pointer hover:text-gray-700 transition-colors duration-150"
         @click="(e: Event) => $emit('remove', e)"
       />
     </span>
diff --git a/packages/ui/src/components/tag/theme/Tag.base.theme.ts b/packages/ui/src/components/tag/theme/Tag.base.theme.ts
index fda2be26..f3e81870 100644
--- a/packages/ui/src/components/tag/theme/Tag.base.theme.ts
+++ b/packages/ui/src/components/tag/theme/Tag.base.theme.ts
@@ -13,19 +13,19 @@ const theme: TagTheme = {
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      bg: color[100],
+      bg: color[200],
       text: color[800],
       border: color[800],
       dark: {
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },
diff --git a/packages/ui/src/components/tag/theme/Tag.carbon.theme.ts b/packages/ui/src/components/tag/theme/Tag.carbon.theme.ts
index e8c8bc73..e5389e98 100644
--- a/packages/ui/src/components/tag/theme/Tag.carbon.theme.ts
+++ b/packages/ui/src/components/tag/theme/Tag.carbon.theme.ts
@@ -5,15 +5,13 @@ const theme: TagTheme = {
     wrapper: ({ props }) => {
       let c = 'inline-flex items-center leading-none max-w-full '
 
-      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-1 text-xs'
+      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-0.5 text-xs'
       else if (props.size === 'lg') c += ' px-4 py-3'
       else if (props.size === 'xl') c += ' px-5 py-5 text-lg'
-      else c += ' px-3 py-2 text-sm'
+      else c += ' px-3 py-1 text-sm'
 
       return c
     },
-
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
   },
 
   styles: ({ colors, props, css }) => {
@@ -24,8 +22,9 @@ const theme: TagTheme = {
       text: color[800],
       border: color[800],
       dark: {
-        bg: color[700],
-        text: props.outlined ? color[200] : color[800],
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
       },
     })
   },
diff --git a/packages/ui/src/components/textarea/Textarea.vue b/packages/ui/src/components/textarea/Textarea.vue
index 44ecd2c8..0ed116dd 100755
--- a/packages/ui/src/components/textarea/Textarea.vue
+++ b/packages/ui/src/components/textarea/Textarea.vue
@@ -3,8 +3,6 @@ const textareaProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  helper: String,
-  label: String,
   dir: {
     type: String,
     default: 'ltr',
@@ -91,6 +89,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -117,6 +116,7 @@ defineExpose({ focus, blur, reset, validate, setError })
     ]"
   >
     <textarea
+      :id="id"
       ref="elRef"
       class=""
       :style="style"
@@ -142,6 +142,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       @input="onInput"
     ></textarea>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>
diff --git a/packages/ui/src/components/textarea/theme/Textarea.carbon.theme.ts b/packages/ui/src/components/textarea/theme/Textarea.carbon.theme.ts
index c838bde0..a027a31d 100644
--- a/packages/ui/src/components/textarea/theme/Textarea.carbon.theme.ts
+++ b/packages/ui/src/components/textarea/theme/Textarea.carbon.theme.ts
@@ -18,7 +18,7 @@ const theme: TextareaTheme = {
       } else if (props.readonly) {
         classes.push('bg-white dark:bg-gray-900 text-gray-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
       }
 
       return classes
diff --git a/packages/ui/src/components/toggle/Toggle.vue b/packages/ui/src/components/toggle/Toggle.vue
index 20cbdbdc..3789c537 100644
--- a/packages/ui/src/components/toggle/Toggle.vue
+++ b/packages/ui/src/components/toggle/Toggle.vue
@@ -4,9 +4,6 @@ const toggleProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  id: String,
-  label: String,
-  helper: String,
   glow: Boolean,
 }
 
@@ -53,6 +50,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   reset,
   validate,
   setError,
@@ -119,6 +117,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-spinner v-if="loading" :size="size" class="ml-1" />
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
diff --git a/packages/ui/src/composables/keys.ts b/packages/ui/src/composables/keys.ts
index 078515d9..4856b95e 100644
--- a/packages/ui/src/composables/keys.ts
+++ b/packages/ui/src/composables/keys.ts
@@ -4,13 +4,17 @@ import type { TabGroupInjection } from '../components/tab/TabGroup.vue'
 import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
 import type { NotificationInjection } from '../components/notifications/Notifications.vue'
 import type { IconInjection } from '../components/icon/Icon.vue'
+import type { FormGroupInjection } from '../components/formGroup'
+import type { AccordionProps } from '../components/accordion'
 import type { UIOptions } from '../create'
 import type { UITheme } from '../theme'
 
 export const injectOptionsKey = Symbol() as InjectionKey<UIOptions>
 export const injectThemeKey = Symbol() as InjectionKey<MaybeRef<UITheme>>
-export const injectTabKey = Symbol() as InjectionKey<TabGroupInjection>
+export const injectTabGroupKey = Symbol() as InjectionKey<TabGroupInjection>
 export const injectFormKey = Symbol() as InjectionKey<FormInjection>
+export const injectFormGroupKey = Symbol() as InjectionKey<FormGroupInjection>
 export const injectIconsKey = Symbol() as InjectionKey<IconInjection>
 export const injectButtonGroupKey = Symbol() as InjectionKey<ButtonGroupInjection>
 export const injectNotificationKey = Symbol() as InjectionKey<NotificationInjection>
+export const injectAccordionKey = Symbol() as InjectionKey<AccordionProps>
diff --git a/packages/ui/src/composables/useFocusTrap.ts b/packages/ui/src/composables/useFocusTrap.ts
new file mode 100644
index 00000000..ea2699e4
--- /dev/null
+++ b/packages/ui/src/composables/useFocusTrap.ts
@@ -0,0 +1,106 @@
+import type { ComponentPublicInstance } from 'vue'
+import { onUnmounted, type MaybeRef, unref, nextTick } from 'vue'
+
+const focusableQuery = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])'
+
+export function useFocusTrap() {
+  let focusable: HTMLElement[] = []
+  let observer: MutationObserver | null = null
+
+  let firstFocusableEl: HTMLElement | null = null
+  let lastFocusableEl: HTMLElement | null = null
+
+  async function initFocusTrap(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    targetRef = unref(targetRef)
+
+    if (!targetRef) return
+
+    await nextTick()
+
+    getFocusableElements(targetRef)
+
+    if (firstFocusableEl) firstFocusableEl.focus()
+
+    document.addEventListener('keydown', handleKeydown)
+    observer = new MutationObserver(() => getFocusableElements(targetRef))
+
+    if ((targetRef as ComponentPublicInstance).$el) observer.observe((targetRef as ComponentPublicInstance).$el as Node, { childList: true, subtree: true })
+    else observer.observe(targetRef as Node, { childList: true, subtree: true })
+  }
+
+  function getFocusableElements(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    if (targetRef === null) return
+
+    let elements
+
+    if ((targetRef as ComponentPublicInstance).$el) elements = (targetRef as ComponentPublicInstance)?.$el.querySelectorAll(focusableQuery)
+    else (targetRef as HTMLElement).querySelectorAll(focusableQuery)
+
+    focusable = Array.from(elements || []) as HTMLElement[]
+    firstFocusableEl = focusable[0] || null
+    lastFocusableEl = focusable[focusable.length - 1] || null
+  }
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      const isShiftPressed = event.shiftKey
+      const currentEl = document.activeElement as HTMLElement | null
+
+      if (!currentEl) {
+        event.preventDefault()
+        focusable[0]?.focus()
+
+        return
+      }
+
+      const firstEl = focusable[0]
+      const lastEl = focusable[focusable.length - 1]
+
+      if (!isShiftPressed && currentEl === lastEl) {
+        event.preventDefault()
+        firstEl?.focus()
+      } else if (isShiftPressed && currentEl === firstEl) {
+        event.preventDefault()
+        lastEl?.focus()
+      }
+
+    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const previousEl = focusable[index - 1]
+
+      if (previousEl) {
+        previousEl.focus()
+      } else if (lastFocusableEl) {
+        lastFocusableEl.focus()
+      }
+
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const nextElement = focusable[index + 1]
+
+      if (nextElement) {
+        nextElement.focus()
+      } else if (firstFocusableEl) {
+        firstFocusableEl.focus()
+      }
+    }
+  }
+
+  const clearFocusTrap = () => {
+    document.removeEventListener('keydown', handleKeydown)
+    observer?.disconnect()
+  }
+
+  onUnmounted(() => {
+    clearFocusTrap()
+  })
+
+  return {
+    initFocusTrap,
+    clearFocusTrap,
+  }
+}
diff --git a/packages/ui/src/composables/useInputtable.ts b/packages/ui/src/composables/useInputtable.ts
index 3d894717..19b88e27 100644
--- a/packages/ui/src/composables/useInputtable.ts
+++ b/packages/ui/src/composables/useInputtable.ts
@@ -1,6 +1,6 @@
 import type { MaybeRef, PropType } from 'vue'
 import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
-import { injectFormKey } from './keys'
+import { injectFormGroupKey, injectFormKey } from './keys'
 
 export interface XFormInputMethods {
   focus: () => void;
@@ -11,6 +11,7 @@ export interface XFormInputMethods {
 export const useInputtable = (props: any, { focus, emit, withListeners = true }: { focus: () => void; emit: any; withListeners?: boolean; }) => {
   const isFirstValidation = ref(true)
   const errorInternal = ref(props.error)
+  const hideFooterInternal = ref(props.hideFooter)
 
   const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
   const nameInternal = ref(name)
@@ -18,6 +19,18 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   watch(() => props.error, (val) => { errorInternal.value = val })
   watch(() => props.name, (val) => { if (val) nameInternal.value = val })
 
+  const formGroup = inject(injectFormGroupKey, {
+    registerInputGroup: () => {},
+    unregisterInputGroup: () => {},
+    setValue: () => {},
+    isInsideFormGroup: false,
+    value: undefined,
+  })
+
+  if (formGroup.isInsideFormGroup) {
+    hideFooterInternal.value = true
+  }
+
   const form = inject(injectFormKey, {
     registerInput: () => {},
     unregisterInput: () => {},
@@ -101,19 +114,31 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
   }
 
   onMounted(() => {
-    form.registerInput(nameInternal.value, focus, validate, setError)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.registerInputGroup(nameInternal.value, focus)
+    } else {
+      form.registerInput(nameInternal.value, focus, validate, setError)
+    }
   })
 
   onUnmounted(() => {
-    form.unregisterInput(nameInternal.value)
+    if (formGroup.isInsideFormGroup) {
+      formGroup.unregisterInputGroup(nameInternal.value)
+    } else {
+      form.unregisterInput(nameInternal.value)
+    }
+
   })
 
   return {
     isFirstValidation,
     errorInternal,
+    hideFooterInternal,
     isFocused,
     isInsideForm: form.isInsideForm,
+    isInsideFormGroup: formGroup.isInsideFormGroup,
     inputListeners,
+    formGroup,
     reset,
     validate,
     setError,
@@ -128,6 +153,7 @@ useInputtable.emits = (withListeners = true): string[] => {
 
 useInputtable.props = () => ({
   modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+  id: String,
   name: String,
   readonly: Boolean,
   required: Boolean,
@@ -135,6 +161,8 @@ useInputtable.props = () => ({
     type: Boolean,
     default: true,
   },
+  label: String,
+  helper: String,
   error: String,
   hideFooter: Boolean,
   rules: {
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index 890bc7e1..ee52d254 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -1,5 +1,7 @@
 import type { ColorLibrary } from './composables/useColors'
 import type {
+  AccordionTheme,
+  AccordionItemTheme,
   AlertTheme,
   AvatarTheme,
   BadgeTheme,
@@ -10,11 +12,11 @@ import type {
   CarouselTheme,
   CarouselSlideTheme,
   CheckboxTheme,
-  CollapseTheme,
   ContainerTheme,
   DividerTheme,
   DrawerTheme,
   FormTheme,
+  FormGroupTheme,
   IconTheme,
   ImageTheme,
   InputTheme,
@@ -36,16 +38,22 @@ import type {
   SelectTheme,
   SkeletonTheme,
   SliderTheme,
+  StepperTheme,
   TabTheme,
   TabGroupTheme,
   TableTheme,
   TableCellTheme,
+  TableHeadTheme,
+  TableHeaderTheme,
+  TableRowTheme,
   TagTheme,
   TextareaTheme,
   ToggleTheme,
 } from './components'
 
 export type ComponentThemes = {
+  Accordion: AccordionTheme;
+  AccordionItem: AccordionItemTheme;
   Alert: AlertTheme;
   Avatar: AvatarTheme;
   Badge: BadgeTheme;
@@ -56,11 +64,11 @@ export type ComponentThemes = {
   Carousel: CarouselTheme;
   CarouselSlide: CarouselSlideTheme;
   Checkbox: CheckboxTheme;
-  Collapse: CollapseTheme;
   Container: ContainerTheme;
   Divider: DividerTheme;
   Drawer: DrawerTheme;
   Form: FormTheme;
+  FormGroup: FormGroupTheme;
   Icon: IconTheme;
   Image: ImageTheme;
   Input: InputTheme;
@@ -82,10 +90,14 @@ export type ComponentThemes = {
   Select: SelectTheme;
   Skeleton: SkeletonTheme;
   Slider: SliderTheme;
+  Stepper: StepperTheme;
   Tab: TabTheme;
   TabGroup: TabGroupTheme;
   Table: TableTheme;
   TableCell: TableCellTheme;
+  TableHead: TableHeadTheme;
+  TableHeader: TableHeaderTheme;
+  TableRow: TableRowTheme;
   Tag: TagTheme;
   Textarea: TextareaTheme;
   Toggle: ToggleTheme;
diff --git a/packages/ui/src/themes/base/components.ts b/packages/ui/src/themes/base/components.ts
index 965c31b2..f19b1fa1 100644
--- a/packages/ui/src/themes/base/components.ts
+++ b/packages/ui/src/themes/base/components.ts
@@ -1,3 +1,5 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.base.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.base.theme'
 export { default as Alert } from '../../components/alert/theme/Alert.base.theme'
 export { default as Avatar } from '../../components/avatar/theme/Avatar.base.theme'
 export { default as Badge } from '../../components/badge/theme/Badge.base.theme'
@@ -8,11 +10,11 @@ export { default as Card } from '../../components/card/theme/Card.base.theme'
 export { default as Carousel } from '../../components/carousel/theme/Carousel.base.theme'
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.base.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.base.theme'
-export { default as Collapse } from '../../components/collapse/theme/Collapse.base.theme'
 export { default as Container } from '../../components/container/theme/Container.base.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.base.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.base.theme'
 export { default as Form } from '../../components/form/theme/Form.base.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.base.theme'
 export { default as Icon } from '../../components/icon/theme/Icon.base.theme'
 export { default as Image } from '../../components/image/theme/Image.base.theme'
 export { default as Input } from '../../components/input/theme/Input.base.theme'
@@ -34,10 +36,14 @@ export { default as Scroll } from '../../components/scroll/theme/Scroll.base.the
 export { default as Select } from '../../components/select/theme/Select.base.theme'
 export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.base.theme'
 export { default as Slider } from '../../components/slider/theme/Slider.base.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.base.theme'
 export { default as Tab } from '../../components/tab/theme/Tab.base.theme'
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.base.theme'
 export { default as Table } from '../../components/table/theme/Table.base.theme'
 export { default as TableCell } from '../../components/table/theme/TableCell.base.theme'
+export { default as TableHead } from '../../components/table/theme/TableHead.base.theme'
+export { default as TableHeader } from '../../components/table/theme/TableHeader.base.theme'
+export { default as TableRow } from '../../components/table/theme/TableRow.base.theme'
 export { default as Tag } from '../../components/tag/theme/Tag.base.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme'
diff --git a/packages/ui/src/themes/carbon/components.ts b/packages/ui/src/themes/carbon/components.ts
index 387ab25b..9af982aa 100644
--- a/packages/ui/src/themes/carbon/components.ts
+++ b/packages/ui/src/themes/carbon/components.ts
@@ -1,3 +1,5 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.carbon.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.carbon.theme'
 export { default as Alert } from '../../components/alert/theme/Alert.carbon.theme'
 export { default as Avatar } from '../../components/avatar/theme/Avatar.carbon.theme'
 export { default as Badge } from '../../components/badge/theme/Badge.carbon.theme'
@@ -8,11 +10,11 @@ export { default as Card } from '../../components/card/theme/Card.carbon.theme'
 export { default as Carousel } from '../../components/carousel/theme/Carousel.carbon.theme'
 export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.carbon.theme'
 export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.carbon.theme'
-export { default as Collapse } from '../../components/collapse/theme/Collapse.carbon.theme'
 export { default as Container } from '../../components/container/theme/Container.carbon.theme'
 export { default as Divider } from '../../components/divider/theme/Divider.carbon.theme'
 export { default as Drawer } from '../../components/drawer/theme/Drawer.carbon.theme'
 export { default as Form } from '../../components/form/theme/Form.carbon.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.carbon.theme'
 export { default as Icon } from '../../components/icon/theme/Icon.carbon.theme'
 export { default as Image } from '../../components/image/theme/Image.carbon.theme'
 export { default as Input } from '../../components/input/theme/Input.carbon.theme'
@@ -34,10 +36,14 @@ export { default as Scroll } from '../../components/scroll/theme/Scroll.carbon.t
 export { default as Select } from '../../components/select/theme/Select.carbon.theme'
 export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.carbon.theme'
 export { default as Slider } from '../../components/slider/theme/Slider.carbon.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.carbon.theme'
 export { default as Tab } from '../../components/tab/theme/Tab.carbon.theme'
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.carbon.theme'
 export { default as Table } from '../../components/table/theme/Table.carbon.theme'
 export { default as TableCell } from '../../components/table/theme/TableCell.carbon.theme'
+export { default as TableHead } from '../../components/table/theme/TableHead.carbon.theme'
+export { default as TableHeader } from '../../components/table/theme/TableHeader.carbon.theme'
+export { default as TableRow } from '../../components/table/theme/TableRow.carbon.theme'
 export { default as Tag } from '../../components/tag/theme/Tag.carbon.theme'
 export { default as Textarea } from '../../components/textarea/theme/Textarea.carbon.theme'
 export { default as Toggle } from '../../components/toggle/theme/Toggle.carbon.theme'
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 2128e70a..b369a25f 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -1,10 +1,11 @@
-const indielayer = require('./exports/tailwind.preset')
+import preset from './exports/tailwind.preset'
 
-module.exports = {
-  mode: 'jit',
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  presets: [preset()],
   content: [
-    './src/**/*.vue',
+    './index.html',
+    './{src,docs}/**/*.{vue,js,ts,jsx,tsx}',
   ],
-  darkMode: 'class',
-  presets: [indielayer()],
 }
diff --git a/packages/ui/tsconfig.app.json b/packages/ui/tsconfig.app.json
index 74fdb9ae..40178a09 100644
--- a/packages/ui/tsconfig.app.json
+++ b/packages/ui/tsconfig.app.json
@@ -1,10 +1,10 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "docs/**/*.vue", "./volar.d.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
     "outDir": "lib",
-    "baseUrl": "."
+    "baseUrl": ".",
   }
 }
diff --git a/packages/ui/tsconfig.vitest.json b/packages/ui/tsconfig.vitest.json
index d080d611..22535141 100644
--- a/packages/ui/tsconfig.vitest.json
+++ b/packages/ui/tsconfig.vitest.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.app.json",
-  "exclude": [],
+  "exclude": ["docs/**/*.vue", "./volar.d.ts"],
   "compilerOptions": {
     "composite": true,
     "lib": [],
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 2969ec7b..ab5b3009 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -14,6 +14,12 @@ export default defineConfig(({ command, mode }) => {
   const isBuild = command === 'build'
   const viteEnv = loadEnv(mode, `.env.${mode}`)
 
+  if (mode === 'docs') {
+    return {
+      plugins: [vue(), vueJsx()],
+    }
+  }
+
   const plugins: PluginOption = [
     vue(),
     vueJsx(),
@@ -30,6 +36,7 @@ export default defineConfig(({ command, mode }) => {
 
   return {
     plugins,
+    publicDir: 'exports',
     build: {
       outDir: 'lib',
       lib: {
diff --git a/packages/ui/volar.d.ts b/packages/ui/volar.d.ts
index 7adf5f0c..1d5f6151 100644
--- a/packages/ui/volar.d.ts
+++ b/packages/ui/volar.d.ts
@@ -1,5 +1,7 @@
 declare module 'vue' {
   export interface GlobalComponents {
+    XAccordion: typeof import('@indielayer/ui')['XAccordion']
+    XAccordionItem: typeof import('@indielayer/ui')['XAccordionItem']
     XAlert: typeof import('@indielayer/ui')['XAlert']
     XAvatar: typeof import('@indielayer/ui')['XAvatar']
     XBadge: typeof import('@indielayer/ui')['XBadge']
@@ -10,15 +12,16 @@ declare module 'vue' {
     XCarousel: typeof import('@indielayer/ui')['XCarousel']
     XCarouselSlide: typeof import('@indielayer/ui')['XCarouselSlide']
     XCheckbox: typeof import('@indielayer/ui')['XCheckbox']
-    XCollapse: typeof import('@indielayer/ui')['XCollapse']
     XContainer: typeof import('@indielayer/ui')['XContainer']
     XDivider: typeof import('@indielayer/ui')['XDivider']
     XDrawer: typeof import('@indielayer/ui')['XDrawer']
     XForm: typeof import('@indielayer/ui')['XForm']
+    XFormGroup: typeof import('@indielayer/ui')['XFormGroup']
     XIcon: typeof import('@indielayer/ui')['XIcon']
     XImage: typeof import('@indielayer/ui')['XImage']
     XInput: typeof import('@indielayer/ui')['XInput']
     XInputFooter: typeof import('@indielayer/ui')['XInputFooter']
+    XLabel: typeof import('@indielayer/ui')['XLabel']
     XLink: typeof import('@indielayer/ui')['XLink']
     XLoader: typeof import('@indielayer/ui')['XLoader']
     XMenu: typeof import('@indielayer/ui')['XMenu']
@@ -37,6 +40,7 @@ declare module 'vue' {
     XSlider: typeof import('@indielayer/ui')['XSlider']
     XSpacer: typeof import('@indielayer/ui')['XSpacer']
     XSpinner: typeof import('@indielayer/ui')['XSpinner']
+    XStepper: typeof import('@indielayer/ui')['XStepper']
     XTable: typeof import('@indielayer/ui')['XTable']
     XTableBody: typeof import('@indielayer/ui')['XTableBody']
     XTableCell: typeof import('@indielayer/ui')['XTableCell']
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 29dbeabf..4d277db4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,7 +79,7 @@ importers:
         version: 3.3.1(eslint@8.52.0)
       '@indielayer/ui':
         specifier: ^1.0.9
-        version: link:../ui
+        version: 1.3.0(tailwindcss@3.3.2)(vue@3.4.3)
       '@nuxt/devtools':
         specifier: latest
         version: 1.0.0(nuxt@3.7.4)(vite@4.5.1)
@@ -148,64 +148,6 @@ importers:
         specifier: ^1.8.19
         version: 1.8.22(typescript@5.2.2)
 
-  packages/docs:
-    dependencies:
-      vue:
-        specifier: ^3.3.9
-        version: 3.3.9(typescript@5.2.2)
-      vue-router:
-        specifier: ^4.2.2
-        version: 4.2.2(vue@3.3.9)
-    devDependencies:
-      '@indielayer/eslint-config-vue':
-        specifier: ^3.3.1
-        version: 3.3.1(eslint@8.43.0)
-      '@indielayer/stylelint-config':
-        specifier: ^1.0.0
-        version: 1.0.0(postcss@8.4.24)(stylelint@14.16.1)
-      '@indielayer/ui':
-        specifier: workspace:*
-        version: link:../ui
-      '@rushstack/eslint-patch':
-        specifier: ^1.3.2
-        version: 1.3.2
-      '@tsconfig/node18':
-        specifier: ^2.0.1
-        version: 2.0.1
-      '@types/node':
-        specifier: ^18.16.18
-        version: 18.16.18
-      '@vitejs/plugin-vue':
-        specifier: ^4.2.3
-        version: 4.2.3(vite@4.5.0)(vue@3.3.9)
-      '@vue/tsconfig':
-        specifier: ^0.4.0
-        version: 0.4.0
-      eslint:
-        specifier: ^8.43.0
-        version: 8.43.0
-      eslint-plugin-vue:
-        specifier: ^9.15.1
-        version: 9.15.1(eslint@8.43.0)
-      postcss:
-        specifier: ^8.4.24
-        version: 8.4.24
-      shiki:
-        specifier: ^0.14.3
-        version: 0.14.3
-      tailwindcss:
-        specifier: ^3.3.2
-        version: 3.3.2
-      typescript:
-        specifier: ^5.2.2
-        version: 5.2.2
-      vite:
-        specifier: ^4.4.11
-        version: 4.5.0(@types/node@18.16.18)
-      vue-tsc:
-        specifier: ^1.8.2
-        version: 1.8.2(typescript@5.2.2)
-
   packages/ui:
     devDependencies:
       '@indielayer/stylelint-config':
@@ -262,6 +204,9 @@ importers:
       rollup-plugin-visualizer:
         specifier: ^5.9.2
         version: 5.9.2(rollup@3.29.4)
+      shiki:
+        specifier: 1.0.0-beta.1
+        version: 1.0.0-beta.1
       stylelint:
         specifier: ^14.16.1
         version: 14.16.1
@@ -280,6 +225,9 @@ importers:
       vue:
         specifier: ^3.3.9
         version: 3.3.9(typescript@5.2.2)
+      vue-router:
+        specifier: ^4.2.2
+        version: 4.2.5(vue@3.3.9)
       vue-tsc:
         specifier: ^1.8.2
         version: 1.8.2(typescript@5.2.2)
@@ -1633,18 +1581,6 @@ packages:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
     dev: true
 
-  /@indielayer/eslint-config-vue@3.3.1(eslint@8.43.0):
-    resolution: {integrity: sha512-x3QwS2/zsP7TALzocWr6srIaprSWGUqgGe2x/MQ56rZGC/hMf4Y98xX9019c1yIrsGnS+UXC9zYWPnh6Ot+frQ==}
-    peerDependencies:
-      eslint: ^8.0.0
-    dependencies:
-      '@indielayer/eslint-config': 3.2.1(eslint@8.43.0)
-      eslint: 8.43.0
-      eslint-plugin-vue: 9.18.1(eslint@8.43.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@indielayer/eslint-config-vue@3.3.1(eslint@8.52.0):
     resolution: {integrity: sha512-x3QwS2/zsP7TALzocWr6srIaprSWGUqgGe2x/MQ56rZGC/hMf4Y98xX9019c1yIrsGnS+UXC9zYWPnh6Ot+frQ==}
     peerDependencies:
@@ -1669,19 +1605,6 @@ packages:
       - supports-color
     dev: true
 
-  /@indielayer/eslint-config@3.2.1(eslint@8.43.0):
-    resolution: {integrity: sha512-9UlH23yfweOz+v2iOr44XrKVeueujTb3YymXxl/kT/9a23eGM5U/ErtVaiyR81laH8M7lKzdLUQwxm3CmvjxOw==}
-    peerDependencies:
-      eslint: ^8.0.0
-    dependencies:
-      '@typescript-eslint/eslint-plugin': 6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.43.0)(typescript@5.2.2)
-      '@typescript-eslint/parser': 6.9.1(eslint@8.43.0)(typescript@5.2.2)
-      eslint: 8.43.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@indielayer/eslint-config@3.2.1(eslint@8.52.0):
     resolution: {integrity: sha512-9UlH23yfweOz+v2iOr44XrKVeueujTb3YymXxl/kT/9a23eGM5U/ErtVaiyR81laH8M7lKzdLUQwxm3CmvjxOw==}
     peerDependencies:
@@ -1721,6 +1644,16 @@ packages:
       - postcss
     dev: true
 
+  /@indielayer/ui@1.3.0(tailwindcss@3.3.2)(vue@3.4.3):
+    resolution: {integrity: sha512-mXeK6PJ0PGz5F+/3SWzzZOt7iLDkzvV0KhBPVoqtn2slmc3rwXMCoz04z8l3Bjs8iqcLFKzudAAwD/pDpi0ckA==}
+    peerDependencies:
+      tailwindcss: ^3.0.0
+      vue: ^3.0.0
+    dependencies:
+      tailwindcss: 3.3.2
+      vue: 3.4.3(typescript@5.2.2)
+    dev: true
+
   /@ioredis/commands@1.2.0:
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
     dev: true
@@ -2545,6 +2478,10 @@ packages:
     resolution: {integrity: sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==}
     dev: true
 
+  /@shikijs/core@1.0.0-beta.1:
+    resolution: {integrity: sha512-z3gdznaRj/DJSLQdR2Gdx6AB3e5+Il/kSGdLTGHI7HnalgPL15RbGgBSdLHW8rKAz4+dezAcTdnxm8z6YTu7nA==}
+    dev: true
+
   /@sigstore/bundle@2.1.0:
     resolution: {integrity: sha512-89uOo6yh/oxaU8AeOUnVrTdVMcGk9Q1hJa7Hkvalc6G3Z3CupWk4Xe9djSgJm9fMkH69s0P0cVHUoKSOemLdng==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -2729,35 +2666,6 @@ packages:
     resolution: {integrity: sha512-113D3mDkZDjo+EeUEHCFy0qniNc1ZpecGiAU7WSo7YDoSzolZIQKpYFHrPpjkB2nuyahcKfrmLXeQlh7gqJYdw==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin@6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.43.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-w0tiiRc9I4S5XSXXrMHOWgHgxbrBn1Ro+PmiYhSg2ZVdxrAJtQgzU5o2m1BfP6UOn7Vxcc6152vFjQfmZR4xEg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 6.9.1(eslint@8.43.0)(typescript@5.2.2)
-      '@typescript-eslint/scope-manager': 6.9.1
-      '@typescript-eslint/type-utils': 6.9.1(eslint@8.43.0)(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.9.1(eslint@8.43.0)(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.9.1
-      debug: 4.3.4
-      eslint: 8.43.0
-      graphemer: 1.4.0
-      ignore: 5.2.4
-      natural-compare: 1.4.0
-      semver: 7.5.4
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/eslint-plugin@6.9.1(@typescript-eslint/parser@6.9.1)(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-w0tiiRc9I4S5XSXXrMHOWgHgxbrBn1Ro+PmiYhSg2ZVdxrAJtQgzU5o2m1BfP6UOn7Vxcc6152vFjQfmZR4xEg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2816,27 +2724,6 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.9.1(eslint@8.43.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.9.1
-      '@typescript-eslint/types': 6.9.1
-      '@typescript-eslint/typescript-estree': 6.9.1(typescript@5.2.2)
-      '@typescript-eslint/visitor-keys': 6.9.1
-      debug: 4.3.4
-      eslint: 8.43.0
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/parser@6.9.1(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2887,26 +2774,6 @@ packages:
       '@typescript-eslint/visitor-keys': 6.9.1
     dev: true
 
-  /@typescript-eslint/type-utils@6.9.1(eslint@8.43.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-eh2oHaUKCK58qIeYp19F5V5TbpM52680sB4zNSz29VBQPTWIlE/hCj5P5B1AChxECe/fmZlspAWFuRniep1Skg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@typescript-eslint/typescript-estree': 6.9.1(typescript@5.2.2)
-      '@typescript-eslint/utils': 6.9.1(eslint@8.43.0)(typescript@5.2.2)
-      debug: 4.3.4
-      eslint: 8.43.0
-      ts-api-utils: 1.0.3(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@typescript-eslint/type-utils@6.9.1(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-eh2oHaUKCK58qIeYp19F5V5TbpM52680sB4zNSz29VBQPTWIlE/hCj5P5B1AChxECe/fmZlspAWFuRniep1Skg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2973,25 +2840,6 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@6.9.1(eslint@8.43.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-L1T0A5nFdQrMVunpZgzqPL6y2wVreSyHhKGZryS6jrEN7bD9NplVAyMryUhXsQ4TWLnZmxc2ekar/lSGIlprCA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.4
-      '@typescript-eslint/scope-manager': 6.9.1
-      '@typescript-eslint/types': 6.9.1
-      '@typescript-eslint/typescript-estree': 6.9.1(typescript@5.2.2)
-      eslint: 8.43.0
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-    dev: true
-
   /@typescript-eslint/utils@6.9.1(eslint@8.52.0)(typescript@5.2.2):
     resolution: {integrity: sha512-L1T0A5nFdQrMVunpZgzqPL6y2wVreSyHhKGZryS6jrEN7bD9NplVAyMryUhXsQ4TWLnZmxc2ekar/lSGIlprCA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -3399,6 +3247,7 @@ packages:
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
+    dev: true
 
   /@vue/language-core@1.8.2(typescript@5.2.2):
     resolution: {integrity: sha512-QJujhmp89TRoWwzjn2sPMezG97+mNyaCTfznGHWNCE3LBsillZCBqAO7M7cxO8ee1V3r+qHjWytkoh3M4YkRJw==}
@@ -3702,10 +3551,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /ansi-sequence-parser@1.1.0:
-    resolution: {integrity: sha512-lEm8mt52to2fT8GhciPCGeCXACSz2UwIN4X2e2LJSnZ5uAbn2/dsYdOmUXq0AtWS5cpAupysIneExOgH0Vd2TQ==}
-    dev: true
-
   /ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -5474,42 +5319,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /eslint-plugin-vue@9.15.1(eslint@8.43.0):
-    resolution: {integrity: sha512-CJE/oZOslvmAR9hf8SClTdQ9JLweghT6JCBQNrT2Iel1uVw0W0OLJxzvPd6CxmABKCvLrtyDnqGV37O7KQv6+A==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
-      eslint: 8.43.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.0.13
-      semver: 7.5.3
-      vue-eslint-parser: 9.3.1(eslint@8.43.0)
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /eslint-plugin-vue@9.18.1(eslint@8.43.0):
-    resolution: {integrity: sha512-7hZFlrEgg9NIzuVik2I9xSnJA5RsmOfueYgsUGUokEDLJ1LHtxO0Pl4duje1BriZ/jDWb+44tcIlC3yi0tdlZg==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
-      eslint: 8.43.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.0.13
-      semver: 7.5.4
-      vue-eslint-parser: 9.3.1(eslint@8.43.0)
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /eslint-plugin-vue@9.18.1(eslint@8.52.0):
     resolution: {integrity: sha512-7hZFlrEgg9NIzuVik2I9xSnJA5RsmOfueYgsUGUokEDLJ1LHtxO0Pl4duje1BriZ/jDWb+44tcIlC3yi0tdlZg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -9782,13 +9591,10 @@ packages:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
     dev: true
 
-  /shiki@0.14.3:
-    resolution: {integrity: sha512-U3S/a+b0KS+UkTyMjoNojvTgrBHjgp7L6ovhFVZsXmBGnVdQ4K4U9oK0z63w538S91ATngv1vXigHCSWOwnr+g==}
+  /shiki@1.0.0-beta.1:
+    resolution: {integrity: sha512-iq32WxjemJVlAHg5HjYoL1qCxGmvyh3Z8kr2E/gMTQdcxyXxTpMhahIC7myxFBapAk9o8QN8mxCpr4JT5rqpRQ==}
     dependencies:
-      ansi-sequence-parser: 1.1.0
-      jsonc-parser: 3.2.0
-      vscode-oniguruma: 1.7.0
-      vscode-textmate: 8.0.0
+      '@shikijs/core': 1.0.0-beta.1
     dev: true
 
   /side-channel@1.0.4:
@@ -11363,14 +11169,6 @@ packages:
       vscode-languageserver-protocol: 3.16.0
     dev: true
 
-  /vscode-oniguruma@1.7.0:
-    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
-    dev: true
-
-  /vscode-textmate@8.0.0:
-    resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
-    dev: true
-
   /vscode-uri@3.0.7:
     resolution: {integrity: sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==}
     dev: true
@@ -11404,24 +11202,6 @@ packages:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
     dev: true
 
-  /vue-eslint-parser@9.3.1(eslint@8.43.0):
-    resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
-    engines: {node: ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '>=6.0.0'
-    dependencies:
-      debug: 4.3.4
-      eslint: 8.43.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.5.0
-      lodash: 4.17.21
-      semver: 7.5.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /vue-eslint-parser@9.3.1(eslint@8.52.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -11466,14 +11246,14 @@ packages:
       vue: 3.3.9(typescript@5.2.2)
     dev: true
 
-  /vue-router@4.2.2(vue@3.3.9):
-    resolution: {integrity: sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==}
+  /vue-router@4.2.5(vue@3.3.9):
+    resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
       '@vue/devtools-api': 6.5.0
       vue: 3.3.9(typescript@5.2.2)
-    dev: false
+    dev: true
 
   /vue-router@4.2.5(vue@3.4.3):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index eb786c72..21f9429f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,5 @@
 packages:
   - 'packages/ui'
-  - 'packages/docs'
   - 'packages/demo-nuxt'
   - 'packages/demo-vue'
   - 'packages/create-ui'