diff --git a/DEVELOPMENT_GUIDE.md b/DEVELOPMENT_GUIDE.md
new file mode 100644
index 00000000..68e5cc26
--- /dev/null
+++ b/DEVELOPMENT_GUIDE.md
@@ -0,0 +1,169 @@
+# Soybean UI 开发指南
+
+本文档旨在为 Soybean UI 项目提供一套从组件研发到文档生成的最佳实践，借鉴了业界优秀组件库 (如 Ant Design, Naive UI) 的经验，并力求简化开发流程、提高开发效率。
+
+## 1. 核心理念
+
+*   **组件、示例、文档一体化**: 每个组件相关的源代码、使用示例 (demos) 和 Markdown API 文档应集中管理在其各自的目录中，方便开发、维护和查阅。
+*   **专用开发预览**: 提供一个独立的开发预览环境，使开发者能快速、便捷地查看和调试正在开发的组件及其所有示例。
+*   **文档驱动**: 组件的 `demos` 和 `API 文档` 直接作为最终用户文档的来源，由文档站点 (如 Nuxt) 解析和渲染。
+
+## 2. 推荐项目结构
+
+```
+soybean-ui/
+├── packages/
+│   ├── soy-ui/                      # 核心 UI 组件库 (可发布为 npm 包)
+│   │   ├── src/
+│   │   │   ├── components/          # 所有 UI 组件
+│   │   │   │   ├── Alert/           # Alert 组件示例目录
+│   │   │   │   │   ├── source/     # 源码文件夹
+│   │   │   │   │   │   ├── Alert.vue    # Alert 组件源文件
+│   │   │   │   │   ├── demos/       # Alert 组件的示例
+│   │   │   │   │   │   ├── basic.vue
+│   │   │   │   │   │   ├── with-icon.vue
+│   │   │   │   │   │   └── index.ts     # 导出此目录下所有 demo 组件
+│   │   │   │   │   ├── index.md     # Alert 组件的 Markdown 文档 (API, 用法说明)
+│   │   │   │   │   └── types.ts     # Alert 组件的类型定义 (可选)
+│   │   │   │   ├── Button/
+│   │   │   │   │   ├── source/     # 源码文件夹
+│   │   │   │   │   │   └── Button.vue
+│   │   │   │   │   ├── demos/
+│   │   │   │   │   │   └── basic.vue
+│   │   │   │   │   └── index.md
+│   │   │   │   └── ... (其他组件)
+│   │   │   ├── index.ts             # 组件库入口，导出所有组件
+│   │   │   └── theme/               # 全局主题、样式等
+│   │   ├── package.json
+│   │   └── vite.config.ts
+│   ├── primitives/                  # 基础工具/原子组件 (如果需要)
+│   └── unocss-preset/             # UnoCSS 预设
+├── apps/                            # 应用/示例项目
+│   ├── playground/                  # 组件开发预览环境 (Vite + Vue)
+│   │   ├── src/
+│   │   │   ├── App.vue
+│   │   │   ├── main.ts
+│   │   │   ├── pages/               # 动态加载 soy-ui 组件 demos 的页面
+│   │   │   └── router.ts
+│   │   ├── package.json
+│   │   └── vite.config.ts
+│   └── official-site/ (原Nuxt 文档站)
+│       ├── components/              # 文档站自身的组件
+│       ├── layouts/
+│       ├── pages/                   # Nuxt 页面，包括动态路由用于渲染组件文档
+│       │   └── components/
+│       │       └── [...slug].vue    # 捕获组件名并渲染对应文档和 demos
+│       ├── nuxt.config.ts
+│       └── package.json
+├── scripts/                         # 构建、生成等脚本
+├── package.json                     # Monorepo 根 package.json
+├── tsconfig.json
+└── DEVELOPMENT_GUIDE.md             # 本开发指南
+└── NUXT_DOCS_SETUP_PLAN.md        # Nuxt 文档站搭建计划
+```
+
+**说明:**
+
+*   **`packages/soy-ui`**: 这是核心组件库。
+    *   每个组件 (如 `Alert`, `Button`) 都有自己的文件夹。
+    *   `demos/` 文件夹存放该组件的 `.vue` 格式使用示例，并通过一个 `index.ts` 文件导出所有这些示例。
+    *   `index.md` 是该组件的文档，用于描述 API、props、events、slots 以及如何使用。它可以直接引用或内嵌 `demos/` 中的示例。
+*   **`apps/playground`**: 一个独立的 Vite/Vue3 应用。
+    *   其主要目的是在开发 `soy-ui` 组件时，提供一个实时预览和调试的环境。
+    *   它可以动态扫描 `packages/soy-ui/src/components/**/demos/index.ts` 文件，并提供一个界面来选择和展示这些 demos 模块中导出的所有组件。
+    *   这将取代当前 `src/views/ui/index.vue` 和 `examples/` 目录的部分功能，使组件开发与主项目/其他示例项目解耦。
+*   **`apps/official-site` (原 `docs_v2`)**: 基于 Nuxt 的官方文档站。
+    *   它会读取 `packages/soy-ui/src/components/**/index.md` 作为 API 文档内容。
+    *   它会解析并渲染 `packages/soy-ui/src/components/**/demos/*.vue` 作为交互式示例。
+
+## 3. 开发新组件流程
+
+1.  **创建组件目录**:
+    在 `packages/soy-ui/src/components/` 下创建新的组件文件夹，例如 `MyNewComponent`。
+2.  **编写组件源码**:
+    在 `MyNewComponent/` 下创建 `MyNewComponent.vue` 文件，并实现组件逻辑。
+3.  **编写示例 (Demos)**:
+    在 `MyNewComponent/demos/` 目录下创建 `.vue` 示例文件，如：
+    *   `basic.vue` (基础用法)
+    *   `advanced-features.vue` (高级特性展示)
+    每个 demo 都应该是一个可以独立运行和展示特定用法的 Vue 组件。
+    同时，在该目录下创建一个 `index.ts` 文件，导出所有 `.vue` 示例。例如:
+    ```typescript
+    // MyNewComponent/demos/index.ts
+    export { default as BasicDemo } from './basic.vue';
+    export { default as AdvancedFeaturesDemo } from './advanced-features.vue';
+    ```
+4.  **编写组件文档**:
+    在 `MyNewComponent/` 下创建 `index.md` 文件。内容应包括：
+    *   组件简介和用途。
+    *   Props, Events, Slots, Methods 的 API 表格和说明。
+    *   通过特定语法嵌入或引用 `demos/` 中的示例，并配以说明。
+    *   设计规范、最佳实践等。
+5.  **导出组件**:
+    在 `packages/soy-ui/src/index.ts` (或相应的入口文件) 中导出新组件。
+6.  **在 Playground 中预览和调试**:
+    *   启动 `apps/playground` 开发服务器。
+    *   Playground 应能自动发现新的 `MyNewComponent` 及其 `demos/index.ts`。
+    *   Playground 会加载 `index.ts` 模块，并展示其中导出的所有 demo 组件。
+    *   通过 Playground 交互式地测试组件的各种状态和 props。
+7.  **更新文档站 (可选，通常自动)**:
+    *   启动 `apps/official-site` (Nuxt 文档站) 开发服务器。
+    *   文档站应能自动发现并展示新组件的 `index.md` 和 demos。
+
+## 4. 运行开发环境
+
+*   **启动 Playground (用于组件开发)**:
+    ```bash
+    pnpm --filter ./apps/playground dev
+    ```
+    (假设 `apps/playground/package.json` 中定义了 `dev` 脚本)
+
+*   **启动文档站 (用于预览最终文档)**:
+    ```bash
+    pnpm --filter ./apps/official-site dev
+    ```
+    (假设 `apps/official-site/package.json` 中定义了 `dev` 脚本)
+
+## 5. 编写与组织 Demos
+
+*   **原子性**: 每个 demo `.vue` 文件应专注于展示组件的一个特定功能或用例。
+*   **简洁性**: Demo 代码应尽可能简洁明了，移除不相关的逻辑。
+*   **可直接运行**: Demo 本身就是一个完整的 Vue 组件片段，可以直接在 Playground 或文档中渲染。
+*   **命名清晰**: Demo 文件名应能清晰反映其展示的内容，如 `disabled-state.vue`, `custom-icon.vue`。导出到 `index.ts` 时也建议使用清晰的导出名 (如 `BasicDemo`, `CustomIconDemo`)。
+*   **`index.ts` 聚合**: 每个组件的 `demos` 目录下应包含一个 `index.ts` 文件，该文件负责导出目录内所有的 `.vue` demo 组件。这使得 Playground 或其他工具可以方便地一次性导入所有相关的 demos。
+
+## 6. 文档编写 (Markdown)
+
+*   组件的 `index.md` 是其官方文档的核心。
+*   **API 文档**: 清晰列出 Props, Events, Slots, Methods 等，并提供类型、默认值和描述。
+*   **代码示例**: 使用 Markdown 的代码块语法展示简短的用法片段。
+*   **嵌入 Demos**:
+    文档站 (Nuxt) 需要实现一种机制，允许在 Markdown 中通过特定语法引用并渲染 `demos/` 目录下的 `.vue` 文件。例如：
+    ```markdown
+    ## 基础用法
+
+    <Demo src="basic.vue" title="基础的 Alert 组件" />
+
+    ## 带图标的 Alert
+
+    <Demo src="with-icon.vue" description="可以配置不同的图标类型。" />
+    ```
+    这里的 `<Demo>` 是一个需要在 Nuxt 文档站中实现的自定义组件，它会加载并显示对应的 demo 文件，并可能提供查看源码、复制代码等功能。
+
+## 7. 废弃 `examples/` 目录
+
+当前的 `examples/` 目录的功能将被以下两者取代：
+
+1.  **组件级 Demos**: 分散到 `packages/soy-ui/src/components/<ComponentName>/demos/` 中。
+2.  **Playground 应用**: `apps/playground/` 提供集中的组件开发和预览环境。
+
+如果 `examples/` 还承载了其他更复杂的集成示例或项目模板，可以考虑将其保留并重命名，或者将其内容迁移到 `apps/` 目录下作为单独的示例项目。
+
+## 8. 总结
+
+通过上述结构和流程调整，期望可以：
+
+*   **降低维护成本**: 组件代码、示例和文档物理上更接近，修改和同步更容易。
+*   **提升开发体验**: Playground 为组件开发提供即时反馈。
+*   **改善文档质量**: Demos 直接来源于开发过程，保证了示例的准确性和实用性。
+*   **清晰的职责分离**: `soy-ui` 聚焦于组件实现，`playground` 聚焦于开发预览，`official-site` 聚焦于最终用户文档。
diff --git a/NUXT_DOCS_SETUP_PLAN.md b/NUXT_DOCS_SETUP_PLAN.md
new file mode 100644
index 00000000..9603aa7f
--- /dev/null
+++ b/NUXT_DOCS_SETUP_PLAN.md
@@ -0,0 +1,109 @@
+# Nuxt.js Documentation Site Setup Plan for Soybean UI
+
+This document outlines the steps and considerations for building the new documentation website for Soybean UI using Nuxt.js. The goal is to create a modern, performant, and maintainable documentation site, inspired by sites like Shadcn UI, while also incorporating multi-language support.
+
+## Phase 1: Project Setup and Basic Structure
+
+1.  **Initialize Nuxt Project:**
+    *   Create a new Nuxt project within the `apps/official-site` directory (as defined in `DEVELOPMENT_GUIDE.md`).
+    *   Command: `pnpm dlx nuxi@latest init apps/official-site`
+    *   Choose appropriate settings (TypeScript, package manager pnpm).
+
+2.  **Basic Layout and Pages:**
+    *   Design a default layout (`layouts/default.vue`) including a header, sidebar (for navigation), and a main content area.
+    *   Create an initial `pages/index.vue` for the homepage.
+    *   Set up basic routing.
+
+3.  **Integrate UnoCSS:**
+    *   Add UnoCSS to the Nuxt project for styling, leveraging `@soybean-ui/unocss-preset` if possible or creating a compatible configuration.
+    *   Ensure UnoCSS works correctly within Nuxt components and Markdown-generated content.
+
+4.  **Directory Structure for Content:**
+    *   Confirm the strategy for sourcing component documentation:
+        *   Markdown files: `packages/soy-ui/src/components/<ComponentName>/index.md`
+        *   Demo files: `packages/soy-ui/src/components/<ComponentName>/demos/*.vue`
+
+## Phase 2: Content Rendering and Component Integration
+
+1.  **Markdown Rendering:**
+    *   Choose and configure a Nuxt module for Markdown rendering (e.g., `@nuxt/content`).
+    *   Ensure it can parse frontmatter from `index.md` files for metadata (title, description, etc.).
+    *   Style the rendered HTML output to match the design.
+
+2.  **Dynamic Component Pages:**
+    *   Create a dynamic route, e.g., `pages/components/[...slug].vue`.
+    *   This page will fetch and render the `index.md` content for the corresponding component based on the slug.
+    *   The slug should map to component names (e.g., `alert`, `button`).
+
+3.  **Demo Rendering (`<Demo>` Component):**
+    *   Develop a global Nuxt component (e.g., `<DemoViewer />` or similar name as `<Demo>` in `DEVELOPMENT_GUIDE.md`).
+    *   This component will be used within Markdown files to embed live demos.
+    *   It should dynamically load and render `.vue` demo files from `packages/soy-ui/src/components/<ComponentName>/demos/<demoName>.vue`.
+    *   Features for `<DemoViewer />`:
+        *   Display the rendered demo.
+        *   Option to view the source code of the demo.
+        *   Option to copy the source code.
+        *   Potentially link to a playground environment (e.g., StackBlitz, CodeSandbox, or the local `apps/playground`).
+
+4.  **Automatic Navigation/Sidebar Generation:**
+    *   The sidebar should list all available components, grouped категоріями (if applicable).
+    *   This list should be generated dynamically by scanning the `packages/soy-ui/src/components/` directory or from a configuration file.
+    *   Clicking a component name should navigate to its documentation page.
+
+## Phase 3: Enhancements and Features
+
+1.  **Search Functionality:**
+    *   Implement search across component documentation (API, descriptions).
+    *   Consider using `@nuxt/content`'s built-in search or integrating a service like Algolia.
+
+2.  **Multi-language Support (i18n):**
+    *   Integrate `@nuxtjs/i18n` or a similar Nuxt i18n module.
+    *   Plan the structure for translated Markdown content and demo descriptions.
+        *   Option 1: `index.en.md`, `index.zh.md`
+        *   Option 2: Subdirectories per locale, e.g., `en/index.md`, `zh/index.md`.
+    *   Implement a language switcher UI element.
+    *   Ensure demos and their textual descriptions can also be localized if necessary.
+
+3.  **Theme Customization (Dark Mode, Primary Color):**
+    *   Implement a theme switcher for dark/light mode, similar to the current setup.
+    *   Allow users to preview components with different primary colors (if this is a feature of `soy-ui`). This might involve dynamic CSS variable changes.
+
+4.  **SEO and Meta Tags:**
+    *   Ensure proper meta tags (title, description) are generated for each page.
+    *   Utilize Nuxt's head management features.
+
+5.  **Shadcn UI Inspired Design:**
+    *   Adopt a clean, modern aesthetic similar to `ui.shadcn.com`.
+    *   Focus on typography, spacing, and overall user experience.
+    *   The `<DemoViewer />` component should be a key focus for a polished look and feel.
+
+## Phase 4: Build, Deployment, and Maintenance
+
+1.  **Static Site Generation (SSG):**
+    *   Configure Nuxt for full static site generation for optimal performance.
+    *   Command: `pnpm --filter ./apps/official-site generate` (or similar, based on Nuxt version).
+
+2.  **Deployment:**
+    *   Choose a hosting platform (e.g., Vercel, Netlify, GitHub Pages).
+    *   Set up CI/CD pipeline to automatically build and deploy the site on changes to the `main` branch or specific documentation-related branches/tags.
+
+3.  **Maintenance Plan:**
+    *   Document how to add new component documentation.
+    *   Keep Nuxt and its dependencies updated.
+
+## Key Technologies and Modules (Tentative)
+
+*   **Framework:** Nuxt.js 3
+*   **Styling:** UnoCSS (with `@soybean-ui/unocss-preset`)
+*   **Content:** `@nuxt/content` (or alternative Markdown/Vue component rendering solution)
+*   **i18n:** `@nuxtjs/i18n`
+*   **State Management (if needed):** Pinia (comes with Nuxt 3)
+*   **UI Components (for the docs site itself):** Potentially use `soy-ui` components if stable, or build simple ones.
+
+## Open Questions / Decisions to be Made
+
+*   Exact mechanism for the `<Demo>` component to resolve and load `.vue` demo files from a different package (`packages/soy-ui`) within the Nuxt app (`apps/official-site`). This might involve Vite/Nuxt configuration for aliasing or custom loaders/plugins.
+*   Strategy for managing API tables in Markdown (manual, or generated from JSDoc/TSDoc comments).
+*   Specific UI design details and component choices for the documentation site itself.
+
+This plan will be updated as the project progresses.
diff --git a/apps/official-site/.gitignore b/apps/official-site/.gitignore
new file mode 100644
index 00000000..4a7f73a2
--- /dev/null
+++ b/apps/official-site/.gitignore
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/apps/official-site/README.md b/apps/official-site/README.md
new file mode 100644
index 00000000..25b58212
--- /dev/null
+++ b/apps/official-site/README.md
@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/apps/official-site/app.vue b/apps/official-site/app.vue
new file mode 100644
index 00000000..09f935bb
--- /dev/null
+++ b/apps/official-site/app.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtWelcome />
+  </div>
+</template>
diff --git a/apps/official-site/nuxt.config.ts b/apps/official-site/nuxt.config.ts
new file mode 100644
index 00000000..8ae12e6c
--- /dev/null
+++ b/apps/official-site/nuxt.config.ts
@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: true }
+})
diff --git a/apps/official-site/package.json b/apps/official-site/package.json
new file mode 100644
index 00000000..5dcb4ef3
--- /dev/null
+++ b/apps/official-site/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.17.3",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1"
+  }
+}
diff --git a/apps/official-site/public/favicon.ico b/apps/official-site/public/favicon.ico
new file mode 100644
index 00000000..18993ad9
Binary files /dev/null and b/apps/official-site/public/favicon.ico differ
diff --git a/apps/official-site/public/robots.txt b/apps/official-site/public/robots.txt
new file mode 100644
index 00000000..0ad279c7
--- /dev/null
+++ b/apps/official-site/public/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:
diff --git a/apps/official-site/server/tsconfig.json b/apps/official-site/server/tsconfig.json
new file mode 100644
index 00000000..b9ed69c1
--- /dev/null
+++ b/apps/official-site/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/apps/official-site/tsconfig.json b/apps/official-site/tsconfig.json
new file mode 100644
index 00000000..a746f2a7
--- /dev/null
+++ b/apps/official-site/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/apps/playground/.editorconfig b/apps/playground/.editorconfig
new file mode 100644
index 00000000..0552777e
--- /dev/null
+++ b/apps/playground/.editorconfig
@@ -0,0 +1,11 @@
+# Editor configuration, see http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/apps/playground/.npmrc b/apps/playground/.npmrc
new file mode 100644
index 00000000..dfc2d686
--- /dev/null
+++ b/apps/playground/.npmrc
@@ -0,0 +1,4 @@
+registry=https://registry.npmmirror.com/
+shamefully-hoist=true
+ignore-workspace-root-check=true
+link-workspace-packages=true
diff --git a/apps/playground/eslint.config.js b/apps/playground/eslint.config.js
new file mode 100644
index 00000000..e8b3ede5
--- /dev/null
+++ b/apps/playground/eslint.config.js
@@ -0,0 +1,30 @@
+import { defineConfig } from '@soybeanjs/eslint-config';
+
+export default defineConfig(
+  { vue: true, unocss: true },
+  {
+    rules: {
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-empty-interface': 'off',
+      '@typescript-eslint/no-invalid-void-type': 'off',
+      'consistent-return': 'off',
+      'guard-for-in': 'off',
+      'max-params': ['warn', 5],
+      'no-warning-comments': 'off',
+      'no-plusplus': 'off',
+      'no-underscore-dangle': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      'unocss/order-attributify': 'off',
+      'vue/multi-word-component-names': 'off',
+      'vue/no-static-inline-styles': 'off',
+      'vue/require-default-prop': 'off',
+      'vue/return-in-computed-property': 'off'
+    }
+  },
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'n/prefer-global/process': 'off'
+    }
+  }
+);
diff --git a/apps/playground/index.html b/apps/playground/index.html
new file mode 100644
index 00000000..67d4191f
--- /dev/null
+++ b/apps/playground/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-cmn-Hans">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>SoybeanUI</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/playground/package.json b/apps/playground/package.json
new file mode 100644
index 00000000..6c6c2792
--- /dev/null
+++ b/apps/playground/package.json
@@ -0,0 +1,97 @@
+{
+  "name": "soybean-ui",
+  "type": "module",
+  "version": "0.0.2-beta.4",
+  "private": true,
+  "packageManager": "pnpm@10.11.0",
+  "description": "soybean-ui is an ui library like shadcn for Vue3.",
+  "author": {
+    "name": "Soybean",
+    "email": "soybeanjs@outlook.com",
+    "url": "https://github.com/soybeanjs"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/soybeanjs/soybean-ui",
+  "repository": {
+    "url": "https://github.com/soybeanjs/soybean-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/soybeanjs/soybean-ui/issues"
+  },
+  "keywords": [
+    "UI",
+    "UnoCSS",
+    "shadcn-ui",
+    "vue3"
+  ],
+  "scripts": {
+    "build": "pnpm build:pkg && vite build",
+    "build-only": "vite build",
+    "build:docs": "pnpm build:pkg && pnpm -r --filter=\"./docs\" run build",
+    "build:pkg": "pnpm -r --filter=\"./packages/**\" run build",
+    "build:primitives": "pnpm -r --filter=\"./packages/primitives\" run build",
+    "build:ui": "pnpm -r --filter=\"./packages/ui\" run build",
+    "cleanup": "soy cleanup",
+    "commit": "soy git-commit",
+    "dev": "vite",
+    "dev:docs": "pnpm -r --filter=\"./docs\" run dev",
+    "generate": "tsx scripts/generate.ts",
+    "lint": "eslint . --fix",
+    "prepare": "simple-git-hooks",
+    "preview": "vite preview",
+    "preview:docs": "pnpm -r --filter=\"./docs\" run preview",
+    "publish-pkg": "pnpm -r publish --access public",
+    "rebuild-code": "tsx scripts/code.ts",
+    "release": "soy release",
+    "restore": "tsx scripts/restore.ts",
+    "stub": "tsx scripts/stub.ts",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck",
+    "update-pkg": "soy update-pkg"
+  },
+  "dependencies": {
+    "@soybean-ui/examples": "workspace:*",
+    "@unocss/reset": "66.1.1",
+    "@vee-validate/valibot": "4.15.0",
+    "@vueuse/core": "13.1.0",
+    "@vueuse/router": "13.1.0",
+    "es-toolkit": "1.37.2",
+    "lucide-vue-next": "0.509.0",
+    "soy-ui": "workspace:*",
+    "valibot": "1.1.0",
+    "vue": "3.5.13",
+    "vue-router": "4.5.1"
+  },
+  "devDependencies": {
+    "@soybean-ui/unocss-preset": "workspace:*",
+    "@soybeanjs/cli": "1.2.1",
+    "@soybeanjs/eslint-config": "1.6.0",
+    "@soybeanjs/unocss-preset": "0.1.1",
+    "@types/node": "22.15.17",
+    "@unocss/eslint-config": "66.1.1",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@vitejs/plugin-vue-jsx": "4.1.2",
+    "@vue/shared": "3.5.13",
+    "embla-carousel": "8.6.0",
+    "enquirer": "2.4.1",
+    "eslint": "9.26.0",
+    "eslint-plugin-vue": "10.1.0",
+    "grapheme-splitter": "1.0.4",
+    "lint-staged": "16.0.0",
+    "simple-git-hooks": "2.13.0",
+    "tsx": "4.19.4",
+    "typescript": "5.8.3",
+    "unocss": "66.1.1",
+    "unocss-preset-animations": "1.2.1",
+    "vite": "6.3.5",
+    "vite-plugin-vue-devtools": "7.7.6",
+    "vue-eslint-parser": "10.1.3",
+    "vue-tsc": "2.2.10"
+  },
+  "simple-git-hooks": {
+    "commit-msg": "pnpm soy git-commit-verify",
+    "pre-commit": "pnpm typecheck && pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}
diff --git a/public/favicon.svg b/apps/playground/public/favicon.svg
similarity index 100%
rename from public/favicon.svg
rename to apps/playground/public/favicon.svg
diff --git a/src/App.vue b/apps/playground/src/App.vue
similarity index 100%
rename from src/App.vue
rename to apps/playground/src/App.vue
diff --git a/apps/playground/src/components/theme-customizer.vue b/apps/playground/src/components/theme-customizer.vue
new file mode 100644
index 00000000..55110c42
--- /dev/null
+++ b/apps/playground/src/components/theme-customizer.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core';
+import { SButton, SLabel } from 'soy-ui';
+import type { ThemeSize } from 'soy-ui';
+import { builtinColorMap, builtinRadiuses } from '@soybean-ui/unocss-preset';
+import type { ThemeConfigColor } from '@soybean-ui/unocss-preset';
+import { Check } from 'lucide-vue-next';
+
+defineOptions({
+  name: 'ThemeCustomizer'
+});
+
+interface ThemeCustomizeProps {
+  color: ThemeConfigColor;
+  radius: number;
+  size: ThemeSize;
+}
+
+const props = defineProps<ThemeCustomizeProps>();
+
+type ThemeCustomizeEmits = {
+  (e: 'update:color', value: ThemeConfigColor): void;
+  (e: 'update:radius', value: number): void;
+  (e: 'update:size', value: ThemeSize): void;
+};
+
+const emit = defineEmits<ThemeCustomizeEmits>();
+
+const color = useVModel(props, 'color', emit);
+const radius = useVModel(props, 'radius', emit);
+const size = useVModel(props, 'size', emit);
+
+const sizes: ThemeSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+function setTheme(item: ThemeConfigColor) {
+  color.value = item;
+}
+
+function setRadius(item: number) {
+  radius.value = item;
+}
+
+function setSize(item: ThemeSize) {
+  size.value = item;
+}
+</script>
+
+<template>
+  <div class="p-4">
+    <div class="grid space-y-1">
+      <h1 class="text-md text-foreground font-semibold">Customize</h1>
+      <p class="text-xs text-muted-foreground">Pick a style and color for your components.</p>
+    </div>
+    <div class="pt-6 space-y-1.5">
+      <SLabel for="color" class="text-xs">Color</SLabel>
+      <div class="grid grid-cols-3 gap-2 py-1.5">
+        <div v-for="(value, key) in builtinColorMap" :key="key" :class="{ 'col-span-3': key === 'default' }">
+          <SButton
+            :variant="color === key ? 'outline' : 'pure'"
+            size="sm"
+            class="justify-start"
+            :class="{ 'w-full': key !== 'default' }"
+            @click="setTheme(key)"
+          >
+            <span
+              class="size-4 flex shrink-0 items-center justify-center rounded-full"
+              :style="{ backgroundColor: `hsl(${value})` }"
+            >
+              <Check v-if="color === key" class="size-3 text-white" />
+            </span>
+            <span class="ml-2 text-xs capitalize">
+              {{ key }}
+            </span>
+          </SButton>
+        </div>
+      </div>
+    </div>
+    <div class="pt-6 space-y-1.5">
+      <SLabel for="radius" class="text-xs">Radius</SLabel>
+      <div class="grid grid-cols-5 gap-2 py-1.5">
+        <SButton
+          v-for="(r, index) in builtinRadiuses"
+          :key="index"
+          :variant="r === radius ? 'outline' : 'pure'"
+          size="sm"
+          @click="setRadius(r)"
+        >
+          <span class="text-xs">{{ r }}</span>
+        </SButton>
+      </div>
+    </div>
+    <div class="pt-6 space-y-1.5">
+      <SLabel for="size" class="text-xs">Size</SLabel>
+      <div class="grid grid-cols-5 gap-2 py-1.5">
+        <SButton
+          v-for="(s, index) in sizes"
+          :key="index"
+          :variant="s === size ? 'outline' : 'pure'"
+          size="sm"
+          @click="setSize(s)"
+        >
+          <span class="text-xs">{{ s }}</span>
+        </SButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/playground/src/components/theme-size-toggler.vue b/apps/playground/src/components/theme-size-toggler.vue
new file mode 100644
index 00000000..d68ca356
--- /dev/null
+++ b/apps/playground/src/components/theme-size-toggler.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { SButton, SButtonGroup, SSelect } from 'soy-ui';
+import type { SelectOptionData, ThemeSize } from 'soy-ui';
+
+const size = defineModel<ThemeSize>('size', { default: 'md' });
+
+const sizes: SelectOptionData<ThemeSize>[] = [
+  { value: 'xs', label: 'xs' },
+  { value: 'sm', label: 'sm' },
+  { value: 'md', label: 'md' },
+  { value: 'lg', label: 'lg' },
+  { value: 'xl', label: 'xl' },
+  { value: '2xl', label: '2xl' }
+];
+</script>
+
+<template>
+  <SButtonGroup>
+    <SButton variant="pure" class="cursor-default">Size：</SButton>
+    <SSelect v-model="size" :items="sizes" side="bottom" align="end" :side-offset="0" />
+  </SButtonGroup>
+</template>
diff --git a/src/main.ts b/apps/playground/src/main.ts
similarity index 100%
rename from src/main.ts
rename to apps/playground/src/main.ts
diff --git a/src/router/index.ts b/apps/playground/src/router/index.ts
similarity index 100%
rename from src/router/index.ts
rename to apps/playground/src/router/index.ts
diff --git a/src/views/demo/index.vue b/apps/playground/src/views/demo/index.vue
similarity index 100%
rename from src/views/demo/index.vue
rename to apps/playground/src/views/demo/index.vue
diff --git a/apps/playground/src/views/ui/components/DemosRenderer.vue b/apps/playground/src/views/ui/components/DemosRenderer.vue
new file mode 100644
index 00000000..937d611e
--- /dev/null
+++ b/apps/playground/src/views/ui/components/DemosRenderer.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { type Component, defineAsyncComponent, shallowRef, watchEffect } from 'vue';
+
+interface Props {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  loader?: () => Promise<Record<string, any>>; // Accept any for module exports
+}
+const props = defineProps<Props>();
+
+const demos = shallowRef<Record<string, Component> | null>(null);
+const error = shallowRef<any>(null);
+const isLoading = shallowRef(true);
+
+watchEffect(async () => {
+  if (props.loader) {
+    isLoading.value = true;
+    error.value = null;
+    demos.value = null;
+    try {
+      const loadedModule = await props.loader();
+      const resolvedComponents: Record<string, Component> = {};
+
+      for (const key in loadedModule) {
+        // Check if it's a component or an async component loader
+        if (typeof loadedModule[key] === 'function' || typeof loadedModule[key] === 'object') {
+          // Standardize to async component for consistent handling
+          resolvedComponents[key] = defineAsyncComponent(async () => loadedModule[key]);
+        }
+      }
+
+      const sortedEntries = Object.entries(resolvedComponents).sort(([keyA], [keyB]) => {
+        const isDebugA = keyA.toLowerCase().includes('debug');
+        const isDebugB = keyB.toLowerCase().includes('debug');
+        if (isDebugA && !isDebugB) return -1;
+        if (!isDebugA && isDebugB) return 1;
+        return keyA.localeCompare(keyB);
+      });
+      demos.value = Object.fromEntries(sortedEntries);
+    } catch (e) {
+      console.error('Failed to load or process demos:', e);
+      error.value = e;
+    } finally {
+      isLoading.value = false;
+    }
+  }
+});
+
+function formatDemoName(name: string): string {
+  // Remove 'Demo' suffix if present
+  let formattedName = name.endsWith('Demo') ? name.slice(0, -4) : name;
+  // Add spaces before capital letters for readability, but not if it's the first letter
+  formattedName = formattedName.replace(/([A-Z])/g, ' $1').trim();
+  // Capitalize first letter
+  return formattedName.charAt(0).toUpperCase() + formattedName.slice(1);
+}
+</script>
+
+<template>
+  <div v-if="isLoading" class="h-32 flex items-center justify-center">
+    <p class="text-gray-500 dark:text-gray-400">Loading demos...</p>
+  </div>
+  <div v-else-if="error" class="border border-red-400 rounded bg-red-100 p-4 text-red-700">
+    <p class="font-semibold">Error loading demos:</p>
+    <pre class="whitespace-pre-wrap text-sm">{{ error.message || error }}</pre>
+    <p class="mt-2 text-xs">Check the browser console for more details.</p>
+  </div>
+  <div v-else-if="demos && Object.keys(demos).length > 0">
+    <div
+      v-for="(comp, name) in demos"
+      :key="name"
+      class="mb-8 border border-gray-200 rounded-xl bg-white p-6 shadow-lg transition-all dark:border-neutral-700 dark:bg-neutral-800 hover:shadow-xl"
+    >
+      <h3
+        class="mb-4 border-b border-gray-200 pb-2 text-xl text-gray-800 font-bold dark:border-neutral-700 dark:text-gray-100"
+      >
+        {{ formatDemoName(name) }}
+      </h3>
+      <component :is="comp" />
+    </div>
+  </div>
+  <div v-else class="h-32 flex items-center justify-center">
+    <p class="text-gray-500 dark:text-gray-400">No demos found for this component.</p>
+  </div>
+</template>
diff --git a/src/views/ui/index.vue b/apps/playground/src/views/ui/index.vue
similarity index 64%
rename from src/views/ui/index.vue
rename to apps/playground/src/views/ui/index.vue
index 0615c581..1f07db10 100644
--- a/src/views/ui/index.vue
+++ b/apps/playground/src/views/ui/index.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import type { Component } from 'vue';
 import { useDark, useStorage } from '@vueuse/core';
 import { useRouteQuery } from '@vueuse/router';
 import { SButtonIcon, SCard, SConfigProvider, SPopover, SScrollArea, STabs, SToastProvider } from 'soy-ui';
 import type { ConfigProviderProps, TabsOptionData, ThemeSize } from 'soy-ui';
-import * as ExampleComponents from '@soybean-ui/examples';
-import { ThemeCustomizer } from '@soybean-ui/examples';
 import type { ThemeConfigColor } from '@soybean-ui/unocss-preset';
 import { kebabCase } from 'es-toolkit';
 import { Moon, Sun, SwatchBook } from 'lucide-vue-next';
+import ThemeCustomizer from '@/components/theme-customizer.vue';
+import DemosRenderer from './components/DemosRenderer.vue';
 
 defineOptions({
   name: 'UiPage'
 });
 
-const activeTab = useRouteQuery('tab', 'accordion' as string);
+const activeTab = useRouteQuery<string>('tab', 'accordion');
 
 const isDark = useDark();
 
@@ -36,19 +36,35 @@ const configProviderProps = computed<ConfigProviderProps>(() => ({
 }));
 
 interface TabConfig extends TabsOptionData {
-  component: Component;
+  demosLoader: () => Promise<Record<string, Component>>;
 }
 
-const tabs: TabConfig[] = [];
+const tabs = ref<TabConfig[]>([]);
 
-Object.entries(ExampleComponents).forEach(([key, component]) => {
-  if (!key.includes('Demo')) return;
+onMounted(() => {
+  tabs.value = [];
+  const demoModules = import.meta.glob('~packages/soy-ui/src/components/**/demos/index.ts');
 
-  tabs.push({
-    label: key.replace('Demo', ''),
-    value: kebabCase(key.replace('Demo', '')),
-    component: component as Component
-  });
+  const componentTabs: TabConfig[] = [];
+
+  for (const path in demoModules) {
+    const match = path.match(/components\/([^/]+)\/demos\/index\.ts$/);
+    if (match && match[1]) {
+      const componentName = match[1];
+      const label = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+      componentTabs.push({
+        label,
+        value: kebabCase(componentName),
+        demosLoader: demoModules[path] as () => Promise<Record<string, Component>>
+      });
+    }
+  }
+
+  tabs.value = componentTabs.sort((a, b) => a.label.localeCompare(b.label));
+
+  if (tabs.value.length > 0 && (!activeTab.value || !tabs.value.find(t => t.value === activeTab.value))) {
+    activeTab.value = String(tabs.value[0].value);
+  }
 });
 </script>
 
@@ -83,10 +99,10 @@ Object.entries(ExampleComponents).forEach(([key, component]) => {
               trigger: 'flex-none'
             }"
           >
-            <template #content="{ component }">
+            <template #content="{ demosLoader }">
               <SScrollArea class="h-full">
                 <div class="p-18px">
-                  <component :is="component" />
+                  <DemosRenderer :loader="demosLoader" />
                 </div>
               </SScrollArea>
             </template>
diff --git a/apps/playground/tsconfig.json b/apps/playground/tsconfig.json
new file mode 100644
index 00000000..4ef3abd6
--- /dev/null
+++ b/apps/playground/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.vue"]
+}
diff --git a/uno.config.ts b/apps/playground/uno.config.ts
similarity index 100%
rename from uno.config.ts
rename to apps/playground/uno.config.ts
diff --git a/apps/playground/vite.config.ts b/apps/playground/vite.config.ts
new file mode 100644
index 00000000..8c38da6c
--- /dev/null
+++ b/apps/playground/vite.config.ts
@@ -0,0 +1,35 @@
+import process from 'node:process';
+import { URL, fileURLToPath } from 'node:url';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import unocss from 'unocss/vite';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '~': fileURLToPath(new URL('./', import.meta.url)),
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '~packages': fileURLToPath(new URL('../../packages', import.meta.url))
+    }
+  },
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+  },
+  plugins: [vue({ include: ['**/*.vue', 'packages/**/*.vue'] }), vueJsx(), unocss()],
+  server: {
+    host: '0.0.0.0',
+    port: 1997,
+    open: true
+  },
+  preview: {
+    port: 9725
+  },
+  build: {
+    reportCompressedSize: false,
+    sourcemap: true,
+    commonjsOptions: {
+      ignoreTryCatch: false
+    }
+  }
+});
diff --git a/examples/src/index.ts b/examples/src/index.ts
index a20103d8..ad74afec 100644
--- a/examples/src/index.ts
+++ b/examples/src/index.ts
@@ -1,108 +1,3 @@
 import ThemeCustomizer from './components/theme-customizer.vue';
-import DemoAlert from './ui/alert.vue';
-import DemoAlertDialog from './ui/alert-dialog.vue';
-import DemoAspectRatio from './ui/aspect-ratio.vue';
-import DemoAvatar from './ui/avatar.vue';
-import DemoBadge from './ui/badge.vue';
-import DemoBreadcrumb from './ui/breadcrumb.vue';
-import DemoButton from './ui/button.vue';
-import DemoCard from './ui/card.vue';
-import DemoCarousel from './ui/carousel.vue';
-import DemoCheckbox from './ui/checkbox.vue';
-import DemoChip from './ui/chip.vue';
-import DemoCollapsible from './ui/collapsible.vue';
-import DemoCombobox from './ui/combobox.vue';
-import DemoCommand from './ui/command.vue';
-import DemoContextMenu from './ui/context-menu.vue';
-import DemoDialog from './ui/dialog.vue';
-import DemoDrawer from './ui/drawer.vue';
-import DemoDropdownMenu from './ui/dropdown-menu.vue';
-import DemoForm from './ui/form.vue';
-import DemoHoverCard from './ui/hover-card.vue';
-import DemoInput from './ui/input.vue';
-import DemoKeyboardKey from './ui/keyboard-key.vue';
-import DemoLayout from './ui/layout.vue';
-import DemoMenubar from './ui/menubar.vue';
-import DemoNavigationMenu from './ui/navigation-menu.vue';
-import DemoNumberField from './ui/number-field.vue';
-import DemoPagination from './ui/pagination.vue';
-import DemoPinInput from './ui/pin-input.vue';
-import DemoPopover from './ui/popover.vue';
-import DemoProgress from './ui/progress.vue';
-import DemoRadio from './ui/radio.vue';
-import DemoResizable from './ui/resizable.vue';
-import DemoScrollArea from './ui/scroll-area.vue';
-import DemoSegment from './ui/segment.vue';
-import DemoSelect from './ui/select.vue';
-import DemoSeparator from './ui/separator.vue';
-import DemoSheet from './ui/sheet.vue';
-import DemoSidebarMenu from './ui/sidebar-menu.vue';
-import DemoSkeleton from './ui/skeleton.vue';
-import DemoSlider from './ui/slider.vue';
-import DemoSonner from './ui/sonner.vue';
-import DemoStepper from './ui/stepper.vue';
-import DemoSwitch from './ui/switch.vue';
-import DemoTabs from './ui/tabs.vue';
-import DemoTagsInput from './ui/tags-input.vue';
-import DemoTextarea from './ui/textarea.vue';
-import DemoToast from './ui/toast.vue';
-import DemoToggle from './ui/toggle.vue';
-import DemoToggleGroup from './ui/toggle-group.vue';
-import DemoTooltip from './ui/tooltip.vue';
 
-export * from './ui/button/index';
-export * from './ui/accordion';
-
-export {
-  ThemeCustomizer,
-  DemoAlert,
-  DemoAlertDialog,
-  DemoAspectRatio,
-  DemoAvatar,
-  DemoBadge,
-  DemoBreadcrumb,
-  DemoButton,
-  DemoCard,
-  DemoCarousel,
-  DemoCheckbox,
-  DemoChip,
-  DemoCollapsible,
-  DemoCombobox,
-  DemoCommand,
-  DemoContextMenu,
-  DemoDialog,
-  DemoDrawer,
-  DemoDropdownMenu,
-  DemoForm,
-  DemoHoverCard,
-  DemoInput,
-  DemoKeyboardKey,
-  DemoLayout,
-  DemoMenubar,
-  DemoNavigationMenu,
-  DemoNumberField,
-  DemoPagination,
-  DemoPinInput,
-  DemoPopover,
-  DemoProgress,
-  DemoRadio,
-  DemoResizable,
-  DemoScrollArea,
-  DemoSegment,
-  DemoSelect,
-  DemoSeparator,
-  DemoSheet,
-  DemoSidebarMenu,
-  DemoSkeleton,
-  DemoSlider,
-  DemoSonner,
-  DemoStepper,
-  DemoSwitch,
-  DemoTabs,
-  DemoTagsInput,
-  DemoTextarea,
-  DemoToast,
-  DemoToggle,
-  DemoToggleGroup,
-  DemoTooltip
-};
+export { ThemeCustomizer };
diff --git a/examples/src/ui/accordion/accordion.vue b/examples/src/ui/accordion/accordion.vue
deleted file mode 100644
index 92a498fb..00000000
--- a/examples/src/ui/accordion/accordion.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import DemoAccordionSingle from './single.vue';
-import DemoAccordionMultiple from './multiple.vue';
-import DemoAccordionCustomStyling from './custom-styling.vue';
-import DemoAccordionCustomIcon from './custom-icon.vue';
-import DemoAccordionSize from './size.vue';
-
-defineOptions({
-  name: 'DemoAccordion'
-});
-</script>
-
-<template>
-  <div class="flex-c gap-4">
-    <DemoAccordionSingle />
-    <DemoAccordionMultiple />
-    <DemoAccordionCustomStyling />
-    <DemoAccordionCustomIcon />
-    <DemoAccordionSize />
-  </div>
-</template>
diff --git a/examples/src/ui/button/index.ts b/examples/src/ui/button/index.ts
deleted file mode 100644
index 4362d076..00000000
--- a/examples/src/ui/button/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import DemoButtonColor from './color.vue';
-
-export { DemoButtonColor };
diff --git a/package.json b/package.json
index 6086c3b7..d5dfc1b3 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.2-beta.4",
   "private": true,
-  "packageManager": "pnpm@10.10.0",
+  "packageManager": "pnpm@10.11.0",
   "description": "soybean-ui is an ui library like shadcn for Vue3.",
   "author": {
     "name": "Soybean",
@@ -18,17 +18,19 @@
   "bugs": {
     "url": "https://github.com/soybeanjs/soybean-ui/issues"
   },
-  "keywords": ["UI", "UnoCSS", "shadcn-ui", "vue3"],
+  "keywords": [
+    "UI",
+    "UnoCSS",
+    "shadcn-ui",
+    "vue3"
+  ],
   "scripts": {
-    "build": "pnpm build:pkg && vite build",
-    "build-only": "vite build",
     "build:docs": "pnpm build:pkg && pnpm -r --filter=\"./docs\" run build",
     "build:pkg": "pnpm -r --filter=\"./packages/**\" run build",
     "build:primitives": "pnpm -r --filter=\"./packages/primitives\" run build",
     "build:ui": "pnpm -r --filter=\"./packages/ui\" run build",
     "cleanup": "soy cleanup",
     "commit": "soy git-commit",
-    "dev": "vite",
     "dev:docs": "pnpm -r --filter=\"./docs\" run dev",
     "generate": "tsx scripts/generate.ts",
     "lint": "eslint . --fix",
@@ -43,44 +45,14 @@
     "typecheck": "vue-tsc --noEmit --skipLibCheck",
     "update-pkg": "soy update-pkg"
   },
-  "dependencies": {
-    "@soybean-ui/examples": "workspace:*",
-    "@unocss/reset": "66.1.1",
-    "@vee-validate/valibot": "4.15.0",
-    "@vueuse/core": "13.1.0",
-    "@vueuse/router": "13.1.0",
-    "es-toolkit": "1.37.2",
-    "lucide-vue-next": "0.509.0",
-    "soy-ui": "workspace:*",
-    "valibot": "1.1.0",
-    "vue": "3.5.13",
-    "vue-router": "4.5.1"
-  },
   "devDependencies": {
-    "@soybean-ui/unocss-preset": "workspace:*",
     "@soybeanjs/cli": "1.2.1",
     "@soybeanjs/eslint-config": "1.6.0",
-    "@soybeanjs/unocss-preset": "0.1.1",
-    "@types/node": "22.15.17",
     "@unocss/eslint-config": "66.1.1",
-    "@vitejs/plugin-vue": "5.2.4",
-    "@vitejs/plugin-vue-jsx": "4.1.2",
-    "@vue/shared": "3.5.13",
-    "embla-carousel": "8.6.0",
-    "enquirer": "2.4.1",
     "eslint": "9.26.0",
     "eslint-plugin-vue": "10.1.0",
-    "grapheme-splitter": "1.0.4",
-    "lint-staged": "16.0.0",
     "simple-git-hooks": "2.13.0",
-    "tsx": "4.19.4",
-    "typescript": "5.8.3",
-    "unocss": "66.1.1",
-    "unocss-preset-animations": "1.2.1",
-    "vite": "6.3.5",
-    "vite-plugin-vue-devtools": "7.7.6",
-    "vue-eslint-parser": "10.1.3",
-    "vue-tsc": "2.2.10"
+    "vue-eslint-parser": "10.1.3"
   },
   "simple-git-hooks": {
     "commit-msg": "pnpm soy git-commit-verify",
@@ -88,5 +60,8 @@
   },
   "lint-staged": {
     "*": "eslint --fix"
+  },
+  "dependencies": {
+    "soybean-ui": "link:"
   }
 }
diff --git a/examples/src/ui/accordion/custom-icon.vue b/packages/soy-ui/src/components/accordion/demos/custom-icon.vue
similarity index 100%
rename from examples/src/ui/accordion/custom-icon.vue
rename to packages/soy-ui/src/components/accordion/demos/custom-icon.vue
diff --git a/examples/src/ui/accordion/custom-styling.vue b/packages/soy-ui/src/components/accordion/demos/custom-styling.vue
similarity index 100%
rename from examples/src/ui/accordion/custom-styling.vue
rename to packages/soy-ui/src/components/accordion/demos/custom-styling.vue
diff --git a/packages/soy-ui/src/components/accordion/demos/debug.vue b/packages/soy-ui/src/components/accordion/demos/debug.vue
new file mode 100644
index 00000000..2f443f50
--- /dev/null
+++ b/packages/soy-ui/src/components/accordion/demos/debug.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+//
+</script>
+
+<template>
+  <div>debug</div>
+</template>
diff --git a/examples/src/ui/accordion/index.ts b/packages/soy-ui/src/components/accordion/demos/index.ts
similarity index 86%
rename from examples/src/ui/accordion/index.ts
rename to packages/soy-ui/src/components/accordion/demos/index.ts
index c0cd1814..bfcabc0e 100644
--- a/examples/src/ui/accordion/index.ts
+++ b/packages/soy-ui/src/components/accordion/demos/index.ts
@@ -3,7 +3,7 @@ import DemoAccordionMultiple from './multiple.vue';
 import DemoAccordionCustomStyling from './custom-styling.vue';
 import DemoAccordionCustomIcon from './custom-icon.vue';
 import DemoAccordionSize from './size.vue';
-import DemoAccordion from './accordion.vue';
+import DemoDebug from './debug.vue';
 
 export {
   DemoAccordionSingle,
@@ -11,5 +11,5 @@ export {
   DemoAccordionCustomStyling,
   DemoAccordionCustomIcon,
   DemoAccordionSize,
-  DemoAccordion
+  DemoDebug
 };
diff --git a/examples/src/ui/accordion/multiple.vue b/packages/soy-ui/src/components/accordion/demos/multiple.vue
similarity index 100%
rename from examples/src/ui/accordion/multiple.vue
rename to packages/soy-ui/src/components/accordion/demos/multiple.vue
diff --git a/examples/src/ui/accordion/single.vue b/packages/soy-ui/src/components/accordion/demos/single.vue
similarity index 100%
rename from examples/src/ui/accordion/single.vue
rename to packages/soy-ui/src/components/accordion/demos/single.vue
diff --git a/examples/src/ui/accordion/size.vue b/packages/soy-ui/src/components/accordion/demos/size.vue
similarity index 100%
rename from examples/src/ui/accordion/size.vue
rename to packages/soy-ui/src/components/accordion/demos/size.vue
diff --git a/packages/soy-ui/src/components/accordion/index.ts b/packages/soy-ui/src/components/accordion/index.ts
index afeadc74..7def617f 100644
--- a/packages/soy-ui/src/components/accordion/index.ts
+++ b/packages/soy-ui/src/components/accordion/index.ts
@@ -1,9 +1,9 @@
-import SAccordion from './accordion.vue';
-import SAccordionContent from './accordion-content.vue';
-import SAccordionHeader from './accordion-header.vue';
-import SAccordionItem from './accordion-item.vue';
-import SAccordionRoot from './accordion-root.vue';
-import SAccordionTrigger from './accordion-trigger.vue';
+import SAccordion from './source/accordion.vue';
+import SAccordionContent from './source/accordion-content.vue';
+import SAccordionHeader from './source/accordion-header.vue';
+import SAccordionItem from './source/accordion-item.vue';
+import SAccordionRoot from './source/accordion-root.vue';
+import SAccordionTrigger from './source/accordion-trigger.vue';
 
 export { SAccordion, SAccordionContent, SAccordionHeader, SAccordionItem, SAccordionRoot, SAccordionTrigger };
 
diff --git a/packages/soy-ui/src/components/accordion/accordion-content.vue b/packages/soy-ui/src/components/accordion/source/accordion-content.vue
similarity index 92%
rename from packages/soy-ui/src/components/accordion/accordion-content.vue
rename to packages/soy-ui/src/components/accordion/source/accordion-content.vue
index ad92c716..26d11d8b 100644
--- a/packages/soy-ui/src/components/accordion/accordion-content.vue
+++ b/packages/soy-ui/src/components/accordion/source/accordion-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AccordionContent, useForwardProps } from '@soybean-ui/primitives';
 import { accordionVariants, cn } from '@soybean-ui/variants';
-import type { AccordionContentProps } from './types';
+import type { AccordionContentProps } from '../types';
 
 defineOptions({
   name: 'SAccordionContent'
diff --git a/packages/soy-ui/src/components/accordion/accordion-header.vue b/packages/soy-ui/src/components/accordion/source/accordion-header.vue
similarity index 91%
rename from packages/soy-ui/src/components/accordion/accordion-header.vue
rename to packages/soy-ui/src/components/accordion/source/accordion-header.vue
index 255e0ac5..6ec71013 100644
--- a/packages/soy-ui/src/components/accordion/accordion-header.vue
+++ b/packages/soy-ui/src/components/accordion/source/accordion-header.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AccordionHeader, useForwardProps } from '@soybean-ui/primitives';
 import { accordionVariants, cn } from '@soybean-ui/variants';
-import type { AccordionHeaderProps } from './types';
+import type { AccordionHeaderProps } from '../types';
 
 defineOptions({
   name: 'SAccordionHeader'
diff --git a/packages/soy-ui/src/components/accordion/accordion-item.vue b/packages/soy-ui/src/components/accordion/source/accordion-item.vue
similarity index 92%
rename from packages/soy-ui/src/components/accordion/accordion-item.vue
rename to packages/soy-ui/src/components/accordion/source/accordion-item.vue
index cbe4030a..c21e5666 100644
--- a/packages/soy-ui/src/components/accordion/accordion-item.vue
+++ b/packages/soy-ui/src/components/accordion/source/accordion-item.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AccordionItem, useForwardProps } from '@soybean-ui/primitives';
 import { accordionVariants, cn } from '@soybean-ui/variants';
-import type { AccordionItemProps } from './types';
+import type { AccordionItemProps } from '../types';
 
 defineOptions({
   name: 'SAccordionItem'
diff --git a/packages/soy-ui/src/components/accordion/accordion-root.vue b/packages/soy-ui/src/components/accordion/source/accordion-root.vue
similarity index 91%
rename from packages/soy-ui/src/components/accordion/accordion-root.vue
rename to packages/soy-ui/src/components/accordion/source/accordion-root.vue
index 5a0c5318..3aacfcd6 100644
--- a/packages/soy-ui/src/components/accordion/accordion-root.vue
+++ b/packages/soy-ui/src/components/accordion/source/accordion-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AccordionRoot, useCombinedPropsEmits } from '@soybean-ui/primitives';
 import { accordionVariants, cn } from '@soybean-ui/variants';
-import type { AccordionRootEmits, AccordionRootProps } from './types';
+import type { AccordionRootEmits, AccordionRootProps } from '../types';
 
 defineOptions({
   name: 'SAccordionRoot'
diff --git a/packages/soy-ui/src/components/accordion/accordion-trigger.vue b/packages/soy-ui/src/components/accordion/source/accordion-trigger.vue
similarity index 95%
rename from packages/soy-ui/src/components/accordion/accordion-trigger.vue
rename to packages/soy-ui/src/components/accordion/source/accordion-trigger.vue
index 3234d724..27164b44 100644
--- a/packages/soy-ui/src/components/accordion/accordion-trigger.vue
+++ b/packages/soy-ui/src/components/accordion/source/accordion-trigger.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { AccordionTrigger, Slot, useForwardProps } from '@soybean-ui/primitives';
 import { accordionVariants, cn } from '@soybean-ui/variants';
 import { ChevronDown } from 'lucide-vue-next';
-import type { AccordionTriggerProps } from './types';
+import type { AccordionTriggerProps } from '../types';
 
 defineOptions({
   name: 'SAccordionTrigger'
diff --git a/packages/soy-ui/src/components/accordion/accordion.vue b/packages/soy-ui/src/components/accordion/source/accordion.vue
similarity index 99%
rename from packages/soy-ui/src/components/accordion/accordion.vue
rename to packages/soy-ui/src/components/accordion/source/accordion.vue
index f6b13454..ca144ee5 100644
--- a/packages/soy-ui/src/components/accordion/accordion.vue
+++ b/packages/soy-ui/src/components/accordion/source/accordion.vue
@@ -9,12 +9,12 @@
 >
 import { useCombinedPropsEmits, useOmitForwardProps } from '@soybean-ui/primitives';
 import type { SingleOrMultipleType } from '@soybean-ui/primitives';
+import type { AccordionEmits, AccordionItemData, AccordionProps } from '../types';
 import SAccordionItem from './accordion-item.vue';
 import SAccordionHeader from './accordion-header.vue';
 import SAccordionContent from './accordion-content.vue';
 import SAccordionRoot from './accordion-root.vue';
 import SAccordionTrigger from './accordion-trigger.vue';
-import type { AccordionEmits, AccordionItemData, AccordionProps } from './types';
 
 defineOptions({
   name: 'SAccordion'
diff --git a/examples/src/ui/alert-dialog.vue b/packages/soy-ui/src/components/alert-dialog/demos/alert-dialog.vue
similarity index 100%
rename from examples/src/ui/alert-dialog.vue
rename to packages/soy-ui/src/components/alert-dialog/demos/alert-dialog.vue
diff --git a/packages/soy-ui/src/components/alert-dialog/demos/index.ts b/packages/soy-ui/src/components/alert-dialog/demos/index.ts
new file mode 100644
index 00000000..cde55607
--- /dev/null
+++ b/packages/soy-ui/src/components/alert-dialog/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoAlertDialog from './alert-dialog.vue';
+
+export { DemoAlertDialog };
diff --git a/packages/soy-ui/src/components/alert-dialog/index.ts b/packages/soy-ui/src/components/alert-dialog/index.ts
index dfa10b8d..9922843b 100644
--- a/packages/soy-ui/src/components/alert-dialog/index.ts
+++ b/packages/soy-ui/src/components/alert-dialog/index.ts
@@ -3,15 +3,15 @@ import {
   AlertDialogRoot as SAlertDialogRoot,
   AlertDialogTrigger as SAlertDialogTrigger
 } from '@soybean-ui/primitives';
-import SAlertDialog from './alert-dialog.vue';
-import SAlertDialogAction from './alert-dialog-action.vue';
-import SAlertDialogCancel from './alert-dialog-cancel.vue';
-import SAlertDialogContent from './alert-dialog-content.vue';
-import SAlertDialogDescription from './alert-dialog-description.vue';
-import SAlertDialogFooter from './alert-dialog-footer.vue';
-import SAlertDialogHeader from './alert-dialog-header.vue';
-import SAlertDialogOverlay from './alert-dialog-overlay.vue';
-import SAlertDialogTitle from './alert-dialog-title.vue';
+import SAlertDialog from './source/alert-dialog.vue';
+import SAlertDialogAction from './source/alert-dialog-action.vue';
+import SAlertDialogCancel from './source/alert-dialog-cancel.vue';
+import SAlertDialogContent from './source/alert-dialog-content.vue';
+import SAlertDialogDescription from './source/alert-dialog-description.vue';
+import SAlertDialogFooter from './source/alert-dialog-footer.vue';
+import SAlertDialogHeader from './source/alert-dialog-header.vue';
+import SAlertDialogOverlay from './source/alert-dialog-overlay.vue';
+import SAlertDialogTitle from './source/alert-dialog-title.vue';
 
 export {
   SAlertDialog,
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-action.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-action.vue
similarity index 79%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-action.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-action.vue
index 0b3e08ff..f664f4ed 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-action.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-action.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { AlertDialogAction, useForwardProps } from '@soybean-ui/primitives';
-import SButton from '../button/button.vue';
-import type { ButtonProps } from '../button/types';
+import SButton from '../../button/source/button.vue';
+import type { ButtonProps } from '../../button/types';
 
 defineOptions({
   name: 'SAlertDialogAction'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-cancel.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-cancel.vue
similarity index 81%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-cancel.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-cancel.vue
index 80871e38..bc6e4a36 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-cancel.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-cancel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { AlertDialogCancel, useForwardProps } from '@soybean-ui/primitives';
-import SButton from '../button/button.vue';
-import type { ButtonProps } from '../button/types';
+import SButton from '../../button/source/button.vue';
+import type { ButtonProps } from '../../button/types';
 
 defineOptions({
   name: 'SAlertDialogCancel'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-content.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-content.vue
similarity index 97%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-content.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-content.vue
index 90874cde..b490e265 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-content.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AlertDialogContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { AlertDialogContentEmits, AlertDialogContentProps } from './types';
+import type { AlertDialogContentEmits, AlertDialogContentProps } from '../types';
 
 defineOptions({
   name: 'SAlertDialogContent'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-description.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-description.vue
similarity index 90%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-description.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-description.vue
index ad9c307e..4d4a1e71 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-description.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-description.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AlertDialogDescription } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { AlertDialogDescriptionProps } from './types';
+import type { AlertDialogDescriptionProps } from '../types';
 
 defineOptions({
   name: 'SAlertDialogDescription'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-footer.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-footer.vue
similarity index 88%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-footer.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-footer.vue
index 381da302..09847039 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-footer.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-footer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { AlertDialogFooterProps } from './types';
+import type { AlertDialogFooterProps } from '../types';
 
 defineOptions({
   name: 'SAlertDialogFooter'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-header.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-header.vue
similarity index 88%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-header.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-header.vue
index 6e0f2037..efc9620b 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-header.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-header.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { AlertDialogHeaderProps } from './types';
+import type { AlertDialogHeaderProps } from '../types';
 
 defineOptions({
   name: 'SAlertDialogHeader'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-overlay.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-overlay.vue
similarity index 89%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-overlay.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-overlay.vue
index 90658406..cb5aa4d2 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-overlay.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-overlay.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AlertDialogOverlay } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { AlertDialogOverlayProps } from './types';
+import type { AlertDialogOverlayProps } from '../types';
 
 defineOptions({
   name: 'SAlertDialogOverlay'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog-title.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-title.vue
similarity index 90%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog-title.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog-title.vue
index e7ffc077..2113f272 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog-title.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog-title.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AlertDialogTitle } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { AlertDialogTitleProps } from './types';
+import type { AlertDialogTitleProps } from '../types';
 
 defineOptions({
   name: 'SAlertDialogTitle'
diff --git a/packages/soy-ui/src/components/alert-dialog/alert-dialog.vue b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog.vue
similarity index 99%
rename from packages/soy-ui/src/components/alert-dialog/alert-dialog.vue
rename to packages/soy-ui/src/components/alert-dialog/source/alert-dialog.vue
index ee7da001..5506710d 100644
--- a/packages/soy-ui/src/components/alert-dialog/alert-dialog.vue
+++ b/packages/soy-ui/src/components/alert-dialog/source/alert-dialog.vue
@@ -12,13 +12,13 @@ import {
 } from '@soybean-ui/primitives';
 import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-vue-next';
 import type { LucideProps } from 'lucide-vue-next';
+import type { AlertDialogEmits, AlertDialogProps, AlertType } from '../types';
 import SAlertDialogOverlay from './alert-dialog-overlay.vue';
 import SAlertDialogContent from './alert-dialog-content.vue';
 import SAlertDialogHeader from './alert-dialog-header.vue';
 import SAlertDialogTitle from './alert-dialog-title.vue';
 import SAlertDialogDescription from './alert-dialog-description.vue';
 import SAlertDialogFooter from './alert-dialog-footer.vue';
-import type { AlertDialogEmits, AlertDialogProps, AlertType } from './types';
 
 defineOptions({
   name: 'SAlertDialog'
diff --git a/examples/src/ui/alert.vue b/packages/soy-ui/src/components/alert/demos/alert.vue
similarity index 100%
rename from examples/src/ui/alert.vue
rename to packages/soy-ui/src/components/alert/demos/alert.vue
diff --git a/packages/soy-ui/src/components/alert/demos/index.ts b/packages/soy-ui/src/components/alert/demos/index.ts
new file mode 100644
index 00000000..eac63ec3
--- /dev/null
+++ b/packages/soy-ui/src/components/alert/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoAlert from './alert.vue';
+
+export { DemoAlert };
diff --git a/packages/soy-ui/src/components/alert/index.ts b/packages/soy-ui/src/components/alert/index.ts
index 7bc72ffa..e2d3ef56 100644
--- a/packages/soy-ui/src/components/alert/index.ts
+++ b/packages/soy-ui/src/components/alert/index.ts
@@ -1,8 +1,8 @@
-import SAlert from './alert.vue';
-import SAlertDescription from './alert-description.vue';
-import SAlertRoot from './alert-root.vue';
-import SAlertTitle from './alert-title.vue';
-import SAlertWrapper from './alert-wrapper.vue';
+import SAlert from './source/alert.vue';
+import SAlertDescription from './source/alert-description.vue';
+import SAlertRoot from './source/alert-root.vue';
+import SAlertTitle from './source/alert-title.vue';
+import SAlertWrapper from './source/alert-wrapper.vue';
 
 export { SAlert, SAlertDescription, SAlertRoot, SAlertTitle, SAlertWrapper };
 
diff --git a/packages/soy-ui/src/components/alert/alert-description.vue b/packages/soy-ui/src/components/alert/source/alert-description.vue
similarity index 88%
rename from packages/soy-ui/src/components/alert/alert-description.vue
rename to packages/soy-ui/src/components/alert/source/alert-description.vue
index 8d5d9a88..9f308e63 100644
--- a/packages/soy-ui/src/components/alert/alert-description.vue
+++ b/packages/soy-ui/src/components/alert/source/alert-description.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { alertVariants, cn } from '@soybean-ui/variants';
-import type { AlertDescriptionProps } from './types';
+import type { AlertDescriptionProps } from '../types';
 
 defineOptions({
   name: 'SAlertDescription'
diff --git a/packages/soy-ui/src/components/alert/alert-root.vue b/packages/soy-ui/src/components/alert/source/alert-root.vue
similarity index 90%
rename from packages/soy-ui/src/components/alert/alert-root.vue
rename to packages/soy-ui/src/components/alert/source/alert-root.vue
index d20609b9..675fd01f 100644
--- a/packages/soy-ui/src/components/alert/alert-root.vue
+++ b/packages/soy-ui/src/components/alert/source/alert-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { alertVariants, cn } from '@soybean-ui/variants';
-import type { AlertRootProps } from './types';
+import type { AlertRootProps } from '../types';
 
 defineOptions({
   name: 'SAlertRoot'
diff --git a/packages/soy-ui/src/components/alert/alert-title.vue b/packages/soy-ui/src/components/alert/source/alert-title.vue
similarity index 89%
rename from packages/soy-ui/src/components/alert/alert-title.vue
rename to packages/soy-ui/src/components/alert/source/alert-title.vue
index 8fe7b6e6..e2ca3d5e 100644
--- a/packages/soy-ui/src/components/alert/alert-title.vue
+++ b/packages/soy-ui/src/components/alert/source/alert-title.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { alertVariants, cn } from '@soybean-ui/variants';
-import type { AlertTitleProps } from './types';
+import type { AlertTitleProps } from '../types';
 
 defineOptions({
   name: 'SAlertTitle'
diff --git a/packages/soy-ui/src/components/alert/alert-wrapper.vue b/packages/soy-ui/src/components/alert/source/alert-wrapper.vue
similarity index 89%
rename from packages/soy-ui/src/components/alert/alert-wrapper.vue
rename to packages/soy-ui/src/components/alert/source/alert-wrapper.vue
index 64e7e45d..45e92085 100644
--- a/packages/soy-ui/src/components/alert/alert-wrapper.vue
+++ b/packages/soy-ui/src/components/alert/source/alert-wrapper.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { alertVariants, cn } from '@soybean-ui/variants';
-import type { AlertWrapperProps } from './types';
+import type { AlertWrapperProps } from '../types';
 
 defineOptions({
   name: 'SAlertWrapper'
diff --git a/packages/soy-ui/src/components/alert/alert.vue b/packages/soy-ui/src/components/alert/source/alert.vue
similarity index 94%
rename from packages/soy-ui/src/components/alert/alert.vue
rename to packages/soy-ui/src/components/alert/source/alert.vue
index d61023a5..62e9ecf2 100644
--- a/packages/soy-ui/src/components/alert/alert.vue
+++ b/packages/soy-ui/src/components/alert/source/alert.vue
@@ -3,12 +3,12 @@ import { computed } from 'vue';
 import { Slot } from '@soybean-ui/primitives';
 import { alertVariants, cn } from '@soybean-ui/variants';
 import { X } from 'lucide-vue-next';
-import SButtonIcon from '../button/button-icon.vue';
+import SButtonIcon from '../../button/source/button-icon.vue';
+import type { AlertProps } from '../types';
 import SAlertRoot from './alert-root.vue';
 import SAlertWrapper from './alert-wrapper.vue';
 import SAlertTitle from './alert-title.vue';
 import SAlertDescription from './alert-description.vue';
-import type { AlertProps } from './types';
 
 defineOptions({
   name: 'SAlert'
diff --git a/examples/src/ui/aspect-ratio.vue b/packages/soy-ui/src/components/aspect-ratio/demos/aspect-ratio.vue
similarity index 100%
rename from examples/src/ui/aspect-ratio.vue
rename to packages/soy-ui/src/components/aspect-ratio/demos/aspect-ratio.vue
diff --git a/packages/soy-ui/src/components/aspect-ratio/demos/index.ts b/packages/soy-ui/src/components/aspect-ratio/demos/index.ts
new file mode 100644
index 00000000..7e0f8e86
--- /dev/null
+++ b/packages/soy-ui/src/components/aspect-ratio/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoAspectRatio from './aspect-ratio.vue';
+
+export { DemoAspectRatio };
diff --git a/packages/soy-ui/src/components/aspect-ratio/index.ts b/packages/soy-ui/src/components/aspect-ratio/index.ts
index c62feb0e..e5eb3a3e 100644
--- a/packages/soy-ui/src/components/aspect-ratio/index.ts
+++ b/packages/soy-ui/src/components/aspect-ratio/index.ts
@@ -1,4 +1,4 @@
-import SAspectRatio from './aspect-ratio.vue';
+import SAspectRatio from './source/aspect-ratio.vue';
 
 export { SAspectRatio };
 
diff --git a/packages/soy-ui/src/components/aspect-ratio/aspect-ratio.vue b/packages/soy-ui/src/components/aspect-ratio/source/aspect-ratio.vue
similarity index 87%
rename from packages/soy-ui/src/components/aspect-ratio/aspect-ratio.vue
rename to packages/soy-ui/src/components/aspect-ratio/source/aspect-ratio.vue
index 711ad8dc..9dd32b05 100644
--- a/packages/soy-ui/src/components/aspect-ratio/aspect-ratio.vue
+++ b/packages/soy-ui/src/components/aspect-ratio/source/aspect-ratio.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { AspectRatio, useForwardProps } from '@soybean-ui/primitives';
-import type { AspectRatioProps } from './types';
+import type { AspectRatioProps } from '../types';
 
 defineOptions({
   name: 'SAspectRatio'
diff --git a/examples/src/ui/avatar.vue b/packages/soy-ui/src/components/avatar/demos/avatar.vue
similarity index 100%
rename from examples/src/ui/avatar.vue
rename to packages/soy-ui/src/components/avatar/demos/avatar.vue
diff --git a/packages/soy-ui/src/components/avatar/demos/index.ts b/packages/soy-ui/src/components/avatar/demos/index.ts
new file mode 100644
index 00000000..4743b864
--- /dev/null
+++ b/packages/soy-ui/src/components/avatar/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoAvatar from './avatar.vue';
+
+export { DemoAvatar };
diff --git a/packages/soy-ui/src/components/avatar/index.ts b/packages/soy-ui/src/components/avatar/index.ts
index c57a74c1..c998848f 100644
--- a/packages/soy-ui/src/components/avatar/index.ts
+++ b/packages/soy-ui/src/components/avatar/index.ts
@@ -1,7 +1,7 @@
-import SAvatar from './avatar.vue';
-import SAvatarFallback from './avatar-fallback.vue';
-import SAvatarImage from './avatar-image.vue';
-import SAvatarRoot from './avatar-root.vue';
+import SAvatar from './source/avatar.vue';
+import SAvatarFallback from './source/avatar-fallback.vue';
+import SAvatarImage from './source/avatar-image.vue';
+import SAvatarRoot from './source/avatar-root.vue';
 
 export { SAvatar, SAvatarFallback, SAvatarImage, SAvatarRoot };
 
diff --git a/packages/soy-ui/src/components/avatar/avatar-fallback.vue b/packages/soy-ui/src/components/avatar/source/avatar-fallback.vue
similarity index 90%
rename from packages/soy-ui/src/components/avatar/avatar-fallback.vue
rename to packages/soy-ui/src/components/avatar/source/avatar-fallback.vue
index 9e120dd8..75be5d5a 100644
--- a/packages/soy-ui/src/components/avatar/avatar-fallback.vue
+++ b/packages/soy-ui/src/components/avatar/source/avatar-fallback.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AvatarFallback } from '@soybean-ui/primitives';
 import { avatarVariants, cn } from '@soybean-ui/variants';
-import type { AvatarFallbackProps } from './types';
+import type { AvatarFallbackProps } from '../types';
 
 defineOptions({
   name: 'SAvatarFallback'
diff --git a/packages/soy-ui/src/components/avatar/avatar-image.vue b/packages/soy-ui/src/components/avatar/source/avatar-image.vue
similarity index 89%
rename from packages/soy-ui/src/components/avatar/avatar-image.vue
rename to packages/soy-ui/src/components/avatar/source/avatar-image.vue
index 46a80744..aba52325 100644
--- a/packages/soy-ui/src/components/avatar/avatar-image.vue
+++ b/packages/soy-ui/src/components/avatar/source/avatar-image.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AvatarImage } from '@soybean-ui/primitives';
 import { avatarVariants, cn } from '@soybean-ui/variants';
-import type { AvatarImageEmits, AvatarImageProps } from './types';
+import type { AvatarImageEmits, AvatarImageProps } from '../types';
 
 defineOptions({
   name: 'SAvatarImage'
diff --git a/packages/soy-ui/src/components/avatar/avatar-root.vue b/packages/soy-ui/src/components/avatar/source/avatar-root.vue
similarity index 90%
rename from packages/soy-ui/src/components/avatar/avatar-root.vue
rename to packages/soy-ui/src/components/avatar/source/avatar-root.vue
index 9d9c0f01..84a8dea8 100644
--- a/packages/soy-ui/src/components/avatar/avatar-root.vue
+++ b/packages/soy-ui/src/components/avatar/source/avatar-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { AvatarRoot } from '@soybean-ui/primitives';
 import { avatarVariants, cn } from '@soybean-ui/variants';
-import type { AvatarRootProps } from './types';
+import type { AvatarRootProps } from '../types';
 
 defineOptions({
   name: 'SAvatarRoot'
diff --git a/packages/soy-ui/src/components/avatar/avatar.vue b/packages/soy-ui/src/components/avatar/source/avatar.vue
similarity index 93%
rename from packages/soy-ui/src/components/avatar/avatar.vue
rename to packages/soy-ui/src/components/avatar/source/avatar.vue
index ff53816a..d8a032a0 100644
--- a/packages/soy-ui/src/components/avatar/avatar.vue
+++ b/packages/soy-ui/src/components/avatar/source/avatar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useCombinedPropsEmits } from '@soybean-ui/primitives';
+import type { AvatarEmits, AvatarProps } from '../types';
 import SAvatarRoot from './avatar-root.vue';
 import SAvatarImage from './avatar-image.vue';
 import SAvatarFallback from './avatar-fallback.vue';
-import type { AvatarEmits, AvatarProps } from './types';
 
 defineOptions({
   name: 'SAvatar'
diff --git a/examples/src/ui/badge.vue b/packages/soy-ui/src/components/badge/demos/badge.vue
similarity index 100%
rename from examples/src/ui/badge.vue
rename to packages/soy-ui/src/components/badge/demos/badge.vue
diff --git a/packages/soy-ui/src/components/badge/demos/index.ts b/packages/soy-ui/src/components/badge/demos/index.ts
new file mode 100644
index 00000000..3ba57fa5
--- /dev/null
+++ b/packages/soy-ui/src/components/badge/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoBadge from './badge.vue';
+
+export { DemoBadge };
diff --git a/packages/soy-ui/src/components/badge/index.ts b/packages/soy-ui/src/components/badge/index.ts
index b663a4b3..d6e6b2b6 100644
--- a/packages/soy-ui/src/components/badge/index.ts
+++ b/packages/soy-ui/src/components/badge/index.ts
@@ -1,4 +1,4 @@
-import SBadge from './badge.vue';
+import SBadge from './source/badge.vue';
 
 export { SBadge };
 
diff --git a/packages/soy-ui/src/components/badge/badge.vue b/packages/soy-ui/src/components/badge/source/badge.vue
similarity index 90%
rename from packages/soy-ui/src/components/badge/badge.vue
rename to packages/soy-ui/src/components/badge/source/badge.vue
index 657f8503..08742449 100644
--- a/packages/soy-ui/src/components/badge/badge.vue
+++ b/packages/soy-ui/src/components/badge/source/badge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { badgeVariants, cn } from '@soybean-ui/variants';
-import type { BadgeProps } from './types';
+import type { BadgeProps } from '../types';
 
 defineOptions({
   name: 'SBadge'
diff --git a/examples/src/ui/breadcrumb.vue b/packages/soy-ui/src/components/breadcrumb/demos/breadcrumb.vue
similarity index 100%
rename from examples/src/ui/breadcrumb.vue
rename to packages/soy-ui/src/components/breadcrumb/demos/breadcrumb.vue
diff --git a/packages/soy-ui/src/components/breadcrumb/demos/index.ts b/packages/soy-ui/src/components/breadcrumb/demos/index.ts
new file mode 100644
index 00000000..7ac50ee3
--- /dev/null
+++ b/packages/soy-ui/src/components/breadcrumb/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoBreadcrumb from './breadcrumb.vue';
+
+export { DemoBreadcrumb };
diff --git a/packages/soy-ui/src/components/breadcrumb/index.ts b/packages/soy-ui/src/components/breadcrumb/index.ts
index 9af580ae..5186e3b0 100644
--- a/packages/soy-ui/src/components/breadcrumb/index.ts
+++ b/packages/soy-ui/src/components/breadcrumb/index.ts
@@ -1,11 +1,11 @@
-import SBreadcrumb from './breadcrumb.vue';
-import SBreadcrumbEllipsis from './breadcrumb-ellipsis.vue';
-import SBreadcrumbItem from './breadcrumb-item.vue';
-import SBreadcrumbLink from './breadcrumb-link.vue';
-import SBreadcrumbList from './breadcrumb-list.vue';
-import SBreadcrumbPage from './breadcrumb-page.vue';
-import SBreadcrumbRoot from './breadcrumb-root.vue';
-import SBreadcrumbSeparator from './breadcrumb-separator.vue';
+import SBreadcrumb from './source/breadcrumb.vue';
+import SBreadcrumbEllipsis from './source/breadcrumb-ellipsis.vue';
+import SBreadcrumbItem from './source/breadcrumb-item.vue';
+import SBreadcrumbLink from './source/breadcrumb-link.vue';
+import SBreadcrumbList from './source/breadcrumb-list.vue';
+import SBreadcrumbPage from './source/breadcrumb-page.vue';
+import SBreadcrumbRoot from './source/breadcrumb-root.vue';
+import SBreadcrumbSeparator from './source/breadcrumb-separator.vue';
 
 export {
   SBreadcrumb,
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb-ellipsis.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-ellipsis.vue
similarity index 90%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb-ellipsis.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb-ellipsis.vue
index df60f10e..cb52f2e8 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb-ellipsis.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-ellipsis.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { breadcrumbVariants, cn } from '@soybean-ui/variants';
 import { Ellipsis } from 'lucide-vue-next';
-import type { BreadcrumbEllipsisProps } from './types';
+import type { BreadcrumbEllipsisProps } from '../types';
 
 defineOptions({
   name: 'SBreadcrumbEllipsis'
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb-item.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-item.vue
similarity index 89%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb-item.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb-item.vue
index 97c8e8a1..29a55cb5 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb-item.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-item.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { breadcrumbVariants, cn } from '@soybean-ui/variants';
-import type { BreadcrumbItemProps } from './types';
+import type { BreadcrumbItemProps } from '../types';
 
 defineOptions({
   name: 'SBreadcrumbItem'
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb-link.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-link.vue
similarity index 91%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb-link.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb-link.vue
index 88f4c959..6187369c 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb-link.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-link.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useForwardProps } from '@soybean-ui/primitives';
 import { breadcrumbVariants, cn } from '@soybean-ui/variants';
-import type { BreadcrumbLinkProps } from './types';
+import type { BreadcrumbLinkProps } from '../types';
 
 defineOptions({
   name: 'SBreadcrumbLink'
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb-list.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-list.vue
similarity index 89%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb-list.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb-list.vue
index aa9e8420..7be8dca1 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb-list.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { breadcrumbVariants, cn } from '@soybean-ui/variants';
-import type { BreadcrumbListProps } from './types';
+import type { BreadcrumbListProps } from '../types';
 
 defineOptions({
   name: 'SBreadcrumbList'
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb-page.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-page.vue
similarity index 89%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb-page.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb-page.vue
index bb146bd3..f8c5c990 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb-page.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-page.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { breadcrumbVariants, cn } from '@soybean-ui/variants';
-import type { BreadcrumbPageProps } from './types';
+import type { BreadcrumbPageProps } from '../types';
 
 defineOptions({
   name: 'SBreadcrumbPage'
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb-root.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-root.vue
similarity index 89%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb-root.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb-root.vue
index 5965e5bc..6802a8cd 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb-root.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { breadcrumbVariants, cn } from '@soybean-ui/variants';
-import type { BreadcrumbRootProps } from './types';
+import type { BreadcrumbRootProps } from '../types';
 
 defineOptions({
   name: 'SBreadcrumbRoot'
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb-separator.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-separator.vue
similarity index 90%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb-separator.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb-separator.vue
index b96c23b6..b2ef56f9 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb-separator.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb-separator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { breadcrumbVariants, cn } from '@soybean-ui/variants';
 import { ChevronRight } from 'lucide-vue-next';
-import type { BreadcrumbSeparatorProps } from './types';
+import type { BreadcrumbSeparatorProps } from '../types';
 
 defineOptions({
   name: 'SBreadcrumbSeparator'
diff --git a/packages/soy-ui/src/components/breadcrumb/breadcrumb.vue b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb.vue
similarity index 99%
rename from packages/soy-ui/src/components/breadcrumb/breadcrumb.vue
rename to packages/soy-ui/src/components/breadcrumb/source/breadcrumb.vue
index 9991e066..fa2374b6 100644
--- a/packages/soy-ui/src/components/breadcrumb/breadcrumb.vue
+++ b/packages/soy-ui/src/components/breadcrumb/source/breadcrumb.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T extends BreadcrumbItem">
 import { computed } from 'vue';
+import type { BreadcrumbEmits, BreadcrumbItem, BreadcrumbProps } from '../types';
 import SBreadcrumbRoot from './breadcrumb-root.vue';
 import SBreadcrumbList from './breadcrumb-list.vue';
 import SBreadcrumbItem from './breadcrumb-item.vue';
@@ -7,7 +8,6 @@ import SBreadcrumbPage from './breadcrumb-page.vue';
 import SBreadcrumbLink from './breadcrumb-link.vue';
 import SBreadcrumbEllipsis from './breadcrumb-ellipsis.vue';
 import SBreadcrumbSeparator from './breadcrumb-separator.vue';
-import type { BreadcrumbEmits, BreadcrumbItem, BreadcrumbProps } from './types';
 
 defineOptions({
   name: 'SBreadcrumb'
diff --git a/examples/src/ui/button.vue b/packages/soy-ui/src/components/button/demos/button.vue
similarity index 100%
rename from examples/src/ui/button.vue
rename to packages/soy-ui/src/components/button/demos/button.vue
diff --git a/examples/src/ui/button/color.vue b/packages/soy-ui/src/components/button/demos/color.vue
similarity index 100%
rename from examples/src/ui/button/color.vue
rename to packages/soy-ui/src/components/button/demos/color.vue
diff --git a/packages/soy-ui/src/components/button/demos/index.ts b/packages/soy-ui/src/components/button/demos/index.ts
new file mode 100644
index 00000000..d264ebd9
--- /dev/null
+++ b/packages/soy-ui/src/components/button/demos/index.ts
@@ -0,0 +1,4 @@
+import DemoButton from './button.vue';
+import DemoButtonColor from './color.vue';
+
+export { DemoButton, DemoButtonColor };
diff --git a/packages/soy-ui/src/components/button/index.ts b/packages/soy-ui/src/components/button/index.ts
index c28f0522..ea257158 100644
--- a/packages/soy-ui/src/components/button/index.ts
+++ b/packages/soy-ui/src/components/button/index.ts
@@ -1,8 +1,8 @@
-import SButton from './button.vue';
-import SButtonGroup from './button-group.vue';
-import SButtonIcon from './button-icon.vue';
-import SButtonLink from './button-link.vue';
-import SLoadingButton from './loading-button.vue';
+import SButton from './source/button.vue';
+import SButtonGroup from './source/button-group.vue';
+import SButtonIcon from './source/button-icon.vue';
+import SButtonLink from './source/button-link.vue';
+import SLoadingButton from './source/loading-button.vue';
 
 export { SButton, SButtonGroup, SButtonIcon, SButtonLink, SLoadingButton };
 
diff --git a/packages/soy-ui/src/components/button/button-group.vue b/packages/soy-ui/src/components/button/source/button-group.vue
similarity index 90%
rename from packages/soy-ui/src/components/button/button-group.vue
rename to packages/soy-ui/src/components/button/source/button-group.vue
index 9fe1e485..33d55790 100644
--- a/packages/soy-ui/src/components/button/button-group.vue
+++ b/packages/soy-ui/src/components/button/source/button-group.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { Primitive } from '@soybean-ui/primitives';
 import { buttonGroupVariants, cn } from '@soybean-ui/variants';
-import type { ButtonGroupProps } from './types';
+import type { ButtonGroupProps } from '../types';
 
 defineOptions({
   name: 'SButtonGroup'
diff --git a/packages/soy-ui/src/components/button/button-icon.vue b/packages/soy-ui/src/components/button/source/button-icon.vue
similarity index 91%
rename from packages/soy-ui/src/components/button/button-icon.vue
rename to packages/soy-ui/src/components/button/source/button-icon.vue
index 43922264..fad5af85 100644
--- a/packages/soy-ui/src/components/button/button-icon.vue
+++ b/packages/soy-ui/src/components/button/source/button-icon.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useForwardProps } from '@soybean-ui/primitives';
+import type { ButtonProps } from '../types';
 import SButton from './button.vue';
-import type { ButtonProps } from './types';
 
 defineOptions({
   name: 'SButtonIcon'
diff --git a/packages/soy-ui/src/components/button/button-link.vue b/packages/soy-ui/src/components/button/source/button-link.vue
similarity index 84%
rename from packages/soy-ui/src/components/button/button-link.vue
rename to packages/soy-ui/src/components/button/source/button-link.vue
index a486cc9c..754e14e2 100644
--- a/packages/soy-ui/src/components/button/button-link.vue
+++ b/packages/soy-ui/src/components/button/source/button-link.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useForwardProps } from '@soybean-ui/primitives';
-import { SLink } from '../link';
+import { SLink } from '../../link';
+import type { ButtonLinkProps } from '../types';
 import SButton from './button.vue';
-import type { ButtonLinkProps } from './types';
 
 defineOptions({
   name: 'SButtonLink'
diff --git a/packages/soy-ui/src/components/button/button.vue b/packages/soy-ui/src/components/button/source/button.vue
similarity index 92%
rename from packages/soy-ui/src/components/button/button.vue
rename to packages/soy-ui/src/components/button/source/button.vue
index da4a702c..8804aa60 100644
--- a/packages/soy-ui/src/components/button/button.vue
+++ b/packages/soy-ui/src/components/button/source/button.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { Primitive, useForwardProps } from '@soybean-ui/primitives';
 import { buttonVariants, cn } from '@soybean-ui/variants';
-import type { ButtonPropsWithPrimitive } from './types';
+import type { ButtonPropsWithPrimitive } from '../types';
 
 defineOptions({
   name: 'SButton'
diff --git a/packages/soy-ui/src/components/button/loading-button.vue b/packages/soy-ui/src/components/button/source/loading-button.vue
similarity index 94%
rename from packages/soy-ui/src/components/button/loading-button.vue
rename to packages/soy-ui/src/components/button/source/loading-button.vue
index c33a1978..0b05d1a9 100644
--- a/packages/soy-ui/src/components/button/loading-button.vue
+++ b/packages/soy-ui/src/components/button/source/loading-button.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useForwardProps } from '@soybean-ui/primitives';
 import { LoaderCircle } from 'lucide-vue-next';
-import type { LoadingButtonProps } from './types';
+import type { LoadingButtonProps } from '../types';
 import SButton from './button.vue';
 
 defineOptions({
diff --git a/examples/src/ui/card.vue b/packages/soy-ui/src/components/card/demos/card.vue
similarity index 100%
rename from examples/src/ui/card.vue
rename to packages/soy-ui/src/components/card/demos/card.vue
diff --git a/packages/soy-ui/src/components/card/demos/index.ts b/packages/soy-ui/src/components/card/demos/index.ts
new file mode 100644
index 00000000..f07a7835
--- /dev/null
+++ b/packages/soy-ui/src/components/card/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoCard from './card.vue';
+
+export { DemoCard };
diff --git a/packages/soy-ui/src/components/card/index.ts b/packages/soy-ui/src/components/card/index.ts
index 7ab5b886..4be56dad 100644
--- a/packages/soy-ui/src/components/card/index.ts
+++ b/packages/soy-ui/src/components/card/index.ts
@@ -1,10 +1,10 @@
-import SCard from './card.vue';
-import SCardContent from './card-content.vue';
-import SCardFooter from './card-footer.vue';
-import SCardHeader from './card-header.vue';
-import SCardRoot from './card-root.vue';
-import SCardTitleRoot from './card-title-root.vue';
-import SCardTitle from './card-title.vue';
+import SCard from './source/card.vue';
+import SCardContent from './source/card-content.vue';
+import SCardFooter from './source/card-footer.vue';
+import SCardHeader from './source/card-header.vue';
+import SCardRoot from './source/card-root.vue';
+import SCardTitleRoot from './source/card-title-root.vue';
+import SCardTitle from './source/card-title.vue';
 
 export { SCard, SCardContent, SCardFooter, SCardHeader, SCardRoot, SCardTitle, SCardTitleRoot };
 
diff --git a/packages/soy-ui/src/components/card/card-content.vue b/packages/soy-ui/src/components/card/source/card-content.vue
similarity index 89%
rename from packages/soy-ui/src/components/card/card-content.vue
rename to packages/soy-ui/src/components/card/source/card-content.vue
index b9869995..ab00b4bf 100644
--- a/packages/soy-ui/src/components/card/card-content.vue
+++ b/packages/soy-ui/src/components/card/source/card-content.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cardVariants, cn } from '@soybean-ui/variants';
-import type { CardContentProps } from './types';
+import type { CardContentProps } from '../types';
 
 defineOptions({
   name: 'SCardContent'
diff --git a/packages/soy-ui/src/components/card/card-footer.vue b/packages/soy-ui/src/components/card/source/card-footer.vue
similarity index 89%
rename from packages/soy-ui/src/components/card/card-footer.vue
rename to packages/soy-ui/src/components/card/source/card-footer.vue
index 0e221704..9aa89990 100644
--- a/packages/soy-ui/src/components/card/card-footer.vue
+++ b/packages/soy-ui/src/components/card/source/card-footer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cardVariants, cn } from '@soybean-ui/variants';
-import type { CardFooterProps } from './types';
+import type { CardFooterProps } from '../types';
 
 defineOptions({
   name: 'SCardFooter'
diff --git a/packages/soy-ui/src/components/card/card-header.vue b/packages/soy-ui/src/components/card/source/card-header.vue
similarity index 89%
rename from packages/soy-ui/src/components/card/card-header.vue
rename to packages/soy-ui/src/components/card/source/card-header.vue
index 6d42f4e0..e500dccc 100644
--- a/packages/soy-ui/src/components/card/card-header.vue
+++ b/packages/soy-ui/src/components/card/source/card-header.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cardVariants, cn } from '@soybean-ui/variants';
-import type { CardHeaderProps } from './types';
+import type { CardHeaderProps } from '../types';
 
 defineOptions({
   name: 'SCardHeader'
diff --git a/packages/soy-ui/src/components/card/card-root.vue b/packages/soy-ui/src/components/card/source/card-root.vue
similarity index 89%
rename from packages/soy-ui/src/components/card/card-root.vue
rename to packages/soy-ui/src/components/card/source/card-root.vue
index 8561eabb..19593fe4 100644
--- a/packages/soy-ui/src/components/card/card-root.vue
+++ b/packages/soy-ui/src/components/card/source/card-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cardVariants, cn } from '@soybean-ui/variants';
-import type { CardRootProps } from './types';
+import type { CardRootProps } from '../types';
 
 defineOptions({
   name: 'SCardRoot'
diff --git a/packages/soy-ui/src/components/card/card-title-root.vue b/packages/soy-ui/src/components/card/source/card-title-root.vue
similarity index 90%
rename from packages/soy-ui/src/components/card/card-title-root.vue
rename to packages/soy-ui/src/components/card/source/card-title-root.vue
index 2386f20d..0d2e1fb4 100644
--- a/packages/soy-ui/src/components/card/card-title-root.vue
+++ b/packages/soy-ui/src/components/card/source/card-title-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cardVariants, cn } from '@soybean-ui/variants';
-import type { CardTitleRootProps } from './types';
+import type { CardTitleRootProps } from '../types';
 
 defineOptions({
   name: 'SCardTitleRoot'
diff --git a/packages/soy-ui/src/components/card/card-title.vue b/packages/soy-ui/src/components/card/source/card-title.vue
similarity index 89%
rename from packages/soy-ui/src/components/card/card-title.vue
rename to packages/soy-ui/src/components/card/source/card-title.vue
index 43a64300..1d579053 100644
--- a/packages/soy-ui/src/components/card/card-title.vue
+++ b/packages/soy-ui/src/components/card/source/card-title.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cardVariants, cn } from '@soybean-ui/variants';
-import type { CardTitleProps } from './types';
+import type { CardTitleProps } from '../types';
 
 defineOptions({
   name: 'SCardTitle'
diff --git a/packages/soy-ui/src/components/card/card.vue b/packages/soy-ui/src/components/card/source/card.vue
similarity index 97%
rename from packages/soy-ui/src/components/card/card.vue
rename to packages/soy-ui/src/components/card/source/card.vue
index 9582c931..c16a884c 100644
--- a/packages/soy-ui/src/components/card/card.vue
+++ b/packages/soy-ui/src/components/card/source/card.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import type { CardProps } from '../types';
 import SCardRoot from './card-root.vue';
 import SCardHeader from './card-header.vue';
 import SCardTitleRoot from './card-title-root.vue';
 import SCardTitle from './card-title.vue';
 import SCardContent from './card-content.vue';
 import SCardFooter from './card-footer.vue';
-import type { CardProps } from './types';
 
 defineOptions({
   name: 'SCard'
diff --git a/examples/src/ui/carousel.vue b/packages/soy-ui/src/components/carousel/demos/carousel.vue
similarity index 100%
rename from examples/src/ui/carousel.vue
rename to packages/soy-ui/src/components/carousel/demos/carousel.vue
diff --git a/packages/soy-ui/src/components/carousel/demos/index.ts b/packages/soy-ui/src/components/carousel/demos/index.ts
new file mode 100644
index 00000000..f9af09f1
--- /dev/null
+++ b/packages/soy-ui/src/components/carousel/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoCarousel from './carousel.vue';
+
+export { DemoCarousel };
diff --git a/packages/soy-ui/src/components/carousel/index.ts b/packages/soy-ui/src/components/carousel/index.ts
index efc61ca7..5b78da4f 100644
--- a/packages/soy-ui/src/components/carousel/index.ts
+++ b/packages/soy-ui/src/components/carousel/index.ts
@@ -1,9 +1,9 @@
-import SCarousel from './carousel.vue';
-import SCarouselContent from './carousel-content.vue';
-import SCarouselItem from './carousel-item.vue';
-import SCarouselNext from './carousel-next.vue';
-import SCarouselPrevious from './carousel-previous.vue';
-import SCarouselRoot from './carousel-root.vue';
+import SCarousel from './source/carousel.vue';
+import SCarouselContent from './source/carousel-content.vue';
+import SCarouselItem from './source/carousel-item.vue';
+import SCarouselNext from './source/carousel-next.vue';
+import SCarouselPrevious from './source/carousel-previous.vue';
+import SCarouselRoot from './source/carousel-root.vue';
 
 export { SCarousel, SCarouselContent, SCarouselItem, SCarouselNext, SCarouselPrevious, SCarouselRoot };
 
diff --git a/packages/soy-ui/src/components/carousel/carousel-content.vue b/packages/soy-ui/src/components/carousel/source/carousel-content.vue
similarity index 88%
rename from packages/soy-ui/src/components/carousel/carousel-content.vue
rename to packages/soy-ui/src/components/carousel/source/carousel-content.vue
index fdb6b591..ad69cdd8 100644
--- a/packages/soy-ui/src/components/carousel/carousel-content.vue
+++ b/packages/soy-ui/src/components/carousel/source/carousel-content.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { carouselVariants, cn } from '@soybean-ui/variants';
-import { useCarousel } from './context';
-import type { CarouselContentProps } from './types';
+import { useCarousel } from '../context';
+import type { CarouselContentProps } from '../types';
 
 defineOptions({
   name: 'SCarouselContent',
diff --git a/packages/soy-ui/src/components/carousel/carousel-item.vue b/packages/soy-ui/src/components/carousel/source/carousel-item.vue
similarity index 84%
rename from packages/soy-ui/src/components/carousel/carousel-item.vue
rename to packages/soy-ui/src/components/carousel/source/carousel-item.vue
index 3171724a..a0a0ec59 100644
--- a/packages/soy-ui/src/components/carousel/carousel-item.vue
+++ b/packages/soy-ui/src/components/carousel/source/carousel-item.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { carouselVariants, cn } from '@soybean-ui/variants';
-import { useCarousel } from './context';
-import type { CarouselItemProps } from './types';
+import { useCarousel } from '../context';
+import type { CarouselItemProps } from '../types';
 
 defineOptions({
   name: 'SCarouselItem'
diff --git a/packages/soy-ui/src/components/carousel/carousel-next.vue b/packages/soy-ui/src/components/carousel/source/carousel-next.vue
similarity index 85%
rename from packages/soy-ui/src/components/carousel/carousel-next.vue
rename to packages/soy-ui/src/components/carousel/source/carousel-next.vue
index bddd163e..8cd79753 100644
--- a/packages/soy-ui/src/components/carousel/carousel-next.vue
+++ b/packages/soy-ui/src/components/carousel/source/carousel-next.vue
@@ -3,9 +3,9 @@ import { computed } from 'vue';
 import { useOmitForwardProps } from '@soybean-ui/primitives';
 import { carouselVariants, cn } from '@soybean-ui/variants';
 import { ChevronRight } from 'lucide-vue-next';
-import SButton from '../button/button.vue';
-import { useCarousel } from './context';
-import type { CarouselNextProps } from './types';
+import SButton from '../../button/source/button.vue';
+import { useCarousel } from '../context';
+import type { CarouselNextProps } from '../types';
 
 defineOptions({
   name: 'SCarouselNext'
diff --git a/packages/soy-ui/src/components/carousel/carousel-previous.vue b/packages/soy-ui/src/components/carousel/source/carousel-previous.vue
similarity index 85%
rename from packages/soy-ui/src/components/carousel/carousel-previous.vue
rename to packages/soy-ui/src/components/carousel/source/carousel-previous.vue
index 4f460355..f781c41e 100644
--- a/packages/soy-ui/src/components/carousel/carousel-previous.vue
+++ b/packages/soy-ui/src/components/carousel/source/carousel-previous.vue
@@ -3,9 +3,9 @@ import { computed } from 'vue';
 import { useOmitForwardProps } from '@soybean-ui/primitives';
 import { carouselVariants, cn } from '@soybean-ui/variants';
 import { ChevronLeft } from 'lucide-vue-next';
-import SButton from '../button/button.vue';
-import { useCarousel } from './context';
-import type { CarouselPreviousProps } from './types';
+import SButton from '../../button/source/button.vue';
+import { useCarousel } from '../context';
+import type { CarouselPreviousProps } from '../types';
 
 defineOptions({
   name: 'SCarouselPrevious'
diff --git a/packages/soy-ui/src/components/carousel/carousel-root.vue b/packages/soy-ui/src/components/carousel/source/carousel-root.vue
similarity index 94%
rename from packages/soy-ui/src/components/carousel/carousel-root.vue
rename to packages/soy-ui/src/components/carousel/source/carousel-root.vue
index 1b58e5e4..5fd2e188 100644
--- a/packages/soy-ui/src/components/carousel/carousel-root.vue
+++ b/packages/soy-ui/src/components/carousel/source/carousel-root.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import type { Ref, UnwrapRef } from 'vue';
 import { carouselVariants, cn } from '@soybean-ui/variants';
-import { provideCarouselContext } from './context';
-import type { CarouselContext, CarouselRootEmits, CarouselRootProps, UnwrapRefCarouselApi } from './types';
+import { provideCarouselContext } from '../context';
+import type { CarouselContext, CarouselRootEmits, CarouselRootProps, UnwrapRefCarouselApi } from '../types';
 
 defineOptions({
   name: 'SCarouselRoot'
diff --git a/packages/soy-ui/src/components/carousel/carousel.vue b/packages/soy-ui/src/components/carousel/source/carousel.vue
similarity index 94%
rename from packages/soy-ui/src/components/carousel/carousel.vue
rename to packages/soy-ui/src/components/carousel/source/carousel.vue
index 161a7945..899dec49 100644
--- a/packages/soy-ui/src/components/carousel/carousel.vue
+++ b/packages/soy-ui/src/components/carousel/source/carousel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import type { CarouselEmits, CarouselProps } from '../types';
 import SCarouselRoot from './carousel-root.vue';
 import SCarouselContent from './carousel-content.vue';
 import SCarouselItem from './carousel-item.vue';
 import SCarouselNext from './carousel-next.vue';
 import SCarouselPrevious from './carousel-previous.vue';
-import type { CarouselEmits, CarouselProps } from './types';
 
 defineOptions({
   name: 'SCarousel'
diff --git a/examples/src/ui/checkbox.vue b/packages/soy-ui/src/components/checkbox/demos/checkbox.vue
similarity index 100%
rename from examples/src/ui/checkbox.vue
rename to packages/soy-ui/src/components/checkbox/demos/checkbox.vue
diff --git a/packages/soy-ui/src/components/checkbox/demos/index.ts b/packages/soy-ui/src/components/checkbox/demos/index.ts
new file mode 100644
index 00000000..e3ed72e5
--- /dev/null
+++ b/packages/soy-ui/src/components/checkbox/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoCheckbox from './checkbox.vue';
+
+export { DemoCheckbox };
diff --git a/packages/soy-ui/src/components/checkbox/index.ts b/packages/soy-ui/src/components/checkbox/index.ts
index 1cb6fd58..fe082d5a 100644
--- a/packages/soy-ui/src/components/checkbox/index.ts
+++ b/packages/soy-ui/src/components/checkbox/index.ts
@@ -1,9 +1,9 @@
-import SCheckbox from './checkbox.vue';
-import SCheckboxControl from './checkbox-control.vue';
-import SCheckboxGroupRoot from './checkbox-group-root.vue';
-import SCheckboxGroup from './checkbox-group.vue';
-import SCheckboxIndicator from './checkbox-indicator.vue';
-import SCheckboxRoot from './checkbox-root.vue';
+import SCheckbox from './source/checkbox.vue';
+import SCheckboxControl from './source/checkbox-control.vue';
+import SCheckboxGroupRoot from './source/checkbox-group-root.vue';
+import SCheckboxGroup from './source/checkbox-group.vue';
+import SCheckboxIndicator from './source/checkbox-indicator.vue';
+import SCheckboxRoot from './source/checkbox-root.vue';
 
 export { SCheckbox, SCheckboxControl, SCheckboxGroup, SCheckboxGroupRoot, SCheckboxIndicator, SCheckboxRoot };
 
diff --git a/packages/soy-ui/src/components/checkbox/checkbox-control.vue b/packages/soy-ui/src/components/checkbox/source/checkbox-control.vue
similarity index 98%
rename from packages/soy-ui/src/components/checkbox/checkbox-control.vue
rename to packages/soy-ui/src/components/checkbox/source/checkbox-control.vue
index 3edaec4a..581f6655 100644
--- a/packages/soy-ui/src/components/checkbox/checkbox-control.vue
+++ b/packages/soy-ui/src/components/checkbox/source/checkbox-control.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { CheckboxRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { checkboxVariants, cn } from '@soybean-ui/variants';
-import type { CheckboxControlEmits, CheckboxControlProps } from './types';
+import type { CheckboxControlEmits, CheckboxControlProps } from '../types';
 
 defineOptions({
   name: 'SCheckboxControl'
diff --git a/packages/soy-ui/src/components/checkbox/checkbox-group-root.vue b/packages/soy-ui/src/components/checkbox/source/checkbox-group-root.vue
similarity index 98%
rename from packages/soy-ui/src/components/checkbox/checkbox-group-root.vue
rename to packages/soy-ui/src/components/checkbox/source/checkbox-group-root.vue
index 0bab3db7..1f8c89dd 100644
--- a/packages/soy-ui/src/components/checkbox/checkbox-group-root.vue
+++ b/packages/soy-ui/src/components/checkbox/source/checkbox-group-root.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { CheckboxGroupRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { checkboxVariants, cn } from '@soybean-ui/variants';
-import type { CheckboxGroupRootEmits, CheckboxGroupRootProps } from './types';
+import type { CheckboxGroupRootEmits, CheckboxGroupRootProps } from '../types';
 
 defineOptions({
   name: 'SCheckboxGroupRoot'
diff --git a/packages/soy-ui/src/components/checkbox/checkbox-group.vue b/packages/soy-ui/src/components/checkbox/source/checkbox-group.vue
similarity index 92%
rename from packages/soy-ui/src/components/checkbox/checkbox-group.vue
rename to packages/soy-ui/src/components/checkbox/source/checkbox-group.vue
index 04511151..b0f3560b 100644
--- a/packages/soy-ui/src/components/checkbox/checkbox-group.vue
+++ b/packages/soy-ui/src/components/checkbox/source/checkbox-group.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { CheckboxGroupEmits, CheckboxGroupProps } from '../types';
 import SCheckboxGroupRoot from './checkbox-group-root.vue';
 import SCheckbox from './checkbox.vue';
-import type { CheckboxGroupEmits, CheckboxGroupProps } from './types';
 
 defineOptions({
   name: 'SCheckboxGroup'
diff --git a/packages/soy-ui/src/components/checkbox/checkbox-indicator.vue b/packages/soy-ui/src/components/checkbox/source/checkbox-indicator.vue
similarity index 90%
rename from packages/soy-ui/src/components/checkbox/checkbox-indicator.vue
rename to packages/soy-ui/src/components/checkbox/source/checkbox-indicator.vue
index 15422b91..e51dc901 100644
--- a/packages/soy-ui/src/components/checkbox/checkbox-indicator.vue
+++ b/packages/soy-ui/src/components/checkbox/source/checkbox-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { CheckboxIndicator } from '@soybean-ui/primitives';
 import { checkboxVariants, cn } from '@soybean-ui/variants';
-import type { CheckboxIndicatorProps } from './types';
+import type { CheckboxIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SCheckboxIndicator'
diff --git a/packages/soy-ui/src/components/checkbox/checkbox-root.vue b/packages/soy-ui/src/components/checkbox/source/checkbox-root.vue
similarity index 89%
rename from packages/soy-ui/src/components/checkbox/checkbox-root.vue
rename to packages/soy-ui/src/components/checkbox/source/checkbox-root.vue
index daf7a61e..3c5f3c42 100644
--- a/packages/soy-ui/src/components/checkbox/checkbox-root.vue
+++ b/packages/soy-ui/src/components/checkbox/source/checkbox-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { checkboxVariants, cn } from '@soybean-ui/variants';
-import type { CheckboxRootProps } from './types';
+import type { CheckboxRootProps } from '../types';
 
 defineOptions({
   name: 'SCheckboxRoot'
diff --git a/packages/soy-ui/src/components/checkbox/checkbox.vue b/packages/soy-ui/src/components/checkbox/source/checkbox.vue
similarity index 92%
rename from packages/soy-ui/src/components/checkbox/checkbox.vue
rename to packages/soy-ui/src/components/checkbox/source/checkbox.vue
index fdf48848..ffb76a18 100644
--- a/packages/soy-ui/src/components/checkbox/checkbox.vue
+++ b/packages/soy-ui/src/components/checkbox/source/checkbox.vue
@@ -2,11 +2,11 @@
 import { computed, useId } from 'vue';
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
 import { Check, Minus } from 'lucide-vue-next';
-import SCheckboxLabel from '../label/label.vue';
+import SCheckboxLabel from '../../label/source/label.vue';
+import type { CheckboxEmits, CheckboxProps } from '../types';
 import SCheckboxRoot from './checkbox-root.vue';
 import SCheckboxControl from './checkbox-control.vue';
 import SCheckboxIndicator from './checkbox-indicator.vue';
-import type { CheckboxEmits, CheckboxProps } from './types';
 
 defineOptions({
   name: 'SCheckbox'
diff --git a/examples/src/ui/chip.vue b/packages/soy-ui/src/components/chip/demos/chip.vue
similarity index 100%
rename from examples/src/ui/chip.vue
rename to packages/soy-ui/src/components/chip/demos/chip.vue
diff --git a/packages/soy-ui/src/components/chip/demos/index.ts b/packages/soy-ui/src/components/chip/demos/index.ts
new file mode 100644
index 00000000..13af6c79
--- /dev/null
+++ b/packages/soy-ui/src/components/chip/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoChip from './chip.vue';
+
+export { DemoChip };
diff --git a/packages/soy-ui/src/components/chip/index.ts b/packages/soy-ui/src/components/chip/index.ts
index 4c227487..24d2f3dd 100644
--- a/packages/soy-ui/src/components/chip/index.ts
+++ b/packages/soy-ui/src/components/chip/index.ts
@@ -1,6 +1,6 @@
-import SChip from './chip.vue';
-import SChipContent from './chip-content.vue';
-import SChipRoot from './chip-root.vue';
+import SChip from './source/chip.vue';
+import SChipContent from './source/chip-content.vue';
+import SChipRoot from './source/chip-root.vue';
 
 export { SChip, SChipContent, SChipRoot };
 
diff --git a/packages/soy-ui/src/components/chip/chip-content.vue b/packages/soy-ui/src/components/chip/source/chip-content.vue
similarity index 90%
rename from packages/soy-ui/src/components/chip/chip-content.vue
rename to packages/soy-ui/src/components/chip/source/chip-content.vue
index 490e0145..1b9c3db4 100644
--- a/packages/soy-ui/src/components/chip/chip-content.vue
+++ b/packages/soy-ui/src/components/chip/source/chip-content.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { chipVariants, cn } from '@soybean-ui/variants';
-import type { ChipContentProps } from './types';
+import type { ChipContentProps } from '../types';
 
 defineOptions({
   name: 'SChipContent'
diff --git a/packages/soy-ui/src/components/chip/chip-root.vue b/packages/soy-ui/src/components/chip/source/chip-root.vue
similarity index 88%
rename from packages/soy-ui/src/components/chip/chip-root.vue
rename to packages/soy-ui/src/components/chip/source/chip-root.vue
index a3495188..42753b12 100644
--- a/packages/soy-ui/src/components/chip/chip-root.vue
+++ b/packages/soy-ui/src/components/chip/source/chip-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { chipVariants, cn } from '@soybean-ui/variants';
-import type { ChipRootProps } from './types';
+import type { ChipRootProps } from '../types';
 
 defineOptions({
   name: 'SChipRoot'
diff --git a/packages/soy-ui/src/components/chip/chip.vue b/packages/soy-ui/src/components/chip/source/chip.vue
similarity index 92%
rename from packages/soy-ui/src/components/chip/chip.vue
rename to packages/soy-ui/src/components/chip/source/chip.vue
index 3d1ac00e..87e66798 100644
--- a/packages/soy-ui/src/components/chip/chip.vue
+++ b/packages/soy-ui/src/components/chip/source/chip.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import type { ChipProps } from '../types';
 import SChipRoot from './chip-root.vue';
 import SChipContent from './chip-content.vue';
-import type { ChipProps } from './types';
 
 defineOptions({
   name: 'SChip'
diff --git a/examples/src/ui/collapsible.vue b/packages/soy-ui/src/components/collapsible/demos/collapsible.vue
similarity index 100%
rename from examples/src/ui/collapsible.vue
rename to packages/soy-ui/src/components/collapsible/demos/collapsible.vue
diff --git a/packages/soy-ui/src/components/collapsible/demos/index.ts b/packages/soy-ui/src/components/collapsible/demos/index.ts
new file mode 100644
index 00000000..e26c5c89
--- /dev/null
+++ b/packages/soy-ui/src/components/collapsible/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoCollapsible from './collapsible.vue';
+
+export { DemoCollapsible };
diff --git a/packages/soy-ui/src/components/collapsible/index.ts b/packages/soy-ui/src/components/collapsible/index.ts
index 64fa322d..ce8b095e 100644
--- a/packages/soy-ui/src/components/collapsible/index.ts
+++ b/packages/soy-ui/src/components/collapsible/index.ts
@@ -1,6 +1,6 @@
 import { CollapsibleRoot as SCollapsibleRoot, CollapsibleTrigger as SCollapsibleTrigger } from '@soybean-ui/primitives';
-import SCollapsible from './collapsible.vue';
-import SCollapsibleContent from './collapsible-content.vue';
+import SCollapsible from './source/collapsible.vue';
+import SCollapsibleContent from './source/collapsible-content.vue';
 
 export { SCollapsible, SCollapsibleContent, SCollapsibleRoot, SCollapsibleTrigger };
 
diff --git a/packages/soy-ui/src/components/collapsible/collapsible-content.vue b/packages/soy-ui/src/components/collapsible/source/collapsible-content.vue
similarity index 90%
rename from packages/soy-ui/src/components/collapsible/collapsible-content.vue
rename to packages/soy-ui/src/components/collapsible/source/collapsible-content.vue
index d7cacb06..6ebb6a54 100644
--- a/packages/soy-ui/src/components/collapsible/collapsible-content.vue
+++ b/packages/soy-ui/src/components/collapsible/source/collapsible-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { CollapsibleContent } from '@soybean-ui/primitives';
 import { cn, collapsibleVariants } from '@soybean-ui/variants';
-import type { CollapsibleContentProps } from './types';
+import type { CollapsibleContentProps } from '../types';
 
 defineOptions({
   name: 'SCollapsibleContent'
diff --git a/packages/soy-ui/src/components/collapsible/collapsible-root.vue b/packages/soy-ui/src/components/collapsible/source/collapsible-root.vue
similarity index 98%
rename from packages/soy-ui/src/components/collapsible/collapsible-root.vue
rename to packages/soy-ui/src/components/collapsible/source/collapsible-root.vue
index 1ace88cb..50328773 100644
--- a/packages/soy-ui/src/components/collapsible/collapsible-root.vue
+++ b/packages/soy-ui/src/components/collapsible/source/collapsible-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { CollapsibleRoot, useCombinedPropsEmits } from '@soybean-ui/primitives';
 import { cn, collapsibleVariants } from '@soybean-ui/variants';
-import type { CollapsibleRootEmits, CollapsibleRootProps } from './types';
+import type { CollapsibleRootEmits, CollapsibleRootProps } from '../types';
 
 defineOptions({
   name: 'SCollapsibleRoot'
diff --git a/packages/soy-ui/src/components/collapsible/collapsible.vue b/packages/soy-ui/src/components/collapsible/source/collapsible.vue
similarity index 93%
rename from packages/soy-ui/src/components/collapsible/collapsible.vue
rename to packages/soy-ui/src/components/collapsible/source/collapsible.vue
index 606629d8..ab5ae1e4 100644
--- a/packages/soy-ui/src/components/collapsible/collapsible.vue
+++ b/packages/soy-ui/src/components/collapsible/source/collapsible.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { CollapsibleEmits, CollapsibleProps } from '../types';
 import SCollapsibleContent from './collapsible-content.vue';
-import type { CollapsibleEmits, CollapsibleProps } from './types';
 
 defineOptions({
   name: 'SCollapsible'
diff --git a/examples/src/ui/combobox.vue b/packages/soy-ui/src/components/combobox/demos/combobox.vue
similarity index 100%
rename from examples/src/ui/combobox.vue
rename to packages/soy-ui/src/components/combobox/demos/combobox.vue
diff --git a/packages/soy-ui/src/components/combobox/demos/index.ts b/packages/soy-ui/src/components/combobox/demos/index.ts
new file mode 100644
index 00000000..b8ac74e1
--- /dev/null
+++ b/packages/soy-ui/src/components/combobox/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoCombobox from './combobox.vue';
+
+export { DemoCombobox };
diff --git a/packages/soy-ui/src/components/combobox/index.ts b/packages/soy-ui/src/components/combobox/index.ts
index c4b4f5f0..cf86a6ad 100644
--- a/packages/soy-ui/src/components/combobox/index.ts
+++ b/packages/soy-ui/src/components/combobox/index.ts
@@ -1,17 +1,17 @@
-import SCombobox from './combobox.vue';
-import SComboboxAnchor from './combobox-anchor.vue';
-import SComboboxContent from './combobox-content.vue';
-import SComboboxEmpty from './combobox-empty.vue';
-import SComboboxGroupLabel from './combobox-group-label.vue';
-import SComboboxGroup from './combobox-group.vue';
-import SComboboxInput from './combobox-input.vue';
-import SComboboxItem from './combobox-item.vue';
-import SComboboxList from './combobox-list.vue';
-import SComboboxOption from './combobox-option.vue';
-import SComboboxRoot from './combobox-root.vue';
-import SComboboxSeparator from './combobox-separator.vue';
-import SComboboxSingleOption from './combobox-single-option.vue';
-import SComboboxTrigger from './combobox-trigger.vue';
+import SCombobox from './source/combobox.vue';
+import SComboboxAnchor from './source/combobox-anchor.vue';
+import SComboboxContent from './source/combobox-content.vue';
+import SComboboxEmpty from './source/combobox-empty.vue';
+import SComboboxGroupLabel from './source/combobox-group-label.vue';
+import SComboboxGroup from './source/combobox-group.vue';
+import SComboboxInput from './source/combobox-input.vue';
+import SComboboxItem from './source/combobox-item.vue';
+import SComboboxList from './source/combobox-list.vue';
+import SComboboxOption from './source/combobox-option.vue';
+import SComboboxRoot from './source/combobox-root.vue';
+import SComboboxSeparator from './source/combobox-separator.vue';
+import SComboboxSingleOption from './source/combobox-single-option.vue';
+import SComboboxTrigger from './source/combobox-trigger.vue';
 
 export {
   SCombobox,
diff --git a/packages/soy-ui/src/components/combobox/combobox-anchor.vue b/packages/soy-ui/src/components/combobox/source/combobox-anchor.vue
similarity index 90%
rename from packages/soy-ui/src/components/combobox/combobox-anchor.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-anchor.vue
index afee1568..9a5d7ee4 100644
--- a/packages/soy-ui/src/components/combobox/combobox-anchor.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-anchor.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ComboboxAnchor } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxAnchorProps } from './types';
+import type { ComboboxAnchorProps } from '../types';
 
 defineOptions({
   name: 'SComboboxAnchor'
diff --git a/packages/soy-ui/src/components/combobox/combobox-content.vue b/packages/soy-ui/src/components/combobox/source/combobox-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/combobox/combobox-content.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-content.vue
index e18b67c9..da9ec441 100644
--- a/packages/soy-ui/src/components/combobox/combobox-content.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-content.vue
@@ -8,7 +8,7 @@ import {
   useOmitForwardProps
 } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxContentEmits, ComboboxContentProps } from './types';
+import type { ComboboxContentEmits, ComboboxContentProps } from '../types';
 
 defineOptions({
   name: 'SComboboxContent'
diff --git a/packages/soy-ui/src/components/combobox/combobox-empty.vue b/packages/soy-ui/src/components/combobox/source/combobox-empty.vue
similarity index 90%
rename from packages/soy-ui/src/components/combobox/combobox-empty.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-empty.vue
index 7cde5e51..bbf6f113 100644
--- a/packages/soy-ui/src/components/combobox/combobox-empty.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-empty.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ComboboxEmpty } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxEmptyProps } from './types';
+import type { ComboboxEmptyProps } from '../types';
 
 defineOptions({
   name: 'SComboboxEmpty'
diff --git a/packages/soy-ui/src/components/combobox/combobox-group-label.vue b/packages/soy-ui/src/components/combobox/source/combobox-group-label.vue
similarity index 90%
rename from packages/soy-ui/src/components/combobox/combobox-group-label.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-group-label.vue
index 0d0d1a45..b9f5c627 100644
--- a/packages/soy-ui/src/components/combobox/combobox-group-label.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-group-label.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ComboboxLabel } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxGroupLabelProps } from './types';
+import type { ComboboxGroupLabelProps } from '../types';
 
 defineOptions({
   name: 'SComboboxGroupLabel'
diff --git a/packages/soy-ui/src/components/combobox/combobox-group.vue b/packages/soy-ui/src/components/combobox/source/combobox-group.vue
similarity index 90%
rename from packages/soy-ui/src/components/combobox/combobox-group.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-group.vue
index 08ba128d..881584c5 100644
--- a/packages/soy-ui/src/components/combobox/combobox-group.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-group.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ComboboxGroup } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxGroupProps } from './types';
+import type { ComboboxGroupProps } from '../types';
 
 defineOptions({
   name: 'SComboboxGroup'
diff --git a/packages/soy-ui/src/components/combobox/combobox-indicator.vue b/packages/soy-ui/src/components/combobox/source/combobox-indicator.vue
similarity index 90%
rename from packages/soy-ui/src/components/combobox/combobox-indicator.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-indicator.vue
index a27f6f7e..ac4822e3 100644
--- a/packages/soy-ui/src/components/combobox/combobox-indicator.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-indicator.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { ComboboxItemIndicator } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
 import { Check } from 'lucide-vue-next';
-import type { ComboboxItemIndicatorProps } from './types';
+import type { ComboboxItemIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SComboboxItemIndicator'
diff --git a/packages/soy-ui/src/components/combobox/combobox-input.vue b/packages/soy-ui/src/components/combobox/source/combobox-input.vue
similarity index 92%
rename from packages/soy-ui/src/components/combobox/combobox-input.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-input.vue
index ceb216bb..08c1ab95 100644
--- a/packages/soy-ui/src/components/combobox/combobox-input.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-input.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ComboboxInput, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxInputEmits, ComboboxInputProps } from './types';
+import type { ComboboxInputEmits, ComboboxInputProps } from '../types';
 
 defineOptions({
   name: 'SComboboxInput'
diff --git a/packages/soy-ui/src/components/combobox/combobox-item.vue b/packages/soy-ui/src/components/combobox/source/combobox-item.vue
similarity index 91%
rename from packages/soy-ui/src/components/combobox/combobox-item.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-item.vue
index d943fb22..b0e1438a 100644
--- a/packages/soy-ui/src/components/combobox/combobox-item.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-item.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { ComboboxItem, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxItemEmits, ComboboxItemProps } from './types';
+import type { ComboboxItemEmits, ComboboxItemProps } from '../types';
 
 defineOptions({
   name: 'SComboboxItem'
diff --git a/packages/soy-ui/src/components/combobox/combobox-list.vue b/packages/soy-ui/src/components/combobox/source/combobox-list.vue
similarity index 89%
rename from packages/soy-ui/src/components/combobox/combobox-list.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-list.vue
index 96636678..d3a63eaa 100644
--- a/packages/soy-ui/src/components/combobox/combobox-list.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxListProps } from './types';
+import type { ComboboxListProps } from '../types';
 
 defineOptions({
   name: 'SComboboxList'
diff --git a/packages/soy-ui/src/components/combobox/combobox-option.vue b/packages/soy-ui/src/components/combobox/source/combobox-option.vue
similarity index 95%
rename from packages/soy-ui/src/components/combobox/combobox-option.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-option.vue
index 6a09d0d0..6ed9b92c 100644
--- a/packages/soy-ui/src/components/combobox/combobox-option.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-option.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup generic="T extends AcceptableValue = AcceptableValue">
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import { isComboboxGroupOption } from '../shared';
+import type { ComboboxOptionEmits, ComboboxOptionProps } from '../types';
 import SComboboxGroup from './combobox-group.vue';
 import SComboboxGroupLabel from './combobox-group-label.vue';
 import SComboboxSeparator from './combobox-separator.vue';
 import SComboboxSingleOption from './combobox-single-option.vue';
-import { isComboboxGroupOption } from './shared';
-import type { ComboboxOptionEmits, ComboboxOptionProps } from './types';
 
 defineOptions({
   name: 'SComboboxOption'
diff --git a/packages/soy-ui/src/components/combobox/combobox-root.vue b/packages/soy-ui/src/components/combobox/source/combobox-root.vue
similarity index 92%
rename from packages/soy-ui/src/components/combobox/combobox-root.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-root.vue
index d5132170..8548b20c 100644
--- a/packages/soy-ui/src/components/combobox/combobox-root.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-root.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { ComboboxRoot, useCombinedPropsEmits, useOmitForwardProps } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxRootEmits, ComboboxRootProps } from './types';
+import type { ComboboxRootEmits, ComboboxRootProps } from '../types';
 
 defineOptions({
   name: 'SComboboxRoot'
diff --git a/packages/soy-ui/src/components/combobox/combobox-separator.vue b/packages/soy-ui/src/components/combobox/source/combobox-separator.vue
similarity index 90%
rename from packages/soy-ui/src/components/combobox/combobox-separator.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-separator.vue
index 8319ca82..c7b6e163 100644
--- a/packages/soy-ui/src/components/combobox/combobox-separator.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-separator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ComboboxSeparator } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxSeparatorProps } from './types';
+import type { ComboboxSeparatorProps } from '../types';
 
 defineOptions({
   name: 'SComboboxSeparator'
diff --git a/packages/soy-ui/src/components/combobox/combobox-single-option.vue b/packages/soy-ui/src/components/combobox/source/combobox-single-option.vue
similarity index 97%
rename from packages/soy-ui/src/components/combobox/combobox-single-option.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-single-option.vue
index c8737c40..42abe3bc 100644
--- a/packages/soy-ui/src/components/combobox/combobox-single-option.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-single-option.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup generic="T extends AcceptableValue = AcceptableValue">
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { ComboboxSingleOptionEmits, ComboboxSingleOptionProps } from '../types';
 import SComboboxItem from './combobox-item.vue';
 import SComboboxIndicator from './combobox-indicator.vue';
 import SComboboxSeparator from './combobox-separator.vue';
-import type { ComboboxSingleOptionEmits, ComboboxSingleOptionProps } from './types';
 
 defineOptions({
   name: 'SComboboxSingleOption'
diff --git a/packages/soy-ui/src/components/combobox/combobox-trigger.vue b/packages/soy-ui/src/components/combobox/source/combobox-trigger.vue
similarity index 91%
rename from packages/soy-ui/src/components/combobox/combobox-trigger.vue
rename to packages/soy-ui/src/components/combobox/source/combobox-trigger.vue
index 1e55d4d8..a2b1d0b3 100644
--- a/packages/soy-ui/src/components/combobox/combobox-trigger.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox-trigger.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ComboboxTrigger } from '@soybean-ui/primitives';
 import { cn, comboboxVariants } from '@soybean-ui/variants';
-import type { ComboboxTriggerProps } from './types';
+import type { ComboboxTriggerProps } from '../types';
 
 defineOptions({
   name: 'SComboboxTrigger'
diff --git a/packages/soy-ui/src/components/combobox/combobox.vue b/packages/soy-ui/src/components/combobox/source/combobox.vue
similarity index 97%
rename from packages/soy-ui/src/components/combobox/combobox.vue
rename to packages/soy-ui/src/components/combobox/source/combobox.vue
index d1a807eb..69a537dd 100644
--- a/packages/soy-ui/src/components/combobox/combobox.vue
+++ b/packages/soy-ui/src/components/combobox/source/combobox.vue
@@ -3,7 +3,9 @@ import { computed, ref } from 'vue';
 import { useCombinedPropsEmits, useOmitEmitAsProps, useOmitForwardProps } from '@soybean-ui/primitives';
 import type { AcceptableValue, SelectEvent } from '@soybean-ui/primitives';
 import { ChevronsUpDown, Search } from 'lucide-vue-next';
-import SButton from '../button/button.vue';
+import SButton from '../../button/source/button.vue';
+import { getComboboxOptionByValue } from '../shared';
+import type { ComboboxEmits, ComboboxOptionData, ComboboxProps } from '../types';
 import SComboboxRoot from './combobox-root.vue';
 import SComboboxAnchor from './combobox-anchor.vue';
 import SComboboxEmpty from './combobox-empty.vue';
@@ -12,8 +14,6 @@ import SComboboxTrigger from './combobox-trigger.vue';
 import SComboboxContent from './combobox-content.vue';
 import SComboboxList from './combobox-list.vue';
 import SComboboxOption from './combobox-option.vue';
-import { getComboboxOptionByValue } from './shared';
-import type { ComboboxEmits, ComboboxOptionData, ComboboxProps } from './types';
 
 defineOptions({
   name: 'SCombobox'
diff --git a/examples/src/ui/command.vue b/packages/soy-ui/src/components/command/demos/command.vue
similarity index 100%
rename from examples/src/ui/command.vue
rename to packages/soy-ui/src/components/command/demos/command.vue
diff --git a/packages/soy-ui/src/components/command/demos/index.ts b/packages/soy-ui/src/components/command/demos/index.ts
new file mode 100644
index 00000000..eed53fb7
--- /dev/null
+++ b/packages/soy-ui/src/components/command/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoCommand from './command.vue';
+
+export { DemoCommand };
diff --git a/packages/soy-ui/src/components/command/index.ts b/packages/soy-ui/src/components/command/index.ts
index 8df3ba25..a01d1c35 100644
--- a/packages/soy-ui/src/components/command/index.ts
+++ b/packages/soy-ui/src/components/command/index.ts
@@ -1,16 +1,16 @@
-import SCommand from './command.vue';
-import SCommandDialog from './command-dialog.vue';
-import SCommandEmpty from './command-empty.vue';
-import SCommandGroupLabel from './command-group-label.vue';
-import SCommandGroup from './command-group.vue';
-import SCommandInput from './command-input.vue';
-import SCommandItem from './command-item.vue';
-import SCommandList from './command-list.vue';
-import SCommandOption from './command-option.vue';
-import SCommandRoot from './command-root.vue';
-import SCommandSeparator from './command-separator.vue';
-import SCommandShortcut from './command-shortcut.vue';
-import SCommandSingleOption from './command-single-option.vue';
+import SCommand from './source/command.vue';
+import SCommandDialog from './source/command-dialog.vue';
+import SCommandEmpty from './source/command-empty.vue';
+import SCommandGroupLabel from './source/command-group-label.vue';
+import SCommandGroup from './source/command-group.vue';
+import SCommandInput from './source/command-input.vue';
+import SCommandItem from './source/command-item.vue';
+import SCommandList from './source/command-list.vue';
+import SCommandOption from './source/command-option.vue';
+import SCommandRoot from './source/command-root.vue';
+import SCommandSeparator from './source/command-separator.vue';
+import SCommandShortcut from './source/command-shortcut.vue';
+import SCommandSingleOption from './source/command-single-option.vue';
 
 export {
   SCommand,
diff --git a/packages/soy-ui/src/components/command/command-dialog.vue b/packages/soy-ui/src/components/command/source/command-dialog.vue
similarity index 94%
rename from packages/soy-ui/src/components/command/command-dialog.vue
rename to packages/soy-ui/src/components/command/source/command-dialog.vue
index 2789360a..e875e67c 100644
--- a/packages/soy-ui/src/components/command/command-dialog.vue
+++ b/packages/soy-ui/src/components/command/source/command-dialog.vue
@@ -8,8 +8,8 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import { SDialogClose, SDialogContent, SDialogOverlay } from '../dialog';
-import type { CommandDialogEmits, CommandDialogProps } from './types';
+import { SDialogClose, SDialogContent, SDialogOverlay } from '../../dialog/index';
+import type { CommandDialogEmits, CommandDialogProps } from '../types';
 
 defineOptions({
   name: 'SCommandDialog'
diff --git a/packages/soy-ui/src/components/command/command-empty.vue b/packages/soy-ui/src/components/command/source/command-empty.vue
similarity index 89%
rename from packages/soy-ui/src/components/command/command-empty.vue
rename to packages/soy-ui/src/components/command/source/command-empty.vue
index e495b628..9f4c149b 100644
--- a/packages/soy-ui/src/components/command/command-empty.vue
+++ b/packages/soy-ui/src/components/command/source/command-empty.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import type { CommandEmptyProps } from './types';
+import type { CommandEmptyProps } from '../types';
 
 defineOptions({
   name: 'SCommandEmpty'
diff --git a/packages/soy-ui/src/components/command/command-group-label.vue b/packages/soy-ui/src/components/command/source/command-group-label.vue
similarity index 90%
rename from packages/soy-ui/src/components/command/command-group-label.vue
rename to packages/soy-ui/src/components/command/source/command-group-label.vue
index 37e373eb..3b7045a9 100644
--- a/packages/soy-ui/src/components/command/command-group-label.vue
+++ b/packages/soy-ui/src/components/command/source/command-group-label.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ListboxGroupLabel } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import type { CommandGroupLabelProps } from './types';
+import type { CommandGroupLabelProps } from '../types';
 
 defineOptions({
   name: 'SCommandGroupLabel'
diff --git a/packages/soy-ui/src/components/command/command-group.vue b/packages/soy-ui/src/components/command/source/command-group.vue
similarity index 90%
rename from packages/soy-ui/src/components/command/command-group.vue
rename to packages/soy-ui/src/components/command/source/command-group.vue
index d0e85629..d66a26c5 100644
--- a/packages/soy-ui/src/components/command/command-group.vue
+++ b/packages/soy-ui/src/components/command/source/command-group.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ListboxGroup } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import type { CommandGroupProps } from './types';
+import type { CommandGroupProps } from '../types';
 
 defineOptions({
   name: 'SCommandGroup'
diff --git a/packages/soy-ui/src/components/command/command-input.vue b/packages/soy-ui/src/components/command/source/command-input.vue
similarity index 93%
rename from packages/soy-ui/src/components/command/command-input.vue
rename to packages/soy-ui/src/components/command/source/command-input.vue
index 367be120..bd155ffb 100644
--- a/packages/soy-ui/src/components/command/command-input.vue
+++ b/packages/soy-ui/src/components/command/source/command-input.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { ListboxFilter, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
 import { Search } from 'lucide-vue-next';
-import type { CommandInputEmits, CommandInputProps } from './types';
+import type { CommandInputEmits, CommandInputProps } from '../types';
 
 defineOptions({
   name: 'SCommandInput',
diff --git a/packages/soy-ui/src/components/command/command-item.vue b/packages/soy-ui/src/components/command/source/command-item.vue
similarity index 92%
rename from packages/soy-ui/src/components/command/command-item.vue
rename to packages/soy-ui/src/components/command/source/command-item.vue
index 9e3bc74d..2d081c34 100644
--- a/packages/soy-ui/src/components/command/command-item.vue
+++ b/packages/soy-ui/src/components/command/source/command-item.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { ListboxItem, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import type { CommandItemEmits, CommandItemProps } from './types';
+import type { CommandItemEmits, CommandItemProps } from '../types';
 
 defineOptions({
   name: 'SCommandItem'
diff --git a/packages/soy-ui/src/components/command/command-list.vue b/packages/soy-ui/src/components/command/source/command-list.vue
similarity index 92%
rename from packages/soy-ui/src/components/command/command-list.vue
rename to packages/soy-ui/src/components/command/source/command-list.vue
index 11351f31..25f1f577 100644
--- a/packages/soy-ui/src/components/command/command-list.vue
+++ b/packages/soy-ui/src/components/command/source/command-list.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ListboxContent, useForwardProps } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import type { CommandListProps } from './types';
+import type { CommandListProps } from '../types';
 
 defineOptions({
   name: 'SCommandList'
diff --git a/packages/soy-ui/src/components/command/command-option.vue b/packages/soy-ui/src/components/command/source/command-option.vue
similarity index 94%
rename from packages/soy-ui/src/components/command/command-option.vue
rename to packages/soy-ui/src/components/command/source/command-option.vue
index 1c1d595f..6e2b1704 100644
--- a/packages/soy-ui/src/components/command/command-option.vue
+++ b/packages/soy-ui/src/components/command/source/command-option.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import { isCommandGroupOption } from '../shared';
+import type { CommandOptionData, CommandOptionEmits, CommandOptionProps } from '../types';
 import SCommandGroup from './command-group.vue';
 import SCommandGroupLabel from './command-group-label.vue';
 import SCommandSeparator from './command-separator.vue';
 import SCommandSingleOption from './command-single-option.vue';
-import { isCommandGroupOption } from './shared';
-import type { CommandOptionData, CommandOptionEmits, CommandOptionProps } from './types';
 
 defineOptions({
   name: 'SCommandOption'
diff --git a/packages/soy-ui/src/components/command/command-root.vue b/packages/soy-ui/src/components/command/source/command-root.vue
similarity index 92%
rename from packages/soy-ui/src/components/command/command-root.vue
rename to packages/soy-ui/src/components/command/source/command-root.vue
index 88d72a1a..a00e13b6 100644
--- a/packages/soy-ui/src/components/command/command-root.vue
+++ b/packages/soy-ui/src/components/command/source/command-root.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { ListboxRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import type { CommandRootEmits, CommandRootProps } from './types';
+import type { CommandRootEmits, CommandRootProps } from '../types';
 
 defineOptions({
   name: 'SCommandRoot'
diff --git a/packages/soy-ui/src/components/command/command-separator.vue b/packages/soy-ui/src/components/command/source/command-separator.vue
similarity index 88%
rename from packages/soy-ui/src/components/command/command-separator.vue
rename to packages/soy-ui/src/components/command/source/command-separator.vue
index e8f307b4..a51acba2 100644
--- a/packages/soy-ui/src/components/command/command-separator.vue
+++ b/packages/soy-ui/src/components/command/source/command-separator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import type { CommandSeparatorProps } from './types';
+import type { CommandSeparatorProps } from '../types';
 
 defineOptions({
   name: 'SCommandSeparator'
diff --git a/packages/soy-ui/src/components/command/command-shortcut.vue b/packages/soy-ui/src/components/command/source/command-shortcut.vue
similarity index 75%
rename from packages/soy-ui/src/components/command/command-shortcut.vue
rename to packages/soy-ui/src/components/command/source/command-shortcut.vue
index 8c081481..e95ef5eb 100644
--- a/packages/soy-ui/src/components/command/command-shortcut.vue
+++ b/packages/soy-ui/src/components/command/source/command-shortcut.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends KeyboardKeyValue | KeyboardKeyValue[] = KeyboardKeyValue[]">
 import { computed } from 'vue';
 import { cn, commandVariants } from '@soybean-ui/variants';
-import SKeyboardKey from '../keyboard-key/keyboard-key.vue';
-import type { KeyboardKeyValue } from '../keyboard-key';
-import type { CommandShortcutProps } from './types';
+import { SKeyboardKey } from '../../keyboard-key';
+import type { KeyboardKeyValue } from '../../keyboard-key/types';
+import type { CommandShortcutProps } from '../types';
 
 defineOptions({
   name: 'SCommandShortcut'
diff --git a/packages/soy-ui/src/components/command/command-single-option.vue b/packages/soy-ui/src/components/command/source/command-single-option.vue
similarity index 98%
rename from packages/soy-ui/src/components/command/command-single-option.vue
rename to packages/soy-ui/src/components/command/source/command-single-option.vue
index 8053af68..e1e487ac 100644
--- a/packages/soy-ui/src/components/command/command-single-option.vue
+++ b/packages/soy-ui/src/components/command/source/command-single-option.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup generic="T extends AcceptableValue = AcceptableValue">
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { CommandSingleOptionEmits, CommandSingleOptionProps } from '../types';
 import SCommandItem from './command-item.vue';
 import SCommandShortcut from './command-shortcut.vue';
 import SCommandSeparator from './command-separator.vue';
-import type { CommandSingleOptionEmits, CommandSingleOptionProps } from './types';
 
 defineOptions({
   name: 'SCommandSingleOption',
diff --git a/packages/soy-ui/src/components/command/command.vue b/packages/soy-ui/src/components/command/source/command.vue
similarity index 98%
rename from packages/soy-ui/src/components/command/command.vue
rename to packages/soy-ui/src/components/command/source/command.vue
index ebc76f54..d32f5b1e 100644
--- a/packages/soy-ui/src/components/command/command.vue
+++ b/packages/soy-ui/src/components/command/source/command.vue
@@ -6,13 +6,13 @@ import { useFuse } from '@vueuse/integrations/useFuse';
 import { useCombinedPropsEmits, useOmitEmitAsProps, useOmitForwardProps } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { defu } from 'defu';
+import { getCommandHighlightSearchOption, getCommandItemOptions, getCommandSearchOptions } from '../shared';
+import type { CommandEmits, CommandOptionData, CommandProps } from '../types';
 import SCommandRoot from './command-root.vue';
 import SCommandInput from './command-input.vue';
 import SCommandList from './command-list.vue';
 import SCommandEmpty from './command-empty.vue';
 import SCommandOption from './command-option.vue';
-import { getCommandHighlightSearchOption, getCommandItemOptions, getCommandSearchOptions } from './shared';
-import type { CommandEmits, CommandOptionData, CommandProps } from './types';
 
 defineOptions({
   name: 'SCommand'
diff --git a/packages/soy-ui/src/components/config-provider/index.ts b/packages/soy-ui/src/components/config-provider/index.ts
index c4ace07b..f541a90c 100644
--- a/packages/soy-ui/src/components/config-provider/index.ts
+++ b/packages/soy-ui/src/components/config-provider/index.ts
@@ -1,5 +1,5 @@
 import { injectConfigProviderContext } from '@soybean-ui/primitives';
-import SConfigProvider from './config-provider.vue';
+import SConfigProvider from './source/config-provider.vue';
 
 export { injectConfigProviderContext, SConfigProvider };
 
diff --git a/packages/soy-ui/src/components/config-provider/config-provider.vue b/packages/soy-ui/src/components/config-provider/source/config-provider.vue
similarity index 91%
rename from packages/soy-ui/src/components/config-provider/config-provider.vue
rename to packages/soy-ui/src/components/config-provider/source/config-provider.vue
index 7f8ead72..49770afc 100644
--- a/packages/soy-ui/src/components/config-provider/config-provider.vue
+++ b/packages/soy-ui/src/components/config-provider/source/config-provider.vue
@@ -4,9 +4,9 @@ import { useStyleTag } from '@vueuse/core';
 import { ConfigProvider, useOmitForwardProps } from '@soybean-ui/primitives';
 import { generateCSSVars } from '@soybean-ui/unocss-preset';
 import type { ThemeSize } from '@soybean-ui/variants';
-import { provideConfigProviderContext } from './context';
-import { getThemeName, isIncludeByDefaultTheme } from './shared';
-import type { ConfigProviderProps } from './types';
+import { provideConfigProviderContext } from '../context';
+import { getThemeName, isIncludeByDefaultTheme } from '../shared';
+import type { ConfigProviderProps } from '../types';
 
 defineOptions({
   name: 'SConfigProvider',
diff --git a/examples/src/ui/context-menu.vue b/packages/soy-ui/src/components/context-menu/demos/context-menu.vue
similarity index 100%
rename from examples/src/ui/context-menu.vue
rename to packages/soy-ui/src/components/context-menu/demos/context-menu.vue
diff --git a/packages/soy-ui/src/components/context-menu/demos/index.ts b/packages/soy-ui/src/components/context-menu/demos/index.ts
new file mode 100644
index 00000000..2b77dda9
--- /dev/null
+++ b/packages/soy-ui/src/components/context-menu/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoContextMenu from './context-menu.vue';
+
+export { DemoContextMenu };
diff --git a/packages/soy-ui/src/components/context-menu/index.ts b/packages/soy-ui/src/components/context-menu/index.ts
index 9a81e398..f0523e19 100644
--- a/packages/soy-ui/src/components/context-menu/index.ts
+++ b/packages/soy-ui/src/components/context-menu/index.ts
@@ -1,14 +1,14 @@
-import SContextMenuItemLink from '../menu/menu-item-link.vue';
-import SContextMenuItem from '../menu/menu-item.vue';
-import SContextMenuLabel from '../menu/menu-label.vue';
-import SContextMenuSeparator from '../menu/menu-separator.vue';
-import SContextMenuShortcut from '../menu/menu-shortcut.vue';
-import SContextMenuSubTrigger from '../menu/menu-sub-trigger.vue';
-import SContextMenu from './context-menu.vue';
-import SContextMenuContent from './context-menu-content.vue';
-import SContextMenuOption from './context-menu-option.vue';
-import SContextMenuPortalContent from './context-menu-portal-content.vue';
-import SContextMenuSubContent from './context-menu-sub-content.vue';
+import SContextMenuItemLink from '../menu/source/menu-item-link.vue';
+import SContextMenuItem from '../menu/source/menu-item.vue';
+import SContextMenuLabel from '../menu/source/menu-label.vue';
+import SContextMenuSeparator from '../menu/source/menu-separator.vue';
+import SContextMenuShortcut from '../menu/source/menu-shortcut.vue';
+import SContextMenuSubTrigger from '../menu/source/menu-sub-trigger.vue';
+import SContextMenu from './source/context-menu.vue';
+import SContextMenuContent from './source/context-menu-content.vue';
+import SContextMenuOption from './source/context-menu-option.vue';
+import SContextMenuPortalContent from './source/context-menu-portal-content.vue';
+import SContextMenuSubContent from './source/context-menu-sub-content.vue';
 
 export {
   SContextMenu,
diff --git a/packages/soy-ui/src/components/context-menu/context-menu-checkbox.vue b/packages/soy-ui/src/components/context-menu/source/context-menu-checkbox.vue
similarity index 100%
rename from packages/soy-ui/src/components/context-menu/context-menu-checkbox.vue
rename to packages/soy-ui/src/components/context-menu/source/context-menu-checkbox.vue
diff --git a/packages/soy-ui/src/components/context-menu/context-menu-content.vue b/packages/soy-ui/src/components/context-menu/source/context-menu-content.vue
similarity index 97%
rename from packages/soy-ui/src/components/context-menu/context-menu-content.vue
rename to packages/soy-ui/src/components/context-menu/source/context-menu-content.vue
index 25cc8bcd..f236a16a 100644
--- a/packages/soy-ui/src/components/context-menu/context-menu-content.vue
+++ b/packages/soy-ui/src/components/context-menu/source/context-menu-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ContextMenuContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { ContextMenuContentEmits, ContextMenuContentProps } from './types';
+import type { ContextMenuContentEmits, ContextMenuContentProps } from '../types';
 
 defineOptions({
   name: 'SContextMenuContent'
diff --git a/packages/soy-ui/src/components/context-menu/context-menu-option.vue b/packages/soy-ui/src/components/context-menu/source/context-menu-option.vue
similarity index 91%
rename from packages/soy-ui/src/components/context-menu/context-menu-option.vue
rename to packages/soy-ui/src/components/context-menu/source/context-menu-option.vue
index 10186a2e..00a76880 100644
--- a/packages/soy-ui/src/components/context-menu/context-menu-option.vue
+++ b/packages/soy-ui/src/components/context-menu/source/context-menu-option.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { ContextMenuGroup, ContextMenuPortal, ContextMenuSub, useEmitAsProps } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import SContextMenuLabel from '../menu/menu-label.vue';
-import SContextMenuSeparator from '../menu/menu-separator.vue';
-import SContextMenuItem from '../menu/menu-item.vue';
-import SContextMenuItemLink from '../menu/menu-item-link.vue';
-import SContextMenuSubTrigger from '../menu/menu-sub-trigger.vue';
-import type { MenuOptionData } from '../menu/types';
+import SContextMenuLabel from '../../menu/source/menu-label.vue';
+import SContextMenuSeparator from '../../menu/source/menu-separator.vue';
+import SContextMenuItem from '../../menu/source/menu-item.vue';
+import SContextMenuItemLink from '../../menu/source/menu-item-link.vue';
+import SContextMenuSubTrigger from '../../menu/source/menu-sub-trigger.vue';
+import type { MenuOptionData } from '../../menu/types';
+import type { ContextMenuOptionEmits, ContextMenuOptionProps } from '../types';
 import SContextMenuSubContent from './context-menu-sub-content.vue';
-import type { ContextMenuOptionEmits, ContextMenuOptionProps } from './types';
 
 defineOptions({
   name: 'SContextMenuOption'
diff --git a/packages/soy-ui/src/components/context-menu/context-menu-portal-content.vue b/packages/soy-ui/src/components/context-menu/source/context-menu-portal-content.vue
similarity index 90%
rename from packages/soy-ui/src/components/context-menu/context-menu-portal-content.vue
rename to packages/soy-ui/src/components/context-menu/source/context-menu-portal-content.vue
index e7d82469..f5895bbd 100644
--- a/packages/soy-ui/src/components/context-menu/context-menu-portal-content.vue
+++ b/packages/soy-ui/src/components/context-menu/source/context-menu-portal-content.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ContextMenuPortal, useForwardPropsEmits } from '@soybean-ui/primitives';
-import SContextMenuArrow from '../menu/menu-arrow.vue';
+import SContextMenuArrow from '../../menu/source/menu-arrow.vue';
+import type { ContextMenuPortalContentEmits, ContextMenuPortalContentProps } from '../types';
 import SContextMenuContent from './context-menu-content.vue';
-import type { ContextMenuPortalContentEmits, ContextMenuPortalContentProps } from './types';
 
 defineOptions({
   name: 'SContextMenuPortalContent'
diff --git a/packages/soy-ui/src/components/context-menu/context-menu-radio.vue b/packages/soy-ui/src/components/context-menu/source/context-menu-radio.vue
similarity index 100%
rename from packages/soy-ui/src/components/context-menu/context-menu-radio.vue
rename to packages/soy-ui/src/components/context-menu/source/context-menu-radio.vue
diff --git a/packages/soy-ui/src/components/context-menu/context-menu-sub-content.vue b/packages/soy-ui/src/components/context-menu/source/context-menu-sub-content.vue
similarity index 97%
rename from packages/soy-ui/src/components/context-menu/context-menu-sub-content.vue
rename to packages/soy-ui/src/components/context-menu/source/context-menu-sub-content.vue
index f2f8e0c0..4a2c6d8f 100644
--- a/packages/soy-ui/src/components/context-menu/context-menu-sub-content.vue
+++ b/packages/soy-ui/src/components/context-menu/source/context-menu-sub-content.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { ContextMenuSubContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from './types';
+import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from '../types';
 
 defineOptions({
   name: 'SContextMenuSubContent'
diff --git a/packages/soy-ui/src/components/context-menu/context-menu.vue b/packages/soy-ui/src/components/context-menu/source/context-menu.vue
similarity index 93%
rename from packages/soy-ui/src/components/context-menu/context-menu.vue
rename to packages/soy-ui/src/components/context-menu/source/context-menu.vue
index aa2211fa..8d174fc1 100644
--- a/packages/soy-ui/src/components/context-menu/context-menu.vue
+++ b/packages/soy-ui/src/components/context-menu/source/context-menu.vue
@@ -10,11 +10,11 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import type { ThemeSize } from '../../types';
-import type { MenuOptionData } from '../menu/types';
+import type { ThemeSize } from '../../../types';
+import type { MenuOptionData } from '../../menu/types';
+import type { ContextMenuEmits, ContextMenuProps } from '../types';
 import SContextMenuPortalContent from './context-menu-portal-content.vue';
 import SContextMenuOption from './context-menu-option.vue';
-import type { ContextMenuEmits, ContextMenuProps } from './types';
 
 defineOptions({
   name: 'SContextMenu'
diff --git a/examples/src/ui/dialog.vue b/packages/soy-ui/src/components/dialog/demos/dialog.vue
similarity index 100%
rename from examples/src/ui/dialog.vue
rename to packages/soy-ui/src/components/dialog/demos/dialog.vue
diff --git a/packages/soy-ui/src/components/dialog/demos/index.ts b/packages/soy-ui/src/components/dialog/demos/index.ts
new file mode 100644
index 00000000..251aa412
--- /dev/null
+++ b/packages/soy-ui/src/components/dialog/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoDialog from './dialog.vue';
+
+export { DemoDialog };
diff --git a/packages/soy-ui/src/components/dialog/index.ts b/packages/soy-ui/src/components/dialog/index.ts
index d97ca93c..f1b70110 100644
--- a/packages/soy-ui/src/components/dialog/index.ts
+++ b/packages/soy-ui/src/components/dialog/index.ts
@@ -4,14 +4,14 @@ import {
   DialogRoot as SDialogRoot,
   DialogTrigger as SDialogTrigger
 } from '@soybean-ui/primitives';
-import SDialog from './dialog.vue';
-import SDialogCloseIcon from './dialog-close-icon.vue';
-import SDialogContent from './dialog-content.vue';
-import SDialogDescription from './dialog-description.vue';
-import SDialogFooter from './dialog-footer.vue';
-import SDialogHeader from './dialog-header.vue';
-import SDialogOverlay from './dialog-overlay.vue';
-import SDialogTitle from './dialog-title.vue';
+import SDialog from './source/dialog.vue';
+import SDialogCloseIcon from './source/dialog-close-icon.vue';
+import SDialogContent from './source/dialog-content.vue';
+import SDialogDescription from './source/dialog-description.vue';
+import SDialogFooter from './source/dialog-footer.vue';
+import SDialogHeader from './source/dialog-header.vue';
+import SDialogOverlay from './source/dialog-overlay.vue';
+import SDialogTitle from './source/dialog-title.vue';
 
 export {
   SDialog,
diff --git a/packages/soy-ui/src/components/dialog/dialog-close-icon.vue b/packages/soy-ui/src/components/dialog/source/dialog-close-icon.vue
similarity index 84%
rename from packages/soy-ui/src/components/dialog/dialog-close-icon.vue
rename to packages/soy-ui/src/components/dialog/source/dialog-close-icon.vue
index 70f49549..36b06850 100644
--- a/packages/soy-ui/src/components/dialog/dialog-close-icon.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog-close-icon.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue';
 import { DialogClose } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
 import { X } from 'lucide-vue-next';
-import SButtonIcon from '../button/button-icon.vue';
-import type { DialogCloseIconProps } from './types';
+import SButtonIcon from '../../button/source/button-icon.vue';
+import type { DialogCloseIconProps } from '../types';
 
 defineOptions({
   name: 'SDialogCloseIcon'
diff --git a/packages/soy-ui/src/components/dialog/dialog-content.vue b/packages/soy-ui/src/components/dialog/source/dialog-content.vue
similarity index 90%
rename from packages/soy-ui/src/components/dialog/dialog-content.vue
rename to packages/soy-ui/src/components/dialog/source/dialog-content.vue
index 187963c4..45a512c9 100644
--- a/packages/soy-ui/src/components/dialog/dialog-content.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { DialogContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DialogContentEmits, DialogContentProps } from './types';
+import type { DialogContentEmits, DialogContentProps } from '../types';
 
 defineOptions({
   name: 'SDialogContent'
diff --git a/packages/soy-ui/src/components/dialog/dialog-description.vue b/packages/soy-ui/src/components/dialog/source/dialog-description.vue
similarity index 90%
rename from packages/soy-ui/src/components/dialog/dialog-description.vue
rename to packages/soy-ui/src/components/dialog/source/dialog-description.vue
index 083db389..1885acf8 100644
--- a/packages/soy-ui/src/components/dialog/dialog-description.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog-description.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { DialogDescription } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DialogDescriptionProps } from './types';
+import type { DialogDescriptionProps } from '../types';
 
 defineOptions({
   name: 'SDialogDescription'
diff --git a/packages/soy-ui/src/components/dialog/dialog-footer.vue b/packages/soy-ui/src/components/dialog/source/dialog-footer.vue
similarity index 89%
rename from packages/soy-ui/src/components/dialog/dialog-footer.vue
rename to packages/soy-ui/src/components/dialog/source/dialog-footer.vue
index 50db14db..9925b0eb 100644
--- a/packages/soy-ui/src/components/dialog/dialog-footer.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog-footer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DialogFooterProps } from './types';
+import type { DialogFooterProps } from '../types';
 
 defineOptions({
   name: 'SDialogFooter'
diff --git a/packages/soy-ui/src/components/dialog/dialog-header.vue b/packages/soy-ui/src/components/dialog/source/dialog-header.vue
similarity index 89%
rename from packages/soy-ui/src/components/dialog/dialog-header.vue
rename to packages/soy-ui/src/components/dialog/source/dialog-header.vue
index f06b85aa..c2b34bca 100644
--- a/packages/soy-ui/src/components/dialog/dialog-header.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog-header.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DialogHeaderProps } from './types';
+import type { DialogHeaderProps } from '../types';
 
 defineOptions({
   name: 'SDialogHeader'
diff --git a/packages/soy-ui/src/components/dialog/dialog-overlay.vue b/packages/soy-ui/src/components/dialog/source/dialog-overlay.vue
similarity index 90%
rename from packages/soy-ui/src/components/dialog/dialog-overlay.vue
rename to packages/soy-ui/src/components/dialog/source/dialog-overlay.vue
index ea09c6ae..c529f57d 100644
--- a/packages/soy-ui/src/components/dialog/dialog-overlay.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog-overlay.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { DialogOverlay } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DialogOverlayProps } from './types';
+import type { DialogOverlayProps } from '../types';
 
 defineOptions({
   name: 'SDialogOverlay'
diff --git a/packages/soy-ui/src/components/dialog/dialog-title.vue b/packages/soy-ui/src/components/dialog/source/dialog-title.vue
similarity index 90%
rename from packages/soy-ui/src/components/dialog/dialog-title.vue
rename to packages/soy-ui/src/components/dialog/source/dialog-title.vue
index 4f75b64f..6c2e1f61 100644
--- a/packages/soy-ui/src/components/dialog/dialog-title.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog-title.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { DialogTitle } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DialogTitleProps } from './types';
+import type { DialogTitleProps } from '../types';
 
 defineOptions({
   name: 'SDialogTitle'
diff --git a/packages/soy-ui/src/components/dialog/dialog.vue b/packages/soy-ui/src/components/dialog/source/dialog.vue
similarity index 97%
rename from packages/soy-ui/src/components/dialog/dialog.vue
rename to packages/soy-ui/src/components/dialog/source/dialog.vue
index 42c7485b..aaf05133 100644
--- a/packages/soy-ui/src/components/dialog/dialog.vue
+++ b/packages/soy-ui/src/components/dialog/source/dialog.vue
@@ -8,6 +8,7 @@ import {
   useOmitEmitAsProps,
   usePickForwardProps
 } from '@soybean-ui/primitives';
+import type { DialogEmits, DialogProps } from '../types';
 import SDialogOverlay from './dialog-overlay.vue';
 import SDialogContent from './dialog-content.vue';
 import SDialogHeader from './dialog-header.vue';
@@ -15,7 +16,6 @@ import SDialogTitle from './dialog-title.vue';
 import SDialogDescription from './dialog-description.vue';
 import SDialogCloseIcon from './dialog-close-icon.vue';
 import SDialogFooter from './dialog-footer.vue';
-import type { DialogEmits, DialogProps } from './types';
 
 defineOptions({
   name: 'SDialog'
diff --git a/examples/src/ui/drawer.vue b/packages/soy-ui/src/components/drawer/demos/drawer.vue
similarity index 100%
rename from examples/src/ui/drawer.vue
rename to packages/soy-ui/src/components/drawer/demos/drawer.vue
diff --git a/packages/soy-ui/src/components/drawer/demos/index.ts b/packages/soy-ui/src/components/drawer/demos/index.ts
new file mode 100644
index 00000000..fa7c85d6
--- /dev/null
+++ b/packages/soy-ui/src/components/drawer/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoDrawer from './drawer.vue';
+
+export { DemoDrawer };
diff --git a/packages/soy-ui/src/components/drawer/index.ts b/packages/soy-ui/src/components/drawer/index.ts
index af7cfd2b..7daeff10 100644
--- a/packages/soy-ui/src/components/drawer/index.ts
+++ b/packages/soy-ui/src/components/drawer/index.ts
@@ -4,16 +4,16 @@ import {
   DrawerRoot as SDrawerRoot,
   DrawerTrigger as SDrawerTrigger
 } from '@soybean-ui/primitives';
-import SDrawerCloseIcon from '../dialog/dialog-close-icon.vue';
-import SDrawerDescription from '../dialog/dialog-description.vue';
-import SDrawerFooter from '../dialog/dialog-footer.vue';
-import SDrawerHeader from '../dialog/dialog-header.vue';
-import SDrawerTitle from '../dialog/dialog-title.vue';
-import SDrawer from './drawer.vue';
-import SDrawerContentBody from './drawer-content-body.vue';
-import SDrawerContent from './drawer-content.vue';
-import SDrawerKnob from './drawer-knob.vue';
-import SDrawerOverlay from './drawer-overlay.vue';
+import SDrawerCloseIcon from '../dialog/source/dialog-close-icon.vue';
+import SDrawerDescription from '../dialog/source/dialog-description.vue';
+import SDrawerFooter from '../dialog/source/dialog-footer.vue';
+import SDrawerHeader from '../dialog/source/dialog-header.vue';
+import SDrawerTitle from '../dialog/source/dialog-title.vue';
+import SDrawer from './source/drawer.vue';
+import SDrawerContentBody from './source/drawer-content-body.vue';
+import SDrawerContent from './source/drawer-content.vue';
+import SDrawerKnob from './source/drawer-knob.vue';
+import SDrawerOverlay from './source/drawer-overlay.vue';
 
 export {
   SDrawer,
diff --git a/packages/soy-ui/src/components/drawer/drawer-content-body.vue b/packages/soy-ui/src/components/drawer/source/drawer-content-body.vue
similarity index 88%
rename from packages/soy-ui/src/components/drawer/drawer-content-body.vue
rename to packages/soy-ui/src/components/drawer/source/drawer-content-body.vue
index 522f955f..1cea2de8 100644
--- a/packages/soy-ui/src/components/drawer/drawer-content-body.vue
+++ b/packages/soy-ui/src/components/drawer/source/drawer-content-body.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, drawerVariants } from '@soybean-ui/variants';
-import type { DrawerContentBodyProps } from './types';
+import type { DrawerContentBodyProps } from '../types';
 
 defineOptions({
   name: 'SDrawerContentBody'
diff --git a/packages/soy-ui/src/components/drawer/drawer-content.vue b/packages/soy-ui/src/components/drawer/source/drawer-content.vue
similarity index 90%
rename from packages/soy-ui/src/components/drawer/drawer-content.vue
rename to packages/soy-ui/src/components/drawer/source/drawer-content.vue
index 7fc7c879..97ff60dc 100644
--- a/packages/soy-ui/src/components/drawer/drawer-content.vue
+++ b/packages/soy-ui/src/components/drawer/source/drawer-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { DrawerContent } from '@soybean-ui/primitives';
 import { cn, drawerVariants } from '@soybean-ui/variants';
-import type { DrawerContentProps } from './types';
+import type { DrawerContentProps } from '../types';
 
 defineOptions({
   name: 'SDrawerContent'
diff --git a/packages/soy-ui/src/components/drawer/drawer-footer.vue b/packages/soy-ui/src/components/drawer/source/drawer-footer.vue
similarity index 89%
rename from packages/soy-ui/src/components/drawer/drawer-footer.vue
rename to packages/soy-ui/src/components/drawer/source/drawer-footer.vue
index fb935928..39373840 100644
--- a/packages/soy-ui/src/components/drawer/drawer-footer.vue
+++ b/packages/soy-ui/src/components/drawer/source/drawer-footer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DrawerFooterProps } from './types';
+import type { DrawerFooterProps } from '../types';
 
 defineOptions({
   name: 'SDrawerFooter'
diff --git a/packages/soy-ui/src/components/drawer/drawer-knob.vue b/packages/soy-ui/src/components/drawer/source/drawer-knob.vue
similarity index 88%
rename from packages/soy-ui/src/components/drawer/drawer-knob.vue
rename to packages/soy-ui/src/components/drawer/source/drawer-knob.vue
index 3d22f573..47b0b664 100644
--- a/packages/soy-ui/src/components/drawer/drawer-knob.vue
+++ b/packages/soy-ui/src/components/drawer/source/drawer-knob.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, drawerVariants } from '@soybean-ui/variants';
-import type { DrawerKnobProps } from './types';
+import type { DrawerKnobProps } from '../types';
 
 defineOptions({
   name: 'SDrawerKnob'
diff --git a/packages/soy-ui/src/components/drawer/drawer-overlay.vue b/packages/soy-ui/src/components/drawer/source/drawer-overlay.vue
similarity index 89%
rename from packages/soy-ui/src/components/drawer/drawer-overlay.vue
rename to packages/soy-ui/src/components/drawer/source/drawer-overlay.vue
index fe94e362..3d5a1619 100644
--- a/packages/soy-ui/src/components/drawer/drawer-overlay.vue
+++ b/packages/soy-ui/src/components/drawer/source/drawer-overlay.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { DrawerOverlay } from '@soybean-ui/primitives';
 import { cn, dialogVariants } from '@soybean-ui/variants';
-import type { DrawerOverlayProps } from './types';
+import type { DrawerOverlayProps } from '../types';
 
 defineOptions({
   name: 'SDrawerOverlay'
diff --git a/packages/soy-ui/src/components/drawer/drawer.vue b/packages/soy-ui/src/components/drawer/source/drawer.vue
similarity index 98%
rename from packages/soy-ui/src/components/drawer/drawer.vue
rename to packages/soy-ui/src/components/drawer/source/drawer.vue
index 78f5620a..3557eae2 100644
--- a/packages/soy-ui/src/components/drawer/drawer.vue
+++ b/packages/soy-ui/src/components/drawer/source/drawer.vue
@@ -8,12 +8,12 @@ import {
   useForwardPropsEmits,
   useOmitForwardProps
 } from '@soybean-ui/primitives';
-import { SDialogCloseIcon, SDialogDescription, SDialogFooter, SDialogHeader, SDialogTitle } from '../dialog';
+import { SDialogCloseIcon, SDialogDescription, SDialogFooter, SDialogHeader, SDialogTitle } from '../../dialog';
+import type { DrawerEmits, DrawerProps } from '../types';
 import SDrawerOverlay from './drawer-overlay.vue';
 import SDrawerContent from './drawer-content.vue';
 import SDrawerContentBody from './drawer-content-body.vue';
 import SDrawerKnob from './drawer-knob.vue';
-import type { DrawerEmits, DrawerProps } from './types';
 
 defineOptions({
   name: 'SDrawer'
diff --git a/examples/src/ui/dropdown-menu.vue b/packages/soy-ui/src/components/dropdown-menu/demos/dropdown-menu.vue
similarity index 100%
rename from examples/src/ui/dropdown-menu.vue
rename to packages/soy-ui/src/components/dropdown-menu/demos/dropdown-menu.vue
diff --git a/packages/soy-ui/src/components/dropdown-menu/demos/index.ts b/packages/soy-ui/src/components/dropdown-menu/demos/index.ts
new file mode 100644
index 00000000..779e9538
--- /dev/null
+++ b/packages/soy-ui/src/components/dropdown-menu/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoDropdownMenu from './dropdown-menu.vue';
+
+export { DemoDropdownMenu };
diff --git a/packages/soy-ui/src/components/dropdown-menu/index.ts b/packages/soy-ui/src/components/dropdown-menu/index.ts
index 2b45301f..52631034 100644
--- a/packages/soy-ui/src/components/dropdown-menu/index.ts
+++ b/packages/soy-ui/src/components/dropdown-menu/index.ts
@@ -1,6 +1,6 @@
-import SDropdownMenu from './dropdown-menu.vue';
-import SDropdownMenuCheckbox from './dropdown-menu-checkbox.vue';
-import SDropdownMenuRadio from './dropdown-menu-radio.vue';
+import SDropdownMenu from './source/dropdown-menu.vue';
+import SDropdownMenuCheckbox from './source/dropdown-menu-checkbox.vue';
+import SDropdownMenuRadio from './source/dropdown-menu-radio.vue';
 
 export { SDropdownMenu, SDropdownMenuCheckbox, SDropdownMenuRadio };
 
diff --git a/packages/soy-ui/src/components/dropdown-menu/dropdown-menu-checkbox.vue b/packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu-checkbox.vue
similarity index 91%
rename from packages/soy-ui/src/components/dropdown-menu/dropdown-menu-checkbox.vue
rename to packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu-checkbox.vue
index 8c8ebb57..77256ebe 100644
--- a/packages/soy-ui/src/components/dropdown-menu/dropdown-menu-checkbox.vue
+++ b/packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu-checkbox.vue
@@ -11,10 +11,10 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import type { ThemeSize } from '../../types';
-import SMenuCheckbox from '../menu/menu-checkbox.vue';
-import type { MenuOptionData } from '../menu/types';
-import type { DropdownMenuCheckboxEmits, DropdownMenuCheckboxProps } from './types';
+import type { ThemeSize } from '../../../types';
+import SMenuCheckbox from '../../menu/source/menu-checkbox.vue';
+import type { MenuOptionData } from '../../menu/types';
+import type { DropdownMenuCheckboxEmits, DropdownMenuCheckboxProps } from '../types';
 
 defineOptions({
   name: 'SDropdownMenuCheckbox'
diff --git a/packages/soy-ui/src/components/dropdown-menu/dropdown-menu-radio.vue b/packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu-radio.vue
similarity index 92%
rename from packages/soy-ui/src/components/dropdown-menu/dropdown-menu-radio.vue
rename to packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu-radio.vue
index e453841f..38a32571 100644
--- a/packages/soy-ui/src/components/dropdown-menu/dropdown-menu-radio.vue
+++ b/packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu-radio.vue
@@ -11,10 +11,10 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import type { ThemeSize } from '../../types';
-import SMenuRadio from '../menu/menu-radio.vue';
-import type { MenuOptionData } from '../menu/types';
-import type { DropdownMenuRadioEmits, DropdownMenuRadioProps } from './types';
+import type { ThemeSize } from '../../../types';
+import SMenuRadio from '../../menu/source/menu-radio.vue';
+import type { MenuOptionData } from '../../menu/types';
+import type { DropdownMenuRadioEmits, DropdownMenuRadioProps } from '../types';
 
 defineOptions({
   name: 'SDropdownMenuRadio'
diff --git a/packages/soy-ui/src/components/dropdown-menu/dropdown-menu.vue b/packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu.vue
similarity index 90%
rename from packages/soy-ui/src/components/dropdown-menu/dropdown-menu.vue
rename to packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu.vue
index 89bd2f79..1329e232 100644
--- a/packages/soy-ui/src/components/dropdown-menu/dropdown-menu.vue
+++ b/packages/soy-ui/src/components/dropdown-menu/source/dropdown-menu.vue
@@ -11,10 +11,10 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import type { ThemeSize } from '../../types';
-import SMenu from '../menu/menu.vue';
-import type { MenuOptionData } from '../menu/types';
-import type { DropdownMenuEmits, DropdownMenuProps } from './types';
+import type { ThemeSize } from '../../../types';
+import SMenu from '../../menu/source/menu.vue';
+import type { MenuOptionData } from '../../menu/types';
+import type { DropdownMenuEmits, DropdownMenuProps } from '../types';
 
 defineOptions({
   name: 'SDropdownMenu'
diff --git a/examples/src/ui/form.vue b/packages/soy-ui/src/components/form/demos/form.vue
similarity index 100%
rename from examples/src/ui/form.vue
rename to packages/soy-ui/src/components/form/demos/form.vue
diff --git a/packages/soy-ui/src/components/form/demos/index.ts b/packages/soy-ui/src/components/form/demos/index.ts
new file mode 100644
index 00000000..9b46a4be
--- /dev/null
+++ b/packages/soy-ui/src/components/form/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoForm from './form.vue';
+
+export { DemoForm };
diff --git a/packages/soy-ui/src/components/form/index.ts b/packages/soy-ui/src/components/form/index.ts
index 05ace214..bfde7270 100644
--- a/packages/soy-ui/src/components/form/index.ts
+++ b/packages/soy-ui/src/components/form/index.ts
@@ -1,11 +1,11 @@
 import { FieldArray, useForm } from 'vee-validate';
-import SFormControl from './form-control.vue';
-import SFormDescription from './form-description.vue';
-import SFormFieldArray from './form-field-array.vue';
-import SFormField from './form-filed.vue';
-import SFormItem from './form-item.vue';
-import SFormLabel from './form-label.vue';
-import SFormMessage from './form-message.vue';
+import SFormControl from './source/form-control.vue';
+import SFormDescription from './source/form-description.vue';
+import SFormFieldArray from './source/form-field-array.vue';
+import SFormField from './source/form-filed.vue';
+import SFormItem from './source/form-item.vue';
+import SFormLabel from './source/form-label.vue';
+import SFormMessage from './source/form-message.vue';
 import { FORM_ITEM_INJECTION_KEY } from './hooks';
 
 export {
diff --git a/packages/soy-ui/src/components/form/form-control.vue b/packages/soy-ui/src/components/form/source/form-control.vue
similarity index 93%
rename from packages/soy-ui/src/components/form/form-control.vue
rename to packages/soy-ui/src/components/form/source/form-control.vue
index 1a47f93b..e55507d5 100644
--- a/packages/soy-ui/src/components/form/form-control.vue
+++ b/packages/soy-ui/src/components/form/source/form-control.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Slot } from '@soybean-ui/primitives';
-import { useFormField } from './hooks';
+import { useFormField } from '../hooks';
 
 defineOptions({
   name: 'SFormControl'
diff --git a/packages/soy-ui/src/components/form/form-description.vue b/packages/soy-ui/src/components/form/source/form-description.vue
similarity index 83%
rename from packages/soy-ui/src/components/form/form-description.vue
rename to packages/soy-ui/src/components/form/source/form-description.vue
index aa57dae1..ade32b2e 100644
--- a/packages/soy-ui/src/components/form/form-description.vue
+++ b/packages/soy-ui/src/components/form/source/form-description.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, formVariants } from '@soybean-ui/variants';
-import { useFormField } from './hooks';
-import type { FormDescriptionProps } from './types';
+import { useFormField } from '../hooks';
+import type { FormDescriptionProps } from '../types';
 
 defineOptions({
   name: 'SFormDescription'
diff --git a/packages/soy-ui/src/components/form/form-field-array.vue b/packages/soy-ui/src/components/form/source/form-field-array.vue
similarity index 92%
rename from packages/soy-ui/src/components/form/form-field-array.vue
rename to packages/soy-ui/src/components/form/source/form-field-array.vue
index 7a14700e..03b6e085 100644
--- a/packages/soy-ui/src/components/form/form-field-array.vue
+++ b/packages/soy-ui/src/components/form/source/form-field-array.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useForwardProps } from '@soybean-ui/primitives';
 import { FieldArray } from 'vee-validate';
+import type { FormFieldArrayProps } from '../types';
 import SFormField from './form-filed.vue';
-import type { FormFieldArrayProps } from './types';
 
 defineOptions({
   name: 'SFormFieldArray'
diff --git a/packages/soy-ui/src/components/form/form-filed.vue b/packages/soy-ui/src/components/form/source/form-filed.vue
similarity index 96%
rename from packages/soy-ui/src/components/form/form-filed.vue
rename to packages/soy-ui/src/components/form/source/form-filed.vue
index 09829f9d..2eeee210 100644
--- a/packages/soy-ui/src/components/form/form-filed.vue
+++ b/packages/soy-ui/src/components/form/source/form-filed.vue
@@ -2,12 +2,12 @@
 import { useForwardProps } from '@soybean-ui/primitives';
 import { Field } from 'vee-validate';
 import { vAutoAnimate } from '@formkit/auto-animate';
+import type { FormFieldProps } from '../types';
 import SFormItem from './form-item.vue';
 import SFormControl from './form-control.vue';
 import SFormLabel from './form-label.vue';
 import SFormDescription from './form-description.vue';
 import SFormMessage from './form-message.vue';
-import type { FormFieldProps } from './types';
 
 defineOptions({
   name: 'SFormField'
diff --git a/packages/soy-ui/src/components/form/form-item.vue b/packages/soy-ui/src/components/form/source/form-item.vue
similarity index 82%
rename from packages/soy-ui/src/components/form/form-item.vue
rename to packages/soy-ui/src/components/form/source/form-item.vue
index bba95ada..7872e0e5 100644
--- a/packages/soy-ui/src/components/form/form-item.vue
+++ b/packages/soy-ui/src/components/form/source/form-item.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, provide, useId } from 'vue';
 import { cn, formVariants } from '@soybean-ui/variants';
-import { FORM_ITEM_INJECTION_KEY } from './hooks';
-import type { FormItemProps } from './types';
+import { FORM_ITEM_INJECTION_KEY } from '../hooks';
+import type { FormItemProps } from '../types';
 
 defineOptions({
   name: 'SFormItem'
diff --git a/packages/soy-ui/src/components/form/form-label.vue b/packages/soy-ui/src/components/form/source/form-label.vue
similarity index 79%
rename from packages/soy-ui/src/components/form/form-label.vue
rename to packages/soy-ui/src/components/form/source/form-label.vue
index 8fd45750..78c0fb3b 100644
--- a/packages/soy-ui/src/components/form/form-label.vue
+++ b/packages/soy-ui/src/components/form/source/form-label.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, formVariants } from '@soybean-ui/variants';
-import SLabel from '../label/label.vue';
-import { useFormField } from './hooks';
-import type { FormLabelProps } from './types';
+import SLabel from '../../label/source/label.vue';
+import { useFormField } from '../hooks';
+import type { FormLabelProps } from '../types';
 
 defineOptions({
   name: 'SFormLabel'
diff --git a/packages/soy-ui/src/components/form/form-message.vue b/packages/soy-ui/src/components/form/source/form-message.vue
similarity index 85%
rename from packages/soy-ui/src/components/form/form-message.vue
rename to packages/soy-ui/src/components/form/source/form-message.vue
index 4fe359b1..9e244dad 100644
--- a/packages/soy-ui/src/components/form/form-message.vue
+++ b/packages/soy-ui/src/components/form/source/form-message.vue
@@ -2,8 +2,8 @@
 import { computed, toValue } from 'vue';
 import { cn, formVariants } from '@soybean-ui/variants';
 import { ErrorMessage } from 'vee-validate';
-import { useFormField } from './hooks';
-import type { FormMessageProps } from './types';
+import { useFormField } from '../hooks';
+import type { FormMessageProps } from '../types';
 
 defineOptions({
   name: 'SFormMessage'
diff --git a/examples/src/ui/hover-card.vue b/packages/soy-ui/src/components/hover-card/demos/hover-card.vue
similarity index 100%
rename from examples/src/ui/hover-card.vue
rename to packages/soy-ui/src/components/hover-card/demos/hover-card.vue
diff --git a/packages/soy-ui/src/components/hover-card/demos/index.ts b/packages/soy-ui/src/components/hover-card/demos/index.ts
new file mode 100644
index 00000000..d5cf575f
--- /dev/null
+++ b/packages/soy-ui/src/components/hover-card/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoHoverCard from './hover-card.vue';
+
+export { DemoHoverCard };
diff --git a/packages/soy-ui/src/components/hover-card/index.ts b/packages/soy-ui/src/components/hover-card/index.ts
index c054162c..04d60176 100644
--- a/packages/soy-ui/src/components/hover-card/index.ts
+++ b/packages/soy-ui/src/components/hover-card/index.ts
@@ -1,7 +1,7 @@
 import { HoverCardRoot as SHoverCardRoot, HoverCardTrigger as SHoverCardTrigger } from '@soybean-ui/primitives';
-import SHoverCard from './hover-card.vue';
-import SHoverCardArrow from './hover-card-arrow.vue';
-import SHoverCardContent from './hover-card-content.vue';
+import SHoverCard from './source/hover-card.vue';
+import SHoverCardArrow from './source/hover-card-arrow.vue';
+import SHoverCardContent from './source/hover-card-content.vue';
 
 export { SHoverCard, SHoverCardArrow, SHoverCardContent, SHoverCardRoot, SHoverCardTrigger };
 
diff --git a/packages/soy-ui/src/components/hover-card/hover-card-arrow.vue b/packages/soy-ui/src/components/hover-card/source/hover-card-arrow.vue
similarity index 91%
rename from packages/soy-ui/src/components/hover-card/hover-card-arrow.vue
rename to packages/soy-ui/src/components/hover-card/source/hover-card-arrow.vue
index 8758e3c7..23f767d6 100644
--- a/packages/soy-ui/src/components/hover-card/hover-card-arrow.vue
+++ b/packages/soy-ui/src/components/hover-card/source/hover-card-arrow.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { HoverCardArrow } from '@soybean-ui/primitives';
 import { cn, popoverVariants } from '@soybean-ui/variants';
-import type { HoverCardArrowProps } from './types';
+import type { HoverCardArrowProps } from '../types';
 
 defineOptions({
   name: 'SHoverCardArrow'
diff --git a/packages/soy-ui/src/components/hover-card/hover-card-content.vue b/packages/soy-ui/src/components/hover-card/source/hover-card-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/hover-card/hover-card-content.vue
rename to packages/soy-ui/src/components/hover-card/source/hover-card-content.vue
index ff77537a..7f2fea11 100644
--- a/packages/soy-ui/src/components/hover-card/hover-card-content.vue
+++ b/packages/soy-ui/src/components/hover-card/source/hover-card-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { HoverCardContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, popoverVariants } from '@soybean-ui/variants';
-import type { HoverCardContentEmits, HoverCardContentProps } from './types';
+import type { HoverCardContentEmits, HoverCardContentProps } from '../types';
 
 defineOptions({
   name: 'SHoverCardContent'
diff --git a/packages/soy-ui/src/components/hover-card/hover-card.vue b/packages/soy-ui/src/components/hover-card/source/hover-card.vue
similarity index 96%
rename from packages/soy-ui/src/components/hover-card/hover-card.vue
rename to packages/soy-ui/src/components/hover-card/source/hover-card.vue
index 0dbde8b9..3732c8f7 100644
--- a/packages/soy-ui/src/components/hover-card/hover-card.vue
+++ b/packages/soy-ui/src/components/hover-card/source/hover-card.vue
@@ -8,9 +8,9 @@ import {
   useOmitEmitAsProps,
   usePickForwardProps
 } from '@soybean-ui/primitives';
+import type { HoverCardEmits, HoverCardProps } from '../types';
 import SHoverCardContent from './hover-card-content.vue';
 import SHoverCardArrow from './hover-card-arrow.vue';
-import type { HoverCardEmits, HoverCardProps } from './types';
 
 defineOptions({
   name: 'SHoverCard'
diff --git a/packages/soy-ui/src/components/input/demos/index.ts b/packages/soy-ui/src/components/input/demos/index.ts
new file mode 100644
index 00000000..8be3f631
--- /dev/null
+++ b/packages/soy-ui/src/components/input/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoInput from './input.vue';
+
+export { DemoInput };
diff --git a/examples/src/ui/input.vue b/packages/soy-ui/src/components/input/demos/input.vue
similarity index 100%
rename from examples/src/ui/input.vue
rename to packages/soy-ui/src/components/input/demos/input.vue
diff --git a/packages/soy-ui/src/components/input/index.ts b/packages/soy-ui/src/components/input/index.ts
index f7cb6ab4..a3454b9d 100644
--- a/packages/soy-ui/src/components/input/index.ts
+++ b/packages/soy-ui/src/components/input/index.ts
@@ -1,4 +1,4 @@
-import SInput from './input.vue';
+import SInput from './source/input.vue';
 
 export { SInput };
 
diff --git a/packages/soy-ui/src/components/input/input.vue b/packages/soy-ui/src/components/input/source/input.vue
similarity index 92%
rename from packages/soy-ui/src/components/input/input.vue
rename to packages/soy-ui/src/components/input/source/input.vue
index 47c4a180..0c665203 100644
--- a/packages/soy-ui/src/components/input/input.vue
+++ b/packages/soy-ui/src/components/input/source/input.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useForwardProps } from '@soybean-ui/primitives';
 import { cn, inputVariants } from '@soybean-ui/variants';
-import type { InputEmits, InputProps } from './types';
+import type { InputEmits, InputProps } from '../types';
 
 defineOptions({
   name: 'SInput'
diff --git a/packages/soy-ui/src/components/keyboard-key/demos/index.ts b/packages/soy-ui/src/components/keyboard-key/demos/index.ts
new file mode 100644
index 00000000..6257eca3
--- /dev/null
+++ b/packages/soy-ui/src/components/keyboard-key/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoKeyboardKey from './keyboard-key.vue';
+
+export { DemoKeyboardKey };
diff --git a/examples/src/ui/keyboard-key.vue b/packages/soy-ui/src/components/keyboard-key/demos/keyboard-key.vue
similarity index 100%
rename from examples/src/ui/keyboard-key.vue
rename to packages/soy-ui/src/components/keyboard-key/demos/keyboard-key.vue
diff --git a/packages/soy-ui/src/components/keyboard-key/index.ts b/packages/soy-ui/src/components/keyboard-key/index.ts
index c6a6ca9b..23aecc1b 100644
--- a/packages/soy-ui/src/components/keyboard-key/index.ts
+++ b/packages/soy-ui/src/components/keyboard-key/index.ts
@@ -1,5 +1,5 @@
-import SKeyboardKey from './keyboard-key.vue';
-import SKeyboardKeyGroup from './keyboard-key-group.vue';
+import SKeyboardKey from './source/keyboard-key.vue';
+import SKeyboardKeyGroup from './source/keyboard-key-group.vue';
 
 export { SKeyboardKey, SKeyboardKeyGroup };
 
diff --git a/packages/soy-ui/src/components/keyboard-key/keyboard-key-group.vue b/packages/soy-ui/src/components/keyboard-key/source/keyboard-key-group.vue
similarity index 93%
rename from packages/soy-ui/src/components/keyboard-key/keyboard-key-group.vue
rename to packages/soy-ui/src/components/keyboard-key/source/keyboard-key-group.vue
index dbd09609..a79eb786 100644
--- a/packages/soy-ui/src/components/keyboard-key/keyboard-key-group.vue
+++ b/packages/soy-ui/src/components/keyboard-key/source/keyboard-key-group.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends KeyboardKeyValue | KeyboardKeyValue[]">
 import { computed } from 'vue';
 import { cn, keyboardKeyVariants } from '@soybean-ui/variants';
+import type { KeyboardKeyGroupProps, KeyboardKeyValue } from '../types';
 import SKeyboardKey from './keyboard-key.vue';
-import type { KeyboardKeyGroupProps, KeyboardKeyValue } from './types';
 
 defineOptions({
   name: 'SKeyboardKeyGroup'
diff --git a/packages/soy-ui/src/components/keyboard-key/keyboard-key.vue b/packages/soy-ui/src/components/keyboard-key/source/keyboard-key.vue
similarity index 88%
rename from packages/soy-ui/src/components/keyboard-key/keyboard-key.vue
rename to packages/soy-ui/src/components/keyboard-key/source/keyboard-key.vue
index 0c30cd5a..5836547f 100644
--- a/packages/soy-ui/src/components/keyboard-key/keyboard-key.vue
+++ b/packages/soy-ui/src/components/keyboard-key/source/keyboard-key.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts" generic="T extends KeyboardKeyValue | KeyboardKeyValue[]">
 import { computed } from 'vue';
 import { cn, keyboardKeyVariants } from '@soybean-ui/variants';
-import { useKeyboardKey } from './shared';
-import type { KeyboardKeyProps, KeyboardKeyValue } from './types';
+import { useKeyboardKey } from '../shared';
+import type { KeyboardKeyProps, KeyboardKeyValue } from '../types';
 
 defineOptions({
   name: 'SKeyboardKey'
diff --git a/packages/soy-ui/src/components/label/index.ts b/packages/soy-ui/src/components/label/index.ts
index 0c8faa38..c3958e6c 100644
--- a/packages/soy-ui/src/components/label/index.ts
+++ b/packages/soy-ui/src/components/label/index.ts
@@ -1,4 +1,4 @@
-import SLabel from './label.vue';
+import SLabel from './source/label.vue';
 
 export { SLabel };
 
diff --git a/packages/soy-ui/src/components/label/label.vue b/packages/soy-ui/src/components/label/source/label.vue
similarity index 90%
rename from packages/soy-ui/src/components/label/label.vue
rename to packages/soy-ui/src/components/label/source/label.vue
index c750f66d..d7975955 100644
--- a/packages/soy-ui/src/components/label/label.vue
+++ b/packages/soy-ui/src/components/label/source/label.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { Label } from '@soybean-ui/primitives';
 import { cn, labelVariants } from '@soybean-ui/variants';
-import type { LabelProps } from './types';
+import type { LabelProps } from '../types';
 
 defineOptions({
   name: 'SLabel'
diff --git a/packages/soy-ui/src/components/layout/demos/index.ts b/packages/soy-ui/src/components/layout/demos/index.ts
new file mode 100644
index 00000000..2eb3138d
--- /dev/null
+++ b/packages/soy-ui/src/components/layout/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoLayout from './layout.vue';
+
+export { DemoLayout };
diff --git a/examples/src/ui/layout.vue b/packages/soy-ui/src/components/layout/demos/layout.vue
similarity index 100%
rename from examples/src/ui/layout.vue
rename to packages/soy-ui/src/components/layout/demos/layout.vue
diff --git a/packages/soy-ui/src/components/layout/index.ts b/packages/soy-ui/src/components/layout/index.ts
index f81192e8..f368149b 100644
--- a/packages/soy-ui/src/components/layout/index.ts
+++ b/packages/soy-ui/src/components/layout/index.ts
@@ -1,9 +1,9 @@
-import SLayout from './layout.vue';
-import SLayoutMain from './layout-main.vue';
-import SLayoutHeader from './layout-header.vue';
-import SLayoutSidebar from './layout-sidebar.vue';
-import SLayoutRail from './layout-rail.vue';
-import SLayoutTrigger from './layout-trigger.vue';
+import SLayout from './source/layout.vue';
+import SLayoutMain from './source/layout-main.vue';
+import SLayoutHeader from './source/layout-header.vue';
+import SLayoutSidebar from './source/layout-sidebar.vue';
+import SLayoutRail from './source/layout-rail.vue';
+import SLayoutTrigger from './source/layout-trigger.vue';
 
 export { SLayout, SLayoutMain, SLayoutHeader, SLayoutSidebar, SLayoutRail, SLayoutTrigger };
 
diff --git a/packages/soy-ui/src/components/layout/layout-header.vue b/packages/soy-ui/src/components/layout/source/layout-header.vue
similarity index 88%
rename from packages/soy-ui/src/components/layout/layout-header.vue
rename to packages/soy-ui/src/components/layout/source/layout-header.vue
index 056c864c..c740bc10 100644
--- a/packages/soy-ui/src/components/layout/layout-header.vue
+++ b/packages/soy-ui/src/components/layout/source/layout-header.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, layoutVariants } from '@soybean-ui/variants';
-import type { LayoutHeaderProps } from './types';
+import type { LayoutHeaderProps } from '../types';
 
 defineOptions({
   name: 'SLayoutHeader'
diff --git a/packages/soy-ui/src/components/layout/layout-main.vue b/packages/soy-ui/src/components/layout/source/layout-main.vue
similarity index 90%
rename from packages/soy-ui/src/components/layout/layout-main.vue
rename to packages/soy-ui/src/components/layout/source/layout-main.vue
index b0e63b35..e06c0006 100644
--- a/packages/soy-ui/src/components/layout/layout-main.vue
+++ b/packages/soy-ui/src/components/layout/source/layout-main.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, layoutVariants } from '@soybean-ui/variants';
-import type { LayoutMainProps } from './types';
+import type { LayoutMainProps } from '../types';
 
 defineOptions({
   name: 'SLayoutMain'
diff --git a/packages/soy-ui/src/components/layout/layout-mobile.vue b/packages/soy-ui/src/components/layout/source/layout-mobile.vue
similarity index 81%
rename from packages/soy-ui/src/components/layout/layout-mobile.vue
rename to packages/soy-ui/src/components/layout/source/layout-mobile.vue
index ffbaa6f0..37af5693 100644
--- a/packages/soy-ui/src/components/layout/layout-mobile.vue
+++ b/packages/soy-ui/src/components/layout/source/layout-mobile.vue
@@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import { DialogPortal, DialogRoot } from '@soybean-ui/primitives';
 import { cn, layoutVariants } from '@soybean-ui/variants';
-import SDialogOverlay from '../dialog/dialog-overlay.vue';
-import SSheetContent from '../sheet/sheet-content.vue';
-import { useLayout } from './context';
-import type { LayoutMobileProps } from './types';
+import SDialogOverlay from '../../dialog/source/dialog-overlay.vue';
+import SSheetContent from '../../sheet/source/sheet-content.vue';
+import { useLayout } from '../context';
+import type { LayoutMobileProps } from '../types';
 
 defineOptions({
   name: 'SLayoutMobile',
diff --git a/packages/soy-ui/src/components/layout/layout-rail.vue b/packages/soy-ui/src/components/layout/source/layout-rail.vue
similarity index 90%
rename from packages/soy-ui/src/components/layout/layout-rail.vue
rename to packages/soy-ui/src/components/layout/source/layout-rail.vue
index 2727d5e1..10b9d916 100644
--- a/packages/soy-ui/src/components/layout/layout-rail.vue
+++ b/packages/soy-ui/src/components/layout/source/layout-rail.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, layoutVariants } from '@soybean-ui/variants';
-import type { LayoutRailProps } from './types';
+import type { LayoutRailProps } from '../types';
 
 defineOptions({
   name: 'SLayoutRail'
diff --git a/packages/soy-ui/src/components/layout/layout-root.vue b/packages/soy-ui/src/components/layout/source/layout-root.vue
similarity index 94%
rename from packages/soy-ui/src/components/layout/layout-root.vue
rename to packages/soy-ui/src/components/layout/source/layout-root.vue
index 931a2f45..0f3ee797 100644
--- a/packages/soy-ui/src/components/layout/layout-root.vue
+++ b/packages/soy-ui/src/components/layout/source/layout-root.vue
@@ -3,9 +3,9 @@ import { computed, ref } from 'vue';
 import type { CSSProperties, Ref } from 'vue';
 import { useMediaQuery, useVModel } from '@vueuse/core';
 import { cn, layoutVariants } from '@soybean-ui/variants';
-import { themeSizeRatio } from '../../constant';
-import { provideLayoutContext } from './context';
-import type { LayoutRootEmits, LayoutRootProps, SidebarState } from './types';
+import { themeSizeRatio } from '../../../constant';
+import { provideLayoutContext } from '../context';
+import type { LayoutRootEmits, LayoutRootProps, SidebarState } from '../types';
 
 defineOptions({
   name: 'SLayoutRoot'
diff --git a/packages/soy-ui/src/components/layout/layout-sidebar.vue b/packages/soy-ui/src/components/layout/source/layout-sidebar.vue
similarity index 93%
rename from packages/soy-ui/src/components/layout/layout-sidebar.vue
rename to packages/soy-ui/src/components/layout/source/layout-sidebar.vue
index 2235d931..b6930b30 100644
--- a/packages/soy-ui/src/components/layout/layout-sidebar.vue
+++ b/packages/soy-ui/src/components/layout/source/layout-sidebar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, layoutVariants } from '@soybean-ui/variants';
-import { useLayout } from './context';
+import { useLayout } from '../context';
+import type { LayoutSidebarProps } from '../types';
 import SLayoutMobile from './layout-mobile.vue';
-import type { LayoutSidebarProps } from './types';
 
 defineOptions({
   name: 'SLayoutSidebar',
diff --git a/packages/soy-ui/src/components/layout/layout-trigger.vue b/packages/soy-ui/src/components/layout/source/layout-trigger.vue
similarity index 77%
rename from packages/soy-ui/src/components/layout/layout-trigger.vue
rename to packages/soy-ui/src/components/layout/source/layout-trigger.vue
index 22281498..35406afd 100644
--- a/packages/soy-ui/src/components/layout/layout-trigger.vue
+++ b/packages/soy-ui/src/components/layout/source/layout-trigger.vue
@@ -2,9 +2,9 @@
 import { computed } from 'vue';
 import { cn, layoutVariants } from '@soybean-ui/variants';
 import { PanelLeft } from 'lucide-vue-next';
-import SButtonIcon from '../button/button-icon.vue';
-import { useLayout } from './context';
-import type { LayoutTriggerProps } from './types';
+import SButtonIcon from '../../button/source/button-icon.vue';
+import { useLayout } from '../context';
+import type { LayoutTriggerProps } from '../types';
 
 defineOptions({
   name: 'SLayoutTrigger'
diff --git a/packages/soy-ui/src/components/layout/layout.vue b/packages/soy-ui/src/components/layout/source/layout.vue
similarity index 96%
rename from packages/soy-ui/src/components/layout/layout.vue
rename to packages/soy-ui/src/components/layout/source/layout.vue
index 9cc2a3f5..53a7ea47 100644
--- a/packages/soy-ui/src/components/layout/layout.vue
+++ b/packages/soy-ui/src/components/layout/source/layout.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useCombinedPropsEmits, usePickForwardProps } from '@soybean-ui/primitives';
+import type { LayoutEmits, LayoutProps } from '../types';
 import SLayoutRoot from './layout-root.vue';
 import SLayoutMain from './layout-main.vue';
 import SLayoutHeader from './layout-header.vue';
 import SLayoutSidebar from './layout-sidebar.vue';
 import SLayoutRail from './layout-rail.vue';
-import type { LayoutEmits, LayoutProps } from './types';
 
 defineOptions({
   name: 'SLayout'
diff --git a/packages/soy-ui/src/components/link/index.ts b/packages/soy-ui/src/components/link/index.ts
index d5ba9f71..3b4c956e 100644
--- a/packages/soy-ui/src/components/link/index.ts
+++ b/packages/soy-ui/src/components/link/index.ts
@@ -1,4 +1,4 @@
-import SLink from './link.vue';
+import SLink from './source/link.vue';
 
 export { SLink };
 
diff --git a/packages/soy-ui/src/components/link/anchor-link.vue b/packages/soy-ui/src/components/link/source/anchor-link.vue
similarity index 95%
rename from packages/soy-ui/src/components/link/anchor-link.vue
rename to packages/soy-ui/src/components/link/source/anchor-link.vue
index 7e721fef..738f04fc 100644
--- a/packages/soy-ui/src/components/link/anchor-link.vue
+++ b/packages/soy-ui/src/components/link/source/anchor-link.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Primitive } from '@soybean-ui/primitives';
-import type { AnchorLinkProps } from './types';
+import type { AnchorLinkProps } from '../types';
 
 defineOptions({
   name: 'SAnchorLink'
diff --git a/packages/soy-ui/src/components/link/link.vue b/packages/soy-ui/src/components/link/source/link.vue
similarity index 96%
rename from packages/soy-ui/src/components/link/link.vue
rename to packages/soy-ui/src/components/link/source/link.vue
index 4ea8973d..65d08acb 100644
--- a/packages/soy-ui/src/components/link/link.vue
+++ b/packages/soy-ui/src/components/link/source/link.vue
@@ -3,7 +3,7 @@ import type { ComputedRef } from 'vue';
 import { RouterLink } from 'vue-router';
 import type { RouterLinkProps } from 'vue-router';
 import { usePickForwardProps } from '@soybean-ui/primitives';
-import type { LinkProps } from './types';
+import type { LinkProps } from '../types';
 import SAnchorLink from './anchor-link.vue';
 
 defineOptions({
diff --git a/packages/soy-ui/src/components/menu/index.ts b/packages/soy-ui/src/components/menu/index.ts
index c2192d54..0d22345e 100644
--- a/packages/soy-ui/src/components/menu/index.ts
+++ b/packages/soy-ui/src/components/menu/index.ts
@@ -1,23 +1,23 @@
 import { MenuPortal as SMenuPortal } from '@soybean-ui/primitives';
-import SMenuArrow from './menu-arrow.vue';
-import SMenuCheckboxGroup from './menu-checkbox-group.vue';
-import SMenuCheckboxItem from './menu-checkbox-item.vue';
-import SMenuCheckbox from './menu-checkbox.vue';
-import SMenuContent from './menu-content.vue';
-import SMenuItemIndicator from './menu-item-indicator.vue';
-import SMenuItemLink from './menu-item-link.vue';
-import SMenuItem from './menu-item.vue';
-import SMenuLabel from './menu-label.vue';
-import SMenuOption from './menu-option.vue';
-import SMenuPortalContent from './menu-portal-content.vue';
-import SMenuRadioGroup from './menu-radio-group.vue';
-import SMenuRadioItem from './menu-radio-item.vue';
-import SMenuRadio from './menu-radio.vue';
-import SMenuSeparator from './menu-separator.vue';
-import SMenuShortcut from './menu-shortcut.vue';
-import SMenuSubContent from './menu-sub-content.vue';
-import SMenuSubTrigger from './menu-sub-trigger.vue';
-import SMenu from './menu.vue';
+import SMenuArrow from './source/menu-arrow.vue';
+import SMenuCheckboxGroup from './source/menu-checkbox-group.vue';
+import SMenuCheckboxItem from './source/menu-checkbox-item.vue';
+import SMenuCheckbox from './source/menu-checkbox.vue';
+import SMenuContent from './source/menu-content.vue';
+import SMenuItemIndicator from './source/menu-item-indicator.vue';
+import SMenuItemLink from './source/menu-item-link.vue';
+import SMenuItem from './source/menu-item.vue';
+import SMenuLabel from './source/menu-label.vue';
+import SMenuOption from './source/menu-option.vue';
+import SMenuPortalContent from './source/menu-portal-content.vue';
+import SMenuRadioGroup from './source/menu-radio-group.vue';
+import SMenuRadioItem from './source/menu-radio-item.vue';
+import SMenuRadio from './source/menu-radio.vue';
+import SMenuSeparator from './source/menu-separator.vue';
+import SMenuShortcut from './source/menu-shortcut.vue';
+import SMenuSubContent from './source/menu-sub-content.vue';
+import SMenuSubTrigger from './source/menu-sub-trigger.vue';
+import SMenu from './source/menu.vue';
 
 export {
   SMenu,
diff --git a/packages/soy-ui/src/components/menu/menu-arrow.vue b/packages/soy-ui/src/components/menu/source/menu-arrow.vue
similarity index 91%
rename from packages/soy-ui/src/components/menu/menu-arrow.vue
rename to packages/soy-ui/src/components/menu/source/menu-arrow.vue
index 74619b02..bab00bdf 100644
--- a/packages/soy-ui/src/components/menu/menu-arrow.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-arrow.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { MenuArrow, useForwardProps } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenuArrowProps } from './types';
+import type { MenuArrowProps } from '../types';
 
 defineOptions({
   name: 'SMenuArrow'
diff --git a/packages/soy-ui/src/components/menu/menu-checkbox-group.vue b/packages/soy-ui/src/components/menu/source/menu-checkbox-group.vue
similarity index 98%
rename from packages/soy-ui/src/components/menu/menu-checkbox-group.vue
rename to packages/soy-ui/src/components/menu/source/menu-checkbox-group.vue
index dada8ded..a3a6c70c 100644
--- a/packages/soy-ui/src/components/menu/menu-checkbox-group.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-checkbox-group.vue
@@ -3,10 +3,10 @@ import { ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import { MenuGroup } from '@soybean-ui/primitives';
 import type { AcceptableValue, CheckAction } from '@soybean-ui/primitives';
+import type { MenuCheckboxGroupEmits, MenuCheckboxGroupProps, MenuOptionData } from '../types';
 import SMenuLabel from './menu-label.vue';
 import SMenuCheckboxItem from './menu-checkbox-item.vue';
 import SMenuSeparator from './menu-separator.vue';
-import type { MenuCheckboxGroupEmits, MenuCheckboxGroupProps, MenuOptionData } from './types';
 
 defineOptions({
   name: 'SMenuCheckboxGroup'
diff --git a/packages/soy-ui/src/components/menu/menu-checkbox-item.vue b/packages/soy-ui/src/components/menu/source/menu-checkbox-item.vue
similarity index 99%
rename from packages/soy-ui/src/components/menu/menu-checkbox-item.vue
rename to packages/soy-ui/src/components/menu/source/menu-checkbox-item.vue
index 05f38f66..74e89449 100644
--- a/packages/soy-ui/src/components/menu/menu-checkbox-item.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-checkbox-item.vue
@@ -3,9 +3,9 @@ import { computed } from 'vue';
 import { MenuCheckboxItem, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
 import { Check } from 'lucide-vue-next';
+import type { MenuCheckboxItemEmits, MenuCheckboxItemProps } from '../types';
 import SMenuItemIndicator from './menu-item-indicator.vue';
 import SMenuShortcut from './menu-shortcut.vue';
-import type { MenuCheckboxItemEmits, MenuCheckboxItemProps } from './types';
 
 defineOptions({
   name: 'SMenuCheckboxItem'
diff --git a/packages/soy-ui/src/components/menu/menu-checkbox.vue b/packages/soy-ui/src/components/menu/source/menu-checkbox.vue
similarity index 99%
rename from packages/soy-ui/src/components/menu/menu-checkbox.vue
rename to packages/soy-ui/src/components/menu/source/menu-checkbox.vue
index d8490320..c42a7603 100644
--- a/packages/soy-ui/src/components/menu/menu-checkbox.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-checkbox.vue
@@ -8,9 +8,9 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { MenuCheckboxEmits, MenuCheckboxProps, MenuOptionData } from '../types';
 import SMenuPortalContent from './menu-portal-content.vue';
 import SMenuCheckboxGroup from './menu-checkbox-group.vue';
-import type { MenuCheckboxEmits, MenuCheckboxProps, MenuOptionData } from './types';
 
 defineOptions({
   name: 'SMenuCheckbox'
diff --git a/packages/soy-ui/src/components/menu/menu-content.vue b/packages/soy-ui/src/components/menu/source/menu-content.vue
similarity index 90%
rename from packages/soy-ui/src/components/menu/menu-content.vue
rename to packages/soy-ui/src/components/menu/source/menu-content.vue
index a7734e87..dced551d 100644
--- a/packages/soy-ui/src/components/menu/menu-content.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { MenuContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenuContentEmits, MenuContentProps } from './types';
+import type { MenuContentEmits, MenuContentProps } from '../types';
 
 defineOptions({
   name: 'SMenuContent'
diff --git a/packages/soy-ui/src/components/menu/menu-item-indicator.vue b/packages/soy-ui/src/components/menu/source/menu-item-indicator.vue
similarity index 92%
rename from packages/soy-ui/src/components/menu/menu-item-indicator.vue
rename to packages/soy-ui/src/components/menu/source/menu-item-indicator.vue
index 51f17a16..929e3b2a 100644
--- a/packages/soy-ui/src/components/menu/menu-item-indicator.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-item-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { MenuItemIndicator, useForwardProps } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenuItemIndicatorProps } from './types';
+import type { MenuItemIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SMenuItemIndicator'
diff --git a/packages/soy-ui/src/components/menu/menu-item-link.vue b/packages/soy-ui/src/components/menu/source/menu-item-link.vue
similarity index 92%
rename from packages/soy-ui/src/components/menu/menu-item-link.vue
rename to packages/soy-ui/src/components/menu/source/menu-item-link.vue
index effe135b..8d129c63 100644
--- a/packages/soy-ui/src/components/menu/menu-item-link.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-item-link.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue';
 import { MenuItem, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
 import { ArrowUpRight } from 'lucide-vue-next';
-import { SLink } from '../link';
-import type { MenuItemLinkEmits, MenuItemLinkProps } from './types';
+import { SLink } from '../../link';
+import type { MenuItemLinkEmits, MenuItemLinkProps } from '../types';
 
 defineOptions({
   name: 'SMenuItemLink'
diff --git a/packages/soy-ui/src/components/menu/menu-item.vue b/packages/soy-ui/src/components/menu/source/menu-item.vue
similarity index 94%
rename from packages/soy-ui/src/components/menu/menu-item.vue
rename to packages/soy-ui/src/components/menu/source/menu-item.vue
index dcb12539..326315c4 100644
--- a/packages/soy-ui/src/components/menu/menu-item.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-item.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import { MenuItem, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
+import type { MenuItemEmits, MenuItemProps } from '../types';
 import SMenuShortcut from './menu-shortcut.vue';
-import type { MenuItemEmits, MenuItemProps } from './types';
 
 defineOptions({
   name: 'SMenuItem'
diff --git a/packages/soy-ui/src/components/menu/menu-label.vue b/packages/soy-ui/src/components/menu/source/menu-label.vue
similarity index 93%
rename from packages/soy-ui/src/components/menu/menu-label.vue
rename to packages/soy-ui/src/components/menu/source/menu-label.vue
index 23610c7c..689a1df6 100644
--- a/packages/soy-ui/src/components/menu/menu-label.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-label.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { MenuLabel } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenuLabelProps } from './types';
+import type { MenuLabelProps } from '../types';
 
 defineOptions({
   name: 'SMenuLabel'
diff --git a/packages/soy-ui/src/components/menu/menu-option.vue b/packages/soy-ui/src/components/menu/source/menu-option.vue
similarity index 99%
rename from packages/soy-ui/src/components/menu/menu-option.vue
rename to packages/soy-ui/src/components/menu/source/menu-option.vue
index 27de63fc..cafbb117 100644
--- a/packages/soy-ui/src/components/menu/menu-option.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-option.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { MenuGroup, MenuPortal, MenuSub, useEmitAsProps } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { MenuOptionData, MenuOptionEmits, MenuOptionProps } from '../types';
 import SMenuLabel from './menu-label.vue';
 import SMenuSeparator from './menu-separator.vue';
 import SMenuItem from './menu-item.vue';
 import SMenuItemLink from './menu-item-link.vue';
 import SMenuSubTrigger from './menu-sub-trigger.vue';
 import SMenuSubContent from './menu-sub-content.vue';
-import type { MenuOptionData, MenuOptionEmits, MenuOptionProps } from './types';
 
 defineOptions({
   name: 'SMenuOption'
diff --git a/packages/soy-ui/src/components/menu/menu-portal-content.vue b/packages/soy-ui/src/components/menu/source/menu-portal-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/menu/menu-portal-content.vue
rename to packages/soy-ui/src/components/menu/source/menu-portal-content.vue
index d63ef86d..b4bfb83c 100644
--- a/packages/soy-ui/src/components/menu/menu-portal-content.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-portal-content.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { MenuPortal, useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { MenuPortalContentEmits, MenuPortalContentProps } from '../types';
 import SMenuContent from './menu-content.vue';
 import SMenuArrow from './menu-arrow.vue';
-import type { MenuPortalContentEmits, MenuPortalContentProps } from './types';
 
 defineOptions({
   name: 'SMenuPortalContent'
diff --git a/packages/soy-ui/src/components/menu/menu-radio-group.vue b/packages/soy-ui/src/components/menu/source/menu-radio-group.vue
similarity index 98%
rename from packages/soy-ui/src/components/menu/menu-radio-group.vue
rename to packages/soy-ui/src/components/menu/source/menu-radio-group.vue
index 2dfde1ed..80ab04ff 100644
--- a/packages/soy-ui/src/components/menu/menu-radio-group.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-radio-group.vue
@@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import { MenuRadioGroup } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { MenuOptionData, MenuRadioGroupEmits, MenuRadioGroupProps } from '../types';
 import SMenuLabel from './menu-label.vue';
 import SMenuRadioItem from './menu-radio-item.vue';
 import SMenuSeparator from './menu-separator.vue';
-import type { MenuOptionData, MenuRadioGroupEmits, MenuRadioGroupProps } from './types';
 
 defineOptions({
   name: 'SMenuRadioGroup'
diff --git a/packages/soy-ui/src/components/menu/menu-radio-item.vue b/packages/soy-ui/src/components/menu/source/menu-radio-item.vue
similarity index 95%
rename from packages/soy-ui/src/components/menu/menu-radio-item.vue
rename to packages/soy-ui/src/components/menu/source/menu-radio-item.vue
index c5bc19fd..d5248985 100644
--- a/packages/soy-ui/src/components/menu/menu-radio-item.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-radio-item.vue
@@ -3,9 +3,9 @@ import { computed } from 'vue';
 import { MenuRadioItem, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
 import { CircleSmall } from 'lucide-vue-next';
+import type { MenuRadioItemEmits, MenuRadioItemProps } from '../types';
 import SMenuItemIndicator from './menu-item-indicator.vue';
 import SMenuShortcut from './menu-shortcut.vue';
-import type { MenuRadioItemEmits, MenuRadioItemProps } from './types';
 
 defineOptions({
   name: 'SMenuRadioItem'
diff --git a/packages/soy-ui/src/components/menu/menu-radio.vue b/packages/soy-ui/src/components/menu/source/menu-radio.vue
similarity index 99%
rename from packages/soy-ui/src/components/menu/menu-radio.vue
rename to packages/soy-ui/src/components/menu/source/menu-radio.vue
index 0d5557cd..1896e109 100644
--- a/packages/soy-ui/src/components/menu/menu-radio.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-radio.vue
@@ -8,9 +8,9 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { MenuOptionData, MenuRadioEmits, MenuRadioProps } from '../types';
 import SMenuPortalContent from './menu-portal-content.vue';
 import SMenuRadioGroup from './menu-radio-group.vue';
-import type { MenuOptionData, MenuRadioEmits, MenuRadioProps } from './types';
 
 defineOptions({
   name: 'SMenuCheckbox'
diff --git a/packages/soy-ui/src/components/menu/menu-separator.vue b/packages/soy-ui/src/components/menu/source/menu-separator.vue
similarity index 90%
rename from packages/soy-ui/src/components/menu/menu-separator.vue
rename to packages/soy-ui/src/components/menu/source/menu-separator.vue
index 9f4a67d8..a3e7ce74 100644
--- a/packages/soy-ui/src/components/menu/menu-separator.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-separator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { MenuSeparator } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenuSeparatorProps } from './types';
+import type { MenuSeparatorProps } from '../types';
 
 defineOptions({
   name: 'SMenuSeparator'
diff --git a/packages/soy-ui/src/components/menu/menu-shortcut.vue b/packages/soy-ui/src/components/menu/source/menu-shortcut.vue
similarity index 76%
rename from packages/soy-ui/src/components/menu/menu-shortcut.vue
rename to packages/soy-ui/src/components/menu/source/menu-shortcut.vue
index d98537b0..cb7256a6 100644
--- a/packages/soy-ui/src/components/menu/menu-shortcut.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-shortcut.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends KeyboardKeyValue | KeyboardKeyValue[] = KeyboardKeyValue[]">
 import { computed } from 'vue';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import SKeyboardKey from '../keyboard-key/keyboard-key.vue';
-import type { KeyboardKeyValue } from '../keyboard-key';
-import type { MenuShortcutProps } from './types';
+import { SKeyboardKey } from '../../keyboard-key';
+import type { KeyboardKeyValue } from '../../keyboard-key';
+import type { MenuShortcutProps } from '../types';
 
 defineOptions({
   name: 'SMenuShortcut'
diff --git a/packages/soy-ui/src/components/menu/menu-sub-content.vue b/packages/soy-ui/src/components/menu/source/menu-sub-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/menu/menu-sub-content.vue
rename to packages/soy-ui/src/components/menu/source/menu-sub-content.vue
index 39960ee7..f63dfdde 100644
--- a/packages/soy-ui/src/components/menu/menu-sub-content.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-sub-content.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { MenuSubContent, useForwardPropsEmits, useOmitForwardProps } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenuSubContentEmits, MenuSubContentProps } from './types';
+import type { MenuSubContentEmits, MenuSubContentProps } from '../types';
 
 defineOptions({
   name: 'SMenuSubContent'
diff --git a/packages/soy-ui/src/components/menu/menu-sub-trigger.vue b/packages/soy-ui/src/components/menu/source/menu-sub-trigger.vue
similarity index 95%
rename from packages/soy-ui/src/components/menu/menu-sub-trigger.vue
rename to packages/soy-ui/src/components/menu/source/menu-sub-trigger.vue
index ec9570c0..d9e418b6 100644
--- a/packages/soy-ui/src/components/menu/menu-sub-trigger.vue
+++ b/packages/soy-ui/src/components/menu/source/menu-sub-trigger.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { MenuSubTrigger, useForwardProps } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
 import { ChevronRight } from 'lucide-vue-next';
-import type { MenuSubTriggerProps } from './types';
+import type { MenuSubTriggerProps } from '../types';
 
 defineOptions({
   name: 'SMenuSubTrigger'
diff --git a/packages/soy-ui/src/components/menu/menu.vue b/packages/soy-ui/src/components/menu/source/menu.vue
similarity index 96%
rename from packages/soy-ui/src/components/menu/menu.vue
rename to packages/soy-ui/src/components/menu/source/menu.vue
index 673c46b6..22febb8e 100644
--- a/packages/soy-ui/src/components/menu/menu.vue
+++ b/packages/soy-ui/src/components/menu/source/menu.vue
@@ -8,9 +8,9 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { MenuEmits, MenuOptionData, MenuProps } from '../types';
 import SMenuPortalContent from './menu-portal-content.vue';
 import SMenuOption from './menu-option.vue';
-import type { MenuEmits, MenuOptionData, MenuProps } from './types';
 
 defineOptions({
   name: 'SMenu'
diff --git a/packages/soy-ui/src/components/menubar/demos/index.ts b/packages/soy-ui/src/components/menubar/demos/index.ts
new file mode 100644
index 00000000..90e6ddf4
--- /dev/null
+++ b/packages/soy-ui/src/components/menubar/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoMenubar from './menubar.vue';
+
+export { DemoMenubar };
diff --git a/examples/src/ui/menubar.vue b/packages/soy-ui/src/components/menubar/demos/menubar.vue
similarity index 100%
rename from examples/src/ui/menubar.vue
rename to packages/soy-ui/src/components/menubar/demos/menubar.vue
diff --git a/packages/soy-ui/src/components/menubar/index.ts b/packages/soy-ui/src/components/menubar/index.ts
index 58d49c42..a52cc69c 100644
--- a/packages/soy-ui/src/components/menubar/index.ts
+++ b/packages/soy-ui/src/components/menubar/index.ts
@@ -1,15 +1,15 @@
-import SMenubar from './menubar.vue';
-import SMenubarContent from './menubar-content.vue';
-import SMenubarItem from './menubar-item.vue';
-import SMenubarMenu from './menubar-menu.vue';
-import SMenubarOption from './menubar-option.vue';
-import SMenubarPortalContent from './menubar-portal-content.vue';
-import SMenubarRoot from './menubar-root.vue';
-import SMenubarSubContent from './menubar-sub-content.vue';
-import SMenubarSubTrigger from './menubar-sub-trigger.vue';
-import SMenubarTriggerLink from './menubar-trigger-link.vue';
-import SMenubarTriggerOption from './menubar-trigger-option.vue';
-import SMenubarTrigger from './menubar-trigger.vue';
+import SMenubar from './source/menubar.vue';
+import SMenubarContent from './source/menubar-content.vue';
+import SMenubarItem from './source/menubar-item.vue';
+import SMenubarMenu from './source/menubar-menu.vue';
+import SMenubarOption from './source/menubar-option.vue';
+import SMenubarPortalContent from './source/menubar-portal-content.vue';
+import SMenubarRoot from './source/menubar-root.vue';
+import SMenubarSubContent from './source/menubar-sub-content.vue';
+import SMenubarSubTrigger from './source/menubar-sub-trigger.vue';
+import SMenubarTriggerLink from './source/menubar-trigger-link.vue';
+import SMenubarTriggerOption from './source/menubar-trigger-option.vue';
+import SMenubarTrigger from './source/menubar-trigger.vue';
 
 export {
   SMenubar,
diff --git a/packages/soy-ui/src/components/menubar/menubar-content.vue b/packages/soy-ui/src/components/menubar/source/menubar-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/menubar/menubar-content.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-content.vue
index 68489539..d934f45a 100644
--- a/packages/soy-ui/src/components/menubar/menubar-content.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { MenubarContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenubarContentEmits, MenubarContentProps } from './types';
+import type { MenubarContentEmits, MenubarContentProps } from '../types';
 
 defineOptions({
   name: 'SMenubarContent'
diff --git a/packages/soy-ui/src/components/menubar/menubar-item.vue b/packages/soy-ui/src/components/menubar/source/menubar-item.vue
similarity index 94%
rename from packages/soy-ui/src/components/menubar/menubar-item.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-item.vue
index 29923697..3ba2e2ca 100644
--- a/packages/soy-ui/src/components/menubar/menubar-item.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-item.vue
@@ -8,10 +8,10 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import type { MenuOptionData } from '../menu/types';
+import type { MenuOptionData } from '../../menu/types';
+import type { MenubarItemEmits, MenubarItemProps } from '../types';
 import SMenubarPortalContent from './menubar-portal-content.vue';
 import SMenubarOption from './menubar-option.vue';
-import type { MenubarItemEmits, MenubarItemProps } from './types';
 
 defineOptions({
   name: 'SMenubarItem'
diff --git a/packages/soy-ui/src/components/menubar/menubar-menu.vue b/packages/soy-ui/src/components/menubar/source/menubar-menu.vue
similarity index 94%
rename from packages/soy-ui/src/components/menubar/menubar-menu.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-menu.vue
index ab8a9831..abc7b446 100644
--- a/packages/soy-ui/src/components/menubar/menubar-menu.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-menu.vue
@@ -2,10 +2,10 @@
 import { computed } from 'vue';
 import { MenubarMenu, useCombinedPropsEmits, useEmitAsProps, useOmitForwardProps } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import type { MenuOptionData } from '../menu/types';
+import type { MenuOptionData } from '../../menu/types';
+import type { MenubarMenuEmits, MenubarMenuProps } from '../types';
 import SMenubarTriggerOption from './menubar-trigger-option.vue';
 import SMenubarItem from './menubar-item.vue';
-import type { MenubarMenuEmits, MenubarMenuProps } from './types';
 
 defineOptions({
   name: 'SMenubarMenu'
diff --git a/packages/soy-ui/src/components/menubar/menubar-option.vue b/packages/soy-ui/src/components/menubar/source/menubar-option.vue
similarity index 92%
rename from packages/soy-ui/src/components/menubar/menubar-option.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-option.vue
index b3c29b73..2c4569d2 100644
--- a/packages/soy-ui/src/components/menubar/menubar-option.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-option.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { MenuGroup, MenuPortal, MenuSub, useEmitAsProps } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import SMenuLabel from '../menu/menu-label.vue';
-import SMenuSeparator from '../menu/menu-separator.vue';
-import SMenuItem from '../menu/menu-item.vue';
-import SMenuItemLink from '../menu/menu-item-link.vue';
-import type { MenuOptionData } from '../menu/types';
+import SMenuLabel from '../../menu/source/menu-label.vue';
+import SMenuSeparator from '../../menu/source/menu-separator.vue';
+import SMenuItem from '../../menu/source/menu-item.vue';
+import SMenuItemLink from '../../menu/source/menu-item-link.vue';
+import type { MenuOptionData } from '../../menu/types';
+import type { MenubarOptionEmits, MenubarOptionProps } from '../types';
 import SMenubarSubTrigger from './menubar-sub-trigger.vue';
 import SMenubarSubContent from './menubar-sub-content.vue';
-import type { MenubarOptionEmits, MenubarOptionProps } from './types';
 
 defineOptions({
   name: 'SMenubarOption'
diff --git a/packages/soy-ui/src/components/menubar/menubar-portal-content.vue b/packages/soy-ui/src/components/menubar/source/menubar-portal-content.vue
similarity index 91%
rename from packages/soy-ui/src/components/menubar/menubar-portal-content.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-portal-content.vue
index 0c29c776..7bb65417 100644
--- a/packages/soy-ui/src/components/menubar/menubar-portal-content.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-portal-content.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { MenubarPortal, useForwardPropsEmits } from '@soybean-ui/primitives';
-import SMenubarArrow from '../menu/menu-arrow.vue';
+import SMenubarArrow from '../../menu/source/menu-arrow.vue';
+import type { MenubarPortalContentEmits, MenubarPortalContentProps } from '../types';
 import SMenubarContent from './menubar-content.vue';
-import type { MenubarPortalContentEmits, MenubarPortalContentProps } from './types';
 
 defineOptions({
   name: 'SMenubarPortalContent'
diff --git a/packages/soy-ui/src/components/menubar/menubar-root.vue b/packages/soy-ui/src/components/menubar/source/menubar-root.vue
similarity index 90%
rename from packages/soy-ui/src/components/menubar/menubar-root.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-root.vue
index 7018ff13..77e945c4 100644
--- a/packages/soy-ui/src/components/menubar/menubar-root.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { MenubarRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, menubarVariants } from '@soybean-ui/variants';
-import type { MenubarRootEmits, MenubarRootProps } from './types';
+import type { MenubarRootEmits, MenubarRootProps } from '../types';
 
 defineOptions({
   name: 'SMenubarRoot'
diff --git a/packages/soy-ui/src/components/menubar/menubar-sub-content.vue b/packages/soy-ui/src/components/menubar/source/menubar-sub-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/menubar/menubar-sub-content.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-sub-content.vue
index 1f63035f..b0a3fb34 100644
--- a/packages/soy-ui/src/components/menubar/menubar-sub-content.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-sub-content.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { MenubarSubContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
-import type { MenubarSubContentEmits, MenubarSubContentProps } from './types';
+import type { MenubarSubContentEmits, MenubarSubContentProps } from '../types';
 
 defineOptions({
   name: 'SMenubarSubContent'
diff --git a/packages/soy-ui/src/components/menubar/menubar-sub-trigger.vue b/packages/soy-ui/src/components/menubar/source/menubar-sub-trigger.vue
similarity index 95%
rename from packages/soy-ui/src/components/menubar/menubar-sub-trigger.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-sub-trigger.vue
index 2f8fb948..3e057f99 100644
--- a/packages/soy-ui/src/components/menubar/menubar-sub-trigger.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-sub-trigger.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { MenubarSubTrigger, useForwardProps } from '@soybean-ui/primitives';
 import { cn, menuVariants } from '@soybean-ui/variants';
 import { ChevronRight } from 'lucide-vue-next';
-import type { MenubarSubTriggerProps } from './types';
+import type { MenubarSubTriggerProps } from '../types';
 
 defineOptions({
   name: 'SMenubarSubTrigger'
diff --git a/packages/soy-ui/src/components/menubar/menubar-trigger-link.vue b/packages/soy-ui/src/components/menubar/source/menubar-trigger-link.vue
similarity index 93%
rename from packages/soy-ui/src/components/menubar/menubar-trigger-link.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-trigger-link.vue
index a1f27ba3..9f8bf6e7 100644
--- a/packages/soy-ui/src/components/menubar/menubar-trigger-link.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-trigger-link.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue';
 import { MenubarTrigger, useForwardProps } from '@soybean-ui/primitives';
 import { cn, menuVariants, menubarVariants } from '@soybean-ui/variants';
 import { ArrowUpRight } from 'lucide-vue-next';
-import { SLink } from '../link';
-import type { MenubarTriggerLinkProps } from './types';
+import { SLink } from '../../link';
+import type { MenubarTriggerLinkProps } from '../types';
 
 defineOptions({
   name: 'SMenubarTriggerLink'
diff --git a/packages/soy-ui/src/components/menubar/menubar-trigger-option.vue b/packages/soy-ui/src/components/menubar/source/menubar-trigger-option.vue
similarity index 92%
rename from packages/soy-ui/src/components/menubar/menubar-trigger-option.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-trigger-option.vue
index 90b8ef67..bedd5167 100644
--- a/packages/soy-ui/src/components/menubar/menubar-trigger-option.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-trigger-option.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import type { AcceptableValue } from '@soybean-ui/primitives';
-import type { MenuOptionData } from '../menu/types';
+import type { MenuOptionData } from '../../menu/types';
+import type { MenubarTriggerOptionProps } from '../types';
 import SMenubarTrigger from './menubar-trigger.vue';
 import SMenubarTriggerLink from './menubar-trigger-link.vue';
-import type { MenubarTriggerOptionProps } from './types';
 
 defineOptions({
   name: 'SMenubarTriggerOption'
diff --git a/packages/soy-ui/src/components/menubar/menubar-trigger.vue b/packages/soy-ui/src/components/menubar/source/menubar-trigger.vue
similarity index 89%
rename from packages/soy-ui/src/components/menubar/menubar-trigger.vue
rename to packages/soy-ui/src/components/menubar/source/menubar-trigger.vue
index d517c1f8..26777dd3 100644
--- a/packages/soy-ui/src/components/menubar/menubar-trigger.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar-trigger.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import { MenubarTrigger } from '@soybean-ui/primitives';
 import { cn, menuVariants, menubarVariants } from '@soybean-ui/variants';
-import SMenuShortcut from '../menu/menu-shortcut.vue';
-import type { MenubarTriggerProps } from './types';
+import SMenuShortcut from '../../menu/source/menu-shortcut.vue';
+import type { MenubarTriggerProps } from '../types';
 
 defineOptions({
   name: 'SMenubarTrigger'
diff --git a/packages/soy-ui/src/components/menubar/menubar.vue b/packages/soy-ui/src/components/menubar/source/menubar.vue
similarity index 95%
rename from packages/soy-ui/src/components/menubar/menubar.vue
rename to packages/soy-ui/src/components/menubar/source/menubar.vue
index 29d41773..d6045fb9 100644
--- a/packages/soy-ui/src/components/menubar/menubar.vue
+++ b/packages/soy-ui/src/components/menubar/source/menubar.vue
@@ -6,9 +6,9 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { MenubarEmits, MenubarProps } from '../types';
 import SMenubarRoot from './menubar-root.vue';
 import SMenubarMenu from './menubar-menu.vue';
-import type { MenubarEmits, MenubarProps } from './types';
 
 defineOptions({
   name: 'SMenubar'
diff --git a/packages/soy-ui/src/components/navigation-menu/demos/index.ts b/packages/soy-ui/src/components/navigation-menu/demos/index.ts
new file mode 100644
index 00000000..4544c44a
--- /dev/null
+++ b/packages/soy-ui/src/components/navigation-menu/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoNavigationMenu from './navigation-menu.vue';
+
+export { DemoNavigationMenu };
diff --git a/examples/src/ui/navigation-menu.vue b/packages/soy-ui/src/components/navigation-menu/demos/navigation-menu.vue
similarity index 100%
rename from examples/src/ui/navigation-menu.vue
rename to packages/soy-ui/src/components/navigation-menu/demos/navigation-menu.vue
diff --git a/packages/soy-ui/src/components/navigation-menu/index.ts b/packages/soy-ui/src/components/navigation-menu/index.ts
index 9e9d226c..3a811917 100644
--- a/packages/soy-ui/src/components/navigation-menu/index.ts
+++ b/packages/soy-ui/src/components/navigation-menu/index.ts
@@ -1,16 +1,16 @@
 import { NavigationMenuSub as SNavigationMenuSub } from '@soybean-ui/primitives';
-import SNavigationMenuChildLink from './navigation-menu-child-link.vue';
-import SNavigationMenuChildListItem from './navigation-menu-child-list-item.vue';
-import SNavigationMenuChildList from './navigation-menu-child-list.vue';
-import SNavigationMenuContent from './navigation-menu-content.vue';
-import SNavigationMenuIndicator from './navigation-menu-indicator.vue';
-import SNavigationMenuItem from './navigation-menu-item.vue';
-import SNavigationMenuLink from './navigation-menu-link.vue';
-import SNavigationMenuList from './navigation-menu-list.vue';
-import SNavigationMenuRoot from './navigation-menu-root.vue';
-import SNavigationMenuTrigger from './navigation-menu-trigger.vue';
-import SNavigationMenuViewport from './navigation-menu-viewport.vue';
-import SNavigationMenu from './navigation-menu.vue';
+import SNavigationMenuChildLink from './source/navigation-menu-child-link.vue';
+import SNavigationMenuChildListItem from './source/navigation-menu-child-list-item.vue';
+import SNavigationMenuChildList from './source/navigation-menu-child-list.vue';
+import SNavigationMenuContent from './source/navigation-menu-content.vue';
+import SNavigationMenuIndicator from './source/navigation-menu-indicator.vue';
+import SNavigationMenuItem from './source/navigation-menu-item.vue';
+import SNavigationMenuLink from './source/navigation-menu-link.vue';
+import SNavigationMenuList from './source/navigation-menu-list.vue';
+import SNavigationMenuRoot from './source/navigation-menu-root.vue';
+import SNavigationMenuTrigger from './source/navigation-menu-trigger.vue';
+import SNavigationMenuViewport from './source/navigation-menu-viewport.vue';
+import SNavigationMenu from './source/navigation-menu.vue';
 
 export {
   SNavigationMenu,
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-child-link.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-link.vue
similarity index 94%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-child-link.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-link.vue
index d7ac4958..164dbe1e 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-child-link.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-link.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue';
 import { NavigationMenuLink, useForwardProps } from '@soybean-ui/primitives';
 import type { NavigationMenuLinkEmits } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import { SLink } from '../link';
-import type { NavigationMenuChildLinkProps } from './types';
+import { SLink } from '../../link';
+import type { NavigationMenuChildLinkProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuChildLink'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-child-list-item.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-list-item.vue
similarity index 87%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-child-list-item.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-list-item.vue
index f7f42137..3674dafb 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-child-list-item.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-list-item.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuChildListItemProps } from './types';
+import type { NavigationMenuChildListItemProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuChildListItem'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-child-list.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-list.vue
similarity index 88%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-child-list.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-list.vue
index d92e423f..a3abdf7a 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-child-list.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-child-list.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuChildListProps } from './types';
+import type { NavigationMenuChildListProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuChildList'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-content.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-content.vue
similarity index 97%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-content.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-content.vue
index ea778e81..10984b52 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-content.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NavigationMenuContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuContentEmits, NavigationMenuContentProps } from './types';
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuContent'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-indicator.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-indicator.vue
similarity index 92%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-indicator.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-indicator.vue
index faaaa447..06bfbc9b 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-indicator.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NavigationMenuIndicator } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuIndicatorProps } from './types';
+import type { NavigationMenuIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuIndicator'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-item.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-item.vue
similarity index 89%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-item.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-item.vue
index b29cc6aa..f6403245 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-item.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-item.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NavigationMenuItem } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuItemProps } from './types';
+import type { NavigationMenuItemProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuItem'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-link.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-link.vue
similarity index 93%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-link.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-link.vue
index 160a0351..8609034f 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-link.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-link.vue
@@ -4,8 +4,8 @@ import { NavigationMenuLink, useForwardProps } from '@soybean-ui/primitives';
 import type { NavigationMenuLinkEmits } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
 import { ArrowUpRight } from 'lucide-vue-next';
-import { SLink } from '../link';
-import type { NavigationMenuLinkProps } from './types';
+import { SLink } from '../../link';
+import type { NavigationMenuLinkProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuLink'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-list.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-list.vue
similarity index 90%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-list.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-list.vue
index 89139e8d..2e8a0840 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-list.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-list.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NavigationMenuList } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuListProps } from './types';
+import type { NavigationMenuListProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuList'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-root.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-root.vue
similarity index 97%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-root.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-root.vue
index 0c2503fe..28530a08 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-root.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NavigationMenuRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuRootEmits, NavigationMenuRootProps } from './types';
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuRoot'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-trigger.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-trigger.vue
similarity index 93%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-trigger.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-trigger.vue
index 89aaca4f..ad540697 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-trigger.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-trigger.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue';
 import { NavigationMenuTrigger, useForwardProps } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
 import { ChevronDown } from 'lucide-vue-next';
-import { SLink } from '../link';
-import type { NavigationMenuTriggerProps } from './types';
+import { SLink } from '../../link';
+import type { NavigationMenuTriggerProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuTrigger'
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu-viewport.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-viewport.vue
similarity index 93%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu-viewport.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu-viewport.vue
index f4c2fb60..44e6e542 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu-viewport.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu-viewport.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NavigationMenuViewport, useForwardProps } from '@soybean-ui/primitives';
 import { cn, navigationMenuVariants } from '@soybean-ui/variants';
-import type { NavigationMenuViewportProps } from './types';
+import type { NavigationMenuViewportProps } from '../types';
 
 defineOptions({
   name: 'SNavigationMenuViewport',
diff --git a/packages/soy-ui/src/components/navigation-menu/navigation-menu.vue b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu.vue
similarity index 98%
rename from packages/soy-ui/src/components/navigation-menu/navigation-menu.vue
rename to packages/soy-ui/src/components/navigation-menu/source/navigation-menu.vue
index a78a1d2a..0d24cfb7 100644
--- a/packages/soy-ui/src/components/navigation-menu/navigation-menu.vue
+++ b/packages/soy-ui/src/components/navigation-menu/source/navigation-menu.vue
@@ -5,7 +5,13 @@ import {
   useOmitForwardProps,
   usePickEmitAsProps
 } from '@soybean-ui/primitives';
-import { omit } from '../../shared';
+import { omit } from '../../../shared';
+import type {
+  NavigationMenuEmits,
+  NavigationMenuItemBaseOption,
+  NavigationMenuItemOption,
+  NavigationMenuProps
+} from '../types';
 import SNavigationMenuRoot from './navigation-menu-root.vue';
 import SNavigationMenuViewport from './navigation-menu-viewport.vue';
 import SNavigationMenuList from './navigation-menu-list.vue';
@@ -17,12 +23,6 @@ import SNavigationMenuLink from './navigation-menu-link.vue';
 import SNavigationMenuChildLink from './navigation-menu-child-link.vue';
 import SNavigationMenuChildList from './navigation-menu-child-list.vue';
 import SNavigationMenuChildListItem from './navigation-menu-child-list-item.vue';
-import type {
-  NavigationMenuEmits,
-  NavigationMenuItemBaseOption,
-  NavigationMenuItemOption,
-  NavigationMenuProps
-} from './types';
 
 defineOptions({
   name: 'SNavigationMenu'
diff --git a/packages/soy-ui/src/components/number-field/demos/index.ts b/packages/soy-ui/src/components/number-field/demos/index.ts
new file mode 100644
index 00000000..bb77ab3a
--- /dev/null
+++ b/packages/soy-ui/src/components/number-field/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoNumberField from './number-field.vue';
+
+export { DemoNumberField };
diff --git a/examples/src/ui/number-field.vue b/packages/soy-ui/src/components/number-field/demos/number-field.vue
similarity index 100%
rename from examples/src/ui/number-field.vue
rename to packages/soy-ui/src/components/number-field/demos/number-field.vue
diff --git a/packages/soy-ui/src/components/number-field/index.ts b/packages/soy-ui/src/components/number-field/index.ts
index 629f10e1..12fb1447 100644
--- a/packages/soy-ui/src/components/number-field/index.ts
+++ b/packages/soy-ui/src/components/number-field/index.ts
@@ -1,8 +1,8 @@
-import SNumberField from './number-field.vue';
-import SNumberFieldDecrement from './number-field-decrement.vue';
-import SNumberFieldIncrement from './number-field-increment.vue';
-import SNumberFieldInput from './number-field-input.vue';
-import SNumberFieldRoot from './number-field-root.vue';
+import SNumberField from './source/number-field.vue';
+import SNumberFieldDecrement from './source/number-field-decrement.vue';
+import SNumberFieldIncrement from './source/number-field-increment.vue';
+import SNumberFieldInput from './source/number-field-input.vue';
+import SNumberFieldRoot from './source/number-field-root.vue';
 
 export { SNumberField, SNumberFieldDecrement, SNumberFieldIncrement, SNumberFieldInput, SNumberFieldRoot };
 
diff --git a/packages/soy-ui/src/components/number-field/number-field-decrement.vue b/packages/soy-ui/src/components/number-field/source/number-field-decrement.vue
similarity index 92%
rename from packages/soy-ui/src/components/number-field/number-field-decrement.vue
rename to packages/soy-ui/src/components/number-field/source/number-field-decrement.vue
index a88f70db..96a6f9ca 100644
--- a/packages/soy-ui/src/components/number-field/number-field-decrement.vue
+++ b/packages/soy-ui/src/components/number-field/source/number-field-decrement.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { NumberFieldDecrement } from '@soybean-ui/primitives';
 import { cn, numberFieldVariants } from '@soybean-ui/variants';
 import { Minus } from 'lucide-vue-next';
-import type { NumberFieldDecrementProps } from './types';
+import type { NumberFieldDecrementProps } from '../types';
 
 defineOptions({
   name: 'SNumberFieldDecrement'
diff --git a/packages/soy-ui/src/components/number-field/number-field-increment.vue b/packages/soy-ui/src/components/number-field/source/number-field-increment.vue
similarity index 92%
rename from packages/soy-ui/src/components/number-field/number-field-increment.vue
rename to packages/soy-ui/src/components/number-field/source/number-field-increment.vue
index 86e5a0bc..eb410aa1 100644
--- a/packages/soy-ui/src/components/number-field/number-field-increment.vue
+++ b/packages/soy-ui/src/components/number-field/source/number-field-increment.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { NumberFieldIncrement } from '@soybean-ui/primitives';
 import { cn, numberFieldVariants } from '@soybean-ui/variants';
 import { Plus } from 'lucide-vue-next';
-import type { NumberFieldIncrementProps } from './types';
+import type { NumberFieldIncrementProps } from '../types';
 
 defineOptions({
   name: 'SNumberFieldIncrement'
diff --git a/packages/soy-ui/src/components/number-field/number-field-input.vue b/packages/soy-ui/src/components/number-field/source/number-field-input.vue
similarity index 90%
rename from packages/soy-ui/src/components/number-field/number-field-input.vue
rename to packages/soy-ui/src/components/number-field/source/number-field-input.vue
index db72e15b..db1b25a9 100644
--- a/packages/soy-ui/src/components/number-field/number-field-input.vue
+++ b/packages/soy-ui/src/components/number-field/source/number-field-input.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NumberFieldInput } from '@soybean-ui/primitives';
 import { cn, numberFieldVariants } from '@soybean-ui/variants';
-import type { NumberFieldInputProps } from './types';
+import type { NumberFieldInputProps } from '../types';
 
 defineOptions({
   name: 'SNumberFieldInput'
diff --git a/packages/soy-ui/src/components/number-field/number-field-root.vue b/packages/soy-ui/src/components/number-field/source/number-field-root.vue
similarity index 98%
rename from packages/soy-ui/src/components/number-field/number-field-root.vue
rename to packages/soy-ui/src/components/number-field/source/number-field-root.vue
index a2086ba5..4e82c84a 100644
--- a/packages/soy-ui/src/components/number-field/number-field-root.vue
+++ b/packages/soy-ui/src/components/number-field/source/number-field-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { NumberFieldRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, numberFieldVariants } from '@soybean-ui/variants';
-import type { NumberFieldRootEmits, NumberFieldRootProps } from './types';
+import type { NumberFieldRootEmits, NumberFieldRootProps } from '../types';
 
 defineOptions({
   name: 'SNumberFieldRoot'
diff --git a/packages/soy-ui/src/components/number-field/number-field.vue b/packages/soy-ui/src/components/number-field/source/number-field.vue
similarity index 94%
rename from packages/soy-ui/src/components/number-field/number-field.vue
rename to packages/soy-ui/src/components/number-field/source/number-field.vue
index fa32f077..6470e174 100644
--- a/packages/soy-ui/src/components/number-field/number-field.vue
+++ b/packages/soy-ui/src/components/number-field/source/number-field.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { NumberFieldEmits, NumberFieldProps } from '../types';
 import NumberFieldDecrement from './number-field-decrement.vue';
 import NumberFieldIncrement from './number-field-increment.vue';
 import NumberFieldInput from './number-field-input.vue';
 import NumberFieldRoot from './number-field-root.vue';
-import type { NumberFieldEmits, NumberFieldProps } from './types';
 
 defineOptions({
   name: 'SNumberField'
diff --git a/packages/soy-ui/src/components/pagination/demos/index.ts b/packages/soy-ui/src/components/pagination/demos/index.ts
new file mode 100644
index 00000000..5f8f23ab
--- /dev/null
+++ b/packages/soy-ui/src/components/pagination/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoPagination from './pagination.vue';
+
+export { DemoPagination };
diff --git a/examples/src/ui/pagination.vue b/packages/soy-ui/src/components/pagination/demos/pagination.vue
similarity index 100%
rename from examples/src/ui/pagination.vue
rename to packages/soy-ui/src/components/pagination/demos/pagination.vue
diff --git a/packages/soy-ui/src/components/pagination/index.ts b/packages/soy-ui/src/components/pagination/index.ts
index b000f71b..7daf7da4 100644
--- a/packages/soy-ui/src/components/pagination/index.ts
+++ b/packages/soy-ui/src/components/pagination/index.ts
@@ -1,13 +1,13 @@
 import { PaginationRoot as SPaginationRoot } from '@soybean-ui/primitives';
-import SPagination from './pagination.vue';
-import SPaginationButton from './pagination-button.vue';
-import SPaginationEllipsis from './pagination-ellipsis.vue';
-import SPaginationFirst from './pagination-first.vue';
-import SPaginationLast from './pagination-last.vue';
-import SPaginationListItem from './pagination-list-item.vue';
-import SPaginationList from './pagination-list.vue';
-import SPaginationNext from './pagination-next.vue';
-import SPaginationPrev from './pagination-prev.vue';
+import SPagination from './source/pagination.vue';
+import SPaginationButton from './source/pagination-button.vue';
+import SPaginationEllipsis from './source/pagination-ellipsis.vue';
+import SPaginationFirst from './source/pagination-first.vue';
+import SPaginationLast from './source/pagination-last.vue';
+import SPaginationListItem from './source/pagination-list-item.vue';
+import SPaginationList from './source/pagination-list.vue';
+import SPaginationNext from './source/pagination-next.vue';
+import SPaginationPrev from './source/pagination-prev.vue';
 
 export {
   SPagination,
diff --git a/packages/soy-ui/src/components/pagination/pagination-button.vue b/packages/soy-ui/src/components/pagination/source/pagination-button.vue
similarity index 90%
rename from packages/soy-ui/src/components/pagination/pagination-button.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-button.vue
index 939ceb60..b576aeb2 100644
--- a/packages/soy-ui/src/components/pagination/pagination-button.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-button.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { Primitive } from '@soybean-ui/primitives';
 import { cn, paginationVariants } from '@soybean-ui/variants';
-import type { PaginationButtonProps } from './types';
+import type { PaginationButtonProps } from '../types';
 
 defineOptions({
   name: 'SPaginationButton'
diff --git a/packages/soy-ui/src/components/pagination/pagination-ellipsis.vue b/packages/soy-ui/src/components/pagination/source/pagination-ellipsis.vue
similarity index 91%
rename from packages/soy-ui/src/components/pagination/pagination-ellipsis.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-ellipsis.vue
index 532f0530..c39b4f95 100644
--- a/packages/soy-ui/src/components/pagination/pagination-ellipsis.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-ellipsis.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { PaginationEllipsis } from '@soybean-ui/primitives';
 import { cn, paginationVariants } from '@soybean-ui/variants';
 import { MoreHorizontal } from 'lucide-vue-next';
-import type { PaginationEllipsisProps } from './types';
+import type { PaginationEllipsisProps } from '../types';
 
 defineOptions({
   name: 'SPaginationEllipsis'
diff --git a/packages/soy-ui/src/components/pagination/pagination-first.vue b/packages/soy-ui/src/components/pagination/source/pagination-first.vue
similarity index 91%
rename from packages/soy-ui/src/components/pagination/pagination-first.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-first.vue
index f43d572c..2bcbea39 100644
--- a/packages/soy-ui/src/components/pagination/pagination-first.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-first.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { PaginationFirst, useForwardProps } from '@soybean-ui/primitives';
 import { ChevronsLeft } from 'lucide-vue-next';
+import type { PaginationFirstProps } from '../types';
 import SPaginationButton from './pagination-button.vue';
-import type { PaginationFirstProps } from './types';
 
 defineOptions({
   name: 'SPaginationFirst'
diff --git a/packages/soy-ui/src/components/pagination/pagination-last.vue b/packages/soy-ui/src/components/pagination/source/pagination-last.vue
similarity index 91%
rename from packages/soy-ui/src/components/pagination/pagination-last.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-last.vue
index b23a5fef..aff2879f 100644
--- a/packages/soy-ui/src/components/pagination/pagination-last.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-last.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { PaginationLast, useForwardProps } from '@soybean-ui/primitives';
 import { ChevronsRight } from 'lucide-vue-next';
+import type { PaginationLastProps } from '../types';
 import SPaginationButton from './pagination-button.vue';
-import type { PaginationLastProps } from './types';
 
 defineOptions({
   name: 'SPaginationLast'
diff --git a/packages/soy-ui/src/components/pagination/pagination-list-item.vue b/packages/soy-ui/src/components/pagination/source/pagination-list-item.vue
similarity index 90%
rename from packages/soy-ui/src/components/pagination/pagination-list-item.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-list-item.vue
index 488e7d30..d947c19b 100644
--- a/packages/soy-ui/src/components/pagination/pagination-list-item.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-list-item.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PaginationListItem, useForwardProps } from '@soybean-ui/primitives';
+import type { PaginationListItemProps } from '../types';
 import SPaginationButton from './pagination-button.vue';
-import type { PaginationListItemProps } from './types';
 
 defineOptions({
   name: 'SPaginationListItem'
diff --git a/packages/soy-ui/src/components/pagination/pagination-list.vue b/packages/soy-ui/src/components/pagination/source/pagination-list.vue
similarity index 91%
rename from packages/soy-ui/src/components/pagination/pagination-list.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-list.vue
index ee5b6c36..fd549c22 100644
--- a/packages/soy-ui/src/components/pagination/pagination-list.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-list.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { PaginationList } from '@soybean-ui/primitives';
 import { cn, paginationVariants } from '@soybean-ui/variants';
-import type { PaginationListProps } from './types';
+import type { PaginationListProps } from '../types';
 
 defineOptions({
   name: 'SPaginationList'
diff --git a/packages/soy-ui/src/components/pagination/pagination-next.vue b/packages/soy-ui/src/components/pagination/source/pagination-next.vue
similarity index 91%
rename from packages/soy-ui/src/components/pagination/pagination-next.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-next.vue
index 99e91166..dc632c69 100644
--- a/packages/soy-ui/src/components/pagination/pagination-next.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-next.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { PaginationNext, useForwardProps } from '@soybean-ui/primitives';
 import { ChevronRight } from 'lucide-vue-next';
+import type { PaginationNextProps } from '../types';
 import SPaginationButton from './pagination-button.vue';
-import type { PaginationNextProps } from './types';
 
 defineOptions({
   name: 'SPaginationNext'
diff --git a/packages/soy-ui/src/components/pagination/pagination-prev.vue b/packages/soy-ui/src/components/pagination/source/pagination-prev.vue
similarity index 91%
rename from packages/soy-ui/src/components/pagination/pagination-prev.vue
rename to packages/soy-ui/src/components/pagination/source/pagination-prev.vue
index 32a310c7..ddacfabb 100644
--- a/packages/soy-ui/src/components/pagination/pagination-prev.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination-prev.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { PaginationPrev, useForwardProps } from '@soybean-ui/primitives';
 import { ChevronLeft } from 'lucide-vue-next';
+import type { PaginationPrevProps } from '../types';
 import SPaginationButton from './pagination-button.vue';
-import type { PaginationPrevProps } from './types';
 
 defineOptions({
   name: 'SPaginationPrev'
diff --git a/packages/soy-ui/src/components/pagination/pagination.vue b/packages/soy-ui/src/components/pagination/source/pagination.vue
similarity index 96%
rename from packages/soy-ui/src/components/pagination/pagination.vue
rename to packages/soy-ui/src/components/pagination/source/pagination.vue
index 7149795e..5d76e0ff 100644
--- a/packages/soy-ui/src/components/pagination/pagination.vue
+++ b/packages/soy-ui/src/components/pagination/source/pagination.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { PaginationRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { PaginationEmits, PaginationProps } from '../types';
 import SPaginationList from './pagination-list.vue';
 import SPaginationListItem from './pagination-list-item.vue';
 import SPaginationFirst from './pagination-first.vue';
@@ -7,7 +8,6 @@ import SPaginationLast from './pagination-last.vue';
 import SPaginationNext from './pagination-next.vue';
 import SPaginationPrev from './pagination-prev.vue';
 import SPaginationEllipsis from './pagination-ellipsis.vue';
-import type { PaginationEmits, PaginationProps } from './types';
 
 defineOptions({
   name: 'SPagination'
diff --git a/packages/soy-ui/src/components/pin-input/demos/index.ts b/packages/soy-ui/src/components/pin-input/demos/index.ts
new file mode 100644
index 00000000..7f78e554
--- /dev/null
+++ b/packages/soy-ui/src/components/pin-input/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoPinInput from './pin-input.vue';
+
+export { DemoPinInput };
diff --git a/examples/src/ui/pin-input.vue b/packages/soy-ui/src/components/pin-input/demos/pin-input.vue
similarity index 100%
rename from examples/src/ui/pin-input.vue
rename to packages/soy-ui/src/components/pin-input/demos/pin-input.vue
diff --git a/packages/soy-ui/src/components/pin-input/index.ts b/packages/soy-ui/src/components/pin-input/index.ts
index b48d869a..ebdd744a 100644
--- a/packages/soy-ui/src/components/pin-input/index.ts
+++ b/packages/soy-ui/src/components/pin-input/index.ts
@@ -1,7 +1,7 @@
-import SPinInput from './pin-input.vue';
-import SPinInputInput from './pin-input-input.vue';
-import SPinInputRoot from './pin-input-root.vue';
-import SPinInputSeparator from './pin-input-separator.vue';
+import SPinInput from './source/pin-input.vue';
+import SPinInputInput from './source/pin-input-input.vue';
+import SPinInputRoot from './source/pin-input-root.vue';
+import SPinInputSeparator from './source/pin-input-separator.vue';
 
 export { SPinInput, SPinInputInput, SPinInputRoot, SPinInputSeparator };
 
diff --git a/packages/soy-ui/src/components/pin-input/pin-input-input-root.vue b/packages/soy-ui/src/components/pin-input/source/pin-input-input-root.vue
similarity index 89%
rename from packages/soy-ui/src/components/pin-input/pin-input-input-root.vue
rename to packages/soy-ui/src/components/pin-input/source/pin-input-input-root.vue
index 3370c604..ef6937c1 100644
--- a/packages/soy-ui/src/components/pin-input/pin-input-input-root.vue
+++ b/packages/soy-ui/src/components/pin-input/source/pin-input-input-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, pinInputVariants } from '@soybean-ui/variants';
-import type { PinInputInputRootProps } from './types';
+import type { PinInputInputRootProps } from '../types';
 
 defineOptions({
   name: 'SPinInputInputRoot'
diff --git a/packages/soy-ui/src/components/pin-input/pin-input-input.vue b/packages/soy-ui/src/components/pin-input/source/pin-input-input.vue
similarity index 92%
rename from packages/soy-ui/src/components/pin-input/pin-input-input.vue
rename to packages/soy-ui/src/components/pin-input/source/pin-input-input.vue
index 9be11073..4766c7c5 100644
--- a/packages/soy-ui/src/components/pin-input/pin-input-input.vue
+++ b/packages/soy-ui/src/components/pin-input/source/pin-input-input.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { PinInputInput, useForwardProps } from '@soybean-ui/primitives';
 import { cn, pinInputVariants } from '@soybean-ui/variants';
-import type { PinInputInputProps } from './types';
+import type { PinInputInputProps } from '../types';
 
 defineOptions({
   name: 'SPinInputInput'
diff --git a/packages/soy-ui/src/components/pin-input/pin-input-root.vue b/packages/soy-ui/src/components/pin-input/source/pin-input-root.vue
similarity index 85%
rename from packages/soy-ui/src/components/pin-input/pin-input-root.vue
rename to packages/soy-ui/src/components/pin-input/source/pin-input-root.vue
index 7c77e881..94714b6f 100644
--- a/packages/soy-ui/src/components/pin-input/pin-input-root.vue
+++ b/packages/soy-ui/src/components/pin-input/source/pin-input-root.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { PinInputRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
-import type { PinInputRootEmits, PinInputRootProps } from './types';
+import type { PinInputRootEmits, PinInputRootProps } from '../types';
 
 defineOptions({
   name: 'SPinInputRoot'
diff --git a/packages/soy-ui/src/components/pin-input/pin-input-separator.vue b/packages/soy-ui/src/components/pin-input/source/pin-input-separator.vue
similarity index 89%
rename from packages/soy-ui/src/components/pin-input/pin-input-separator.vue
rename to packages/soy-ui/src/components/pin-input/source/pin-input-separator.vue
index ba6748fc..4696708b 100644
--- a/packages/soy-ui/src/components/pin-input/pin-input-separator.vue
+++ b/packages/soy-ui/src/components/pin-input/source/pin-input-separator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, pinInputVariants } from '@soybean-ui/variants';
-import type { PinInputSeparatorProps } from './types';
+import type { PinInputSeparatorProps } from '../types';
 
 defineOptions({
   name: 'SPinInputSeparator'
diff --git a/packages/soy-ui/src/components/pin-input/pin-input.vue b/packages/soy-ui/src/components/pin-input/source/pin-input.vue
similarity index 96%
rename from packages/soy-ui/src/components/pin-input/pin-input.vue
rename to packages/soy-ui/src/components/pin-input/source/pin-input.vue
index 1760cd05..4bd6689d 100644
--- a/packages/soy-ui/src/components/pin-input/pin-input.vue
+++ b/packages/soy-ui/src/components/pin-input/source/pin-input.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { PinInputEmits, PinInputProps } from '../types';
 import PinInputRoot from './pin-input-root.vue';
 import PinInputInputRoot from './pin-input-input-root.vue';
 import PinInputInput from './pin-input-input.vue';
 import PinInputSeparator from './pin-input-separator.vue';
-import type { PinInputEmits, PinInputProps } from './types';
 
 defineOptions({
   name: 'SPinInput'
diff --git a/packages/soy-ui/src/components/popover/demos/index.ts b/packages/soy-ui/src/components/popover/demos/index.ts
new file mode 100644
index 00000000..f698bc33
--- /dev/null
+++ b/packages/soy-ui/src/components/popover/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoPopover from './popover.vue';
+
+export { DemoPopover };
diff --git a/examples/src/ui/popover.vue b/packages/soy-ui/src/components/popover/demos/popover.vue
similarity index 100%
rename from examples/src/ui/popover.vue
rename to packages/soy-ui/src/components/popover/demos/popover.vue
diff --git a/packages/soy-ui/src/components/popover/index.ts b/packages/soy-ui/src/components/popover/index.ts
index 04eef6a1..4776c094 100644
--- a/packages/soy-ui/src/components/popover/index.ts
+++ b/packages/soy-ui/src/components/popover/index.ts
@@ -5,9 +5,9 @@ import {
   PopoverRoot as SPopoverRoot,
   PopoverTrigger as SPopoverTrigger
 } from '@soybean-ui/primitives';
-import SPopover from './popover.vue';
-import SPopoverArrow from './popover-arrow.vue';
-import SPopoverContent from './popover-content.vue';
+import SPopover from './source/popover.vue';
+import SPopoverArrow from './source/popover-arrow.vue';
+import SPopoverContent from './source/popover-content.vue';
 
 export {
   SPopover,
diff --git a/packages/soy-ui/src/components/popover/popover-arrow.vue b/packages/soy-ui/src/components/popover/source/popover-arrow.vue
similarity index 91%
rename from packages/soy-ui/src/components/popover/popover-arrow.vue
rename to packages/soy-ui/src/components/popover/source/popover-arrow.vue
index e0b76990..00196b11 100644
--- a/packages/soy-ui/src/components/popover/popover-arrow.vue
+++ b/packages/soy-ui/src/components/popover/source/popover-arrow.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { PopoverArrow } from '@soybean-ui/primitives';
 import { cn, popoverVariants } from '@soybean-ui/variants';
-import type { PopoverArrowProps } from './types';
+import type { PopoverArrowProps } from '../types';
 
 defineOptions({
   name: 'SPopoverArrow'
diff --git a/packages/soy-ui/src/components/popover/popover-content.vue b/packages/soy-ui/src/components/popover/source/popover-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/popover/popover-content.vue
rename to packages/soy-ui/src/components/popover/source/popover-content.vue
index 00179551..4be29428 100644
--- a/packages/soy-ui/src/components/popover/popover-content.vue
+++ b/packages/soy-ui/src/components/popover/source/popover-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { PopoverContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, popoverVariants } from '@soybean-ui/variants';
-import type { PopoverContentEmits, PopoverContentProps } from './types';
+import type { PopoverContentEmits, PopoverContentProps } from '../types';
 
 defineOptions({
   name: 'SPopoverContent'
diff --git a/packages/soy-ui/src/components/popover/popover.vue b/packages/soy-ui/src/components/popover/source/popover.vue
similarity index 97%
rename from packages/soy-ui/src/components/popover/popover.vue
rename to packages/soy-ui/src/components/popover/source/popover.vue
index f314428c..38b6c329 100644
--- a/packages/soy-ui/src/components/popover/popover.vue
+++ b/packages/soy-ui/src/components/popover/source/popover.vue
@@ -9,9 +9,9 @@ import {
   useOmitEmitAsProps,
   usePickForwardProps
 } from '@soybean-ui/primitives';
+import type { PopoverEmits, PopoverProps } from '../types';
 import SPopoverContent from './popover-content.vue';
 import SPopoverArrow from './popover-arrow.vue';
-import type { PopoverEmits, PopoverProps } from './types';
 
 defineOptions({
   name: 'SPopover'
diff --git a/packages/soy-ui/src/components/progress/demos/index.ts b/packages/soy-ui/src/components/progress/demos/index.ts
new file mode 100644
index 00000000..9b4aa9b2
--- /dev/null
+++ b/packages/soy-ui/src/components/progress/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoProgress from './progress.vue';
+
+export { DemoProgress };
diff --git a/examples/src/ui/progress.vue b/packages/soy-ui/src/components/progress/demos/progress.vue
similarity index 100%
rename from examples/src/ui/progress.vue
rename to packages/soy-ui/src/components/progress/demos/progress.vue
diff --git a/packages/soy-ui/src/components/progress/index.ts b/packages/soy-ui/src/components/progress/index.ts
index 1a65e303..6c6ec2d4 100644
--- a/packages/soy-ui/src/components/progress/index.ts
+++ b/packages/soy-ui/src/components/progress/index.ts
@@ -1,6 +1,6 @@
-import SProgress from './progress.vue';
-import SProgressIndicator from './progress-indicator.vue';
-import SProgressRoot from './progress-root.vue';
+import SProgress from './source/progress.vue';
+import SProgressIndicator from './source/progress-indicator.vue';
+import SProgressRoot from './source/progress-root.vue';
 
 export { SProgress, SProgressIndicator, SProgressRoot };
 
diff --git a/packages/soy-ui/src/components/progress/progress-indicator.vue b/packages/soy-ui/src/components/progress/source/progress-indicator.vue
similarity index 91%
rename from packages/soy-ui/src/components/progress/progress-indicator.vue
rename to packages/soy-ui/src/components/progress/source/progress-indicator.vue
index a388a7a2..2663f482 100644
--- a/packages/soy-ui/src/components/progress/progress-indicator.vue
+++ b/packages/soy-ui/src/components/progress/source/progress-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ProgressIndicator } from '@soybean-ui/primitives';
 import { cn, progressVariants } from '@soybean-ui/variants';
-import type { ProgressIndicatorProps } from './types';
+import type { ProgressIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SProgressIndicator'
diff --git a/packages/soy-ui/src/components/progress/progress-root.vue b/packages/soy-ui/src/components/progress/source/progress-root.vue
similarity index 90%
rename from packages/soy-ui/src/components/progress/progress-root.vue
rename to packages/soy-ui/src/components/progress/source/progress-root.vue
index ad998a34..8d8307b1 100644
--- a/packages/soy-ui/src/components/progress/progress-root.vue
+++ b/packages/soy-ui/src/components/progress/source/progress-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ProgressRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, progressVariants } from '@soybean-ui/variants';
-import type { ProgressRootEmits, ProgressRootProps } from './types';
+import type { ProgressRootEmits, ProgressRootProps } from '../types';
 
 defineOptions({
   name: 'SProgressRoot'
diff --git a/packages/soy-ui/src/components/progress/progress.vue b/packages/soy-ui/src/components/progress/source/progress.vue
similarity index 91%
rename from packages/soy-ui/src/components/progress/progress.vue
rename to packages/soy-ui/src/components/progress/source/progress.vue
index 8755b2f7..f3dd1c4f 100644
--- a/packages/soy-ui/src/components/progress/progress.vue
+++ b/packages/soy-ui/src/components/progress/source/progress.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { ProgressEmits, ProgressProps } from '../types';
 import SProgressRoot from './progress-root.vue';
 import SProgressIndicator from './progress-indicator.vue';
-import type { ProgressEmits, ProgressProps } from './types';
 
 defineOptions({
   name: 'SProgress'
diff --git a/packages/soy-ui/src/components/radio/demos/index.ts b/packages/soy-ui/src/components/radio/demos/index.ts
new file mode 100644
index 00000000..b0c06bbb
--- /dev/null
+++ b/packages/soy-ui/src/components/radio/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoRadio from './radio.vue';
+
+export { DemoRadio };
diff --git a/examples/src/ui/radio.vue b/packages/soy-ui/src/components/radio/demos/radio.vue
similarity index 100%
rename from examples/src/ui/radio.vue
rename to packages/soy-ui/src/components/radio/demos/radio.vue
diff --git a/packages/soy-ui/src/components/radio/index.ts b/packages/soy-ui/src/components/radio/index.ts
index d8588627..6e5d8f6d 100644
--- a/packages/soy-ui/src/components/radio/index.ts
+++ b/packages/soy-ui/src/components/radio/index.ts
@@ -1,8 +1,8 @@
-import SRadio from './radio.vue';
-import SRadioControl from './radio-control.vue';
-import SRadioGroup from './radio-group.vue';
-import SRadioIndicator from './radio-indicator.vue';
-import SRadioRoot from './radio-root.vue';
+import SRadio from './source/radio.vue';
+import SRadioControl from './source/radio-control.vue';
+import SRadioGroup from './source/radio-group.vue';
+import SRadioIndicator from './source/radio-indicator.vue';
+import SRadioRoot from './source/radio-root.vue';
 
 export { SRadio, SRadioControl, SRadioGroup, SRadioIndicator, SRadioRoot };
 
diff --git a/packages/soy-ui/src/components/radio/radio-control.vue b/packages/soy-ui/src/components/radio/source/radio-control.vue
similarity index 92%
rename from packages/soy-ui/src/components/radio/radio-control.vue
rename to packages/soy-ui/src/components/radio/source/radio-control.vue
index d28a626c..6a42a8fd 100644
--- a/packages/soy-ui/src/components/radio/radio-control.vue
+++ b/packages/soy-ui/src/components/radio/source/radio-control.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { RadioGroupItem, useForwardProps } from '@soybean-ui/primitives';
 import { cn, radioVariants } from '@soybean-ui/variants';
-import type { RadioControlProps } from './types';
+import type { RadioControlProps } from '../types';
 
 defineOptions({
   name: 'SRadioControl'
diff --git a/packages/soy-ui/src/components/radio/radio-group.vue b/packages/soy-ui/src/components/radio/source/radio-group.vue
similarity index 95%
rename from packages/soy-ui/src/components/radio/radio-group.vue
rename to packages/soy-ui/src/components/radio/source/radio-group.vue
index 71b4d956..7e3b38a0 100644
--- a/packages/soy-ui/src/components/radio/radio-group.vue
+++ b/packages/soy-ui/src/components/radio/source/radio-group.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { RadioGroupRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { RadioGroupRootEmits } from '@soybean-ui/primitives';
 import { cn, radioVariants } from '@soybean-ui/variants';
-import type { RadioGroupProps } from './types';
+import type { RadioGroupProps } from '../types';
 import SRadio from './radio.vue';
 
 defineOptions({
diff --git a/packages/soy-ui/src/components/radio/radio-indicator.vue b/packages/soy-ui/src/components/radio/source/radio-indicator.vue
similarity index 91%
rename from packages/soy-ui/src/components/radio/radio-indicator.vue
rename to packages/soy-ui/src/components/radio/source/radio-indicator.vue
index 110826b2..87427cae 100644
--- a/packages/soy-ui/src/components/radio/radio-indicator.vue
+++ b/packages/soy-ui/src/components/radio/source/radio-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { RadioGroupIndicator, useForwardProps } from '@soybean-ui/primitives';
 import { cn, radioVariants } from '@soybean-ui/variants';
-import type { RadioIndicatorProps } from './types';
+import type { RadioIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SRadioIndicator'
diff --git a/packages/soy-ui/src/components/radio/radio-root.vue b/packages/soy-ui/src/components/radio/source/radio-root.vue
similarity index 89%
rename from packages/soy-ui/src/components/radio/radio-root.vue
rename to packages/soy-ui/src/components/radio/source/radio-root.vue
index 1f506047..5d3b5426 100644
--- a/packages/soy-ui/src/components/radio/radio-root.vue
+++ b/packages/soy-ui/src/components/radio/source/radio-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, radioVariants } from '@soybean-ui/variants';
-import type { RadioRootProps } from './types';
+import type { RadioRootProps } from '../types';
 
 defineOptions({
   name: 'SRadioRoot'
diff --git a/packages/soy-ui/src/components/radio/radio.vue b/packages/soy-ui/src/components/radio/source/radio.vue
similarity index 91%
rename from packages/soy-ui/src/components/radio/radio.vue
rename to packages/soy-ui/src/components/radio/source/radio.vue
index f9271797..e0819e23 100644
--- a/packages/soy-ui/src/components/radio/radio.vue
+++ b/packages/soy-ui/src/components/radio/source/radio.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, useId } from 'vue';
 import { useForwardProps } from '@soybean-ui/primitives';
-import SRadioLabel from '../label/label.vue';
+import SRadioLabel from '../../label/source/label.vue';
+import type { RadioProps } from '../types';
 import SRadioRoot from './radio-root.vue';
 import SRadioControl from './radio-control.vue';
 import SRadioIndicator from './radio-indicator.vue';
-import type { RadioProps } from './types';
 
 defineOptions({
   name: 'SRadio'
diff --git a/packages/soy-ui/src/components/resizable/demos/index.ts b/packages/soy-ui/src/components/resizable/demos/index.ts
new file mode 100644
index 00000000..b1c849a7
--- /dev/null
+++ b/packages/soy-ui/src/components/resizable/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoResizable from './resizable.vue';
+
+export { DemoResizable };
diff --git a/examples/src/ui/resizable.vue b/packages/soy-ui/src/components/resizable/demos/resizable.vue
similarity index 100%
rename from examples/src/ui/resizable.vue
rename to packages/soy-ui/src/components/resizable/demos/resizable.vue
diff --git a/packages/soy-ui/src/components/resizable/index.ts b/packages/soy-ui/src/components/resizable/index.ts
index 3e563246..653715e9 100644
--- a/packages/soy-ui/src/components/resizable/index.ts
+++ b/packages/soy-ui/src/components/resizable/index.ts
@@ -1,6 +1,6 @@
 import { SplitterPanel as SResizablePanel } from '@soybean-ui/primitives';
-import SResizableHandle from './resizable-handle.vue';
-import SResizablePanelGroup from './resizable-panel-group.vue';
+import SResizableHandle from './source/resizable-handle.vue';
+import SResizablePanelGroup from './source/resizable-panel-group.vue';
 
 export { SResizableHandle, SResizablePanel, SResizablePanelGroup };
 
diff --git a/packages/soy-ui/src/components/resizable/resizable-handle.vue b/packages/soy-ui/src/components/resizable/source/resizable-handle.vue
similarity index 98%
rename from packages/soy-ui/src/components/resizable/resizable-handle.vue
rename to packages/soy-ui/src/components/resizable/source/resizable-handle.vue
index 869797e3..e2dd4493 100644
--- a/packages/soy-ui/src/components/resizable/resizable-handle.vue
+++ b/packages/soy-ui/src/components/resizable/source/resizable-handle.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { Slot, SplitterResizeHandle, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, resizableVariants } from '@soybean-ui/variants';
 import { GripVertical } from 'lucide-vue-next';
-import type { ResizableHandleEmits, ResizableHandleProps } from './types';
+import type { ResizableHandleEmits, ResizableHandleProps } from '../types';
 
 defineOptions({
   name: 'SResizableHandle'
diff --git a/packages/soy-ui/src/components/resizable/resizable-panel-group.vue b/packages/soy-ui/src/components/resizable/source/resizable-panel-group.vue
similarity index 97%
rename from packages/soy-ui/src/components/resizable/resizable-panel-group.vue
rename to packages/soy-ui/src/components/resizable/source/resizable-panel-group.vue
index 8554a2e2..e0ce459c 100644
--- a/packages/soy-ui/src/components/resizable/resizable-panel-group.vue
+++ b/packages/soy-ui/src/components/resizable/source/resizable-panel-group.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SplitterGroup, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, resizableVariants } from '@soybean-ui/variants';
-import type { ResizablePanelGroupEmits, ResizablePanelGroupProps } from './types';
+import type { ResizablePanelGroupEmits, ResizablePanelGroupProps } from '../types';
 
 defineOptions({
   name: 'SResizablePanelGroup'
diff --git a/packages/soy-ui/src/components/scroll-area/demos/index.ts b/packages/soy-ui/src/components/scroll-area/demos/index.ts
new file mode 100644
index 00000000..c7ea917b
--- /dev/null
+++ b/packages/soy-ui/src/components/scroll-area/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoScrollArea from './scroll-area.vue';
+
+export { DemoScrollArea };
diff --git a/examples/src/ui/scroll-area.vue b/packages/soy-ui/src/components/scroll-area/demos/scroll-area.vue
similarity index 100%
rename from examples/src/ui/scroll-area.vue
rename to packages/soy-ui/src/components/scroll-area/demos/scroll-area.vue
diff --git a/packages/soy-ui/src/components/scroll-area/index.ts b/packages/soy-ui/src/components/scroll-area/index.ts
index 7ecf7408..ba8f2556 100644
--- a/packages/soy-ui/src/components/scroll-area/index.ts
+++ b/packages/soy-ui/src/components/scroll-area/index.ts
@@ -1,9 +1,9 @@
 import { ScrollAreaCorner as SScrollAreaCorner } from '@soybean-ui/primitives';
-import SScrollArea from './scroll-area.vue';
-import SScrollAreaRoot from './scroll-area-root.vue';
-import SScrollAreaScrollbar from './scroll-area-scrollbar.vue';
-import SScrollAreaThumb from './scroll-area-thumb.vue';
-import SScrollAreaViewport from './scroll-area-viewport.vue';
+import SScrollArea from './source/scroll-area.vue';
+import SScrollAreaRoot from './source/scroll-area-root.vue';
+import SScrollAreaScrollbar from './source/scroll-area-scrollbar.vue';
+import SScrollAreaThumb from './source/scroll-area-thumb.vue';
+import SScrollAreaViewport from './source/scroll-area-viewport.vue';
 
 export { SScrollArea, SScrollAreaCorner, SScrollAreaRoot, SScrollAreaScrollbar, SScrollAreaThumb, SScrollAreaViewport };
 
diff --git a/packages/soy-ui/src/components/scroll-area/scroll-area-root.vue b/packages/soy-ui/src/components/scroll-area/source/scroll-area-root.vue
similarity index 91%
rename from packages/soy-ui/src/components/scroll-area/scroll-area-root.vue
rename to packages/soy-ui/src/components/scroll-area/source/scroll-area-root.vue
index d9b66e5c..66613e3d 100644
--- a/packages/soy-ui/src/components/scroll-area/scroll-area-root.vue
+++ b/packages/soy-ui/src/components/scroll-area/source/scroll-area-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ScrollAreaRoot, useForwardProps } from '@soybean-ui/primitives';
 import { cn, scrollAreaVariants } from '@soybean-ui/variants';
-import type { ScrollAreaRootProps } from './types';
+import type { ScrollAreaRootProps } from '../types';
 
 defineOptions({
   name: 'SScrollAreaRoot'
diff --git a/packages/soy-ui/src/components/scroll-area/scroll-area-scrollbar.vue b/packages/soy-ui/src/components/scroll-area/source/scroll-area-scrollbar.vue
similarity index 92%
rename from packages/soy-ui/src/components/scroll-area/scroll-area-scrollbar.vue
rename to packages/soy-ui/src/components/scroll-area/source/scroll-area-scrollbar.vue
index 7e6d8b13..acda7daf 100644
--- a/packages/soy-ui/src/components/scroll-area/scroll-area-scrollbar.vue
+++ b/packages/soy-ui/src/components/scroll-area/source/scroll-area-scrollbar.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ScrollAreaScrollbar, useForwardProps } from '@soybean-ui/primitives';
 import { cn, scrollAreaVariants } from '@soybean-ui/variants';
-import type { ScrollAreaScrollbarProps } from './types';
+import type { ScrollAreaScrollbarProps } from '../types';
 
 defineOptions({
   name: 'SScrollAreaThumb'
diff --git a/packages/soy-ui/src/components/scroll-area/scroll-area-thumb.vue b/packages/soy-ui/src/components/scroll-area/source/scroll-area-thumb.vue
similarity index 90%
rename from packages/soy-ui/src/components/scroll-area/scroll-area-thumb.vue
rename to packages/soy-ui/src/components/scroll-area/source/scroll-area-thumb.vue
index ee244a54..2ce9c5c9 100644
--- a/packages/soy-ui/src/components/scroll-area/scroll-area-thumb.vue
+++ b/packages/soy-ui/src/components/scroll-area/source/scroll-area-thumb.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ScrollAreaThumb } from '@soybean-ui/primitives';
 import { cn, scrollAreaVariants } from '@soybean-ui/variants';
-import type { ScrollAreaThumbProps } from './types';
+import type { ScrollAreaThumbProps } from '../types';
 
 defineOptions({
   name: 'SScrollAreaThumb'
diff --git a/packages/soy-ui/src/components/scroll-area/scroll-area-viewport.vue b/packages/soy-ui/src/components/scroll-area/source/scroll-area-viewport.vue
similarity index 91%
rename from packages/soy-ui/src/components/scroll-area/scroll-area-viewport.vue
rename to packages/soy-ui/src/components/scroll-area/source/scroll-area-viewport.vue
index 639854d3..60362a4b 100644
--- a/packages/soy-ui/src/components/scroll-area/scroll-area-viewport.vue
+++ b/packages/soy-ui/src/components/scroll-area/source/scroll-area-viewport.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ScrollAreaViewport, useForwardProps } from '@soybean-ui/primitives';
 import { cn, scrollAreaVariants } from '@soybean-ui/variants';
-import type { ScrollAreaViewportProps } from './types';
+import type { ScrollAreaViewportProps } from '../types';
 
 defineOptions({
   name: 'SScrollAreaViewport'
diff --git a/packages/soy-ui/src/components/scroll-area/scroll-area.vue b/packages/soy-ui/src/components/scroll-area/source/scroll-area.vue
similarity index 95%
rename from packages/soy-ui/src/components/scroll-area/scroll-area.vue
rename to packages/soy-ui/src/components/scroll-area/source/scroll-area.vue
index fbb521a4..758e3dfd 100644
--- a/packages/soy-ui/src/components/scroll-area/scroll-area.vue
+++ b/packages/soy-ui/src/components/scroll-area/source/scroll-area.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ScrollAreaCorner, useForwardProps } from '@soybean-ui/primitives';
+import type { ScrollAreaProps } from '../types';
 import SScrollAreaRoot from './scroll-area-root.vue';
 import SScrollAreaViewport from './scroll-area-viewport.vue';
 import SScrollAreaScrollbar from './scroll-area-scrollbar.vue';
 import SScrollAreaThumb from './scroll-area-thumb.vue';
-import type { ScrollAreaProps } from './types';
 
 defineOptions({
   name: 'SScrollArea'
diff --git a/packages/soy-ui/src/components/segment/demos/index.ts b/packages/soy-ui/src/components/segment/demos/index.ts
new file mode 100644
index 00000000..561e94f9
--- /dev/null
+++ b/packages/soy-ui/src/components/segment/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSegment from './segment.vue';
+
+export { DemoSegment };
diff --git a/examples/src/ui/segment.vue b/packages/soy-ui/src/components/segment/demos/segment.vue
similarity index 100%
rename from examples/src/ui/segment.vue
rename to packages/soy-ui/src/components/segment/demos/segment.vue
diff --git a/packages/soy-ui/src/components/segment/index.ts b/packages/soy-ui/src/components/segment/index.ts
index baf67326..2e225c22 100644
--- a/packages/soy-ui/src/components/segment/index.ts
+++ b/packages/soy-ui/src/components/segment/index.ts
@@ -1,8 +1,8 @@
-import SSegment from './segment.vue';
-import SSegmentIndicator from './segment-indicator.vue';
-import SSegmentList from './segment-list.vue';
-import SSegmentRoot from './segment-root.vue';
-import SSegmentTrigger from './segment-trigger.vue';
+import SSegment from './source/segment.vue';
+import SSegmentIndicator from './source/segment-indicator.vue';
+import SSegmentList from './source/segment-list.vue';
+import SSegmentRoot from './source/segment-root.vue';
+import SSegmentTrigger from './source/segment-trigger.vue';
 
 export { SSegment, SSegmentIndicator, SSegmentList, SSegmentRoot, SSegmentTrigger };
 
diff --git a/packages/soy-ui/src/components/segment/segment-indicator.vue b/packages/soy-ui/src/components/segment/source/segment-indicator.vue
similarity index 92%
rename from packages/soy-ui/src/components/segment/segment-indicator.vue
rename to packages/soy-ui/src/components/segment/source/segment-indicator.vue
index 32b7b381..ab0acd06 100644
--- a/packages/soy-ui/src/components/segment/segment-indicator.vue
+++ b/packages/soy-ui/src/components/segment/source/segment-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TabsIndicator } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { SegmentIndicatorProps } from './types';
+import type { SegmentIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SSegmentIndicator'
diff --git a/packages/soy-ui/src/components/segment/segment-list.vue b/packages/soy-ui/src/components/segment/source/segment-list.vue
similarity index 91%
rename from packages/soy-ui/src/components/segment/segment-list.vue
rename to packages/soy-ui/src/components/segment/source/segment-list.vue
index 81c67c3c..1cb215bc 100644
--- a/packages/soy-ui/src/components/segment/segment-list.vue
+++ b/packages/soy-ui/src/components/segment/source/segment-list.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TabsList } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { SegmentListProps } from './types';
+import type { SegmentListProps } from '../types';
 
 defineOptions({
   name: 'SSegmentList'
diff --git a/packages/soy-ui/src/components/segment/segment-root.vue b/packages/soy-ui/src/components/segment/source/segment-root.vue
similarity index 92%
rename from packages/soy-ui/src/components/segment/segment-root.vue
rename to packages/soy-ui/src/components/segment/source/segment-root.vue
index aef58d13..9daa5a1e 100644
--- a/packages/soy-ui/src/components/segment/segment-root.vue
+++ b/packages/soy-ui/src/components/segment/source/segment-root.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { TabsRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
 import type { StringOrNumber } from '@soybean-ui/primitives';
-import type { SegmentRootEmits, SegmentRootProps } from './types';
+import type { SegmentRootEmits, SegmentRootProps } from '../types';
 
 defineOptions({
   name: 'SSegmentRoot'
diff --git a/packages/soy-ui/src/components/segment/segment-trigger.vue b/packages/soy-ui/src/components/segment/source/segment-trigger.vue
similarity index 92%
rename from packages/soy-ui/src/components/segment/segment-trigger.vue
rename to packages/soy-ui/src/components/segment/source/segment-trigger.vue
index ca92176c..9f975ec0 100644
--- a/packages/soy-ui/src/components/segment/segment-trigger.vue
+++ b/packages/soy-ui/src/components/segment/source/segment-trigger.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TabsTrigger, useForwardProps } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { SegmentTriggerProps } from './types';
+import type { SegmentTriggerProps } from '../types';
 
 defineOptions({
   name: 'SSegmentTrigger'
diff --git a/packages/soy-ui/src/components/segment/segment.vue b/packages/soy-ui/src/components/segment/source/segment.vue
similarity index 98%
rename from packages/soy-ui/src/components/segment/segment.vue
rename to packages/soy-ui/src/components/segment/source/segment.vue
index 9eacb96f..01b4511f 100644
--- a/packages/soy-ui/src/components/segment/segment.vue
+++ b/packages/soy-ui/src/components/segment/source/segment.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts" generic="T extends SegmentOptionData = SegmentOptionData">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { SegmentEmits, SegmentOptionData, SegmentProps } from '../types';
 import SSegmentRoot from './segment-root.vue';
 import SSegmentList from './segment-list.vue';
 import SSegmentTrigger from './segment-trigger.vue';
 import SSegmentIndicator from './segment-indicator.vue';
-import type { SegmentEmits, SegmentOptionData, SegmentProps } from './types';
 
 defineOptions({
   name: 'SSegment'
diff --git a/packages/soy-ui/src/components/select/demos/index.ts b/packages/soy-ui/src/components/select/demos/index.ts
new file mode 100644
index 00000000..04318626
--- /dev/null
+++ b/packages/soy-ui/src/components/select/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSelect from './select.vue';
+
+export { DemoSelect };
diff --git a/examples/src/ui/select.vue b/packages/soy-ui/src/components/select/demos/select.vue
similarity index 100%
rename from examples/src/ui/select.vue
rename to packages/soy-ui/src/components/select/demos/select.vue
diff --git a/packages/soy-ui/src/components/select/index.ts b/packages/soy-ui/src/components/select/index.ts
index 115d6efb..c3cc139f 100644
--- a/packages/soy-ui/src/components/select/index.ts
+++ b/packages/soy-ui/src/components/select/index.ts
@@ -5,18 +5,18 @@ import {
   SelectRoot as SSelectRoot,
   SelectValue as SSelectValue
 } from '@soybean-ui/primitives';
-import SSelect from './select.vue';
-import SSelectContent from './select-content.vue';
-import SSelectIcon from './select-icon.vue';
-import SSelectItemIndicator from './select-item-indicator.vue';
-import SSelectItem from './select-item.vue';
-import SSelectLabel from './select-label.vue';
-import SSelectOption from './select-option.vue';
-import SSelectScrollDownButton from './select-scroll-down-button.vue';
-import SSelectScrollUpButton from './select-scroll-up-button.vue';
-import SSelectSeparator from './select-separator.vue';
-import SSelectTrigger from './select-trigger.vue';
-import SSelectViewport from './select-viewport.vue';
+import SSelect from './source/select.vue';
+import SSelectContent from './source/select-content.vue';
+import SSelectIcon from './source/select-icon.vue';
+import SSelectItemIndicator from './source/select-item-indicator.vue';
+import SSelectItem from './source/select-item.vue';
+import SSelectLabel from './source/select-label.vue';
+import SSelectOption from './source/select-option.vue';
+import SSelectScrollDownButton from './source/select-scroll-down-button.vue';
+import SSelectScrollUpButton from './source/select-scroll-up-button.vue';
+import SSelectSeparator from './source/select-separator.vue';
+import SSelectTrigger from './source/select-trigger.vue';
+import SSelectViewport from './source/select-viewport.vue';
 
 export {
   SSelect,
diff --git a/packages/soy-ui/src/components/select/select-content.vue b/packages/soy-ui/src/components/select/source/select-content.vue
similarity index 92%
rename from packages/soy-ui/src/components/select/select-content.vue
rename to packages/soy-ui/src/components/select/source/select-content.vue
index bb340845..296827a1 100644
--- a/packages/soy-ui/src/components/select/select-content.vue
+++ b/packages/soy-ui/src/components/select/source/select-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SelectContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
-import type { SelectContentEmits, SelectContentProps } from './types';
+import type { SelectContentEmits, SelectContentProps } from '../types';
 
 defineOptions({
   name: 'SSelectContent'
diff --git a/packages/soy-ui/src/components/select/select-icon.vue b/packages/soy-ui/src/components/select/source/select-icon.vue
similarity index 91%
rename from packages/soy-ui/src/components/select/select-icon.vue
rename to packages/soy-ui/src/components/select/source/select-icon.vue
index b60cd39a..9b364f11 100644
--- a/packages/soy-ui/src/components/select/select-icon.vue
+++ b/packages/soy-ui/src/components/select/source/select-icon.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { SelectIcon } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
 import { ChevronsUpDown } from 'lucide-vue-next';
-import type { SelectIconProps } from './types';
+import type { SelectIconProps } from '../types';
 
 defineOptions({
   name: 'SSelectIcon'
diff --git a/packages/soy-ui/src/components/select/select-item-indicator.vue b/packages/soy-ui/src/components/select/source/select-item-indicator.vue
similarity index 91%
rename from packages/soy-ui/src/components/select/select-item-indicator.vue
rename to packages/soy-ui/src/components/select/source/select-item-indicator.vue
index 87ccc951..035bf9e6 100644
--- a/packages/soy-ui/src/components/select/select-item-indicator.vue
+++ b/packages/soy-ui/src/components/select/source/select-item-indicator.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { SelectItemIndicator } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
 import { Check } from 'lucide-vue-next';
-import type { SelectItemIndicatorProps } from './types';
+import type { SelectItemIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SSelectItemIndicator'
diff --git a/packages/soy-ui/src/components/select/select-item.vue b/packages/soy-ui/src/components/select/source/select-item.vue
similarity index 92%
rename from packages/soy-ui/src/components/select/select-item.vue
rename to packages/soy-ui/src/components/select/source/select-item.vue
index 3e0e88de..48f9ef19 100644
--- a/packages/soy-ui/src/components/select/select-item.vue
+++ b/packages/soy-ui/src/components/select/source/select-item.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SelectItem, useForwardProps } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
-import type { SelectItemProps } from './types';
+import type { SelectItemProps } from '../types';
 
 defineOptions({
   name: 'SSelectItem'
diff --git a/packages/soy-ui/src/components/select/select-label.vue b/packages/soy-ui/src/components/select/source/select-label.vue
similarity index 91%
rename from packages/soy-ui/src/components/select/select-label.vue
rename to packages/soy-ui/src/components/select/source/select-label.vue
index 7b251fa9..91de58ea 100644
--- a/packages/soy-ui/src/components/select/select-label.vue
+++ b/packages/soy-ui/src/components/select/source/select-label.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SelectLabel } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
-import type { SelectLabelProps } from './types';
+import type { SelectLabelProps } from '../types';
 
 defineOptions({
   name: 'SSelectLabel'
diff --git a/packages/soy-ui/src/components/select/select-option.vue b/packages/soy-ui/src/components/select/source/select-option.vue
similarity index 93%
rename from packages/soy-ui/src/components/select/select-option.vue
rename to packages/soy-ui/src/components/select/source/select-option.vue
index 9b9a00ed..06b3dfa6 100644
--- a/packages/soy-ui/src/components/select/select-option.vue
+++ b/packages/soy-ui/src/components/select/source/select-option.vue
@@ -2,11 +2,11 @@
 import { computed } from 'vue';
 import { SelectGroup } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { SelectOptionData, SelectOptionProps } from '../types';
+import { isGroupOption } from '../shared';
 import SSelectLabel from './select-label.vue';
 import SSelectSeparator from './select-separator.vue';
 import SSelectSingleOption from './select-single-option.vue';
-import type { SelectOptionData, SelectOptionProps } from './types';
-import { isGroupOption } from './shared';
 
 defineOptions({
   name: 'SSelectOption',
diff --git a/packages/soy-ui/src/components/select/select-scroll-down-button.vue b/packages/soy-ui/src/components/select/source/select-scroll-down-button.vue
similarity index 91%
rename from packages/soy-ui/src/components/select/select-scroll-down-button.vue
rename to packages/soy-ui/src/components/select/source/select-scroll-down-button.vue
index c0fa65bc..a8f73df3 100644
--- a/packages/soy-ui/src/components/select/select-scroll-down-button.vue
+++ b/packages/soy-ui/src/components/select/source/select-scroll-down-button.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { SelectScrollDownButton } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
 import { ChevronDown } from 'lucide-vue-next';
-import type { SelectScrollDownButtonProps } from './types';
+import type { SelectScrollDownButtonProps } from '../types';
 
 defineOptions({
   name: 'SSelectScrollDownButton'
diff --git a/packages/soy-ui/src/components/select/select-scroll-up-button.vue b/packages/soy-ui/src/components/select/source/select-scroll-up-button.vue
similarity index 91%
rename from packages/soy-ui/src/components/select/select-scroll-up-button.vue
rename to packages/soy-ui/src/components/select/source/select-scroll-up-button.vue
index 79c5bc36..d4a1f474 100644
--- a/packages/soy-ui/src/components/select/select-scroll-up-button.vue
+++ b/packages/soy-ui/src/components/select/source/select-scroll-up-button.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { SelectScrollUpButton } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
 import { ChevronUp } from 'lucide-vue-next';
-import type { SelectScrollUpButtonProps } from './types';
+import type { SelectScrollUpButtonProps } from '../types';
 
 defineOptions({
   name: 'SSelectScrollUpButton'
diff --git a/packages/soy-ui/src/components/select/select-separator.vue b/packages/soy-ui/src/components/select/source/select-separator.vue
similarity index 90%
rename from packages/soy-ui/src/components/select/select-separator.vue
rename to packages/soy-ui/src/components/select/source/select-separator.vue
index 4cdcc4d7..297fade5 100644
--- a/packages/soy-ui/src/components/select/select-separator.vue
+++ b/packages/soy-ui/src/components/select/source/select-separator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SelectSeparator } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
-import type { SelectSeparatorProps } from './types';
+import type { SelectSeparatorProps } from '../types';
 
 defineOptions({
   name: 'SSelectSeparator'
diff --git a/packages/soy-ui/src/components/select/select-single-option.vue b/packages/soy-ui/src/components/select/source/select-single-option.vue
similarity index 93%
rename from packages/soy-ui/src/components/select/select-single-option.vue
rename to packages/soy-ui/src/components/select/source/select-single-option.vue
index 736b11e3..ad1ea7fc 100644
--- a/packages/soy-ui/src/components/select/select-single-option.vue
+++ b/packages/soy-ui/src/components/select/source/select-single-option.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { SelectItemText } from '@soybean-ui/primitives';
+import type { SelectSingleOptionProps } from '../types';
 import SSelectItem from './select-item.vue';
 import SSelectItemIndicator from './select-item-indicator.vue';
 import SSelectSeparator from './select-separator.vue';
-import type { SelectSingleOptionProps } from './types';
 
 defineOptions({
   name: 'SSelectSingleOption',
diff --git a/packages/soy-ui/src/components/select/select-trigger.vue b/packages/soy-ui/src/components/select/source/select-trigger.vue
similarity index 91%
rename from packages/soy-ui/src/components/select/select-trigger.vue
rename to packages/soy-ui/src/components/select/source/select-trigger.vue
index 45a0f296..87b36b19 100644
--- a/packages/soy-ui/src/components/select/select-trigger.vue
+++ b/packages/soy-ui/src/components/select/source/select-trigger.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SelectTrigger } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
-import type { SelectTriggerProps } from './types';
+import type { SelectTriggerProps } from '../types';
 
 defineOptions({
   name: 'SSelectTrigger'
diff --git a/packages/soy-ui/src/components/select/select-viewport.vue b/packages/soy-ui/src/components/select/source/select-viewport.vue
similarity index 91%
rename from packages/soy-ui/src/components/select/select-viewport.vue
rename to packages/soy-ui/src/components/select/source/select-viewport.vue
index dad1997f..79854705 100644
--- a/packages/soy-ui/src/components/select/select-viewport.vue
+++ b/packages/soy-ui/src/components/select/source/select-viewport.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SelectViewport } from '@soybean-ui/primitives';
 import { cn, selectVariants } from '@soybean-ui/variants';
-import type { SelectViewportProps } from './types';
+import type { SelectViewportProps } from '../types';
 
 defineOptions({
   name: 'SSelectViewport'
diff --git a/packages/soy-ui/src/components/select/select.vue b/packages/soy-ui/src/components/select/source/select.vue
similarity index 99%
rename from packages/soy-ui/src/components/select/select.vue
rename to packages/soy-ui/src/components/select/source/select.vue
index 4aac53d7..d1d40ce6 100644
--- a/packages/soy-ui/src/components/select/select.vue
+++ b/packages/soy-ui/src/components/select/source/select.vue
@@ -7,6 +7,7 @@ import {
   usePickForwardProps
 } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { SelectEmits, SelectOptionData, SelectProps } from '../types';
 import SSelectContent from './select-content.vue';
 import SSelectTrigger from './select-trigger.vue';
 import SSelectViewport from './select-viewport.vue';
@@ -14,7 +15,6 @@ import SSelectIcon from './select-icon.vue';
 import SSelectScrollUpButton from './select-scroll-up-button.vue';
 import SSelectScrollDownButton from './select-scroll-down-button.vue';
 import SSelectOption from './select-option.vue';
-import type { SelectEmits, SelectOptionData, SelectProps } from './types';
 
 defineOptions({
   name: 'SSelect'
diff --git a/packages/soy-ui/src/components/separator/demos/index.ts b/packages/soy-ui/src/components/separator/demos/index.ts
new file mode 100644
index 00000000..9bc16be8
--- /dev/null
+++ b/packages/soy-ui/src/components/separator/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSeparator from './separator.vue';
+
+export { DemoSeparator };
diff --git a/examples/src/ui/separator.vue b/packages/soy-ui/src/components/separator/demos/separator.vue
similarity index 100%
rename from examples/src/ui/separator.vue
rename to packages/soy-ui/src/components/separator/demos/separator.vue
diff --git a/packages/soy-ui/src/components/separator/index.ts b/packages/soy-ui/src/components/separator/index.ts
index af07ee33..3f60817c 100644
--- a/packages/soy-ui/src/components/separator/index.ts
+++ b/packages/soy-ui/src/components/separator/index.ts
@@ -1,6 +1,6 @@
-import SSeparator from './separator.vue';
-import SSeparatorLabel from './separator-label.vue';
-import SSeparatorRoot from './separator-root.vue';
+import SSeparator from './source/separator.vue';
+import SSeparatorLabel from './source/separator-label.vue';
+import SSeparatorRoot from './source/separator-root.vue';
 
 export { SSeparator, SSeparatorLabel, SSeparatorRoot };
 
diff --git a/packages/soy-ui/src/components/separator/separator-label.vue b/packages/soy-ui/src/components/separator/source/separator-label.vue
similarity index 89%
rename from packages/soy-ui/src/components/separator/separator-label.vue
rename to packages/soy-ui/src/components/separator/source/separator-label.vue
index 98aab062..7ab5e796 100644
--- a/packages/soy-ui/src/components/separator/separator-label.vue
+++ b/packages/soy-ui/src/components/separator/source/separator-label.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, separatorVariants } from '@soybean-ui/variants';
-import type { SeparatorLabelProps } from './types';
+import type { SeparatorLabelProps } from '../types';
 
 defineOptions({
   name: 'SSeparatorLabel'
diff --git a/packages/soy-ui/src/components/separator/separator-root.vue b/packages/soy-ui/src/components/separator/source/separator-root.vue
similarity index 91%
rename from packages/soy-ui/src/components/separator/separator-root.vue
rename to packages/soy-ui/src/components/separator/source/separator-root.vue
index 0a12eed1..7b4d00cc 100644
--- a/packages/soy-ui/src/components/separator/separator-root.vue
+++ b/packages/soy-ui/src/components/separator/source/separator-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { Separator } from '@soybean-ui/primitives';
 import { cn, separatorVariants } from '@soybean-ui/variants';
-import type { SeparatorRootProps } from './types';
+import type { SeparatorRootProps } from '../types';
 
 defineOptions({
   name: 'SSeparatorRoot'
diff --git a/packages/soy-ui/src/components/separator/separator.vue b/packages/soy-ui/src/components/separator/source/separator.vue
similarity index 94%
rename from packages/soy-ui/src/components/separator/separator.vue
rename to packages/soy-ui/src/components/separator/source/separator.vue
index 8392abb0..d835229a 100644
--- a/packages/soy-ui/src/components/separator/separator.vue
+++ b/packages/soy-ui/src/components/separator/source/separator.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useForwardProps } from '@soybean-ui/primitives';
+import type { SeparatorProps } from '../types';
 import SSeparatorRoot from './separator-root.vue';
 import SSeparatorLabel from './separator-label.vue';
-import type { SeparatorProps } from './types';
 
 defineOptions({
   name: 'SSeparator'
diff --git a/packages/soy-ui/src/components/sheet/demos/index.ts b/packages/soy-ui/src/components/sheet/demos/index.ts
new file mode 100644
index 00000000..b598ef7b
--- /dev/null
+++ b/packages/soy-ui/src/components/sheet/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSheet from './sheet.vue';
+
+export { DemoSheet };
diff --git a/examples/src/ui/sheet.vue b/packages/soy-ui/src/components/sheet/demos/sheet.vue
similarity index 100%
rename from examples/src/ui/sheet.vue
rename to packages/soy-ui/src/components/sheet/demos/sheet.vue
diff --git a/packages/soy-ui/src/components/sheet/index.ts b/packages/soy-ui/src/components/sheet/index.ts
index df13bd74..756ab8fb 100644
--- a/packages/soy-ui/src/components/sheet/index.ts
+++ b/packages/soy-ui/src/components/sheet/index.ts
@@ -1,12 +1,12 @@
 import { DialogTrigger as SSheetTrigger } from '@soybean-ui/primitives';
-import SSheetCloseIcon from '../dialog/dialog-close-icon.vue';
-import SSheetDescription from '../dialog/dialog-description.vue';
-import SSheetFooter from '../dialog/dialog-footer.vue';
-import SSheetHeader from '../dialog/dialog-header.vue';
-import SSheetOverlay from '../dialog/dialog-overlay.vue';
-import SSheetTitle from '../dialog/dialog-title.vue';
-import SSheet from './sheet.vue';
-import SSheetContent from './sheet-content.vue';
+import SSheetCloseIcon from '../dialog/source/dialog-close-icon.vue';
+import SSheetDescription from '../dialog/source/dialog-description.vue';
+import SSheetFooter from '../dialog/source/dialog-footer.vue';
+import SSheetHeader from '../dialog/source/dialog-header.vue';
+import SSheetOverlay from '../dialog/source/dialog-overlay.vue';
+import SSheetTitle from '../dialog/source/dialog-title.vue';
+import SSheet from './source/sheet.vue';
+import SSheetContent from './source/sheet-content.vue';
 
 export {
   SSheet,
diff --git a/packages/soy-ui/src/components/sheet/sheet-content.vue b/packages/soy-ui/src/components/sheet/source/sheet-content.vue
similarity index 90%
rename from packages/soy-ui/src/components/sheet/sheet-content.vue
rename to packages/soy-ui/src/components/sheet/source/sheet-content.vue
index dd2072fe..752103a8 100644
--- a/packages/soy-ui/src/components/sheet/sheet-content.vue
+++ b/packages/soy-ui/src/components/sheet/source/sheet-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { DialogContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, sheetVariants } from '@soybean-ui/variants';
-import type { SheetContentEmits, SheetContentProps } from './types';
+import type { SheetContentEmits, SheetContentProps } from '../types';
 
 defineOptions({
   name: 'SSheetContent'
diff --git a/packages/soy-ui/src/components/sheet/sheet.vue b/packages/soy-ui/src/components/sheet/source/sheet.vue
similarity index 96%
rename from packages/soy-ui/src/components/sheet/sheet.vue
rename to packages/soy-ui/src/components/sheet/source/sheet.vue
index 178a21cb..7980b7f6 100644
--- a/packages/soy-ui/src/components/sheet/sheet.vue
+++ b/packages/soy-ui/src/components/sheet/source/sheet.vue
@@ -15,9 +15,9 @@ import {
   SDialogHeader,
   SDialogOverlay,
   SDialogTitle
-} from '../dialog';
+} from '../../dialog';
+import type { SheetEmits, SheetProps } from '../types';
 import SSheetContent from './sheet-content.vue';
-import type { SheetEmits, SheetProps } from './types';
 
 defineOptions({
   name: 'SSheet'
diff --git a/packages/soy-ui/src/components/sidebar-menu/demos/index.ts b/packages/soy-ui/src/components/sidebar-menu/demos/index.ts
new file mode 100644
index 00000000..c1e0f763
--- /dev/null
+++ b/packages/soy-ui/src/components/sidebar-menu/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSidebarMenu from './sidebar-menu.vue';
+
+export { DemoSidebarMenu };
diff --git a/examples/src/ui/sidebar-menu.vue b/packages/soy-ui/src/components/sidebar-menu/demos/sidebar-menu.vue
similarity index 100%
rename from examples/src/ui/sidebar-menu.vue
rename to packages/soy-ui/src/components/sidebar-menu/demos/sidebar-menu.vue
diff --git a/packages/soy-ui/src/components/sidebar-menu/index.ts b/packages/soy-ui/src/components/sidebar-menu/index.ts
index 042919c6..141879aa 100644
--- a/packages/soy-ui/src/components/sidebar-menu/index.ts
+++ b/packages/soy-ui/src/components/sidebar-menu/index.ts
@@ -1,12 +1,12 @@
-import SSidebarMenu from './sidebar-menu.vue';
-import SSidebarMenuRoot from './sidebar-menu-root.vue';
-import SSidebarMenuGroup from './sidebar-menu-group.vue';
-import SSidebarMenuChildGroup from './sidebar-menu-child-group.vue';
-import SSidebarMenuGroupLabel from './sidebar-menu-group-label.vue';
-import SSidebarMenuOption from './sidebar-menu-option.vue';
-import SSidebarMenuItem from './sidebar-menu-item.vue';
-import SSidebarMenuItemLink from './sidebar-menu-item-link.vue';
-import SSidebarMenuCollapsibleIcon from './sidebar-menu-collapsible-icon.vue';
+import SSidebarMenu from './source/sidebar-menu.vue';
+import SSidebarMenuRoot from './source/sidebar-menu-root.vue';
+import SSidebarMenuGroup from './source/sidebar-menu-group.vue';
+import SSidebarMenuChildGroup from './source/sidebar-menu-child-group.vue';
+import SSidebarMenuGroupLabel from './source/sidebar-menu-group-label.vue';
+import SSidebarMenuOption from './source/sidebar-menu-option.vue';
+import SSidebarMenuItem from './source/sidebar-menu-item.vue';
+import SSidebarMenuItemLink from './source/sidebar-menu-item-link.vue';
+import SSidebarMenuCollapsibleIcon from './source/sidebar-menu-collapsible-icon.vue';
 
 export {
   SSidebarMenu,
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-child-group.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-child-group.vue
similarity index 88%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-child-group.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-child-group.vue
index 2a5a3105..5f08684b 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-child-group.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-child-group.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
-import type { SidebarMenuChildGroupProps } from './types';
+import type { SidebarMenuChildGroupProps } from '../types';
 
 defineOptions({
   name: 'SSidebarMenuChildGroup'
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-collapsible-icon.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-collapsible-icon.vue
similarity index 88%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-collapsible-icon.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-collapsible-icon.vue
index 32d06c04..67f7c2fb 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-collapsible-icon.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-collapsible-icon.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
 import { ChevronRight } from 'lucide-vue-next';
-import type { SidebarMenuCollapsibleIconProps } from './types';
+import type { SidebarMenuCollapsibleIconProps } from '../types';
 
 defineOptions({
   name: 'SSidebarMenuCollapsibleIcon'
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-group-label.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-group-label.vue
similarity index 92%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-group-label.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-group-label.vue
index 1d2fd152..684a197f 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-group-label.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-group-label.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
-import type { SidebarMenuGroupLabelProps } from './types';
+import type { SidebarMenuGroupLabelProps } from '../types';
 
 defineOptions({
   name: 'SSidebarMenuGroupLabel'
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-group.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-group.vue
similarity index 88%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-group.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-group.vue
index 2abe91f1..987688fc 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-group.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-group.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
-import type { SidebarMenuGroupProps } from './types';
+import type { SidebarMenuGroupProps } from '../types';
 
 defineOptions({
   name: 'SSidebarMenuGroup'
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-item-link.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-item-link.vue
similarity index 90%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-item-link.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-item-link.vue
index 590752d3..1a91a07a 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-item-link.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-item-link.vue
@@ -2,12 +2,12 @@
 import { computed } from 'vue';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
 import { ArrowUpRight, Ellipsis } from 'lucide-vue-next';
-import { SLink } from '../link';
-import STooltip from '../tooltip/tooltip.vue';
-import SChip from '../chip/chip.vue';
-import SDropdownMenu from '../dropdown-menu/dropdown-menu.vue';
-import SBadge from '../badge/badge.vue';
-import type { SidebarMenuBadgeProps, SidebarMenuChipProps, SidebarMenuItemLinkProps } from './types';
+import { SLink } from '../../link';
+import STooltip from '../../tooltip/source/tooltip.vue';
+import SChip from '../../chip/source/chip.vue';
+import SDropdownMenu from '../../dropdown-menu/source/dropdown-menu.vue';
+import SBadge from '../../badge/source/badge.vue';
+import type { SidebarMenuBadgeProps, SidebarMenuChipProps, SidebarMenuItemLinkProps } from '../types';
 
 defineOptions({
   name: 'SSidebarMenuItemLink'
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-item.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-item.vue
similarity index 90%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-item.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-item.vue
index 883ff06d..8e6a1dbf 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-item.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-item.vue
@@ -2,11 +2,11 @@
 import { computed } from 'vue';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
 import { Ellipsis } from 'lucide-vue-next';
-import STooltip from '../tooltip/tooltip.vue';
-import SChip from '../chip/chip.vue';
-import SDropdownMenu from '../dropdown-menu/dropdown-menu.vue';
-import SBadge from '../badge/badge.vue';
-import type { SidebarMenuBadgeProps, SidebarMenuChipProps, SidebarMenuItemProps } from './types';
+import STooltip from '../../tooltip/source/tooltip.vue';
+import SChip from '../../chip/source/chip.vue';
+import SDropdownMenu from '../../dropdown-menu/source/dropdown-menu.vue';
+import SBadge from '../../badge/source/badge.vue';
+import type { SidebarMenuBadgeProps, SidebarMenuChipProps, SidebarMenuItemProps } from '../types';
 
 defineOptions({
   name: 'SSidebarMenuItem',
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-option.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-option.vue
similarity index 95%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-option.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-option.vue
index 3bd4e591..e80170d4 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-option.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-option.vue
@@ -2,15 +2,15 @@
 import { computed } from 'vue';
 import { CollapsibleRoot, CollapsibleTrigger } from '@soybean-ui/primitives';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
-import type { AcceptableValue } from '../../types';
-import SDropdownMenu from '../dropdown-menu/dropdown-menu.vue';
-import SCollapsibleContent from '../collapsible/collapsible-content.vue';
+import type { AcceptableValue } from '../../../types';
+import SDropdownMenu from '../../dropdown-menu/source/dropdown-menu.vue';
+import SCollapsibleContent from '../../collapsible/source/collapsible-content.vue';
+import { injectSidebarMenuRootContext } from '../context';
+import type { SidebarMenuOptionData, SidebarMenuOptionProps } from '../types';
 import SSidebarMenuItem from './sidebar-menu-item.vue';
 import SSidebarMenuItemLink from './sidebar-menu-item-link.vue';
 import SSidebarMenuChildGroup from './sidebar-menu-child-group.vue';
 import SSidebarMenuCollapsibleIcon from './sidebar-menu-collapsible-icon.vue';
-import { injectSidebarMenuRootContext } from './context';
-import type { SidebarMenuOptionData, SidebarMenuOptionProps } from './types';
 
 defineOptions({
   name: 'SSidebarMenuOption'
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-root.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-root.vue
similarity index 94%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu-root.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-root.vue
index af65cbd7..61f30829 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu-root.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu-root.vue
@@ -4,9 +4,9 @@ import type { CSSProperties, Ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import type { AcceptableValue } from '@soybean-ui/primitives';
 import { cn, sidebarMenuVariants } from '@soybean-ui/variants';
-import { themeSizeRatio } from '../../constant';
-import { provideSidebarMenuRootContext } from './context';
-import type { SidebarMenuRootEmits, SidebarMenuRootProps, SidebarMenuState } from './types';
+import { themeSizeRatio } from '../../../constant';
+import { provideSidebarMenuRootContext } from '../context';
+import type { SidebarMenuRootEmits, SidebarMenuRootProps, SidebarMenuState } from '../types';
 
 defineOptions({
   name: 'SSidebarMenuRoot'
diff --git a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu.vue b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu.vue
similarity index 96%
rename from packages/soy-ui/src/components/sidebar-menu/sidebar-menu.vue
rename to packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu.vue
index a3a54a7a..ac19b441 100644
--- a/packages/soy-ui/src/components/sidebar-menu/sidebar-menu.vue
+++ b/packages/soy-ui/src/components/sidebar-menu/source/sidebar-menu.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableValue } from '@soybean-ui/primitives';
+import type { SidebarMenuEmits, SidebarMenuProps } from '../types';
 import SSidebarMenuRoot from './sidebar-menu-root.vue';
 import SSidebarMenuOption from './sidebar-menu-option.vue';
 import SSidebarMenuGroupLabel from './sidebar-menu-group-label.vue';
 import SSidebarMenuGroup from './sidebar-menu-group.vue';
-import type { SidebarMenuEmits, SidebarMenuProps } from './types';
 
 defineOptions({
   name: 'SSidebarMenu',
diff --git a/packages/soy-ui/src/components/skeleton/demos/index.ts b/packages/soy-ui/src/components/skeleton/demos/index.ts
new file mode 100644
index 00000000..4933ae48
--- /dev/null
+++ b/packages/soy-ui/src/components/skeleton/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSkeleton from './skeleton.vue';
+
+export { DemoSkeleton };
diff --git a/examples/src/ui/skeleton.vue b/packages/soy-ui/src/components/skeleton/demos/skeleton.vue
similarity index 100%
rename from examples/src/ui/skeleton.vue
rename to packages/soy-ui/src/components/skeleton/demos/skeleton.vue
diff --git a/packages/soy-ui/src/components/skeleton/index.ts b/packages/soy-ui/src/components/skeleton/index.ts
index 0efaf09f..0646c6c4 100644
--- a/packages/soy-ui/src/components/skeleton/index.ts
+++ b/packages/soy-ui/src/components/skeleton/index.ts
@@ -1,4 +1,4 @@
-import SSkeleton from './skeleton.vue';
+import SSkeleton from './source/skeleton.vue';
 
 export { SSkeleton };
 
diff --git a/packages/soy-ui/src/components/skeleton/skeleton.vue b/packages/soy-ui/src/components/skeleton/source/skeleton.vue
similarity index 89%
rename from packages/soy-ui/src/components/skeleton/skeleton.vue
rename to packages/soy-ui/src/components/skeleton/source/skeleton.vue
index 4b6de306..192dc720 100644
--- a/packages/soy-ui/src/components/skeleton/skeleton.vue
+++ b/packages/soy-ui/src/components/skeleton/source/skeleton.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { Primitive } from '@soybean-ui/primitives';
 import { cn, skeletonVariants } from '@soybean-ui/variants';
-import type { SkeletonProps } from './types';
+import type { SkeletonProps } from '../types';
 
 defineOptions({
   name: 'SSkeleton'
diff --git a/packages/soy-ui/src/components/slider/demos/index.ts b/packages/soy-ui/src/components/slider/demos/index.ts
new file mode 100644
index 00000000..6e412a4d
--- /dev/null
+++ b/packages/soy-ui/src/components/slider/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSlider from './slider.vue';
+
+export { DemoSlider };
diff --git a/examples/src/ui/slider.vue b/packages/soy-ui/src/components/slider/demos/slider.vue
similarity index 100%
rename from examples/src/ui/slider.vue
rename to packages/soy-ui/src/components/slider/demos/slider.vue
diff --git a/packages/soy-ui/src/components/slider/index.ts b/packages/soy-ui/src/components/slider/index.ts
index e43fcd39..050ec0c5 100644
--- a/packages/soy-ui/src/components/slider/index.ts
+++ b/packages/soy-ui/src/components/slider/index.ts
@@ -1,8 +1,8 @@
-import SSlider from './slider.vue';
-import SSliderRange from './slider-range.vue';
-import SSliderRoot from './slider-root.vue';
-import SSliderThumb from './slider-thumb.vue';
-import SSliderTrack from './slider-track.vue';
+import SSlider from './source/slider.vue';
+import SSliderRange from './source/slider-range.vue';
+import SSliderRoot from './source/slider-root.vue';
+import SSliderThumb from './source/slider-thumb.vue';
+import SSliderTrack from './source/slider-track.vue';
 
 export { SSlider, SSliderRange, SSliderRoot, SSliderThumb, SSliderTrack };
 
diff --git a/packages/soy-ui/src/components/slider/slider-range.vue b/packages/soy-ui/src/components/slider/source/slider-range.vue
similarity index 90%
rename from packages/soy-ui/src/components/slider/slider-range.vue
rename to packages/soy-ui/src/components/slider/source/slider-range.vue
index de3efc7a..8c02d15e 100644
--- a/packages/soy-ui/src/components/slider/slider-range.vue
+++ b/packages/soy-ui/src/components/slider/source/slider-range.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SliderRange } from '@soybean-ui/primitives';
 import { cn, sliderVariants } from '@soybean-ui/variants';
-import type { SliderRangeProps } from './types';
+import type { SliderRangeProps } from '../types';
 
 defineOptions({
   name: 'SSliderRange'
diff --git a/packages/soy-ui/src/components/slider/slider-root.vue b/packages/soy-ui/src/components/slider/source/slider-root.vue
similarity index 90%
rename from packages/soy-ui/src/components/slider/slider-root.vue
rename to packages/soy-ui/src/components/slider/source/slider-root.vue
index aba3ad70..fa78a10a 100644
--- a/packages/soy-ui/src/components/slider/slider-root.vue
+++ b/packages/soy-ui/src/components/slider/source/slider-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SliderRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, sliderVariants } from '@soybean-ui/variants';
-import type { SliderRootEmits, SliderRootProps } from './types';
+import type { SliderRootEmits, SliderRootProps } from '../types';
 
 defineOptions({
   name: 'SSliderRoot'
diff --git a/packages/soy-ui/src/components/slider/slider-thumb.vue b/packages/soy-ui/src/components/slider/source/slider-thumb.vue
similarity index 90%
rename from packages/soy-ui/src/components/slider/slider-thumb.vue
rename to packages/soy-ui/src/components/slider/source/slider-thumb.vue
index f305f9ac..bb7b9b90 100644
--- a/packages/soy-ui/src/components/slider/slider-thumb.vue
+++ b/packages/soy-ui/src/components/slider/source/slider-thumb.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SliderThumb } from '@soybean-ui/primitives';
 import { cn, sliderVariants } from '@soybean-ui/variants';
-import type { SliderThumbProps } from './types';
+import type { SliderThumbProps } from '../types';
 
 defineOptions({
   name: 'SSliderThumb'
diff --git a/packages/soy-ui/src/components/slider/slider-track.vue b/packages/soy-ui/src/components/slider/source/slider-track.vue
similarity index 90%
rename from packages/soy-ui/src/components/slider/slider-track.vue
rename to packages/soy-ui/src/components/slider/source/slider-track.vue
index b08cb146..6a211b05 100644
--- a/packages/soy-ui/src/components/slider/slider-track.vue
+++ b/packages/soy-ui/src/components/slider/source/slider-track.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SliderTrack } from '@soybean-ui/primitives';
 import { cn, sliderVariants } from '@soybean-ui/variants';
-import type { SliderTrackProps } from './types';
+import type { SliderTrackProps } from '../types';
 
 defineOptions({
   name: 'SSliderTrack'
diff --git a/packages/soy-ui/src/components/slider/slider.vue b/packages/soy-ui/src/components/slider/source/slider.vue
similarity index 96%
rename from packages/soy-ui/src/components/slider/slider.vue
rename to packages/soy-ui/src/components/slider/source/slider.vue
index 1a447480..647dd11f 100644
--- a/packages/soy-ui/src/components/slider/slider.vue
+++ b/packages/soy-ui/src/components/slider/source/slider.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { SliderEmits, SliderProps } from '../types';
 import SSliderRoot from './slider-root.vue';
 import SSliderTrack from './slider-track.vue';
 import SSliderRange from './slider-range.vue';
 import SSliderThumb from './slider-thumb.vue';
-import type { SliderEmits, SliderProps } from './types';
 
 defineOptions({
   name: 'SSlider'
diff --git a/packages/soy-ui/src/components/stepper/demos/index.ts b/packages/soy-ui/src/components/stepper/demos/index.ts
new file mode 100644
index 00000000..d0344c68
--- /dev/null
+++ b/packages/soy-ui/src/components/stepper/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoStepper from './stepper.vue';
+
+export { DemoStepper };
diff --git a/examples/src/ui/stepper.vue b/packages/soy-ui/src/components/stepper/demos/stepper.vue
similarity index 100%
rename from examples/src/ui/stepper.vue
rename to packages/soy-ui/src/components/stepper/demos/stepper.vue
diff --git a/packages/soy-ui/src/components/stepper/index.ts b/packages/soy-ui/src/components/stepper/index.ts
index 83d3fd48..f4e7f9d7 100644
--- a/packages/soy-ui/src/components/stepper/index.ts
+++ b/packages/soy-ui/src/components/stepper/index.ts
@@ -1,11 +1,11 @@
-import SStepper from './stepper.vue';
-import SStepperDescription from './stepper-description.vue';
-import SStepperIndicator from './stepper-indicator.vue';
-import SStepperItem from './stepper-item.vue';
-import SStepperRoot from './stepper-root.vue';
-import SStepperSeparator from './stepper-separator.vue';
-import SStepperTitle from './stepper-title.vue';
-import SStepperTrigger from './stepper-trigger.vue';
+import SStepper from './source/stepper.vue';
+import SStepperDescription from './source/stepper-description.vue';
+import SStepperIndicator from './source/stepper-indicator.vue';
+import SStepperItem from './source/stepper-item.vue';
+import SStepperRoot from './source/stepper-root.vue';
+import SStepperSeparator from './source/stepper-separator.vue';
+import SStepperTitle from './source/stepper-title.vue';
+import SStepperTrigger from './source/stepper-trigger.vue';
 
 export {
   SStepper,
diff --git a/packages/soy-ui/src/components/stepper/stepper-description.vue b/packages/soy-ui/src/components/stepper/source/stepper-description.vue
similarity index 89%
rename from packages/soy-ui/src/components/stepper/stepper-description.vue
rename to packages/soy-ui/src/components/stepper/source/stepper-description.vue
index a3e37fcb..13566327 100644
--- a/packages/soy-ui/src/components/stepper/stepper-description.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper-description.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { StepperDescription } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
-import type { StepperDescriptionProps } from './types';
+import type { StepperDescriptionProps } from '../types';
 
 defineOptions({
   name: 'SStepperDescription'
diff --git a/packages/soy-ui/src/components/stepper/stepper-indicator.vue b/packages/soy-ui/src/components/stepper/source/stepper-indicator.vue
similarity index 90%
rename from packages/soy-ui/src/components/stepper/stepper-indicator.vue
rename to packages/soy-ui/src/components/stepper/source/stepper-indicator.vue
index 5eea908d..53f07ed4 100644
--- a/packages/soy-ui/src/components/stepper/stepper-indicator.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { StepperIndicator } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
-import type { StepperIndicatorProps } from './types';
+import type { StepperIndicatorProps } from '../types';
 
 defineOptions({
   name: 'SStepperIndicator'
diff --git a/packages/soy-ui/src/components/stepper/stepper-item.vue b/packages/soy-ui/src/components/stepper/source/stepper-item.vue
similarity index 93%
rename from packages/soy-ui/src/components/stepper/stepper-item.vue
rename to packages/soy-ui/src/components/stepper/source/stepper-item.vue
index fdf11fc8..06dc8a36 100644
--- a/packages/soy-ui/src/components/stepper/stepper-item.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper-item.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { StepperItem, useForwardProps } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
-import type { StepperItemProps } from './types';
+import type { StepperItemProps } from '../types';
 
 defineOptions({
   name: 'SStepperItem'
diff --git a/packages/soy-ui/src/components/stepper/stepper-root.vue b/packages/soy-ui/src/components/stepper/source/stepper-root.vue
similarity index 91%
rename from packages/soy-ui/src/components/stepper/stepper-root.vue
rename to packages/soy-ui/src/components/stepper/source/stepper-root.vue
index 63abb587..799fa43c 100644
--- a/packages/soy-ui/src/components/stepper/stepper-root.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { StepperRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
-import type { StepperRootEmits, StepperRootProps } from './types';
+import type { StepperRootEmits, StepperRootProps } from '../types';
 
 defineOptions({
   name: 'SStepperRoot'
diff --git a/packages/soy-ui/src/components/stepper/stepper-separator.vue b/packages/soy-ui/src/components/stepper/source/stepper-separator.vue
similarity index 92%
rename from packages/soy-ui/src/components/stepper/stepper-separator.vue
rename to packages/soy-ui/src/components/stepper/source/stepper-separator.vue
index 9f8da3dd..e885c81e 100644
--- a/packages/soy-ui/src/components/stepper/stepper-separator.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper-separator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { StepperSeparator, useForwardProps } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
-import type { StepperSeparatorProps } from './types';
+import type { StepperSeparatorProps } from '../types';
 
 defineOptions({
   name: 'SStepperSeparator'
diff --git a/packages/soy-ui/src/components/stepper/stepper-title.vue b/packages/soy-ui/src/components/stepper/source/stepper-title.vue
similarity index 90%
rename from packages/soy-ui/src/components/stepper/stepper-title.vue
rename to packages/soy-ui/src/components/stepper/source/stepper-title.vue
index 866efe52..d10adc8e 100644
--- a/packages/soy-ui/src/components/stepper/stepper-title.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper-title.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { StepperTitle } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
-import type { StepperTitleProps } from './types';
+import type { StepperTitleProps } from '../types';
 
 defineOptions({
   name: 'SStepperTitle'
diff --git a/packages/soy-ui/src/components/stepper/stepper-trigger.vue b/packages/soy-ui/src/components/stepper/source/stepper-trigger.vue
similarity index 91%
rename from packages/soy-ui/src/components/stepper/stepper-trigger.vue
rename to packages/soy-ui/src/components/stepper/source/stepper-trigger.vue
index 938b43eb..19ef152a 100644
--- a/packages/soy-ui/src/components/stepper/stepper-trigger.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper-trigger.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { StepperTrigger } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
-import type { StepperTriggerProps } from './types';
+import type { StepperTriggerProps } from '../types';
 
 defineOptions({
   name: 'SStepperTrigger'
diff --git a/packages/soy-ui/src/components/stepper/stepper.vue b/packages/soy-ui/src/components/stepper/source/stepper.vue
similarity index 97%
rename from packages/soy-ui/src/components/stepper/stepper.vue
rename to packages/soy-ui/src/components/stepper/source/stepper.vue
index 92b3dfd4..692f134d 100644
--- a/packages/soy-ui/src/components/stepper/stepper.vue
+++ b/packages/soy-ui/src/components/stepper/source/stepper.vue
@@ -4,14 +4,14 @@ import type { Component } from 'vue';
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, stepperVariants } from '@soybean-ui/variants';
 import { Check, Circle, Dot } from 'lucide-vue-next';
-import SButton from '../button/button.vue';
+import SButton from '../../button/source/button.vue';
+import type { StepperEmits, StepperOptionData, StepperProps, StepperState } from '../types';
 import SStepperRoot from './stepper-root.vue';
 import SStepperDescription from './stepper-description.vue';
 import SStepperItem from './stepper-item.vue';
 import SStepperSeparator from './stepper-separator.vue';
 import SStepperTitle from './stepper-title.vue';
 import SStepperTrigger from './stepper-trigger.vue';
-import type { StepperEmits, StepperOptionData, StepperProps, StepperState } from './types';
 
 defineOptions({
   name: 'SStepper'
diff --git a/packages/soy-ui/src/components/switch/demos/index.ts b/packages/soy-ui/src/components/switch/demos/index.ts
new file mode 100644
index 00000000..bf537cf4
--- /dev/null
+++ b/packages/soy-ui/src/components/switch/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoSwitch from './switch.vue';
+
+export { DemoSwitch };
diff --git a/examples/src/ui/switch.vue b/packages/soy-ui/src/components/switch/demos/switch.vue
similarity index 100%
rename from examples/src/ui/switch.vue
rename to packages/soy-ui/src/components/switch/demos/switch.vue
diff --git a/packages/soy-ui/src/components/switch/index.ts b/packages/soy-ui/src/components/switch/index.ts
index db7c4616..1ba81873 100644
--- a/packages/soy-ui/src/components/switch/index.ts
+++ b/packages/soy-ui/src/components/switch/index.ts
@@ -1,6 +1,6 @@
-import SSwitch from './switch.vue';
-import SSwitchRoot from './switch-root.vue';
-import SSwitchThumb from './switch-thumb.vue';
+import SSwitch from './source/switch.vue';
+import SSwitchRoot from './source/switch-root.vue';
+import SSwitchThumb from './source/switch-thumb.vue';
 
 export { SSwitch, SSwitchRoot, SSwitchThumb };
 
diff --git a/packages/soy-ui/src/components/switch/switch-root.vue b/packages/soy-ui/src/components/switch/source/switch-root.vue
similarity index 90%
rename from packages/soy-ui/src/components/switch/switch-root.vue
rename to packages/soy-ui/src/components/switch/source/switch-root.vue
index fce9dba1..2dc76b7b 100644
--- a/packages/soy-ui/src/components/switch/switch-root.vue
+++ b/packages/soy-ui/src/components/switch/source/switch-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SwitchRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, switchVariants } from '@soybean-ui/variants';
-import type { SwitchRootEmits, SwitchRootProps } from './types';
+import type { SwitchRootEmits, SwitchRootProps } from '../types';
 
 defineOptions({
   name: 'SSwitchRoot'
diff --git a/packages/soy-ui/src/components/switch/switch-thumb.vue b/packages/soy-ui/src/components/switch/source/switch-thumb.vue
similarity index 90%
rename from packages/soy-ui/src/components/switch/switch-thumb.vue
rename to packages/soy-ui/src/components/switch/source/switch-thumb.vue
index 4b4776e6..98ac3599 100644
--- a/packages/soy-ui/src/components/switch/switch-thumb.vue
+++ b/packages/soy-ui/src/components/switch/source/switch-thumb.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { SwitchThumb } from '@soybean-ui/primitives';
 import { cn, switchVariants } from '@soybean-ui/variants';
-import type { SwitchThumbProps } from './types';
+import type { SwitchThumbProps } from '../types';
 
 defineOptions({
   name: 'SSwitchThumb'
diff --git a/packages/soy-ui/src/components/switch/switch.vue b/packages/soy-ui/src/components/switch/source/switch.vue
similarity index 92%
rename from packages/soy-ui/src/components/switch/switch.vue
rename to packages/soy-ui/src/components/switch/source/switch.vue
index 76683b0d..9c6f9b55 100644
--- a/packages/soy-ui/src/components/switch/switch.vue
+++ b/packages/soy-ui/src/components/switch/source/switch.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, useId } from 'vue';
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { SwitchEmits, SwitchProps } from '../types';
 import SSwitchRoot from './switch-root.vue';
 import SSwitchThumb from './switch-thumb.vue';
-import type { SwitchEmits, SwitchProps } from './types';
 
 defineOptions({
   name: 'SSwitch'
diff --git a/packages/soy-ui/src/components/tabs/demos/index.ts b/packages/soy-ui/src/components/tabs/demos/index.ts
new file mode 100644
index 00000000..161d810e
--- /dev/null
+++ b/packages/soy-ui/src/components/tabs/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoTabs from './tabs.vue';
+
+export { DemoTabs };
diff --git a/examples/src/ui/tabs.vue b/packages/soy-ui/src/components/tabs/demos/tabs.vue
similarity index 100%
rename from examples/src/ui/tabs.vue
rename to packages/soy-ui/src/components/tabs/demos/tabs.vue
diff --git a/packages/soy-ui/src/components/tabs/index.ts b/packages/soy-ui/src/components/tabs/index.ts
index 55223b15..8c59ffb8 100644
--- a/packages/soy-ui/src/components/tabs/index.ts
+++ b/packages/soy-ui/src/components/tabs/index.ts
@@ -1,9 +1,9 @@
-import STabs from './tabs.vue';
-import STabsContent from './tabs-content.vue';
-import STabsIndicator from './tabs-indicator.vue';
-import STabsList from './tabs-list.vue';
-import STabsRoot from './tabs-root.vue';
-import STabsTrigger from './tabs-trigger.vue';
+import STabs from './source/tabs.vue';
+import STabsContent from './source/tabs-content.vue';
+import STabsIndicator from './source/tabs-indicator.vue';
+import STabsList from './source/tabs-list.vue';
+import STabsRoot from './source/tabs-root.vue';
+import STabsTrigger from './source/tabs-trigger.vue';
 
 export { STabs, STabsContent, STabsIndicator, STabsList, STabsRoot, STabsTrigger };
 
diff --git a/packages/soy-ui/src/components/tabs/tabs-content.vue b/packages/soy-ui/src/components/tabs/source/tabs-content.vue
similarity index 92%
rename from packages/soy-ui/src/components/tabs/tabs-content.vue
rename to packages/soy-ui/src/components/tabs/source/tabs-content.vue
index 0fc49c52..2a5423d3 100644
--- a/packages/soy-ui/src/components/tabs/tabs-content.vue
+++ b/packages/soy-ui/src/components/tabs/source/tabs-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TabsContent } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { TabsContentProps } from './types';
+import type { TabsContentProps } from '../types';
 
 defineOptions({
   name: 'STabsContent'
diff --git a/packages/soy-ui/src/components/tabs/tabs-indicator.vue b/packages/soy-ui/src/components/tabs/source/tabs-indicator.vue
similarity index 92%
rename from packages/soy-ui/src/components/tabs/tabs-indicator.vue
rename to packages/soy-ui/src/components/tabs/source/tabs-indicator.vue
index 6ac07cad..7a82b6f5 100644
--- a/packages/soy-ui/src/components/tabs/tabs-indicator.vue
+++ b/packages/soy-ui/src/components/tabs/source/tabs-indicator.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TabsIndicator } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { TabsIndicatorProps } from './types';
+import type { TabsIndicatorProps } from '../types';
 
 defineOptions({
   name: 'STabsIndicator'
diff --git a/packages/soy-ui/src/components/tabs/tabs-list.vue b/packages/soy-ui/src/components/tabs/source/tabs-list.vue
similarity index 91%
rename from packages/soy-ui/src/components/tabs/tabs-list.vue
rename to packages/soy-ui/src/components/tabs/source/tabs-list.vue
index 4a6467ef..980bc623 100644
--- a/packages/soy-ui/src/components/tabs/tabs-list.vue
+++ b/packages/soy-ui/src/components/tabs/source/tabs-list.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TabsList } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { TabsListProps } from './types';
+import type { TabsListProps } from '../types';
 
 defineOptions({
   name: 'STabsList'
diff --git a/packages/soy-ui/src/components/tabs/tabs-root.vue b/packages/soy-ui/src/components/tabs/source/tabs-root.vue
similarity index 93%
rename from packages/soy-ui/src/components/tabs/tabs-root.vue
rename to packages/soy-ui/src/components/tabs/source/tabs-root.vue
index 071ce7ac..4e3657dc 100644
--- a/packages/soy-ui/src/components/tabs/tabs-root.vue
+++ b/packages/soy-ui/src/components/tabs/source/tabs-root.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { TabsRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { StringOrNumber } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { TabsRootEmits, TabsRootProps } from './types';
+import type { TabsRootEmits, TabsRootProps } from '../types';
 
 defineOptions({
   name: 'STabsRoot'
diff --git a/packages/soy-ui/src/components/tabs/tabs-trigger.vue b/packages/soy-ui/src/components/tabs/source/tabs-trigger.vue
similarity index 92%
rename from packages/soy-ui/src/components/tabs/tabs-trigger.vue
rename to packages/soy-ui/src/components/tabs/source/tabs-trigger.vue
index 4122703c..bc2843e3 100644
--- a/packages/soy-ui/src/components/tabs/tabs-trigger.vue
+++ b/packages/soy-ui/src/components/tabs/source/tabs-trigger.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TabsTrigger, useForwardProps } from '@soybean-ui/primitives';
 import { cn, tabsVariants } from '@soybean-ui/variants';
-import type { TabsTriggerProps } from './types';
+import type { TabsTriggerProps } from '../types';
 
 defineOptions({
   name: 'STabsTrigger'
diff --git a/packages/soy-ui/src/components/tabs/tabs.vue b/packages/soy-ui/src/components/tabs/source/tabs.vue
similarity index 96%
rename from packages/soy-ui/src/components/tabs/tabs.vue
rename to packages/soy-ui/src/components/tabs/source/tabs.vue
index 681bb5f6..0dc0655a 100644
--- a/packages/soy-ui/src/components/tabs/tabs.vue
+++ b/packages/soy-ui/src/components/tabs/source/tabs.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends TabsOptionData = TabsOptionData">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { TabsEmits, TabsOptionData, TabsProps } from '../types';
 import STabsRoot from './tabs-root.vue';
 import STabsList from './tabs-list.vue';
 import STabsTrigger from './tabs-trigger.vue';
 import STabsIndicator from './tabs-indicator.vue';
 import STabsContent from './tabs-content.vue';
-import type { TabsEmits, TabsOptionData, TabsProps } from './types';
 
 defineOptions({
   name: 'STabs'
diff --git a/packages/soy-ui/src/components/tags-input/demos/index.ts b/packages/soy-ui/src/components/tags-input/demos/index.ts
new file mode 100644
index 00000000..2eb5f7d3
--- /dev/null
+++ b/packages/soy-ui/src/components/tags-input/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoTagsInput from './tags-input.vue';
+
+export { DemoTagsInput };
diff --git a/examples/src/ui/tags-input.vue b/packages/soy-ui/src/components/tags-input/demos/tags-input.vue
similarity index 100%
rename from examples/src/ui/tags-input.vue
rename to packages/soy-ui/src/components/tags-input/demos/tags-input.vue
diff --git a/packages/soy-ui/src/components/tags-input/index.ts b/packages/soy-ui/src/components/tags-input/index.ts
index 0db95730..26045eb9 100644
--- a/packages/soy-ui/src/components/tags-input/index.ts
+++ b/packages/soy-ui/src/components/tags-input/index.ts
@@ -1,8 +1,8 @@
-import STagsInput from './tags-input.vue';
-import STagsInputInput from './tags-input-input.vue';
-import STagsInputItemDelete from './tags-input-item-delete.vue';
-import STagsInputItemText from './tags-input-item-text.vue';
-import STagsInputItem from './tags-input-item.vue';
-import STagsInputRoot from './tags-input-root.vue';
+import STagsInput from './source/tags-input.vue';
+import STagsInputInput from './source/tags-input-input.vue';
+import STagsInputItemDelete from './source/tags-input-item-delete.vue';
+import STagsInputItemText from './source/tags-input-item-text.vue';
+import STagsInputItem from './source/tags-input-item.vue';
+import STagsInputRoot from './source/tags-input-root.vue';
 
 export { STagsInput, STagsInputInput, STagsInputItem, STagsInputItemDelete, STagsInputItemText, STagsInputRoot };
diff --git a/packages/soy-ui/src/components/tags-input/tags-input-input.vue b/packages/soy-ui/src/components/tags-input/source/tags-input-input.vue
similarity index 91%
rename from packages/soy-ui/src/components/tags-input/tags-input-input.vue
rename to packages/soy-ui/src/components/tags-input/source/tags-input-input.vue
index 29c4b7bd..8feeed90 100644
--- a/packages/soy-ui/src/components/tags-input/tags-input-input.vue
+++ b/packages/soy-ui/src/components/tags-input/source/tags-input-input.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TagsInputInput } from '@soybean-ui/primitives';
 import { cn, tagsInputVariants } from '@soybean-ui/variants';
-import type { TagsInputInputProps } from './types';
+import type { TagsInputInputProps } from '../types';
 
 defineOptions({
   name: 'STagsInputInput'
diff --git a/packages/soy-ui/src/components/tags-input/tags-input-item-delete.vue b/packages/soy-ui/src/components/tags-input/source/tags-input-item-delete.vue
similarity index 90%
rename from packages/soy-ui/src/components/tags-input/tags-input-item-delete.vue
rename to packages/soy-ui/src/components/tags-input/source/tags-input-item-delete.vue
index 14a56383..11083872 100644
--- a/packages/soy-ui/src/components/tags-input/tags-input-item-delete.vue
+++ b/packages/soy-ui/src/components/tags-input/source/tags-input-item-delete.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { TagsInputItemDelete } from '@soybean-ui/primitives';
 import { cn, tagsInputVariants } from '@soybean-ui/variants';
 import { X } from 'lucide-vue-next';
-import type { TagsInputItemDeleteProps } from './types';
+import type { TagsInputItemDeleteProps } from '../types';
 
 defineOptions({
   name: 'STagsInputItemDelete'
diff --git a/packages/soy-ui/src/components/tags-input/tags-input-item-text.vue b/packages/soy-ui/src/components/tags-input/source/tags-input-item-text.vue
similarity index 90%
rename from packages/soy-ui/src/components/tags-input/tags-input-item-text.vue
rename to packages/soy-ui/src/components/tags-input/source/tags-input-item-text.vue
index d0a70789..0aec0db8 100644
--- a/packages/soy-ui/src/components/tags-input/tags-input-item-text.vue
+++ b/packages/soy-ui/src/components/tags-input/source/tags-input-item-text.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TagsInputItemText } from '@soybean-ui/primitives';
 import { cn, tagsInputVariants } from '@soybean-ui/variants';
-import type { TagsInputItemTextProps } from './types';
+import type { TagsInputItemTextProps } from '../types';
 
 defineOptions({
   name: 'STagsInputItemText'
diff --git a/packages/soy-ui/src/components/tags-input/tags-input-item.vue b/packages/soy-ui/src/components/tags-input/source/tags-input-item.vue
similarity index 91%
rename from packages/soy-ui/src/components/tags-input/tags-input-item.vue
rename to packages/soy-ui/src/components/tags-input/source/tags-input-item.vue
index 238a1c32..aef0a07c 100644
--- a/packages/soy-ui/src/components/tags-input/tags-input-item.vue
+++ b/packages/soy-ui/src/components/tags-input/source/tags-input-item.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TagsInputItem } from '@soybean-ui/primitives';
 import { cn, tagsInputVariants } from '@soybean-ui/variants';
-import type { TagsInputItemProps } from './types';
+import type { TagsInputItemProps } from '../types';
 
 defineOptions({
   name: 'STagsInputItem'
diff --git a/packages/soy-ui/src/components/tags-input/tags-input-root.vue b/packages/soy-ui/src/components/tags-input/source/tags-input-root.vue
similarity index 91%
rename from packages/soy-ui/src/components/tags-input/tags-input-root.vue
rename to packages/soy-ui/src/components/tags-input/source/tags-input-root.vue
index dd368dbe..faea7b00 100644
--- a/packages/soy-ui/src/components/tags-input/tags-input-root.vue
+++ b/packages/soy-ui/src/components/tags-input/source/tags-input-root.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { TagsInputRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableInputValue } from '@soybean-ui/primitives';
 import { cn, tagsInputVariants } from '@soybean-ui/variants';
-import type { TagsInputRootEmits, TagsInputRootProps } from './types';
+import type { TagsInputRootEmits, TagsInputRootProps } from '../types';
 
 defineOptions({
   name: 'STagsInputRoot'
diff --git a/packages/soy-ui/src/components/tags-input/tags-input.vue b/packages/soy-ui/src/components/tags-input/source/tags-input.vue
similarity index 96%
rename from packages/soy-ui/src/components/tags-input/tags-input.vue
rename to packages/soy-ui/src/components/tags-input/source/tags-input.vue
index a8cd2577..1b842445 100644
--- a/packages/soy-ui/src/components/tags-input/tags-input.vue
+++ b/packages/soy-ui/src/components/tags-input/source/tags-input.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts" generic="T extends AcceptableInputValue = AcceptableInputValue">
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
 import type { AcceptableInputValue } from '@soybean-ui/primitives';
+import type { TagsInputEmits, TagsInputProps } from '../types';
 import STagsInputRoot from './tags-input-root.vue';
 import STagsInputInput from './tags-input-input.vue';
 import STagsInputItem from './tags-input-item.vue';
 import STagsInputItemText from './tags-input-item-text.vue';
 import STagsInputItemDelete from './tags-input-item-delete.vue';
-import type { TagsInputEmits, TagsInputProps } from './types';
 
 defineOptions({
   name: 'STagsInput'
diff --git a/packages/soy-ui/src/components/textarea/demos/index.ts b/packages/soy-ui/src/components/textarea/demos/index.ts
new file mode 100644
index 00000000..cbbf2264
--- /dev/null
+++ b/packages/soy-ui/src/components/textarea/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoTextarea from './textarea.vue';
+
+export { DemoTextarea };
diff --git a/examples/src/ui/textarea.vue b/packages/soy-ui/src/components/textarea/demos/textarea.vue
similarity index 100%
rename from examples/src/ui/textarea.vue
rename to packages/soy-ui/src/components/textarea/demos/textarea.vue
diff --git a/packages/soy-ui/src/components/textarea/index.ts b/packages/soy-ui/src/components/textarea/index.ts
index f7592d90..bff82002 100644
--- a/packages/soy-ui/src/components/textarea/index.ts
+++ b/packages/soy-ui/src/components/textarea/index.ts
@@ -1,7 +1,7 @@
-import STextarea from './textarea.vue';
-import STextareaContent from './textarea-content.vue';
-import STextareaCount from './textarea-count.vue';
-import STextareaRoot from './textarea-root.vue';
+import STextarea from './source/textarea.vue';
+import STextareaContent from './source/textarea-content.vue';
+import STextareaCount from './source/textarea-count.vue';
+import STextareaRoot from './source/textarea-root.vue';
 
 export { STextarea, STextareaContent, STextareaCount, STextareaRoot };
 
diff --git a/packages/soy-ui/src/components/textarea/textarea-content.vue b/packages/soy-ui/src/components/textarea/source/textarea-content.vue
similarity index 93%
rename from packages/soy-ui/src/components/textarea/textarea-content.vue
rename to packages/soy-ui/src/components/textarea/source/textarea-content.vue
index fa0f4085..98b09d2b 100644
--- a/packages/soy-ui/src/components/textarea/textarea-content.vue
+++ b/packages/soy-ui/src/components/textarea/source/textarea-content.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import { useForwardProps } from '@soybean-ui/primitives';
 import { cn, textareaVariants } from '@soybean-ui/variants';
-import { isBlankString } from '../../shared';
-import type { TextareaContentEmits, TextareaContentProps } from './types';
+import { isBlankString } from '../../../shared';
+import type { TextareaContentEmits, TextareaContentProps } from '../types';
 
 defineOptions({
   name: 'STextareaContent'
diff --git a/packages/soy-ui/src/components/textarea/textarea-count.vue b/packages/soy-ui/src/components/textarea/source/textarea-count.vue
similarity index 93%
rename from packages/soy-ui/src/components/textarea/textarea-count.vue
rename to packages/soy-ui/src/components/textarea/source/textarea-count.vue
index bcc0bdb3..060dc18c 100644
--- a/packages/soy-ui/src/components/textarea/textarea-count.vue
+++ b/packages/soy-ui/src/components/textarea/source/textarea-count.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, textareaVariants } from '@soybean-ui/variants';
-import type { TextareaCountProps } from './types';
+import type { TextareaCountProps } from '../types';
 
 defineOptions({
   name: 'STextareaCount'
diff --git a/packages/soy-ui/src/components/textarea/textarea-root.vue b/packages/soy-ui/src/components/textarea/source/textarea-root.vue
similarity index 88%
rename from packages/soy-ui/src/components/textarea/textarea-root.vue
rename to packages/soy-ui/src/components/textarea/source/textarea-root.vue
index 7a1fa291..adc7c718 100644
--- a/packages/soy-ui/src/components/textarea/textarea-root.vue
+++ b/packages/soy-ui/src/components/textarea/source/textarea-root.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { cn, textareaVariants } from '@soybean-ui/variants';
-import type { TextareaRootProps } from './types';
+import type { TextareaRootProps } from '../types';
 
 defineOptions({
   name: 'STextareaRoot'
diff --git a/packages/soy-ui/src/components/textarea/textarea.vue b/packages/soy-ui/src/components/textarea/source/textarea.vue
similarity index 94%
rename from packages/soy-ui/src/components/textarea/textarea.vue
rename to packages/soy-ui/src/components/textarea/source/textarea.vue
index c992dcb5..ccbed734 100644
--- a/packages/soy-ui/src/components/textarea/textarea.vue
+++ b/packages/soy-ui/src/components/textarea/source/textarea.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useForwardExpose, useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { TextareaContentEmits, TextareaProps } from '../types';
 import TextareaRoot from './textarea-root.vue';
 import STextareaContent from './textarea-content.vue';
 import STextareaCount from './textarea-count.vue';
-import type { TextareaContentEmits, TextareaProps } from './types';
 
 defineOptions({
   name: 'STextarea'
diff --git a/packages/soy-ui/src/components/toast/demos/index.ts b/packages/soy-ui/src/components/toast/demos/index.ts
new file mode 100644
index 00000000..6903af8e
--- /dev/null
+++ b/packages/soy-ui/src/components/toast/demos/index.ts
@@ -0,0 +1,4 @@
+import DemoToast from './toast.vue';
+import DemoSonner from './sonner.vue';
+
+export { DemoToast, DemoSonner };
diff --git a/examples/src/ui/sonner.vue b/packages/soy-ui/src/components/toast/demos/sonner.vue
similarity index 100%
rename from examples/src/ui/sonner.vue
rename to packages/soy-ui/src/components/toast/demos/sonner.vue
diff --git a/examples/src/ui/toast.vue b/packages/soy-ui/src/components/toast/demos/toast.vue
similarity index 100%
rename from examples/src/ui/toast.vue
rename to packages/soy-ui/src/components/toast/demos/toast.vue
diff --git a/packages/soy-ui/src/components/toast/index.ts b/packages/soy-ui/src/components/toast/index.ts
index 4ea14521..9899a8c1 100644
--- a/packages/soy-ui/src/components/toast/index.ts
+++ b/packages/soy-ui/src/components/toast/index.ts
@@ -1,12 +1,12 @@
 import { useToast } from './context';
-import SToast from './toast.vue';
-import SToastAction from './toast-action.vue';
-import SToastClose from './toast-close.vue';
-import SToastDescription from './toast-description.vue';
-import SToastProvider from './toast-provider.vue';
-import SToastRoot from './toast-root.vue';
-import SToastTitle from './toast-title.vue';
-import SToastViewport from './toast-viewport.vue';
+import SToast from './source/toast.vue';
+import SToastAction from './source/toast-action.vue';
+import SToastClose from './source/toast-close.vue';
+import SToastDescription from './source/toast-description.vue';
+import SToastProvider from './source/toast-provider.vue';
+import SToastRoot from './source/toast-root.vue';
+import SToastTitle from './source/toast-title.vue';
+import SToastViewport from './source/toast-viewport.vue';
 
 export {
   SToast,
diff --git a/packages/soy-ui/src/components/toast/toast-action.vue b/packages/soy-ui/src/components/toast/source/toast-action.vue
similarity index 88%
rename from packages/soy-ui/src/components/toast/toast-action.vue
rename to packages/soy-ui/src/components/toast/source/toast-action.vue
index 17aacb1e..ccc8063a 100644
--- a/packages/soy-ui/src/components/toast/toast-action.vue
+++ b/packages/soy-ui/src/components/toast/source/toast-action.vue
@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import { ToastAction, useForwardProps } from '@soybean-ui/primitives';
 import { cn, toastVariants } from '@soybean-ui/variants';
-import { SButton } from '../button';
-import type { ToastActionProps } from './types';
+import { SButton } from '../../button';
+import type { ToastActionProps } from '../types';
 
 defineOptions({
   name: 'SToastAction'
diff --git a/packages/soy-ui/src/components/toast/toast-close.vue b/packages/soy-ui/src/components/toast/source/toast-close.vue
similarity index 86%
rename from packages/soy-ui/src/components/toast/toast-close.vue
rename to packages/soy-ui/src/components/toast/source/toast-close.vue
index d694826d..7c08a721 100644
--- a/packages/soy-ui/src/components/toast/toast-close.vue
+++ b/packages/soy-ui/src/components/toast/source/toast-close.vue
@@ -3,8 +3,8 @@ import { computed } from 'vue';
 import { ToastClose } from '@soybean-ui/primitives';
 import { cn, toastVariants } from '@soybean-ui/variants';
 import { X } from 'lucide-vue-next';
-import { SButtonIcon } from '../button';
-import type { ToastCloseProps } from './types';
+import { SButtonIcon } from '../../button';
+import type { ToastCloseProps } from '../types';
 
 defineOptions({
   name: 'SToastClose'
diff --git a/packages/soy-ui/src/components/toast/toast-description.vue b/packages/soy-ui/src/components/toast/source/toast-description.vue
similarity index 90%
rename from packages/soy-ui/src/components/toast/toast-description.vue
rename to packages/soy-ui/src/components/toast/source/toast-description.vue
index f37ac05c..0500c3a5 100644
--- a/packages/soy-ui/src/components/toast/toast-description.vue
+++ b/packages/soy-ui/src/components/toast/source/toast-description.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ToastDescription } from '@soybean-ui/primitives';
 import { cn, toastVariants } from '@soybean-ui/variants';
-import type { ToastDescriptionProps } from './types';
+import type { ToastDescriptionProps } from '../types';
 
 defineOptions({
   name: 'SToastDescription'
diff --git a/packages/soy-ui/src/components/toast/toast-provider.vue b/packages/soy-ui/src/components/toast/source/toast-provider.vue
similarity index 84%
rename from packages/soy-ui/src/components/toast/toast-provider.vue
rename to packages/soy-ui/src/components/toast/source/toast-provider.vue
index c54d66db..f6657994 100644
--- a/packages/soy-ui/src/components/toast/toast-provider.vue
+++ b/packages/soy-ui/src/components/toast/source/toast-provider.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { ToastProvider } from '@soybean-ui/primitives';
-import { provideToastContext } from './context';
-import type { ToastProviderProps } from './types';
+import { provideToastContext } from '../context';
+import type { ToastProviderProps } from '../types';
 import Toast from './toast.vue';
 
 defineOptions({
diff --git a/packages/soy-ui/src/components/toast/toast-root.vue b/packages/soy-ui/src/components/toast/source/toast-root.vue
similarity index 91%
rename from packages/soy-ui/src/components/toast/toast-root.vue
rename to packages/soy-ui/src/components/toast/source/toast-root.vue
index 06831518..a66fd2ae 100644
--- a/packages/soy-ui/src/components/toast/toast-root.vue
+++ b/packages/soy-ui/src/components/toast/source/toast-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ToastRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, toastVariants } from '@soybean-ui/variants';
-import type { ToastRootEmits, ToastRootProps } from './types';
+import type { ToastRootEmits, ToastRootProps } from '../types';
 
 defineOptions({
   name: 'SToastRoot',
diff --git a/packages/soy-ui/src/components/toast/toast-title.vue b/packages/soy-ui/src/components/toast/source/toast-title.vue
similarity index 91%
rename from packages/soy-ui/src/components/toast/toast-title.vue
rename to packages/soy-ui/src/components/toast/source/toast-title.vue
index 060e69d4..99f21312 100644
--- a/packages/soy-ui/src/components/toast/toast-title.vue
+++ b/packages/soy-ui/src/components/toast/source/toast-title.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ToastTitle } from '@soybean-ui/primitives';
 import { cn, toastVariants } from '@soybean-ui/variants';
-import type { ToastTitleProps } from './types';
+import type { ToastTitleProps } from '../types';
 
 defineOptions({
   name: 'SToastTitle'
diff --git a/packages/soy-ui/src/components/toast/toast-viewport.vue b/packages/soy-ui/src/components/toast/source/toast-viewport.vue
similarity index 90%
rename from packages/soy-ui/src/components/toast/toast-viewport.vue
rename to packages/soy-ui/src/components/toast/source/toast-viewport.vue
index d2e87afd..f0d75acb 100644
--- a/packages/soy-ui/src/components/toast/toast-viewport.vue
+++ b/packages/soy-ui/src/components/toast/source/toast-viewport.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ToastViewport } from '@soybean-ui/primitives';
 import { cn, toastVariants } from '@soybean-ui/variants';
-import type { ToastViewportProps } from './types';
+import type { ToastViewportProps } from '../types';
 
 defineOptions({
   name: 'SToastViewport'
diff --git a/packages/soy-ui/src/components/toast/toast.vue b/packages/soy-ui/src/components/toast/source/toast.vue
similarity index 95%
rename from packages/soy-ui/src/components/toast/toast.vue
rename to packages/soy-ui/src/components/toast/source/toast.vue
index e58ddd24..da42027b 100644
--- a/packages/soy-ui/src/components/toast/toast.vue
+++ b/packages/soy-ui/src/components/toast/source/toast.vue
@@ -3,13 +3,13 @@ import { isVNode } from 'vue';
 import type { FunctionalComponent } from 'vue';
 import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-vue-next';
 import type { LucideProps } from 'lucide-vue-next';
-import { useToast } from './context';
+import { useToast } from '../context';
+import type { ToastIconType, ToastProps } from '../types';
 import SToastRoot from './toast-root.vue';
 import SToastViewport from './toast-viewport.vue';
 import SToastTitle from './toast-title.vue';
 import SToastDescription from './toast-description.vue';
 import SToastClose from './toast-close.vue';
-import type { ToastIconType, ToastProps } from './types';
 
 defineOptions({
   name: 'SToast'
diff --git a/packages/soy-ui/src/components/toggle-group/demos/index.ts b/packages/soy-ui/src/components/toggle-group/demos/index.ts
new file mode 100644
index 00000000..ffd9e637
--- /dev/null
+++ b/packages/soy-ui/src/components/toggle-group/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoToggleGroup from './toggle-group.vue';
+
+export { DemoToggleGroup };
diff --git a/examples/src/ui/toggle-group.vue b/packages/soy-ui/src/components/toggle-group/demos/toggle-group.vue
similarity index 100%
rename from examples/src/ui/toggle-group.vue
rename to packages/soy-ui/src/components/toggle-group/demos/toggle-group.vue
diff --git a/packages/soy-ui/src/components/toggle-group/index.ts b/packages/soy-ui/src/components/toggle-group/index.ts
index 39d01401..ca7c28dd 100644
--- a/packages/soy-ui/src/components/toggle-group/index.ts
+++ b/packages/soy-ui/src/components/toggle-group/index.ts
@@ -1,6 +1,6 @@
-import SToggleGroup from './toggle-group.vue';
-import SToggleGroupItem from './toggle-group-item.vue';
-import SToggleGroupRoot from './toggle-group-root.vue';
+import SToggleGroup from './source/toggle-group.vue';
+import SToggleGroupItem from './source/toggle-group-item.vue';
+import SToggleGroupRoot from './source/toggle-group-root.vue';
 
 export { SToggleGroup, SToggleGroupItem, SToggleGroupRoot };
 
diff --git a/packages/soy-ui/src/components/toggle-group/toggle-group-item.vue b/packages/soy-ui/src/components/toggle-group/source/toggle-group-item.vue
similarity index 92%
rename from packages/soy-ui/src/components/toggle-group/toggle-group-item.vue
rename to packages/soy-ui/src/components/toggle-group/source/toggle-group-item.vue
index 078d6766..14a5fe08 100644
--- a/packages/soy-ui/src/components/toggle-group/toggle-group-item.vue
+++ b/packages/soy-ui/src/components/toggle-group/source/toggle-group-item.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ToggleGroupItem, useForwardProps } from '@soybean-ui/primitives';
 import { cn, toggleVariants } from '@soybean-ui/variants';
-import type { ToggleGroupItemProps } from './types';
+import type { ToggleGroupItemProps } from '../types';
 
 defineOptions({
   name: 'SToggleGroupItem'
diff --git a/packages/soy-ui/src/components/toggle-group/toggle-group-root.vue b/packages/soy-ui/src/components/toggle-group/source/toggle-group-root.vue
similarity index 98%
rename from packages/soy-ui/src/components/toggle-group/toggle-group-root.vue
rename to packages/soy-ui/src/components/toggle-group/source/toggle-group-root.vue
index f4c43ae6..7bf031d0 100644
--- a/packages/soy-ui/src/components/toggle-group/toggle-group-root.vue
+++ b/packages/soy-ui/src/components/toggle-group/source/toggle-group-root.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { ToggleGroupRoot, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, toggleVariants } from '@soybean-ui/variants';
-import type { ToggleGroupRootEmits, ToggleGroupRootProps } from './types';
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from '../types';
 
 defineOptions({
   name: 'SToggleGroupRoot'
diff --git a/packages/soy-ui/src/components/toggle-group/toggle-group.vue b/packages/soy-ui/src/components/toggle-group/source/toggle-group.vue
similarity index 97%
rename from packages/soy-ui/src/components/toggle-group/toggle-group.vue
rename to packages/soy-ui/src/components/toggle-group/source/toggle-group.vue
index 842c6538..8f2dd85a 100644
--- a/packages/soy-ui/src/components/toggle-group/toggle-group.vue
+++ b/packages/soy-ui/src/components/toggle-group/source/toggle-group.vue
@@ -4,9 +4,9 @@
   generic="T extends ToggleGroupItemData = ToggleGroupItemData, V extends string | string[] = string | string[]"
 >
 import { useForwardPropsEmits } from '@soybean-ui/primitives';
+import type { ToggleGroupEmits, ToggleGroupItemData, ToggleGroupProps } from '../types';
 import SToggleGroupRoot from './toggle-group-root.vue';
 import SToggleGroupItem from './toggle-group-item.vue';
-import type { ToggleGroupEmits, ToggleGroupItemData, ToggleGroupProps } from './types';
 
 defineOptions({
   name: 'SToggleGroup'
diff --git a/packages/soy-ui/src/components/toggle/demos/index.ts b/packages/soy-ui/src/components/toggle/demos/index.ts
new file mode 100644
index 00000000..89229677
--- /dev/null
+++ b/packages/soy-ui/src/components/toggle/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoToggle from './toggle.vue';
+
+export { DemoToggle };
diff --git a/examples/src/ui/toggle.vue b/packages/soy-ui/src/components/toggle/demos/toggle.vue
similarity index 100%
rename from examples/src/ui/toggle.vue
rename to packages/soy-ui/src/components/toggle/demos/toggle.vue
diff --git a/packages/soy-ui/src/components/toggle/index.ts b/packages/soy-ui/src/components/toggle/index.ts
index a310d427..d26d3fbd 100644
--- a/packages/soy-ui/src/components/toggle/index.ts
+++ b/packages/soy-ui/src/components/toggle/index.ts
@@ -1,4 +1,4 @@
-import SToggle from './toggle.vue';
+import SToggle from './source/toggle.vue';
 
 export { SToggle };
 
diff --git a/packages/soy-ui/src/components/toggle/toggle.vue b/packages/soy-ui/src/components/toggle/source/toggle.vue
similarity index 91%
rename from packages/soy-ui/src/components/toggle/toggle.vue
rename to packages/soy-ui/src/components/toggle/source/toggle.vue
index 34b4e941..c53206df 100644
--- a/packages/soy-ui/src/components/toggle/toggle.vue
+++ b/packages/soy-ui/src/components/toggle/source/toggle.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { Toggle, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, toggleVariants } from '@soybean-ui/variants';
-import type { ToggleEmits, ToggleProps } from './types';
+import type { ToggleEmits, ToggleProps } from '../types';
 
 defineOptions({
   name: 'SToggle'
diff --git a/packages/soy-ui/src/components/tooltip/demos/index.ts b/packages/soy-ui/src/components/tooltip/demos/index.ts
new file mode 100644
index 00000000..11803b74
--- /dev/null
+++ b/packages/soy-ui/src/components/tooltip/demos/index.ts
@@ -0,0 +1,3 @@
+import DemoTooltip from './tooltip.vue';
+
+export { DemoTooltip };
diff --git a/examples/src/ui/tooltip.vue b/packages/soy-ui/src/components/tooltip/demos/tooltip.vue
similarity index 100%
rename from examples/src/ui/tooltip.vue
rename to packages/soy-ui/src/components/tooltip/demos/tooltip.vue
diff --git a/packages/soy-ui/src/components/tooltip/index.ts b/packages/soy-ui/src/components/tooltip/index.ts
index 198b31d5..1bb1ff39 100644
--- a/packages/soy-ui/src/components/tooltip/index.ts
+++ b/packages/soy-ui/src/components/tooltip/index.ts
@@ -3,9 +3,9 @@ import {
   TooltipRoot as STooltipRoot,
   TooltipTrigger as STooltipTrigger
 } from '@soybean-ui/primitives';
-import STooltip from './tooltip.vue';
-import STooltipArrow from './tooltip-arrow.vue';
-import STooltipContent from './tooltip-content.vue';
+import STooltip from './source/tooltip.vue';
+import STooltipArrow from './source/tooltip-arrow.vue';
+import STooltipContent from './source/tooltip-content.vue';
 
 export { STooltip, STooltipArrow, STooltipContent, STooltipProvider, STooltipRoot, STooltipTrigger };
 
diff --git a/packages/soy-ui/src/components/tooltip/tooltip-arrow.vue b/packages/soy-ui/src/components/tooltip/source/tooltip-arrow.vue
similarity index 91%
rename from packages/soy-ui/src/components/tooltip/tooltip-arrow.vue
rename to packages/soy-ui/src/components/tooltip/source/tooltip-arrow.vue
index e4deb4ad..bb17c6ab 100644
--- a/packages/soy-ui/src/components/tooltip/tooltip-arrow.vue
+++ b/packages/soy-ui/src/components/tooltip/source/tooltip-arrow.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TooltipArrow } from '@soybean-ui/primitives';
 import { cn, tooltipVariants } from '@soybean-ui/variants';
-import type { TooltipArrowProps } from './types';
+import type { TooltipArrowProps } from '../types';
 
 defineOptions({
   name: 'STooltipArrow'
diff --git a/packages/soy-ui/src/components/tooltip/tooltip-content.vue b/packages/soy-ui/src/components/tooltip/source/tooltip-content.vue
similarity index 98%
rename from packages/soy-ui/src/components/tooltip/tooltip-content.vue
rename to packages/soy-ui/src/components/tooltip/source/tooltip-content.vue
index 7d12157b..6c14f364 100644
--- a/packages/soy-ui/src/components/tooltip/tooltip-content.vue
+++ b/packages/soy-ui/src/components/tooltip/source/tooltip-content.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { TooltipContent, useForwardPropsEmits } from '@soybean-ui/primitives';
 import { cn, tooltipVariants } from '@soybean-ui/variants';
-import type { TooltipContentEmits, TooltipContentProps } from './types';
+import type { TooltipContentEmits, TooltipContentProps } from '../types';
 
 defineOptions({
   name: 'STooltipContent'
diff --git a/packages/soy-ui/src/components/tooltip/tooltip.vue b/packages/soy-ui/src/components/tooltip/source/tooltip.vue
similarity index 97%
rename from packages/soy-ui/src/components/tooltip/tooltip.vue
rename to packages/soy-ui/src/components/tooltip/source/tooltip.vue
index d37bc090..be32b03e 100644
--- a/packages/soy-ui/src/components/tooltip/tooltip.vue
+++ b/packages/soy-ui/src/components/tooltip/source/tooltip.vue
@@ -6,9 +6,9 @@ import {
   TooltipTrigger,
   usePickForwardProps
 } from '@soybean-ui/primitives';
+import type { TooltipEmits, TooltipProps } from '../types';
 import STooltipContent from './tooltip-content.vue';
 import STooltipArrow from './tooltip-arrow.vue';
-import type { TooltipEmits, TooltipProps } from './types';
 
 defineOptions({
   name: 'STooltip'
diff --git a/packages/soy-ui/src/components/vue-sonner/index.ts b/packages/soy-ui/src/components/vue-sonner/index.ts
index 61be8c20..cafb16cf 100644
--- a/packages/soy-ui/src/components/vue-sonner/index.ts
+++ b/packages/soy-ui/src/components/vue-sonner/index.ts
@@ -1,5 +1,5 @@
 import { toast, useVueSonner } from 'vue-sonner';
-import SonnerToaster from './sonner-toaster.vue';
+import SonnerToaster from './source/sonner-toaster.vue';
 
 export { SonnerToaster, toast, useVueSonner };
 export * from './types';
diff --git a/packages/soy-ui/src/components/vue-sonner/sonner-toaster.vue b/packages/soy-ui/src/components/vue-sonner/source/sonner-toaster.vue
similarity index 98%
rename from packages/soy-ui/src/components/vue-sonner/sonner-toaster.vue
rename to packages/soy-ui/src/components/vue-sonner/source/sonner-toaster.vue
index cfa9e660..afc8720d 100644
--- a/packages/soy-ui/src/components/vue-sonner/sonner-toaster.vue
+++ b/packages/soy-ui/src/components/vue-sonner/source/sonner-toaster.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useStyleTag } from '@vueuse/core';
 import { useForwardProps } from '@soybean-ui/primitives';
 import { Toaster } from 'vue-sonner';
-import type { SonnerProps } from './types';
+import type { SonnerProps } from '../types';
 
 defineOptions({
   name: 'SonnerToaster'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2445ab3c..c78148f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,10 +7,50 @@ settings:
 importers:
 
   .:
+    dependencies:
+      soybean-ui:
+        specifier: 'link:'
+        version: 'link:'
+    devDependencies:
+      '@soybeanjs/cli':
+        specifier: 1.2.1
+        version: 1.2.1(@types/eslint@9.6.1)(@unocss/eslint-config@66.1.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-vue@10.1.0(eslint@9.26.0(jiti@2.4.2))(vue-eslint-parser@10.1.3(eslint@9.26.0(jiti@2.4.2))))(eslint@9.26.0(jiti@2.4.2))(magicast@0.3.5)(typescript@5.8.3)(vue-eslint-parser@10.1.3(eslint@9.26.0(jiti@2.4.2)))
+      '@soybeanjs/eslint-config':
+        specifier: 1.6.0
+        version: 1.6.0(@types/eslint@9.6.1)(@unocss/eslint-config@66.1.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-vue@10.1.0(eslint@9.26.0(jiti@2.4.2))(vue-eslint-parser@10.1.3(eslint@9.26.0(jiti@2.4.2))))(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3)(vue-eslint-parser@10.1.3(eslint@9.26.0(jiti@2.4.2)))
+      '@unocss/eslint-config':
+        specifier: 66.1.1
+        version: 66.1.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3)
+      eslint:
+        specifier: 9.26.0
+        version: 9.26.0(jiti@2.4.2)
+      eslint-plugin-vue:
+        specifier: 10.1.0
+        version: 10.1.0(eslint@9.26.0(jiti@2.4.2))(vue-eslint-parser@10.1.3(eslint@9.26.0(jiti@2.4.2)))
+      simple-git-hooks:
+        specifier: 2.13.0
+        version: 2.13.0
+      vue-eslint-parser:
+        specifier: 10.1.3
+        version: 10.1.3(eslint@9.26.0(jiti@2.4.2))
+
+  apps/official-site:
+    dependencies:
+      nuxt:
+        specifier: ^3.17.3
+        version: 3.17.3(@parcel/watcher@2.5.1)(@types/node@22.15.17)(db0@0.3.2)(eslint@9.26.0(jiti@2.4.2))(ioredis@5.6.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(terser@5.39.0)(tsx@4.19.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.7.1)
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.13(typescript@5.8.3)
+      vue-router:
+        specifier: ^4.5.1
+        version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+
+  apps/playground:
     dependencies:
       '@soybean-ui/examples':
         specifier: workspace:*
-        version: link:examples
+        version: link:../../examples
       '@unocss/reset':
         specifier: 66.1.1
         version: 66.1.1
@@ -31,7 +71,7 @@ importers:
         version: 0.509.0(vue@3.5.13(typescript@5.8.3))
       soy-ui:
         specifier: workspace:*
-        version: link:packages/soy-ui
+        version: link:../../packages/soy-ui
       valibot:
         specifier: 1.1.0
         version: 1.1.0(typescript@5.8.3)
@@ -44,7 +84,7 @@ importers:
     devDependencies:
       '@soybean-ui/unocss-preset':
         specifier: workspace:*
-        version: link:packages/unocss-preset
+        version: link:../../packages/unocss-preset
       '@soybeanjs/cli':
         specifier: 1.2.1
         version: 1.2.1(@types/eslint@9.6.1)(@unocss/eslint-config@66.1.1(eslint@9.26.0(jiti@2.4.2))(typescript@5.8.3))(eslint-plugin-vue@10.1.0(eslint@9.26.0(jiti@2.4.2))(vue-eslint-parser@10.1.3(eslint@9.26.0(jiti@2.4.2))))(eslint@9.26.0(jiti@2.4.2))(magicast@0.3.5)(typescript@5.8.3)(vue-eslint-parser@10.1.3(eslint@9.26.0(jiti@2.4.2)))
@@ -1154,6 +1194,11 @@ packages:
     engines: {node: ^16.10.0 || >=18.0.0}
     hasBin: true
 
+  '@nuxt/cli@3.25.1':
+    resolution: {integrity: sha512-7+Ut7IvAD4b5piikJFSgIqSPbHKFT5gq05JvCsEHRM0MPA5QR9QHkicklyMqSj0D/oEkDohen8qRgdxRie3oUA==}
+    engines: {node: ^16.10.0 || >=18.0.0}
+    hasBin: true
+
   '@nuxt/devalue@2.0.2':
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
 
@@ -1176,10 +1221,18 @@ packages:
     resolution: {integrity: sha512-Mz2Ni8iUwty5LBs3LepUL43rI2xXbuAz3Cqq37L9frOD2QI2tQUtasYaSoKk6U7nvYzuW2z/2b3YOLkMNi/k2w==}
     engines: {node: '>=18.12.0'}
 
+  '@nuxt/kit@3.17.3':
+    resolution: {integrity: sha512-aw6u6mT3TnM/MmcCRDMv3i9Sbm5/ZMSJgDl+N+WsrWNDIQ2sWmsqdDkjb/HyXF20SNwc2891hRBkaQr3hG2mhA==}
+    engines: {node: '>=18.12.0'}
+
   '@nuxt/schema@3.17.2':
     resolution: {integrity: sha512-DzmvgqcfIoCkNKXrBU6wpGckIXSxHHU+7OTlE68qNq6y0lVYnUA0Akrn0I8j+n/vFdQTIpJXiRD4dAgcomsBAg==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  '@nuxt/schema@3.17.3':
+    resolution: {integrity: sha512-z4hbeTtg8B2/2I8zqnCAQQ9JmIQA/BfFy/8cRkGKRIMNjOaTOdmAqMnNriSpyp9xfzWGpnvxPFgab/5uSjsAgA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   '@nuxt/telemetry@2.6.6':
     resolution: {integrity: sha512-Zh4HJLjzvm3Cq9w6sfzIFyH9ozK5ePYVfCUzzUQNiZojFsI2k1QkSBrVI9BGc6ArKXj/O6rkI6w7qQ+ouL8Cag==}
     engines: {node: '>=18.12.0'}
@@ -1191,24 +1244,54 @@ packages:
     peerDependencies:
       vue: ^3.3.4
 
+  '@nuxt/vite-builder@3.17.3':
+    resolution: {integrity: sha512-WK1ESdzbJGRwLGz6s+oyVwM3Ore4V/eYMyquUYsdckFC0rTOnRlV88jdGf0D8Yav0DkrNrG5nZEkL8k+zuXlwQ==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0.0}
+    peerDependencies:
+      vue: ^3.3.4
+
   '@oxc-parser/binding-darwin-arm64@0.68.1':
     resolution: {integrity: sha512-Y5FBQyPCLsldAZYEd+oZcUboXwpcLf42Lakx3EYtiYDbuK9M3IqBXMGxdM07P4PfGQrKYn6/cC8xAqkVHnbWPw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-arm64@0.69.0':
+    resolution: {integrity: sha512-4kmSjKARywwCxQ9udJy8T6XJwe7LzfAf0Yy38O1DsRyK05twKgBGWBca2vfaNi4V8jpNaA6SPJi+KJE5IKLLpw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-x64@0.68.1':
     resolution: {integrity: sha512-nkiXpEKl8UOhNPdOY5hA2PFq9vQc9xVs7NFu2vUD9eH/j5uYfv8GnNaKkd+v6iH93JwEBxuK5gfwxiiCEMZRyg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-x64@0.69.0':
+    resolution: {integrity: sha512-RQgFiCbv5wTXxFEKgVcUcU2l62zTZZRVXZPUiLtOf4EY0/P/H6pSK6/ATiTVAZVqy72xDE0lWONZbFcUMPwnHw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.69.0':
+    resolution: {integrity: sha512-LGmg4kVxq910jrvZJLT2vJYScz6+ANMoYSR2EWEbhA4HALo3I3/055dgZ8GV001ALaPPz/L6AbvxaYPVAGPRfQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.68.1':
     resolution: {integrity: sha512-38ejU7GP9sOILA82xcF9laJfCiwZWKp96+jeLQMkebZCfQqaGtld/hbJ2yvZ2laLQS3ISRasDemZEJuk/yb6Uw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.69.0':
+    resolution: {integrity: sha512-Q5jWCHy82c9vYBZVQVSB8ZARLAxU5bMgVDZBHRMDB/gQJhphJaZ23wqPQ2b8b2XSoJhssQhYMV0bF600TzAfpg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm64-gnu@0.68.1':
     resolution: {integrity: sha512-qJK9nzelQqMSLdZbWUpQ8rfSAiH5pgB7rR5OC3/DLbmvhnD+vvuet/67cNzYnGW4pcTzsWzcRTSkmH/b6VcDCA==}
     engines: {node: '>=14.0.0'}
@@ -1216,6 +1299,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.69.0':
+    resolution: {integrity: sha512-PsuAduOi5Cz+YdpL3LyVBvN+h5fjHAgMCibaAfGa7ru2zr6tb6r5IAfBBj3KHkFYoyl7ztodQSnWsA2Fka3QPw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-arm64-musl@0.68.1':
     resolution: {integrity: sha512-Fd/yP458VG5wit7uku9iEXzl+qfNTuYTVaxfo6EFsBokOf5Xs6Y4LFeKAjtZfb/eCCsc7UY75sAjDyOGnPnNWg==}
     engines: {node: '>=14.0.0'}
@@ -1223,6 +1313,27 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-linux-arm64-musl@0.69.0':
+    resolution: {integrity: sha512-vOxh5Hk22YlfxuQvxRmkzT+VrAd901sDz1gkPUf2u+HCNyDMXq+O/jXn68wFQQgbkDKpAfP0z2dZfOJFkkL2Ag==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.69.0':
+    resolution: {integrity: sha512-5xQpOPaGgxqyUa8T7yOeXPI/tO4o7pmRV++od1XFH+HR8GvidS0J0rC7F69aqz39+i6x6rc5ZxwWADLPtR45rQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.69.0':
+    resolution: {integrity: sha512-btrmwQ/mds4We2nS/GSg03wj9iClgQkbgf6c8WWXhr4l5GmpxLH6t1LnS4s+tHpTWSY7jpegRfOwQalS5D3Y6g==}
+    engines: {node: '>=14.0.0'}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-x64-gnu@0.68.1':
     resolution: {integrity: sha512-VH7q2GXcFKiecD2eNloB4o8Ho6dUeB92O9bS/GV0+Q/yZdu/l0zWXetaszaCviPHCf8YBQzpOHxzsqgVu0RYqQ==}
     engines: {node: '>=14.0.0'}
@@ -1230,6 +1341,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-x64-gnu@0.69.0':
+    resolution: {integrity: sha512-IfFNgUcdzISFausz7k6gdo1zUydJLExVrwpoCRyDYnsPovgOJHhxVZZ6sbuYbufcRh6PV/aA7G8RIvNmOVjIwQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-x64-musl@0.68.1':
     resolution: {integrity: sha512-35drWZMNp31JL0fjAK10pOfE20xVQXa7/o1NGqSGiZ2Huf4c0OK0TOggw+F7IEwPXpi5qOL6C+apY1zod8299A==}
     engines: {node: '>=14.0.0'}
@@ -1237,26 +1355,53 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-linux-x64-musl@0.69.0':
+    resolution: {integrity: sha512-dEOj+Lnwy2GNiAzon05Mo1DP1ptpQNbm12Bz+ZVm/vDNHY0Zbgjf7i3MpnnEywFL8NZJ1c6vSDmtDqTdnm2EBw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-parser/binding-wasm32-wasi@0.68.1':
     resolution: {integrity: sha512-MkTZeTYEqZm18b1TaLSEuo0MxeAv8MNaKSjEz0GgldV3+lNowMbTLusW/QEgYczx/J9/9Y/oYj36Rja7qmfe1Q==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-parser/binding-wasm32-wasi@0.69.0':
+    resolution: {integrity: sha512-M7HM82ZIeIIYN3DrbN6gsM6Z2RTv/nEe2CsQdeblxmM9CfXCyi55YOxtxo1+8iYoy8NV5EGUeCOwY7YR1JAt6A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@oxc-parser/binding-win32-arm64-msvc@0.68.1':
     resolution: {integrity: sha512-27Mrz18+4l7ZzM5FYSCSXDOR+CfZPkxkDz85jADpOTO1lUxH+wkTZiTBAOYuyoyRYbjQOTiZzkYljXtDgNeeLg==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.69.0':
+    resolution: {integrity: sha512-M5W0p0WGjshiCGUNugoHs+8XWgd5J2CrSHY8rYrEmp632LhHRQUGC9AwI45B6IYvnRXiK6E4zcGj/Bey2Dqhyg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-x64-msvc@0.68.1':
     resolution: {integrity: sha512-TUsmnbG2ysQ5bUSfWdDliDMXqu7KwAxtIkAtO4mzHKgEu5avVbqk26BhSJsEC9JXqWSo13yTYBmMtC498K3GzQ==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-x64-msvc@0.69.0':
+    resolution: {integrity: sha512-flBEF+3dJOi3Nm3b7kNxVGrtuSBGN7RNs/qWPHvq/FUP6xFEsT3hvcdNBUnzB15hPsyExptlKyihgZjYhfpgpA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-project/types@0.68.1':
     resolution: {integrity: sha512-Q/H52+HXPPxuIHwQnVkEM8GebLnNcokkI4zQQdbxLIZdfxMGhAm9+gEqsMku3t95trN/1titHUmCM9NxbKaE2g==}
 
+  '@oxc-project/types@0.69.0':
+    resolution: {integrity: sha512-bu3gzdAlLgncoaqyqWVpMAKx4axo+j3ewvvdAt5iCLtvHB/n3Qeif67NU+2TM/ami1nV5/KVO9lxCH8paPATBA==}
+
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -4585,6 +4730,19 @@ packages:
       '@types/node':
         optional: true
 
+  nuxt@3.17.3:
+    resolution: {integrity: sha512-iaRGGcnOiahdz+rhEiDY+Ep/vgsvcCCSs2tIVwKmteHEZk6O2zcpk/U1rHxPWortTyMlluHHaohC2WngYceh+g==}
+    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@parcel/watcher': ^2.1.0
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+    peerDependenciesMeta:
+      '@parcel/watcher':
+        optional: true
+      '@types/node':
+        optional: true
+
   nypm@0.6.0:
     resolution: {integrity: sha512-mn8wBFV9G9+UFHIrq+pZ2r2zL4aPau/by3kJb3cM7+5tQHMt6HGQB8FDIeKFYp8o0D2pnH6nVsO88N4AmUxIWg==}
     engines: {node: ^14.16.0 || >=16.10.0}
@@ -4648,6 +4806,10 @@ packages:
     resolution: {integrity: sha512-dHwz+xP9r1GTvqyywfws4j7EEP/OaeTpHEjTcvIjViB/R2IdUn52AnoUFNjpw8yRU52XVE76rOA4IEj7I0EjnA==}
     engines: {node: '>=14.0.0'}
 
+  oxc-parser@0.69.0:
+    resolution: {integrity: sha512-6UYcFCyCIoZ2t7gyYdPHxM0BTIjM7Y5MCCTfZ2obVITcLd0lXdkbjVibMBD/qVVG+7cURF7Lw32uykU0YR3QUg==}
+    engines: {node: '>=14.0.0'}
+
   p-event@5.0.1:
     resolution: {integrity: sha512-dd589iCQ7m1L0bmC5NLlVYfy3TbBEsMUfWx9PyAgPeIcFZ/E2yaTZ4Rz4MiBmmJShviiftHVXOqfnfzJ6kyMrQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7279,6 +7441,35 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxt/cli@3.25.1(magicast@0.3.5)':
+    dependencies:
+      c12: 3.0.3(magicast@0.3.5)
+      chokidar: 4.0.3
+      citty: 0.1.6
+      clipboardy: 4.0.0
+      consola: 3.4.2
+      defu: 6.1.4
+      fuse.js: 7.1.0
+      giget: 2.0.0
+      h3: 1.15.3
+      httpxy: 0.1.7
+      jiti: 2.4.2
+      listhen: 1.9.0
+      nypm: 0.6.0
+      ofetch: 1.4.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.1.0
+      scule: 1.3.0
+      semver: 7.7.1
+      std-env: 3.9.0
+      tinyexec: 1.0.1
+      ufo: 1.6.1
+      youch: 4.1.0-beta.7
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxt/devalue@2.0.2': {}
 
   '@nuxt/devtools-kit@2.4.0(magicast@0.3.5)(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))':
@@ -7369,6 +7560,33 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxt/kit@3.17.3(magicast@0.3.5)':
+    dependencies:
+      c12: 3.0.3(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      errx: 0.1.0
+      exsolve: 1.0.5
+      ignore: 7.0.4
+      jiti: 2.4.2
+      klona: 2.0.6
+      knitwork: 1.2.0
+      mlly: 1.7.4
+      ohash: 2.0.11
+      pathe: 2.0.3
+      pkg-types: 2.1.0
+      scule: 1.3.0
+      semver: 7.7.1
+      std-env: 3.9.0
+      tinyglobby: 0.2.13
+      ufo: 1.6.1
+      unctx: 2.4.1
+      unimport: 5.0.1
+      untyped: 2.0.0
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxt/schema@3.17.2':
     dependencies:
       '@vue/shared': 3.5.13
@@ -7377,6 +7595,14 @@ snapshots:
       pathe: 2.0.3
       std-env: 3.9.0
 
+  '@nuxt/schema@3.17.3':
+    dependencies:
+      '@vue/shared': 3.5.13
+      consola: 3.4.2
+      defu: 6.1.4
+      pathe: 2.0.3
+      std-env: 3.9.0
+
   '@nuxt/telemetry@2.6.6(magicast@0.3.5)':
     dependencies:
       '@nuxt/kit': 3.17.2(magicast@0.3.5)
@@ -7455,40 +7681,144 @@ snapshots:
       - vue-tsc
       - yaml
 
+  '@nuxt/vite-builder@3.17.3(@types/node@22.15.17)(eslint@9.26.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(terser@5.39.0)(tsx@4.19.4)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))(yaml@2.7.1)':
+    dependencies:
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@rollup/plugin-replace': 6.0.2(rollup@4.40.2)
+      '@vitejs/plugin-vue': 5.2.4(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
+      '@vitejs/plugin-vue-jsx': 4.1.2(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
+      autoprefixer: 10.4.21(postcss@8.5.3)
+      consola: 3.4.2
+      cssnano: 7.0.7(postcss@8.5.3)
+      defu: 6.1.4
+      esbuild: 0.25.4
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.5
+      externality: 1.0.2
+      get-port-please: 3.1.2
+      h3: 1.15.3
+      jiti: 2.4.2
+      knitwork: 1.2.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      mocked-exports: 0.1.1
+      ohash: 2.0.11
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.1.0
+      postcss: 8.5.3
+      rollup-plugin-visualizer: 5.14.0(rollup@4.40.2)
+      std-env: 3.9.0
+      ufo: 1.6.1
+      unenv: 2.0.0-rc.15
+      unplugin: 2.3.3
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1)
+      vite-node: 3.1.3(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1)
+      vite-plugin-checker: 0.9.3(eslint@9.26.0(jiti@2.4.2))(optionator@0.9.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))(vue-tsc@2.2.10(typescript@5.8.3))
+      vue: 3.5.13(typescript@5.8.3)
+      vue-bundle-renderer: 2.1.1
+    transitivePeerDependencies:
+      - '@biomejs/biome'
+      - '@types/node'
+      - eslint
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - optionator
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - vls
+      - vti
+      - vue-tsc
+      - yaml
+
   '@oxc-parser/binding-darwin-arm64@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-darwin-arm64@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-x64@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-darwin-x64@0.69.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-gnu@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-musl@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-musl@0.69.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.69.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-gnu@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-gnu@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-musl@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-musl@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-wasm32-wasi@0.68.1':
     dependencies:
       '@napi-rs/wasm-runtime': 0.2.9
     optional: true
 
+  '@oxc-parser/binding-wasm32-wasi@0.69.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.9
+    optional: true
+
   '@oxc-parser/binding-win32-arm64-msvc@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.69.0':
+    optional: true
+
   '@oxc-parser/binding-win32-x64-msvc@0.68.1':
     optional: true
 
+  '@oxc-parser/binding-win32-x64-msvc@0.69.0':
+    optional: true
+
   '@oxc-project/types@0.68.1': {}
 
+  '@oxc-project/types@0.69.0': {}
+
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -11416,6 +11746,126 @@ snapshots:
       - xml2js
       - yaml
 
+  nuxt@3.17.3(@parcel/watcher@2.5.1)(@types/node@22.15.17)(db0@0.3.2)(eslint@9.26.0(jiti@2.4.2))(ioredis@5.6.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(terser@5.39.0)(tsx@4.19.4)(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))(vue-tsc@2.2.10(typescript@5.8.3))(yaml@2.7.1):
+    dependencies:
+      '@nuxt/cli': 3.25.1(magicast@0.3.5)
+      '@nuxt/devalue': 2.0.2
+      '@nuxt/devtools': 2.4.0(vite@6.3.5(@types/node@22.15.17)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))
+      '@nuxt/kit': 3.17.3(magicast@0.3.5)
+      '@nuxt/schema': 3.17.3
+      '@nuxt/telemetry': 2.6.6(magicast@0.3.5)
+      '@nuxt/vite-builder': 3.17.3(@types/node@22.15.17)(eslint@9.26.0(jiti@2.4.2))(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.2)(terser@5.39.0)(tsx@4.19.4)(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))(yaml@2.7.1)
+      '@unhead/vue': 2.0.8(vue@3.5.13(typescript@5.8.3))
+      '@vue/shared': 3.5.13
+      c12: 3.0.3(magicast@0.3.5)
+      chokidar: 4.0.3
+      compatx: 0.2.0
+      consola: 3.4.2
+      cookie-es: 2.0.0
+      defu: 6.1.4
+      destr: 2.0.5
+      devalue: 5.1.1
+      errx: 0.1.0
+      esbuild: 0.25.4
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      exsolve: 1.0.5
+      globby: 14.1.0
+      h3: 1.15.3
+      hookable: 5.5.3
+      ignore: 7.0.4
+      impound: 1.0.0
+      jiti: 2.4.2
+      klona: 2.0.6
+      knitwork: 1.2.0
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      mocked-exports: 0.1.1
+      nanotar: 0.2.0
+      nitropack: 2.11.11
+      nypm: 0.6.0
+      ofetch: 1.4.1
+      ohash: 2.0.11
+      on-change: 5.0.1
+      oxc-parser: 0.69.0
+      pathe: 2.0.3
+      perfect-debounce: 1.0.0
+      pkg-types: 2.1.0
+      radix3: 1.1.2
+      scule: 1.3.0
+      semver: 7.7.1
+      std-env: 3.9.0
+      strip-literal: 3.0.0
+      tinyglobby: 0.2.13
+      ufo: 1.6.1
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.4.1
+      unimport: 5.0.1
+      unplugin: 2.3.3
+      unplugin-vue-router: 0.12.0(vue-router@4.5.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))
+      unstorage: 1.16.0(db0@0.3.2)(ioredis@5.6.1)
+      untyped: 2.0.0
+      vue: 3.5.13(typescript@5.8.3)
+      vue-bundle-renderer: 2.1.1
+      vue-devtools-stub: 0.1.0
+      vue-router: 4.5.1(vue@3.5.13(typescript@5.8.3))
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+      '@types/node': 22.15.17
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@biomejs/biome'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/kv'
+      - aws4fetch
+      - better-sqlite3
+      - bufferutil
+      - db0
+      - drizzle-orm
+      - encoding
+      - eslint
+      - idb-keyval
+      - ioredis
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - mysql2
+      - optionator
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - sqlite3
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - vite
+      - vls
+      - vti
+      - vue-tsc
+      - xml2js
+      - yaml
+
   nypm@0.6.0:
     dependencies:
       citty: 0.1.6
@@ -11507,6 +11957,24 @@ snapshots:
       '@oxc-parser/binding-win32-arm64-msvc': 0.68.1
       '@oxc-parser/binding-win32-x64-msvc': 0.68.1
 
+  oxc-parser@0.69.0:
+    dependencies:
+      '@oxc-project/types': 0.69.0
+    optionalDependencies:
+      '@oxc-parser/binding-darwin-arm64': 0.69.0
+      '@oxc-parser/binding-darwin-x64': 0.69.0
+      '@oxc-parser/binding-freebsd-x64': 0.69.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.69.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.69.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.69.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.69.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.69.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.69.0
+      '@oxc-parser/binding-linux-x64-musl': 0.69.0
+      '@oxc-parser/binding-wasm32-wasi': 0.69.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.69.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.69.0
+
   p-event@5.0.1:
     dependencies:
       p-timeout: 5.1.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 23832674..526b763f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,3 +3,4 @@ packages:
   - "packages/*"
   - "examples"
   - "playground/*"
+  - "apps/*"
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 159561e4..a2293321 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -7,9 +7,6 @@
     "baseUrl": ".",
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "paths": {
-      "@/*": ["src/*"]
-    },
     "resolveJsonModule": true,
     "types": ["vite/client", "node"],
     "strict": true,
diff --git a/tsconfig.json b/tsconfig.json
index d8a7dc2b..d92548cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
   "extends": "./tsconfig.base.json",
   "include": ["./**/*.ts", "./**/*.tsx", "./**/*.vue"],
-  "exclude": ["playground/nuxt-demo/nuxt.config.ts"]
+  "exclude": ["playground/nuxt-demo/nuxt.config.ts", "apps/official-site/nuxt.config.ts"]
 }