diff --git a/.cursor/rules/brutxui.mdc b/.cursor/rules/brutxui.mdc
deleted file mode 100644
index 02c5438..0000000
--- a/.cursor/rules/brutxui.mdc
+++ /dev/null
@@ -1,31 +0,0 @@
----
-description: Custom styling, component blueprints, and architectural safety rules for BrutxUI components and CLI packages.
-globs: packages/ui/src/components/**/*.tsx, packages/registry/registry.json, packages/cli/src/commands/**/*.ts
----
-
-# BrutxUI AI & Coding Rules
-
-Always follow these rules when developing in this monorepo:
-
-## Core Visual System Rules
-- **Outline Thickness:** Use `border-3 border-black` (or `dark:border-white`). Avoid soft outlines like `border-slate-100`.
-- **Dropshadows:** Saturated, unblurred flat shadows only:
-  - `shadow-brutal` (which resolves to `box-shadow: 4px 4px 0px 0px #000`)
-  - `shadow-brutal-sm` (2px)
-  - `shadow-brutal-lg` (6px)
-- **Angles:** Razor-sharp unrounded corners via `rounded-none`, or global parameter classes like `rounded-brutal`.
-- **Interactive translation:** Active elements translate down and right: `active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_#000] transition-all`.
-- **Palette Highlights:** Saturated neon yellow (`#FFE66D`), mint teal (`#4ECDC4`), and coral red (`#FF6B6B`).
-
-## Code Blueprints
-- **Class Mergers:** Merge incoming classes using `cn` (from `@/lib/utils` or `../lib/utils`).
-- **Variants:** Set styles through CVA. For atomic components (e.g. `button.tsx`), define variant properties for easy custom overriding.
-- **Radix UI Accessibility:** Retain screen reader compatibility, ARIA tags, and outline highlights.
-
-## Security Controls
-- **Path Sanitization:** When editing CLI scripts (e.g. `add.ts` or `init.ts`), always check that file destinations are validated inside safe workspaces using `isSafePath`. Normalize the paths and filter out traversing sequences (`..`).
-
-## Manifest Compiler
-- When adding a component or layout block, describe it in `packages/registry/registry.json`. Execute the compiler and validator before finishing:
-  - `pnpm --filter brutx-registry build`
-  - `pnpm --filter brutx-registry validate`
diff --git a/.cursorrules b/.cursorrules
deleted file mode 100644
index ad2b89f..0000000
--- a/.cursorrules
+++ /dev/null
@@ -1,22 +0,0 @@
-# BrutxUI Cursor Rules
-
-Always adhere to these guidelines when authoring React components, layout blocks, or styling custom elements in the BrutxUI codebase:
-
-## Visual Style Guide
-- **Borders:** Always use `border-3 border-black` (or `dark:border-white`). Never use default light slate/gray borders.
-- **Shadows:** Hard offset shadows only. Use `shadow-brutal` (4px offset), `shadow-brutal-sm` (2px offset), or `shadow-brutal-lg` (6px offset). Never use standard blurred shadows (`shadow-md`, `shadow-lg`).
-- **Radii:** Sharp 0px corners via `rounded-none`, or global parameter classes like `rounded-brutal`.
-- **Transitions:** Buttons and interactive elements translate on press: `active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_#000] transition-all`.
-- **Color Accents:** Use saturated high-contrast colors: Coral `#FF6B6B` (`bg-brutal-primary`), Mint Teal `#4ECDC4` (`bg-brutal-secondary`), Saturated Yellow `#FFE66D` (`bg-brutal-accent`).
-
-## Component Guidelines
-- Use standard `class-variance-authority` (CVA) to define styling variants.
-- Merge custom layout inputs using the local class merger helper `cn` from `@/lib/utils` or equivalent path.
-- Follow Radix UI guidelines for modals, dialogs, popovers, and inputs to keep markup robust and fully accessible.
-- Declare correct `displayName` for every component file.
-
-## Safe Path Resolving
-- When authoring CLI tools, normalize all directory inputs. Check and reject any relative traversals (`..`) or absolute path structures that escape safe workspaces.
-
-## Registry Schema
-- When creating a new component or pricing block, always append its configuration schema to `packages/registry/registry.json`. Then compile and validate schemas via `pnpm --filter brutx-registry build` and `pnpm --filter brutx-registry validate`.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 0d2fabf..0000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1,5 +0,0 @@
-# These are supported funding model platforms
-
-github: [dev-snake]
-buy_me_a_coffee: devsnake
-ko_fi: devsnake
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 547b1f8..a83bf89 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,33 +1,36 @@
-# GitHub Copilot System Rules for BrutxUI
+# GitHub Copilot BrutxUI 系统规则
 
-You are an expert React and Tailwind CSS developer tasked with generating high-fidelity components, pricing blocks, and utility CLI commands for the BrutxUI codebase. Follow these guidelines closely:
+你是一名精通 Vue 3 和 Tailwind CSS 的开发者，负责为 BrutxUI 代码库生成高保真组件、定价块和实用 CLI 命令。请严格遵循以下准则：
 
 ---
 
-## 🎨 Visual System Constraints
+## 视觉系统约束
 
-Every element in BrutxUI is modeled on a high-contrast Neo-Brutalist design language:
-- **Thick Outlines:** Outlines must use `border-3 border-black` (or `dark:border-white`). Never drop down to thin slate lines.
-- **Flat Shadow Offsets:** Saturated, unblurred flat shadows only:
-  - `shadow-brutal` (4px offset)
-  - `shadow-brutal-sm` (2px offset)
-  - `shadow-brutal-lg` (6px offset)
-- **Sharp Corners:** Default to sharp unrounded edges via `rounded-none`, or global parameter classes like `rounded-brutal`.
-- **Physical Press Feedback:** Buttons translate down and right when active: `active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_#000] transition-all`.
-- **Contrast Accents:** Use saturated high-contrast colors: Coral `#FF6B6B`, Mint Teal `#4ECDC4`, Saturated Yellow `#FFE66D`.
+BrutxUI 中的每个元素都基于高对比度 Neo-Brutalist 设计语言：
+- **粗边框：** 边框必须使用 `border-3 border-brutal`（使用 CSS 变量 `--brutal-border-color`，暗色模式自动切换）。切勿降级为细浅色线条。
+- **扁平阴影偏移：** 仅使用饱和、无模糊的扁平阴影：
+  - `shadow-brutal`（4px 偏移）
+  - `shadow-brutal-sm`（2px 偏移）
+  - `shadow-brutal-lg`（6px 偏移）
+  - `shadow-brutal-xl`（8px 偏移）
+- **锐利圆角：** 默认通过 `rounded-none` 实现锐利无圆角边缘，或使用全局参数类如 `rounded-brutal`。
+- **物理按压反馈：** 按钮在激活时向下位移：`active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all`。
+- **对比强调色：** 通过 CSS 变量使用饱和高对比度颜色：珊瑚红 `#FF6B6B`（`bg-brutal-primary`）、薄荷青 `#4ECDC4`（`bg-brutal-secondary`）、饱和黄 `#FFE66D`（`bg-brutal-accent`）。
 
 ---
 
-## 🧩 Component Blueprints & Architecture
+## 组件蓝图与架构
 
-1. **Class Variance Authority:** Define all variants via CVA.
-2. **Merge Helper:** Merge external classes via `cn(...)` from `@/lib/utils` or equivalent nesting depths.
-3. **Accessibility:** Keep Radix modal traps, focus loops, ARIA tags, and keyboard outline rings.
-4. **Display Name:** Declare displays on all exports (e.g. `Button.displayName = 'Button'`).
+1. **Vue 3 SFC：** 所有组件使用 `<script setup lang="ts">` 配合 `defineProps<T>()` + `withDefaults()`。
+2. **类变体权限：** 通过 CVA 在与组件同目录的独立 `*-variants.ts` 文件中定义所有变体。
+3. **合并辅助工具：** 通过来自 `@/lib/utils` 或等效嵌套深度的 `cn(...)` 合并外部类。
+4. **计算属性类：** 始终使用 `computed()` 进行动态类合并——切勿在模板中调用 `cn()`。
+5. **无障碍：** 使用 reka-ui 处理模态框、对话框、弹出框和输入框，以保持标记健壮且完全无障碍。
+6. **导出：** 始终从 `src/index.ts` 导出新组件。
 
 ---
 
-## 🔒 Security Requirements
+## 安全要求
 
-1. **Path Safety:** When working on the CLI tool (`packages/cli`), avoid directory traversal vulnerabilities. Normalise paths and ensure all resolved destination folders pass `isSafePath`.
-2. **Duplication Guard:** When updating configuration stylesheets, ensure that the token utility sets are not duplicated.
+1. **路径安全：** 在开发 CLI 工具（`packages/cli`）时，避免目录穿越漏洞。规范化路径并确保所有解析的目标文件夹通过 `isSafePath` 检查。
+2. **去重守卫：** 更新配置样式表时，确保令牌工具集不重复。
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..015532b
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,30 @@
+name: CI
+
+on:
+    push:
+        branches: [main, vue]
+    pull_request:
+        branches: [main, vue]
+
+jobs:
+    build-and-test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - uses: pnpm/action-setup@v4
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: pnpm
+
+            - run: pnpm install --frozen-lockfile
+
+            - run: pnpm --filter brutx-ui-vue build
+
+            - run: pnpm --filter brutx-ui-vue typecheck
+
+            - run: pnpm --filter brutx-ui-vue lint
+
+            - run: pnpm --filter brutx-ui-vue test
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
new file mode 100644
index 0000000..5a85a84
--- /dev/null
+++ b/.github/workflows/deploy-docs.yml
@@ -0,0 +1,58 @@
+name: Deploy Docs
+
+on:
+    push:
+        branches: [main]
+    workflow_dispatch:
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+concurrency:
+    group: pages
+    cancel-in-progress: false
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+
+            - uses: pnpm/action-setup@v4
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: pnpm
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Build UI library
+              run: pnpm --filter brutx-ui-vue build
+
+            - name: Build docs
+              run: pnpm --filter docs build
+
+            - name: Setup Pages
+              uses: actions/configure-pages@v4
+
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  path: apps/docs/.vitepress/dist
+
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
index 3722413..6b63ad1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,29 +4,41 @@ node_modules
 
 # Build outputs
 dist
+dist-ssr
 .next
 out
 build
+.codegraph
+.superpowers
 
 # IDE
 .vscode
 .idea
+.trae
+.claude
+.cursor
+.cursorrules
 *.swp
 *.swo
 
 # OS
 .DS_Store
 Thumbs.db
+Desktop.ini
 
 # Environment
 .env
 .env.local
 .env.*.local
+*.local
 
 # Logs
 *.log
 npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
 
 # Testing
 coverage
@@ -36,9 +48,15 @@ coverage
 .turbo
 *.tsbuildinfo
 
+# VitePress
+**/.vitepress/cache
+
+# Next.js
+next-env.d.ts
+
 # Misc
 .vercel
 
 # Development docs (internal only)
 DEVELOPMENT.md
-DEV_*.md
\ No newline at end of file
+DEV_*.md
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..48eb062
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,133 @@
+# AGENTS.md — BrutxUI Vue 3
+
+面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist UI 组件库。独立维护的 Vue 3 版本。
+
+## 单体仓库
+
+| 包名 | 路径 | 说明 |
+|---------|------|------|
+| `brutx-ui-vue` | `packages/ui/` | 核心 Vue 3 组件库 |
+| `brutx-vue` | `packages/cli/` | 用于 `init` 和 `add` 的 CLI |
+| `brutx-registry-vue` | `packages/registry/` | 编译后的 JSON 注册表 |
+| `brutx-shared-vue` | `packages/shared/` | 共享类型和元数据 |
+| `docs` | `apps/docs/` | VitePress 文档站点 |
+
+## 命令
+
+```bash
+pnpm build          # 构建 UI 包
+pnpm lint           # 对所有包执行 lint
+pnpm typecheck      # 对所有包执行类型检查
+pnpm test           # 运行 UI 测试
+pnpm test:watch     # 监视模式运行测试
+```
+
+## 技术栈
+
+Vue 3.5+（`<script setup>`）· TypeScript 5.7+（strict）· Tailwind CSS 3.4+ · reka-ui 2.9+（无头原语）· CVA 0.7+（变体）· clsx + tailwind-merge 通过 `cn()` · Vite 6+ · Vitest 3+ · pnpm 8.15+
+
+## 组件约定
+
+- `<script setup lang="ts">` 配合 `defineProps<T>()` + `withDefaults()`
+- 变体在独立的 `*-variants.ts` 文件中使用 CVA 定义，与组件同目录
+- 始终通过 `cn()` 合并类——切勿拼接字符串
+- 始终使用 `computed()` 进行动态类合并——切勿在模板中调用 `cn()`
+- 始终使用 `reka-ui` 实现无障碍无头原语
+- 始终从 `src/index.ts` 导出新组件
+- 文本 props 默认值设为 `undefined`，通过 `useLocale()` 的 `t()` 函数提供默认文本；优先级链为 `props > t() > zh-CN 回退`
+
+## Neo-Brutalist 视觉系统
+
+### 设计令牌（`src/styles.css` → `:root` / `.dark`）
+
+| 令牌 | 亮色 | 暗色 | 用途 |
+|-------|-------|------|------|
+| `--brutal-border-width` | `3px` | `3px` | 边框粗细 |
+| `--brutal-border-color` | `#000000` | `#ffffff` | 边框颜色 |
+| `--brutal-shadow-offset-x` | `4px` | `4px` | 阴影 X 偏移 |
+| `--brutal-shadow-offset-y` | `4px` | `4px` | 阴影 Y 偏移 |
+| `--brutal-shadow-color` | `#000000` | `#ffffff` | 阴影颜色 |
+| `--brutal-radius` | `0px` | `0px` | 边框圆角 |
+| `--brutal-bg` | `#ffffff` | `#141414` | 背景 |
+| `--brutal-fg` | `#000000` | `#ffffff` | 前景 |
+| `--brutal-primary` | `#FF6B6B` | `#FF6B6B` | 主色（珊瑚红） |
+| `--brutal-secondary` | `#4ECDC4` | `#4ECDC4` | 辅助色（薄荷青） |
+| `--brutal-accent` | `#FFE66D` | `#FFE66D` | 强调色（黄色） |
+| `--brutal-destructive` | `#EF476F` | `#EF476F` | 危险色 |
+| `--brutal-success` | `#7FB069` | `#7FB069` | 成功色 |
+| `--brutal-info` | `#4A90D9` | `#3B82F6` | 信息提示色 |
+| `--brutal-muted` | `#f3f4f6` | `#1e1e1e` | 柔和背景 |
+| `--brutal-ring` | `#000000` | `#ffffff` | 焦点环 |
+| `--brutal-pressed-offset` | `2px` | `2px` | 激活按压偏移 |
+
+### 视觉规则
+
+1. **边框：** `border-3 border-brutal`——禁止细边框或浅色 slate/gray 边框
+2. **阴影：** 仅使用 `shadow-brutal*`——禁止模糊/扩散阴影（`shadow-md`、`shadow-lg` 被禁止）
+3. **圆角：** `rounded-brutal`——禁止硬编码 `rounded-md` 等
+4. **按压：** `active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all`——交互元素必须在按压时产生位移，不能感觉迟钝
+5. **悬停：** `hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5`
+6. **颜色：** 使用 `--brutal-*` CSS 变量——禁止硬编码任意颜色
+
+## CVA 变体文件
+[CVA.md](CVA.md)
+
+### Tailwind 工具类
+
+- 边框：`border-3`、`border-brutal`、`rounded-brutal`
+- 阴影：`shadow-brutal`、`shadow-brutal-sm`、`shadow-brutal-lg`、`shadow-brutal-xl`
+- 颜色：`bg-brutal-bg`、`text-brutal-fg`、`bg-brutal-primary`、`bg-brutal-secondary`、`bg-brutal-accent`、`bg-brutal-destructive`、`bg-brutal-success`、`bg-brutal-info`、`bg-brutal-muted`
+
+### 主题预设
+
+`.theme-classic`（默认）· `.theme-pastel`（柔和，8px 圆角）· `.theme-mono`（灰度，4px 边框）
+
+## 反模式（禁止）
+
+1. **禁止软阴影：** 不要使用 Tailwind 默认的 `shadow-md` 或 `shadow-lg`。使用 `shadow-brutal` 或 `shadow-brutal-lg`。
+2. **禁止圆角边框：** 不要将 `rounded-md` 或 `rounded-lg` 用作默认变体，除非通过主题自定义样式类明确柔化。使用 `rounded-none` 或 `rounded-brutal`。
+3. **禁止暗淡边框：** 不要将 `border-slate-100` 或 `border-slate-200` 等浅色边框用于主边框。边框必须保持粗重（`border-3 border-brutal`）。
+4. **禁止缺少按压反馈：** 交互式按钮必须在点击时产生位移。不要让激活状态感觉迟钝或无生气。
+5. **禁止路径穿越：** 在编译或编辑 CLI 依赖时，绝不允许相对路径遍历（`..`）逃逸安全工作区。请规范化并检查路径。
+
+## 导入
+
+- `@/` → `src/`
+- 内部：相对路径（`../lib/utils`）
+- 无头原语：`import { Primitive } from 'reka-ui'`
+- 图标：`import { Loader2 } from 'lucide-vue-next'`
+- 国际化：`import { useLocale } from '@/composables/useLocale'`
+
+## 代码风格
+
+- 除非要求否则不写注释 · 无魔法数字 · 无硬编码值
+- 可翻译文本使用 `t('componentName.key')` 访问，含插值的使用 `t('key', { param: value })`
+- 4 空格缩进 · 单引号 · PascalCase 组件（`Button.vue`）· kebab-case 变体（`button-variants.ts`）· camelCase 组合式函数（`useToast.ts`）
+
+## 安全
+
+- CLI：规范化路径，使用 `isSafePath` 验证
+- CSS：`styles.css` 中无重复令牌
+- 禁止硬编码密钥
+
+## 目录结构
+
+- **文档网站：** `apps/docs/`（VitePress）
+- **核心包：** `packages/ui/`
+  - 组件文件：`packages/ui/src/components/`
+  - 组合式函数：`packages/ui/src/composables/`
+  - 语言包：`packages/ui/src/locales/`
+  - 工具函数：`packages/ui/src/lib/utils.ts`
+  - 测试文件：`packages/ui/src/components/*.test.ts`
+  - 构建产物：`packages/ui/dist/`
+- **CLI 工具：** `packages/cli/`
+  - CLI 操作：`packages/cli/src/commands/`
+  - 核心逻辑：`packages/cli/src/lib/`
+- **注册表构建器：** `packages/registry/`
+  - 组件 JSON：`packages/registry/registry/`
+  - 构建脚本：`packages/registry/scripts/`
+- **共享类型：** `packages/shared/`
+
+## 注册表模式
+
+- 创建新组件或块时，始终将其配置模式追加到 `packages/registry/registry/`。然后通过 `pnpm --filter brutx-registry-vue build` 和 `pnpm --filter brutx-registry-vue validate` 编译并验证模式。
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 20c1a4b..33b2b95 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,82 +1,82 @@
-# Contributing to Brutx
+# 贡献指南
 
-Thanks for taking the time to contribute to Brutx. This project focuses on a bold, accessible Neo-Brutalist component system for React and Tailwind CSS.
+感谢你抽出时间为 Brutx 做贡献。本项目专注于为 Vue 3 + Tailwind CSS 构建大胆、无障碍的新粗野主义组件系统。
 
 ---
 
-## Development Setup
+## 开发环境设置
 
-This project is a monorepo managed with **pnpm workspaces**.
+本项目是使用 **pnpm workspaces** 管理的 monorepo。
 
-### 1. Prerequisites
+### 1. 前置条件
 - **Node.js** >= 18.0.0
 - **pnpm** >= 8.0.0
 
-### 2. Quick Start
+### 2. 快速开始
 ```bash
-# Clone the repository
-git clone https://github.com/dev-snake/brutxui.git
-cd brutxui
+# 克隆仓库
+git clone https://github.com/lidaixingchen/brutxui-vue3.git
+cd brutxui-vue3
 
-# Install workspace dependencies
+# 安装工作区依赖
 pnpm install
 
-# Build all packages (UI, CLI, Registry, and Docs)
+# 构建所有包（UI、CLI、注册表和文档）
 pnpm build
 ```
 
 ---
 
-## Monorepo Packages
+## Monorepo 包结构
 
-- `packages/ui`: The main React component package.
-- `packages/cli`: The CLI tool (`brutx`) for project initialization and component installation.
-- `packages/registry`: The component distribution registry containing compiled JSON schemas.
-- `apps/docs`: The Next.js 15 based documentation site.
+- `packages/ui`：核心 Vue 3 组件包。
+- `packages/cli`：CLI 工具 (`brutx-vue`)，用于项目初始化和组件安装。
+- `packages/registry`：组件分发注册表，包含编译后的 JSON 模式。
+- `apps/docs`：VitePress 文档站点。
 
 ---
 
-## Adding or Modifying Components
+## 添加或修改组件
 
-We use a **registry-based architecture** similar to shadcn/ui. Components are distributed dynamically as JSON files.
+我们使用类似 shadcn/ui 的**注册表架构**。组件以 JSON 文件的形式动态分发。
 
-To add a new component (e.g., `button`):
+添加新组件（例如 `button`）的步骤：
 
-1. **Implement the component** under `packages/ui/src/components/`.
-2. **Define component metadata** in `packages/cli/src/lib/constants.ts` (under the `COMPONENTS` object). Add any required npm `dependencies`.
-3. **Compile the registry JSON**:
-   Run the following script to automatically parse, resolve dependencies, and bundle the React code into registry JSON files:
+1. **实现组件**，放在 `packages/ui/src/components/` 下。
+2. **定义组件元数据**，在 `packages/cli/src/lib/constants.ts` 的 `COMPONENTS` 对象中添加，并声明所需的 npm `dependencies`。
+3. **编译注册表 JSON**：
+   运行以下脚本，自动解析、解析依赖并将 Vue 代码打包为注册表 JSON 文件：
    ```bash
-   pnpm --filter brutx-registry build
+   pnpm --filter brutx-registry-vue build
    ```
-4. Commit the generated JSON file under `packages/registry/registry/`.
+4. 提交 `packages/registry/registry/` 下生成的 JSON 文件。
 
 ---
 
-## Testing the CLI Locally
+## 本地测试 CLI
 
-You can test the CLI locally against a test project:
+你可以在测试项目中本地测试 CLI：
 
-1. Build the CLI package:
+1. 构建 CLI 包：
    ```bash
-   pnpm --filter brutx build
+   pnpm --filter brutx-vue build
    ```
-2. Create a temporary folder outside the workspace or inside it (e.g., `temp-test-project`).
-3. Run the compiled CLI from your test folder:
+2. 在工作区内或外创建临时文件夹（例如 `temp-test-project`）。
+3. 从测试文件夹运行编译后的 CLI：
    ```bash
-   # Initialize CLI
+   # 初始化 CLI
    node ../packages/cli/dist/index.js init --defaults
 
-   # Add components using the local registry
+   # 使用本地注册表添加组件
    node ../packages/cli/dist/index.js add button combobox --registry ../packages/registry/registry
    ```
 
 ---
 
-## Testing and Linting
+## 测试与代码检查
 
-Before pushing your changes, please ensure all checks pass:
+推送更改前，请确保所有检查通过：
 
-- **Changelog & Types**: `pnpm typecheck`
-- **Linting**: `pnpm lint`
-- **Unit/Integration Tests**: `pnpm test`
+- **类型检查**：`pnpm typecheck`
+- **代码检查**：`pnpm lint`
+- **单元/集成测试**：`pnpm test`
diff --git a/CVA.md b/CVA.md
new file mode 100644
index 0000000..09ced66
--- /dev/null
+++ b/CVA.md
@@ -0,0 +1,54 @@
+# 架构蓝图：CVA 组件模式
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-black ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal hover:bg-brutal-muted',
+        primary: 'bg-brutal-primary text-white border-3 border-brutal shadow-brutal hover:bg-brutal-primary/90',
+        secondary: 'bg-brutal-secondary text-black border-3 border-brutal shadow-brutal hover:bg-brutal-secondary/90',
+        outline: 'bg-transparent text-brutal-fg border-3 border-brutal hover:bg-brutal-muted',
+        ghost: 'hover:bg-brutal-muted text-brutal-fg border-3 border-transparent',
+      },
+      size: {
+        default: 'h-11 px-5 py-2',
+        sm: 'h-9 px-3 py-1',
+        lg: 'h-14 px-8 py-3',
+        icon: 'h-11 w-11 p-0',
+      }
+    },
+    defaultVariants: { variant: 'default', size: 'default' }
+  }
+)
+
+type ButtonVariants = VariantProps<typeof buttonVariants>
+
+interface Props {
+  variant?: NonNullable<ButtonVariants['variant']>
+  size?: NonNullable<ButtonVariants['size']>
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  size: 'default',
+})
+
+const classes = computed(() =>
+  cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)
+)
+</script>
+
+<template>
+  <button :class="classes">
+    <slot />
+  </button>
+</template>
+```
diff --git a/LICENSE b/LICENSE
index 49f4258..b2b9e5d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Dang Van Hau
+Copyright (c) 2025 lidaixingchen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index e7108a2..006f8cb 100644
--- a/README.md
+++ b/README.md
@@ -1,163 +1,173 @@
 <div align="center">
   <img src="apps/docs/public/favicon.svg" alt="Brutx Logo" width="120" height="120" />
-  
+
   # BrutxUI
-  
-  **A copy-paste Neo-Brutalist component registry for React and Tailwind CSS.**
-  
-  Use it when you want visible borders, strong shadows, accessible primitives, and component code you can edit directly.
-  
-  ### Component Registry (`brutx-ui`)
-  [![npm version](https://img.shields.io/npm/v/brutx-ui.svg?style=flat-square&color=FF6B6B)](https://www.npmjs.com/package/brutx-ui)
-  [![npm downloads](https://img.shields.io/npm/dm/brutx-ui.svg?style=flat-square&color=4ECDC4)](https://www.npmjs.com/package/brutx-ui)
-  
-  ### CLI Tool (`brutx`)
-  [![npm version](https://img.shields.io/npm/v/brutx.svg?style=flat-square&color=FFE66D)](https://www.npmjs.com/package/brutx)
-  [![npm downloads](https://img.shields.io/npm/dm/brutx.svg?style=flat-square&color=4ECDC4)](https://www.npmjs.com/package/brutx)
-
-  ### Project Health & Sponsors
+
+  **面向 Vue 3 + Tailwind CSS 的复制粘贴式新粗野主义组件注册表。**
+
+  当你需要可见边框、强烈阴影、无障碍原语以及可直接编辑的组件代码时，就用它。
+
+  ### 组件注册表 (`brutx-ui-vue`)
+  [![npm version](https://img.shields.io/npm/v/brutx-ui-vue.svg?style=flat-square&color=FF6B6B)](https://www.npmjs.com/package/brutx-ui-vue)
+  [![npm downloads](https://img.shields.io/npm/dm/brutx-ui-vue.svg?style=flat-square&color=4ECDC4)](https://www.npmjs.com/package/brutx-ui-vue)
+
+  ### CLI 工具 (`brutx-vue`)
+  [![npm version](https://img.shields.io/npm/v/brutx-vue.svg?style=flat-square&color=FFE66D)](https://www.npmjs.com/package/brutx-vue)
+  [![npm downloads](https://img.shields.io/npm/dm/brutx-vue.svg?style=flat-square&color=4ECDC4)](https://www.npmjs.com/package/brutx-vue)
+
+  ### 项目健康度
   [![License: MIT](https://img.shields.io/badge/License-MIT-4ECDC4.svg?style=flat-square)](https://opensource.org/licenses/MIT)
   [![TypeScript](https://img.shields.io/badge/TypeScript-5.7+-FFE66D.svg?style=flat-square)](https://www.typescriptlang.org/)
-  [![React](https://img.shields.io/badge/React-19+-61DAFB.svg?style=flat-square)](https://reactjs.org/)
-  [![Next.js](https://img.shields.io/badge/Next.js-15+-000000.svg?style=flat-square&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
-  [![Sponsor](https://img.shields.io/badge/Sponsor-FF6B6B?style=flat-square&logo=github&logoColor=white)](https://github.com/sponsors/dev-snake)
+  [![Vue 3](https://img.shields.io/badge/Vue_3-3.5+-4FC08D.svg?style=flat-square&logo=vuedotjs&logoColor=white)](https://vuejs.org/)
+  [![Vite](https://img.shields.io/badge/Vite-6+-646CFF.svg?style=flat-square&logo=vite&logoColor=white)](https://vitejs.dev/)
+
 
   <br />
 
-  [Documentation & Previews](https://brutxui.site) · [NPM Library](https://www.npmjs.com/package/brutx-ui) · [NPM CLI](https://www.npmjs.com/package/brutx) · [Report Bug](https://github.com/dev-snake/brutxui/issues)
+  [文档与预览](https://lidaixingchen.github.io/brutxui-vue3/) · [NPM 组件库](https://www.npmjs.com/package/brutx-ui-vue) · [NPM CLI](https://www.npmjs.com/package/brutx-vue) · [报告问题](https://github.com/lidaixingchen/brutxui-vue3/issues)
 </div>
 
 ---
 
-## What is BrutxUI?
+## BrutxUI 是什么？
 
-BrutxUI is a Neo-Brutalist design registry for SaaS apps, indie tools, dashboards, developer portfolios, landing pages, and product interfaces that need a stronger visual tone.
+BrutxUI 是一个面向 SaaS 应用、独立工具、仪表盘、开发者作品集、落地页和产品界面的新粗野主义设计注册表，适用于需要更强视觉冲击力的场景。
 
-Instead of shipping as a single npm dependency that hides the implementation, **BrutxUI is copy-paste-first**. It follows the workflow popularized by `shadcn/ui`: components are generated into your project, built on **Radix UI** primitives and **Tailwind CSS**, so you can own the code and change it freely.
+与作为单一 npm 依赖隐藏实现细节的方式不同，**BrutxUI 以复制粘贴为首要原则**。它遵循 `shadcn/ui` 推广的工作流：组件生成到你的项目中，基于 **reka-ui** 无障碍原语和 **Tailwind CSS** 构建，让你拥有代码并自由修改。
 
 ---
 
-## When to Use BrutxUI
+## 何时使用 BrutxUI
 
-- **Good fit:** SaaS products, analytics dashboards, developer utilities, landing pages, web3 portals, and creative portfolios that can support a bold interface style.
-- **Use with care:** Conservative enterprise dashboards, patient-facing healthcare records, and traditional banking apps. The **Pastel** and **Monochrome** presets can soften the contrast when the default style feels too loud.
+- **适合：** SaaS 产品、分析仪表盘、开发者工具、落地页、Web3 门户，以及能承载大胆界面风格的创意作品集。
+- **谨慎使用：** 保守的企业仪表盘、面向患者的医疗记录、传统银行应用。当默认风格过于张扬时，**Pastel（柔和）** 和 **Monochrome（单色）** 预设可以柔化对比度。
 
 ---
 
-## Relationship with `shadcn/ui`
+## 与 `shadcn/ui` 的关系
 
-BrutxUI is meant to work alongside `shadcn/ui`, not replace it:
-* **Shared workflow:** BrutxUI uses the same `components.json` layout schema.
-* **Co-existence:** You can use `shadcn/ui` components for quieter UI surfaces and BrutxUI components for buttons, headers, pricing sections, or other high-contrast areas in the same project.
-* **Tailwind styling:** The generated files merge into standard Tailwind CSS layers.
+BrutxUI 旨在与 `shadcn/ui` 协同工作，而非替代它：
+* **共享工作流：** BrutxUI 使用相同的 `components.json` 布局模式。
+* **共存：** 你可以在同一项目中，对安静的 UI 表面使用 `shadcn/ui` 组件，对按钮、页头、定价区域或其他高对比度区域使用 BrutxUI 组件。
+* **Tailwind 样式：** 生成的文件合并到标准 Tailwind CSS 层中。
 
 ---
 
-## Installation and Registry Workflows
+## 安装与注册表工作流
+
+安装 BrutxUI 组件有两种常见方式：
 
-There are two common ways to install BrutxUI components:
+### 方式 A：Brutx-Vue CLI（推荐）
 
-### Option A: Brutx CLI (Recommended)
-The Brutx CLI handles Tailwind detection, CSS token injection, and package manager detection.
+Brutx-Vue CLI 负责 Tailwind 检测、CSS 令牌注入和包管理器检测。
 
 ```bash
-# Initialize BrutxUI configs in your project
-npx brutx@latest init
+# 在项目中初始化 BrutxUI 配置
+npx brutx-vue@latest init
 
-# Add specific components
-npx brutx@latest add button card badge
+# 添加指定组件
+npx brutx-vue@latest add button card badge
 
-# Install all 29 components at once
-npx brutx@latest add --all
+# 一次性安装全部组件
+npx brutx-vue@latest add --all
 ```
 
-### Option B: Official `shadcn` CLI
-Because BrutxUI follows the shadcn/ui JSON registry schema, you can install BrutxUI components with the official shadcn CLI:
+### 方式 B：官方 `shadcn` CLI
+
+由于 BrutxUI 遵循 shadcn/ui JSON 注册表模式，你可以使用官方 shadcn CLI 安装 BrutxUI 组件：
 
 ```bash
-# Install Brutx Button
-npx shadcn@latest add https://brutxui.site/registry/button.json
+# 安装 Brutx Button
+npx shadcn@latest add https://lidaixingchen.github.io/brutxui-vue3/registry/button.json
 
-# Install Brutx SaaS Pricing Block
-npx shadcn@latest add https://brutxui.site/registry/saas-pricing.json
+# 安装 Brutx SaaS 定价区块
+npx shadcn@latest add https://lidaixingchen.github.io/brutxui-vue3/registry/saas-pricing.json
 ```
 
 ---
 
-## Sizing System and Theme Presets
+## 尺寸系统与主题预设
 
-BrutxUI exposes CSS custom properties in your stylesheet, so you can soften or strengthen the brutalist style globally:
+BrutxUI 在样式表中暴露 CSS 自定义属性，你可以全局柔化或强化粗野主义风格：
 
 ```css
 :root {
-  --brutal-border-width: 3px;     /* Thickness of layouts */
-  --brutal-radius: 0px;           /* Sharp rectangular corners */
-  --brutal-shadow-offset: 4px;    /* Normal card/button offset */
+  --brutal-border-width: 3px;     /* 布局边框粗细 */
+  --brutal-radius: 0px;           /* 锐利直角 */
+  --brutal-shadow-offset: 4px;    /* 常规卡片/按钮偏移 */
 }
 ```
 
-There are three built-in visual presets:
-1. **Classic Brutalism (`.theme-classic`):** Deep black shadows, neon accents, and sharp corners.
-2. **Pastel Neo-Brut (`.theme-pastel`):** Softer colors, lighter contrast, and `8px` corners.
-3. **Stark Monochrome (`.theme-mono`):** Grayscale colors and heavier black lines for minimal interfaces.
+内置三种视觉预设：
+1. **经典粗野主义 (`.theme-classic`)：** 深黑阴影、霓虹强调色、锐利直角。
+2. **柔和新粗野 (`.theme-pastel`)：** 柔和色彩、较轻对比度、`8px` 圆角。
+3. **纯粹单色 (`.theme-mono`)：** 灰度色彩和更粗的黑色线条，适用于极简界面。
 
 ---
 
-## Supported Components and Blocks
+## 多语言支持
 
-BrutxUI includes components and layout blocks for common product UI work:
+BrutxUI 内置中文（`zh-CN`，默认）和英文（`en`）语言包，支持运行时切换、局部覆盖和自定义翻译，无需 `vue-i18n` 依赖：
 
-### Layout Blocks and Templates
-* **`saas-pricing`:** A responsive SaaS pricing section with monthly/yearly billing switches, checklist icons, highlighted plans, and CTA buttons. [Registry URL](https://brutxui.site/registry/saas-pricing.json)
-* **`dashboard-stats`:** A responsive analytics panel for metrics such as revenue and conversion, with positive/negative trend badges. [Registry URL](https://brutxui.site/registry/dashboard-stats.json)
+```ts
+import { BrutxUIPlugin, en } from 'brutx-ui-vue'
 
-### Atomic Components
-* **Forms:** `Button`, `SubmitButton` (Server Component safe), `Input`, `Textarea`, `Checkbox`, `Switch`, `Select`, `Label`
-* **Overlays:** `Dialog` (Modal), `Popover`, `Tooltip`, `DropdownMenu`
-* **Data & Lists:** `Table`, `Tabs`, `Command` (spotlight search), `Combobox` (multi-picker), `Pagination`, `ScrollArea`
-* **Feedback:** `Alert`, `Badge`, `Toast` (notifiers), `Spinner` (loaders), `Skeleton`
-* **Display:** `Avatar`, `Calendar`, `Separator`
+app.use(BrutxUIPlugin, { locale: en })
+```
 
 ---
 
-## Contribution and Development
+## 支持的组件与区块
 
-To run, test, and package BrutxUI locally:
+BrutxUI 包含常见产品 UI 所需的组件和布局区块：
 
-### 1. Repository Setup
+### 布局区块与模板
+* **`saas-pricing`：** 响应式 SaaS 定价区域，支持月付/年付切换、清单图标、高亮方案和 CTA 按钮。[注册表 URL](https://lidaixingchen.github.io/brutxui-vue3/registry/saas-pricing.json)
+* **`dashboard-stats`：** 响应式分析面板，用于收入和转化等指标，带正/负趋势徽章。[注册表 URL](https://lidaixingchen.github.io/brutxui-vue3/registry/dashboard-stats.json)
+
+### 原子组件
+* **表单：** `Button`、`Input`、`Textarea`、`Checkbox`、`Switch`、`Select`、`Label`
+* **浮层：** `Dialog`（模态框）、`Popover`、`Tooltip`、`DropdownMenu`
+* **数据与列表：** `Table`、`Tabs`、`Command`（快速搜索）、`Combobox`（多选器）、`Pagination`、`ScrollArea`
+* **反馈：** `Alert`、`Badge`、`Toast`（通知）、`Spinner`（加载）、`Skeleton`
+* **展示：** `Avatar`、`Calendar`、`Separator`
+
+---
+
+## 贡献与开发
+
+在本地运行、测试和打包 BrutxUI：
+
+### 1. 仓库设置
 ```bash
-# Clone the repository
-git clone https://github.com/dev-snake/brutxui.git
-cd brutxui
+# 克隆仓库
+git clone https://github.com/lidaixingchen/brutxui-vue3.git
+cd brutxui-vue3
 
-# Install workspace dependencies
+# 安装工作区依赖
 pnpm install
 
-# Build UI modules and CLI binaries
-pnpm --filter brutx-ui build && pnpm --filter brutx build
+# 构建 UI 模块和 CLI 二进制文件
+pnpm --filter brutx-ui-vue build && pnpm --filter brutx-vue build
 ```
 
-### 2. Run Test Suites
+### 2. 运行测试套件
 ```bash
 pnpm test
 ```
 
-### 3. Recompile Component JSON Registry
-If you make changes to core components in `packages/ui/src/components/*.tsx`, compile and validate the schemas:
+### 3. 重新编译组件 JSON 注册表
+如果你修改了 `packages/ui/src/components/*.vue` 中的核心组件，请编译并验证模式：
 ```bash
-# Compile TS to registry JSON files
-pnpm --filter brutx-registry build
+# 编译为注册表 JSON 文件
+pnpm --filter brutx-registry-vue build
 
-# Validate JSON files against shadcn CLI schema
-pnpm --filter brutx-registry validate
+# 根据 shadcn CLI 模式验证 JSON 文件
+pnpm --filter brutx-registry-vue validate
 ```
 
 ---
 
-## License
-
-BrutxUI is open-source software licensed under the [MIT License](LICENSE).
+## 许可证
 
-<div align="center">
-  <p>Built by dev-snake and contributors.</p>
-</div>
+BrutxUI 是基于 [MIT 许可证](LICENSE) 的开源软件。
diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
deleted file mode 100644
index 580f3c9..0000000
--- a/apps/docs/.eslintrc.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "react/no-unescaped-entities": "off",
-    "@next/next/no-img-element": "off"
-  }
-}
diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts
new file mode 100644
index 0000000..118afdf
--- /dev/null
+++ b/apps/docs/.vitepress/config.ts
@@ -0,0 +1,222 @@
+import { defineConfig } from 'vitepress'
+import tailwindcss from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import { resolve } from 'path'
+
+const tailwindConfig = resolve(__dirname, '../tailwind.config.cjs')
+
+export default defineConfig({
+    title: 'BrutxUI',
+    description: 'Neo-Brutalism 风格 Vue 3 组件库',
+    base: '/brutxui-vue3/',
+    sitemap: {
+        hostname: 'https://lidaixingchen.github.io/brutxui-vue3/',
+    },
+    head: [
+        ['link', { rel: 'icon', type: 'image/svg+xml', href: '/brutxui-vue3/favicon.svg' }],
+        ['meta', { name: 'theme-color', content: '#FFE66D' }],
+        ['meta', { property: 'og:type', content: 'website' }],
+        ['meta', { property: 'og:title', content: 'BrutxUI' }],
+        ['meta', { property: 'og:description', content: 'Neo-Brutalism 风格 Vue 3 组件库' }],
+        ['meta', { property: 'og:image', content: '/brutxui-vue3/og-image.svg' }],
+        ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+        ['meta', { name: 'twitter:title', content: 'BrutxUI' }],
+        ['meta', { name: 'twitter:description', content: 'Neo-Brutalism 风格 Vue 3 组件库' }],
+        ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
+        ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
+        ['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;900&display=swap' }],
+        ['link', { rel: 'manifest', href: '/brutxui-vue3/manifest.json' }],
+    ],
+    transformHead(context) {
+        let pageUrl = context.page.replace(/\.md$/, '')
+        if (pageUrl === 'index') pageUrl = ''
+        const canonicalUrl = `https://lidaixingchen.github.io/brutxui-vue3/${pageUrl}`
+
+        return [
+            ['link', { rel: 'canonical', href: canonicalUrl }],
+            [
+                'script',
+                { type: 'application/ld+json' },
+                JSON.stringify({
+                    '@context': 'https://schema.org',
+                    '@type': 'SoftwareSourceCode',
+                    name: 'BrutxUI',
+                    description: 'Neo-Brutalism 风格 Vue 3 组件库',
+                    url: 'https://lidaixingchen.github.io/brutxui-vue3/',
+                    codeRepository: 'https://github.com/lidaixingchen/brutxui-vue3',
+                    programmingLanguage: 'Vue',
+                    license: 'MIT',
+                }),
+            ],
+        ]
+    },
+    themeConfig: {
+        logo: '/favicon.svg',
+        nav: [
+            { text: '指南', link: '/guide/getting-started' },
+            { text: '组件', link: '/components/alert' },
+            {
+                text: 'GitHub',
+                link: 'https://github.com/lidaixingchen/brutxui-vue3',
+            },
+        ],
+        sidebar: [
+            {
+                text: '快速开始',
+                link: '/guide/getting-started',
+            },
+            {
+                text: '安装',
+                items: [
+                    { text: 'Vite', link: '/guide/installation-vite' },
+                    { text: '手动安装', link: '/guide/installation-manual' },
+                ],
+            },
+            {
+                text: 'CLI 工具',
+                link: '/guide/cli',
+            },
+            {
+                text: '主题与令牌',
+                link: '/guide/theme',
+            },
+            {
+                text: '国际化',
+                link: '/guide/locale',
+            },
+            {
+                text: 'AI 集成',
+                link: '/guide/ai',
+            },
+            {
+                text: '组件',
+                items: [
+                    { text: 'Accordion 折叠面板', link: '/components/accordion' },
+                    { text: 'Alert 提示', link: '/components/alert' },
+                    { text: 'Alert Dialog 提示对话框', link: '/components/alert-dialog' },
+                    { text: 'Avatar 头像', link: '/components/avatar' },
+                    { text: 'Badge 徽标', link: '/components/badge' },
+                    { text: 'BeforeAfter 对比滑块', link: '/components/before-after' },
+                    { text: 'Breadcrumb 面包屑', link: '/components/breadcrumb' },
+                    { text: 'Button 按钮', link: '/components/button' },
+                    { text: 'Calendar 日历', link: '/components/calendar' },
+                    { text: 'Card 卡片', link: '/components/card' },
+                    { text: 'Card3D 3D 悬浮卡片', link: '/components/card-3d' },
+                    { text: 'Checkbox 复选框', link: '/components/checkbox' },
+                    { text: 'CodeBlock 代码块', link: '/components/code-block' },
+                    { text: 'Combobox 组合框', link: '/components/combobox' },
+                    { text: 'Command 命令面板', link: '/components/command' },
+                    { text: 'CopyToClipboard 复制按钮', link: '/components/copy-to-clipboard' },
+                    { text: 'Dashboard Stats 仪表盘统计', link: '/components/dashboard-stats' },
+                    { text: 'Dialog 对话框', link: '/components/dialog' },
+                    { text: 'Dropdown Menu 下拉菜单', link: '/components/dropdown-menu' },
+                    { text: 'Form 表单', link: '/components/form' },
+                    { text: 'GlitchText 故障文本', link: '/components/glitch-text' },
+                    { text: 'HardcoreInput 硬核输入框', link: '/components/hardcore-input' },
+                    { text: 'Input 输入框', link: '/components/input' },
+                    { text: 'Carousel 轮播图', link: '/components/carousel' },
+                    { text: 'ChatBubble 聊天气泡', link: '/components/chat-bubble' },
+                    { text: 'Counter 数字滚动', link: '/components/counter' },
+                    { text: 'KanbanBoard 看板', link: '/components/kanban-board' },
+                    { text: 'Kbd 键盘按键', link: '/components/kbd' },
+                    { text: 'Label 标签', link: '/components/label' },
+                    { text: 'Marquee 跑马灯', link: '/components/marquee' },
+                    { text: 'NumberInput 数字输入框', link: '/components/number-input' },
+                    { text: 'Pagination 分页', link: '/components/pagination' },
+                    { text: 'Popover 弹出层', link: '/components/popover' },
+                    { text: 'Progress 进度条', link: '/components/progress' },
+                    { text: 'Radio Group 单选组', link: '/components/radio-group' },
+                    { text: 'SaaS Pricing 定价', link: '/components/saas-pricing' },
+                    { text: 'Scroll Area 滚动区域', link: '/components/scroll-area' },
+                    { text: 'ScratchCard 刮刮卡', link: '/components/scratch-card' },
+                    { text: 'SketchyChart 手绘图表', link: '/components/sketchy-chart' },
+                    { text: 'Select 选择器', link: '/components/select' },
+                    { text: 'Separator 分隔线', link: '/components/separator' },
+                    { text: 'Sheet 抽屉', link: '/components/sheet' },
+                    { text: 'Skeleton 骨架屏', link: '/components/skeleton' },
+                    { text: 'Slider 滑块', link: '/components/slider' },
+                    { text: 'Spinner 加载指示器', link: '/components/spinner' },
+                    { text: 'Submit Button 提交按钮', link: '/components/submit-button' },
+                    { text: 'Switch 开关', link: '/components/switch' },
+                    { text: 'Table 表格', link: '/components/table' },
+                    { text: 'Tabs 标签页', link: '/components/tabs' },
+                    { text: 'Stepper 步骤条', link: '/components/stepper' },
+                    { text: 'TagsInput 标签输入', link: '/components/tags-input' },
+                    { text: 'Textarea 文本域', link: '/components/textarea' },
+                    { text: 'Timeline 时间线', link: '/components/timeline' },
+                    { text: 'Toast 轻提示', link: '/components/toast' },
+                    { text: 'Toggle 切换', link: '/components/toggle' },
+                    { text: 'Toggle Group 切换组', link: '/components/toggle-group' },
+                    { text: 'Tooltip 工具提示', link: '/components/tooltip' },
+                    { text: 'TreeView 树形目录', link: '/components/tree-view' },
+                ],
+            },
+            {
+                text: '区块与模板',
+                items: [
+                    { text: '概览', link: '/blocks/' },
+                    { text: 'Brutalist Hero 英雄区', link: '/blocks/brutalist-hero' },
+                    { text: 'Pricing Section 定价区', link: '/blocks/pricing-section' },
+                    { text: 'Auth Card 认证卡片', link: '/blocks/auth-card' },
+                    { text: 'Dashboard Shell 仪表盘框架', link: '/blocks/dashboard-shell' },
+                    { text: 'Empty State 空状态', link: '/blocks/empty-state' },
+                    { text: 'Waitlist Page 等候列表页', link: '/blocks/waitlist-page' },
+                    { text: 'Not Found Page 404 页面', link: '/blocks/not-found-page' },
+                    { text: 'Loading Page 加载页', link: '/blocks/loading-page' },
+                    { text: 'Header Section 顶部导航', link: '/blocks/header-section' },
+                    { text: 'Footer Section 底部信息栏', link: '/blocks/footer-section' },
+                    { text: 'FAQ Section 常见问题', link: '/blocks/faq-section' },
+                    { text: 'Testimonial Card 评价卡片', link: '/blocks/testimonial-card' },
+                    { text: 'Blog Card 博客卡片', link: '/blocks/blog-card' },
+                    { text: 'File Card 文件卡片', link: '/blocks/file-card' },
+                    { text: 'Quick Actions 快捷操作', link: '/blocks/quick-actions' },
+                    { text: 'Tabs Nav 标签导航', link: '/blocks/tabs-nav' },
+                    { text: 'Data Table Section 数据表格', link: '/blocks/data-table-section' },
+                    { text: 'Settings Page 设置页', link: '/blocks/settings-page' },
+                    { text: 'Error Card 错误卡片', link: '/blocks/error-card' },
+                    { text: 'Success Card 成功卡片', link: '/blocks/success-card' },
+                    { text: 'Search Widget 搜索组件', link: '/blocks/search-widget' },
+                    { text: 'Feedback Form 反馈表单', link: '/blocks/feedback-form' },
+                    { text: 'Stepper Section 步骤导航', link: '/blocks/stepper-section' },
+                    { text: 'Cookie Consent Cookie 同意', link: '/blocks/cookie-consent' },
+                    { text: 'Blog List Page 博客列表页', link: '/blocks/blog-list-page' },
+                    { text: 'Chart Section 图表区', link: '/blocks/chart-section' },
+                    { text: 'Upload Card 上传卡片', link: '/blocks/upload-card' },
+                    { text: 'Gallery Section 画廊区', link: '/blocks/gallery-section' },
+                    { text: 'Overview Page 概览页', link: '/blocks/overview-page' },
+                    { text: 'Activity Log Page 活动日志页', link: '/blocks/activity-log-page' },
+                    { text: 'Profile Page 个人资料页', link: '/blocks/profile-page' },
+                ],
+            },
+        ],
+        search: {
+            provider: 'local',
+        },
+        socialLinks: [
+            { icon: 'github', link: 'https://github.com/lidaixingchen/brutxui-vue3' },
+        ],
+        footer: {
+            message: 'Built with brute force.',
+            copyright: `© ${new Date().getFullYear()} BrutxUI · MIT License`,
+        },
+        editLink: {
+            pattern: 'https://github.com/lidaixingchen/brutxui-vue3/edit/main/apps/docs/:path',
+            text: '在 GitHub 上编辑此页',
+        },
+    },
+    vite: {
+        resolve: {
+            alias: {
+                '@': new URL('./.vitepress', import.meta.url).pathname,
+            },
+        },
+        css: {
+            postcss: {
+                plugins: [
+                    tailwindcss(tailwindConfig),
+                    autoprefixer(),
+                ],
+            },
+        },
+    },
+})
diff --git a/apps/docs/.vitepress/theme/components/CodeBlock.vue b/apps/docs/.vitepress/theme/components/CodeBlock.vue
new file mode 100644
index 0000000..288d33c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/CodeBlock.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import CopyButton from './CopyButton.vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+    code?: string
+    language?: string
+    class?: string
+    preClassName?: string
+    copyButtonClassName?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    code: '',
+    language: '',
+    class: '',
+    preClassName: '',
+    copyButtonClassName: '',
+})
+
+const codeText = computed(() => props.code)
+
+const wrapperClass = computed(() => cn('relative group codeblock-wrapper', props.class))
+
+const copyClass = computed(() =>
+    cn(
+        'absolute top-2 right-2 z-10 h-8 w-8 opacity-0 group-hover:opacity-100 focus:opacity-100',
+        'border-2 border-brutal shadow-brutal-sm',
+        props.copyButtonClassName,
+    ),
+)
+
+const preClass = computed(() =>
+    cn(
+        'bg-gray-900 text-gray-100 p-4 pt-8 border-3 border-brutal shadow-brutal overflow-x-auto font-mono text-sm',
+        props.preClassName,
+    ),
+)
+</script>
+
+<template>
+    <div :class="wrapperClass">
+        <CopyButton
+            v-if="codeText"
+            :text="codeText"
+            :class="copyClass"
+        />
+        <span
+            v-if="language"
+            class="absolute top-2 left-3 text-[0.6rem] font-black text-brutal-accent uppercase tracking-[0.12em] z-10"
+        >
+            {{ language }}
+        </span>
+        <pre :class="preClass"><code><slot>{{ code }}</slot></code></pre>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ComponentPreview.vue b/apps/docs/.vitepress/theme/components/ComponentPreview.vue
new file mode 100644
index 0000000..427076a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ComponentPreview.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+    align?: 'center' | 'start' | 'stretch'
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    align: 'center',
+    class: '',
+})
+
+const containerClass = computed(() =>
+    cn(
+        'relative p-4 sm:p-8 flex min-h-[150px] sm:min-h-[200px] bg-brutal-muted border-3 border-brutal shadow-brutal overflow-x-auto transition-all duration-150',
+        props.align === 'center'
+            ? 'items-center justify-center'
+            : props.align === 'start'
+              ? 'items-start justify-start'
+              : 'items-stretch justify-start',
+        props.class,
+    ),
+)
+
+const innerClass = computed(() =>
+    cn(
+        'w-full gap-2 sm:gap-4',
+        props.align === 'center'
+            ? 'flex items-center justify-center flex-wrap'
+            : 'flex flex-col items-stretch',
+    ),
+)
+</script>
+
+<template>
+    <div :class="containerClass">
+        <!-- PREVIEW badge -->
+        <span
+            class="absolute top-0 left-0 z-20 px-2 py-0.5 text-[0.6rem] font-black uppercase tracking-[0.12em] bg-brutal-accent text-black border-b-2 border-r-2 border-brutal select-none"
+        >
+            Preview
+        </span>
+        <div :class="innerClass">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/CopyButton.vue b/apps/docs/.vitepress/theme/components/CopyButton.vue
new file mode 100644
index 0000000..bc75e15
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/CopyButton.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Check, Copy } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+interface Props {
+    text: string
+    iconSize?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    iconSize: 16,
+    class: '',
+})
+
+const copied = ref(false)
+
+async function handleCopy() {
+    await navigator.clipboard.writeText(props.text)
+    copied.value = true
+    setTimeout(() => {
+        copied.value = false
+    }, 2000)
+}
+
+const buttonClass = computed(() =>
+    cn(
+        'inline-flex items-center justify-center border-2 border-brutal font-black text-xs',
+        'transition-all duration-150',
+        copied.value
+            ? 'bg-brutal-accent text-black shadow-brutal-sm'
+            : 'bg-brutal-secondary text-black shadow-brutal-sm hover:bg-brutal-accent hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        props.class,
+    ),
+)
+</script>
+
+<template>
+    <button
+        type="button"
+        :class="buttonClass"
+        :title="copied ? 'Copied!' : 'Copy to clipboard'"
+        :aria-label="copied ? 'Copied' : 'Copy to clipboard'"
+        @click="handleCopy"
+    >
+        <Check v-if="copied" :size="iconSize" :stroke-width="3" />
+        <Copy v-else :size="iconSize" :stroke-width="3" />
+    </button>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/InstallationTabs.vue b/apps/docs/.vitepress/theme/components/InstallationTabs.vue
new file mode 100644
index 0000000..5e63677
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/InstallationTabs.vue
@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Github } from 'lucide-vue-next'
+import CopyButton from './CopyButton.vue'
+import { cn } from '../lib/utils'
+
+type PackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun'
+type InstallTab = 'cli' | 'manual'
+
+interface Props {
+    componentName: string
+    dependencies?: string[]
+    imports?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    dependencies: undefined,
+    imports: undefined,
+})
+
+const componentDependencies: Record<string, string[]> = {
+    button: ['reka-ui', 'class-variance-authority'],
+    card: ['class-variance-authority'],
+    input: ['class-variance-authority'],
+    textarea: ['class-variance-authority'],
+    label: ['reka-ui', 'class-variance-authority'],
+    badge: ['class-variance-authority'],
+    dialog: ['reka-ui'],
+    popover: ['reka-ui'],
+    tooltip: ['reka-ui'],
+    'dropdown-menu': ['reka-ui'],
+    select: ['reka-ui'],
+    tabs: ['reka-ui'],
+    table: [],
+    alert: ['class-variance-authority'],
+    avatar: ['class-variance-authority'],
+    separator: ['reka-ui'],
+    switch: ['reka-ui'],
+    checkbox: ['reka-ui'],
+    pagination: [],
+    spinner: [],
+    toast: [],
+    skeleton: [],
+    calendar: ['v-calendar'],
+    command: ['reka-ui'],
+    combobox: ['reka-ui'],
+    'scroll-area': ['reka-ui'],
+    'submit-button': [],
+    form: ['vee-validate', '@vee-validate/zod', 'zod'],
+    'alert-dialog': ['reka-ui'],
+    sheet: ['reka-ui'],
+    slider: ['reka-ui'],
+    toggle: ['reka-ui'],
+    'toggle-group': ['reka-ui'],
+    'radio-group': ['reka-ui'],
+    progress: ['reka-ui'],
+    'saas-pricing': [],
+    'dashboard-stats': [],
+}
+
+const componentImports: Record<string, string[]> = {
+    button: ['Button', 'buttonVariants'],
+    card: ['Card', 'CardHeader', 'CardTitle', 'CardDescription', 'CardContent', 'CardFooter'],
+    input: ['Input'],
+    textarea: ['Textarea'],
+    label: ['Label'],
+    badge: ['Badge', 'badgeVariants'],
+    dialog: ['DialogContent', 'DialogHeader', 'DialogFooter', 'DialogTitle', 'DialogDescription'],
+    'alert-dialog': ['AlertDialogContent', 'AlertDialogHeader', 'AlertDialogFooter', 'AlertDialogTitle', 'AlertDialogDescription', 'AlertDialogAction', 'AlertDialogCancel'],
+    popover: ['PopoverContent'],
+    tooltip: ['TooltipContent'],
+    'dropdown-menu': ['DropdownMenuContent', 'DropdownMenuItem', 'DropdownMenuCheckboxItem', 'DropdownMenuRadioItem', 'DropdownMenuLabel', 'DropdownMenuSeparator', 'DropdownMenuShortcut', 'DropdownMenuSubContent', 'DropdownMenuSubTrigger'],
+    select: ['SelectTrigger', 'SelectContent', 'SelectLabel', 'SelectItem', 'SelectSeparator'],
+    tabs: ['TabsList', 'TabsTrigger', 'TabsContent'],
+    table: ['Table', 'TableHeader', 'TableBody', 'TableFooter', 'TableHead', 'TableRow', 'TableCell', 'TableCaption'],
+    alert: ['Alert', 'AlertTitle', 'AlertDescription'],
+    avatar: ['Avatar', 'AvatarImage', 'AvatarFallback'],
+    separator: ['Separator'],
+    switch: ['Switch'],
+    checkbox: ['Checkbox'],
+    pagination: ['Pagination', 'PaginationContent', 'PaginationEllipsis', 'PaginationItem', 'PaginationLink', 'PaginationNext', 'PaginationPrevious'],
+    spinner: ['Spinner', 'BlockSpinner', 'DotsSpinner', 'BarsSpinner'],
+    toast: ['Toast', 'ToastContainer', 'useToast'],
+    skeleton: ['Skeleton', 'SkeletonText', 'SkeletonAvatar', 'SkeletonCard', 'SkeletonTable'],
+    calendar: ['Calendar'],
+    command: ['Command', 'CommandDialog', 'CommandInput', 'CommandList', 'CommandEmpty', 'CommandGroup', 'CommandItem', 'CommandShortcut', 'CommandSeparator'],
+    combobox: ['Combobox', 'ComboboxMulti'],
+    'scroll-area': ['ScrollArea', 'ScrollBar'],
+    'submit-button': ['SubmitButton'],
+    form: ['Form', 'FormField', 'FormItem', 'FormLabel', 'FormControl', 'FormDescription', 'FormMessage'],
+    sheet: ['SheetContent', 'SheetHeader', 'SheetFooter', 'SheetTitle', 'SheetDescription', 'sheetVariants'],
+    slider: ['Slider'],
+    toggle: ['Toggle'],
+    'toggle-group': ['ToggleGroup', 'ToggleGroupItem', 'toggleGroupKey'],
+    'radio-group': ['RadioGroup', 'RadioGroupItem'],
+    progress: ['Progress'],
+    'saas-pricing': ['SaaSPricing'],
+    'dashboard-stats': ['DashboardStats'],
+    'brutalist-hero': ['BrutalistHero'],
+    'pricing-section': ['PricingSection'],
+    'auth-card': ['AuthCard'],
+    'dashboard-shell': ['DashboardShell'],
+    'empty-state': ['EmptyState'],
+    'waitlist-page': ['WaitlistPage'],
+}
+
+const activeTab = ref<InstallTab>('cli')
+const activePackageManager = ref<PackageManager>('pnpm')
+
+const packageManagers: { key: PackageManager; label: string }[] = [
+    { key: 'pnpm', label: 'pnpm' },
+    { key: 'npm', label: 'npm' },
+    { key: 'yarn', label: 'yarn' },
+    { key: 'bun', label: 'bun' },
+]
+
+const resolvedDeps = computed(() => {
+    if (props.dependencies) return props.dependencies
+    return componentDependencies[props.componentName] ?? []
+})
+
+const resolvedImports = computed(() => {
+    if (props.imports) return props.imports
+    return componentImports[props.componentName] ?? []
+})
+
+const cliCommand = computed(() => {
+    const name = props.componentName
+    switch (activePackageManager.value) {
+        case 'pnpm':
+            return `pnpm dlx brutx-vue@latest add ${name}`
+        case 'npm':
+            return `npx brutx-vue@latest add ${name}`
+        case 'yarn':
+            return `yarn dlx brutx-vue@latest add ${name}`
+        case 'bun':
+            return `bunx brutx-vue@latest add ${name}`
+    }
+})
+
+const installCommand = computed(() => {
+    const deps = resolvedDeps.value
+    if (deps.length === 0) return ''
+    const depsStr = deps.join(' ')
+    switch (activePackageManager.value) {
+        case 'pnpm':
+            return `pnpm add ${depsStr}`
+        case 'npm':
+            return `npm install ${depsStr}`
+        case 'yarn':
+            return `yarn add ${depsStr}`
+        case 'bun':
+            return `bun add ${depsStr}`
+    }
+})
+
+const importStatement = computed(() => {
+    const names = resolvedImports.value
+    if (names.length === 0) return ''
+    const compName = props.componentName
+
+    return names
+        .map((name) => {
+            if (name === 'useToast') {
+                return "import { useToast } from '@/composables/useToast'"
+            }
+            if (name.endsWith('Variants') || name.endsWith('Key')) {
+                const file = name.endsWith('Key') ? `${compName}-key` : `${compName}-variants`
+                return `import { ${name} } from '@/components/ui/${compName}/${file}'`
+            }
+            return `import ${name} from '@/components/ui/${compName}/${name}.vue'`
+        })
+        .join('\n')
+})
+
+const githubUrl = computed(
+    () =>
+        `https://github.com/lidaixingchen/brutxui-vue3/tree/main/packages/ui/src/components/${props.componentName}`,
+)
+
+const getTabClass = (tab: InstallTab) =>
+    cn(
+        'relative px-4 py-2 text-sm font-black uppercase tracking-wider border-3 border-brutal transition-all duration-150',
+        activeTab.value === tab
+            ? 'bg-brutal-primary text-black shadow-brutal before:absolute before:top-0 before:left-0 before:right-0 before:h-[3px] before:bg-brutal-accent'
+            : 'bg-brutal-bg text-brutal-fg hover:bg-brutal-muted',
+    )
+
+const getPmTabClass = (pm: PackageManager) =>
+    cn(
+        'px-3 py-1.5 text-xs font-black uppercase tracking-wider border-2 border-brutal transition-all duration-150',
+        activePackageManager.value === pm
+            ? 'bg-brutal-secondary text-black shadow-brutal-sm'
+            : 'bg-brutal-bg text-brutal-fg hover:bg-brutal-muted',
+    )
+</script>
+
+<template>
+    <div class="border-3 border-brutal shadow-brutal overflow-hidden">
+        <div class="flex border-b-3 border-brutal">
+            <button
+                type="button"
+                :class="getTabClass('cli')"
+                @click="activeTab = 'cli'"
+            >
+                CLI
+            </button>
+            <button
+                type="button"
+                :class="getTabClass('manual')"
+                @click="activeTab = 'manual'"
+            >
+                Manual
+            </button>
+        </div>
+
+        <div class="p-4 space-y-4 bg-brutal-bg">
+            <div class="flex gap-1">
+                <button
+                    v-for="pm in packageManagers"
+                    :key="pm.key"
+                    type="button"
+                    :class="getPmTabClass(pm.key)"
+                    @click="activePackageManager = pm.key"
+                >
+                    {{ pm.label }}
+                </button>
+            </div>
+
+            <div v-if="activeTab === 'cli'">
+                <div class="relative group">
+                    <pre class="p-4 border-2 border-brutal shadow-brutal-sm overflow-x-auto font-mono text-sm" style="background-color: #111827; color: #f3f4f6;"><code>{{ cliCommand }}</code></pre>
+                    <CopyButton
+                        :text="cliCommand"
+                        class="absolute top-2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100 focus:opacity-100 shadow-brutal-sm"
+                    />
+                </div>
+            </div>
+
+            <div v-if="activeTab === 'manual'" class="space-y-4">
+                <div v-if="resolvedDeps.length > 0">
+                    <h4 class="text-sm font-bold mb-2">
+                        1. Install dependencies
+                    </h4>
+                    <div class="relative group">
+                        <pre class="p-4 border-2 border-brutal shadow-brutal-sm overflow-x-auto font-mono text-sm" style="background-color: #111827; color: #f3f4f6;"><code>{{ installCommand }}</code></pre>
+                        <CopyButton
+                            :text="installCommand"
+                            class="absolute top-2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100 focus:opacity-100 shadow-brutal-sm"
+                        />
+                    </div>
+                </div>
+
+                <div>
+                    <h4 class="text-sm font-bold mb-2">
+                        {{ resolvedDeps.length > 0 ? '2' : '1' }}. Copy the component source from GitHub
+                    </h4>
+                    <a
+                        :href="githubUrl"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="inline-flex items-center gap-2 px-3 py-2 text-sm font-bold border-3 border-brutal bg-brutal-bg shadow-brutal hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all"
+                    >
+                        <Github :size="16" />
+                        View on GitHub
+                    </a>
+                </div>
+
+                <div>
+                    <h4 class="text-sm font-bold mb-2">
+                        {{ resolvedDeps.length > 0 ? '3' : '2' }}. Save to your project
+                    </h4>
+                    <pre class="p-4 border-2 border-brutal shadow-brutal-sm overflow-x-auto font-mono text-sm" style="background-color: #111827; color: #f3f4f6;"><code>src/components/ui/{{ componentName }}/</code></pre>
+                </div>
+
+                <div v-if="resolvedImports.length > 0">
+                    <h4 class="text-sm font-bold mb-2">
+                        {{ resolvedDeps.length > 0 ? '4' : '3' }}. Import and use
+                    </h4>
+                    <div class="relative group">
+                        <pre class="p-4 border-2 border-brutal shadow-brutal-sm overflow-x-auto font-mono text-sm" style="background-color: #111827; color: #f3f4f6;"><code>{{ importStatement }}</code></pre>
+                        <CopyButton
+                            :text="importStatement"
+                            class="absolute top-2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100 focus:opacity-100 shadow-brutal-sm"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Logo.vue b/apps/docs/.vitepress/theme/components/Logo.vue
new file mode 100644
index 0000000..c839f85
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Logo.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl'
+    showText?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: 'md',
+    showText: true,
+    class: '',
+})
+
+const sizeConfig = computed(() => {
+    const configs = {
+        sm: { box: 'h-7 w-7', text: 'text-xs', gap: 'gap-1.5', layers: 'h-2.5 w-2.5' },
+        md: { box: 'h-9 w-9', text: 'text-sm', gap: 'gap-2', layers: 'h-3 w-3' },
+        lg: { box: 'h-11 w-11', text: 'text-base', gap: 'gap-2.5', layers: 'h-4 w-4' },
+        xl: { box: 'h-14 w-14', text: 'text-lg', gap: 'gap-3', layers: 'h-5 w-5' },
+    }
+    return configs[props.size]
+})
+
+const wrapperClass = computed(() =>
+    cn('inline-flex items-center font-brutal font-black', sizeConfig.value.gap, props.class),
+)
+
+const boxClass = computed(() =>
+    cn(
+        'relative border-3 border-brutal shadow-brutal bg-brutal-bg flex items-center justify-center',
+        sizeConfig.value.box,
+    ),
+)
+
+const labelClass = computed(() =>
+    cn('text-brutal-fg font-brutal font-black', sizeConfig.value.text),
+)
+
+const layer1Class = computed(() =>
+    cn('absolute -top-1 -left-1 bg-brutal-primary border-2 border-brutal', sizeConfig.value.layers),
+)
+
+const layer2Class = computed(() =>
+    cn('absolute -bottom-1 -right-1 bg-brutal-secondary border-2 border-brutal', sizeConfig.value.layers),
+)
+
+const layer3Class = computed(() =>
+    cn('absolute -top-1 -right-1 bg-brutal-accent border-2 border-brutal', sizeConfig.value.layers),
+)
+</script>
+
+<template>
+    <div :class="wrapperClass">
+        <div :class="boxClass">
+            <div :class="layer1Class" />
+            <div :class="layer2Class" />
+            <div :class="layer3Class" />
+            <span class="relative z-10 font-brutal font-black text-brutal-fg" :class="sizeConfig.value.text">
+                BX
+            </span>
+        </div>
+        <span v-if="showText" :class="labelClass">
+            BrutxUI
+        </span>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ThemeToggle.vue b/apps/docs/.vitepress/theme/components/ThemeToggle.vue
new file mode 100644
index 0000000..5509f10
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ThemeToggle.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+import { Sun, Moon } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+interface Props {
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    class: '',
+})
+
+const { isDark } = useData()
+
+function toggleAppearance() {
+    const toggle = document.querySelector('.VPSwitchAppearance') as HTMLElement | null
+    if (toggle) {
+        toggle.click()
+    }
+}
+
+const buttonClass = computed(() =>
+    cn(
+        'inline-flex items-center justify-center h-10 w-10 border-3 border-brutal bg-brutal-bg shadow-brutal',
+        'hover:bg-brutal-accent hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'transition-all duration-150',
+        props.class,
+    ),
+)
+</script>
+
+<template>
+    <button
+        type="button"
+        :class="buttonClass"
+        :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+        @click="toggleAppearance"
+    >
+        <Sun v-if="isDark" :size="18" :stroke-width="2.5" class="text-brutal-fg" />
+        <Moon v-else :size="18" :stroke-width="2.5" class="text-brutal-fg" />
+    </button>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/AccordionDemo.vue b/apps/docs/.vitepress/theme/components/demos/AccordionDemo.vue
new file mode 100644
index 0000000..26fd3d3
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/AccordionDemo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'brutx-ui-vue'
+
+const activeItem = ref('item-1')
+</script>
+
+<template>
+    <div class="w-full max-w-[500px]">
+        <Accordion type="single" collapsible v-model="activeItem">
+            <AccordionItem value="item-1">
+                <AccordionTrigger>什么是 BrutxUI？</AccordionTrigger>
+                <AccordionContent>
+                    BrutxUI 是一个面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist（新粗野主义）风格 UI 组件库。它具有高对比度的边框、实心阴影、大胆的配色以及极具物理触感的交互设计。
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+                <AccordionTrigger>它支持无障碍吗？</AccordionTrigger>
+                <AccordionContent>
+                    是的。BrutxUI 采用 reka-ui 无头组件原语作为底层骨架，内置完善的 WAI-ARIA 规范和键盘导航逻辑。
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3" variant="interactive">
+                <AccordionTrigger>为什么它会有点击位移？</AccordionTrigger>
+                <AccordionContent>
+                    这是粗野主义交互的灵魂——所有的可点击元素在被按下时都会发生位移（并清除阴影），以便为用户提供极度拟真的物理反馈。
+                </AccordionContent>
+            </AccordionItem>
+        </Accordion>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ActivityLogPageDemo.vue b/apps/docs/.vitepress/theme/components/demos/ActivityLogPageDemo.vue
new file mode 100644
index 0000000..abe497c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ActivityLogPageDemo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ActivityLogPage } from 'brutx-ui-vue'
+import type { ActivityEntry } from 'brutx-ui-vue'
+
+const entries: ActivityEntry[] = [
+    {
+        id: '1',
+        action: '用户登录',
+        user: '张三',
+        timestamp: '2026-06-03 10:30',
+        details: 'IP: 192.168.1.1',
+        type: 'info',
+    },
+    {
+        id: '2',
+        action: '修改密码',
+        user: '李四',
+        timestamp: '2026-06-03 09:15',
+        details: '密码已更新',
+        type: 'success',
+    },
+    {
+        id: '3',
+        action: '登录失败',
+        user: '王五',
+        timestamp: '2026-06-03 08:45',
+        details: '密码错误 3 次',
+        type: 'error',
+    },
+    {
+        id: '4',
+        action: '存储空间不足',
+        user: '系统',
+        timestamp: '2026-06-03 08:00',
+        details: '已使用 90% 存储',
+        type: 'warning',
+    },
+    {
+        id: '5',
+        action: '文件上传',
+        user: '赵六',
+        timestamp: '2026-06-02 17:30',
+        details: '上传 report.pdf',
+        type: 'info',
+    },
+]
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <ActivityLogPage :activities="entries" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/AlertDemo.vue b/apps/docs/.vitepress/theme/components/demos/AlertDemo.vue
new file mode 100644
index 0000000..e6180d8
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/AlertDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Alert, AlertTitle, AlertDescription } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 w-full max-w-lg">
+        <Alert variant="default">
+            <AlertTitle>Default</AlertTitle>
+            <AlertDescription>This is a default alert with some information.</AlertDescription>
+        </Alert>
+        <Alert variant="primary">
+            <AlertTitle>Primary</AlertTitle>
+            <AlertDescription>This is a primary alert for important messages.</AlertDescription>
+        </Alert>
+        <Alert variant="danger">
+            <AlertTitle>Destructive</AlertTitle>
+            <AlertDescription>This is a destructive alert for critical warnings.</AlertDescription>
+        </Alert>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/AlertDialogDemo.vue b/apps/docs/.vitepress/theme/components/demos/AlertDialogDemo.vue
new file mode 100644
index 0000000..5df6a44
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/AlertDialogDemo.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+    AlertDialog,
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogAction,
+    AlertDialogCancel,
+    Button,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <AlertDialog>
+        <AlertDialogTrigger as-child>
+            <Button variant="primary">Show Alert Dialog</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                    This action cannot be undone. This will permanently delete your
+                    account and remove your data from our servers.
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="danger">Delete</AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/AuthCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/AuthCardDemo.vue
new file mode 100644
index 0000000..6f19d05
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/AuthCardDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { AuthCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <AuthCard />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/AvatarDemo.vue b/apps/docs/.vitepress/theme/components/demos/AvatarDemo.vue
new file mode 100644
index 0000000..fae0c5c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/AvatarDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex items-center gap-4">
+        <Avatar size="sm">
+            <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+        <Avatar size="default">
+            <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+            <AvatarFallback>XY</AvatarFallback>
+        </Avatar>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/BadgeDemo.vue b/apps/docs/.vitepress/theme/components/demos/BadgeDemo.vue
new file mode 100644
index 0000000..5b43f97
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/BadgeDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Badge } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-wrap items-center gap-2">
+        <Badge>Default</Badge>
+        <Badge variant="primary">Primary</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="accent">Accent</Badge>
+        <Badge variant="danger">Destructive</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="outline">Outline</Badge>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/BeforeAfterDemo.vue b/apps/docs/.vitepress/theme/components/demos/BeforeAfterDemo.vue
new file mode 100644
index 0000000..3080e90
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/BeforeAfterDemo.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { BeforeAfter } from 'brutx-ui-vue'
+
+const beforeImg = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450"><rect width="800" height="450" fill="%23FF6B6B"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="64" font-family="sans-serif" font-weight="bold" fill="%23000000">BEFORE (珊瑚红)</text></svg>`
+const afterImg = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450"><rect width="800" height="450" fill="%234ECDC4"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="64" font-family="sans-serif" font-weight="bold" fill="%23000000">AFTER (薄荷青)</text></svg>`
+</script>
+
+<template>
+    <div class="w-full max-w-[500px]">
+        <BeforeAfter
+            :before="beforeImg"
+            :after="afterImg"
+            :default-value="40"
+        />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/BlogCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/BlogCardDemo.vue
new file mode 100644
index 0000000..eeefbcd
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/BlogCardDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { BlogCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <BlogCard />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/BlogListPageDemo.vue b/apps/docs/.vitepress/theme/components/demos/BlogListPageDemo.vue
new file mode 100644
index 0000000..eab502f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/BlogListPageDemo.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { BlogListPage } from 'brutx-ui-vue'
+import type { BlogPost } from 'brutx-ui-vue'
+
+const posts: BlogPost[] = [
+    {
+        title: 'BrutxUI v2.0 发布',
+        excerpt: '全新版本带来更强大的组件和更好的开发体验，包括暗色模式支持和全新的主题系统。',
+        author: '张三',
+        date: '2026-05-28',
+        category: '发布',
+        slug: 'brutxui-v2-release',
+    },
+    {
+        title: 'Neo-Brutalism 设计指南',
+        excerpt: '探索新粗野主义设计的核心原则，以及如何在 Web 项目中运用这一风格。',
+        author: '李四',
+        date: '2026-05-20',
+        category: '设计',
+        slug: 'neo-brutalism-guide',
+    },
+    {
+        title: 'Vue 3 组合式 API 最佳实践',
+        excerpt: '深入理解 Composition API 的使用模式，编写更可维护的组件代码。',
+        author: '王五',
+        date: '2026-05-15',
+        category: '教程',
+        slug: 'vue3-composition-best-practices',
+    },
+    {
+        title: 'Tailwind CSS 性能优化',
+        excerpt: '减少最终 CSS 体积的实用技巧，从配置到构建的全方位优化方案。',
+        author: '赵六',
+        date: '2026-05-10',
+        category: '教程',
+        slug: 'tailwind-performance',
+    },
+]
+
+const categories = ['发布', '设计', '教程']
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <BlogListPage :posts="posts" :categories="categories" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/BreadcrumbDemo.vue b/apps/docs/.vitepress/theme/components/demos/BreadcrumbDemo.vue
new file mode 100644
index 0000000..3d93b2d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/BreadcrumbDemo.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <Breadcrumb>
+        <BreadcrumbList>
+            <BreadcrumbItem>
+                <BreadcrumbLink href="#">首页</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <BreadcrumbLink href="#">组件</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <BreadcrumbEllipsis />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <BreadcrumbLink href="#">导航</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <BreadcrumbPage>面包屑</BreadcrumbPage>
+            </BreadcrumbItem>
+        </BreadcrumbList>
+    </Breadcrumb>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/BrutalistHeroDemo.vue b/apps/docs/.vitepress/theme/components/demos/BrutalistHeroDemo.vue
new file mode 100644
index 0000000..fdd7814
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/BrutalistHeroDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { BrutalistHero } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <BrutalistHero />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ButtonDemo.vue b/apps/docs/.vitepress/theme/components/demos/ButtonDemo.vue
new file mode 100644
index 0000000..2d9f31b
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ButtonDemo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Button } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-wrap items-center gap-3">
+        <Button>Default</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="accent">Accent</Button>
+        <Button variant="danger">Destructive</Button>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CalendarDemo.vue b/apps/docs/.vitepress/theme/components/demos/CalendarDemo.vue
new file mode 100644
index 0000000..1f44160
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CalendarDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Calendar } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex justify-center">
+        <Calendar />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/Card3DDemo.vue b/apps/docs/.vitepress/theme/components/demos/Card3DDemo.vue
new file mode 100644
index 0000000..7ccecc0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/Card3DDemo.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Card3D } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-8 items-center">
+        <Card3D class="w-full max-w-sm">
+            <div class="p-6">
+                <h3 class="text-lg font-black mb-2">3D 悬浮卡片</h3>
+                <p class="text-sm">将鼠标移入卡片，体验 3D 物理偏转与反向阴影投影效果。</p>
+            </div>
+        </Card3D>
+
+        <Card3D shadow="lg" class="w-full max-w-sm">
+            <div class="p-6">
+                <h3 class="text-lg font-black mb-2">大阴影变体</h3>
+                <p class="text-sm">shadow="lg" 提供更大的偏移阴影。</p>
+            </div>
+        </Card3D>
+
+        <Card3D shadow="xl" class="w-full max-w-sm">
+            <div class="p-6">
+                <h3 class="text-lg font-black mb-2">超大阴影变体</h3>
+                <p class="text-sm">shadow="xl" 提供最大的偏移阴影。</p>
+            </div>
+        </Card3D>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CardDemo.vue b/apps/docs/.vitepress/theme/components/demos/CardDemo.vue
new file mode 100644
index 0000000..8ef4b2b
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CardDemo.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardDescription,
+    CardContent,
+    CardFooter,
+    Button,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <Card class="w-full max-w-sm">
+        <CardHeader>
+            <CardTitle>Card Title</CardTitle>
+            <CardDescription>Card description goes here with some details.</CardDescription>
+        </CardHeader>
+        <CardContent>
+            <p class="text-sm font-medium">
+                This is the card content area. You can place any content here such as
+                text, images, or other components.
+            </p>
+        </CardContent>
+        <CardFooter>
+            <Button variant="primary">Action</Button>
+        </CardFooter>
+    </Card>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CarouselDemo.vue b/apps/docs/.vitepress/theme/components/demos/CarouselDemo.vue
new file mode 100644
index 0000000..447052a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CarouselDemo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Carousel, CarouselItem } from 'brutx-ui-vue'
+
+const slides = [
+    { bg: 'bg-brutal-primary', label: '🔥 新粗野主义', desc: '大胆边框 + 硬朗阴影' },
+    { bg: 'bg-brutal-secondary', label: '💡 简洁至上', desc: '去掉多余的装饰' },
+    { bg: 'bg-brutal-accent', label: '⚡ 高对比度', desc: '清晰的视觉层次感' },
+]
+</script>
+
+<template>
+    <div class="w-full max-w-xl mx-auto">
+        <Carousel :loop="true" :autoplay="true" :autoplay-delay="2500" size="md">
+            <CarouselItem v-for="slide in slides" :key="slide.label">
+                <div :class="['w-full h-full flex flex-col items-center justify-center gap-2 border-3 border-brutal', slide.bg]">
+                    <p class="text-2xl font-black tracking-tight">{{ slide.label }}</p>
+                    <p class="text-sm font-bold opacity-70">{{ slide.desc }}</p>
+                </div>
+            </CarouselItem>
+        </Carousel>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ChartSectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/ChartSectionDemo.vue
new file mode 100644
index 0000000..ae9d6b7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ChartSectionDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ChartSection } from 'brutx-ui-vue'
+import type { ChartDataPoint } from 'brutx-ui-vue'
+
+const data: ChartDataPoint[] = [
+    { label: '一月', value: 65 },
+    { label: '二月', value: 42 },
+    { label: '三月', value: 88 },
+    { label: '四月', value: 73 },
+    { label: '五月', value: 56 },
+    { label: '六月', value: 95 },
+]
+</script>
+
+<template>
+    <ChartSection :data="data" chart-type="bar" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ChatBubbleDemo.vue b/apps/docs/.vitepress/theme/components/demos/ChatBubbleDemo.vue
new file mode 100644
index 0000000..1e67107
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ChatBubbleDemo.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ChatBubble } from 'brutx-ui-vue'
+
+const messages = [
+    {
+        id: '1',
+        variant: 'system' as const,
+        content: '对话开始于 2025-06-01',
+    },
+    {
+        id: '2',
+        variant: 'received' as const,
+        name: 'Alex',
+        content: '嘿！这个新粗野主义 UI 库看起来太赞了！',
+        timestamp: '14:01',
+    },
+    {
+        id: '3',
+        variant: 'sent' as const,
+        name: '我',
+        content: '对吧！粗边框 + 硬朗阴影，直接把普通组件卷死。',
+        timestamp: '14:02',
+    },
+    {
+        id: '4',
+        variant: 'received' as const,
+        name: 'Alex',
+        content: 'Kanban + TreeView 这两个复合组件是重头戏 🔥',
+        timestamp: '14:03',
+    },
+    {
+        id: '5',
+        variant: 'sent' as const,
+        name: '我',
+        content: '还有 Carousel！Embla 驱动的，性能拉满 💪',
+        timestamp: '14:03',
+    },
+]
+</script>
+
+<template>
+    <div class="flex flex-col gap-3 max-w-md mx-auto border-3 border-brutal shadow-brutal rounded-brutal p-4 bg-brutal-bg">
+        <ChatBubble
+            v-for="msg in messages"
+            :key="msg.id"
+            :message="msg"
+        />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CheckboxDemo.vue b/apps/docs/.vitepress/theme/components/demos/CheckboxDemo.vue
new file mode 100644
index 0000000..676fb8f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CheckboxDemo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Checkbox } from 'brutx-ui-vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+    <div class="flex items-center gap-3">
+        <Checkbox v-model:checked="checked" />
+        <span class="text-sm font-bold">Accept terms and conditions</span>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CodeBlockDemo.vue b/apps/docs/.vitepress/theme/components/demos/CodeBlockDemo.vue
new file mode 100644
index 0000000..e739188
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CodeBlockDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { CodeBlock } from 'brutx-ui-vue'
+
+const jsCode = `const greeting = "Hello Brutalist Design!";
+console.log(greeting);
+
+function sum(a, b) {
+    return a + b;
+}`
+</script>
+
+<template>
+    <div class="w-full max-w-[500px]">
+        <CodeBlock
+            :code="jsCode"
+            language="javascript"
+            filename="app.js"
+            show-line-numbers
+        />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ComboboxDemo.vue b/apps/docs/.vitepress/theme/components/demos/ComboboxDemo.vue
new file mode 100644
index 0000000..e71144f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ComboboxDemo.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Combobox } from 'brutx-ui-vue'
+
+const selected = ref<string | undefined>(undefined)
+
+const options = [
+    { value: 'vue', label: 'Vue' },
+    { value: 'react', label: 'React' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'svelte', label: 'Svelte' },
+]
+</script>
+
+<template>
+    <div class="w-full max-w-sm">
+        <Combobox
+            v-model="selected"
+            :options="options"
+            placeholder="Select a framework..."
+            search-placeholder="Search frameworks..."
+        />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CommandDemo.vue b/apps/docs/.vitepress/theme/components/demos/CommandDemo.vue
new file mode 100644
index 0000000..2da89a3
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CommandDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {
+    Command,
+    CommandInput,
+    CommandList,
+    CommandGroup,
+    CommandItem,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <Command class="w-full max-w-md border-3 border-brutal shadow-brutal">
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+            <CommandGroup heading="Suggestions">
+                <CommandItem value="component-library">Component Library</CommandItem>
+                <CommandItem value="installation">Installation</CommandItem>
+            </CommandGroup>
+        </CommandList>
+    </Command>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CookieConsentDemo.vue b/apps/docs/.vitepress/theme/components/demos/CookieConsentDemo.vue
new file mode 100644
index 0000000..2f35936
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CookieConsentDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CookieConsent } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto relative">
+        <CookieConsent />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CopyToClipboardDemo.vue b/apps/docs/.vitepress/theme/components/demos/CopyToClipboardDemo.vue
new file mode 100644
index 0000000..28f3e37
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CopyToClipboardDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { CopyToClipboard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 items-start">
+        <CopyToClipboard text="pnpm add brutx-ui-vue" />
+        <CopyToClipboard text="Hello Neo-Brutalism!" class="bg-brutal-accent text-brutal-fg" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/CounterDemo.vue b/apps/docs/.vitepress/theme/components/demos/CounterDemo.vue
new file mode 100644
index 0000000..d57eae3
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/CounterDemo.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Counter } from 'brutx-ui-vue'
+
+const stats = [
+    { to: 12800, suffix: '+', label: '组件安装次数', size: 'lg' as const },
+    { to: 99.9, suffix: '%', decimals: 1, label: '可用性', size: 'lg' as const },
+    { to: 56, label: '内置组件数', size: 'lg' as const },
+]
+
+const key = ref(0)
+function restart() { key.value++ }
+</script>
+
+<template>
+    <div class="flex flex-col gap-6">
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div
+                v-for="stat in stats"
+                :key="stat.label"
+                class="flex flex-col items-center gap-2 border-3 border-brutal shadow-brutal rounded-brutal p-4 bg-brutal-bg"
+            >
+                <Counter
+                    :key="key"
+                    :to="stat.to"
+                    :suffix="stat.suffix ?? ''"
+                    :decimals="stat.decimals ?? 0"
+                    :size="stat.size"
+                    :duration="2000"
+                    easing="ease-out"
+                />
+                <p class="text-xs font-bold opacity-60 text-center">{{ stat.label }}</p>
+            </div>
+        </div>
+        <div class="flex justify-center">
+            <button
+                class="text-xs font-bold border-3 border-brutal px-3 py-1.5 rounded-brutal shadow-brutal bg-brutal-muted transition-all hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[2px] active:shadow-none"
+                @click="restart"
+            >
+                🔄 重新播放动画
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/DashboardShellDemo.vue b/apps/docs/.vitepress/theme/components/demos/DashboardShellDemo.vue
new file mode 100644
index 0000000..bcc8212
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/DashboardShellDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { DashboardShell } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <DashboardShell />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/DashboardStatsDemo.vue b/apps/docs/.vitepress/theme/components/demos/DashboardStatsDemo.vue
new file mode 100644
index 0000000..3f6caa1
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/DashboardStatsDemo.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DashboardStats } from 'brutx-ui-vue'
+import { DollarSign } from 'lucide-vue-next'
+import type { StatItem } from 'brutx-ui-vue'
+
+const stats: StatItem[] = [
+    {
+        title: 'Revenue',
+        value: '$45,231',
+        description: 'from last month',
+        change: '+20.1%',
+        trend: 'up',
+        icon: DollarSign,
+        accentColor: 'success',
+    },
+]
+</script>
+
+<template>
+    <DashboardStats :stats="stats" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/DataTableSectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/DataTableSectionDemo.vue
new file mode 100644
index 0000000..b94a7d4
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/DataTableSectionDemo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { DataTableSection } from 'brutx-ui-vue'
+import type { ColumnDef } from 'brutx-ui-vue'
+
+const columns: ColumnDef[] = [
+    { key: 'name', label: '姓名', sortable: true },
+    { key: 'email', label: '邮箱', sortable: true },
+    { key: 'role', label: '角色', sortable: true },
+    { key: 'status', label: '状态' },
+]
+
+const data: Record<string, unknown>[] = [
+    { name: '张三', email: 'zhangsan@example.com', role: '管理员', status: '活跃' },
+    { name: '李四', email: 'lisi@example.com', role: '编辑', status: '活跃' },
+    { name: '王五', email: 'wangwu@example.com', role: '访客', status: '未激活' },
+    { name: '赵六', email: 'zhaoliu@example.com', role: '编辑', status: '活跃' },
+    { name: '孙七', email: 'sunqi@example.com', role: '管理员', status: '已禁用' },
+]
+</script>
+
+<template>
+    <DataTableSection :columns="columns" :rows="data" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/DialogDemo.vue b/apps/docs/.vitepress/theme/components/demos/DialogDemo.vue
new file mode 100644
index 0000000..f4f93e7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/DialogDemo.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+    Dialog,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+    DialogClose,
+    Button,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <Dialog>
+        <DialogTrigger as-child>
+            <Button variant="primary">Open</Button>
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Edit Profile</DialogTitle>
+                <DialogDescription>
+                    Make changes to your profile here. Click save when you are done.
+                </DialogDescription>
+            </DialogHeader>
+            <p class="text-sm font-medium">
+                This is the dialog content area. You can add form fields or other
+                interactive elements here.
+            </p>
+            <DialogFooter>
+                <DialogClose as-child>
+                    <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button variant="primary">Save</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/DropdownMenuDemo.vue b/apps/docs/.vitepress/theme/components/demos/DropdownMenuDemo.vue
new file mode 100644
index 0000000..a723bfc
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/DropdownMenuDemo.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuLabel,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    Button,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <Button variant="outline">
+                Open Menu
+            </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+            <DropdownMenuGroup>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem class="text-brutal-destructive">
+                    Delete
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/EmptyStateDemo.vue b/apps/docs/.vitepress/theme/components/demos/EmptyStateDemo.vue
new file mode 100644
index 0000000..eb0f726
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/EmptyStateDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { EmptyState } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <EmptyState />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ErrorCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/ErrorCardDemo.vue
new file mode 100644
index 0000000..f6c1231
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ErrorCardDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ErrorCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <ErrorCard />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/FaqSectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/FaqSectionDemo.vue
new file mode 100644
index 0000000..d387c18
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/FaqSectionDemo.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { FaqSection } from 'brutx-ui-vue'
+import type { FaqItem } from 'brutx-ui-vue'
+
+const items: FaqItem[] = [
+    {
+        question: 'BrutxUI 支持哪些框架？',
+        answer: 'BrutxUI 目前专注于 Vue 3 生态，使用 Composition API 和 <script setup> 语法，配合 Tailwind CSS 实现样式。',
+    },
+    {
+        question: '如何自定义主题？',
+        answer: '通过覆盖 CSS 变量即可自定义主题，包括边框宽度、阴影偏移、颜色等设计令牌。内置了 classic、pastel、mono 三种预设主题。',
+    },
+    {
+        question: '是否支持暗色模式？',
+        answer: '是的，所有组件都内置了暗色模式支持，通过 .dark 类或 CSS 变量即可切换。',
+    },
+    {
+        question: '组件是否支持无障碍访问？',
+        answer: '所有交互组件基于 reka-ui 无头原语构建，内置 ARIA 属性和键盘导航支持。',
+    },
+]
+</script>
+
+<template>
+    <FaqSection :items="items" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/FeedbackFormDemo.vue b/apps/docs/.vitepress/theme/components/demos/FeedbackFormDemo.vue
new file mode 100644
index 0000000..eaad2a2
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/FeedbackFormDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { FeedbackForm } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <FeedbackForm />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/FileCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/FileCardDemo.vue
new file mode 100644
index 0000000..6f59db1
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/FileCardDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { FileCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <FileCard />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/FooterSectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/FooterSectionDemo.vue
new file mode 100644
index 0000000..a4ed3bb
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/FooterSectionDemo.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { FooterSection } from 'brutx-ui-vue'
+import type { FooterLinkGroup } from 'brutx-ui-vue'
+
+const linkGroups: FooterLinkGroup[] = [
+    {
+        title: '产品',
+        links: [
+            { label: '组件库', href: '/components' },
+            { label: 'CLI 工具', href: '/cli' },
+            { label: '模板', href: '/templates' },
+        ],
+    },
+    {
+        title: '资源',
+        links: [
+            { label: '文档', href: '/docs' },
+            { label: '教程', href: '/tutorials' },
+            { label: '博客', href: '/blog' },
+        ],
+    },
+    {
+        title: '公司',
+        links: [
+            { label: '关于我们', href: '/about' },
+            { label: '招聘', href: '/careers' },
+            { label: '联系方式', href: '/contact' },
+        ],
+    },
+    {
+        title: '法律',
+        links: [
+            { label: '隐私政策', href: '/privacy' },
+            { label: '服务条款', href: '/terms' },
+        ],
+    },
+]
+</script>
+
+<template>
+    <FooterSection
+        logo-text="BrutxUI"
+        description="面向 Vue 3 的 Neo-Brutalist UI 组件库"
+        :link-groups="linkGroups"
+        copyright="© 2026 BrutxUI. All rights reserved."
+    />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/FormDemo.vue b/apps/docs/.vitepress/theme/components/demos/FormDemo.vue
new file mode 100644
index 0000000..a6c77d0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/FormDemo.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+    Form,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormControl,
+    FormMessage,
+    Input,
+    Button,
+} from 'brutx-ui-vue'
+
+const email = ref('')
+const password = ref('')
+
+function onSubmit() {
+    // eslint-disable-next-line no-alert
+    alert(`Email: ${email.value}, Password: ${password.value}`)
+}
+</script>
+
+<template>
+    <div class="w-full max-w-sm">
+        <Form class="space-y-4" @submit="onSubmit">
+            <FormField name="email">
+                <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                        <Input
+                            v-model="email"
+                            type="email"
+                            placeholder="you@example.com"
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+            <FormField name="password">
+                <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                        <Input
+                            v-model="password"
+                            type="password"
+                            placeholder="Enter your password"
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+            <Button type="submit" class="w-full">
+                Sign In
+            </Button>
+        </Form>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/GallerySectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/GallerySectionDemo.vue
new file mode 100644
index 0000000..e87002b
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/GallerySectionDemo.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { GallerySection } from 'brutx-ui-vue'
+import type { GalleryItem } from 'brutx-ui-vue'
+
+const items: GalleryItem[] = [
+    {
+        src: 'https://picsum.photos/seed/brutx1/600/400',
+        alt: '项目截图一',
+        caption: '首页布局展示',
+    },
+    {
+        src: 'https://picsum.photos/seed/brutx2/600/400',
+        alt: '项目截图二',
+        caption: '组件库概览',
+    },
+    {
+        src: 'https://picsum.photos/seed/brutx3/600/400',
+        alt: '项目截图三',
+        caption: '暗色模式效果',
+    },
+]
+</script>
+
+<template>
+    <GallerySection :items="items" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/GlitchTextDemo.vue b/apps/docs/.vitepress/theme/components/demos/GlitchTextDemo.vue
new file mode 100644
index 0000000..66fd6c5
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/GlitchTextDemo.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { GlitchText } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-8">
+        <div>
+            <p class="text-sm font-bold mb-2">Hover 触发（默认）</p>
+            <GlitchText text="BRUTAL GLITCH" class="text-4xl" />
+        </div>
+
+        <div>
+            <p class="text-sm font-bold mb-2">Click 触发</p>
+            <GlitchText text="CLICK ME" trigger="click" speed="fast" class="text-3xl" />
+        </div>
+
+        <div>
+            <p class="text-sm font-bold mb-2">Autoplay 自动播放</p>
+            <GlitchText text="AUTO GLITCH" trigger="autoplay" speed="slow" class="text-3xl" />
+        </div>
+
+        <div>
+            <p class="text-sm font-bold mb-2">Speed 变体</p>
+            <div class="flex gap-4 items-end">
+                <GlitchText text="SLOW" trigger="click" speed="slow" class="text-2xl" />
+                <GlitchText text="MEDIUM" trigger="click" speed="medium" class="text-2xl" />
+                <GlitchText text="FAST" trigger="click" speed="fast" class="text-2xl" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/HardcoreInputDemo.vue b/apps/docs/.vitepress/theme/components/demos/HardcoreInputDemo.vue
new file mode 100644
index 0000000..8ee2c0d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/HardcoreInputDemo.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { HardcoreInput } from 'brutx-ui-vue'
+
+const value1 = ref('')
+const value2 = ref('')
+
+const minLength = (val: string) => val.length >= 5 || '至少需要 5 个字符'
+const hasNumber = (val: string) => /\d/.test(val) || '必须包含数字'
+</script>
+
+<template>
+    <div class="flex flex-col gap-8 max-w-md">
+        <div>
+            <p class="text-sm font-bold mb-2">基础用法（Blur 校验）</p>
+            <HardcoreInput
+                v-model="value1"
+                placeholder="输入至少 5 个字符..."
+                :rules="[minLength]"
+                validate-on="blur"
+            />
+        </div>
+
+        <div>
+            <p class="text-sm font-bold mb-2">多规则校验（Input 实时校验）</p>
+            <HardcoreInput
+                v-model="value2"
+                placeholder="至少 5 字符且含数字..."
+                :rules="[minLength, hasNumber]"
+                validate-on="input"
+            />
+        </div>
+
+        <div>
+            <p class="text-sm font-bold mb-2">禁用音效</p>
+            <HardcoreInput
+                placeholder="静默输入..."
+                :sound="false"
+                :rules="[minLength]"
+            />
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/HeaderSectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/HeaderSectionDemo.vue
new file mode 100644
index 0000000..d4067a3
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/HeaderSectionDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { HeaderSection } from 'brutx-ui-vue'
+import type { NavItem } from 'brutx-ui-vue'
+
+const navItems: NavItem[] = [
+    { label: '首页', href: '/' },
+    { label: '产品', href: '/products' },
+    { label: '关于', href: '/about' },
+    { label: '联系', href: '/contact' },
+]
+</script>
+
+<template>
+    <HeaderSection logo-text="BrutxUI" :nav-items="navItems" cta-text="开始使用" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/InputDemo.vue b/apps/docs/.vitepress/theme/components/demos/InputDemo.vue
new file mode 100644
index 0000000..98986ec
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/InputDemo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input } from 'brutx-ui-vue'
+
+const value = ref('')
+const errorValue = ref('')
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 w-full max-w-sm">
+        <Input v-model="value" placeholder="Default input" />
+        <Input v-model="errorValue" variant="error" placeholder="Error input" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/KanbanBoardDemo.vue b/apps/docs/.vitepress/theme/components/demos/KanbanBoardDemo.vue
new file mode 100644
index 0000000..81bfd8c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/KanbanBoardDemo.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { KanbanBoard } from 'brutx-ui-vue'
+import type { KanbanColumn } from 'brutx-ui-vue'
+
+const columns = ref<KanbanColumn[]>([
+    {
+        id: 'todo',
+        title: '待办',
+        color: 'var(--brutal-muted)',
+        cards: [
+            { id: 'c1', title: '设计首页 Banner', description: '确定配色与排版方案', tags: ['设计'] },
+            { id: 'c2', title: '编写组件文档', tags: ['文档'] },
+        ],
+    },
+    {
+        id: 'doing',
+        title: '进行中',
+        color: 'var(--brutal-accent)',
+        cards: [
+            { id: 'c3', title: '开发 Kanban 组件', description: '支持拖拽排序', tags: ['开发', 'P0'] },
+        ],
+    },
+    {
+        id: 'done',
+        title: '已完成',
+        color: 'var(--brutal-success)',
+        cards: [
+            { id: 'c4', title: 'Accordion 组件', tags: ['完成'] },
+            { id: 'c5', title: 'Timeline 组件', tags: ['完成'] },
+        ],
+    },
+])
+</script>
+
+<template>
+    <div class="overflow-x-auto">
+        <KanbanBoard v-model="columns" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/KbdDemo.vue b/apps/docs/.vitepress/theme/components/demos/KbdDemo.vue
new file mode 100644
index 0000000..100460b
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/KbdDemo.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Kbd } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-6">
+        <!-- 快捷键组合示例 -->
+        <div class="flex flex-col gap-3">
+            <p class="text-sm font-bold opacity-60">常用快捷键</p>
+            <div class="flex flex-wrap gap-4 items-center">
+                <div class="flex items-center gap-1">
+                    <Kbd>⌘</Kbd>
+                    <span class="font-bold text-sm mx-1">+</span>
+                    <Kbd>K</Kbd>
+                    <span class="text-xs font-medium opacity-60 ml-2">打开命令面板</span>
+                </div>
+                <div class="flex items-center gap-1">
+                    <Kbd>Ctrl</Kbd>
+                    <span class="font-bold text-sm mx-1">+</span>
+                    <Kbd>S</Kbd>
+                    <span class="text-xs font-medium opacity-60 ml-2">保存</span>
+                </div>
+                <div class="flex items-center gap-1">
+                    <Kbd>Shift</Kbd>
+                    <span class="font-bold text-sm mx-1">+</span>
+                    <Kbd>Tab</Kbd>
+                    <span class="text-xs font-medium opacity-60 ml-2">反向缩进</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 尺寸对比 -->
+        <div class="flex flex-col gap-3">
+            <p class="text-sm font-bold opacity-60">尺寸</p>
+            <div class="flex items-end gap-3">
+                <Kbd size="sm">Esc</Kbd>
+                <Kbd size="md">Enter</Kbd>
+                <Kbd size="lg">Space</Kbd>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/LabelDemo.vue b/apps/docs/.vitepress/theme/components/demos/LabelDemo.vue
new file mode 100644
index 0000000..3f5d461
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/LabelDemo.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Label } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-4">
+        <Label>Default Label</Label>
+        <Label variant="error">Error Label</Label>
+        <Label variant="success">Success Label</Label>
+        <Label variant="muted">Muted Label</Label>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/LoadingPageDemo.vue b/apps/docs/.vitepress/theme/components/demos/LoadingPageDemo.vue
new file mode 100644
index 0000000..11a5158
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/LoadingPageDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { LoadingPage } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <LoadingPage />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/MarqueeDemo.vue b/apps/docs/.vitepress/theme/components/demos/MarqueeDemo.vue
new file mode 100644
index 0000000..27dd365
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/MarqueeDemo.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Marquee } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 w-full">
+        <Marquee :speed="15" fade>
+            <span>⚡️ FAST AND FLUID</span>
+            <span>💥 NEO-BRUTALISM</span>
+            <span>🚀 VUE 3 + TAILWIND</span>
+            <span>🔥 SHADCN INSPIRED</span>
+        </Marquee>
+        <Marquee :speed="25" direction="right" class="bg-brutal-primary text-brutal-fg">
+            <span>💻 CODES AND BUGS</span>
+            <span>🛠️ BUILD TO SHIPPED</span>
+            <span>🌟 OPEN SOURCE</span>
+        </Marquee>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/NotFoundPageDemo.vue b/apps/docs/.vitepress/theme/components/demos/NotFoundPageDemo.vue
new file mode 100644
index 0000000..0aca03d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/NotFoundPageDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { NotFoundPage } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <NotFoundPage />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/NumberInputDemo.vue b/apps/docs/.vitepress/theme/components/demos/NumberInputDemo.vue
new file mode 100644
index 0000000..6235a31
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/NumberInputDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NumberInput } from 'brutx-ui-vue'
+
+const val1 = ref(10)
+const val2 = ref(20)
+</script>
+
+<template>
+    <div class="flex flex-col gap-6 w-full max-w-[300px]">
+        <div>
+            <label class="block text-sm font-black mb-2">双侧分立式 (Split Layout)</label>
+            <NumberInput v-model="val1" :min="0" :max="100" layout="split" />
+        </div>
+        <div>
+            <label class="block text-sm font-black mb-2">右侧堆叠式 (Stacked Layout)</label>
+            <NumberInput v-model="val2" :min="0" :max="100" layout="stacked" />
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/OverviewPageDemo.vue b/apps/docs/.vitepress/theme/components/demos/OverviewPageDemo.vue
new file mode 100644
index 0000000..23de7ce
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/OverviewPageDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { OverviewPage } from 'brutx-ui-vue'
+import type { OverviewStat } from 'brutx-ui-vue'
+
+const stats: OverviewStat[] = [
+    { title: '总收入', value: '¥128,430', change: '+12.5%', trend: 'up' },
+    { title: '活跃用户', value: '2,840', change: '+8.2%', trend: 'up' },
+    { title: '转化率', value: '3.6%', change: '-0.4%', trend: 'down' },
+    { title: '跳出率', value: '24.1%', change: '+0.1%', trend: 'neutral' },
+]
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <OverviewPage :stats="stats" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/PaginationDemo.vue b/apps/docs/.vitepress/theme/components/demos/PaginationDemo.vue
new file mode 100644
index 0000000..167852e
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/PaginationDemo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Pagination } from 'brutx-ui-vue'
+
+const currentPage = ref(1)
+</script>
+
+<template>
+    <Pagination
+        v-model:current-page="currentPage"
+        :total-pages="3"
+    />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/PopoverDemo.vue b/apps/docs/.vitepress/theme/components/demos/PopoverDemo.vue
new file mode 100644
index 0000000..714b970
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/PopoverDemo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    Button,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <Popover>
+        <PopoverTrigger as-child>
+            <Button variant="outline">
+                Open
+            </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+            <p class="text-sm font-medium">
+                Popover content goes here.
+            </p>
+        </PopoverContent>
+    </Popover>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/PricingSectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/PricingSectionDemo.vue
new file mode 100644
index 0000000..429edba
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/PricingSectionDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { PricingSection } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <PricingSection />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ProfilePageDemo.vue b/apps/docs/.vitepress/theme/components/demos/ProfilePageDemo.vue
new file mode 100644
index 0000000..a89f966
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ProfilePageDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ProfilePage } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <ProfilePage />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ProgressDemo.vue b/apps/docs/.vitepress/theme/components/demos/ProgressDemo.vue
new file mode 100644
index 0000000..9585780
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ProgressDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Progress } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-4 w-full max-w-sm">
+        <Progress :model-value="70" />
+        <Progress :model-value="30" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/QuickActionsDemo.vue b/apps/docs/.vitepress/theme/components/demos/QuickActionsDemo.vue
new file mode 100644
index 0000000..f74b013
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/QuickActionsDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { QuickActions } from 'brutx-ui-vue'
+import { Plus, Upload, Download, Settings, Bell, Search } from 'lucide-vue-next'
+import type { ActionItem } from 'brutx-ui-vue'
+
+const actions: ActionItem[] = [
+    { label: '新建', icon: Plus, variant: 'primary' },
+    { label: '上传', icon: Upload, variant: 'secondary' },
+    { label: '下载', icon: Download, variant: 'outline' },
+    { label: '设置', icon: Settings, variant: 'outline' },
+    { label: '通知', icon: Bell, variant: 'outline' },
+    { label: '搜索', icon: Search, variant: 'outline' },
+]
+</script>
+
+<template>
+    <QuickActions :actions="actions" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/RadioGroupDemo.vue b/apps/docs/.vitepress/theme/components/demos/RadioGroupDemo.vue
new file mode 100644
index 0000000..7fcab7a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/RadioGroupDemo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { RadioGroup, RadioGroupItem } from 'brutx-ui-vue'
+
+const selected = ref('option-1')
+</script>
+
+<template>
+    <RadioGroup v-model="selected" default-value="option-1">
+        <div class="flex items-center gap-3">
+            <RadioGroupItem value="option-1" />
+            <span class="text-sm font-bold">Option 1</span>
+        </div>
+        <div class="flex items-center gap-3">
+            <RadioGroupItem value="option-2" />
+            <span class="text-sm font-bold">Option 2</span>
+        </div>
+        <div class="flex items-center gap-3">
+            <RadioGroupItem value="option-3" />
+            <span class="text-sm font-bold">Option 3</span>
+        </div>
+    </RadioGroup>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SaaSPricingDemo.vue b/apps/docs/.vitepress/theme/components/demos/SaaSPricingDemo.vue
new file mode 100644
index 0000000..ec018f6
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SaaSPricingDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { SaaSPricing } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <SaaSPricing />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ScratchCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/ScratchCardDemo.vue
new file mode 100644
index 0000000..785c7ff
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ScratchCardDemo.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ScratchCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-8 items-center">
+        <ScratchCard class="w-full max-w-sm h-48">
+            <div class="flex items-center justify-center h-full bg-brutal-accent">
+                <p class="text-2xl font-black">🎉 恭喜中奖！</p>
+            </div>
+        </ScratchCard>
+
+        <ScratchCard class="w-full max-w-sm h-48" :percentage="30" overlay-color="#FFE66D">
+            <div class="flex items-center justify-center h-full bg-brutal-success">
+                <p class="text-2xl font-black">自定义底色</p>
+            </div>
+        </ScratchCard>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ScrollAreaDemo.vue b/apps/docs/.vitepress/theme/components/demos/ScrollAreaDemo.vue
new file mode 100644
index 0000000..980c10d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ScrollAreaDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ScrollArea } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <ScrollArea class="h-72 w-64 rounded-brutal border-3 border-brutal">
+        <div class="p-4">
+            <p
+                v-for="i in 8"
+                :key="i"
+                class="mb-3 text-sm font-bold"
+            >
+                Item {{ i }}
+            </p>
+        </div>
+    </ScrollArea>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SearchWidgetDemo.vue b/apps/docs/.vitepress/theme/components/demos/SearchWidgetDemo.vue
new file mode 100644
index 0000000..ea93aee
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SearchWidgetDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { SearchWidget } from 'brutx-ui-vue'
+import type { SearchSuggestion } from 'brutx-ui-vue'
+
+const suggestions: SearchSuggestion[] = [
+    { label: 'Button 按钮', value: 'button', group: '组件' },
+    { label: 'Badge 徽章', value: 'badge', group: '组件' },
+    { label: 'Card 卡片', value: 'card', group: '组件' },
+    { label: 'Dialog 对话框', value: 'dialog', group: '组件' },
+    { label: '快速开始', value: 'getting-started', group: '文档' },
+    { label: '主题配置', value: 'theming', group: '文档' },
+]
+</script>
+
+<template>
+    <SearchWidget :suggestions="suggestions" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SelectDemo.vue b/apps/docs/.vitepress/theme/components/demos/SelectDemo.vue
new file mode 100644
index 0000000..0bda2bb
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SelectDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full max-w-sm">
+        <Select>
+            <SelectTrigger>
+                <SelectValue placeholder="Select a fruit..." />
+            </SelectTrigger>
+            <SelectContent>
+                <SelectItem value="apple">Apple</SelectItem>
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="cherry">Cherry</SelectItem>
+            </SelectContent>
+        </Select>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SeparatorDemo.vue b/apps/docs/.vitepress/theme/components/demos/SeparatorDemo.vue
new file mode 100644
index 0000000..d4e946d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SeparatorDemo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Separator } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="space-y-4">
+        <p class="text-sm font-bold">Content above</p>
+        <Separator />
+        <p class="text-sm font-bold">Content below</p>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SettingsPageDemo.vue b/apps/docs/.vitepress/theme/components/demos/SettingsPageDemo.vue
new file mode 100644
index 0000000..715db0c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SettingsPageDemo.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { SettingsPage } from 'brutx-ui-vue'
+import type { SettingsTab } from 'brutx-ui-vue'
+
+const tabs: SettingsTab[] = [
+    { label: '通用', value: 'general' },
+    { label: '通知', value: 'notifications' },
+    { label: '安全', value: 'security' },
+]
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <SettingsPage :tabs="tabs" />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SheetDemo.vue b/apps/docs/.vitepress/theme/components/demos/SheetDemo.vue
new file mode 100644
index 0000000..c9816fc
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SheetDemo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+    Sheet, SheetTrigger, SheetContent, SheetHeader,
+    SheetTitle, SheetDescription, SheetFooter, Button,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <Sheet>
+        <SheetTrigger>
+            <Button>Open Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="right">
+            <SheetHeader>
+                <SheetTitle>Sheet Title</SheetTitle>
+                <SheetDescription>
+                    This is a sheet description. You can put any content here.
+                </SheetDescription>
+            </SheetHeader>
+            <div class="py-4">
+                <p class="text-sm font-medium">
+                    This is the main content area of the sheet. You can place forms,
+                    navigation links, or any other content here.
+                </p>
+            </div>
+            <SheetFooter>
+                <Button>Save changes</Button>
+            </SheetFooter>
+        </SheetContent>
+    </Sheet>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SkeletonDemo.vue b/apps/docs/.vitepress/theme/components/demos/SkeletonDemo.vue
new file mode 100644
index 0000000..3a16c2a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SkeletonDemo.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { SkeletonAvatar, SkeletonText } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex items-center gap-4">
+        <SkeletonAvatar />
+        <div class="flex-1">
+            <SkeletonText :lines="2" last-width="40%" />
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SketchyChartDemo.vue b/apps/docs/.vitepress/theme/components/demos/SketchyChartDemo.vue
new file mode 100644
index 0000000..209fce4
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SketchyChartDemo.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { SketchyChart } from 'brutx-ui-vue'
+
+const lineData = [
+    { label: 'Jan', value: 30 },
+    { label: 'Feb', value: 65 },
+    { label: 'Mar', value: 45 },
+    { label: 'Apr', value: 80 },
+    { label: 'May', value: 55 },
+    { label: 'Jun', value: 90 },
+]
+
+const barData = [
+    { label: 'Vue', value: 85 },
+    { label: 'React', value: 72 },
+    { label: 'Svelte', value: 60 },
+    { label: 'Angular', value: 48 },
+]
+</script>
+
+<template>
+    <div class="flex flex-col gap-8">
+        <div>
+            <p class="text-sm font-bold mb-2">折线图</p>
+            <SketchyChart type="line" :data="lineData" />
+        </div>
+
+        <div>
+            <p class="text-sm font-bold mb-2">柱状图</p>
+            <SketchyChart type="bar" :data="barData" />
+        </div>
+
+        <div>
+            <p class="text-sm font-bold mb-2">高抖动幅度 (sketchiness=8)</p>
+            <SketchyChart type="line" :data="lineData" :sketchiness="8" />
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SliderDemo.vue b/apps/docs/.vitepress/theme/components/demos/SliderDemo.vue
new file mode 100644
index 0000000..d49524d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SliderDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Slider } from 'brutx-ui-vue'
+
+const value = ref([60])
+</script>
+
+<template>
+    <div class="w-full max-w-sm space-y-2">
+        <Slider v-model="value" :default-value="[60]" />
+        <p class="text-sm font-bold text-brutal-muted-foreground">
+            Value: {{ value[0] }}
+        </p>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SpinnerDemo.vue b/apps/docs/.vitepress/theme/components/demos/SpinnerDemo.vue
new file mode 100644
index 0000000..a48b6a4
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SpinnerDemo.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Spinner, BlockSpinner, BarsSpinner } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex items-center gap-8">
+        <div class="flex flex-col items-center gap-2">
+            <Spinner />
+            <span class="text-xs font-bold">Spinner</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+            <BlockSpinner />
+            <span class="text-xs font-bold">BlockSpinner</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+            <BarsSpinner />
+            <span class="text-xs font-bold">BarsSpinner</span>
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/StepperDemo.vue b/apps/docs/.vitepress/theme/components/demos/StepperDemo.vue
new file mode 100644
index 0000000..33511b0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/StepperDemo.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Stepper } from 'brutx-ui-vue'
+import type { StepperStep } from 'brutx-ui-vue'
+
+const steps: StepperStep[] = [
+    { id: 1, title: '账户信息', description: '填写基本资料' },
+    { id: 2, title: '安全设置', description: '设置密码与验证' },
+    { id: 3, title: '偏好配置', description: '个性化设置' },
+    { id: 4, title: '完成', description: '注册成功' },
+]
+
+const current = ref(1)
+
+function prev() { if (current.value > 0) current.value-- }
+function next() { if (current.value < steps.length - 1) current.value++ }
+</script>
+
+<template>
+    <div class="flex flex-col gap-6 w-full max-w-2xl mx-auto">
+        <!-- 水平步骤条 -->
+        <div class="border-3 border-brutal shadow-brutal rounded-brutal p-5 bg-brutal-bg">
+            <p class="text-xs font-bold opacity-50 mb-4 uppercase tracking-widest">水平</p>
+            <Stepper v-model="current" :steps="steps" orientation="horizontal" />
+
+            <div class="mt-6 flex justify-between">
+                <button
+                    :disabled="current === 0"
+                    class="text-sm font-black border-3 border-brutal px-4 py-1.5 rounded-brutal shadow-brutal bg-brutal-bg transition-all hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[2px] active:shadow-none disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-brutal"
+                    @click="prev"
+                >
+                    ← 上一步
+                </button>
+                <button
+                    :disabled="current === steps.length - 1"
+                    class="text-sm font-black border-3 border-brutal px-4 py-1.5 rounded-brutal shadow-brutal bg-brutal-primary transition-all hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[2px] active:shadow-none disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-brutal"
+                    @click="next"
+                >
+                    下一步 →
+                </button>
+            </div>
+        </div>
+
+        <!-- 垂直步骤条 -->
+        <div class="border-3 border-brutal shadow-brutal rounded-brutal p-5 bg-brutal-bg">
+            <p class="text-xs font-bold opacity-50 mb-4 uppercase tracking-widest">垂直</p>
+            <Stepper v-model="current" :steps="steps" orientation="vertical" />
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/StepperSectionDemo.vue b/apps/docs/.vitepress/theme/components/demos/StepperSectionDemo.vue
new file mode 100644
index 0000000..edbf8eb
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/StepperSectionDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { StepperSection } from 'brutx-ui-vue'
+import type { StepperStepItem } from 'brutx-ui-vue'
+
+const steps: StepperStepItem[] = [
+    { title: '选择方案', description: '选择适合您的订阅方案' },
+    { title: '填写信息', description: '输入您的账户和支付信息' },
+    { title: '确认订单', description: '核对订单详情并确认' },
+    { title: '完成', description: '订阅已激活，开始使用' },
+]
+</script>
+
+<template>
+    <StepperSection :steps="steps" :current-step="1" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SubmitButtonDemo.vue b/apps/docs/.vitepress/theme/components/demos/SubmitButtonDemo.vue
new file mode 100644
index 0000000..724886f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SubmitButtonDemo.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { SubmitButton } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex items-center gap-4">
+        <SubmitButton>Submit</SubmitButton>
+        <SubmitButton :loading="true">Submit</SubmitButton>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SuccessCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/SuccessCardDemo.vue
new file mode 100644
index 0000000..a84e37c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SuccessCardDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { SuccessCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <SuccessCard />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/SwitchDemo.vue b/apps/docs/.vitepress/theme/components/demos/SwitchDemo.vue
new file mode 100644
index 0000000..f720940
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/SwitchDemo.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Switch } from 'brutx-ui-vue'
+
+const enabled = ref(false)
+</script>
+
+<template>
+    <div class="flex items-center gap-3">
+        <Switch v-model="enabled" />
+        <span class="text-sm font-bold">{{ enabled ? 'Enabled' : 'Disabled' }}</span>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TableDemo.vue b/apps/docs/.vitepress/theme/components/demos/TableDemo.vue
new file mode 100644
index 0000000..1a5c081
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TableDemo.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+    Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
+} from 'brutx-ui-vue'
+
+const rows = [
+    { name: 'Invoice #001', status: 'Paid', amount: '$250.00' },
+    { name: 'Invoice #002', status: 'Pending', amount: '$150.00' },
+]
+</script>
+
+<template>
+    <Table>
+        <TableHeader>
+            <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Amount</TableHead>
+            </TableRow>
+        </TableHeader>
+        <TableBody>
+            <TableRow v-for="row in rows" :key="row.name">
+                <TableCell>{{ row.name }}</TableCell>
+                <TableCell>{{ row.status }}</TableCell>
+                <TableCell>{{ row.amount }}</TableCell>
+            </TableRow>
+        </TableBody>
+    </Table>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TabsDemo.vue b/apps/docs/.vitepress/theme/components/demos/TabsDemo.vue
new file mode 100644
index 0000000..195adf5
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TabsDemo.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Tabs, TabsList, TabsTrigger, TabsContent } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <Tabs default-value="account" class="w-full max-w-sm">
+        <TabsList>
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+            <p class="text-sm font-medium">
+                Make changes to your account here. Click save when you're done.
+            </p>
+        </TabsContent>
+        <TabsContent value="password">
+            <p class="text-sm font-medium">
+                Change your password here. After saving, you'll be logged out.
+            </p>
+        </TabsContent>
+    </Tabs>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TabsNavDemo.vue b/apps/docs/.vitepress/theme/components/demos/TabsNavDemo.vue
new file mode 100644
index 0000000..7b6e015
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TabsNavDemo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TabsNav } from 'brutx-ui-vue'
+import type { TabItem } from 'brutx-ui-vue'
+
+const tabs: TabItem[] = [
+    { label: '概览', value: 'overview' },
+    { label: '分析', value: 'analytics' },
+    { label: '设置', value: 'settings' },
+]
+</script>
+
+<template>
+    <TabsNav :tabs="tabs" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TagsInputDemo.vue b/apps/docs/.vitepress/theme/components/demos/TagsInputDemo.vue
new file mode 100644
index 0000000..8318515
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TagsInputDemo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemText, TagsInputItemDelete } from 'brutx-ui-vue'
+
+const tags = ref(['vue', 'tailwind', 'brutalism'])
+</script>
+
+<template>
+    <div class="w-full max-w-[400px]">
+        <TagsInput v-model="tags">
+            <TagsInputItem v-for="tag in tags" :key="tag" :value="tag" variant="primary">
+                <TagsInputItemText>{{ tag }}</TagsInputItemText>
+                <TagsInputItemDelete />
+            </TagsInputItem>
+            <TagsInputInput placeholder="添加标签..." />
+        </TagsInput>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TestimonialCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/TestimonialCardDemo.vue
new file mode 100644
index 0000000..148a3b0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TestimonialCardDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { TestimonialCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <TestimonialCard />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TextareaDemo.vue b/apps/docs/.vitepress/theme/components/demos/TextareaDemo.vue
new file mode 100644
index 0000000..85682a0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TextareaDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Textarea } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full max-w-sm">
+        <Textarea placeholder="Type your message here..." />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TimelineDemo.vue b/apps/docs/.vitepress/theme/components/demos/TimelineDemo.vue
new file mode 100644
index 0000000..86a6bcc
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TimelineDemo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Timeline, TimelineItem, TimelineSeparator, TimelineDot, TimelineConnector, TimelineContent } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-col gap-8 w-full max-w-[500px]">
+        <div>
+            <h3 class="text-sm font-black mb-4">垂直时间线</h3>
+            <Timeline orientation="vertical">
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineDot variant="primary" shape="circle">1</TimelineDot>
+                        <TimelineConnector />
+                    </TimelineSeparator>
+                    <TimelineContent class="pl-2">
+                        <div class="font-black text-base">BrutxUI 项目立项</div>
+                        <div class="text-xs text-brutal-fg/60 mt-1">2026-06-01</div>
+                        <p class="text-sm text-brutal-fg/80 mt-2 font-normal">
+                            启动新一代 Neo-Brutalist Vue 3 组件库项目，确定基础元数据及重度边框与实心阴影设计规范。
+                        </p>
+                    </TimelineContent>
+                </TimelineItem>
+
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineDot variant="accent" shape="square">2</TimelineDot>
+                        <TimelineConnector />
+                    </TimelineSeparator>
+                    <TimelineContent class="pl-2">
+                        <div class="font-black text-base">发布首个 Alpha 版本</div>
+                        <div class="text-xs text-brutal-fg/60 mt-1">2026-06-15</div>
+                        <p class="text-sm text-brutal-fg/80 mt-2 font-normal">
+                            完成核心 UI 组件的编写与 CLI 初始化安装工具打包，并在 npm 仓库进行发布。
+                        </p>
+                    </TimelineContent>
+                </TimelineItem>
+
+                <TimelineItem>
+                    <TimelineSeparator>
+                        <TimelineDot variant="success" shape="diamond">3</TimelineDot>
+                    </TimelineSeparator>
+                    <TimelineContent class="pl-2">
+                        <div class="font-black text-base">正式版首发 (V1.0.0)</div>
+                        <div class="text-xs text-brutal-fg/60 mt-1">2026-07-01</div>
+                        <p class="text-sm text-brutal-fg/80 mt-2 font-normal">
+                            完善组件文档与预览网站，并支持 AI 代码生成一键集成。
+                        </p>
+                    </TimelineContent>
+                </TimelineItem>
+            </Timeline>
+        </div>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ToastDemo.vue b/apps/docs/.vitepress/theme/components/demos/ToastDemo.vue
new file mode 100644
index 0000000..2be4e90
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ToastDemo.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useToast, ToastContainer, Toast, Button } from 'brutx-ui-vue'
+
+const { toasts, removeToast, success } = useToast()
+
+function showToast() {
+    success('Success!', 'Your action was completed successfully.')
+}
+</script>
+
+<template>
+    <div>
+        <Button @click="showToast">Show Toast</Button>
+
+        <ToastContainer position="bottom-right">
+            <Toast
+                v-for="toast in toasts"
+                :key="toast.id"
+                :variant="toast.variant"
+                :title="toast.title"
+                :description="toast.description"
+                :duration="toast.duration"
+                @close="removeToast(toast.id)"
+            />
+        </ToastContainer>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ToggleDemo.vue b/apps/docs/.vitepress/theme/components/demos/ToggleDemo.vue
new file mode 100644
index 0000000..6bf7bed
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ToggleDemo.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Toggle } from 'brutx-ui-vue'
+import { Bold, Italic } from 'lucide-vue-next'
+
+const boldPressed = ref(false)
+const italicPressed = ref(false)
+</script>
+
+<template>
+    <div class="flex gap-2">
+        <Toggle v-model:pressed="boldPressed" aria-label="Bold">
+            <Bold class="h-4 w-4" />
+        </Toggle>
+        <Toggle v-model:pressed="italicPressed" aria-label="Italic">
+            <Italic class="h-4 w-4" />
+        </Toggle>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/ToggleGroupDemo.vue b/apps/docs/.vitepress/theme/components/demos/ToggleGroupDemo.vue
new file mode 100644
index 0000000..405906e
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/ToggleGroupDemo.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ToggleGroup, ToggleGroupItem } from 'brutx-ui-vue'
+
+const selected = ref<string[]>([])
+</script>
+
+<template>
+    <ToggleGroup v-model="selected" type="multiple">
+        <ToggleGroupItem value="bold">B</ToggleGroupItem>
+        <ToggleGroupItem value="italic">I</ToggleGroupItem>
+        <ToggleGroupItem value="underline">U</ToggleGroupItem>
+    </ToggleGroup>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TooltipDemo.vue b/apps/docs/.vitepress/theme/components/demos/TooltipDemo.vue
new file mode 100644
index 0000000..b4afc9b
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TooltipDemo.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+    TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Button,
+} from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="flex flex-wrap items-center gap-4">
+        <TooltipProvider :delay-duration="0">
+            <Tooltip>
+                <TooltipTrigger>
+                    <Button>无延迟</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>delayDuration = 0</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+
+        <TooltipProvider :delay-duration="700">
+            <Tooltip>
+                <TooltipTrigger>
+                    <Button variant="secondary">默认延迟</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>delayDuration = 700</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+
+        <TooltipProvider :delay-duration="1500">
+            <Tooltip>
+                <TooltipTrigger>
+                    <Button variant="outline">长延迟</Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>delayDuration = 1500</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/TreeViewDemo.vue b/apps/docs/.vitepress/theme/components/demos/TreeViewDemo.vue
new file mode 100644
index 0000000..eed16f5
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/TreeViewDemo.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TreeView } from 'brutx-ui-vue'
+import type { TreeNode } from 'brutx-ui-vue'
+
+const nodes: TreeNode[] = [
+    {
+        id: 'src',
+        label: 'src',
+        children: [
+            {
+                id: 'components',
+                label: 'components',
+                children: [
+                    { id: 'button', label: 'Button.vue' },
+                    { id: 'input', label: 'Input.vue' },
+                ],
+            },
+            {
+                id: 'composables',
+                label: 'composables',
+                children: [
+                    { id: 'useToast', label: 'useToast.ts' },
+                ],
+            },
+            { id: 'index', label: 'index.ts' },
+        ],
+    },
+    {
+        id: 'public',
+        label: 'public',
+        children: [
+            { id: 'favicon', label: 'favicon.ico' },
+        ],
+    },
+    { id: 'pkg', label: 'package.json' },
+]
+
+const selected = ref<string | null>('button')
+</script>
+
+<template>
+    <div class="w-full max-w-sm border-3 border-brutal shadow-brutal rounded-brutal p-3 bg-brutal-bg">
+        <TreeView
+            v-model="selected"
+            :nodes="nodes"
+            :default-expanded="['src', 'components']"
+        />
+        <p v-if="selected" class="mt-3 text-xs font-bold border-t-3 border-brutal pt-2 opacity-60">
+            已选择：{{ selected }}
+        </p>
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/UploadCardDemo.vue b/apps/docs/.vitepress/theme/components/demos/UploadCardDemo.vue
new file mode 100644
index 0000000..7205804
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/UploadCardDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { UploadCard } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <UploadCard />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/demos/WaitlistPageDemo.vue b/apps/docs/.vitepress/theme/components/demos/WaitlistPageDemo.vue
new file mode 100644
index 0000000..71c3455
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/demos/WaitlistPageDemo.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { WaitlistPage } from 'brutx-ui-vue'
+</script>
+
+<template>
+    <div class="w-full overflow-x-auto">
+        <WaitlistPage />
+    </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/index.ts b/apps/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..d47b6e7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/index.ts
@@ -0,0 +1,199 @@
+import DefaultTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+import ComponentPreview from './components/ComponentPreview.vue'
+import CopyButton from './components/CopyButton.vue'
+import CodeBlock from './components/CodeBlock.vue'
+import InstallationTabs from './components/InstallationTabs.vue'
+import ThemeToggle from './components/ThemeToggle.vue'
+import Logo from './components/Logo.vue'
+import AlertDemo from './components/demos/AlertDemo.vue'
+import AlertDialogDemo from './components/demos/AlertDialogDemo.vue'
+import AvatarDemo from './components/demos/AvatarDemo.vue'
+import BadgeDemo from './components/demos/BadgeDemo.vue'
+import ButtonDemo from './components/demos/ButtonDemo.vue'
+import CalendarDemo from './components/demos/CalendarDemo.vue'
+import CardDemo from './components/demos/CardDemo.vue'
+import CheckboxDemo from './components/demos/CheckboxDemo.vue'
+import ComboboxDemo from './components/demos/ComboboxDemo.vue'
+import CommandDemo from './components/demos/CommandDemo.vue'
+import DashboardStatsDemo from './components/demos/DashboardStatsDemo.vue'
+import DialogDemo from './components/demos/DialogDemo.vue'
+import DropdownMenuDemo from './components/demos/DropdownMenuDemo.vue'
+import FormDemo from './components/demos/FormDemo.vue'
+import InputDemo from './components/demos/InputDemo.vue'
+import LabelDemo from './components/demos/LabelDemo.vue'
+import PaginationDemo from './components/demos/PaginationDemo.vue'
+import PopoverDemo from './components/demos/PopoverDemo.vue'
+import ProgressDemo from './components/demos/ProgressDemo.vue'
+import RadioGroupDemo from './components/demos/RadioGroupDemo.vue'
+import SaaSPricingDemo from './components/demos/SaaSPricingDemo.vue'
+import ScrollAreaDemo from './components/demos/ScrollAreaDemo.vue'
+import SelectDemo from './components/demos/SelectDemo.vue'
+import SeparatorDemo from './components/demos/SeparatorDemo.vue'
+import SheetDemo from './components/demos/SheetDemo.vue'
+import SkeletonDemo from './components/demos/SkeletonDemo.vue'
+import SliderDemo from './components/demos/SliderDemo.vue'
+import SpinnerDemo from './components/demos/SpinnerDemo.vue'
+import SubmitButtonDemo from './components/demos/SubmitButtonDemo.vue'
+import SwitchDemo from './components/demos/SwitchDemo.vue'
+import TableDemo from './components/demos/TableDemo.vue'
+import TabsDemo from './components/demos/TabsDemo.vue'
+import TextareaDemo from './components/demos/TextareaDemo.vue'
+import ToastDemo from './components/demos/ToastDemo.vue'
+import ToggleDemo from './components/demos/ToggleDemo.vue'
+import ToggleGroupDemo from './components/demos/ToggleGroupDemo.vue'
+import TooltipDemo from './components/demos/TooltipDemo.vue'
+import AccordionDemo from './components/demos/AccordionDemo.vue'
+import TagsInputDemo from './components/demos/TagsInputDemo.vue'
+import NumberInputDemo from './components/demos/NumberInputDemo.vue'
+import CopyToClipboardDemo from './components/demos/CopyToClipboardDemo.vue'
+import BreadcrumbDemo from './components/demos/BreadcrumbDemo.vue'
+import MarqueeDemo from './components/demos/MarqueeDemo.vue'
+import BeforeAfterDemo from './components/demos/BeforeAfterDemo.vue'
+import CodeBlockDemo from './components/demos/CodeBlockDemo.vue'
+import TimelineDemo from './components/demos/TimelineDemo.vue'
+import CarouselDemo from './components/demos/CarouselDemo.vue'
+import TreeViewDemo from './components/demos/TreeViewDemo.vue'
+import KanbanBoardDemo from './components/demos/KanbanBoardDemo.vue'
+import ChatBubbleDemo from './components/demos/ChatBubbleDemo.vue'
+import KbdDemo from './components/demos/KbdDemo.vue'
+import CounterDemo from './components/demos/CounterDemo.vue'
+import StepperDemo from './components/demos/StepperDemo.vue'
+import Card3DDemo from './components/demos/Card3DDemo.vue'
+import GlitchTextDemo from './components/demos/GlitchTextDemo.vue'
+import ScratchCardDemo from './components/demos/ScratchCardDemo.vue'
+import SketchyChartDemo from './components/demos/SketchyChartDemo.vue'
+import HardcoreInputDemo from './components/demos/HardcoreInputDemo.vue'
+import BrutalistHeroDemo from './components/demos/BrutalistHeroDemo.vue'
+import PricingSectionDemo from './components/demos/PricingSectionDemo.vue'
+import AuthCardDemo from './components/demos/AuthCardDemo.vue'
+import DashboardShellDemo from './components/demos/DashboardShellDemo.vue'
+import EmptyStateDemo from './components/demos/EmptyStateDemo.vue'
+import WaitlistPageDemo from './components/demos/WaitlistPageDemo.vue'
+import NotFoundPageDemo from './components/demos/NotFoundPageDemo.vue'
+import LoadingPageDemo from './components/demos/LoadingPageDemo.vue'
+import ErrorCardDemo from './components/demos/ErrorCardDemo.vue'
+import SuccessCardDemo from './components/demos/SuccessCardDemo.vue'
+import CookieConsentDemo from './components/demos/CookieConsentDemo.vue'
+import HeaderSectionDemo from './components/demos/HeaderSectionDemo.vue'
+import FooterSectionDemo from './components/demos/FooterSectionDemo.vue'
+import FaqSectionDemo from './components/demos/FaqSectionDemo.vue'
+import TestimonialCardDemo from './components/demos/TestimonialCardDemo.vue'
+import BlogCardDemo from './components/demos/BlogCardDemo.vue'
+import FileCardDemo from './components/demos/FileCardDemo.vue'
+import QuickActionsDemo from './components/demos/QuickActionsDemo.vue'
+import TabsNavDemo from './components/demos/TabsNavDemo.vue'
+import SearchWidgetDemo from './components/demos/SearchWidgetDemo.vue'
+import FeedbackFormDemo from './components/demos/FeedbackFormDemo.vue'
+import StepperSectionDemo from './components/demos/StepperSectionDemo.vue'
+import DataTableSectionDemo from './components/demos/DataTableSectionDemo.vue'
+import SettingsPageDemo from './components/demos/SettingsPageDemo.vue'
+import BlogListPageDemo from './components/demos/BlogListPageDemo.vue'
+import ActivityLogPageDemo from './components/demos/ActivityLogPageDemo.vue'
+import ProfilePageDemo from './components/demos/ProfilePageDemo.vue'
+import ChartSectionDemo from './components/demos/ChartSectionDemo.vue'
+import GallerySectionDemo from './components/demos/GallerySectionDemo.vue'
+import UploadCardDemo from './components/demos/UploadCardDemo.vue'
+import OverviewPageDemo from './components/demos/OverviewPageDemo.vue'
+import './style.css'
+
+export default {
+    extends: DefaultTheme,
+    enhanceApp({ app }) {
+        app.component('ComponentPreview', ComponentPreview)
+        app.component('CopyButton', CopyButton)
+        app.component('CodeBlock', CodeBlock)
+        app.component('InstallationTabs', InstallationTabs)
+        app.component('ThemeToggle', ThemeToggle)
+        app.component('Logo', Logo)
+        app.component('AlertDemo', AlertDemo)
+        app.component('AlertDialogDemo', AlertDialogDemo)
+        app.component('AvatarDemo', AvatarDemo)
+        app.component('BadgeDemo', BadgeDemo)
+        app.component('ButtonDemo', ButtonDemo)
+        app.component('CalendarDemo', CalendarDemo)
+        app.component('CardDemo', CardDemo)
+        app.component('CheckboxDemo', CheckboxDemo)
+        app.component('ComboboxDemo', ComboboxDemo)
+        app.component('CommandDemo', CommandDemo)
+        app.component('DashboardStatsDemo', DashboardStatsDemo)
+        app.component('DialogDemo', DialogDemo)
+        app.component('DropdownMenuDemo', DropdownMenuDemo)
+        app.component('FormDemo', FormDemo)
+        app.component('InputDemo', InputDemo)
+        app.component('LabelDemo', LabelDemo)
+        app.component('PaginationDemo', PaginationDemo)
+        app.component('PopoverDemo', PopoverDemo)
+        app.component('ProgressDemo', ProgressDemo)
+        app.component('RadioGroupDemo', RadioGroupDemo)
+        app.component('SaaSPricingDemo', SaaSPricingDemo)
+        app.component('ScrollAreaDemo', ScrollAreaDemo)
+        app.component('SelectDemo', SelectDemo)
+        app.component('SeparatorDemo', SeparatorDemo)
+        app.component('SheetDemo', SheetDemo)
+        app.component('SkeletonDemo', SkeletonDemo)
+        app.component('SliderDemo', SliderDemo)
+        app.component('SpinnerDemo', SpinnerDemo)
+        app.component('SubmitButtonDemo', SubmitButtonDemo)
+        app.component('SwitchDemo', SwitchDemo)
+        app.component('TableDemo', TableDemo)
+        app.component('TabsDemo', TabsDemo)
+        app.component('TextareaDemo', TextareaDemo)
+        app.component('ToastDemo', ToastDemo)
+        app.component('ToggleDemo', ToggleDemo)
+        app.component('ToggleGroupDemo', ToggleGroupDemo)
+        app.component('TooltipDemo', TooltipDemo)
+        app.component('AccordionDemo', AccordionDemo)
+        app.component('TagsInputDemo', TagsInputDemo)
+        app.component('NumberInputDemo', NumberInputDemo)
+        app.component('CopyToClipboardDemo', CopyToClipboardDemo)
+        app.component('BreadcrumbDemo', BreadcrumbDemo)
+        app.component('MarqueeDemo', MarqueeDemo)
+        app.component('BeforeAfterDemo', BeforeAfterDemo)
+        app.component('CodeBlockDemo', CodeBlockDemo)
+        app.component('TimelineDemo', TimelineDemo)
+        app.component('CarouselDemo', CarouselDemo)
+        app.component('TreeViewDemo', TreeViewDemo)
+        app.component('KanbanBoardDemo', KanbanBoardDemo)
+        app.component('ChatBubbleDemo', ChatBubbleDemo)
+        app.component('KbdDemo', KbdDemo)
+        app.component('CounterDemo', CounterDemo)
+        app.component('StepperDemo', StepperDemo)
+        app.component('Card3DDemo', Card3DDemo)
+        app.component('GlitchTextDemo', GlitchTextDemo)
+        app.component('ScratchCardDemo', ScratchCardDemo)
+        app.component('SketchyChartDemo', SketchyChartDemo)
+        app.component('HardcoreInputDemo', HardcoreInputDemo)
+        app.component('BrutalistHeroDemo', BrutalistHeroDemo)
+        app.component('PricingSectionDemo', PricingSectionDemo)
+        app.component('AuthCardDemo', AuthCardDemo)
+        app.component('DashboardShellDemo', DashboardShellDemo)
+        app.component('EmptyStateDemo', EmptyStateDemo)
+        app.component('WaitlistPageDemo', WaitlistPageDemo)
+        app.component('NotFoundPageDemo', NotFoundPageDemo)
+        app.component('LoadingPageDemo', LoadingPageDemo)
+        app.component('ErrorCardDemo', ErrorCardDemo)
+        app.component('SuccessCardDemo', SuccessCardDemo)
+        app.component('CookieConsentDemo', CookieConsentDemo)
+        app.component('HeaderSectionDemo', HeaderSectionDemo)
+        app.component('FooterSectionDemo', FooterSectionDemo)
+        app.component('FaqSectionDemo', FaqSectionDemo)
+        app.component('TestimonialCardDemo', TestimonialCardDemo)
+        app.component('BlogCardDemo', BlogCardDemo)
+        app.component('FileCardDemo', FileCardDemo)
+        app.component('QuickActionsDemo', QuickActionsDemo)
+        app.component('TabsNavDemo', TabsNavDemo)
+        app.component('SearchWidgetDemo', SearchWidgetDemo)
+        app.component('FeedbackFormDemo', FeedbackFormDemo)
+        app.component('StepperSectionDemo', StepperSectionDemo)
+        app.component('DataTableSectionDemo', DataTableSectionDemo)
+        app.component('SettingsPageDemo', SettingsPageDemo)
+        app.component('BlogListPageDemo', BlogListPageDemo)
+        app.component('ActivityLogPageDemo', ActivityLogPageDemo)
+        app.component('ProfilePageDemo', ProfilePageDemo)
+        app.component('ChartSectionDemo', ChartSectionDemo)
+        app.component('GallerySectionDemo', GallerySectionDemo)
+        app.component('UploadCardDemo', UploadCardDemo)
+        app.component('OverviewPageDemo', OverviewPageDemo)
+    },
+} satisfies Theme
diff --git a/apps/docs/.vitepress/theme/lib/utils.ts b/apps/docs/.vitepress/theme/lib/utils.ts
new file mode 100644
index 0000000..ccd54c7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
diff --git a/apps/docs/.vitepress/theme/style.css b/apps/docs/.vitepress/theme/style.css
new file mode 100644
index 0000000..2183c46
--- /dev/null
+++ b/apps/docs/.vitepress/theme/style.css
@@ -0,0 +1,928 @@
+@import 'v-calendar/dist/style.css';
+@import 'brutx-ui-vue/styles.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ============================================
+   DESIGN TOKENS — Override VitePress defaults
+   ============================================ */
+
+:root {
+    /* --- BrutxUI brand --- */
+    --vp-c-brand-1: var(--brutal-primary);
+    --vp-c-brand-2: var(--brutal-secondary);
+    --vp-c-brand-3: var(--brutal-accent);
+    --vp-c-brand-soft: var(--brutal-muted);
+
+    /* --- Fonts --- */
+    --vp-font-family-base: 'Space Grotesk', system-ui, sans-serif;
+    --vp-font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+
+    /* --- Backgrounds: pure white, no soft grays --- */
+    --vp-c-bg: #ffffff;
+    --vp-c-bg-alt: #ffffff;
+    --vp-c-bg-elv: #ffffff;
+    --vp-c-bg-soft: #f5f5f5;
+
+    /* --- Text: maximum contrast --- */
+    --vp-c-text-1: #000000;
+    --vp-c-text-2: #1a1a1a;
+    --vp-c-text-3: #333333;
+
+    /* --- Borders/dividers: thick and black --- */
+    --vp-c-border: #000000;
+    --vp-c-divider: #000000;
+    --vp-c-gutter: #000000;
+
+    /* --- Shadows: hard brutalist, no blur --- */
+    --vp-shadow-1: 3px 3px 0px 0px #000000;
+    --vp-shadow-2: 4px 4px 0px 0px #000000;
+    --vp-shadow-3: 6px 6px 0px 0px #000000;
+    --vp-shadow-4: 8px 8px 0px 0px #000000;
+    --vp-shadow-5: 10px 10px 0px 0px #000000;
+
+    /* --- Buttons --- */
+    --vp-button-brand-border: #000000;
+    --vp-button-brand-text: #000000;
+    --vp-button-brand-bg: var(--brutal-primary);
+    --vp-button-brand-hover-border: #000000;
+    --vp-button-brand-hover-text: #000000;
+    --vp-button-brand-hover-bg: var(--brutal-secondary);
+    --vp-button-alt-border: #000000;
+    --vp-button-alt-text: #000000;
+    --vp-button-alt-bg: var(--brutal-accent);
+    --vp-button-alt-hover-border: #000000;
+    --vp-button-alt-hover-text: #000000;
+    --vp-button-alt-hover-bg: var(--brutal-primary);
+
+    /* --- Home hero --- */
+    --vp-home-hero-name-color: var(--brutal-primary);
+    --vp-home-hero-name-background: transparent;
+    --vp-home-hero-image-background-image: none;
+    --vp-home-hero-image-filter: none;
+
+    /* --- Nav --- */
+    --vp-nav-height: 72px;
+    --vp-nav-bg-color: rgba(255, 255, 255, 0.95);
+
+    /* --- Sidebar --- */
+    --vp-sidebar-bg-color: #ffffff;
+
+    /* --- Code blocks --- */
+    --vp-code-block-bg: var(--brutal-muted);
+    --vp-code-block-color: var(--brutal-fg);
+    --vp-code-bg: var(--brutal-muted);
+    --vp-code-color: var(--brutal-primary);
+
+    /* --- Misc --- */
+    --vp-c-tip-text: var(--brutal-primary);
+    --vp-c-warning-text: var(--brutal-accent);
+    --vp-c-danger-text: var(--brutal-destructive);
+}
+
+.dark {
+    --vp-c-brand-1: var(--brutal-primary);
+    --vp-c-brand-2: var(--brutal-secondary);
+    --vp-c-brand-3: var(--brutal-accent);
+    --vp-c-brand-soft: var(--brutal-muted);
+
+    --vp-c-bg: #141414;
+    --vp-c-bg-alt: #1a1a1a;
+    --vp-c-bg-elv: #1e1e1e;
+    --vp-c-bg-soft: #252525;
+
+    --vp-c-text-1: #ffffff;
+    --vp-c-text-2: #e5e5e5;
+    --vp-c-text-3: #cccccc;
+
+    --vp-c-border: var(--brutal-border-color);
+    --vp-c-divider: var(--brutal-border-color);
+    --vp-c-gutter: var(--brutal-border-color);
+
+    --vp-shadow-1: 3px 3px 0px 0px var(--brutal-shadow-color);
+    --vp-shadow-2: 4px 4px 0px 0px var(--brutal-shadow-color);
+    --vp-shadow-3: 6px 6px 0px 0px var(--brutal-shadow-color);
+    --vp-shadow-4: 8px 8px 0px 0px var(--brutal-shadow-color);
+    --vp-shadow-5: 10px 10px 0px 0px var(--brutal-shadow-color);
+
+    --vp-button-brand-border: var(--brutal-border-color);
+    --vp-button-brand-text: #000000;
+    --vp-button-brand-hover-border: var(--brutal-border-color);
+    --vp-button-brand-hover-text: #000000;
+    --vp-button-alt-border: var(--brutal-border-color);
+    --vp-button-alt-text: #000000;
+    --vp-button-alt-hover-border: var(--brutal-border-color);
+    --vp-button-alt-hover-text: #000000;
+
+    --vp-nav-bg-color: rgba(20, 20, 20, 0.95);
+    --vp-sidebar-bg-color: #141414;
+
+    /* --- Code blocks dark mode overrides --- */
+    --vp-code-block-bg: #111827;
+    --vp-code-block-color: #f3f4f6;
+}
+
+/* ============================================
+   GLOBAL RESETS — Kill all rounded corners
+   ============================================ */
+
+body {
+    font-family: 'Space Grotesk', system-ui, sans-serif !important;
+}
+
+/* Scoped border-radius reset — covers VitePress UI + docs components */
+.VPButton,
+.VPFeature,
+.VPNav,
+.VPSidebar,
+.VPSidebarItem .link,
+.VPSwitch,
+.VPFooter,
+.VPNavBarSearch button,
+.VPLocalNavOutlineDropdown .items,
+.VPDocFooter .edit-link-button,
+.VPDocFooter .pager-link,
+.vp-doc table,
+.vp-doc blockquote,
+.vp-doc code,
+.vp-doc div[class*='language-'],
+.vp-doc div[class*='language-'] > button,
+.vp-doc .VPBadge,
+.custom-block {
+    border-radius: 0;
+}
+
+::selection {
+    background-color: var(--brutal-accent);
+    color: #000000;
+}
+
+/* ============================================
+   NAVBAR — Bold top bar with thick border
+   ============================================ */
+
+.VPNav {
+    border-bottom: 4px solid var(--brutal-border-color) !important;
+    backdrop-filter: none !important;
+    padding-right: var(--scrollbar-width, 0px) !important;
+}
+
+.VPNavBar {
+    border-bottom: none !important;
+}
+
+.VPNavBar .wrapper {
+    border-bottom: none !important;
+}
+
+/* Kill VitePress default background transitions */
+.VPNavBar .container {
+    transition: none !important;
+}
+
+/* Nav links: bold uppercase */
+.VPNavBar .menu a,
+.VPNavBarMenuLink {
+    font-weight: 800 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    font-size: 0.85rem !important;
+    border-bottom: 3px solid transparent !important;
+    transition: border-color 150ms, background-color 150ms !important;
+}
+
+.VPNavBar .menu a:hover,
+.VPNavBarMenuLink:hover {
+    border-bottom-color: var(--brutal-primary) !important;
+    background-color: var(--brutal-muted) !important;
+}
+
+/* Divider between nav sections */
+.VPNavBar .divider {
+    height: 0 !important;
+}
+
+.VPNavBar .divider-line {
+    height: 4px !important;
+    background-color: var(--brutal-border-color) !important;
+}
+
+/* ============================================
+   SIDEBAR — Sharp, bold navigation
+   ============================================ */
+
+.VPSidebar {
+    border-right: 4px solid var(--brutal-border-color) !important;
+    background-color: var(--vp-sidebar-bg-color) !important;
+    padding-top: 0 !important;
+}
+
+@media (min-width: 960px) {
+    .VPSidebar {
+        padding-top: var(--vp-nav-height) !important;
+    }
+}
+
+@media (min-width: 1440px) {
+    .VPSidebar {
+        padding-left: max(32px, calc((100% - var(--scrollbar-width, 0px) - (var(--vp-layout-max-width) - 64px)) / 2)) !important;
+        width: calc((100% - var(--scrollbar-width, 0px) - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px) !important;
+    }
+}
+
+/* Colored accent bar at top of sidebar */
+.VPSidebar::before {
+    content: '';
+    display: block;
+    height: 4px;
+    background: linear-gradient(
+        90deg,
+        var(--brutal-primary) 0%,
+        var(--brutal-primary) 33%,
+        var(--brutal-secondary) 33%,
+        var(--brutal-secondary) 66%,
+        var(--brutal-accent) 66%,
+        var(--brutal-accent) 100%
+    );
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+/* Hide VitePress default left indicator */
+.VPSidebarItem .indicator {
+    display: none !important;
+}
+
+/* Remove nested left border on sub-items */
+.VPSidebarItem .items {
+    border-left: none !important;
+    padding-left: 0;
+}
+
+/* Section headers (level-0 groups) */
+.VPSidebarItem.level-0 > .item > .text {
+    font-weight: 900 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.08em !important;
+    font-size: 0.7rem !important;
+    color: var(--brutal-primary) !important;
+    padding: 0.5rem 0 0.25rem;
+}
+
+/* Inactive sidebar links */
+.VPSidebarItem.level-0 > .item > .link,
+.VPSidebarItem.level-1 > .item > .link,
+.VPSidebarItem.level-2 > .item > .link {
+    border: 3px solid transparent;
+    transition: background-color 100ms, border-color 100ms;
+    padding: 0.35rem 0.75rem;
+}
+
+.VPSidebarItem.level-0 > .item > .link:hover,
+.VPSidebarItem.level-1 > .item > .link:hover,
+.VPSidebarItem.level-2 > .item > .link:hover {
+    background-color: var(--brutal-muted);
+    border-left: 4px solid var(--brutal-primary);
+    padding-left: calc(0.75rem - 1px);
+}
+
+.dark .VPSidebarItem.level-0 > .item > .link:hover,
+.dark .VPSidebarItem.level-1 > .item > .link:hover,
+.dark .VPSidebarItem.level-2 > .item > .link:hover {
+    background-color: var(--brutal-muted);
+    border-left: 4px solid var(--brutal-primary);
+    padding-left: calc(0.75rem - 1px);
+}
+
+/* Active sidebar links - accent bg, bold text, brutal border + shadow */
+.VPSidebarItem.is-active > .item > .link {
+    background-color: var(--brutal-accent) !important;
+    color: var(--brutal-fg) !important;
+    border: 4px solid var(--brutal-border-color) !important;
+    box-shadow: 4px 4px 0px 0px var(--brutal-border-color) !important;
+    font-weight: 700;
+}
+
+.VPSidebarItem.is-active > .item > .link > .text {
+    color: var(--brutal-fg) !important;
+    font-weight: 800;
+}
+
+.dark .VPSidebarItem.is-active > .item > .link {
+    background-color: var(--brutal-accent) !important;
+    color: var(--brutal-fg) !important;
+    border-color: var(--brutal-border-color) !important;
+    box-shadow: 4px 4px 0px 0px var(--brutal-border-color) !important;
+}
+
+.dark .VPSidebarItem.is-active > .item > .link > .text {
+    color: var(--brutal-fg) !important;
+}
+
+/* Hover text color override */
+.VPSidebarItem .item .link:hover .text {
+    color: var(--brutal-primary);
+}
+
+/* ============================================
+   BUTTONS — Hard shadows, zero radius
+   ============================================ */
+
+.VPButton {
+    font-weight: 800 !important;
+    letter-spacing: 0.025em !important;
+    text-transform: uppercase !important;
+    font-size: 0.85rem !important;
+    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.VPButton.brand {
+    border-width: 3px !important;
+    border-style: solid !important;
+    border-color: #000000 !important;
+    box-shadow: 4px 4px 0 0 #000000 !important;
+    background-color: var(--brutal-primary) !important;
+    color: #000000 !important;
+}
+
+.VPButton.brand:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 6px 6px 0 0 #000000 !important;
+    background-color: var(--brutal-secondary) !important;
+}
+
+.VPButton.brand:active {
+    transform: translateY(2px) !important;
+    box-shadow: none !important;
+}
+
+.VPButton.alt {
+    border-width: 3px !important;
+    border-style: solid !important;
+    border-color: #000000 !important;
+    box-shadow: 4px 4px 0 0 #000000 !important;
+    background-color: var(--brutal-accent) !important;
+    color: #000000 !important;
+}
+
+.VPButton.alt:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 6px 6px 0 0 #000000 !important;
+    background-color: var(--brutal-primary) !important;
+}
+
+.VPButton.alt:active {
+    transform: translateY(2px) !important;
+    box-shadow: none !important;
+}
+
+/* Dark mode buttons */
+.dark .VPButton.brand,
+.dark .VPButton.alt {
+    border-color: var(--brutal-border-color) !important;
+    box-shadow: 4px 4px 0 0 var(--brutal-border-color) !important;
+}
+
+.dark .VPButton.brand:hover,
+.dark .VPButton.alt:hover {
+    box-shadow: 6px 6px 0 0 var(--brutal-border-color) !important;
+}
+
+/* ============================================
+   HERO — Bold, geometric, high impact
+   ============================================ */
+
+.VPHero .name {
+    font-weight: 900 !important;
+    letter-spacing: -0.03em !important;
+}
+
+.VPHero .name.clip {
+    background-clip: text !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: var(--brutal-primary) !important;
+    background-image: none !important;
+}
+
+.VPHero .text {
+    font-weight: 900 !important;
+    letter-spacing: -0.02em !important;
+    color: var(--vp-c-text-1) !important;
+}
+
+.VPHero .tagline {
+    font-weight: 600 !important;
+    color: var(--vp-c-text-2) !important;
+    max-width: 560px !important;
+    line-height: 1.6 !important;
+}
+
+/* Kill the blurred gradient blob only — keep .image-src visible for custom hero images */
+.VPHero .image-container .image-bg {
+    display: none !important;
+}
+
+/* ============================================
+   FEATURE CARDS — Brutalist grid cards
+   ============================================ */
+
+.VPFeature {
+    border: 3px solid #000000 !important;
+    box-shadow: 4px 4px 0 0 #000000 !important;
+    background-color: #ffffff !important;
+    padding: 1.5rem !important;
+    transition: transform 150ms, box-shadow 150ms !important;
+    position: relative;
+    overflow: hidden;
+}
+
+.VPFeature:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 6px 6px 0 0 #000000 !important;
+}
+
+.VPFeature .title {
+    font-weight: 900 !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 0.01em !important;
+}
+
+.VPFeature .details {
+    font-weight: 500 !important;
+    color: var(--vp-c-text-2) !important;
+    line-height: 1.6 !important;
+}
+
+/* Colored accent strips on feature cards */
+.VPFeatures .VPFeature::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 5px;
+    background-color: var(--feature-accent, var(--brutal-primary));
+}
+
+.VPFeatures .VPFeature:nth-child(6n+1) { --feature-accent: var(--brutal-primary); }
+.VPFeatures .VPFeature:nth-child(6n+2) { --feature-accent: var(--brutal-secondary); }
+.VPFeatures .VPFeature:nth-child(6n+3) { --feature-accent: var(--brutal-accent); }
+.VPFeatures .VPFeature:nth-child(6n+4) { --feature-accent: var(--brutal-destructive); }
+.VPFeatures .VPFeature:nth-child(6n+5) { --feature-accent: var(--brutal-success); }
+.VPFeatures .VPFeature:nth-child(6n+6) { --feature-accent: var(--brutal-info); }
+
+/* Dark mode features */
+.dark .VPFeature {
+    border-color: var(--brutal-border-color) !important;
+    box-shadow: 4px 4px 0 0 var(--brutal-border-color) !important;
+    background-color: var(--brutal-bg) !important;
+}
+
+.dark .VPFeature:hover {
+    box-shadow: 6px 6px 0 0 var(--brutal-border-color) !important;
+}
+
+/* ============================================
+   CONTENT AREA — Typography & structure
+   ============================================ */
+
+.VPContent {
+    scrollbar-gutter: stable;
+}
+
+.vp-doc h1,
+.vp-doc h2,
+.vp-doc h3,
+.vp-doc h4 {
+    font-family: 'Space Grotesk', system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: 0.01em;
+}
+
+.vp-doc h1 {
+    font-size: 2.25rem;
+    letter-spacing: -0.02em;
+    border-bottom: 4px solid var(--brutal-border-color);
+    padding-bottom: 0.75rem;
+    margin-bottom: 2rem;
+}
+
+.vp-doc h2 {
+    font-size: 1.5rem;
+    font-weight: 900;
+    border-top: none !important;
+    border-bottom: 3px solid var(--brutal-border-color);
+    padding-top: 0;
+    padding-bottom: 0.5rem;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.vp-doc h3 {
+    font-size: 1.2rem;
+    margin-top: 2rem;
+}
+
+.vp-doc a {
+    color: var(--brutal-primary);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+    font-weight: 600;
+}
+
+.vp-doc a:hover {
+    color: var(--brutal-secondary);
+}
+
+.vp-doc blockquote {
+    border-left: 4px solid var(--brutal-primary);
+    background-color: var(--brutal-muted);
+    padding: 0.75rem 1rem;
+    box-shadow: 4px 4px 0 0 var(--brutal-border-color);
+}
+
+.vp-doc code {
+    background-color: var(--brutal-muted);
+    border: 2px solid var(--brutal-border-color);
+    padding: 0.125rem 0.375rem;
+    font-weight: 700;
+    font-size: 0.875em;
+}
+
+/* code inside pre inherits the pre's formatting and background */
+.vp-doc pre code {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    font-weight: inherit;
+    font-size: inherit;
+}
+
+.vp-doc hr {
+    border: none;
+    border-top: 3px solid var(--brutal-border-color);
+    margin: 2rem 0;
+}
+
+/* ============================================
+   CODE BLOCKS — Hard edges, bold labels
+   ============================================ */
+
+.vp-doc div[class*='language-'] {
+    border: 2px solid var(--brutal-border-color) !important;
+    box-shadow: 2px 2px 0 0 var(--brutal-border-color) !important;
+    position: relative;
+}
+
+/* CodeBlock accent bar via pseudo-element (no extra DOM node) */
+.codeblock-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background-color: var(--brutal-primary);
+    z-index: 10;
+}
+
+.vp-doc div[class*='language-'] > button {
+    border: 2px solid var(--brutal-border-color) !important;
+    background-color: var(--brutal-secondary) !important;
+    color: #000000 !important;
+    font-weight: 700;
+}
+
+.vp-doc div[class*='language-'] > button:hover {
+    background-color: var(--brutal-accent) !important;
+}
+
+/* Language label bar */
+.vp-doc div[class*='language-'] > span.lang {
+    font-weight: 900 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.1em !important;
+    font-size: 0.65rem !important;
+    background-color: var(--brutal-primary) !important;
+    color: #000000 !important;
+    padding: 0.25rem 0.75rem !important;
+    border-bottom: 2px solid var(--brutal-border-color) !important;
+    display: block !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    z-index: 1;
+}
+
+/* Line numbers */
+.vp-doc div[class*='language-'].line-numbers-mode .line-numbers {
+    border-right: 2px solid var(--brutal-border-color) !important;
+}
+
+/* ============================================
+   TABLES — Brutalist data grids
+   ============================================ */
+
+.vp-doc table {
+    border: 3px solid var(--brutal-border-color);
+    border-collapse: separate;
+    border-spacing: 0;
+    display: table;
+    width: 100%;
+    min-width: 600px;
+    box-shadow: 4px 4px 0 0 var(--brutal-border-color);
+}
+
+.vp-doc table th,
+.vp-doc table td {
+    border-right: 2px solid var(--brutal-border-color);
+    border-bottom: 2px solid var(--brutal-border-color);
+    padding: 0.5rem 1rem;
+}
+
+.vp-doc table th:last-child,
+.vp-doc table td:last-child {
+    border-right: none;
+}
+
+.vp-doc table tr:last-child td {
+    border-bottom: none;
+}
+
+.vp-doc table th {
+    background-color: var(--brutal-accent);
+    font-weight: 900;
+    color: #000000;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.8rem;
+}
+
+.vp-doc table tr:nth-child(even) td {
+    background-color: var(--brutal-muted);
+}
+
+.dark .vp-doc table th {
+    background-color: var(--brutal-accent);
+    color: #000000;
+}
+
+/* ============================================
+   CATEGORY BADGES — Sharp, bold labels
+   ============================================ */
+
+.vp-doc .VPBadge {
+    display: inline-block;
+    padding: 2px 10px;
+    border: 2px solid #000000;
+    font-size: 0.7rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    background-color: var(--brutal-primary);
+    color: #000000;
+    box-shadow: 2px 2px 0px 0px #000000;
+}
+
+.vp-doc .VPBadge.tip {
+    background-color: var(--brutal-primary);
+    border-color: #000000;
+    color: #000000;
+}
+
+.vp-doc .VPBadge.info {
+    background-color: var(--brutal-accent);
+    border-color: #000000;
+    color: #000000;
+}
+
+.vp-doc .VPBadge.warning {
+    background-color: var(--brutal-accent);
+    border-color: #000000;
+    color: #000000;
+}
+
+.vp-doc .VPBadge.danger {
+    background-color: var(--brutal-destructive);
+    border-color: #000000;
+    color: #000000;
+}
+
+/* ============================================
+   CUSTOM BLOCKS — Bold callouts
+   ============================================ */
+
+.custom-block {
+    box-shadow: 4px 4px 0 0 var(--brutal-border-color);
+}
+
+.custom-block.tip {
+    border: 3px solid var(--brutal-primary);
+    background-color: var(--brutal-muted);
+}
+
+.custom-block.warning {
+    border: 3px solid var(--brutal-accent);
+    background-color: var(--brutal-muted);
+}
+
+.custom-block.danger {
+    border: 3px solid var(--brutal-destructive);
+    background-color: var(--brutal-muted);
+}
+
+.custom-block.info {
+    border: 3px solid var(--brutal-info);
+    background-color: var(--brutal-muted);
+}
+
+.custom-block .custom-block-title {
+    font-weight: 900 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+    font-size: 0.8rem !important;
+}
+
+/* ============================================
+   OUTLINE / TOC
+   ============================================ */
+
+.VPLocalNavOutlineDropdown .items {
+    border: 3px solid var(--brutal-border-color);
+    box-shadow: 4px 4px 0 0 var(--brutal-border-color);
+}
+
+.VPDocOutlineItem .outline-link {
+    font-weight: 600;
+    border-left: 3px solid transparent;
+    transition: border-color 100ms;
+}
+
+.VPDocOutlineItem .outline-link.active {
+    border-left-color: var(--brutal-primary);
+    color: var(--brutal-primary);
+    font-weight: 800;
+}
+
+/* ============================================
+   SEARCH BOX — Brutalist search
+   ============================================ */
+
+.VPNavBarSearch button {
+    border: 3px solid var(--brutal-border-color) !important;
+    box-shadow: 3px 3px 0 0 var(--brutal-border-color) !important;
+    background-color: var(--brutal-bg) !important;
+    font-weight: 600 !important;
+    transition: box-shadow 150ms !important;
+}
+
+.VPNavBarSearch button:hover {
+    box-shadow: 4px 4px 0 0 var(--brutal-primary) !important;
+}
+
+.VPNavBarSearch button:focus {
+    outline: 3px solid var(--brutal-primary) !important;
+    outline-offset: 2px !important;
+}
+
+/* ============================================
+   FOOTER — Bold bottom bar
+   ============================================ */
+
+.VPFooter {
+    border-top: 4px solid var(--brutal-border-color) !important;
+    background-color: var(--brutal-accent) !important;
+    color: #000000 !important;
+    box-shadow: 0 -4px 0 0 var(--brutal-border-color) !important;
+}
+
+.VPFooter .message,
+.VPFooter .copyright {
+    font-weight: 800 !important;
+    letter-spacing: 0.02em;
+}
+
+/* ============================================
+   MISC UI ELEMENTS
+   ============================================ */
+
+.VPSwitch {
+    border: 3px solid var(--brutal-border-color) !important;
+}
+
+.VPSwitch:hover {
+    box-shadow: 2px 2px 0 0 var(--brutal-border-color);
+}
+
+.VPSocialLink:hover {
+    color: var(--brutal-primary);
+}
+
+/* Page-level edit link */
+.VPDocFooter .edit-link-button {
+    border: 2px solid var(--brutal-border-color);
+    font-weight: 700;
+    transition: background-color 100ms, box-shadow 100ms;
+}
+
+.VPDocFooter .edit-link-button:hover {
+    background-color: var(--brutal-muted);
+    box-shadow: 3px 3px 0 0 var(--brutal-border-color);
+}
+
+/* Prev/Next navigation */
+.VPDocFooter .pager-link {
+    border: 3px solid var(--brutal-border-color) !important;
+    box-shadow: 3px 3px 0 0 var(--brutal-border-color) !important;
+    transition: transform 150ms, box-shadow 150ms !important;
+}
+
+.VPDocFooter .pager-link:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 5px 5px 0 0 var(--brutal-border-color) !important;
+}
+
+/* ============================================
+   SCROLLBAR — Thick, visible
+   ============================================ */
+
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--brutal-muted);
+    border-left: 2px solid var(--brutal-border-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--brutal-border-color);
+    border: 2px solid var(--brutal-muted);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--brutal-primary);
+}
+
+/* ============================================
+   MOBILE — Reduce weight on small screens
+   ============================================ */
+
+@media (max-width: 640px) {
+    .VPFeature {
+        border-width: 2px !important;
+        box-shadow: 2px 2px 0 0 #000000 !important;
+    }
+
+    .VPFeature:hover {
+        box-shadow: 3px 3px 0 0 #000000 !important;
+    }
+
+    .VPButton.brand,
+    .VPButton.alt {
+        border-width: 2px !important;
+        box-shadow: 2px 2px 0 0 #000000 !important;
+    }
+
+    .VPButton.brand:hover,
+    .VPButton.alt:hover {
+        box-shadow: 3px 3px 0 0 #000000 !important;
+    }
+
+    .vp-doc div[class*='language-'] {
+        border-width: 2px !important;
+        box-shadow: 2px 2px 0 0 var(--brutal-border-color) !important;
+    }
+
+    .vp-doc div[class*='language-']:hover {
+        box-shadow: 3px 3px 0 0 var(--brutal-border-color) !important;
+    }
+
+    .vp-doc table {
+        box-shadow: 2px 2px 0 0 var(--brutal-border-color);
+    }
+
+    .VPSidebar {
+        border-right-width: 3px !important;
+    }
+
+    .VPNav {
+        border-bottom-width: 3px !important;
+    }
+}
+
+/* BrutxUI focus ring override - ensure buttons show outline focus ring even on click in the docs */
+.vp-doc button:focus,
+.vp-doc button:focus-visible {
+    outline: 3px solid var(--brutal-ring, #000000) !important;
+    outline-offset: 2px !important;
+}
+
diff --git a/apps/docs/app/docs/ai/page.tsx b/apps/docs/app/docs/ai/page.tsx
deleted file mode 100644
index 925f634..0000000
--- a/apps/docs/app/docs/ai/page.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { Badge } from '@/components/ui';
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-    title: 'Using BrutxUI with AI - Brutx',
-    description:
-        'A comprehensive guide for generating BrutxUI components, blocks, and pages using AI coding assistants like Cursor, Copilot, ChatGPT, or Claude.',
-    keywords: [
-        'brutx ai usage',
-        'cursor rules neubrutalism',
-        'copilot neubrutalist styles',
-        'prompting for brutalist react components',
-        'ai web application development',
-    ],
-    openGraph: {
-        title: 'Using BrutxUI with AI - Brutx',
-        description: 'A comprehensive guide for generating BrutxUI components, blocks, and pages using AI coding assistants.',
-        url: 'https://brutxui.site/docs/ai',
-    },
-    alternates: {
-        canonical: 'https://brutxui.site/docs/ai',
-    },
-};
-
-export default function AIDocsPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="accent" className="mb-4">
-                    AI Integration
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Using BrutxUI with AI</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    BrutxUI is designed to be highly AI-ready. By providing precise design tokens,
-                    clear structures, and clean registry metadata, AI coding agents (such as Cursor, GitHub Copilot, Claude, and GPT-4o)
-                    can generate flawless, fully compatible components, custom blocks, and landing pages on the first try.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> Neo-Brutalist Styling Rules for AI</h2>
-                <p>
-                    When instructing an AI to style components inside a BrutxUI project, emphasize the following visual design variables:
-                </p>
-                <ul className="list-disc pl-5 space-y-2 text-sm">
-                    <li><strong>Thick Outlines:</strong> Always use <code>border-3</code> (3px thickness) and the global border color (e.g. <code>border-black dark:border-white</code> or <code>border-brutal</code>).</li>
-                    <li><strong>Rigid Offsets:</strong> Hard offset dropshadows are applied with <code>shadow-brutal</code> (which resolves to <code>4px 4px 0px 0px #000</code>). Avoid blur effects (do NOT use standard <code>shadow-md</code> or <code>shadow-lg</code>).</li>
-                    <li><strong>Flat Angles:</strong> Set <code>rounded-none</code> or use a strict global theme token like <code>rounded-brutal</code> (defaulting to <code>0px</code> corners).</li>
-                    <li><strong>Tangible Press Effects:</strong> Standard active elements translate downwards and to the right on click to mimic physical buttons: <code>active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-all</code>.</li>
-                    <li><strong>High-Contrast Focus:</strong> Maintain high visibility. Focus rings should use heavy outlines: <code>focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2</code>.</li>
-                </ul>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> Blueprint for a BrutxUI Component</h2>
-                <p>
-                    Every BrutxUI component follows a standard React + Tailwind CSS + Radix UI primitive composability structure.
-                    Share this blueprint template with your AI assistant:
-                </p>
-
-                <div className="border-3 border-black dark:border-white p-5 bg-white dark:bg-gray-900 space-y-3">
-                    <h3 className="font-black text-lg">Good Component Blueprint</h3>
-                    <pre className="bg-black text-[#6EE7B7] p-4 text-xs font-mono overflow-x-auto">
-{`import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils'; // Class merge utility
-
-const cardVariants = cva(
-  'border-3 border-black dark:border-white transition-all bg-white dark:bg-gray-950',
-  {
-    variants: {
-      variant: {
-        default: 'shadow-brutal dark:shadow-brutal-white',
-        flat: '',
-        hoverable: 'hover:-translate-y-0.5 hover:-translate-x-0.5 hover:shadow-brutal-lg dark:hover:shadow-brutal-lg-white'
-      },
-      padding: {
-        none: '',
-        default: 'p-6',
-        large: 'p-8'
-      }
-    },
-    defaultVariants: {
-      variant: 'default',
-      padding: 'default'
-    }
-  }
-);
-
-export interface CardProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof cardVariants> {}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant, padding, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(cardVariants({ variant, padding }), className)}
-      {...props}
-    />
-  )
-);
-Card.displayName = 'Card';`}
-                    </pre>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> Anti-Patterns to Avoid (What NOT to do)</h2>
-                <p>
-                    Ensure your AI assistant does not emit these anti-patterns, which violate our core brutalist visual language:
-                </p>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FF6B6B] text-white">
-                            <tr>
-                                <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black">Bad Pattern</th>
-                                <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black">Why it Fails</th>
-                                <th className="px-4 py-2 text-left border-b-3 border-black font-black">Correct BrutxUI Replacement</th>
-                            </tr>
-                        </thead>
-                        <tbody className="bg-white dark:bg-gray-900">
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono text-red-500 font-bold">rounded-xl shadow-lg</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white">Uses rounded edges and blurred shadows which break the rigid comic-book/flat style.</td>
-                                <td className="px-4 py-2 font-mono text-green-500 font-bold">rounded-none shadow-brutal</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono text-red-500 font-bold">hover:bg-blue-600</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white">Uses standard, generic gradients or colors without clear outlines.</td>
-                                <td className="px-4 py-2 font-mono text-green-500 font-bold">hover:bg-[#4ECDC4] hover:text-black</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono text-red-500 font-bold">border-slate-200</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white">Fades out lines, yielding low visual contrast.</td>
-                                <td className="px-4 py-2 font-mono text-green-500 font-bold">border-3 border-black dark:border-white</td>
-                            </tr>
-                            <tr>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono text-red-500 font-bold">active:opacity-85</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white">Fades opacity without translation shifts (feels generic).</td>
-                                <td className="px-4 py-2 font-mono text-green-500 font-bold">active:translate-x-[2px] active:translate-y-[2px]</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Custom Blocks & Registry Metadata</h2>
-                <p>
-                    When creating custom landing page blocks (e.g. <code>saas-pricing</code> or <code>dashboard-stats</code>),
-                    they must be registered in the component directory manifest so they can be parsed by our registry compiler and validator scripts.
-                </p>
-
-                <div className="border-3 border-black dark:border-white p-5 bg-white dark:bg-gray-900 space-y-3">
-                    <h4 className="font-black text-base">Step 1: Save Component File</h4>
-                    <p className="text-xs text-gray-600 dark:text-gray-400">Save your component under: <code>packages/ui/src/components/ui/my-block.tsx</code></p>
-
-                    <h4 className="font-black text-base mt-4">Step 2: Declare in Registry Manifest</h4>
-                    <p className="text-xs text-gray-600 dark:text-gray-400">Add the block configuration to <code>packages/registry/registry.json</code>:</p>
-                    <pre className="bg-black text-[#FFE66D] p-3 text-xs font-mono overflow-x-auto">
-{`{
-  "name": "my-block",
-  "type": "registry:ui",
-  "dependencies": ["lucide-react"],
-  "registryDependencies": ["button", "card"],
-  "files": [
-    {
-      "path": "ui/my-block.tsx",
-      "type": "registry:ui"
-    }
-  ]
-}`}
-                    </pre>
-
-                    <h4 className="font-black text-base mt-4">Step 3: Compile and Validate Registry</h4>
-                    <p className="text-xs text-gray-600 dark:text-gray-400">Run workspace compilers to compile and validate the JSON schema:</p>
-                    <pre className="bg-black text-white p-3 text-xs font-mono overflow-x-auto">
-{`pnpm --filter brutx-registry build
-pnpm --filter brutx-registry validate`}
-                    </pre>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> Prompt Templates for AI Coding</h2>
-                <p>
-                    Copy-paste these context prompts directly into your AI assistant chat box to guarantee beautiful, compliant outputs.
-                </p>
-
-                <div className="space-y-4">
-                    <div className="border-3 border-black dark:border-white p-5 bg-white dark:bg-gray-900 space-y-2">
-                        <h4 className="font-bold text-sm text-[#FF6B6B] uppercase tracking-wider">Prompt A: Creating atomic components</h4>
-                        <p className="text-xs text-gray-600 dark:text-gray-400">Use this to generate custom atomic elements like alerts or custom form triggers:</p>
-                        <blockquote className="border-l-4 border-[#FF6B6B] pl-4 text-xs italic bg-gray-100 dark:bg-gray-800 p-3">
-                            "Build a custom [Component Name] React component for my project using Tailwind CSS and Radix UI.
-                            The component must adhere strictly to BrutxUI's Neo-Brutalist design tokens.
-                            Ensure it uses class-variance-authority (cva) for variants, accepts a custom className merged via our local 'cn' utility from '@/lib/utils',
-                            features a 3px border outline ('border-3 border-black'), unrounded corners ('rounded-none'), a solid offset shadow ('shadow-brutal'),
-                            and translates downwards and rightward when active ('active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_#000]').
-                            Support full keyboard navigation focus outlines and make it completely responsive and dark mode safe."
-                        </blockquote>
-                    </div>
-
-                    <div className="border-3 border-black dark:border-white p-5 bg-white dark:bg-gray-900 space-y-2">
-                        <h4 className="font-bold text-sm text-[#4ECDC4] uppercase tracking-wider">Prompt B: Creating SaaS Blocks</h4>
-                        <p className="text-xs text-gray-600 dark:text-gray-400">Use this to generate pricing sections, call-to-actions, or dashboard widgets:</p>
-                        <blockquote className="border-l-4 border-[#4ECDC4] pl-4 text-xs italic bg-gray-100 dark:bg-gray-800 p-3">
-                            "Generate a high-conversion, responsive [Pricing section / Hero block / Feature list] using React and Tailwind CSS.
-                            Compose the layout entirely using BrutxUI components: Card, Button, Badge, Switch, and Checkbox.
-                            The visual style must feel bold and premium with thick borders, sharp edges, and high contrast accents.
-                            Include subtle hover scale transitions, neon yellow/teal/coral badge pill highlights, structured grids,
-                            and interactive states. Write standard, accessible, and clean Tailwind markup without external dependencies."
-                        </blockquote>
-                    </div>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/blocks/auth-card/page.tsx b/apps/docs/app/docs/blocks/auth-card/page.tsx
deleted file mode 100644
index 286f19c..0000000
--- a/apps/docs/app/docs/blocks/auth-card/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-
-import { AuthCard } from '@/components/ui/auth-card';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Badge } from '@/components/ui';
-
-export default function AuthCardDocPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Block
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Auth Card</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A secure, professional-grade sign-in block featuring email forms, password forgot hooks, and Google/GitHub identity OAuth integration.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Interactive Preview</h2>
-                <ComponentPreview>
-                    <div className="w-full flex items-center justify-center p-8 bg-gray-100 dark:bg-gray-900 border-3 border-black">
-                        <AuthCard
-                            onLoginSubmit={(e) => {
-                                e.preventDefault();
-                                alert('Credentials submitted successfully!');
-                            }}
-                        />
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Registry Installation</h2>
-                <InstallationTabs componentName="auth-card" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage Examples</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { AuthCard } from "@/components/ui/auth-card"
-
-export default function Page() {
-  return (
-    <AuthCard
-      title="Secure Admin Gateway"
-      onLoginSubmit={(e) => {
-      }}
-    />
-  )
-}`}
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/blocks/brutalist-hero/page.tsx b/apps/docs/app/docs/blocks/brutalist-hero/page.tsx
deleted file mode 100644
index fefbe9e..0000000
--- a/apps/docs/app/docs/blocks/brutalist-hero/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-
-import { BrutalistHero } from '@/components/ui/brutalist-hero';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Badge } from '@/components/ui';
-
-export default function BrutalistHeroDocPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Block
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Brutalist Hero</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A beautiful, responsive, and responsive hero landing page block structured with flat cards, active double offsets, and neon headings.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Interactive Preview</h2>
-                <ComponentPreview align="stretch">
-                    <div className="w-full border-3 border-black p-1 bg-gray-50 dark:bg-gray-900">
-                        <BrutalistHero
-                            primaryCtaText="Launch App Console"
-                            secondaryCtaText="Read Documentation"
-                        />
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Registry Installation</h2>
-                <InstallationTabs componentName="brutalist-hero" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage Examples</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { BrutalistHero } from "@/components/ui/brutalist-hero"
-
-export default function Page() {
-  return (
-    <BrutalistHero
-      title="Create the Future of Decentralized SaaS"
-      subtitle="The ultimate high-performance workspace for modern indie hackers."
-      primaryCtaText="Get Started"
-      secondaryCtaText="View Demo"
-      onPrimaryCtaClick={() => console.log('Primary click')}
-    />
-  )
-}`}
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/blocks/dashboard-shell/page.tsx b/apps/docs/app/docs/blocks/dashboard-shell/page.tsx
deleted file mode 100644
index a00aa47..0000000
--- a/apps/docs/app/docs/blocks/dashboard-shell/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-
-import { DashboardShell } from '@/components/ui/dashboard-shell';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Badge } from '@/components/ui';
-
-export default function DashboardShellDocPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Block
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Dashboard Shell</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A robust responsive layout structure complete with nav sidebar, responsive header menu controls, stats, and database transaction tables.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Interactive Preview</h2>
-                <ComponentPreview align="stretch">
-                    <div className="w-full bg-gray-100 dark:bg-gray-900 p-1 border-3 border-black">
-                        <DashboardShell
-                            onSignOutClick={() => alert('Signing out of console...')}
-                        />
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Registry Installation</h2>
-                <InstallationTabs componentName="dashboard-shell" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage Examples</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { DashboardShell } from "@/components/ui/dashboard-shell"
-
-export default function Page() {
-  return (
-    <DashboardShell
-      userEmail="admin@my-company.com"
-      onSignOutClick={() => logout()}
-    />
-  )
-}`}
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/blocks/empty-state/page.tsx b/apps/docs/app/docs/blocks/empty-state/page.tsx
deleted file mode 100644
index 38cd650..0000000
--- a/apps/docs/app/docs/blocks/empty-state/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-
-import { EmptyState } from '@/components/ui/empty-state';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Badge } from '@/components/ui';
-
-export default function EmptyStateDocPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Block
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Empty State</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A centralized, clean illustration container to instruct users when workspaces or folders do not contain items.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Interactive Preview</h2>
-                <ComponentPreview>
-                    <div className="w-full flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-900 border-3 border-black">
-                        <EmptyState
-                            onActionClick={() => alert('Launching resource creation modal...')}
-                        />
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Registry Installation</h2>
-                <InstallationTabs componentName="empty-state" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage Examples</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { EmptyState } from "@/components/ui/empty-state"
-import { Database } from "lucide-react"
-
-export default function Page() {
-  return (
-    <EmptyState
-      title="No active databases"
-      description="You haven't provisioned a database cluster yet. Create your first SQL node instantly."
-      actionText="Create Database"
-      icon={<Database className="h-8 w-8 stroke-[2.5]" />}
-      onActionClick={() => createNode()}
-    />
-  )
-}`}
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/blocks/page.tsx b/apps/docs/app/docs/blocks/page.tsx
deleted file mode 100644
index 72171c4..0000000
--- a/apps/docs/app/docs/blocks/page.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { Badge } from '@/components/ui';
-
-const blocks = [
-    {
-        name: 'Brutalist Hero',
-        slug: 'brutalist-hero',
-        description: 'Bold above-the-fold hero layout featuring full-width headline grids, offset CTAs, and a visual card shell.',
-    },
-    {
-        name: 'Pricing Section',
-        slug: 'pricing-section',
-        description: 'Interactive three-tier grid pricing comparison. Highlighting standard/popular plans and deep checks listings.',
-    },
-    {
-        name: 'Auth Card',
-        slug: 'auth-card',
-        description: 'Comprehensive sign-in template supporting dynamic inputs, label icons, OAuth federated integrations, and passwords.',
-    },
-    {
-        name: 'Dashboard Shell',
-        slug: 'dashboard-shell',
-        description: 'Complete operational admin panel combining navigation sidebars, statistics blocks, headers, and transactional database tables.',
-    },
-    {
-        name: 'Empty State',
-        slug: 'empty-state',
-        description: 'Centralized empty workspace alert blocks guiding users to create resources or trigger positive workflows.',
-    },
-    {
-        name: 'Waitlist Page',
-        slug: 'waitlist-page',
-        description: 'Full conversion-oriented subscription page containing user email submissions, social proof ratings, and status badges.',
-    },
-];
-
-export default function BlocksIndexPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Templates
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Blocks & Templates</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    Pre-designed, fully responsive neo-brutalist sections and pages built on top of atomic BrutxUI components. Ready to copy-paste.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <div className="grid gap-6 sm:grid-cols-2">
-                {blocks.map((block) => (
-                    <Link
-                        key={block.slug}
-                        href={`/docs/blocks/${block.slug}`}
-                        className="group flex flex-col justify-between p-6 border-3 border-black dark:border-white bg-white dark:bg-gray-800 shadow-brutal hover:-translate-x-1 hover:-translate-y-1 hover:shadow-brutal-lg transition-all duration-150"
-                    >
-                        <div className="space-y-2">
-                            <h3 className="text-xl font-black group-hover:text-brutal-primary transition-colors">
-                                {block.name}
-                            </h3>
-                            <p className="text-sm font-medium text-gray-600 dark:text-gray-300">
-                                {block.description}
-                            </p>
-                        </div>
-                        <div className="pt-4 text-xs font-black uppercase tracking-wider text-brutal-primary group-hover:underline">
-                            View details & code →
-                        </div>
-                    </Link>
-                ))}
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/blocks/pricing-section/page.tsx b/apps/docs/app/docs/blocks/pricing-section/page.tsx
deleted file mode 100644
index 1132d8f..0000000
--- a/apps/docs/app/docs/blocks/pricing-section/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-
-import { PricingSection } from '@/components/ui/pricing-section';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Badge } from '@/components/ui';
-
-export default function PricingSectionDocPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Block
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Pricing Section</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A gorgeous three-tier comparison pricing block with highlighted packages, feature check tags, and hover offsets.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Interactive Preview</h2>
-                <ComponentPreview align="stretch">
-                    <div className="w-full border-3 border-black p-1 bg-gray-50 dark:bg-gray-900">
-                        <PricingSection />
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Registry Installation</h2>
-                <InstallationTabs componentName="pricing-section" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage Examples</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { PricingSection } from "@/components/ui/pricing-section"
-
-export default function Page() {
-  return (
-    <PricingSection
-      title="Scale Your Workstation"
-      subtitle="Unlock premium tools for high-intensity SaaS creation."
-    />
-  )
-}`}
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/blocks/waitlist-page/page.tsx b/apps/docs/app/docs/blocks/waitlist-page/page.tsx
deleted file mode 100644
index f191f56..0000000
--- a/apps/docs/app/docs/blocks/waitlist-page/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client';
-
-import { WaitlistPage } from '@/components/ui/waitlist-page';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Badge } from '@/components/ui';
-
-export default function WaitlistPageDocPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Block
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Waitlist Page</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A gorgeous full conversion registration template with input fields, CTA action mappings, and developer metrics social proofs.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Interactive Preview</h2>
-                <ComponentPreview align="stretch">
-                    <div className="w-full border-3 border-black p-1 bg-gray-50 dark:bg-gray-900">
-                        <WaitlistPage
-                            onWaitlistSubmit={(e, email) => {
-                                e.preventDefault();
-                                alert(`Joined priority list with email: ${email}`);
-                            }}
-                        />
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Registry Installation</h2>
-                <InstallationTabs componentName="waitlist-page" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage Examples</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { WaitlistPage } from "@/components/ui/waitlist-page"
-
-export default function Page() {
-  return (
-    <WaitlistPage
-      title="Secure early builder access to Brutx"
-      onWaitlistSubmit={(e, email) => {
-      }}
-    />
-  )
-}`}
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/cli/page.tsx b/apps/docs/app/docs/cli/page.tsx
deleted file mode 100644
index b5a197a..0000000
--- a/apps/docs/app/docs/cli/page.tsx
+++ /dev/null
@@ -1,378 +0,0 @@
-'use client';
-
-import { CodeBlock } from '@/components/code-block';
-import { Badge } from '@/components/ui';
-import { ChevronLeft, ChevronRight, Terminal } from 'lucide-react';
-import Link from 'next/link';
-import { useState } from 'react';
-
-const packageManagers = ['pnpm', 'npm', 'yarn', 'bun'] as const;
-type PackageManager = (typeof packageManagers)[number];
-
-const commands: Record<PackageManager, { init: string; add: string; addAll: string }> = {
-    pnpm: {
-        init: 'pnpm dlx brutx@latest init',
-        add: 'pnpm dlx brutx@latest add [component]',
-        addAll: 'pnpm dlx brutx@latest add --all',
-    },
-    npm: {
-        init: 'npx brutx@latest init',
-        add: 'npx brutx@latest add [component]',
-        addAll: 'npx brutx@latest add --all',
-    },
-    yarn: {
-        init: 'yarn dlx brutx@latest init',
-        add: 'yarn dlx brutx@latest add [component]',
-        addAll: 'yarn dlx brutx@latest add --all',
-    },
-    bun: {
-        init: 'bunx brutx@latest init',
-        add: 'bunx brutx@latest add [component]',
-        addAll: 'bunx brutx@latest add --all',
-    },
-};
-
-function PackageManagerTabs({ command }: { command: 'init' | 'add' | 'addAll' }) {
-    const [pm, setPm] = useState<PackageManager>('pnpm');
-
-    return (
-        <div className="mb-6">
-            <div className="inline-flex border-3 border-black dark:border-white border-b-0 bg-white dark:bg-gray-900">
-                {packageManagers.map((manager, index) => (
-                    <button
-                        key={manager}
-                        onClick={() => setPm(manager)}
-                        className={`px-4 py-2 font-bold text-sm transition-colors ${
-                            index < packageManagers.length - 1
-                                ? 'border-r-3 border-black dark:border-white'
-                                : ''
-                        } ${
-                            pm === manager
-                                ? 'bg-[#FFE66D] text-black'
-                                : 'bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800'
-                        }`}
-                    >
-                        {manager}
-                    </button>
-                ))}
-            </div>
-            <CodeBlock>{commands[pm][command]}</CodeBlock>
-        </div>
-    );
-}
-
-export default function CLIPage() {
-    return (
-        <div className="max-w-4xl">
-            <Badge variant="primary" className="mb-4">
-                CLI
-            </Badge>
-            <h1 className="text-4xl font-black mb-4">CLI Reference</h1>
-            <p className="text-lg text-gray-600 dark:text-gray-400 mb-6">
-                Use the CLI to add components directly to your project source code.
-            </p>
-
-            <div className="mb-10 p-5 border-3 border-black dark:border-white bg-gray-50 dark:bg-gray-900">
-                <div className="flex items-start gap-4">
-                    <div className="flex-shrink-0 w-10 h-10 bg-[#FF6B6B] border-3 border-black flex items-center justify-center">
-                        <Terminal className="w-5 h-5 stroke-[2.5]" />
-                    </div>
-                    <div>
-                        <h3 className="font-black mb-2">CLI vs NPM Package</h3>
-                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
-                            The CLI (
-                            <code className="bg-gray-200 dark:bg-gray-800 px-1 font-mono">
-                                brutx
-                            </code>
-                            ) copies component source files into your project for full
-                            customization. The NPM package (
-                            <code className="bg-gray-200 dark:bg-gray-800 px-1 font-mono">
-                                brutx-ui
-                            </code>
-                            ) is a direct dependency import.
-                        </p>
-                        <Link
-                            href="/docs"
-                            className="text-sm font-bold hover:text-[#FF6B6B] transition-colors"
-                        >
-                            Compare both approaches →
-                        </Link>
-                    </div>
-                </div>
-            </div>
-
-            <h2 id="init" className="text-2xl font-black mb-4 mt-10">
-                init
-            </h2>
-            <p className="mb-4">
-                Use the{' '}
-                <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 font-mono text-sm">
-                    init
-                </code>{' '}
-                command to initialize configuration and dependencies for a new project.
-            </p>
-            <p className="mb-4 text-gray-600 dark:text-gray-400">
-                The init command installs dependencies, adds the{' '}
-                <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 font-mono text-sm">cn</code>{' '}
-                util, configures CSS variables, and creates the component directory structure.
-            </p>
-
-            <PackageManagerTabs command="init" />
-
-            <h3 className="text-xl font-black mb-3">Options</h3>
-            <CodeBlock className="mb-6">
-                {`Usage: brutx init [options]
-
-initialize your project and install dependencies
-
-Options:
-  -y, --yes          skip confirmation prompt. (default: false)
-  -d, --defaults     use default configuration. (default: false)
-  -c, --cwd <cwd>    the working directory. defaults to the current directory.
-  -f, --force        force overwrite of existing configuration. (default: false)
-  -s, --silent       mute output. (default: false)
-  -h, --help         display help for command`}
-            </CodeBlock>
-
-            <h2 id="add" className="text-2xl font-black mb-4 mt-10">
-                add
-            </h2>
-            <p className="mb-4">
-                Use the{' '}
-                <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 font-mono text-sm">
-                    add
-                </code>{' '}
-                command to add components and dependencies to your project.
-            </p>
-
-            <PackageManagerTabs command="add" />
-
-            <h3 className="text-xl font-black mb-3">Options</h3>
-            <CodeBlock className="mb-6">
-                {`Usage: brutx add [options] [components...]
-
-add a component to your project
-
-Arguments:
-  components         the components to add (space-separated)
-
-Options:
-  -y, --yes          skip confirmation prompt. (default: false)
-  -o, --overwrite    overwrite existing files. (default: false)
-  -a, --all          add all available components. (default: false)
-  -p, --path <path>  the path to add the component to.
-  -c, --cwd <cwd>    the working directory. defaults to the current directory.
-  -s, --silent       mute output. (default: false)
-  -h, --help         display help for command`}
-            </CodeBlock>
-
-            <h2 id="examples" className="text-2xl font-black mb-4 mt-10">
-                Examples
-            </h2>
-
-            <h3 className="text-lg font-black mb-3">Add a single component</h3>
-            <CodeBlock className="mb-6">npx brutx@latest add button</CodeBlock>
-
-            <h3 className="text-lg font-black mb-3">Add multiple components</h3>
-            <CodeBlock className="mb-6">npx brutx@latest add button card dialog</CodeBlock>
-
-            <h3 className="text-lg font-black mb-3">Add all components</h3>
-            <PackageManagerTabs command="addAll" />
-
-            <h3 className="text-lg font-black mb-3">Add with custom path</h3>
-            <CodeBlock className="mb-6">
-                npx brutx@latest add button -p src/components/custom
-            </CodeBlock>
-
-            <h3 className="text-lg font-black mb-3">Overwrite existing files</h3>
-            <CodeBlock className="mb-6">npx brutx@latest add button --overwrite</CodeBlock>
-
-            <h2 id="components" className="text-2xl font-black mb-4 mt-10">
-                Available Components
-            </h2>
-            <p className="mb-6 text-gray-600 dark:text-gray-400">
-                The following components are available for installation:
-            </p>
-
-            <div className="border-3 border-black dark:border-white bg-white dark:bg-gray-900 p-4 mb-8">
-                <div className="flex flex-wrap gap-2">
-                    {[
-                        'alert',
-                        'avatar',
-                        'badge',
-                        'button',
-                        'calendar',
-                        'card',
-                        'checkbox',
-                        'combobox',
-                        'command',
-                        'dialog',
-                        'dropdown-menu',
-                        'input',
-                        'label',
-                        'pagination',
-                        'popover',
-                        'scroll-area',
-                        'select',
-                        'separator',
-                        'skeleton',
-                        'spinner',
-                        'submit-button',
-                        'switch',
-                        'table',
-                        'tabs',
-                        'textarea',
-                        'toast',
-                        'tooltip',
-                    ].map((component) => (
-                        <code
-                            key={component}
-                            className="px-3 py-1.5 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white font-mono text-sm hover:bg-[#FFE66D] hover:text-black transition-colors cursor-default"
-                        >
-                            {component}
-                        </code>
-                    ))}
-                </div>
-                <div className="mt-4 pt-4 border-t-2 border-gray-200 dark:border-gray-700">
-                    <p className="text-sm text-gray-500 dark:text-gray-400">
-                        <span className="font-bold text-black dark:text-white">27</span> components
-                        available •{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 text-xs">
-                            --all
-                        </code>{' '}
-                        to install everything
-                    </p>
-                </div>
-            </div>
-
-            <h2 id="configuration" className="text-2xl font-black mb-4 mt-10">
-                components.json
-            </h2>
-            <p className="mb-4 text-gray-600 dark:text-gray-400">
-                The CLI creates a{' '}
-                <code className="bg-gray-100 dark:bg-gray-800 px-2 py-1 font-mono text-sm">
-                    components.json
-                </code>{' '}
-                file in your project root to store configuration.
-            </p>
-
-            <CodeBlock className="mb-6">
-                {`{
-  "$schema": "https://brutxui.site/schema.json",
-  "style": "brutalism",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/app/globals.css"
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}`}
-            </CodeBlock>
-
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#4ECDC4]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Option
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                tailwind.config
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Path to your tailwind.config.js file
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                tailwind.css
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Path to your global CSS file
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                aliases.components
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Import alias for components directory
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">aliases.utils</td>
-                            <td className="p-3">Import alias for utils file</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h2 id="troubleshooting" className="text-2xl font-black mb-4 mt-10">
-                Troubleshooting
-            </h2>
-
-            <div className="space-y-4">
-                <div className="p-4 border-3 border-black dark:border-white bg-[#FF6B6B]/10">
-                    <h4 className="font-black mb-2">Command not found</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        If you get a "command not found" error, make sure you're using{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">npx</code>,{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">pnpm dlx</code>,{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">yarn dlx</code>, or{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">bunx</code> to run the
-                        CLI.
-                    </p>
-                </div>
-
-                <div className="p-4 border-3 border-black dark:border-white bg-[#FFE66D]/10">
-                    <h4 className="font-black mb-2">Components not found after installation</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Make sure your{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">tsconfig.json</code> has
-                        the correct path aliases configured to match your{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">components.json</code>{' '}
-                        settings.
-                    </p>
-                </div>
-
-                <div className="p-4 border-3 border-black dark:border-white bg-[#4ECDC4]/10">
-                    <h4 className="font-black mb-2">Tailwind styles not applying</h4>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Ensure your{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">
-                            tailwind.config.js
-                        </code>{' '}
-                        includes the path to your components in the{' '}
-                        <code className="bg-gray-100 dark:bg-gray-800 px-1">content</code> array.
-                    </p>
-                </div>
-            </div>
-
-            <div className="flex justify-between items-center pt-8 border-t-3 border-black dark:border-white mt-12">
-                <Link
-                    href="/docs/installation/manual"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    <ChevronLeft className="w-4 h-4 stroke-[3]" />
-                    Manual Installation
-                </Link>
-                <Link
-                    href="/docs/components"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    Components
-                    <ChevronRight className="w-4 h-4 stroke-[3]" />
-                </Link>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/alert-dialog/page.tsx b/apps/docs/app/docs/components/alert-dialog/page.tsx
deleted file mode 100644
index 0d7a901..0000000
--- a/apps/docs/app/docs/components/alert-dialog/page.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-'use client';
-
-import {
-    AlertDialog,
-    AlertDialogTrigger,
-    AlertDialogContent,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogAction,
-    AlertDialogCancel,
-    Button,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function AlertDialogPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Alert Dialog</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A modal confirmation dialog styled with thick brutalist borders and flat shadows. Built on Radix UI Alert Dialog primitives, forcing the user to take action before closing.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                            <Button variant="primary">Open Alert Dialog</Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                            <AlertDialogHeader>
-                                <AlertDialogTitle>Delete server deployment?</AlertDialogTitle>
-                                <AlertDialogDescription>
-                                    This action cannot be undone. This will permanently shut down your Kubernetes cluster and purge all system configurations.
-                                </AlertDialogDescription>
-                            </AlertDialogHeader>
-                            <AlertDialogFooter>
-                                <AlertDialogCancel asChild>
-                                    <Button variant="outline">Cancel</Button>
-                                </AlertDialogCancel>
-                                <AlertDialogAction asChild variant="danger">
-                                    <Button variant="danger">Yes, Delete Server</Button>
-                                </AlertDialogAction>
-                            </AlertDialogFooter>
-                        </AlertDialogContent>
-                    </AlertDialog>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="alert-dialog" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from "@/components/ui/alert-dialog"
-import { Button } from "@/components/ui/button"
-
-<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button>Open</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-      <AlertDialogDescription>
-        This action cannot be undone.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel asChild>
-        <Button variant="outline">Cancel</Button>
-      </AlertDialogCancel>
-      <AlertDialogAction asChild variant="danger">
-        <Button variant="danger">Confirm Action</Button>
-      </AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Examples</h2>
-
-                <h3>Destructive Variant</h3>
-                <p>Destructive buttons utilize neon red/pink highlights to clearly draw focus to critical actions.</p>
-                <ComponentPreview>
-                    <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                            <Button variant="danger">Remove Account</Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent>
-                            <AlertDialogHeader>
-                                <AlertDialogTitle>Permanently delete your account?</AlertDialogTitle>
-                                <AlertDialogDescription>
-                                    All your analytical assets, custom tokens, and dashboard preferences will be deleted immediately.
-                                </AlertDialogDescription>
-                            </AlertDialogHeader>
-                            <AlertDialogFooter>
-                                <AlertDialogCancel asChild>
-                                    <Button variant="outline">Discard</Button>
-                                </AlertDialogCancel>
-                                <AlertDialogAction asChild variant="danger">
-                                    <Button variant="danger">Confirm Purge</Button>
-                                </AlertDialogAction>
-                            </AlertDialogFooter>
-                        </AlertDialogContent>
-                    </AlertDialog>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Component</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialog</td>
-                                <td className="p-3">Manages open/closed states.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialogTrigger</td>
-                                <td className="p-3">Opens the modal panel.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialogContent</td>
-                                <td className="p-3">Modal content container overlaying web content.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialogHeader</td>
-                                <td className="p-3">Header layout box.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialogFooter</td>
-                                <td className="p-3">Footer button grid container.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialogTitle</td>
-                                <td className="p-3">Header title text element.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialogDescription</td>
-                                <td className="p-3">Detailed warning context.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">AlertDialogAction</td>
-                                <td className="p-3">Primary confirm action (accepts standard button variants like <code>destructive</code>).</td>
-                            </tr>
-                            <tr>
-                                <td className="p-3 font-mono text-sm">AlertDialogCancel</td>
-                                <td className="p-3">Cancel/close button action.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <ul className="list-disc pl-5 space-y-1 text-sm">
-                    <li>Uses standard WAI-ARIA <code>role="alertdialog"</code> layout rules.</li>
-                    <li>Focus is locked within the dialog context, and keyboard navigation keys are fully captured.</li>
-                    <li>Supports screen reader announcements and returns focus to triggers on cancel actions.</li>
-                </ul>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/alert/layout.tsx b/apps/docs/app/docs/components/alert/layout.tsx
deleted file mode 100644
index 941f18c..0000000
--- a/apps/docs/app/docs/components/alert/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.alert);
-
-export default function AlertLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/alert/page.tsx b/apps/docs/app/docs/components/alert/page.tsx
deleted file mode 100644
index c6f67d8..0000000
--- a/apps/docs/app/docs/components/alert/page.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client';
-
-import { Alert, AlertTitle, AlertDescription, Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
-
-export default function AlertPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Alert</h1>
-
-            <p>Displays a callout for user attention with Neo-Brutalism styling.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview className="flex-col items-stretch gap-4">
-                <Alert>
-                    <AlertTitle>Heads up!</AlertTitle>
-                    <AlertDescription>This is a default alert message.</AlertDescription>
-                </Alert>
-            </ComponentPreview>
-
-            <h2>Variants</h2>
-            <div className="space-y-4 my-4">
-                <Alert variant="default">
-                    <Info className="h-5 w-5" />
-                    <AlertTitle>Default</AlertTitle>
-                    <AlertDescription>A default informational alert.</AlertDescription>
-                </Alert>
-
-                <Alert variant="success">
-                    <CheckCircle className="h-5 w-5" />
-                    <AlertTitle>Success!</AlertTitle>
-                    <AlertDescription>Your action was completed successfully.</AlertDescription>
-                </Alert>
-
-                <Alert variant="warning">
-                    <AlertTriangle className="h-5 w-5" />
-                    <AlertTitle>Warning</AlertTitle>
-                    <AlertDescription>Please review before proceeding.</AlertDescription>
-                </Alert>
-
-                <Alert variant="danger">
-                    <AlertCircle className="h-5 w-5" />
-                    <AlertTitle>Error</AlertTitle>
-                    <AlertDescription>Something went wrong. Please try again.</AlertDescription>
-                </Alert>
-
-                <Alert variant="info">
-                    <Info className="h-5 w-5" />
-                    <AlertTitle>Info</AlertTitle>
-                    <AlertDescription>Here&apos;s some helpful information.</AlertDescription>
-                </Alert>
-            </div>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="alert" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  Alert,
-  AlertTitle,
-  AlertDescription,
-} from "@/components/ui/alert"
-import { CheckCircle } from "lucide-react"
-
-<Alert variant="success">
-  <CheckCircle className="h-5 w-5" />
-  <AlertTitle>Success!</AlertTitle>
-  <AlertDescription>
-    Your action was completed.
-  </AlertDescription>
-</Alert>`}
-            </pre>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/avatar/layout.tsx b/apps/docs/app/docs/components/avatar/layout.tsx
deleted file mode 100644
index 0983867..0000000
--- a/apps/docs/app/docs/components/avatar/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.avatar);
-
-export default function AvatarLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/avatar/page.tsx b/apps/docs/app/docs/components/avatar/page.tsx
deleted file mode 100644
index f9cb19d..0000000
--- a/apps/docs/app/docs/components/avatar/page.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-'use client';
-
-import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function AvatarPage() {
-    return (
-        <div className="space-y-8">
-            <div>
-                <h1 className="text-4xl font-black mb-4">Avatar</h1>
-                <p className="text-lg text-gray-600 dark:text-gray-300">
-                    An image element with a fallback for representing the user.
-                </p>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Installation</h2>
-                <InstallationTabs componentName="avatar" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Basic Usage</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="flex items-center gap-4">
-                        <Avatar>
-                            <AvatarImage
-                                src="https://avatars.githubusercontent.com/u/124599?v=4"
-                                alt="User"
-                            />
-                            <AvatarFallback>CN</AvatarFallback>
-                        </Avatar>
-                        <Avatar>
-                            <AvatarImage src="https://i.pravatar.cc/150?img=32" alt="User" />
-                            <AvatarFallback>JD</AvatarFallback>
-                        </Avatar>
-                        <Avatar>
-                            <AvatarImage src="https://i.pravatar.cc/150?img=47" alt="User" />
-                            <AvatarFallback>AB</AvatarFallback>
-                        </Avatar>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-} from "@/components/ui/avatar"
-
-<Avatar>
-  <AvatarImage src="https://i.pravatar.cc/150?img=32" alt="User" />
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Sizes</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="flex items-center gap-4">
-                        <Avatar size="sm">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=1" alt="User" />
-                            <AvatarFallback>SM</AvatarFallback>
-                        </Avatar>
-                        <Avatar size="default">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=2" alt="User" />
-                            <AvatarFallback>MD</AvatarFallback>
-                        </Avatar>
-                        <Avatar size="lg">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=3" alt="User" />
-                            <AvatarFallback>LG</AvatarFallback>
-                        </Avatar>
-                        <Avatar size="xl">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=4" alt="User" />
-                            <AvatarFallback>XL</AvatarFallback>
-                        </Avatar>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Avatar size="sm"><AvatarImage src="..." /><AvatarFallback>SM</AvatarFallback></Avatar>
-<Avatar size="default"><AvatarImage src="..." /><AvatarFallback>MD</AvatarFallback></Avatar>
-<Avatar size="lg"><AvatarImage src="..." /><AvatarFallback>LG</AvatarFallback></Avatar>
-<Avatar size="xl"><AvatarImage src="..." /><AvatarFallback>XL</AvatarFallback></Avatar>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Shape</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="flex items-center gap-4">
-                        <Avatar shape="square" size="lg">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=11" alt="User" />
-                            <AvatarFallback>SQ</AvatarFallback>
-                        </Avatar>
-                        <Avatar shape="rounded" size="lg">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=12" alt="User" />
-                            <AvatarFallback>RD</AvatarFallback>
-                        </Avatar>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Avatar shape="square"><AvatarImage src="..." /><AvatarFallback>SQ</AvatarFallback></Avatar>
-<Avatar shape="rounded"><AvatarImage src="..." /><AvatarFallback>RD</AvatarFallback></Avatar>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Fallback</h2>
-                <p className="text-gray-600 dark:text-gray-300">
-                    When no image is provided or the image fails to load, the fallback content is
-                    displayed. You can customize the fallback with colors and initials.
-                </p>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="flex items-center gap-4">
-                        <Avatar size="lg">
-                            <AvatarFallback className="bg-[#FF6B6B] text-white font-bold">
-                                JD
-                            </AvatarFallback>
-                        </Avatar>
-                        <Avatar size="lg">
-                            <AvatarFallback className="bg-[#4ECDC4] text-white font-bold">
-                                AB
-                            </AvatarFallback>
-                        </Avatar>
-                        <Avatar size="lg">
-                            <AvatarFallback className="bg-[#FFE66D] text-black font-bold">
-                                XY
-                            </AvatarFallback>
-                        </Avatar>
-                        <Avatar size="lg">
-                            <AvatarFallback className="bg-purple-500 text-white font-bold">
-                                UI
-                            </AvatarFallback>
-                        </Avatar>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`{/* Only fallback - no image */}
-<Avatar>
-  <AvatarFallback className="bg-[#FF6B6B] text-white font-bold">
-    JD
-  </AvatarFallback>
-</Avatar>
-
-<Avatar>
-  <AvatarImage src="/user-avatar.jpg" alt="User" />
-  <AvatarFallback className="bg-[#4ECDC4] text-white">AB</AvatarFallback>
-</Avatar>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Avatar Group</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="flex -space-x-3">
-                        <Avatar className="border-4 border-white dark:border-gray-900">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=20" alt="User A" />
-                            <AvatarFallback className="bg-[#FF6B6B] text-white">A</AvatarFallback>
-                        </Avatar>
-                        <Avatar className="border-4 border-white dark:border-gray-900">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=21" alt="User B" />
-                            <AvatarFallback className="bg-[#4ECDC4] text-white">B</AvatarFallback>
-                        </Avatar>
-                        <Avatar className="border-4 border-white dark:border-gray-900">
-                            <AvatarImage src="https://i.pravatar.cc/150?img=22" alt="User C" />
-                            <AvatarFallback className="bg-[#FFE66D] text-black">C</AvatarFallback>
-                        </Avatar>
-                        <Avatar className="border-4 border-white dark:border-gray-900">
-                            <AvatarFallback className="bg-gray-500 text-white">+3</AvatarFallback>
-                        </Avatar>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<div className="flex -space-x-3">
-  <Avatar className="border-4 border-white">
-    <AvatarImage src="https://i.pravatar.cc/150?img=20" alt="User" />
-    <AvatarFallback className="bg-[#FF6B6B] text-white">A</AvatarFallback>
-  </Avatar>
-  <Avatar className="border-4 border-white">
-    <AvatarImage src="https://i.pravatar.cc/150?img=21" alt="User" />
-    <AvatarFallback className="bg-[#4ECDC4] text-white">B</AvatarFallback>
-  </Avatar>
-</div>`}</code>
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/badge/layout.tsx b/apps/docs/app/docs/components/badge/layout.tsx
deleted file mode 100644
index c9463f3..0000000
--- a/apps/docs/app/docs/components/badge/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.badge);
-
-export default function BadgeLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/badge/page.tsx b/apps/docs/app/docs/components/badge/page.tsx
deleted file mode 100644
index aa2a5fa..0000000
--- a/apps/docs/app/docs/components/badge/page.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function BadgePage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Badge</h1>
-
-            <p>
-                Displays a badge or a component that looks like a badge with Neo-Brutalism styling.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="flex flex-wrap gap-4">
-                    <Badge variant="default">Default</Badge>
-                    <Badge variant="primary">Primary</Badge>
-                    <Badge variant="secondary">Secondary</Badge>
-                    <Badge variant="accent">Accent</Badge>
-                    <Badge variant="success">Success</Badge>
-                    <Badge variant="danger">Danger</Badge>
-                    <Badge variant="outline">Outline</Badge>
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="badge" />
-
-            <h2>Sizes</h2>
-            <ComponentPreview>
-                <div className="flex flex-wrap items-center gap-4">
-                    <Badge size="sm">Small</Badge>
-                    <Badge size="default">Default</Badge>
-                    <Badge size="lg">Large</Badge>
-                </div>
-            </ComponentPreview>
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto">
-                {`import { Badge } from "@/components/ui/badge"
-
-<Badge variant="primary" size="default">
-  Badge Text
-</Badge>`}
-            </pre>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/button/layout.tsx b/apps/docs/app/docs/components/button/layout.tsx
deleted file mode 100644
index de79b2e..0000000
--- a/apps/docs/app/docs/components/button/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.button);
-
-export default function ButtonLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/button/page.tsx b/apps/docs/app/docs/components/button/page.tsx
deleted file mode 100644
index 211d063..0000000
--- a/apps/docs/app/docs/components/button/page.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { Button, Card, CardContent, Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Mail, ArrowRight, Loader2 } from 'lucide-react';
-
-export default function ButtonPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Button</h1>
-
-            <p>
-                A Neo-Brutalism styled button component with multiple variants and sizes. Built on
-                top of Radix UI Slot for polymorphism.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="flex flex-wrap gap-4">
-                    <Button variant="default">Default</Button>
-                    <Button variant="primary">Primary</Button>
-                    <Button variant="secondary">Secondary</Button>
-                    <Button variant="accent">Accent</Button>
-                    <Button variant="danger">Danger</Button>
-                    <Button variant="success">Success</Button>
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="button" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto">
-                {`import { Button } from "@/components/ui/button"
-
-<Button variant="primary">Click me</Button>`}
-            </pre>
-
-            <h2>Variants</h2>
-            <Card className="my-4 dark:bg-gray-900 dark:border-white">
-                <CardContent className="pt-6 space-y-4">
-                    <div>
-                        <p className="font-bold mb-2">Default</p>
-                        <Button variant="default">Default Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Primary</p>
-                        <Button variant="primary">Primary Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Secondary</p>
-                        <Button variant="secondary">Secondary Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Accent</p>
-                        <Button variant="accent">Accent Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Danger</p>
-                        <Button variant="danger">Danger Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Success</p>
-                        <Button variant="success">Success Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Outline</p>
-                        <Button variant="outline">Outline Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Ghost</p>
-                        <Button variant="ghost">Ghost Button</Button>
-                    </div>
-                    <div>
-                        <p className="font-bold mb-2">Link</p>
-                        <Button variant="link">Link Button</Button>
-                    </div>
-                </CardContent>
-            </Card>
-
-            <h2>Sizes</h2>
-            <ComponentPreview>
-                <div className="flex flex-wrap items-center gap-4">
-                    <Button size="sm">Small</Button>
-                    <Button size="default">Default</Button>
-                    <Button size="lg">Large</Button>
-                    <Button size="xl">Extra Large</Button>
-                    <Button size="icon">
-                        <Mail className="h-5 w-5" />
-                    </Button>
-                </div>
-            </ComponentPreview>
-
-            <h2>With Icons</h2>
-            <ComponentPreview>
-                <div className="flex flex-wrap gap-4">
-                    <Button variant="primary">
-                        <Mail className="h-5 w-5" />
-                        Send Email
-                    </Button>
-                    <Button variant="secondary">
-                        Continue
-                        <ArrowRight className="h-5 w-5" />
-                    </Button>
-                </div>
-            </ComponentPreview>
-
-            <h2>Disabled State</h2>
-            <ComponentPreview>
-                <div className="flex gap-4">
-                    <Button disabled>Disabled</Button>
-                    <Button variant="primary" disabled>
-                        <Loader2 className="h-5 w-5 animate-spin" />
-                        Loading...
-                    </Button>
-                </div>
-            </ComponentPreview>
-
-            <h2>Props</h2>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Prop
-                            </th>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Type
-                            </th>
-                            <th className="px-4 py-2 text-left border-b-3 border-black font-black text-black">
-                                Default
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-gray-900">
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                variant
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                "default" | "primary" | "secondary" | "accent" | "danger" |
-                                "success" | "outline" | "ghost" | "link"
-                            </td>
-                            <td className="px-4 py-2 text-sm">"default"</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                size
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                "sm" | "default" | "lg" | "xl" | "icon"
-                            </td>
-                            <td className="px-4 py-2 text-sm">"default"</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                asChild
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                boolean
-                            </td>
-                            <td className="px-4 py-2 text-sm">false</td>
-                        </tr>
-                        <tr>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                disabled
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                boolean
-                            </td>
-                            <td className="px-4 py-2 text-sm">false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/calendar/page.tsx b/apps/docs/app/docs/components/calendar/page.tsx
deleted file mode 100644
index da9baee..0000000
--- a/apps/docs/app/docs/components/calendar/page.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Calendar } from 'brutx-ui/calendar';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function CalendarPage() {
-    const [date, setDate] = React.useState<Date | undefined>(new Date());
-    const [dateRange, setDateRange] = React.useState<{
-        from: Date | undefined;
-        to: Date | undefined;
-    }>({
-        from: undefined,
-        to: undefined,
-    });
-
-    return (
-        <div className="space-y-12">
-            <div className="space-y-4">
-                <h1 className="text-4xl font-black">Calendar</h1>
-                <p className="text-lg text-gray-600 dark:text-gray-400">
-                    A date picker component with Neo-Brutalism styling. Built on top of
-                    react-day-picker.
-                </p>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="calendar" dependencies={['react-day-picker']} />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Basic Calendar</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    A simple calendar for selecting a single date.
-                </p>
-                <div className="flex justify-center p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <Calendar mode="single" selected={date} onSelect={setDate} />
-                </div>
-                {date && (
-                    <p className="text-center font-bold">Selected: {date.toLocaleDateString()}</p>
-                )}
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Range Selection</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Select a range of dates with visual feedback.
-                </p>
-                <div className="flex justify-center p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <Calendar
-                        mode="range"
-                        selected={dateRange}
-                        onSelect={(range) =>
-                            setDateRange({
-                                from: range?.from,
-                                to: range?.to,
-                            })
-                        }
-                    />
-                </div>
-                {dateRange.from && dateRange.to && (
-                    <p className="text-center font-bold">
-                        Range: {dateRange.from.toLocaleDateString()} -{' '}
-                        {dateRange.to.toLocaleDateString()}
-                    </p>
-                )}
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">With Week Numbers</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Display week numbers alongside the calendar.
-                </p>
-                <div className="flex justify-center p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <Calendar mode="single" showWeekNumber />
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Disabled Dates</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Disable specific dates or date ranges.
-                </p>
-                <div className="flex justify-center p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <Calendar
-                        mode="single"
-                        disabled={[
-                            { dayOfWeek: [0, 6] },
-                            { before: new Date() },
-                        ]}
-                    />
-                </div>
-                <p className="text-center text-sm text-gray-500">
-                    Weekends and past dates are disabled
-                </p>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Props</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white">
-                        <thead className="bg-[#FFE66D] dark:bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Prop
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Type
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Default
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Description
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">mode</td>
-                                <td className="p-4 font-mono text-sm">
-                                    &quot;single&quot; | &quot;range&quot; | &quot;multiple&quot;
-                                </td>
-                                <td className="p-4 font-mono text-sm">&quot;single&quot;</td>
-                                <td className="p-4">Selection mode</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">selected</td>
-                                <td className="p-4 font-mono text-sm">Date | DateRange | Date[]</td>
-                                <td className="p-4 font-mono text-sm">-</td>
-                                <td className="p-4">Selected date(s)</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">onSelect</td>
-                                <td className="p-4 font-mono text-sm">function</td>
-                                <td className="p-4 font-mono text-sm">-</td>
-                                <td className="p-4">Callback when date is selected</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">numberOfMonths</td>
-                                <td className="p-4 font-mono text-sm">number</td>
-                                <td className="p-4 font-mono text-sm">1</td>
-                                <td className="p-4">Number of months to display</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">showWeekNumber</td>
-                                <td className="p-4 font-mono text-sm">boolean</td>
-                                <td className="p-4 font-mono text-sm">false</td>
-                                <td className="p-4">Show week numbers</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">showOutsideDays</td>
-                                <td className="p-4 font-mono text-sm">boolean</td>
-                                <td className="p-4 font-mono text-sm">true</td>
-                                <td className="p-4">Show days outside current month</td>
-                            </tr>
-                            <tr>
-                                <td className="p-4 font-mono text-sm">disabled</td>
-                                <td className="p-4 font-mono text-sm">Matcher | Matcher[]</td>
-                                <td className="p-4 font-mono text-sm">-</td>
-                                <td className="p-4">Dates to disable</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/card/layout.tsx b/apps/docs/app/docs/components/card/layout.tsx
deleted file mode 100644
index 87a8d0c..0000000
--- a/apps/docs/app/docs/components/card/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.card);
-
-export default function CardLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/card/page.tsx b/apps/docs/app/docs/components/card/page.tsx
deleted file mode 100644
index 9a0878c..0000000
--- a/apps/docs/app/docs/components/card/page.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-
-import {
-    Card,
-    CardHeader,
-    CardTitle,
-    CardDescription,
-    CardContent,
-    CardFooter,
-    Button,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function CardPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Card</h1>
-
-            <p>
-                A container component with Neo-Brutalism styling. Perfect for grouping related
-                content with bold borders and offset shadows.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview className="bg-gray-100 dark:bg-gray-800">
-                <Card className="w-full max-w-sm dark:bg-gray-900 dark:border-white">
-                    <CardHeader>
-                        <CardTitle>Card Title</CardTitle>
-                        <CardDescription>Card description goes here.</CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                        <p>This is the main content area of the card.</p>
-                    </CardContent>
-                    <CardFooter className="gap-2">
-                        <Button variant="primary" size="sm">
-                            Action
-                        </Button>
-                        <Button variant="outline" size="sm">
-                            Cancel
-                        </Button>
-                    </CardFooter>
-                </Card>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="card" />
-
-            <h2>Variants</h2>
-            <div className="grid gap-4 my-4">
-                <div>
-                    <p className="font-bold mb-2">Default</p>
-                    <Card variant="default" className="max-w-sm dark:bg-gray-900 dark:border-white">
-                        <CardContent className="pt-6">Default card with shadow</CardContent>
-                    </Card>
-                </div>
-                <div>
-                    <p className="font-bold mb-2">Elevated</p>
-                    <Card
-                        variant="elevated"
-                        className="max-w-sm dark:bg-gray-900 dark:border-white"
-                    >
-                        <CardContent className="pt-6">Elevated card with larger shadow</CardContent>
-                    </Card>
-                </div>
-                <div>
-                    <p className="font-bold mb-2">Flat</p>
-                    <Card variant="flat" className="max-w-sm dark:bg-gray-900 dark:border-white">
-                        <CardContent className="pt-6">Flat card without shadow</CardContent>
-                    </Card>
-                </div>
-                <div>
-                    <p className="font-bold mb-2">Interactive</p>
-                    <Card
-                        variant="interactive"
-                        className="max-w-sm cursor-pointer dark:bg-gray-900 dark:border-white"
-                    >
-                        <CardContent className="pt-6">Hover me! Interactive card</CardContent>
-                    </Card>
-                </div>
-                <div>
-                    <p className="font-bold mb-2">Primary</p>
-                    <Card variant="primary" className="max-w-sm dark:bg-gray-900 dark:border-white">
-                        <CardContent className="pt-6">Primary colored shadow</CardContent>
-                    </Card>
-                </div>
-                <div>
-                    <p className="font-bold mb-2">Secondary</p>
-                    <Card
-                        variant="secondary"
-                        className="max-w-sm dark:bg-gray-900 dark:border-white"
-                    >
-                        <CardContent className="pt-6">Secondary colored shadow</CardContent>
-                    </Card>
-                </div>
-            </div>
-
-            <h2>Padding Options</h2>
-            <div className="grid gap-4 my-4">
-                <Card padding="none" className="max-w-sm dark:bg-gray-900 dark:border-white">
-                    <CardContent>No padding</CardContent>
-                </Card>
-                <Card padding="sm" className="max-w-sm dark:bg-gray-900 dark:border-white">
-                    <CardContent>Small padding</CardContent>
-                </Card>
-                <Card padding="default" className="max-w-sm dark:bg-gray-900 dark:border-white">
-                    <CardContent>Default padding</CardContent>
-                </Card>
-                <Card padding="lg" className="max-w-sm dark:bg-gray-900 dark:border-white">
-                    <CardContent>Large padding</CardContent>
-                </Card>
-            </div>
-
-            <h2>Props</h2>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Prop
-                            </th>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Type
-                            </th>
-                            <th className="px-4 py-2 text-left border-b-3 border-black font-black text-black">
-                                Default
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-gray-900">
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                variant
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                "default" | "elevated" | "flat" | "interactive" | "primary" |
-                                "secondary"
-                            </td>
-                            <td className="px-4 py-2 text-sm">"default"</td>
-                        </tr>
-                        <tr>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                padding
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                "none" | "sm" | "default" | "lg"
-                            </td>
-                            <td className="px-4 py-2 text-sm">"default"</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/checkbox/layout.tsx b/apps/docs/app/docs/components/checkbox/layout.tsx
deleted file mode 100644
index 9d4ba20..0000000
--- a/apps/docs/app/docs/components/checkbox/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.checkbox);
-
-export default function CheckboxLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/checkbox/page.tsx b/apps/docs/app/docs/components/checkbox/page.tsx
deleted file mode 100644
index 546142b..0000000
--- a/apps/docs/app/docs/components/checkbox/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-
-import { Checkbox, Label, Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import * as React from 'react';
-
-export default function CheckboxPage() {
-    const [checked, setChecked] = React.useState(false);
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Checkbox</h1>
-
-            <p>A checkbox input control with Neo-Brutalism styling.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-3">
-                    <Checkbox
-                        id="terms"
-                        checked={checked}
-                        onCheckedChange={(value) => setChecked(value === true)}
-                    />
-                    <Label htmlFor="terms">Accept terms and conditions</Label>
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="checkbox" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import { Checkbox } from "@/components/ui/checkbox"
-import { Label } from "@/components/ui/label"
-
-const [checked, setChecked] = React.useState(false);
-
-<div className="flex items-center gap-3">
-  <Checkbox
-    id="terms"
-    checked={checked}
-    onCheckedChange={setChecked}
-  />
-  <Label htmlFor="terms">Accept terms</Label>
-</div>`}
-            </pre>
-
-            <h2>Disabled State</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-3">
-                    <Checkbox id="disabled" disabled />
-                    <Label htmlFor="disabled" className="opacity-50">
-                        Disabled Checkbox
-                    </Label>
-                </div>
-            </ComponentPreview>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/combobox/page.tsx b/apps/docs/app/docs/components/combobox/page.tsx
deleted file mode 100644
index 16ebddc..0000000
--- a/apps/docs/app/docs/components/combobox/page.tsx
+++ /dev/null
@@ -1,350 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Combobox, ComboboxMulti } from '@/components/ui';
-
-const frameworks = [
-    { value: 'next', label: 'Next.js' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-    { value: 'svelte', label: 'Svelte' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'astro', label: 'Astro' },
-    { value: 'nuxt', label: 'Nuxt' },
-    { value: 'remix', label: 'Remix' },
-];
-
-const languages = [
-    { value: 'typescript', label: 'TypeScript' },
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'python', label: 'Python' },
-    { value: 'rust', label: 'Rust' },
-    { value: 'go', label: 'Go' },
-    { value: 'java', label: 'Java', disabled: true },
-    { value: 'csharp', label: 'C#' },
-    { value: 'cpp', label: 'C++' },
-];
-
-const countries = [
-    { value: 'us', label: 'United States' },
-    { value: 'uk', label: 'United Kingdom' },
-    { value: 'ca', label: 'Canada' },
-    { value: 'au', label: 'Australia' },
-    { value: 'de', label: 'Germany' },
-    { value: 'fr', label: 'France' },
-    { value: 'jp', label: 'Japan' },
-    { value: 'vn', label: 'Vietnam' },
-];
-
-export default function ComboboxPage() {
-    const [framework, setFramework] = React.useState('');
-    const [language, setLanguage] = React.useState('');
-    const [country, setCountry] = React.useState('');
-    const [selectedLanguages, setSelectedLanguages] = React.useState<string[]>([]);
-    const [selectedFrameworks, setSelectedFrameworks] = React.useState<string[]>([]);
-
-    return (
-        <div className="space-y-12">
-            <div className="space-y-4">
-                <h1 className="text-4xl font-black">Combobox</h1>
-                <p className="text-lg text-gray-600 dark:text-gray-400">
-                    Autocomplete input and command palette with a list of suggestions. Built using a
-                    composition of Popover and Command components.
-                </p>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Basic Combobox</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    A simple combobox for selecting a framework.
-                </p>
-                <div className="flex flex-col items-center gap-4 p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <div className="w-full max-w-xs">
-                        <Combobox
-                            options={frameworks}
-                            value={framework}
-                            onValueChange={setFramework}
-                            placeholder="Select framework..."
-                            searchPlaceholder="Search frameworks..."
-                        />
-                    </div>
-                    {framework && (
-                        <p className="text-center font-bold">
-                            Selected: {frameworks.find((f) => f.value === framework)?.label}
-                        </p>
-                    )}
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">With Disabled Options</h2>
-                <p className="text-gray-600 dark:text-gray-400">Some options can be disabled.</p>
-                <div className="flex flex-col items-center gap-4 p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <div className="w-full max-w-xs">
-                        <Combobox
-                            options={languages}
-                            value={language}
-                            onValueChange={setLanguage}
-                            placeholder="Select language..."
-                            searchPlaceholder="Search languages..."
-                            emptyText="No language found."
-                        />
-                    </div>
-                    {language && (
-                        <p className="text-center font-bold">
-                            Selected: {languages.find((l) => l.value === language)?.label}
-                        </p>
-                    )}
-                    <p className="text-sm text-gray-500">Java is disabled</p>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">With Custom Labels</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Labels can include any custom text content.
-                </p>
-                <div className="flex flex-col items-center gap-4 p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <div className="w-full max-w-xs">
-                        <Combobox
-                            options={countries}
-                            value={country}
-                            onValueChange={setCountry}
-                            placeholder="Select country..."
-                            searchPlaceholder="Search countries..."
-                        />
-                    </div>
-                    {country && (
-                        <p className="text-center font-bold">
-                            Selected: {countries.find((c) => c.value === country)?.label}
-                        </p>
-                    )}
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Multi-Select Combobox</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Select multiple options from the list.
-                </p>
-                <div className="flex flex-col items-center gap-4 p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <div className="w-full max-w-xs">
-                        <ComboboxMulti
-                            options={languages}
-                            value={selectedLanguages}
-                            onValueChange={setSelectedLanguages}
-                            placeholder="Select languages..."
-                            searchPlaceholder="Search languages..."
-                        />
-                    </div>
-                    {selectedLanguages.length > 0 && (
-                        <p className="text-center font-bold">
-                            Selected:{' '}
-                            {selectedLanguages
-                                .map((v) => languages.find((l) => l.value === v)?.label)
-                                .join(', ')}
-                        </p>
-                    )}
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Multi-Select with Max Display</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Limit the number of displayed selections.
-                </p>
-                <div className="flex flex-col items-center gap-4 p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <div className="w-full max-w-xs">
-                        <ComboboxMulti
-                            options={frameworks}
-                            value={selectedFrameworks}
-                            onValueChange={setSelectedFrameworks}
-                            placeholder="Select frameworks..."
-                            searchPlaceholder="Search frameworks..."
-                            maxDisplay={2}
-                        />
-                    </div>
-                    {selectedFrameworks.length > 0 && (
-                        <p className="text-center font-bold">
-                            Selected:{' '}
-                            {selectedFrameworks
-                                .map((v) => frameworks.find((f) => f.value === v)?.label)
-                                .join(', ')}
-                        </p>
-                    )}
-                    <p className="text-sm text-gray-500">
-                        Shows &quot;X selected&quot; when more than 2 items are selected
-                    </p>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    The Combobox is built using a composition of the Popover and Command components.
-                </p>
-                <div className="bg-gray-900 text-gray-100 p-4 border-3 border-black dark:border-white font-mono text-sm overflow-x-auto">
-                    <pre>npx brutx@latest add combobox popover command</pre>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Props</h2>
-                <h3 className="text-xl font-black mt-6">Combobox</h3>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white">
-                        <thead className="bg-[#FFE66D] dark:bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Prop
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Type
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Default
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Description
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">options</td>
-                                <td className="p-4 font-mono text-sm">ComboboxOption[]</td>
-                                <td className="p-4 font-mono text-sm">required</td>
-                                <td className="p-4">Array of options to display</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">value</td>
-                                <td className="p-4 font-mono text-sm">string</td>
-                                <td className="p-4 font-mono text-sm">-</td>
-                                <td className="p-4">Selected value</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">onValueChange</td>
-                                <td className="p-4 font-mono text-sm">
-                                    (value: string) =&gt; void
-                                </td>
-                                <td className="p-4 font-mono text-sm">-</td>
-                                <td className="p-4">Callback when value changes</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">placeholder</td>
-                                <td className="p-4 font-mono text-sm">string</td>
-                                <td className="p-4 font-mono text-sm">
-                                    &quot;Select option...&quot;
-                                </td>
-                                <td className="p-4">Placeholder text</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">searchPlaceholder</td>
-                                <td className="p-4 font-mono text-sm">string</td>
-                                <td className="p-4 font-mono text-sm">&quot;Search...&quot;</td>
-                                <td className="p-4">Search input placeholder</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">emptyText</td>
-                                <td className="p-4 font-mono text-sm">string</td>
-                                <td className="p-4 font-mono text-sm">
-                                    &quot;No results found.&quot;
-                                </td>
-                                <td className="p-4">Text when no results</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">disabled</td>
-                                <td className="p-4 font-mono text-sm">boolean</td>
-                                <td className="p-4 font-mono text-sm">false</td>
-                                <td className="p-4">Disable the combobox</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3 className="text-xl font-black mt-6">ComboboxMulti</h3>
-                <p className="text-gray-600 dark:text-gray-400">Same props as Combobox, plus:</p>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white">
-                        <thead className="bg-[#FFE66D] dark:bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Prop
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Type
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Default
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Description
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">value</td>
-                                <td className="p-4 font-mono text-sm">string[]</td>
-                                <td className="p-4 font-mono text-sm">[]</td>
-                                <td className="p-4">Array of selected values</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">onValueChange</td>
-                                <td className="p-4 font-mono text-sm">
-                                    (value: string[]) =&gt; void
-                                </td>
-                                <td className="p-4 font-mono text-sm">-</td>
-                                <td className="p-4">Callback when values change</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">maxDisplay</td>
-                                <td className="p-4 font-mono text-sm">number</td>
-                                <td className="p-4 font-mono text-sm">3</td>
-                                <td className="p-4">
-                                    Max items to show before &quot;X selected&quot;
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3 className="text-xl font-black mt-6">ComboboxOption</h3>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white">
-                        <thead className="bg-[#FFE66D] dark:bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Property
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Type
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Description
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">value</td>
-                                <td className="p-4 font-mono text-sm">string</td>
-                                <td className="p-4">Unique value for the option</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">label</td>
-                                <td className="p-4 font-mono text-sm">string</td>
-                                <td className="p-4">Display label</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">disabled</td>
-                                <td className="p-4 font-mono text-sm">boolean</td>
-                                <td className="p-4">Whether the option is disabled</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/command/page.tsx b/apps/docs/app/docs/components/command/page.tsx
deleted file mode 100644
index eb2e546..0000000
--- a/apps/docs/app/docs/components/command/page.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-    CommandShortcut,
-    CommandDialog,
-} from '@/components/ui';
-import {
-    Calculator,
-    Calendar,
-    CreditCard,
-    Settings,
-    Smile,
-    User,
-    Mail,
-    MessageSquare,
-    PlusCircle,
-    Github,
-    Keyboard,
-    Moon,
-    Sun,
-} from 'lucide-react';
-
-export default function CommandPage() {
-    const [open, setOpen] = React.useState(false);
-
-    React.useEffect(() => {
-        const down = (e: KeyboardEvent) => {
-            if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-                e.preventDefault();
-                setOpen((open) => !open);
-            }
-        };
-
-        document.addEventListener('keydown', down);
-        return () => document.removeEventListener('keydown', down);
-    }, []);
-
-    return (
-        <div className="space-y-12">
-            <div className="space-y-4">
-                <h1 className="text-4xl font-black">Command</h1>
-                <p className="text-lg text-gray-600 dark:text-gray-400">
-                    Fast, composable, unstyled command menu for React. Built on top of cmdk.
-                </p>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Basic Command</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    A simple command menu with search and items.
-                </p>
-                <div className="flex justify-center p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <Command className="border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] max-w-md w-full">
-                        <CommandInput placeholder="Type a command or search..." />
-                        <CommandList>
-                            <CommandEmpty>No results found.</CommandEmpty>
-                            <CommandGroup heading="Suggestions">
-                                <CommandItem>
-                                    <Calendar className="mr-2 h-4 w-4" />
-                                    <span>Calendar</span>
-                                </CommandItem>
-                                <CommandItem>
-                                    <Smile className="mr-2 h-4 w-4" />
-                                    <span>Search Emoji</span>
-                                </CommandItem>
-                                <CommandItem>
-                                    <Calculator className="mr-2 h-4 w-4" />
-                                    <span>Calculator</span>
-                                </CommandItem>
-                            </CommandGroup>
-                            <CommandSeparator />
-                            <CommandGroup heading="Settings">
-                                <CommandItem>
-                                    <User className="mr-2 h-4 w-4" />
-                                    <span>Profile</span>
-                                    <CommandShortcut>P</CommandShortcut>
-                                </CommandItem>
-                                <CommandItem>
-                                    <CreditCard className="mr-2 h-4 w-4" />
-                                    <span>Billing</span>
-                                    <CommandShortcut>B</CommandShortcut>
-                                </CommandItem>
-                                <CommandItem>
-                                    <Settings className="mr-2 h-4 w-4" />
-                                    <span>Settings</span>
-                                    <CommandShortcut>S</CommandShortcut>
-                                </CommandItem>
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Command Dialog</h2>
-                <p className="text-gray-600 dark:text-gray-400">
-                    Press{' '}
-                    <kbd className="px-2 py-1 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white font-mono text-sm">
-                        K
-                    </kbd>{' '}
-                    or click the button to open the command palette.
-                </p>
-                <div className="flex justify-center p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <button
-                        onClick={() => setOpen(true)}
-                        className="px-4 py-2 bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] font-bold hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_#000000] transition-all"
-                    >
-                        Open Command Palette (K)
-                    </button>
-                </div>
-                <CommandDialog open={open} onOpenChange={setOpen}>
-                    <CommandInput placeholder="Type a command or search..." />
-                    <CommandList>
-                        <CommandEmpty>No results found.</CommandEmpty>
-                        <CommandGroup heading="Actions">
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <PlusCircle className="mr-2 h-4 w-4" />
-                                <span>Create New...</span>
-                            </CommandItem>
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <Mail className="mr-2 h-4 w-4" />
-                                <span>Send Email</span>
-                            </CommandItem>
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <MessageSquare className="mr-2 h-4 w-4" />
-                                <span>New Message</span>
-                            </CommandItem>
-                        </CommandGroup>
-                        <CommandSeparator />
-                        <CommandGroup heading="Navigation">
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <User className="mr-2 h-4 w-4" />
-                                <span>Profile</span>
-                                <CommandShortcut>P</CommandShortcut>
-                            </CommandItem>
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <Settings className="mr-2 h-4 w-4" />
-                                <span>Settings</span>
-                                <CommandShortcut>,</CommandShortcut>
-                            </CommandItem>
-                        </CommandGroup>
-                        <CommandSeparator />
-                        <CommandGroup heading="Theme">
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <Sun className="mr-2 h-4 w-4" />
-                                <span>Light Mode</span>
-                            </CommandItem>
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <Moon className="mr-2 h-4 w-4" />
-                                <span>Dark Mode</span>
-                            </CommandItem>
-                        </CommandGroup>
-                        <CommandSeparator />
-                        <CommandGroup heading="Links">
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <Github className="mr-2 h-4 w-4" />
-                                <span>GitHub</span>
-                            </CommandItem>
-                            <CommandItem onSelect={() => setOpen(false)}>
-                                <Keyboard className="mr-2 h-4 w-4" />
-                                <span>Keyboard Shortcuts</span>
-                                <CommandShortcut>K</CommandShortcut>
-                            </CommandItem>
-                        </CommandGroup>
-                    </CommandList>
-                </CommandDialog>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">With Disabled Items</h2>
-                <p className="text-gray-600 dark:text-gray-400">Some items can be disabled.</p>
-                <div className="flex justify-center p-8 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white">
-                    <Command className="border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] max-w-md w-full">
-                        <CommandInput placeholder="Search..." />
-                        <CommandList>
-                            <CommandEmpty>No results found.</CommandEmpty>
-                            <CommandGroup heading="Features">
-                                <CommandItem>
-                                    <span>Available Feature</span>
-                                </CommandItem>
-                                <CommandItem disabled>
-                                    <span>Premium Feature (Disabled)</span>
-                                </CommandItem>
-                                <CommandItem>
-                                    <span>Another Feature</span>
-                                </CommandItem>
-                                <CommandItem disabled>
-                                    <span>Coming Soon (Disabled)</span>
-                                </CommandItem>
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <div className="bg-gray-900 text-gray-100 p-4 border-3 border-black dark:border-white font-mono text-sm overflow-x-auto">
-                    <pre>npx brutx@latest add command</pre>
-                </div>
-                <p className="text-gray-600 dark:text-gray-400">
-                    The Command component requires the{' '}
-                    <code className="bg-gray-100 dark:bg-gray-800 px-1">cmdk</code> package:
-                </p>
-                <div className="bg-gray-900 text-gray-100 p-4 border-3 border-black dark:border-white font-mono text-sm overflow-x-auto">
-                    <pre>npm install cmdk</pre>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Components</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white">
-                        <thead className="bg-[#FFE66D] dark:bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Component
-                                </th>
-                                <th className="text-left p-4 font-black border-b-3 border-black text-black">
-                                    Description
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">Command</td>
-                                <td className="p-4">The root command container</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandDialog</td>
-                                <td className="p-4">Command in a modal dialog</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandInput</td>
-                                <td className="p-4">The search input field</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandList</td>
-                                <td className="p-4">Container for command items</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandEmpty</td>
-                                <td className="p-4">Shown when no results found</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandGroup</td>
-                                <td className="p-4">Group of related items with heading</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandItem</td>
-                                <td className="p-4">Individual selectable item</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandSeparator</td>
-                                <td className="p-4">Visual separator between groups</td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-4 font-mono text-sm">CommandShortcut</td>
-                                <td className="p-4">Keyboard shortcut display</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/dashboard-stats/layout.tsx b/apps/docs/app/docs/components/dashboard-stats/layout.tsx
deleted file mode 100644
index f9724ce..0000000
--- a/apps/docs/app/docs/components/dashboard-stats/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO['dashboard-stats']);
-
-export default function DashboardStatsLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/dashboard-stats/page.tsx b/apps/docs/app/docs/components/dashboard-stats/page.tsx
deleted file mode 100644
index 53c31b7..0000000
--- a/apps/docs/app/docs/components/dashboard-stats/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-
-import { DashboardStats, Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function DashboardStatsPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Block Component
-            </Badge>
-            <h1>Dashboard Stats</h1>
-
-            <p>Premium dashboard stat metrics, trends indicators, and visual target/progress limits with a heavy neo-brutalist theme.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview align="stretch">
-                <DashboardStats />
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="dashboard-stats" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import { DashboardStats } from "@/components/ui/dashboard-stats"
-import { TrendingUp, Award, Activity } from "lucide-react"
-
-<DashboardStats />
-
-const myStats = [
-  {
-    title: "Page Performance",
-    value: "99/100",
-    description: "Lighthouse core web vitals",
-    change: "+4.5%",
-    trend: "up" as const,
-    icon: TrendingUp,
-    accentColor: "#FFE66D",
-    progress: 99
-  },
-  {
-    title: "Server Health",
-    value: "99.98%",
-    description: "Average weekly uptime",
-    change: "+0.02%",
-    trend: "up" as const,
-    icon: Activity,
-    accentColor: "#4ECDC4",
-    progress: 100
-  }
-];
-
-<DashboardStats
-  stats={myStats}
-  title="Real-Time Health Status"
-  subtitle="Crucial indicators representing the real-time wellness of backend workloads."
-/>`}
-            </pre>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/dialog/layout.tsx b/apps/docs/app/docs/components/dialog/layout.tsx
deleted file mode 100644
index c80a602..0000000
--- a/apps/docs/app/docs/components/dialog/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.dialog);
-
-export default function DialogLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/dialog/page.tsx b/apps/docs/app/docs/components/dialog/page.tsx
deleted file mode 100644
index e51106c..0000000
--- a/apps/docs/app/docs/components/dialog/page.tsx
+++ /dev/null
@@ -1,462 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-    Dialog,
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogDescription,
-    DialogFooter,
-    DialogClose,
-    DialogOverlay,
-    DialogPortal,
-    Button,
-    Badge,
-    Input,
-    Label,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function DialogPage() {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Dialog</h1>
-
-            <p>
-                A modal dialog with Neo-Brutalism styling. Built on Radix UI Dialog primitive with
-                full accessibility support.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button variant="primary">Open Dialog</Button>
-                    </DialogTrigger>
-                    <DialogContent>
-                        <DialogHeader>
-                            <DialogTitle>Are you sure?</DialogTitle>
-                            <DialogDescription>
-                                This action cannot be undone. This will permanently delete your
-                                account and remove your data from our servers.
-                            </DialogDescription>
-                        </DialogHeader>
-                        <DialogFooter>
-                            <Button variant="outline">Cancel</Button>
-                            <Button variant="danger">Delete Account</Button>
-                        </DialogFooter>
-                    </DialogContent>
-                </Dialog>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="dialog" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-  DialogClose,
-  DialogPortal,
-  DialogOverlay,
-} from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Open Dialog</Button>
-  </DialogTrigger>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle>Dialog Title</DialogTitle>
-      <DialogDescription>
-        Dialog description text.
-      </DialogDescription>
-    </DialogHeader>
-    <div>
-    </div>
-    <DialogFooter>
-      <Button variant="outline">Cancel</Button>
-      <Button variant="primary">Confirm</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>`}
-            </pre>
-
-            <h2>Examples</h2>
-
-            <h3>Form Dialog</h3>
-            <p>Dialog with form inputs for editing data.</p>
-            <ComponentPreview>
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button>Edit Profile</Button>
-                    </DialogTrigger>
-                    <DialogContent>
-                        <DialogHeader>
-                            <DialogTitle>Edit Profile</DialogTitle>
-                            <DialogDescription>
-                                Make changes to your profile here.
-                            </DialogDescription>
-                        </DialogHeader>
-                        <div className="space-y-4 py-4">
-                            <div>
-                                <Label htmlFor="name">Name</Label>
-                                <Input id="name" placeholder="Your name" />
-                            </div>
-                            <div>
-                                <Label htmlFor="email">Email</Label>
-                                <Input id="email" type="email" placeholder="your@email.com" />
-                            </div>
-                        </div>
-                        <DialogFooter>
-                            <Button variant="outline">Cancel</Button>
-                            <Button variant="primary">Save Changes</Button>
-                        </DialogFooter>
-                    </DialogContent>
-                </Dialog>
-            </ComponentPreview>
-
-            <h3>Without Close Button</h3>
-            <p>
-                Use <code>showCloseButton=&#123;false&#125;</code> to hide the default close button.
-            </p>
-            <ComponentPreview>
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button variant="secondary">No Close Button</Button>
-                    </DialogTrigger>
-                    <DialogContent showCloseButton={false}>
-                        <DialogHeader>
-                            <DialogTitle>Custom Dialog</DialogTitle>
-                            <DialogDescription>
-                                This dialog has no default close button. Use the buttons below.
-                            </DialogDescription>
-                        </DialogHeader>
-                        <DialogFooter>
-                            <DialogClose asChild>
-                                <Button variant="outline">Close</Button>
-                            </DialogClose>
-                            <DialogClose asChild>
-                                <Button variant="primary">Done</Button>
-                            </DialogClose>
-                        </DialogFooter>
-                    </DialogContent>
-                </Dialog>
-            </ComponentPreview>
-
-            <h3>Controlled Dialog</h3>
-            <p>
-                Control the dialog state programmatically with <code>open</code> and{' '}
-                <code>onOpenChange</code>.
-            </p>
-            <ComponentPreview>
-                <div className="flex gap-2">
-                    <Dialog open={open} onOpenChange={setOpen}>
-                        <DialogTrigger asChild>
-                            <Button variant="accent">Controlled Dialog</Button>
-                        </DialogTrigger>
-                        <DialogContent>
-                            <DialogHeader>
-                                <DialogTitle>Controlled State</DialogTitle>
-                                <DialogDescription>
-                                    Open state: {open ? 'true' : 'false'}
-                                </DialogDescription>
-                            </DialogHeader>
-                            <DialogFooter>
-                                <Button variant="outline" onClick={() => setOpen(false)}>
-                                    Close Programmatically
-                                </Button>
-                            </DialogFooter>
-                        </DialogContent>
-                    </Dialog>
-                    <Button variant="outline" onClick={() => setOpen(true)}>
-                        Open from Outside
-                    </Button>
-                </div>
-            </ComponentPreview>
-
-            <h3>Custom Close Button</h3>
-            <p>
-                Use <code>DialogClose</code> to create custom close buttons anywhere in the dialog.
-            </p>
-            <ComponentPreview>
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button variant="danger">Delete Item</Button>
-                    </DialogTrigger>
-                    <DialogContent showCloseButton={false}>
-                        <DialogHeader>
-                            <DialogTitle>Delete Item</DialogTitle>
-                            <DialogDescription>
-                                Are you sure you want to delete this item? This action cannot be
-                                undone.
-                            </DialogDescription>
-                        </DialogHeader>
-                        <div className="py-4">
-                            <div className="p-4 bg-red-50 dark:bg-red-950 border-3 border-red-500">
-                                <p className="font-bold text-red-600 dark:text-red-400">
-                                    Warning: This will permanently delete the item.
-                                </p>
-                            </div>
-                        </div>
-                        <DialogFooter>
-                            <DialogClose asChild>
-                                <Button variant="outline">Cancel</Button>
-                            </DialogClose>
-                            <DialogClose asChild>
-                                <Button variant="danger">Yes, Delete</Button>
-                            </DialogClose>
-                        </DialogFooter>
-                    </DialogContent>
-                </Dialog>
-            </ComponentPreview>
-
-            <h2>API Reference</h2>
-
-            <h3>Dialog</h3>
-            <p>The root component that manages dialog state.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">open</td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                boolean
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Controlled open state of the dialog
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                onOpenChange
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (open: boolean) =&gt; void
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Callback when open state changes
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                defaultOpen
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                boolean
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                false
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Initial open state (uncontrolled)
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">modal</td>
-                            <td className="p-3 font-mono text-sm">boolean</td>
-                            <td className="p-3 font-mono text-sm">true</td>
-                            <td className="p-3">Whether to block interaction outside the dialog</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>DialogContent</h3>
-            <p>The container for dialog content with animations and overlay.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                showCloseButton
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                boolean
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">true</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Show the default close button in top-right corner
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                className
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Additional CSS classes for the content container
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">onEscapeKeyDown</td>
-                            <td className="p-3 font-mono text-sm">(event) =&gt; void</td>
-                            <td className="p-3 font-mono text-sm">-</td>
-                            <td className="p-3">Handler called when Escape key is pressed</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>All Exports</h3>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#4ECDC4]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Component
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                Dialog
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Root component managing state
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogTrigger
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Button that opens the dialog
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogContent
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Main content container with overlay
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogHeader
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Header section with bottom border
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogFooter
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Footer section with top border
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogTitle
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Accessible title element
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogDescription
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Accessible description element
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogClose
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Primitive for custom close buttons
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DialogPortal
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Portals content to document body
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">DialogOverlay</td>
-                            <td className="p-3">Background overlay component</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h2>Accessibility</h2>
-            <ul>
-                <li>Focus is trapped within the dialog when open</li>
-                <li>
-                    <kbd>Escape</kbd> key closes the dialog
-                </li>
-                <li>Clicking outside closes the dialog (when modal)</li>
-                <li>Screen reader announcements for dialog content</li>
-                <li>Returns focus to trigger element on close</li>
-                <li>
-                    Uses <code>role="dialog"</code> and <code>aria-modal</code>
-                </li>
-            </ul>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/dropdown-menu/layout.tsx b/apps/docs/app/docs/components/dropdown-menu/layout.tsx
deleted file mode 100644
index 40a5a73..0000000
--- a/apps/docs/app/docs/components/dropdown-menu/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO['dropdown-menu']);
-
-export default function DropdownMenuLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/dropdown-menu/page.tsx b/apps/docs/app/docs/components/dropdown-menu/page.tsx
deleted file mode 100644
index 558a403..0000000
--- a/apps/docs/app/docs/components/dropdown-menu/page.tsx
+++ /dev/null
@@ -1,518 +0,0 @@
-'use client';
-
-import {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuCheckboxItem,
-    DropdownMenuRadioGroup,
-    DropdownMenuRadioItem,
-    DropdownMenuShortcut,
-    DropdownMenuGroup,
-    DropdownMenuSub,
-    DropdownMenuSubTrigger,
-    DropdownMenuSubContent,
-    Button,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import {
-    User,
-    Settings,
-    LogOut,
-    CreditCard,
-    Keyboard,
-    Mail,
-    MessageSquare,
-    PlusCircle,
-    Plus,
-    UserPlus,
-    Cloud,
-    Github,
-    LifeBuoy,
-} from 'lucide-react';
-import * as React from 'react';
-
-export default function DropdownMenuPage() {
-    const [showStatus, setShowStatus] = React.useState(true);
-    const [showActivity, setShowActivity] = React.useState(false);
-    const [showPanel, setShowPanel] = React.useState(true);
-    const [position, setPosition] = React.useState('bottom');
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Dropdown Menu</h1>
-
-            <p>
-                Displays a menu to the user — such as a set of actions or functions — triggered by a
-                button. Built on Radix UI Dropdown Menu primitive.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="outline">Open Menu</Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-56">
-                        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                            <User className="mr-2 h-4 w-4" />
-                            Profile
-                            <DropdownMenuShortcut>⇧P</DropdownMenuShortcut>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                            <CreditCard className="mr-2 h-4 w-4" />
-                            Billing
-                            <DropdownMenuShortcut>B</DropdownMenuShortcut>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                            <Settings className="mr-2 h-4 w-4" />
-                            Settings
-                            <DropdownMenuShortcut>S</DropdownMenuShortcut>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                            <Keyboard className="mr-2 h-4 w-4" />
-                            Keyboard shortcuts
-                            <DropdownMenuShortcut>K</DropdownMenuShortcut>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                            <LogOut className="mr-2 h-4 w-4" />
-                            Log out
-                            <DropdownMenuShortcut>⇧Q</DropdownMenuShortcut>
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="dropdown-menu" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-} from "@/components/ui/dropdown-menu"
-
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button>Open</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent>
-    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Settings</DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>`}
-            </pre>
-
-            <h2>Examples</h2>
-
-            <h3>With Submenus</h3>
-            <p>Use nested submenus for complex navigation hierarchies.</p>
-            <ComponentPreview>
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button>Open with Submenu</Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-56">
-                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                            <DropdownMenuItem>
-                                <User className="mr-2 h-4 w-4" />
-                                Profile
-                            </DropdownMenuItem>
-                            <DropdownMenuItem>
-                                <Settings className="mr-2 h-4 w-4" />
-                                Settings
-                            </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                            <DropdownMenuSub>
-                                <DropdownMenuSubTrigger>
-                                    <UserPlus className="mr-2 h-4 w-4" />
-                                    Invite users
-                                </DropdownMenuSubTrigger>
-                                <DropdownMenuSubContent>
-                                    <DropdownMenuItem>
-                                        <Mail className="mr-2 h-4 w-4" />
-                                        Email
-                                    </DropdownMenuItem>
-                                    <DropdownMenuItem>
-                                        <MessageSquare className="mr-2 h-4 w-4" />
-                                        Message
-                                    </DropdownMenuItem>
-                                    <DropdownMenuSeparator />
-                                    <DropdownMenuItem>
-                                        <PlusCircle className="mr-2 h-4 w-4" />
-                                        More...
-                                    </DropdownMenuItem>
-                                </DropdownMenuSubContent>
-                            </DropdownMenuSub>
-                            <DropdownMenuItem>
-                                <Plus className="mr-2 h-4 w-4" />
-                                New Team
-                            </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>
-                            <Github className="mr-2 h-4 w-4" />
-                            GitHub
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                            <LifeBuoy className="mr-2 h-4 w-4" />
-                            Support
-                        </DropdownMenuItem>
-                        <DropdownMenuItem disabled>
-                            <Cloud className="mr-2 h-4 w-4" />
-                            API (Coming Soon)
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </ComponentPreview>
-
-            <h3>With Checkboxes</h3>
-            <p>Toggle options using checkbox menu items.</p>
-            <ComponentPreview>
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button>View Options</Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-56">
-                        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuCheckboxItem
-                            checked={showStatus}
-                            onCheckedChange={setShowStatus}
-                        >
-                            Show Status Bar
-                        </DropdownMenuCheckboxItem>
-                        <DropdownMenuCheckboxItem
-                            checked={showActivity}
-                            onCheckedChange={setShowActivity}
-                        >
-                            Show Activity Bar
-                        </DropdownMenuCheckboxItem>
-                        <DropdownMenuCheckboxItem
-                            checked={showPanel}
-                            onCheckedChange={setShowPanel}
-                        >
-                            Show Panel
-                        </DropdownMenuCheckboxItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </ComponentPreview>
-
-            <h3>With Radio Items</h3>
-            <p>Select a single option from a group.</p>
-            <ComponentPreview>
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button>Position: {position}</Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-                            <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-                        </DropdownMenuRadioGroup>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </ComponentPreview>
-
-            <h3>With Disabled Items</h3>
-            <p>
-                Use <code>disabled</code> prop to disable specific items.
-            </p>
-            <ComponentPreview>
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="secondary">Actions</Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                        <DropdownMenuItem>Edit</DropdownMenuItem>
-                        <DropdownMenuItem>Duplicate</DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem disabled>Archive</DropdownMenuItem>
-                        <DropdownMenuItem disabled>Move to Trash</DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </ComponentPreview>
-
-            <h2>API Reference</h2>
-
-            <h3>DropdownMenuContent</h3>
-            <p>The container for menu items.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                sideOffset
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                number
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">6</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Distance from trigger in pixels
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">side</td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "top" | "bottom" | "left" | "right"
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "bottom"
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Position relative to trigger
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">align</td>
-                            <td className="p-3 font-mono text-sm">"start" | "center" | "end"</td>
-                            <td className="p-3 font-mono text-sm">"center"</td>
-                            <td className="p-3">Alignment relative to trigger</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>DropdownMenuItem</h3>
-            <p>Individual menu item.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                disabled
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                boolean
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                false
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Disable the menu item</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                inset
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                boolean
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                false
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Add left padding for alignment
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">onSelect</td>
-                            <td className="p-3 font-mono text-sm">(event) =&gt; void</td>
-                            <td className="p-3 font-mono text-sm">-</td>
-                            <td className="p-3">Handler when item is selected</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>All Exports</h3>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#4ECDC4]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Component
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenu
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Root component managing state
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuTrigger
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Button that opens the menu
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuContent
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Container for items</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuItem
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Basic menu item</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuCheckboxItem
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Toggleable checkbox item
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuRadioGroup
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Group for radio items</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuRadioItem
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Radio selection item</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuLabel
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Section label/heading</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuSeparator
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Visual divider</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuShortcut
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Keyboard shortcut display
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuGroup
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Group related items</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuSub
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Submenu root</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuSubTrigger
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Opens submenu on hover</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                DropdownMenuSubContent
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Submenu content container
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">DropdownMenuPortal</td>
-                            <td className="p-3">Portal for menu content</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h2>Accessibility</h2>
-            <ul>
-                <li>
-                    <kbd>Enter</kbd> / <kbd>Space</kbd> opens menu and selects item
-                </li>
-                <li>
-                    <kbd>↑</kbd> <kbd>↓</kbd> navigate between items
-                </li>
-                <li>
-                    <kbd>→</kbd> opens submenu, <kbd>←</kbd> closes submenu
-                </li>
-                <li>
-                    <kbd>Escape</kbd> closes the menu
-                </li>
-                <li>Type to search and focus matching items</li>
-            </ul>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/form/page.tsx b/apps/docs/app/docs/components/form/page.tsx
deleted file mode 100644
index b56f59b..0000000
--- a/apps/docs/app/docs/components/form/page.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-'use client';
-
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-import {
-    Form,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormControl,
-    FormDescription,
-    FormMessage,
-    Button,
-    Input,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-const formSchema = z.object({
-    username: z.string().min(2, {
-        message: 'Username must be at least 2 characters.',
-    }),
-    email: z.string().email({
-        message: 'Please enter a valid email address.',
-    }),
-});
-
-export default function FormPage() {
-    const form = useForm<z.infer<typeof formSchema>>({
-        resolver: zodResolver(formSchema),
-        defaultValues: {
-            username: '',
-            email: '',
-        },
-    });
-
-    function onSubmit(values: z.infer<typeof formSchema>) {
-        alert(JSON.stringify(values, null, 2));
-    }
-
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Form</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A fully integrated form handler built with react-hook-form and Zod. Adheres to strict Neo-Brutalist parameters with error styling, outlines, and keyboard focus states.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <Form {...form}>
-                        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 max-w-md w-full p-6 bg-white dark:bg-gray-950 border-3 border-black dark:border-white shadow-brutal dark:shadow-brutal-white">
-                            <h3 className="text-lg font-black border-b-3 border-black pb-2">User Registration</h3>
-
-                            <FormField
-                                control={form.control}
-                                name="username"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>Username</FormLabel>
-                                        <FormControl>
-                                            <Input placeholder="johndoe" {...field} />
-                                        </FormControl>
-                                        <FormDescription>
-                                            This is your public display name.
-                                        </FormDescription>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
-
-                            <FormField
-                                control={form.control}
-                                name="email"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>Email Address</FormLabel>
-                                        <FormControl>
-                                            <Input type="email" placeholder="john@example.com" {...field} />
-                                        </FormControl>
-                                        <FormDescription>
-                                            We will send account updates here.
-                                        </FormDescription>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
-
-                            <Button type="submit" variant="primary" className="w-full">
-                                Submit Form
-                            </Button>
-                        </form>
-                    </Form>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="form" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { useForm } from "react-hook-form"
-import { z } from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-
-const formSchema = z.object({
-  username: z.string().min(2),
-})
-
-function MyForm() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      username: "",
-    },
-  })
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values)
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="Enter username" {...field} />
-              </FormControl>
-              <FormDescription>Public display name.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Component</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">Form</td>
-                                <td className="p-3">FormProvider context wrapper from react-hook-form.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">FormField</td>
-                                <td className="p-3">Controller wrapper matching field name contexts.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">FormItem</td>
-                                <td className="p-3">Spacing layout container that generates unique field IDs.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">FormLabel</td>
-                                <td className="p-3">High-contrast accessibility label (turns red on validation errors).</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">FormControl</td>
-                                <td className="p-3">Slot wrapper injecting focus loops and state identifiers.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">FormDescription</td>
-                                <td className="p-3">Helper paragraph context for form guidance.</td>
-                            </tr>
-                            <tr>
-                                <td className="p-3 font-mono text-sm">FormMessage</td>
-                                <td className="p-3">Error announcement display (renders only when field validation fails).</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <ul className="list-disc pl-5 space-y-1 text-sm">
-                    <li>Utilizes <code>aria-describedby</code> to merge description and error labels.</li>
-                    <li>Switches <code>aria-invalid</code> dynamically upon field failures.</li>
-                    <li>Ensures full keyboard navigation and high visibility focus states.</li>
-                </ul>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/input/layout.tsx b/apps/docs/app/docs/components/input/layout.tsx
deleted file mode 100644
index e8b7965..0000000
--- a/apps/docs/app/docs/components/input/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.input);
-
-export default function InputLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/input/page.tsx b/apps/docs/app/docs/components/input/page.tsx
deleted file mode 100644
index 4cf681b..0000000
--- a/apps/docs/app/docs/components/input/page.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-'use client';
-
-import { Input, Label, Textarea, Badge, Card, CardContent } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function InputPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Input</h1>
-
-            <p>Neo-Brutalism styled text input with focus states and variants.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="w-full max-w-sm space-y-4">
-                    <div>
-                        <Label htmlFor="email">Email</Label>
-                        <Input id="email" type="email" placeholder="you@example.com" />
-                    </div>
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="input" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto">
-                {`import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-
-<div>
-  <Label htmlFor="email">Email</Label>
-  <Input id="email" type="email" placeholder="you@example.com" />
-</div>`}
-            </pre>
-
-            <h2>Variants</h2>
-            <Card className="my-4 dark:bg-gray-900 dark:border-white">
-                <CardContent className="pt-6 space-y-4">
-                    <div>
-                        <Label>Default</Label>
-                        <Input placeholder="Default input" />
-                    </div>
-                    <div>
-                        <Label variant="error">Error</Label>
-                        <Input variant="error" placeholder="Error state" />
-                    </div>
-                    <div>
-                        <Label variant="success">Success</Label>
-                        <Input variant="success" placeholder="Success state" />
-                    </div>
-                </CardContent>
-            </Card>
-
-            <h2>Sizes</h2>
-            <Card className="my-4 dark:bg-gray-900 dark:border-white">
-                <CardContent className="pt-6 space-y-4">
-                    <div>
-                        <Label>Small</Label>
-                        <Input inputSize="sm" placeholder="Small input" />
-                    </div>
-                    <div>
-                        <Label>Default</Label>
-                        <Input inputSize="default" placeholder="Default input" />
-                    </div>
-                    <div>
-                        <Label>Large</Label>
-                        <Input inputSize="lg" placeholder="Large input" />
-                    </div>
-                </CardContent>
-            </Card>
-
-            <h2>Disabled</h2>
-            <ComponentPreview>
-                <Input disabled placeholder="Disabled input" className="max-w-sm" />
-            </ComponentPreview>
-
-            <h2>Textarea</h2>
-            <ComponentPreview>
-                <div className="w-full max-w-sm">
-                    <Label htmlFor="message">Message</Label>
-                    <Textarea id="message" placeholder="Type your message here..." />
-                </div>
-            </ComponentPreview>
-
-            <h2>Props</h2>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Prop
-                            </th>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Type
-                            </th>
-                            <th className="px-4 py-2 text-left border-b-3 border-black font-black text-black">
-                                Default
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-gray-900">
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                variant
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                "default" | "error" | "success"
-                            </td>
-                            <td className="px-4 py-2 text-sm">"default"</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                inputSize
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                "sm" | "default" | "lg"
-                            </td>
-                            <td className="px-4 py-2 text-sm">"default"</td>
-                        </tr>
-                        <tr>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                disabled
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                boolean
-                            </td>
-                            <td className="px-4 py-2 text-sm">false</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/label/layout.tsx b/apps/docs/app/docs/components/label/layout.tsx
deleted file mode 100644
index 1e2667d..0000000
--- a/apps/docs/app/docs/components/label/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.label);
-
-export default function LabelLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/label/page.tsx b/apps/docs/app/docs/components/label/page.tsx
deleted file mode 100644
index ca27a5b..0000000
--- a/apps/docs/app/docs/components/label/page.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-'use client';
-
-import { Label, Input, Checkbox } from '@/components/ui';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function LabelPage() {
-    return (
-        <div className="space-y-8">
-            <div>
-                <h1 className="text-4xl font-black mb-4">Label</h1>
-                <p className="text-lg text-gray-600 dark:text-gray-300">
-                    A label component for form inputs with accessible styling.
-                </p>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Installation</h2>
-                <InstallationTabs componentName="label" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Basic Usage</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="space-y-2">
-                        <Label htmlFor="email">Email</Label>
-                        <Input id="email" type="email" placeholder="Enter your email" />
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`import { Label } from "@/components/ui/label"
-import { Input } from "@/components/ui/input"
-
-<Label htmlFor="email">Email</Label>
-<Input id="email" type="email" placeholder="Enter your email" />`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">With Checkbox</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="flex items-center gap-2">
-                        <Checkbox id="terms" />
-                        <Label htmlFor="terms">Accept terms and conditions</Label>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<div className="flex items-center gap-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Required Field</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="space-y-2">
-                        <Label htmlFor="username">
-                            Username <span className="text-red-500">*</span>
-                        </Label>
-                        <Input id="username" placeholder="Enter your username" required />
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Label htmlFor="username">
-  Username <span className="text-red-500">*</span>
-</Label>
-<Input id="username" placeholder="Enter your username" required />`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">With Helper Text</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="space-y-2">
-                        <Label htmlFor="password">Password</Label>
-                        <Input id="password" type="password" placeholder="Enter your password" />
-                        <p className="text-sm text-gray-500">Must be at least 8 characters long.</p>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<div className="space-y-2">
-  <Label htmlFor="password">Password</Label>
-  <Input id="password" type="password" placeholder="..." />
-  <p className="text-sm text-gray-500">Must be at least 8 characters.</p>
-</div>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Form Example</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <form className="space-y-4">
-                        <div className="space-y-2">
-                            <Label htmlFor="form-name">Full Name</Label>
-                            <Input id="form-name" placeholder="John Doe" />
-                        </div>
-                        <div className="space-y-2">
-                            <Label htmlFor="form-email">Email Address</Label>
-                            <Input id="form-email" type="email" placeholder="john@example.com" />
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <Checkbox id="form-newsletter" />
-                            <Label htmlFor="form-newsletter">Subscribe to newsletter</Label>
-                        </div>
-                    </form>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<form className="space-y-4">
-  <div className="space-y-2">
-    <Label htmlFor="name">Full Name</Label>
-    <Input id="name" placeholder="John Doe" />
-  </div>
-  <div className="space-y-2">
-    <Label htmlFor="email">Email Address</Label>
-    <Input id="email" type="email" placeholder="john@example.com" />
-  </div>
-  <div className="flex items-center gap-2">
-    <Checkbox id="newsletter" />
-    <Label htmlFor="newsletter">Subscribe to newsletter</Label>
-  </div>
-</form>`}</code>
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/page.tsx b/apps/docs/app/docs/components/page.tsx
deleted file mode 100644
index b271837..0000000
--- a/apps/docs/app/docs/components/page.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import Link from 'next/link';
-import { Card, CardHeader, CardTitle, CardContent, Badge } from '@/components/ui';
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-    title: 'All Components - Brutx | 27 Neo-Brutalism React Components',
-    description:
-        'Browse 27 Neo-Brutalism React components: Button, Card, Calendar, Command, Combobox, Dialog, Toast, Table, Tabs, Scroll Area and more. Accessible, customizable, with bold borders and offset shadows.',
-    keywords: [
-        'brutx components',
-        'neo-brutalism components',
-        'react ui components',
-        'brutalism button',
-        'brutalism card',
-        'radix ui components',
-    ],
-    openGraph: {
-        title: 'All Components - Brutx',
-        description:
-            'Browse 27 Neo-Brutalism React components built with Radix UI and Tailwind CSS.',
-        url: 'https://brutxui.site/docs/components',
-    },
-    alternates: {
-        canonical: 'https://brutxui.site/docs/components',
-    },
-};
-
-const components = [
-    {
-        name: 'Alert',
-        href: '/docs/components/alert',
-        description: 'Alert messages and notifications',
-    },
-    {
-        name: 'Avatar',
-        href: '/docs/components/avatar',
-        description: 'User profile image with fallback',
-    },
-    { name: 'Badge', href: '/docs/components/badge', description: 'Status indicators and labels' },
-    {
-        name: 'Button',
-        href: '/docs/components/button',
-        description: 'Interactive button with multiple variants',
-    },
-    {
-        name: 'Calendar',
-        href: '/docs/components/calendar',
-        description: 'Date picker calendar component',
-    },
-    {
-        name: 'Card',
-        href: '/docs/components/card',
-        description: 'Container for content with shadow',
-    },
-    { name: 'Checkbox', href: '/docs/components/checkbox', description: 'Checkbox input control' },
-    {
-        name: 'Combobox',
-        href: '/docs/components/combobox',
-        description: 'Autocomplete with search and selection',
-    },
-    {
-        name: 'Command',
-        href: '/docs/components/command',
-        description: 'Command palette for actions',
-    },
-    { name: 'Dialog', href: '/docs/components/dialog', description: 'Modal dialog overlay' },
-    {
-        name: 'Dropdown Menu',
-        href: '/docs/components/dropdown-menu',
-        description: 'Action menu dropdown',
-    },
-    { name: 'Input', href: '/docs/components/input', description: 'Text input field' },
-    { name: 'Label', href: '/docs/components/label', description: 'Form label for accessibility' },
-    {
-        name: 'Pagination',
-        href: '/docs/components/pagination',
-        description: 'Page navigation component',
-    },
-    { name: 'Popover', href: '/docs/components/popover', description: 'Floating content panel' },
-    { name: 'Select', href: '/docs/components/select', description: 'Selection dropdown' },
-    {
-        name: 'Separator',
-        href: '/docs/components/separator',
-        description: 'Visual divider between content',
-    },
-    {
-        name: 'Skeleton',
-        href: '/docs/components/skeleton',
-        description: 'Loading placeholder skeletons',
-    },
-    {
-        name: 'Spinner',
-        href: '/docs/components/spinner',
-        description: 'Loading spinner indicators',
-    },
-    {
-        name: 'Submit Button',
-        href: '/docs/components/submit-button',
-        description: 'Server component-ready form submission handler',
-    },
-    { name: 'Switch', href: '/docs/components/switch', description: 'Toggle switch control' },
-    { name: 'Table', href: '/docs/components/table', description: 'Data table display' },
-    { name: 'Tabs', href: '/docs/components/tabs', description: 'Tabbed content sections' },
-    { name: 'Textarea', href: '/docs/components/textarea', description: 'Multi-line text input' },
-    { name: 'Toast', href: '/docs/components/toast', description: 'Toast notification messages' },
-    {
-        name: 'Tooltip',
-        href: '/docs/components/tooltip',
-        description: 'Informational popup on hover',
-    },
-    {
-        name: 'Scroll Area',
-        href: '/docs/components/scroll-area',
-        description: 'Custom cross-browser scrollable container',
-    },
-];
-
-export default function ComponentsPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Components
-            </Badge>
-            <h1>Component Library</h1>
-
-            <p>
-                A collection of Neo-Brutalism styled components built with Radix UI primitives and
-                Tailwind CSS.
-            </p>
-
-            <div className="grid gap-4 mt-8">
-                {components.map((component) => (
-                    <Link key={component.name} href={component.href}>
-                        <Card variant="interactive" padding="default">
-                            <CardHeader className="pb-2">
-                                <CardTitle className="text-lg">{component.name}</CardTitle>
-                            </CardHeader>
-                            <CardContent>
-                                <p className="text-sm text-gray-600 dark:text-gray-400 font-medium">
-                                    {component.description}
-                                </p>
-                            </CardContent>
-                        </Card>
-                    </Link>
-                ))}
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/pagination/layout.tsx b/apps/docs/app/docs/components/pagination/layout.tsx
deleted file mode 100644
index 379bc1f..0000000
--- a/apps/docs/app/docs/components/pagination/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.pagination);
-
-export default function PaginationLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/pagination/page.tsx b/apps/docs/app/docs/components/pagination/page.tsx
deleted file mode 100644
index 2c4b945..0000000
--- a/apps/docs/app/docs/components/pagination/page.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-'use client';
-
-import { Pagination, Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import * as React from 'react';
-
-export default function PaginationPage() {
-    const [page1, setPage1] = React.useState(1);
-    const [page2, setPage2] = React.useState(5);
-    const [page3, setPage3] = React.useState(3);
-    const [page4, setPage4] = React.useState(1);
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Pagination</h1>
-
-            <p>
-                A pagination component for navigating between pages with Neo-Brutalism styling.
-                Features first/last buttons, page numbers with ellipsis, and multiple sizes.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <Pagination currentPage={page1} totalPages={10} onPageChange={setPage1} />
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="pagination" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import { Pagination } from "@/components/ui/pagination"
-
-const [currentPage, setCurrentPage] = React.useState(1);
-
-<Pagination
-  currentPage={currentPage}
-  totalPages={10}
-  onPageChange={setCurrentPage}
-/>`}
-            </pre>
-
-            <h2>Many Pages (with ellipsis)</h2>
-            <ComponentPreview>
-                <Pagination
-                    currentPage={page2}
-                    totalPages={20}
-                    onPageChange={setPage2}
-                    siblingCount={1}
-                />
-            </ComponentPreview>
-
-            <h2>Sizes</h2>
-            <ComponentPreview className="flex-col gap-6">
-                <div className="flex flex-col items-center gap-2">
-                    <span className="text-xs font-bold">Small</span>
-                    <Pagination
-                        currentPage={page3}
-                        totalPages={5}
-                        onPageChange={setPage3}
-                        size="sm"
-                        showFirstLast={false}
-                    />
-                </div>
-                <div className="flex flex-col items-center gap-2">
-                    <span className="text-xs font-bold">Default</span>
-                    <Pagination
-                        currentPage={page3}
-                        totalPages={5}
-                        onPageChange={setPage3}
-                        showFirstLast={false}
-                    />
-                </div>
-                <div className="flex flex-col items-center gap-2">
-                    <span className="text-xs font-bold">Large</span>
-                    <Pagination
-                        currentPage={page3}
-                        totalPages={5}
-                        onPageChange={setPage3}
-                        size="lg"
-                        showFirstLast={false}
-                    />
-                </div>
-            </ComponentPreview>
-
-            <h2>Without Page Numbers</h2>
-            <ComponentPreview>
-                <Pagination
-                    currentPage={page4}
-                    totalPages={10}
-                    onPageChange={setPage4}
-                    showPageNumbers={false}
-                />
-            </ComponentPreview>
-
-            <h2>Props</h2>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Prop
-                            </th>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Type
-                            </th>
-                            <th className="px-4 py-2 text-left border-b-3 border-black font-black text-black">
-                                Default
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-gray-900">
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                currentPage
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                number
-                            </td>
-                            <td className="px-4 py-2 text-sm">required</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                totalPages
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                number
-                            </td>
-                            <td className="px-4 py-2 text-sm">required</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                onPageChange
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                (page: number) =&gt; void
-                            </td>
-                            <td className="px-4 py-2 text-sm">required</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                size
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                "sm" | "default" | "lg"
-                            </td>
-                            <td className="px-4 py-2 text-sm">"default"</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                showFirstLast
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                boolean
-                            </td>
-                            <td className="px-4 py-2 text-sm">true</td>
-                        </tr>
-                        <tr>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                showPageNumbers
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                boolean
-                            </td>
-                            <td className="px-4 py-2 text-sm">true</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/popover/layout.tsx b/apps/docs/app/docs/components/popover/layout.tsx
deleted file mode 100644
index 7389483..0000000
--- a/apps/docs/app/docs/components/popover/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.popover);
-
-export default function PopoverLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/popover/page.tsx b/apps/docs/app/docs/components/popover/page.tsx
deleted file mode 100644
index 5987eec..0000000
--- a/apps/docs/app/docs/components/popover/page.tsx
+++ /dev/null
@@ -1,416 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-    Popover,
-    PopoverTrigger,
-    PopoverContent,
-    PopoverAnchor,
-    Button,
-    Badge,
-    Input,
-    Label,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function PopoverPage() {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Popover</h1>
-
-            <p>
-                Displays rich content in a portal, triggered by a button. Built on Radix UI Popover
-                primitive.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <Popover>
-                    <PopoverTrigger asChild>
-                        <Button variant="outline">Open Popover</Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-80">
-                        <div className="space-y-4">
-                            <h4 className="font-black">Dimensions</h4>
-                            <div className="space-y-2">
-                                <div>
-                                    <Label htmlFor="width">Width</Label>
-                                    <Input id="width" defaultValue="100%" />
-                                </div>
-                                <div>
-                                    <Label htmlFor="height">Height</Label>
-                                    <Input id="height" defaultValue="25px" />
-                                </div>
-                            </div>
-                        </div>
-                    </PopoverContent>
-                </Popover>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="popover" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverAnchor,
-} from "@/components/ui/popover"
-import { Button } from "@/components/ui/button"
-
-<Popover>
-  <PopoverTrigger asChild>
-    <Button>Open</Button>
-  </PopoverTrigger>
-  <PopoverContent>
-    Popover content here
-  </PopoverContent>
-</Popover>`}
-            </pre>
-
-            <h2>Examples</h2>
-
-            <h3>Different Alignments</h3>
-            <p>
-                Use <code>align</code> prop to control horizontal alignment.
-            </p>
-            <ComponentPreview>
-                <div className="flex gap-4 flex-wrap">
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button variant="secondary">Align Start</Button>
-                        </PopoverTrigger>
-                        <PopoverContent align="start" className="w-64">
-                            <p className="font-bold">Aligned to Start</p>
-                            <p className="text-sm text-gray-600 dark:text-gray-400">
-                                Content is aligned to the start of the trigger.
-                            </p>
-                        </PopoverContent>
-                    </Popover>
-
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button variant="secondary">Align Center</Button>
-                        </PopoverTrigger>
-                        <PopoverContent align="center" className="w-64">
-                            <p className="font-bold">Aligned to Center</p>
-                            <p className="text-sm text-gray-600 dark:text-gray-400">
-                                Content is centered relative to the trigger.
-                            </p>
-                        </PopoverContent>
-                    </Popover>
-
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button variant="secondary">Align End</Button>
-                        </PopoverTrigger>
-                        <PopoverContent align="end" className="w-64">
-                            <p className="font-bold">Aligned to End</p>
-                            <p className="text-sm text-gray-600 dark:text-gray-400">
-                                Content is aligned to the end of the trigger.
-                            </p>
-                        </PopoverContent>
-                    </Popover>
-                </div>
-            </ComponentPreview>
-
-            <h3>Different Sides</h3>
-            <p>
-                Use <code>side</code> prop to control which side the popover appears on.
-            </p>
-            <ComponentPreview>
-                <div className="flex gap-4 flex-wrap justify-center py-12">
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button>Top</Button>
-                        </PopoverTrigger>
-                        <PopoverContent side="top" className="w-48">
-                            <p className="font-bold text-center">Above the trigger</p>
-                        </PopoverContent>
-                    </Popover>
-
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button>Bottom</Button>
-                        </PopoverTrigger>
-                        <PopoverContent side="bottom" className="w-48">
-                            <p className="font-bold text-center">Below the trigger</p>
-                        </PopoverContent>
-                    </Popover>
-
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button>Left</Button>
-                        </PopoverTrigger>
-                        <PopoverContent side="left" className="w-48">
-                            <p className="font-bold text-center">Left of trigger</p>
-                        </PopoverContent>
-                    </Popover>
-
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button>Right</Button>
-                        </PopoverTrigger>
-                        <PopoverContent side="right" className="w-48">
-                            <p className="font-bold text-center">Right of trigger</p>
-                        </PopoverContent>
-                    </Popover>
-                </div>
-            </ComponentPreview>
-
-            <h3>Controlled Popover</h3>
-            <p>
-                Control popover state with <code>open</code> and <code>onOpenChange</code>.
-            </p>
-            <ComponentPreview>
-                <div className="flex gap-4 items-center">
-                    <Popover open={open} onOpenChange={setOpen}>
-                        <PopoverTrigger asChild>
-                            <Button variant="accent">Controlled Popover</Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-64">
-                            <p className="font-bold">Controlled State</p>
-                            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                                Open: {open ? 'true' : 'false'}
-                            </p>
-                            <Button size="sm" onClick={() => setOpen(false)}>
-                                Close
-                            </Button>
-                        </PopoverContent>
-                    </Popover>
-                    <Button variant="outline" onClick={() => setOpen(!open)}>
-                        Toggle from Outside
-                    </Button>
-                </div>
-            </ComponentPreview>
-
-            <h3>With Form</h3>
-            <p>Popover containing a form for inline editing.</p>
-            <ComponentPreview>
-                <Popover>
-                    <PopoverTrigger asChild>
-                        <Button variant="primary">Edit Settings</Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-80">
-                        <div className="space-y-4">
-                            <div>
-                                <h4 className="font-black mb-2">Quick Settings</h4>
-                                <p className="text-sm text-gray-600 dark:text-gray-400">
-                                    Update your preferences
-                                </p>
-                            </div>
-                            <div className="space-y-3">
-                                <div>
-                                    <Label htmlFor="display-name">Display Name</Label>
-                                    <Input id="display-name" placeholder="Your name" />
-                                </div>
-                                <div>
-                                    <Label htmlFor="email-pop">Email</Label>
-                                    <Input
-                                        id="email-pop"
-                                        type="email"
-                                        placeholder="your@email.com"
-                                    />
-                                </div>
-                            </div>
-                            <div className="flex justify-end gap-2">
-                                <Button variant="outline" size="sm">
-                                    Cancel
-                                </Button>
-                                <Button variant="primary" size="sm">
-                                    Save
-                                </Button>
-                            </div>
-                        </div>
-                    </PopoverContent>
-                </Popover>
-            </ComponentPreview>
-
-            <h2>API Reference</h2>
-
-            <h3>Popover</h3>
-            <p>Root component that manages state.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">open</td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                boolean
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">Controlled open state</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                onOpenChange
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (open: boolean) =&gt; void
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Callback when open state changes
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">defaultOpen</td>
-                            <td className="p-3 font-mono text-sm">boolean</td>
-                            <td className="p-3 font-mono text-sm">false</td>
-                            <td className="p-3">Initial open state (uncontrolled)</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>PopoverContent</h3>
-            <p>The floating content container.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                align
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "start" | "center" | "end"
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "center"
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Horizontal alignment relative to trigger
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">side</td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "top" | "bottom" | "left" | "right"
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "bottom"
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Which side to position on
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                sideOffset
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                number
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">8</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Distance from trigger in pixels
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">alignOffset</td>
-                            <td className="p-3 font-mono text-sm">number</td>
-                            <td className="p-3 font-mono text-sm">0</td>
-                            <td className="p-3">Offset from alignment edge</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>All Exports</h3>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#4ECDC4]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Component
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                Popover
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Root component</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                PopoverTrigger
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Element that triggers popover
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                PopoverContent
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Floating content container
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">PopoverAnchor</td>
-                            <td className="p-3">Custom anchor element for positioning</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h2>Accessibility</h2>
-            <ul>
-                <li>
-                    <kbd>Enter</kbd> / <kbd>Space</kbd> opens/closes popover
-                </li>
-                <li>
-                    <kbd>Escape</kbd> closes the popover
-                </li>
-                <li>Focus is managed automatically</li>
-                <li>Click outside closes the popover</li>
-            </ul>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/progress/page.tsx b/apps/docs/app/docs/components/progress/page.tsx
deleted file mode 100644
index 4b20922..0000000
--- a/apps/docs/app/docs/components/progress/page.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import {
-    Progress,
-    Button,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function ProgressPage() {
-    const [progress, setProgress] = useState(15);
-
-    useEffect(() => {
-        const timer = setTimeout(() => setProgress(66), 500);
-        return () => clearTimeout(timer);
-    }, []);
-
-    const resetProgress = () => {
-        setProgress(0);
-        setTimeout(() => setProgress(Math.floor(Math.random() * 80) + 15), 300);
-    };
-
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Progress</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A visual progress bar indicating completion status. Features flat background structures, thick borders, and animated neon fills.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <div className="w-full max-w-sm space-y-6">
-                        <Progress value={progress} />
-                        <div className="flex gap-2 items-center">
-                            <Button variant="outline" size="sm" onClick={resetProgress}>
-                                Trigger Loading
-                            </Button>
-                            <span className="text-sm font-black border-3 border-black px-2 py-0.5 bg-[#4ECDC4] text-black">
-                                Status: {progress}%
-                            </span>
-                        </div>
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="progress" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { Progress } from "@/components/ui/progress"
-
-<Progress value={66} />`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Prop</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Type</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Default</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">value</td>
-                                <td className="p-3 font-mono text-sm">number</td>
-                                <td className="p-3 font-mono text-sm">-</td>
-                                <td className="p-3">Current progress numerical value from <code>0</code> to <code>max</code>.</td>
-                            </tr>
-                            <tr>
-                                <td className="p-3 font-mono text-sm">max</td>
-                                <td className="p-3 font-mono text-sm">number</td>
-                                <td className="p-3 font-mono text-sm">100</td>
-                                <td className="p-3">Maximum value of progress scale.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <div className="p-4 bg-yellow-50 dark:bg-yellow-950 border-3 border-black dark:border-white space-y-2 text-sm">
-                    <p className="font-bold text-black dark:text-white">Announcements:</p>
-                    <p>Uses WAI-ARIA <code>role="progressbar"</code> rules, automatically calculating and binding <code>aria-valuenow</code>, <code>aria-valuemin</code>, and <code>aria-valuemax</code> to announce progress updates in real-time to screen readers.</p>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/radio-group/page.tsx b/apps/docs/app/docs/components/radio-group/page.tsx
deleted file mode 100644
index 4cc790c..0000000
--- a/apps/docs/app/docs/components/radio-group/page.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client';
-
-import {
-    RadioGroup,
-    RadioGroupItem,
-    Label,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function RadioGroupPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Radio Group</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A set of checkable buttons—known as radio buttons—where no more than one button can be checked at a time. Designed with thick brutalist borders, custom circular check fills, and clean disabled states.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <RadioGroup defaultValue="comfortable" className="max-w-xs">
-                        <div className="flex items-center space-x-3">
-                            <RadioGroupItem value="default" id="r1" />
-                            <Label htmlFor="r1" className="cursor-pointer">Default Option</Label>
-                        </div>
-                        <div className="flex items-center space-x-3">
-                            <RadioGroupItem value="comfortable" id="r2" />
-                            <Label htmlFor="r2" className="cursor-pointer">Comfortable Option</Label>
-                        </div>
-                        <div className="flex items-center space-x-3">
-                            <RadioGroupItem value="compact" id="r3" />
-                            <Label htmlFor="r3" className="cursor-pointer">Compact Option</Label>
-                        </div>
-                    </RadioGroup>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="radio-group" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { Label } from "@/components/ui/label"
-
-<RadioGroup defaultValue="option-one">
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-one" id="option-one" />
-    <Label htmlFor="option-one">Option One</Label>
-  </div>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-two" id="option-two" />
-    <Label htmlFor="option-two">Option Two</Label>
-  </div>
-</RadioGroup>`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Examples</h2>
-
-                <h3>Disabled State</h3>
-                <p>Disabled radio choices turn grey and inherit standard pointer-events exclusion rules.</p>
-                <ComponentPreview>
-                    <RadioGroup defaultValue="compact" className="max-w-xs">
-                        <div className="flex items-center space-x-3 opacity-50">
-                            <RadioGroupItem value="default" id="d1" disabled />
-                            <Label htmlFor="d1">Option A (Disabled)</Label>
-                        </div>
-                        <div className="flex items-center space-x-3">
-                            <RadioGroupItem value="comfortable" id="d2" />
-                            <Label htmlFor="d2" className="cursor-pointer">Option B (Enabled)</Label>
-                        </div>
-                        <div className="flex items-center space-x-3 opacity-50">
-                            <RadioGroupItem value="compact" id="d3" disabled />
-                            <Label htmlFor="d3">Option C (Disabled)</Label>
-                        </div>
-                    </RadioGroup>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Component</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">RadioGroup</td>
-                                <td className="p-3">Context root that handles active values and selection loops.</td>
-                            </tr>
-                            <tr>
-                                <td className="p-3 font-mono text-sm">RadioGroupItem</td>
-                                <td className="p-3">Individual circular check option triggering click callbacks.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <div className="p-4 bg-yellow-50 dark:bg-yellow-950 border-3 border-black dark:border-white space-y-2">
-                    <p className="font-bold text-black dark:text-white">Keyboard Navigation Key Rules:</p>
-                    <ul className="list-disc pl-5 space-y-1 text-sm">
-                        <li><code>Tab</code>: Moves focus to the selected radio button in the group.</li>
-                        <li><code>ArrowDown / ArrowRight</code>: Moves focus and checks the next radio button in the group.</li>
-                        <li><code>ArrowUp / ArrowLeft</code>: Moves focus and checks the previous radio button in the group.</li>
-                    </ul>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/saas-pricing/layout.tsx b/apps/docs/app/docs/components/saas-pricing/layout.tsx
deleted file mode 100644
index f20fbb5..0000000
--- a/apps/docs/app/docs/components/saas-pricing/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO['saas-pricing']);
-
-export default function SaasPricingLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/saas-pricing/page.tsx b/apps/docs/app/docs/components/saas-pricing/page.tsx
deleted file mode 100644
index 49876c6..0000000
--- a/apps/docs/app/docs/components/saas-pricing/page.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client';
-
-import { SaaSPricing, Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function SaasPricingPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Block Component
-            </Badge>
-            <h1>SaaS Pricing</h1>
-
-            <p>Premium SaaS pricing plans, features matrix, and billing frequency toggles with stark Neo-Brutalist design.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview align="stretch">
-                <SaaSPricing />
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="saas-pricing" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import { SaaSPricing } from "@/components/ui/saas-pricing"
-
-<SaaSPricing />
-
-const customPlans = [
-  {
-    name: "Hobby",
-    description: "For simple personal projects.",
-    priceMonthly: 9,
-    priceAnnually: 7,
-    buttonText: "Start Hobby Plan",
-    buttonVariant: "outline" as const,
-    features: [
-      { text: "1 active project", included: true },
-      { text: "Basic support", included: true },
-      { text: "Custom domains", included: false }
-    ]
-  },
-  {
-    name: "Growth",
-    description: "For commercial operations and scaling teams.",
-    priceMonthly: 29,
-    priceAnnually: 23,
-    popular: true,
-    buttonText: "Upgrade to Growth",
-    buttonVariant: "primary" as const,
-    features: [
-      { text: "Unlimited projects", included: true },
-      { text: "Priority support", included: true },
-      { text: "Custom domains", included: true }
-    ]
-  }
-];
-
-<SaaSPricing
-  plans={customPlans}
-  title="Choose Your Power"
-  subtitle="Start scaling with Neo-Brutalist confidence today."
-/>`}
-            </pre>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/scroll-area/page.tsx b/apps/docs/app/docs/components/scroll-area/page.tsx
deleted file mode 100644
index a80bf90..0000000
--- a/apps/docs/app/docs/components/scroll-area/page.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-'use client';
-
-import { Badge, ScrollArea, ScrollBar, Separator } from '@/components/ui';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function ScrollAreaPage() {
-    const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
-
-    return (
-        <div>
-            <Badge variant="secondary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Scroll Area</h1>
-            <p>
-                Augments native scroll functionality for custom, cross-browser styling. Built on top
-                of Radix UI Scroll Area.
-            </p>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="scroll-area" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-gray-100 p-4 rounded-none border-3 border-black dark:border-white overflow-x-auto">
-                <code>{`import { ScrollArea } from "@/components/ui/scroll-area"
-
-<ScrollArea className="h-[200px] w-[350px] border-3 border-black p-4">
-</ScrollArea>`}</code>
-            </pre>
-
-            <h2>Examples</h2>
-
-            <h3>Vertical Scroll</h3>
-            <p>Default scroll area with vertical scrolling.</p>
-            <div className="border-3 border-black dark:border-white p-6 bg-white dark:bg-gray-900">
-                <ScrollArea className="h-72 w-48 border-3 border-black dark:border-white">
-                    <div className="p-4">
-                        <h4 className="mb-4 text-sm font-black leading-none">Tags</h4>
-                        {tags.map((tag) => (
-                            <div key={tag}>
-                                <div className="text-sm">{tag}</div>
-                                <Separator className="my-2" />
-                            </div>
-                        ))}
-                    </div>
-                </ScrollArea>
-            </div>
-
-            <h3>Horizontal Scroll</h3>
-            <p>Scroll area with horizontal scrolling for wide content.</p>
-            <div className="border-3 border-black dark:border-white p-6 bg-white dark:bg-gray-900">
-                <ScrollArea className="w-96 whitespace-nowrap border-3 border-black dark:border-white">
-                    <div className="flex w-max space-x-4 p-4">
-                        {Array.from({ length: 10 }).map((_, i) => (
-                            <figure key={i} className="shrink-0">
-                                <div className="overflow-hidden border-3 border-black dark:border-white">
-                                    <div className="h-32 w-48 bg-[#4ECDC4] flex items-center justify-center">
-                                        <span className="font-black text-2xl text-black">
-                                            Image {i + 1}
-                                        </span>
-                                    </div>
-                                </div>
-                                <figcaption className="pt-2 text-xs font-bold">
-                                    Photo by Artist {i + 1}
-                                </figcaption>
-                            </figure>
-                        ))}
-                    </div>
-                    <ScrollBar orientation="horizontal" />
-                </ScrollArea>
-            </div>
-
-            <h3>Custom Height</h3>
-            <p>Scroll area with a larger height for more content.</p>
-            <div className="border-3 border-black dark:border-white p-6 bg-white dark:bg-gray-900">
-                <ScrollArea className="h-[400px] w-full max-w-lg border-3 border-black dark:border-white p-4">
-                    <div className="space-y-4">
-                        <h4 className="font-black text-xl">Article Title</h4>
-                        {Array.from({ length: 8 }).map((_, i) => (
-                            <p key={i}>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-                                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-                                ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-                                aliquip ex ea commodo consequat. Duis aute irure dolor in
-                                reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                                pariatur.
-                            </p>
-                        ))}
-                    </div>
-                </ScrollArea>
-            </div>
-
-            <h2>API Reference</h2>
-
-            <h3>ScrollArea</h3>
-            <p>The main container component for scrollable content.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black dark:border-white">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black dark:border-white">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black dark:border-white">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200 dark:border-gray-700">
-                                className
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200 dark:border-gray-700">
-                                string
-                            </td>
-                            <td className="p-3 border-b border-gray-200 dark:border-gray-700">
-                                Additional CSS classes to apply
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200 dark:border-gray-700">
-                                children
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200 dark:border-gray-700">
-                                ReactNode
-                            </td>
-                            <td className="p-3 border-b border-gray-200 dark:border-gray-700">
-                                The scrollable content
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>ScrollBar</h3>
-            <p>Custom scrollbar component for the scroll area.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black dark:border-white">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black dark:border-white">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black dark:border-white">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black dark:border-white">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200 dark:border-gray-700">
-                                orientation
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200 dark:border-gray-700">
-                                "vertical" | "horizontal"
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200 dark:border-gray-700">
-                                "vertical"
-                            </td>
-                            <td className="p-3 border-b border-gray-200 dark:border-gray-700">
-                                The orientation of the scrollbar
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/select/layout.tsx b/apps/docs/app/docs/components/select/layout.tsx
deleted file mode 100644
index d55360e..0000000
--- a/apps/docs/app/docs/components/select/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.select);
-
-export default function SelectLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/select/page.tsx b/apps/docs/app/docs/components/select/page.tsx
deleted file mode 100644
index 51ffec8..0000000
--- a/apps/docs/app/docs/components/select/page.tsx
+++ /dev/null
@@ -1,439 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-    Select,
-    SelectTrigger,
-    SelectValue,
-    SelectContent,
-    SelectItem,
-    SelectGroup,
-    SelectLabel,
-    SelectSeparator,
-    Badge,
-    Label,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function SelectPage() {
-    const [value, setValue] = useState('');
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Select</h1>
-
-            <p>
-                A dropdown select component with Neo-Brutalism styling. Built on Radix UI Select
-                primitive.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="w-full max-w-xs">
-                    <Label htmlFor="fruit">Favorite Fruit</Label>
-                    <Select>
-                        <SelectTrigger id="fruit">
-                            <SelectValue placeholder="Select a fruit" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectLabel>Fruits</SelectLabel>
-                                <SelectItem value="apple">Apple</SelectItem>
-                                <SelectItem value="banana">Banana</SelectItem>
-                                <SelectItem value="orange">Orange</SelectItem>
-                                <SelectItem value="grape">Grape</SelectItem>
-                                <SelectItem value="mango">Mango</SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="select" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  SelectGroup,
-  SelectLabel,
-  SelectSeparator,
-} from "@/components/ui/select"
-
-<Select>
-  <SelectTrigger>
-    <SelectValue placeholder="Select option" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="option1">Option 1</SelectItem>
-    <SelectItem value="option2">Option 2</SelectItem>
-  </SelectContent>
-</Select>`}
-            </pre>
-
-            <h2>Examples</h2>
-
-            <h3>Multiple Groups with Separators</h3>
-            <p>Organize options into groups with labels and separators.</p>
-            <ComponentPreview>
-                <div className="w-full max-w-xs">
-                    <Select>
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select a timezone" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectLabel>North America</SelectLabel>
-                                <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
-                                <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
-                                <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
-                                <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
-                            </SelectGroup>
-                            <SelectSeparator />
-                            <SelectGroup>
-                                <SelectLabel>Europe</SelectLabel>
-                                <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-                                <SelectItem value="cet">Central European Time (CET)</SelectItem>
-                                <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
-                            </SelectGroup>
-                            <SelectSeparator />
-                            <SelectGroup>
-                                <SelectLabel>Asia</SelectLabel>
-                                <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
-                                <SelectItem value="cst-china">China Standard Time (CST)</SelectItem>
-                                <SelectItem value="ist">India Standard Time (IST)</SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </div>
-            </ComponentPreview>
-
-            <h3>Controlled Select</h3>
-            <p>
-                Control the select state programmatically with <code>value</code> and{' '}
-                <code>onValueChange</code>.
-            </p>
-            <ComponentPreview>
-                <div className="space-y-4">
-                    <div className="w-full max-w-xs">
-                        <Select value={value} onValueChange={setValue}>
-                            <SelectTrigger>
-                                <SelectValue placeholder="Select a color" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="red">Red</SelectItem>
-                                <SelectItem value="green">Green</SelectItem>
-                                <SelectItem value="blue">Blue</SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <p className="font-bold">Selected: {value || 'None'}</p>
-                </div>
-            </ComponentPreview>
-
-            <h3>With Disabled Items</h3>
-            <p>
-                Use <code>disabled</code> prop to disable specific options.
-            </p>
-            <ComponentPreview>
-                <div className="w-full max-w-xs">
-                    <Select>
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select a plan" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="free">Free</SelectItem>
-                            <SelectItem value="pro">Pro ($10/month)</SelectItem>
-                            <SelectItem value="enterprise" disabled>
-                                Enterprise (Contact us)
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </div>
-            </ComponentPreview>
-
-            <h3>Disabled Select</h3>
-            <p>Disable the entire select component.</p>
-            <ComponentPreview>
-                <div className="w-full max-w-xs">
-                    <Select disabled>
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select (disabled)" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value="option1">Option 1</SelectItem>
-                            <SelectItem value="option2">Option 2</SelectItem>
-                        </SelectContent>
-                    </Select>
-                </div>
-            </ComponentPreview>
-
-            <h2>API Reference</h2>
-
-            <h3>Select</h3>
-            <p>The root component that manages state.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                value
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">Controlled value</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                onValueChange
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (value: string) =&gt; void
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Callback when value changes
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                defaultValue
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Initial value (uncontrolled)
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">disabled</td>
-                            <td className="p-3 font-mono text-sm">boolean</td>
-                            <td className="p-3 font-mono text-sm">false</td>
-                            <td className="p-3">Disable the select</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>SelectContent</h3>
-            <p>The dropdown content container.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                position
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "popper" | "item-aligned"
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "popper"
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Positioning mode for dropdown
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">side</td>
-                            <td className="p-3 font-mono text-sm">
-                                "top" | "bottom" | "left" | "right"
-                            </td>
-                            <td className="p-3 font-mono text-sm">"bottom"</td>
-                            <td className="p-3">Position relative to trigger</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>SelectItem</h3>
-            <p>Individual option item.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                value
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                required
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Unique value for the option
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">disabled</td>
-                            <td className="p-3 font-mono text-sm">boolean</td>
-                            <td className="p-3 font-mono text-sm">false</td>
-                            <td className="p-3">Disable this option</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>All Exports</h3>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#4ECDC4]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Component
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                Select
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Root component</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectTrigger
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Button that opens dropdown
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectValue
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Displays selected value
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectContent
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Dropdown container</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectItem
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Individual option</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectGroup
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Group options together</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectLabel
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Label for a group</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectSeparator
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Visual divider between groups
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                SelectScrollUpButton
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Scroll up indicator for long lists
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">SelectScrollDownButton</td>
-                            <td className="p-3">Scroll down indicator for long lists</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h2>Accessibility</h2>
-            <ul>
-                <li>
-                    <kbd>Enter</kbd> / <kbd>Space</kbd> opens dropdown and selects item
-                </li>
-                <li>
-                    <kbd>↑</kbd> <kbd>↓</kbd> navigate between options
-                </li>
-                <li>
-                    <kbd>Escape</kbd> closes the dropdown
-                </li>
-                <li>Type to search and focus matching options</li>
-                <li>Full screen reader support</li>
-            </ul>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/separator/layout.tsx b/apps/docs/app/docs/components/separator/layout.tsx
deleted file mode 100644
index ff7fb29..0000000
--- a/apps/docs/app/docs/components/separator/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.separator);
-
-export default function SeparatorLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/separator/page.tsx b/apps/docs/app/docs/components/separator/page.tsx
deleted file mode 100644
index 8060135..0000000
--- a/apps/docs/app/docs/components/separator/page.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client';
-
-import { Separator } from '@/components/ui';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function SeparatorPage() {
-    return (
-        <div className="space-y-8">
-            <div>
-                <h1 className="text-4xl font-black mb-4">Separator</h1>
-                <p className="text-lg text-gray-600 dark:text-gray-300">
-                    A visual divider to separate content sections.
-                </p>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Installation</h2>
-                <InstallationTabs componentName="separator" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Basic Usage</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="space-y-4">
-                        <p className="font-medium">Content above separator</p>
-                        <Separator />
-                        <p className="font-medium">Content below separator</p>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`import { Separator } from "@/components/ui/separator"
-
-<p>Content above separator</p>
-<Separator />
-<p>Content below separator</p>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Horizontal Separator</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="space-y-4">
-                        <h3 className="font-bold text-lg">Section 1</h3>
-                        <p className="text-gray-600 dark:text-gray-300">
-                            Some content for section 1.
-                        </p>
-                        <Separator orientation="horizontal" />
-                        <h3 className="font-bold text-lg">Section 2</h3>
-                        <p className="text-gray-600 dark:text-gray-300">
-                            Some content for section 2.
-                        </p>
-                        <Separator orientation="horizontal" />
-                        <h3 className="font-bold text-lg">Section 3</h3>
-                        <p className="text-gray-600 dark:text-gray-300">
-                            Some content for section 3.
-                        </p>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Separator orientation="horizontal" />`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Vertical Separator</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <div className="flex items-center h-12 gap-4">
-                        <span className="font-medium">Item 1</span>
-                        <Separator orientation="vertical" />
-                        <span className="font-medium">Item 2</span>
-                        <Separator orientation="vertical" />
-                        <span className="font-medium">Item 3</span>
-                    </div>
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<div className="flex items-center h-12 gap-4">
-  <span>Item 1</span>
-  <Separator orientation="vertical" />
-  <span>Item 2</span>
-  <Separator orientation="vertical" />
-  <span>Item 3</span>
-</div>`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Custom Styling</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white space-y-4">
-                    <Separator className="bg-[#FF6B6B]" />
-                    <Separator className="bg-[#4ECDC4]" />
-                    <Separator className="bg-[#FFE66D]" />
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Separator className="bg-[#FF6B6B]" />
-<Separator className="bg-[#4ECDC4]" />
-<Separator className="bg-[#FFE66D]" />`}</code>
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/sheet/page.tsx b/apps/docs/app/docs/components/sheet/page.tsx
deleted file mode 100644
index 6b606f3..0000000
--- a/apps/docs/app/docs/components/sheet/page.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-    Sheet,
-    SheetTrigger,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetDescription,
-    SheetFooter,
-    SheetClose,
-    Button,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function SheetPage() {
-    const [side, setSide] = useState<'top' | 'bottom' | 'left' | 'right'>('right');
-
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Sheet</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A slide-out dashboard overlay drawer supporting all four positions (left, right, top, bottom). Features heavy black outlines and unrounded flat styling.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <div className="flex flex-wrap gap-2">
-                        <Sheet>
-                            <SheetTrigger asChild>
-                                <Button variant="primary">Slide Right (Default)</Button>
-                            </SheetTrigger>
-                            <SheetContent side="right">
-                                <SheetHeader>
-                                    <SheetTitle>Admin Settings</SheetTitle>
-                                    <SheetDescription>
-                                        Configure server endpoints and key values.
-                                    </SheetDescription>
-                                </SheetHeader>
-                                <div className="space-y-4 py-4">
-                                    <p className="text-sm font-bold">Admin Configuration Dashboard</p>
-                                    <div className="h-32 bg-gray-100 dark:bg-gray-800 border-3 border-black flex items-center justify-center font-bold">
-                                        Active settings panel
-                                    </div>
-                                </div>
-                                <SheetFooter>
-                                    <SheetClose asChild>
-                                        <Button variant="outline" className="w-full">Save Changes</Button>
-                                    </SheetClose>
-                                </SheetFooter>
-                            </SheetContent>
-                        </Sheet>
-
-                        <Sheet>
-                            <SheetTrigger asChild>
-                                <Button variant="secondary">Slide Left</Button>
-                            </SheetTrigger>
-                            <SheetContent side="left">
-                                <SheetHeader>
-                                    <SheetTitle>Navigation Menu</SheetTitle>
-                                    <SheetDescription>
-                                        Browse core app structures.
-                                    </SheetDescription>
-                                </SheetHeader>
-                                <div className="space-y-2 py-4">
-                                    <Button variant="outline" className="w-full justify-start font-black">Home</Button>
-                                    <Button variant="outline" className="w-full justify-start font-black">Analytics</Button>
-                                    <Button variant="outline" className="w-full justify-start font-black">Settings</Button>
-                                </div>
-                            </SheetContent>
-                        </Sheet>
-
-                        <Sheet>
-                            <SheetTrigger asChild>
-                                <Button variant="accent">Slide Top</Button>
-                            </SheetTrigger>
-                            <SheetContent side="top">
-                                <SheetHeader>
-                                    <SheetTitle>Announcements</SheetTitle>
-                                    <SheetDescription>
-                                        System-wide broadcast alerts.
-                                    </SheetDescription>
-                                </SheetHeader>
-                                <div className="py-4">
-                                    <div className="p-4 bg-yellow-100 border-3 border-black dark:text-black">
-                                        BrutxUI registry just expanded to 32 active items!
-                                    </div>
-                                </div>
-                            </SheetContent>
-                        </Sheet>
-
-                        <Sheet>
-                            <SheetTrigger asChild>
-                                <Button variant="outline">Slide Bottom</Button>
-                            </SheetTrigger>
-                            <SheetContent side="bottom">
-                                <SheetHeader>
-                                    <SheetTitle>Interactive Terminal</SheetTitle>
-                                    <SheetDescription>
-                                        Run commands directly inside the sandbox container.
-                                    </SheetDescription>
-                                </SheetHeader>
-                                <div className="py-4">
-                                    <pre className="bg-black text-[#6EE7B7] p-3 text-xs font-mono border-3 border-black">
-                                        bash$ pnpm run dev --filter docs
-                                    </pre>
-                                </div>
-                            </SheetContent>
-                        </Sheet>
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="sheet" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-  SheetFooter,
-  SheetClose,
-} from "@/components/ui/sheet"
-import { Button } from "@/components/ui/button"
-
-<Sheet>
-  <SheetTrigger asChild>
-    <Button>Open Sheet</Button>
-  </SheetTrigger>
-  <SheetContent side="right">
-    <SheetHeader>
-      <SheetTitle>Edit Profile</SheetTitle>
-      <SheetDescription>
-        Make changes to your profile here.
-      </SheetDescription>
-    </SheetHeader>
-    <div className="py-4">
-    </div>
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button>Save changes</Button>
-      </SheetClose>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Prop</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Type</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Default</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">side</td>
-                                <td className="p-3 font-mono text-sm">"top" | "bottom" | "left" | "right"</td>
-                                <td className="p-3 font-mono text-sm">"right"</td>
-                                <td className="p-3">The side from which the panel slides open.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">className</td>
-                                <td className="p-3 font-mono text-sm">string</td>
-                                <td className="p-3 font-mono text-sm">-</td>
-                                <td className="p-3">Custom styling classes applied to the sheet drawer container.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <ul className="list-disc pl-5 space-y-1 text-sm">
-                    <li>Utilizes <code>aria-describedby</code> and <code>aria-labelledby</code> to announce title and content.</li>
-                    <li>Ensures full keyboard Esc closure and traps cursor focus layers inside active drawers.</li>
-                    <li>Restores active element focus dynamically upon closing.</li>
-                </ul>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/skeleton/layout.tsx b/apps/docs/app/docs/components/skeleton/layout.tsx
deleted file mode 100644
index 06026eb..0000000
--- a/apps/docs/app/docs/components/skeleton/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.skeleton);
-
-export default function SkeletonLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/skeleton/page.tsx b/apps/docs/app/docs/components/skeleton/page.tsx
deleted file mode 100644
index 9e28177..0000000
--- a/apps/docs/app/docs/components/skeleton/page.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-'use client';
-
-import {
-    Skeleton,
-    SkeletonText,
-    SkeletonAvatar,
-    SkeletonCard,
-    SkeletonTable,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function SkeletonPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Skeleton</h1>
-
-            <p>Skeleton loading placeholder components with Neo-Brutalism styling.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="w-full max-w-sm space-y-4">
-                    <Skeleton className="h-8 w-3/4" />
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-2/3" />
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="skeleton" />
-
-            <h2>Text Skeleton</h2>
-            <ComponentPreview>
-                <div className="w-full max-w-md">
-                    <SkeletonText lines={4} />
-                </div>
-            </ComponentPreview>
-
-            <h2>Avatar Skeleton</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-4">
-                    <SkeletonAvatar size="sm" />
-                    <SkeletonAvatar size="default" />
-                    <SkeletonAvatar size="lg" />
-                    <SkeletonAvatar size="xl" />
-                </div>
-            </ComponentPreview>
-
-            <h2>Card Skeleton</h2>
-            <ComponentPreview className="p-0">
-                <div className="w-full max-w-sm">
-                    <SkeletonCard />
-                </div>
-            </ComponentPreview>
-
-            <h2>Table Skeleton</h2>
-            <ComponentPreview className="p-0">
-                <div className="w-full">
-                    <SkeletonTable rows={3} columns={4} />
-                </div>
-            </ComponentPreview>
-
-            <h2>Variants</h2>
-            <ComponentPreview>
-                <div className="grid grid-cols-2 gap-4 w-full max-w-md">
-                    <div className="space-y-2">
-                        <p className="font-bold text-sm">Default</p>
-                        <Skeleton variant="default" className="h-8" />
-                    </div>
-                    <div className="space-y-2">
-                        <p className="font-bold text-sm">Primary</p>
-                        <Skeleton variant="primary" className="h-8" />
-                    </div>
-                    <div className="space-y-2">
-                        <p className="font-bold text-sm">Secondary</p>
-                        <Skeleton variant="secondary" className="h-8" />
-                    </div>
-                    <div className="space-y-2">
-                        <p className="font-bold text-sm">Accent</p>
-                        <Skeleton variant="accent" className="h-8" />
-                    </div>
-                </div>
-            </ComponentPreview>
-
-            <h2>Props</h2>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Component
-                            </th>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Props
-                            </th>
-                            <th className="px-4 py-2 text-left border-b-3 border-black font-black text-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-gray-900">
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                Skeleton
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                variant, className
-                            </td>
-                            <td className="px-4 py-2 text-sm">Base skeleton element</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                SkeletonText
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                lines, lastLineWidth
-                            </td>
-                            <td className="px-4 py-2 text-sm">Multiple line text skeleton</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                SkeletonAvatar
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                size: sm | default | lg | xl
-                            </td>
-                            <td className="px-4 py-2 text-sm">Avatar placeholder</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                SkeletonCard
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                variant
-                            </td>
-                            <td className="px-4 py-2 text-sm">Card loading state</td>
-                        </tr>
-                        <tr>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                SkeletonTable
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                rows, columns
-                            </td>
-                            <td className="px-4 py-2 text-sm">Table loading state</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/slider/page.tsx b/apps/docs/app/docs/components/slider/page.tsx
deleted file mode 100644
index 83c0e73..0000000
--- a/apps/docs/app/docs/components/slider/page.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-    Slider,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function SliderPage() {
-    const [value, setValue] = useState([40]);
-
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Slider</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    An interactive range selector input allowing users to slide and choose single values. Adheres to brutalist guidelines with neon tracks, heavy circular grab thumbs, and scale micro-interactions.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <div className="w-full max-w-sm space-y-4">
-                        <Slider
-                            defaultValue={[40]}
-                            max={100}
-                            step={1}
-                            onValueChange={setValue}
-                        />
-                        <p className="text-sm font-black bg-[#FF6B6B] text-black px-3 py-1 border-3 border-black w-fit">
-                            Range Value: {value[0]}
-                        </p>
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="slider" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { Slider } from "@/components/ui/slider"
-
-<Slider defaultValue={[50]} max={100} step={1} />`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Examples</h2>
-
-                <h3>Disabled State</h3>
-                <p>Disabled sliders prevent pointer inputs, scale hover animations, and inherit a semi-transparent opacity layout.</p>
-                <ComponentPreview>
-                    <div className="w-full max-w-sm opacity-50">
-                        <Slider
-                            defaultValue={[65]}
-                            max={100}
-                            step={1}
-                            disabled
-                        />
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Prop</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Type</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Default</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">defaultValue</td>
-                                <td className="p-3 font-mono text-sm">number[]</td>
-                                <td className="p-3 font-mono text-sm">-</td>
-                                <td className="p-3">Initial slider thumb value array.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">max</td>
-                                <td className="p-3 font-mono text-sm">number</td>
-                                <td className="p-3 font-mono text-sm">100</td>
-                                <td className="p-3">Maximum allowed numerical value.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">step</td>
-                                <td className="p-3 font-mono text-sm">number</td>
-                                <td className="p-3 font-mono text-sm">1</td>
-                                <td className="p-3">Step increment value.</td>
-                            </tr>
-                            <tr>
-                                <td className="p-3 font-mono text-sm">disabled</td>
-                                <td className="p-3 font-mono text-sm">boolean</td>
-                                <td className="p-3 font-mono text-sm">false</td>
-                                <td className="p-3">Prevents slider interaction.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <div className="p-4 bg-yellow-50 dark:bg-yellow-950 border-3 border-black dark:border-white space-y-2">
-                    <p className="font-bold text-black dark:text-white">Keyboard Navigation Key Rules:</p>
-                    <ul className="list-disc pl-5 space-y-1 text-sm">
-                        <li><code>ArrowRight / ArrowUp</code>: Increments the value by one step.</li>
-                        <li><code>ArrowLeft / ArrowDown</code>: Decrements the value by one step.</li>
-                        <li><code>Home</code>: Sets the value to its minimum.</li>
-                        <li><code>End</code>: Sets the value to its maximum.</li>
-                    </ul>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/spinner/layout.tsx b/apps/docs/app/docs/components/spinner/layout.tsx
deleted file mode 100644
index 3f2e0ac..0000000
--- a/apps/docs/app/docs/components/spinner/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.spinner);
-
-export default function SpinnerLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/spinner/page.tsx b/apps/docs/app/docs/components/spinner/page.tsx
deleted file mode 100644
index b362978..0000000
--- a/apps/docs/app/docs/components/spinner/page.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-'use client';
-
-import { Spinner, BlockSpinner, DotsSpinner, BarsSpinner, Badge } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function SpinnerPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Spinner</h1>
-
-            <p>Loading spinner components with Neo-Brutalism styling. Multiple styles available.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-12">
-                    <div className="flex flex-col items-center gap-2">
-                        <Spinner />
-                        <span className="text-xs font-bold">Spinner</span>
-                    </div>
-                    <div className="flex flex-col items-center gap-2">
-                        <BlockSpinner />
-                        <span className="text-xs font-bold">Block</span>
-                    </div>
-                    <div className="flex flex-col items-center gap-2">
-                        <DotsSpinner />
-                        <span className="text-xs font-bold">Dots</span>
-                    </div>
-                    <div className="flex flex-col items-center gap-2">
-                        <BarsSpinner />
-                        <span className="text-xs font-bold">Bars</span>
-                    </div>
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="spinner" />
-
-            <h2>Spinner Sizes</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-8">
-                    <Spinner size="sm" />
-                    <Spinner size="default" />
-                    <Spinner size="lg" />
-                    <Spinner size="xl" />
-                </div>
-            </ComponentPreview>
-
-            <h2>Spinner Variants</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-8">
-                    <Spinner variant="default" />
-                    <Spinner variant="primary" />
-                    <Spinner variant="secondary" />
-                    <Spinner variant="accent" />
-                </div>
-            </ComponentPreview>
-
-            <h2>Block Spinner Colors</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-8">
-                    <BlockSpinner color="default" />
-                    <BlockSpinner color="primary" />
-                    <BlockSpinner color="secondary" />
-                    <BlockSpinner color="accent" />
-                    <BlockSpinner color="mixed" />
-                </div>
-            </ComponentPreview>
-
-            <h2>Dots Spinner</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-8">
-                    <DotsSpinner size="sm" color="default" />
-                    <DotsSpinner size="default" color="primary" />
-                    <DotsSpinner size="lg" color="secondary" />
-                    <DotsSpinner size="xl" color="accent" />
-                </div>
-            </ComponentPreview>
-
-            <h2>Bars Spinner</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-8">
-                    <BarsSpinner size="sm" color="default" />
-                    <BarsSpinner size="default" color="primary" />
-                    <BarsSpinner size="lg" color="secondary" />
-                    <BarsSpinner size="xl" color="mixed" />
-                </div>
-            </ComponentPreview>
-
-            <h2>Props</h2>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Component
-                            </th>
-                            <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black font-black text-black">
-                                Props
-                            </th>
-                            <th className="px-4 py-2 text-left border-b-3 border-black font-black text-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white dark:bg-gray-900">
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                Spinner
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                size, variant
-                            </td>
-                            <td className="px-4 py-2 text-sm">Circular spinning loader</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                BlockSpinner
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                size, color
-                            </td>
-                            <td className="px-4 py-2 text-sm">4 pulsing blocks in grid</td>
-                        </tr>
-                        <tr className="border-b-3 border-black dark:border-white">
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                DotsSpinner
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                size, color
-                            </td>
-                            <td className="px-4 py-2 text-sm">3 bouncing dots</td>
-                        </tr>
-                        <tr>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white font-medium">
-                                BarsSpinner
-                            </td>
-                            <td className="px-4 py-2 border-r-3 border-black dark:border-white text-sm">
-                                size, color
-                            </td>
-                            <td className="px-4 py-2 text-sm">5 animated vertical bars</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/submit-button/page.tsx b/apps/docs/app/docs/components/submit-button/page.tsx
deleted file mode 100644
index 0cc4d0a..0000000
--- a/apps/docs/app/docs/components/submit-button/page.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-'use client';
-
-import { CodeBlock } from '@/components/code-block';
-import { Button, Badge, Tabs, TabsContent, TabsList, TabsTrigger, Card } from '@/components/ui';
-import { Rocket, Zap, Loader2 } from 'lucide-react';
-import Link from 'next/link';
-import { useState } from 'react';
-
-export default function SubmitButtonPage() {
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    const handleDemoSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setIsSubmitting(true);
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-        setIsSubmitting(false);
-    };
-
-    const usageCode = `import { SubmitButton } from '@/components/ui/submit-button';`;
-
-    const basicExampleCode = `async function submitAction(formData: FormData) {
-    'use server';
-    await saveToDatabase(formData);
-}
-
-export function ContactForm() {
-    return (
-        <form action={submitAction}>
-            <Input name="email" placeholder="Email" />
-            <SubmitButton>
-                Send Message
-            </SubmitButton>
-        </form>
-    );
-}`;
-
-    const pendingTextCode = `<SubmitButton pendingText="Submitting...">
-    Submit Form
-</SubmitButton>`;
-
-    const variantsCode = `<SubmitButton variant="default">Default</SubmitButton>
-<SubmitButton variant="secondary">Secondary</SubmitButton>
-<SubmitButton variant="danger">Delete</SubmitButton>
-<SubmitButton variant="outline">Outline</SubmitButton>`;
-
-    const manualInstallCode = `'use client';
-
-import { useFormStatus } from 'react-dom';
-import { Button, type ButtonProps } from './button';
-
-export interface SubmitButtonProps extends ButtonProps {
-    pendingText?: string;
-}
-
-function SubmitButton({
-    children,
-    pendingText,
-    disabled,
-    ...props
-}: SubmitButtonProps) {
-    const { pending } = useFormStatus();
-
-    return (
-        <Button
-            type="submit"
-            disabled={disabled || pending}
-            loading={pending}
-            {...props}
-        >
-            {pending && pendingText ? pendingText : children}
-        </Button>
-    );
-}
-
-SubmitButton.displayName = 'SubmitButton';
-
-export { SubmitButton };`;
-
-    return (
-        <div className="space-y-8">
-            <div className="space-y-4">
-                <div className="flex items-center gap-3">
-                    <h1 className="text-4xl font-black">Submit Button</h1>
-                    <Badge className="bg-green-500 text-white border-black">React 19</Badge>
-                </div>
-                <p className="text-lg text-gray-600 dark:text-gray-400">
-                    A button that automatically shows loading state when used with Server Actions.
-                    Leverages React 19's{' '}
-                    <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">useFormStatus</code>{' '}
-                    hook.
-                </p>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <Card className="p-4 border-2 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
-                    <div className="flex items-center gap-2 mb-2">
-                        <Zap className="h-5 w-5 text-yellow-500" />
-                        <h3 className="font-bold">Auto Loading State</h3>
-                    </div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Automatically detects when form is submitting and shows loading spinner.
-                    </p>
-                </Card>
-                <Card className="p-4 border-2 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
-                    <div className="flex items-center gap-2 mb-2">
-                        <Rocket className="h-5 w-5 text-blue-500" />
-                        <h3 className="font-bold">Server Actions Ready</h3>
-                    </div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Built for React 19 Server Actions. Works with Next.js form actions.
-                    </p>
-                </Card>
-                <Card className="p-4 border-2 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
-                    <div className="flex items-center gap-2 mb-2">
-                        <Loader2 className="h-5 w-5 text-purple-500" />
-                        <h3 className="font-bold">Custom Pending Text</h3>
-                    </div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Optionally show different text while form is submitting.
-                    </p>
-                </Card>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-
-                <Tabs defaultValue="cli">
-                    <TabsList className="border-2 border-black dark:border-white">
-                        <TabsTrigger value="cli" className="font-bold">
-                            CLI
-                        </TabsTrigger>
-                        <TabsTrigger value="manual" className="font-bold">
-                            Manual
-                        </TabsTrigger>
-                    </TabsList>
-
-                    <TabsContent value="cli" className="mt-4">
-                        <CodeBlock preClassName="rounded-lg border-2">
-                            {'npx brutx@latest add submit-button'}
-                        </CodeBlock>
-                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                            Note: This will also add the{' '}
-                            <Link href="/docs/components/button" className="underline">
-                                Button
-                            </Link>{' '}
-                            component if not already installed.
-                        </p>
-                    </TabsContent>
-
-                    <TabsContent value="manual" className="mt-4 space-y-4">
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                            Make sure you have the{' '}
-                            <Link href="/docs/components/button" className="underline">
-                                Button
-                            </Link>{' '}
-                            component installed first.
-                        </p>
-                        <CodeBlock preClassName="rounded-lg border-2 text-sm">{manualInstallCode}</CodeBlock>
-                    </TabsContent>
-                </Tabs>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <CodeBlock preClassName="rounded-lg border-2">{usageCode}</CodeBlock>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Demo</h2>
-                <Card className="p-6 border-2 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
-                    <form onSubmit={handleDemoSubmit} className="space-y-4">
-                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                            Click the button to see the loading state (simulated 2 second delay):
-                        </p>
-                        <Button type="submit" loading={isSubmitting} disabled={isSubmitting}>
-                            {isSubmitting ? 'Submitting...' : 'Submit Form'}
-                        </Button>
-                    </form>
-                </Card>
-            </section>
-
-            <section className="space-y-6">
-                <h2 className="text-2xl font-black">Examples</h2>
-
-                <div className="space-y-3">
-                    <h3 className="text-lg font-bold">With Server Actions</h3>
-                    <CodeBlock preClassName="rounded-lg border-2 text-sm">{basicExampleCode}</CodeBlock>
-                </div>
-
-                <div className="space-y-3">
-                    <h3 className="text-lg font-bold">Custom Pending Text</h3>
-                    <CodeBlock preClassName="rounded-lg border-2">{pendingTextCode}</CodeBlock>
-                </div>
-
-                <div className="space-y-3">
-                    <h3 className="text-lg font-bold">All Variants</h3>
-                    <Card className="p-6 border-2 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
-                        <div className="flex flex-wrap gap-3">
-                            <Button>Default</Button>
-                            <Button variant="secondary">Secondary</Button>
-                            <Button variant="danger">Danger</Button>
-                            <Button variant="outline">Outline</Button>
-                        </div>
-                    </Card>
-                    <CodeBlock preClassName="rounded-lg border-2">{variantsCode}</CodeBlock>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Props</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-2 border-black dark:border-white">
-                        <thead>
-                            <tr className="bg-gray-100 dark:bg-gray-800 border-b-2 border-black dark:border-white">
-                                <th className="text-left p-3 font-bold border-r-2 border-black dark:border-white">
-                                    Prop
-                                </th>
-                                <th className="text-left p-3 font-bold border-r-2 border-black dark:border-white">
-                                    Type
-                                </th>
-                                <th className="text-left p-3 font-bold border-r-2 border-black dark:border-white">
-                                    Default
-                                </th>
-                                <th className="text-left p-3 font-bold">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-3 font-mono text-sm border-r-2 border-black dark:border-white">
-                                    pendingText
-                                </td>
-                                <td className="p-3 font-mono text-sm border-r-2 border-black dark:border-white">
-                                    string
-                                </td>
-                                <td className="p-3 border-r-2 border-black dark:border-white">-</td>
-                                <td className="p-3 text-sm">
-                                    Text to show while form is submitting
-                                </td>
-                            </tr>
-                            <tr className="border-b border-gray-200 dark:border-gray-700">
-                                <td className="p-3 font-mono text-sm border-r-2 border-black dark:border-white">
-                                    ...props
-                                </td>
-                                <td className="p-3 font-mono text-sm border-r-2 border-black dark:border-white">
-                                    ButtonProps
-                                </td>
-                                <td className="p-3 border-r-2 border-black dark:border-white">-</td>
-                                <td className="p-3 text-sm">All Button props are supported</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Requirements</h2>
-                <Card className="p-4 border-2 border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20">
-                    <ul className="list-disc list-inside space-y-2 text-sm">
-                        <li>
-                            <strong>React 19+</strong> - Uses{' '}
-                            <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">
-                                useFormStatus
-                            </code>{' '}
-                            hook
-                        </li>
-                        <li>
-                            <strong>Must be inside a form</strong> - The button must be a descendant
-                            of a{' '}
-                            <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">
-                                &lt;form&gt;
-                            </code>{' '}
-                            element
-                        </li>
-                        <li>
-                            <strong>Client Component</strong> - Must be used in a client component (
-                            <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded">
-                                'use client'
-                            </code>
-                            )
-                        </li>
-                    </ul>
-                </Card>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/switch/layout.tsx b/apps/docs/app/docs/components/switch/layout.tsx
deleted file mode 100644
index 5ed96dc..0000000
--- a/apps/docs/app/docs/components/switch/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.switch);
-
-export default function SwitchLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/switch/page.tsx b/apps/docs/app/docs/components/switch/page.tsx
deleted file mode 100644
index 45455f3..0000000
--- a/apps/docs/app/docs/components/switch/page.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import { Switch, Label, Badge, Card, CardContent } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import * as React from 'react';
-
-export default function SwitchPage() {
-    const [enabled, setEnabled] = React.useState(false);
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Switch</h1>
-
-            <p>A toggle switch control with Neo-Brutalism styling.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-3">
-                    <Switch id="airplane" checked={enabled} onCheckedChange={setEnabled} />
-                    <Label htmlFor="airplane">Airplane Mode</Label>
-                </div>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="switch" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import { Switch } from "@/components/ui/switch"
-import { Label } from "@/components/ui/label"
-
-const [enabled, setEnabled] = React.useState(false);
-
-<div className="flex items-center gap-3">
-  <Switch
-    id="setting"
-    checked={enabled}
-    onCheckedChange={setEnabled}
-  />
-  <Label htmlFor="setting">Enable Feature</Label>
-</div>`}
-            </pre>
-
-            <h2>Disabled State</h2>
-            <ComponentPreview>
-                <div className="flex items-center gap-3">
-                    <Switch id="disabled" disabled />
-                    <Label htmlFor="disabled" className="opacity-50">
-                        Disabled Switch
-                    </Label>
-                </div>
-            </ComponentPreview>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/table/layout.tsx b/apps/docs/app/docs/components/table/layout.tsx
deleted file mode 100644
index 2a4527a..0000000
--- a/apps/docs/app/docs/components/table/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.table);
-
-export default function TableLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/table/page.tsx b/apps/docs/app/docs/components/table/page.tsx
deleted file mode 100644
index 02e0d01..0000000
--- a/apps/docs/app/docs/components/table/page.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client';
-
-import {
-    Table,
-    TableHeader,
-    TableBody,
-    TableHead,
-    TableRow,
-    TableCell,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-const invoices = [
-    { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
-    { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
-    { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
-    { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
-];
-
-export default function TablePage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Table</h1>
-
-            <p>A Neo-Brutalism styled table component for displaying tabular data.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview className="p-0">
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            <TableHead>Invoice</TableHead>
-                            <TableHead>Status</TableHead>
-                            <TableHead>Method</TableHead>
-                            <TableHead>Amount</TableHead>
-                        </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                        {invoices.map((invoice) => (
-                            <TableRow key={invoice.invoice}>
-                                <TableCell className="font-bold">{invoice.invoice}</TableCell>
-                                <TableCell>
-                                    <Badge
-                                        variant={
-                                            invoice.status === 'Paid'
-                                                ? 'success'
-                                                : invoice.status === 'Pending'
-                                                ? 'accent'
-                                                : 'danger'
-                                        }
-                                        size="sm"
-                                    >
-                                        {invoice.status}
-                                    </Badge>
-                                </TableCell>
-                                <TableCell>{invoice.method}</TableCell>
-                                <TableCell>{invoice.amount}</TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="table" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableHead,
-  TableRow,
-  TableCell,
-} from "@/components/ui/table"
-
-<Table>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Name</TableHead>
-      <TableHead>Email</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>John Doe</TableCell>
-      <TableCell>john@example.com</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>`}
-            </pre>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/tabs/layout.tsx b/apps/docs/app/docs/components/tabs/layout.tsx
deleted file mode 100644
index 9050347..0000000
--- a/apps/docs/app/docs/components/tabs/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.tabs);
-
-export default function TabsLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/tabs/page.tsx b/apps/docs/app/docs/components/tabs/page.tsx
deleted file mode 100644
index 0beed91..0000000
--- a/apps/docs/app/docs/components/tabs/page.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import {
-    Tabs,
-    TabsList,
-    TabsTrigger,
-    TabsContent,
-    Badge,
-    Card,
-    CardContent,
-    Input,
-    Label,
-    Button,
-    Checkbox,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function TabsPage() {
-    const [activeTab, setActiveTab] = useState('account');
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Tabs</h1>
-
-            <p>
-                A set of layered sections of content with Neo-Brutalism styling. Built on Radix UI
-                Tabs primitive.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <Tabs defaultValue="account" className="w-full max-w-md">
-                    <TabsList>
-                        <TabsTrigger value="account">Account</TabsTrigger>
-                        <TabsTrigger value="password">Password</TabsTrigger>
-                        <TabsTrigger value="settings">Settings</TabsTrigger>
-                    </TabsList>
-                    <TabsContent value="account">
-                        <p className="font-medium">
-                            Manage your account settings and preferences here.
-                        </p>
-                    </TabsContent>
-                    <TabsContent value="password">
-                        <p className="font-medium">Change your password and security settings.</p>
-                    </TabsContent>
-                    <TabsContent value="settings">
-                        <p className="font-medium">
-                            Configure application settings and preferences.
-                        </p>
-                    </TabsContent>
-                </Tabs>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="tabs" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "@/components/ui/tabs"
-
-<Tabs defaultValue="tab1">
-  <TabsList>
-    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab1">
-    Content for tab 1
-  </TabsContent>
-  <TabsContent value="tab2">
-    Content for tab 2
-  </TabsContent>
-</Tabs>`}
-            </pre>
-
-            <h2>Examples</h2>
-
-            <h3>Controlled Tabs</h3>
-            <p>
-                Control tab state with <code>value</code> and <code>onValueChange</code>.
-            </p>
-            <ComponentPreview>
-                <div className="space-y-4 w-full max-w-md">
-                    <Tabs value={activeTab} onValueChange={setActiveTab}>
-                        <TabsList>
-                            <TabsTrigger value="account">Account</TabsTrigger>
-                            <TabsTrigger value="password">Password</TabsTrigger>
-                        </TabsList>
-                        <TabsContent value="account">
-                            <p className="font-medium">Account settings panel</p>
-                        </TabsContent>
-                        <TabsContent value="password">
-                            <p className="font-medium">Password settings panel</p>
-                        </TabsContent>
-                    </Tabs>
-                    <div className="flex gap-2">
-                        <Button size="sm" onClick={() => setActiveTab('account')}>
-                            Go to Account
-                        </Button>
-                        <Button size="sm" onClick={() => setActiveTab('password')}>
-                            Go to Password
-                        </Button>
-                    </div>
-                </div>
-            </ComponentPreview>
-
-            <h3>With Disabled Tab</h3>
-            <p>
-                Use <code>disabled</code> prop to disable specific tabs.
-            </p>
-            <ComponentPreview>
-                <Tabs defaultValue="overview" className="w-full max-w-md">
-                    <TabsList>
-                        <TabsTrigger value="overview">Overview</TabsTrigger>
-                        <TabsTrigger value="analytics">Analytics</TabsTrigger>
-                        <TabsTrigger value="reports" disabled>
-                            Reports (Coming Soon)
-                        </TabsTrigger>
-                    </TabsList>
-                    <TabsContent value="overview">
-                        <p className="font-medium">Project overview and summary.</p>
-                    </TabsContent>
-                    <TabsContent value="analytics">
-                        <p className="font-medium">View detailed analytics and metrics.</p>
-                    </TabsContent>
-                    <TabsContent value="reports">
-                        <p className="font-medium">Reports feature coming soon!</p>
-                    </TabsContent>
-                </Tabs>
-            </ComponentPreview>
-
-            <h3>With Form Content</h3>
-            <p>Tabs containing form inputs.</p>
-            <ComponentPreview>
-                <Tabs defaultValue="profile" className="w-full max-w-md">
-                    <TabsList>
-                        <TabsTrigger value="profile">Profile</TabsTrigger>
-                        <TabsTrigger value="notifications">Notifications</TabsTrigger>
-                    </TabsList>
-                    <TabsContent value="profile">
-                        <div className="space-y-4">
-                            <div>
-                                <Label htmlFor="name">Display Name</Label>
-                                <Input id="name" placeholder="Enter your name" />
-                            </div>
-                            <div>
-                                <Label htmlFor="username">Username</Label>
-                                <Input id="username" placeholder="@username" />
-                            </div>
-                            <Button variant="primary">Save Profile</Button>
-                        </div>
-                    </TabsContent>
-                    <TabsContent value="notifications">
-                        <div className="space-y-4">
-                            <p className="font-medium">Notification preferences</p>
-                            <div className="space-y-3">
-                                <div className="flex items-center gap-3">
-                                    <Checkbox id="email-notif" defaultChecked />
-                                    <Label htmlFor="email-notif">Email notifications</Label>
-                                </div>
-                                <div className="flex items-center gap-3">
-                                    <Checkbox id="push-notif" />
-                                    <Label htmlFor="push-notif">Push notifications</Label>
-                                </div>
-                            </div>
-                            <Button variant="primary">Save Preferences</Button>
-                        </div>
-                    </TabsContent>
-                </Tabs>
-            </ComponentPreview>
-
-            <h3>Full Width Tabs</h3>
-            <p>Make tabs stretch to fill the container width.</p>
-            <ComponentPreview>
-                <Tabs defaultValue="tab1" className="w-full max-w-md">
-                    <TabsList className="w-full grid grid-cols-3">
-                        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-                        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-                        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
-                    </TabsList>
-                    <TabsContent value="tab1">
-                        <p className="font-medium">Content for the first tab.</p>
-                    </TabsContent>
-                    <TabsContent value="tab2">
-                        <p className="font-medium">Content for the second tab.</p>
-                    </TabsContent>
-                    <TabsContent value="tab3">
-                        <p className="font-medium">Content for the third tab.</p>
-                    </TabsContent>
-                </Tabs>
-            </ComponentPreview>
-
-            <h2>API Reference</h2>
-
-            <h3>Tabs</h3>
-            <p>Root component that manages tab state.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                defaultValue
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Initial active tab (uncontrolled)
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                value
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Controlled active tab value
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                onValueChange
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (value: string) =&gt; void
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Callback when tab changes
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">orientation</td>
-                            <td className="p-3 font-mono text-sm">"horizontal" | "vertical"</td>
-                            <td className="p-3 font-mono text-sm">"horizontal"</td>
-                            <td className="p-3">Tab orientation</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>TabsTrigger</h3>
-            <p>Individual tab button.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                value
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                required
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Unique identifier for the tab
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">disabled</td>
-                            <td className="p-3 font-mono text-sm">boolean</td>
-                            <td className="p-3 font-mono text-sm">false</td>
-                            <td className="p-3">Disable this tab</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>TabsContent</h3>
-            <p>Content panel for a tab.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                value
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                required
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Must match a TabsTrigger value
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">forceMount</td>
-                            <td className="p-3 font-mono text-sm">boolean</td>
-                            <td className="p-3 font-mono text-sm">false</td>
-                            <td className="p-3">Keep content mounted even when inactive</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>All Exports</h3>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#4ECDC4]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Component
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">Tabs</td>
-                            <td className="p-3 border-b border-gray-200">Root container</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                TabsList
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Container for tab triggers
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                TabsTrigger
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Individual tab button</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">TabsContent</td>
-                            <td className="p-3">Tab content panel</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h2>Accessibility</h2>
-            <ul>
-                <li>
-                    <kbd>Tab</kbd> moves focus to the active tab
-                </li>
-                <li>
-                    <kbd>←</kbd> <kbd>→</kbd> navigate between tabs (horizontal)
-                </li>
-                <li>
-                    <kbd>↑</kbd> <kbd>↓</kbd> navigate between tabs (vertical)
-                </li>
-                <li>
-                    <kbd>Home</kbd> / <kbd>End</kbd> move to first/last tab
-                </li>
-                <li>
-                    <kbd>Enter</kbd> / <kbd>Space</kbd> activates focused tab
-                </li>
-            </ul>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/textarea/layout.tsx b/apps/docs/app/docs/components/textarea/layout.tsx
deleted file mode 100644
index 0d134e6..0000000
--- a/apps/docs/app/docs/components/textarea/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.textarea);
-
-export default function TextareaLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/textarea/page.tsx b/apps/docs/app/docs/components/textarea/page.tsx
deleted file mode 100644
index 995a2fb..0000000
--- a/apps/docs/app/docs/components/textarea/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client';
-
-import { Textarea } from '@/components/ui';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function TextareaPage() {
-    return (
-        <div className="space-y-8">
-            <div>
-                <h1 className="text-4xl font-black mb-4">Textarea</h1>
-                <p className="text-lg text-gray-600 dark:text-gray-300">
-                    A multi-line text input component with Neo-Brutalism styling.
-                </p>
-            </div>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Installation</h2>
-                <InstallationTabs componentName="textarea" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Basic Usage</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <Textarea placeholder="Enter your message..." />
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`import { Textarea } from "@/components/ui/textarea"
-
-<Textarea placeholder="Enter your message..." />`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Sizes</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white space-y-4">
-                    <Textarea textareaSize="sm" placeholder="Small textarea" />
-                    <Textarea textareaSize="default" placeholder="Default textarea" />
-                    <Textarea textareaSize="lg" placeholder="Large textarea" />
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Textarea textareaSize="sm" placeholder="Small textarea" />
-<Textarea textareaSize="default" placeholder="Default textarea" />
-<Textarea textareaSize="lg" placeholder="Large textarea" />`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Variants</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white space-y-4">
-                    <Textarea variant="default" placeholder="Default variant" />
-                    <Textarea variant="error" placeholder="Error variant" />
-                    <Textarea variant="success" placeholder="Success variant" />
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Textarea variant="default" placeholder="Default variant" />
-<Textarea variant="error" placeholder="Error variant" />
-<Textarea variant="success" placeholder="Success variant" />`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Disabled</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <Textarea disabled placeholder="Disabled textarea" />
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Textarea disabled placeholder="Disabled textarea" />`}</code>
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-bold">Custom Rows</h2>
-                <div className="p-6 bg-white dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <Textarea rows={6} placeholder="Textarea with 6 rows..." />
-                </div>
-                <pre className="p-4 bg-gray-100 dark:bg-gray-800 border-3 border-black dark:border-white overflow-x-auto">
-                    <code>{`<Textarea rows={6} placeholder="Textarea with 6 rows..." />`}</code>
-                </pre>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/toast/layout.tsx b/apps/docs/app/docs/components/toast/layout.tsx
deleted file mode 100644
index d9421c5..0000000
--- a/apps/docs/app/docs/components/toast/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.toast);
-
-export default function ToastLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/toast/page.tsx b/apps/docs/app/docs/components/toast/page.tsx
deleted file mode 100644
index 5c10ae8..0000000
--- a/apps/docs/app/docs/components/toast/page.tsx
+++ /dev/null
@@ -1,546 +0,0 @@
-'use client';
-
-import { Toast, ToastContainer, Button, Badge, useToast } from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-import { Rocket } from 'lucide-react';
-import * as React from 'react';
-
-export default function ToastPage() {
-    const { toasts, addToast, removeToast, success, error, warning, info, clearToasts } =
-        useToast();
-
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Toast</h1>
-
-            <p>Toast notification component with Neo-Brutalism styling.</p>
-
-            <h2>Preview</h2>
-            <ComponentPreview className="flex-col items-stretch gap-4">
-                <Toast
-                    variant="default"
-                    title="Default Toast"
-                    description="This is a default toast message."
-                />
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="toast" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import { Toast, ToastContainer, useToast } from "@/components/ui/toast"
-
-function MyComponent() {
-  const { toasts, addToast, removeToast, success, error } = useToast();
-
-  return (
-    <>
-      <Button onClick={() => success('Saved!', 'Changes saved successfully.')}>
-        Save
-      </Button>
-
-      <ToastContainer position="bottom-right">
-        {toasts.map((toast) => (
-          <Toast
-            key={toast.id}
-            variant={toast.variant}
-            title={toast.title}
-            description={toast.description}
-            onClose={() => removeToast(toast.id)}
-          />
-        ))}
-      </ToastContainer>
-    </>
-  );
-}`}
-            </pre>
-
-            <h2>Examples</h2>
-
-            <h3>All Variants</h3>
-            <div className="space-y-4 my-4">
-                <Toast
-                    variant="default"
-                    title="Default"
-                    description="This is a default notification."
-                />
-                <Toast
-                    variant="success"
-                    title="Success!"
-                    description="Your action was completed successfully."
-                />
-                <Toast
-                    variant="error"
-                    title="Error"
-                    description="Something went wrong. Please try again."
-                />
-                <Toast
-                    variant="warning"
-                    title="Warning"
-                    description="Please review before proceeding."
-                />
-                <Toast variant="info" title="Info" description="Here's some helpful information." />
-            </div>
-
-            <h3>Different Sizes</h3>
-            <p>
-                Use <code>size</code> prop to control toast width.
-            </p>
-            <div className="space-y-4 my-4">
-                <Toast
-                    variant="success"
-                    size="sm"
-                    title="Small Toast"
-                    description="Compact notification."
-                />
-                <Toast
-                    variant="success"
-                    size="default"
-                    title="Default Toast"
-                    description="Standard width notification."
-                />
-                <Toast
-                    variant="success"
-                    size="lg"
-                    title="Large Toast"
-                    description="Wider notification for more content."
-                />
-            </div>
-
-            <h3>Custom Icon</h3>
-            <p>
-                Use <code>icon</code> prop to provide a custom icon.
-            </p>
-            <div className="space-y-4 my-4">
-                <Toast
-                    variant="default"
-                    title="Custom Icon"
-                    description="This toast has a custom rocket icon."
-                    icon={<Rocket className="h-6 w-6 stroke-2" />}
-                />
-            </div>
-
-            <h3>With Action Button</h3>
-            <p>
-                Use <code>action</code> prop to add action buttons.
-            </p>
-            <div className="space-y-4 my-4">
-                <Toast
-                    variant="default"
-                    title="New Update Available"
-                    description="A new version is ready to install."
-                    action={
-                        <Button size="sm" variant="primary">
-                            Update Now
-                        </Button>
-                    }
-                />
-                <Toast
-                    variant="error"
-                    title="Connection Lost"
-                    description="Unable to connect to the server."
-                    action={
-                        <div className="flex gap-2">
-                            <Button size="sm" variant="outline">
-                                Dismiss
-                            </Button>
-                            <Button size="sm" variant="danger">
-                                Retry
-                            </Button>
-                        </div>
-                    }
-                />
-            </div>
-
-            <h3>Interactive Example</h3>
-            <p>Try different toast types and positions.</p>
-            <ComponentPreview>
-                <div className="flex flex-wrap gap-2">
-                    <Button
-                        variant="success"
-                        size="sm"
-                        onClick={() => success('Success!', 'Your changes have been saved.')}
-                    >
-                        Show Success
-                    </Button>
-                    <Button
-                        variant="danger"
-                        size="sm"
-                        onClick={() => error('Error!', 'Something went wrong.')}
-                    >
-                        Show Error
-                    </Button>
-                    <Button
-                        variant="accent"
-                        size="sm"
-                        onClick={() => warning('Warning', 'Please check your input.')}
-                    >
-                        Show Warning
-                    </Button>
-                    <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={() => info('Info', 'Here is some information.')}
-                    >
-                        Show Info
-                    </Button>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() =>
-                            addToast({
-                                variant: 'default',
-                                title: 'With Action',
-                                description: 'This toast has an action button.',
-                                action: (
-                                    <Button size="sm" variant="primary">
-                                        Take Action
-                                    </Button>
-                                ),
-                            })
-                        }
-                    >
-                        With Action
-                    </Button>
-                    {toasts.length > 0 && (
-                        <Button variant="outline" size="sm" onClick={clearToasts}>
-                            Clear All
-                        </Button>
-                    )}
-                </div>
-            </ComponentPreview>
-
-            <ToastContainer position="bottom-right">
-                {toasts.map((toast) => (
-                    <Toast
-                        key={toast.id}
-                        variant={toast.variant}
-                        title={toast.title}
-                        description={toast.description}
-                        duration={toast.duration}
-                        action={toast.action}
-                        onClose={() => removeToast(toast.id)}
-                    />
-                ))}
-            </ToastContainer>
-
-            <h2>API Reference</h2>
-
-            <h3>Toast</h3>
-            <p>Individual toast notification component.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                variant
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "default" | "success" | "error" | "warning" | "info"
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "default"
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Toast style variant</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">size</td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "sm" | "default" | "lg"
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                "default"
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Toast width</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                title
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">Toast title text</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                description
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                string
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">Toast description text</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">icon</td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                ReactNode
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (auto)
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Custom icon (defaults based on variant)
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                action
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                ReactNode
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">-</td>
-                            <td className="p-3 border-b border-gray-200">Action button(s)</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                duration
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                number
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">5000</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Auto-dismiss time in ms (0 to disable)
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">onClose</td>
-                            <td className="p-3 font-mono text-sm">() =&gt; void</td>
-                            <td className="p-3 font-mono text-sm">-</td>
-                            <td className="p-3">
-                                Callback when toast closes (enables close button)
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>ToastContainer</h3>
-            <p>Container for positioning toasts.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FFE66D]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Prop
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Default
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">position</td>
-                            <td className="p-3 font-mono text-sm">
-                                "top-left" | "top-center" | "top-right" | "bottom-left" |
-                                "bottom-center" | "bottom-right"
-                            </td>
-                            <td className="p-3 font-mono text-sm">"bottom-right"</td>
-                            <td className="p-3">Position of toast container</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>useToast Hook</h3>
-            <p>Hook for managing toast state.</p>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#4ECDC4]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Return
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                toasts
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                ToastItem[]
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Array of active toasts</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                addToast
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (toast) =&gt; string
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Add toast, returns ID</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                removeToast
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (id: string) =&gt; void
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Remove toast by ID</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                clearToasts
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                () =&gt; void
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Remove all toasts</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                success
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (title, desc?) =&gt; string
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Shorthand for success toast
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                error
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (title, desc?) =&gt; string
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Shorthand for error toast
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                warning
-                            </td>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                (title, desc?) =&gt; string
-                            </td>
-                            <td className="p-3 border-b border-gray-200">
-                                Shorthand for warning toast
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">info</td>
-                            <td className="p-3 font-mono text-sm">(title, desc?) =&gt; string</td>
-                            <td className="p-3">Shorthand for info toast</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>All Exports</h3>
-            <div className="overflow-x-auto">
-                <table className="w-full border-3 border-black dark:border-white">
-                    <thead className="bg-[#FF6B6B]">
-                        <tr>
-                            <th className="text-left p-3 font-black border-b-3 border-black text-black">
-                                Export
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black text-black">
-                                Type
-                            </th>
-                            <th className="text-left p-3 font-black border-b-3 border-black text-black">
-                                Description
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                Toast
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Component</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Individual toast notification
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                ToastContainer
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Component</td>
-                            <td className="p-3 border-b border-gray-200">Positioning container</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                useToast
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Hook</td>
-                            <td className="p-3 border-b border-gray-200">Toast state management</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                toastVariants
-                            </td>
-                            <td className="p-3 border-b border-gray-200">CVA Function</td>
-                            <td className="p-3 border-b border-gray-200">
-                                Style variants for customization
-                            </td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                ToastProps
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Type</td>
-                            <td className="p-3 border-b border-gray-200">Toast component props</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm border-b border-gray-200">
-                                ToastContainerProps
-                            </td>
-                            <td className="p-3 border-b border-gray-200">Type</td>
-                            <td className="p-3 border-b border-gray-200">Container props</td>
-                        </tr>
-                        <tr>
-                            <td className="p-3 font-mono text-sm">ToastItem</td>
-                            <td className="p-3">Type</td>
-                            <td className="p-3">Toast item type for hook</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/toggle-group/page.tsx b/apps/docs/app/docs/components/toggle-group/page.tsx
deleted file mode 100644
index 7b90822..0000000
--- a/apps/docs/app/docs/components/toggle-group/page.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client';
-
-import { AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
-import {
-    ToggleGroup,
-    ToggleGroupItem,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function ToggleGroupPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Toggle Group</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A set of two-state buttons that can be toggled on or off, styled with brutalist flat borders and hard offsets. Built on Radix UI Toggle Group primitive.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
-                        <ToggleGroupItem value="left" aria-label="Align left">
-                            <AlignLeft className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                        <ToggleGroupItem value="center" aria-label="Align center">
-                            <AlignCenter className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                        <ToggleGroupItem value="right" aria-label="Align right">
-                            <AlignRight className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                    </ToggleGroup>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="toggle-group" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
-import { AlignLeft, AlignCenter, AlignRight } from "lucide-react"
-
-<ToggleGroup type="single" defaultValue="left">
-  <ToggleGroupItem value="left" aria-label="Align left">
-    <AlignLeft className="h-4 w-4 stroke-[3]" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="center" aria-label="Align center">
-    <AlignCenter className="h-4 w-4 stroke-[3]" />
-  </ToggleGroupItem>
-  <ToggleGroupItem value="right" aria-label="Align right">
-    <AlignRight className="h-4 w-4 stroke-[3]" />
-  </ToggleGroupItem>
-</ToggleGroup>`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Examples</h2>
-
-                <h3>Outline Group</h3>
-                <p>Use <code>variant="outline"</code> to style all items as outlines.</p>
-                <ComponentPreview>
-                    <ToggleGroup type="single" variant="outline" defaultValue="left">
-                        <ToggleGroupItem value="left" aria-label="Align left">
-                            <AlignLeft className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                        <ToggleGroupItem value="center" aria-label="Align center">
-                            <AlignCenter className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                        <ToggleGroupItem value="right" aria-label="Align right">
-                            <AlignRight className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                    </ToggleGroup>
-                </ComponentPreview>
-
-                <h3>Disabled Items</h3>
-                <p>Specify <code>disabled</code> inside ToggleGroup to lock the entire toolbar.</p>
-                <ComponentPreview>
-                    <ToggleGroup type="single" defaultValue="left" disabled>
-                        <ToggleGroupItem value="left" aria-label="Align left">
-                            <AlignLeft className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                        <ToggleGroupItem value="center" aria-label="Align center">
-                            <AlignCenter className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                        <ToggleGroupItem value="right" aria-label="Align right">
-                            <AlignRight className="h-4 w-4 stroke-[3]" />
-                        </ToggleGroupItem>
-                    </ToggleGroup>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Component</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">ToggleGroup</td>
-                                <td className="p-3">Context root container accepting group configuration props like <code>type</code> and <code>variant</code>.</td>
-                            </tr>
-                            <tr>
-                                <td className="p-3 font-mono text-sm">ToggleGroupItem</td>
-                                <td className="p-3">Individual toolbar buttons mapping click selections.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <div className="p-4 bg-yellow-50 dark:bg-yellow-950 border-3 border-black dark:border-white space-y-2 text-sm">
-                    <p className="font-bold text-black dark:text-white">Keyboard Navigation Rules:</p>
-                    <ul className="list-disc pl-5 space-y-1">
-                        <li><code>Tab</code>: Moves keyboard focus into the toggle group (focuses first or active item).</li>
-                        <li><code>ArrowRight / ArrowDown</code>: Moves focus to the next group item button.</li>
-                        <li><code>ArrowLeft / ArrowUp</code>: Moves focus to the previous group item button.</li>
-                        <li><code>Space / Enter</code>: Selects/toggles the currently focused item button.</li>
-                    </ul>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/toggle/page.tsx b/apps/docs/app/docs/components/toggle/page.tsx
deleted file mode 100644
index 7963e1b..0000000
--- a/apps/docs/app/docs/components/toggle/page.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Bold, Italic, Underline } from 'lucide-react';
-import {
-    Toggle,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function TogglePage() {
-    const [pressed, setPressed] = useState(false);
-
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="primary" className="mb-4">
-                    Component
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Toggle</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    A two-state button that can be either on or off. Perfect for formatting toolbar options, dark mode switches, or item selections.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Preview</h2>
-                <ComponentPreview>
-                    <div className="flex gap-2">
-                        <Toggle aria-label="Toggle bold" pressed={pressed} onPressedChange={setPressed}>
-                            <Bold className="h-4 w-4 stroke-[3]" />
-                        </Toggle>
-                        <span className="text-sm font-black border-3 border-black px-2 py-2 bg-[#FFE66D] text-black">
-                            State: {pressed ? 'ON (Pressed)' : 'OFF'}
-                        </span>
-                    </div>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Installation</h2>
-                <InstallationTabs componentName="toggle" />
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Usage</h2>
-                <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-{`import { Toggle } from "@/components/ui/toggle"
-import { Bold } from "lucide-react"
-
-<Toggle aria-label="Toggle bold">
-  <Bold className="h-4 w-4 stroke-[3]" />
-</Toggle>`}
-                </pre>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Examples</h2>
-
-                <h3>Outline Variant</h3>
-                <p>Use the <code>variant="outline"</code> prop to render outline-bordered toggle controls.</p>
-                <ComponentPreview>
-                    <Toggle variant="outline" aria-label="Toggle italic">
-                        <Italic className="h-4 w-4 stroke-[3]" />
-                    </Toggle>
-                </ComponentPreview>
-
-                <h3>Disabled State</h3>
-                <p>Disabled toggles ignore pointer-events and visually dim.</p>
-                <ComponentPreview>
-                    <Toggle disabled aria-label="Toggle underline">
-                        <Underline className="h-4 w-4 stroke-[3]" />
-                    </Toggle>
-                </ComponentPreview>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">API Reference</h2>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-[#FFE66D]">
-                            <tr>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Prop</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Type</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Default</th>
-                                <th className="text-left p-3 font-black border-b-3 border-black">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">variant</td>
-                                <td className="p-3 font-mono text-sm">"default" | "outline"</td>
-                                <td className="p-3 font-mono text-sm">"default"</td>
-                                <td className="p-3">The visual border styling of the toggle button.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">size</td>
-                                <td className="p-3 font-mono text-sm">"default" | "sm" | "lg"</td>
-                                <td className="p-3 font-mono text-sm">"default"</td>
-                                <td className="p-3">The size of the toggle button layout.</td>
-                            </tr>
-                            <tr className="border-b border-gray-200">
-                                <td className="p-3 font-mono text-sm">pressed</td>
-                                <td className="p-3 font-mono text-sm">boolean</td>
-                                <td className="p-3 font-mono text-sm">-</td>
-                                <td className="p-3">Controlled pressed status state of the toggle.</td>
-                            </tr>
-                            <tr>
-                                <td className="p-3 font-mono text-sm">disabled</td>
-                                <td className="p-3 font-mono text-sm">boolean</td>
-                                <td className="p-3 font-mono text-sm">false</td>
-                                <td className="p-3">Disables interaction controls.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Accessibility</h2>
-                <div className="p-4 bg-yellow-50 dark:bg-yellow-950 border-3 border-black dark:border-white space-y-2 text-sm">
-                    <p className="font-bold text-black dark:text-white">Keyboard & Screen Reader Rules:</p>
-                    <ul className="list-disc pl-5 space-y-1">
-                        <li><code>Space / Enter</code>: Triggers and toggles the active selection state.</li>
-                        <li>Uses WAI-ARIA <code>aria-pressed</code> to clearly announce active status to screen reader agents.</li>
-                    </ul>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/components/tooltip/layout.tsx b/apps/docs/app/docs/components/tooltip/layout.tsx
deleted file mode 100644
index 736e792..0000000
--- a/apps/docs/app/docs/components/tooltip/layout.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Metadata } from 'next';
-import { componentsSEO, generateComponentMetadata } from '@/config/seo';
-
-export const metadata: Metadata = generateComponentMetadata(componentsSEO.tooltip);
-
-export default function TooltipLayout({ children }: { children: React.ReactNode }) {
-    return children;
-}
diff --git a/apps/docs/app/docs/components/tooltip/page.tsx b/apps/docs/app/docs/components/tooltip/page.tsx
deleted file mode 100644
index 96b5c17..0000000
--- a/apps/docs/app/docs/components/tooltip/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import {
-    Tooltip,
-    TooltipTrigger,
-    TooltipContent,
-    TooltipProvider,
-    Button,
-    Badge,
-} from '@/components/ui';
-import { ComponentPreview } from '@/components/component-preview';
-import { InstallationTabs } from '@/components/installation-tabs';
-
-export default function TooltipPage() {
-    return (
-        <div>
-            <Badge variant="primary" className="mb-4">
-                Component
-            </Badge>
-            <h1>Tooltip</h1>
-
-            <p>
-                A popup that displays information related to an element when the element receives
-                focus or is hovered. Built on Radix UI Tooltip primitive.
-            </p>
-
-            <h2>Preview</h2>
-            <ComponentPreview>
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button variant="outline">Hover me</Button>
-                        </TooltipTrigger>
-                        <TooltipContent>This is a tooltip!</TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-            </ComponentPreview>
-
-            <h2>Installation</h2>
-            <InstallationTabs componentName="tooltip" />
-
-            <h2>Usage</h2>
-            <pre className="bg-gray-900 text-white p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-sm">
-                {`import {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-} from "@/components/ui/tooltip"
-import { Button } from "@/components/ui/button"
-
-<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Hover</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      Tooltip content
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>`}
-            </pre>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/installation/manual/page.tsx b/apps/docs/app/docs/installation/manual/page.tsx
deleted file mode 100644
index 8bb468e..0000000
--- a/apps/docs/app/docs/installation/manual/page.tsx
+++ /dev/null
@@ -1,329 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui';
-import Link from 'next/link';
-import { CodeBlock, PackageManagerTabs } from '@/components/code-block';
-import { SITE_CONFIG } from '@/config/constants';
-import { ChevronLeft, ChevronRight, Copy, Github, Terminal } from 'lucide-react';
-
-export default function ManualInstallationPage() {
-    return (
-        <div className="max-w-3xl">
-            <Badge variant="secondary" className="mb-4">
-                Installation
-            </Badge>
-            <h1 className="text-4xl font-black mb-4">Manual Installation</h1>
-            <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
-                Add Brutx components manually to any React project.
-            </p>
-
-            <section className="mb-12">
-                <div className="flex items-center gap-3 mb-6">
-                    <div className="w-10 h-10 bg-[#4ECDC4] border-3 border-black flex items-center justify-center">
-                        <Terminal className="w-5 h-5 stroke-[2.5]" />
-                    </div>
-                    <div>
-                        <h2 className="text-xl font-black">CLI Installation</h2>
-                        <span className="text-xs uppercase tracking-wider text-[#4ECDC4] font-bold">
-                            Recommended
-                        </span>
-                    </div>
-                </div>
-                <p className="mb-6 text-gray-600 dark:text-gray-400">
-                    Use the CLI to copy components into your project.
-                </p>
-
-                <h3 className="text-lg font-black mb-3">1. Run init command</h3>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm dlx brutx@latest init',
-                        npm: 'npx brutx@latest init',
-                        yarn: 'yarn dlx brutx@latest init',
-                        bun: 'bunx brutx@latest init',
-                    }}
-                />
-
-                <h3 className="text-lg font-black mb-3 mt-6">2. Add components</h3>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm dlx brutx@latest add button card dialog',
-                        npm: 'npx brutx@latest add button card dialog',
-                        yarn: 'yarn dlx brutx@latest add button card dialog',
-                        bun: 'bunx brutx@latest add button card dialog',
-                    }}
-                />
-                <p className="mt-2 text-sm text-gray-500">
-                    Or add all components:{' '}
-                    <code className="bg-gray-200 dark:bg-gray-800 px-1">
-                        npx brutx@latest add --all
-                    </code>
-                </p>
-
-                <h3 className="text-lg font-black mb-3 mt-6">3. Use components</h3>
-                <CodeBlock language="tsx">{`import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-
-function MyComponent() {
-  return (
-    <Card>
-      <CardContent>
-        <Button variant="primary">Click me</Button>
-      </CardContent>
-    </Card>
-  );
-}`}</CodeBlock>
-            </section>
-
-            <section className="mb-12">
-                <div className="flex items-center gap-3 mb-6">
-                    <div className="w-10 h-10 bg-[#FF6B6B] border-3 border-black flex items-center justify-center">
-                        <Copy className="w-5 h-5 stroke-[2.5]" />
-                    </div>
-                    <div>
-                        <h2 className="text-xl font-black">Manual Copy</h2>
-                        <span className="text-xs uppercase tracking-wider text-gray-500">
-                            Alternative
-                        </span>
-                    </div>
-                </div>
-                <p className="mb-6 text-gray-600 dark:text-gray-400">
-                    If you prefer to copy files manually, follow these steps.
-                </p>
-
-                <h3 className="text-lg font-black mb-3">1. Prerequisites</h3>
-                <p className="mb-4 text-gray-600 dark:text-gray-400">
-                    Make sure Tailwind CSS is installed in your project.{' '}
-                    <a
-                        href="https://tailwindcss.com/docs/installation"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-[#FF6B6B] hover:underline font-semibold"
-                    >
-                        Follow the Tailwind CSS installation →
-                    </a>
-                </p>
-
-                <h3 className="text-lg font-black mb-3 mt-6">2. Install dependencies</h3>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm add clsx tailwind-merge class-variance-authority lucide-react',
-                        npm: 'npm install clsx tailwind-merge class-variance-authority lucide-react',
-                        yarn: 'yarn add clsx tailwind-merge class-variance-authority lucide-react',
-                        bun: 'bun add clsx tailwind-merge class-variance-authority lucide-react',
-                    }}
-                />
-
-                <h3 className="text-lg font-black mb-3 mt-6">3. Create utils.ts</h3>
-                <CodeBlock language="lib/utils.ts">{`import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}`}</CodeBlock>
-
-                <h3 className="text-lg font-black mb-3 mt-6">4. Configure tailwind.config.js</h3>
-                <CodeBlock language="tailwind.config.js">{`/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      borderWidth: {
-        3: "3px",
-      },
-      boxShadow: {
-        brutal: "4px 4px 0px 0px #000",
-        "brutal-sm": "2px 2px 0px 0px #000",
-        "brutal-lg": "6px 6px 0px 0px #000",
-      },
-    },
-  },
-};`}</CodeBlock>
-
-                <h3 className="text-lg font-black mb-3 mt-6">5. Add base styles to your CSS</h3>
-                <CodeBlock language="globals.css">{`@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .border-3 {
-    border-width: 3px;
-  }
-
-  .shadow-brutal {
-    box-shadow: 4px 4px 0px 0px #000;
-  }
-
-  .shadow-brutal-sm {
-    box-shadow: 2px 2px 0px 0px #000;
-  }
-
-  .shadow-brutal-lg {
-    box-shadow: 6px 6px 0px 0px #000;
-  }
-}
-
-.dark .shadow-brutal {
-  box-shadow: 4px 4px 0px 0px #fff;
-}
-
-.dark .shadow-brutal-sm {
-  box-shadow: 2px 2px 0px 0px #fff;
-}
-
-.dark .shadow-brutal-lg {
-  box-shadow: 6px 6px 0px 0px #fff;
-}`}</CodeBlock>
-
-                <h3 className="text-lg font-black mb-3 mt-6">6. Copy components from GitHub</h3>
-                <p className="mb-4 text-gray-600 dark:text-gray-400">
-                    Copy the component files to your{' '}
-                    <code className="bg-gray-200 dark:bg-gray-800 px-1.5 py-0.5 font-mono text-sm">
-                        components/ui
-                    </code>{' '}
-                    folder:
-                </p>
-                <a
-                    href={SITE_CONFIG.github.componentsUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-2 px-4 py-3 font-bold border-3 border-black dark:border-white bg-white dark:bg-gray-900 hover:bg-[#4ECDC4] hover:shadow-brutal transition-all"
-                >
-                    <Github className="h-5 w-5 stroke-[2.5]" />
-                    Browse components on GitHub
-                </a>
-
-                <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <h4 className="font-black mb-3 text-sm uppercase tracking-wider">
-                        Recommended Structure
-                    </h4>
-                    <pre className="text-sm font-mono text-gray-600 dark:text-gray-400">{`src/
-├── components/
-│   └── ui/
-│       ├── button.tsx
-│       ├── card.tsx
-│       ├── dialog.tsx
-│       └── ...
-└── lib/
-    └── utils.ts`}</pre>
-                </div>
-            </section>
-
-            <section className="mb-12">
-                <h2 className="text-xl font-black mb-4">Component Dependencies</h2>
-                <p className="mb-4 text-gray-600 dark:text-gray-400">
-                    Some components require additional Radix UI packages:
-                </p>
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-brutal-accent dark:bg-gray-800">
-                            <tr>
-                                <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black dark:border-white font-black text-black dark:text-white">
-                                    Component
-                                </th>
-                                <th className="px-4 py-2 text-left border-b-3 border-black dark:border-white font-black text-black dark:text-white">
-                                    Dependencies
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody className="bg-white dark:bg-gray-900">
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">
-                                    Button
-                                </td>
-                                <td className="px-4 py-2 font-mono text-xs">
-                                    @radix-ui/react-slot
-                                </td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">
-                                    Dialog
-                                </td>
-                                <td className="px-4 py-2 font-mono text-xs">
-                                    @radix-ui/react-dialog
-                                </td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">
-                                    Select
-                                </td>
-                                <td className="px-4 py-2 font-mono text-xs">
-                                    @radix-ui/react-select
-                                </td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">
-                                    Dropdown
-                                </td>
-                                <td className="px-4 py-2 font-mono text-xs">
-                                    @radix-ui/react-dropdown-menu
-                                </td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">
-                                    Calendar
-                                </td>
-                                <td className="px-4 py-2 font-mono text-xs">
-                                    react-day-picker, date-fns
-                                </td>
-                            </tr>
-                            <tr>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">
-                                    Command
-                                </td>
-                                <td className="px-4 py-2 font-mono text-xs">cmdk</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="mb-12">
-                <h2 className="text-xl font-black mb-4">Usage Example</h2>
-                <CodeBlock language="tsx">{`import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default function App() {
-  return (
-    <div className="p-8">
-      <Card variant="default" padding="default">
-        <CardHeader>
-          <CardTitle>Welcome!</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="mb-4">This is a brutalist card.</p>
-          <div className="flex gap-2">
-            <Button variant="primary">Primary</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button variant="outline">Outline</Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}`}</CodeBlock>
-            </section>
-
-            <div className="flex justify-between items-center pt-8 border-t-3 border-black dark:border-white mt-12">
-                <Link
-                    href="/docs/installation/vite"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    <ChevronLeft className="w-4 h-4 stroke-[3]" />
-                    Vite
-                </Link>
-                <Link
-                    href="/docs/cli"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    CLI Reference
-                    <ChevronRight className="w-4 h-4 stroke-[3]" />
-                </Link>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/installation/nextjs/page.tsx b/apps/docs/app/docs/installation/nextjs/page.tsx
deleted file mode 100644
index f35072c..0000000
--- a/apps/docs/app/docs/installation/nextjs/page.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui';
-import { ChevronLeft, ChevronRight, Moon, Terminal } from 'lucide-react';
-import Link from 'next/link';
-import { CodeBlock, PackageManagerTabs } from '@/components/code-block';
-
-export default function NextJsInstallationPage() {
-    return (
-        <div className="max-w-3xl">
-            <Badge variant="secondary" className="mb-4">
-                Installation
-            </Badge>
-            <h1 className="text-4xl font-black mb-4">Next.js</h1>
-            <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
-                Install and configure BrutxUI for Next.js (App Router or Pages Router).
-            </p>
-
-            <section className="mb-12">
-                <div className="flex items-center gap-3 mb-6">
-                    <div className="w-10 h-10 bg-[#4ECDC4] border-3 border-black flex items-center justify-center">
-                        <Terminal className="w-5 h-5 stroke-[2.5]" />
-                    </div>
-                    <div>
-                        <h2 className="text-xl font-black">CLI Installation</h2>
-                        <span className="text-xs uppercase tracking-wider text-[#4ECDC4] font-bold">
-                            Copy & Customize
-                        </span>
-                    </div>
-                </div>
-                <p className="mb-6 text-gray-600 dark:text-gray-400">
-                    Copy components to your project for full customization control.
-                </p>
-
-                <h3 className="text-lg font-black mb-3">1. Run init command</h3>
-                <p className="mb-4 text-gray-600 dark:text-gray-400">
-                    This creates{' '}
-                    <code className="bg-gray-200 dark:bg-gray-800 px-1.5 py-0.5 font-mono text-sm">
-                        components.json
-                    </code>
-                    , sets up directories, and installs dependencies.
-                </p>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm dlx brutx@latest init',
-                        npm: 'npx brutx@latest init',
-                        yarn: 'yarn dlx brutx@latest init',
-                        bun: 'bunx brutx@latest init',
-                    }}
-                />
-
-                <h3 className="text-lg font-black mb-3 mt-6">2. Add components</h3>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm dlx brutx@latest add button card badge',
-                        npm: 'npx brutx@latest add button card badge',
-                        yarn: 'yarn dlx brutx@latest add button card badge',
-                        bun: 'bunx brutx@latest add button card badge',
-                    }}
-                />
-                <p className="mt-2 text-sm text-gray-500">
-                    Or add all components:{' '}
-                    <code className="bg-gray-200 dark:bg-gray-800 px-1">
-                        npx brutx@latest add --all
-                    </code>
-                </p>
-
-                <h3 className="text-lg font-black mb-3 mt-6">3. Import from your project</h3>
-                <CodeBlock language="app/page.tsx">{`import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-
-export default function Home() {
-  return (
-    <main className="p-8">
-      <Card>
-        <CardContent>
-          <Badge variant="accent" className="mb-4">Welcome</Badge>
-          <h1 className="text-2xl font-black mb-4">Hello BrutxUI!</h1>
-          <Button variant="primary">Get Started</Button>
-        </CardContent>
-      </Card>
-    </main>
-  );
-}`}</CodeBlock>
-
-                <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-900 border-3 border-black dark:border-white">
-                    <h4 className="font-black mb-3 text-sm uppercase tracking-wider">
-                        Project Structure
-                    </h4>
-                    <pre className="text-sm font-mono text-gray-600 dark:text-gray-400">{`your-project/
-├── components.json
-├── src/
-│   ├── components/
-│   │   └── ui/
-│   │       ├── button.tsx
-│   │       ├── card.tsx
-│   │       └── ...
-│   └── lib/
-│       └── utils.ts`}</pre>
-                </div>
-            </section>
-
-            <section className="mb-12">
-                <div className="flex items-center gap-3 mb-4">
-                    <div className="w-8 h-8 bg-gray-900 dark:bg-white border-3 border-black dark:border-white flex items-center justify-center">
-                        <Moon className="w-4 h-4 text-white dark:text-black" fill="currentColor" />
-                    </div>
-                    <h2 className="text-xl font-black">Dark Mode</h2>
-                </div>
-                <p className="mb-4 text-gray-600 dark:text-gray-400">
-                    BrutxUI supports dark mode out of the box. Add{' '}
-                    <code className="bg-gray-200 dark:bg-gray-800 px-1.5 py-0.5 font-mono text-sm">
-                        next-themes
-                    </code>{' '}
-                    for easy theme switching:
-                </p>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm add next-themes',
-                        npm: 'npm install next-themes',
-                        yarn: 'yarn add next-themes',
-                        bun: 'bun add next-themes',
-                    }}
-                />
-                <div className="mt-4">
-                    <CodeBlock language="app/providers.tsx">{`'use client';
-
-import { ThemeProvider } from 'next-themes';
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      {children}
-    </ThemeProvider>
-  );
-}`}</CodeBlock>
-                </div>
-            </section>
-
-            <div className="flex justify-between items-center pt-8 border-t-3 border-black dark:border-white mt-12">
-                <Link
-                    href="/docs/installation"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    <ChevronLeft className="w-4 h-4 stroke-[3]" />
-                    Installation
-                </Link>
-                <Link
-                    href="/docs/installation/vite"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    Vite
-                    <ChevronRight className="w-4 h-4 stroke-[3]" />
-                </Link>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/installation/page.tsx b/apps/docs/app/docs/installation/page.tsx
deleted file mode 100644
index b5c04d0..0000000
--- a/apps/docs/app/docs/installation/page.tsx
+++ /dev/null
@@ -1,314 +0,0 @@
-import { Badge, Card, CardContent } from '@/components/ui';
-import { ChevronRight, Code2, Terminal } from 'lucide-react';
-import { Metadata } from 'next';
-import Link from 'next/link';
-
-export const metadata: Metadata = {
-    title: 'Installation Guide - Brutx | Setup Neo-Brutalism Components',
-    description:
-        'Install Brutx in your React or Next.js project. Step-by-step guide for npm, pnpm, yarn with Tailwind CSS configuration and TypeScript support.',
-    keywords: [
-        'install brutx-ui',
-        'brutx setup',
-        'neo-brutalism npm',
-        'react brutalism install',
-        'tailwind brutalism plugin',
-    ],
-    openGraph: {
-        title: 'Installation Guide - Brutx',
-        description:
-            'Install Brutx in your React or Next.js project with npm, pnpm, or yarn.',
-        url: 'https://brutxui.site/docs/installation',
-    },
-    alternates: {
-        canonical: 'https://brutxui.site/docs/installation',
-    },
-};
-
-const frameworks = [
-    {
-        name: 'Next.js',
-        href: '/docs/installation/nextjs',
-        icon: (
-            <svg viewBox="0 0 180 180" fill="currentColor" className="w-10 h-10">
-                <mask
-                    id="mask0_408_139"
-                    style={{ maskType: 'alpha' }}
-                    maskUnits="userSpaceOnUse"
-                    x="0"
-                    y="0"
-                    width="180"
-                    height="180"
-                >
-                    <circle cx="90" cy="90" r="90" fill="black" />
-                </mask>
-                <g mask="url(#mask0_408_139)">
-                    <circle cx="90" cy="90" r="90" fill="black" />
-                    <path
-                        d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
-                        fill="url(#paint0_linear_408_139)"
-                    />
-                    <rect
-                        x="115"
-                        y="54"
-                        width="12"
-                        height="72"
-                        fill="url(#paint1_linear_408_139)"
-                    />
-                </g>
-                <defs>
-                    <linearGradient
-                        id="paint0_linear_408_139"
-                        x1="109"
-                        y1="116.5"
-                        x2="144.5"
-                        y2="160.5"
-                        gradientUnits="userSpaceOnUse"
-                    >
-                        <stop stopColor="white" />
-                        <stop offset="1" stopColor="white" stopOpacity="0" />
-                    </linearGradient>
-                    <linearGradient
-                        id="paint1_linear_408_139"
-                        x1="121"
-                        y1="54"
-                        x2="120.799"
-                        y2="106.875"
-                        gradientUnits="userSpaceOnUse"
-                    >
-                        <stop stopColor="white" />
-                        <stop offset="1" stopColor="white" stopOpacity="0" />
-                    </linearGradient>
-                </defs>
-            </svg>
-        ),
-        description: 'The React Framework for the Web',
-    },
-    {
-        name: 'Vite',
-        href: '/docs/installation/vite',
-        icon: (
-            <svg viewBox="0 0 410 404" fill="none" className="w-10 h-10">
-                <path
-                    d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z"
-                    fill="url(#vite-gradient-1)"
-                />
-                <path
-                    d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z"
-                    fill="url(#vite-gradient-2)"
-                />
-                <defs>
-                    <linearGradient
-                        id="vite-gradient-1"
-                        x1="6.00017"
-                        y1="32.9999"
-                        x2="235"
-                        y2="344"
-                        gradientUnits="userSpaceOnUse"
-                    >
-                        <stop stopColor="#41D1FF" />
-                        <stop offset="1" stopColor="#BD34FE" />
-                    </linearGradient>
-                    <linearGradient
-                        id="vite-gradient-2"
-                        x1="194.651"
-                        y1="8.81818"
-                        x2="236.076"
-                        y2="292.989"
-                        gradientUnits="userSpaceOnUse"
-                    >
-                        <stop stopColor="#FFBD4F" />
-                        <stop offset="1" stopColor="#FF980E" />
-                    </linearGradient>
-                </defs>
-            </svg>
-        ),
-        description: 'Next Generation Frontend Tooling',
-    },
-    {
-        name: 'Manual',
-        href: '/docs/installation/manual',
-        icon: <Code2 className="w-10 h-10 stroke-[2.5]" />,
-        description: 'Add components manually to your project',
-    },
-];
-
-export default function InstallationPage() {
-    return (
-        <div className="max-w-4xl">
-            <Badge variant="secondary" className="mb-4">
-                Getting Started
-            </Badge>
-            <h1 className="text-4xl font-black mb-4">Installation</h1>
-            <p className="text-lg text-gray-600 dark:text-gray-400 mb-10">
-                Choose your preferred method to add Brutx to your project.
-            </p>
-
-            <section className="mb-12">
-                <div className="flex items-center gap-3 mb-4">
-                    <div className="w-8 h-8 bg-[#FFE66D] border-3 border-black flex items-center justify-center font-black text-black">
-                        !
-                    </div>
-                    <h2 className="text-xl font-black">Prerequisites</h2>
-                </div>
-                <div className="grid sm:grid-cols-3 gap-3">
-                    {[
-                        { label: 'React', value: '18+ or 19' },
-                        { label: 'Tailwind CSS', value: '3.0+' },
-                        { label: 'Node.js', value: '18+' },
-                    ].map((item) => (
-                        <div
-                            key={item.label}
-                            className="p-4 border-3 border-black dark:border-white bg-white dark:bg-gray-900"
-                        >
-                            <p className="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">
-                                {item.label}
-                            </p>
-                            <p className="font-black">{item.value}</p>
-                        </div>
-                    ))}
-                </div>
-            </section>
-
-            <section className="mb-12">
-                <h2 className="text-2xl font-black mb-6">Installation Method</h2>
-                <div className="max-w-xl">
-                    <Card variant="default" padding="default" className="h-full border-[#4ECDC4]">
-                        <CardContent className="p-6">
-                            <div className="w-12 h-12 bg-[#4ECDC4] border-3 border-black flex items-center justify-center mb-4">
-                                <Terminal className="w-6 h-6 stroke-[2.5]" />
-                            </div>
-                            <h3 className="text-xl font-black mb-2">CLI Tool</h3>
-                            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                                Copy components into your codebase for full control and
-                                customization.
-                            </p>
-                            <pre className="bg-black text-[#4ECDC4] p-3 text-sm font-mono mb-4 overflow-x-auto">
-                                npx brutx@latest init
-                            </pre>
-                            <ul className="text-sm space-y-2 mb-4">
-                                <li className="flex items-start gap-2">
-                                    <span className="w-1.5 h-1.5 mt-2 bg-[#4ECDC4]" />
-                                    Full customization control
-                                </li>
-                                <li className="flex items-start gap-2">
-                                    <span className="w-1.5 h-1.5 mt-2 bg-[#4ECDC4]" />
-                                    Pick individual components
-                                </li>
-                                <li className="flex items-start gap-2">
-                                    <span className="w-1.5 h-1.5 mt-2 bg-[#4ECDC4]" />
-                                    Own the code
-                                </li>
-                                <li className="flex items-start gap-2">
-                                    <span className="w-1.5 h-1.5 mt-2 bg-[#4ECDC4]" />
-                                    TypeScript included
-                                </li>
-                            </ul>
-                            <Link
-                                href="/docs/cli"
-                                className="inline-flex items-center text-sm font-bold hover:text-[#4ECDC4] transition-colors"
-                            >
-                                CLI Reference
-                                <ChevronRight className="w-4 h-4 ml-1 stroke-[2.5]" />
-                            </Link>
-                        </CardContent>
-                    </Card>
-                </div>
-            </section>
-
-            <section className="mb-12 p-6 border-3 border-black dark:border-white bg-gray-50 dark:bg-gray-900">
-                <h2 className="text-xl font-black mb-4">Quick Start</h2>
-                <div className="grid gap-4">
-                    <div className="flex gap-4">
-                        <div className="flex-shrink-0 w-8 h-8 bg-black dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-sm">
-                            1
-                        </div>
-                        <div className="flex-1">
-                            <p className="font-bold mb-2">Initialize your project</p>
-                            <pre className="bg-black text-white p-3 text-sm font-mono overflow-x-auto">
-                                npx brutx@latest init
-                            </pre>
-                        </div>
-                    </div>
-                    <div className="flex gap-4">
-                        <div className="flex-shrink-0 w-8 h-8 bg-black dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-sm">
-                            2
-                        </div>
-                        <div className="flex-1">
-                            <p className="font-bold mb-2">Add components</p>
-                            <pre className="bg-black text-white p-3 text-sm font-mono overflow-x-auto">
-                                npx brutx@latest add button card badge
-                            </pre>
-                        </div>
-                    </div>
-                    <div className="flex gap-4">
-                        <div className="flex-shrink-0 w-8 h-8 bg-black dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-sm">
-                            3
-                        </div>
-                        <div className="flex-1">
-                            <p className="font-bold mb-2">Use components</p>
-                            <pre className="bg-black text-white p-3 text-sm font-mono overflow-x-auto">
-                                {`import { Button } from '@/components/ui/button';`}
-                            </pre>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <section className="mb-12">
-                <h2 className="text-2xl font-black mb-6">Framework Guides</h2>
-                <div className="grid gap-3">
-                    {frameworks.map((framework) => (
-                        <Link
-                            key={framework.name}
-                            href={framework.href}
-                            className="group flex items-center gap-4 p-4 border-3 border-black dark:border-white bg-white dark:bg-gray-900 hover:translate-x-1 hover:shadow-brutal transition-all"
-                        >
-                            <div className="flex-shrink-0 w-12 h-12 border-2 border-black dark:border-white flex items-center justify-center bg-gray-50 dark:bg-gray-800">
-                                {framework.icon}
-                            </div>
-                            <div className="flex-1 min-w-0">
-                                <h3 className="font-black">{framework.name}</h3>
-                                <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
-                                    {framework.description}
-                                </p>
-                            </div>
-                            <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-black dark:group-hover:text-white transition-colors stroke-[2.5]" />
-                        </Link>
-                    ))}
-                </div>
-            </section>
-
-            <section className="grid sm:grid-cols-2 gap-6">
-                <div className="p-6 border-3 border-black dark:border-white">
-                    <h3 className="font-black mb-4 pb-2 border-b-2 border-black dark:border-white">
-                        Package Info
-                    </h3>
-                    <dl className="space-y-3 text-sm">
-                        <div className="flex justify-between">
-                            <dt className="text-gray-500 dark:text-gray-400">CLI Package</dt>
-                            <dd className="font-mono font-bold">brutx</dd>
-                        </div>
-                        <div className="flex justify-between">
-                            <dt className="text-gray-500 dark:text-gray-400">React Package</dt>
-                            <dd className="font-mono font-bold">brutx-ui</dd>
-                        </div>
-                        <div className="flex justify-between">
-                            <dt className="text-gray-500 dark:text-gray-400">Components</dt>
-                            <dd className="font-mono font-bold">27</dd>
-                        </div>
-                    </dl>
-                </div>
-                <div className="p-6 border-3 border-black dark:border-white bg-[#4ECDC4]/10">
-                    <h3 className="font-black mb-4 pb-2 border-b-2 border-black dark:border-white">
-                        TypeScript
-                    </h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                        Full type definitions included. All components export their prop types for
-                        excellent DX.
-                    </p>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/installation/shadcn/page.tsx b/apps/docs/app/docs/installation/shadcn/page.tsx
deleted file mode 100644
index 03beaad..0000000
--- a/apps/docs/app/docs/installation/shadcn/page.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { Badge } from '@/components/ui';
-import { Metadata } from 'next';
-
-export const metadata: Metadata = {
-    title: 'shadcn/ui CLI Integration - Brutx',
-    description: 'Learn how to install and customize BrutxUI components using the official shadcn/ui command-line tool.',
-    keywords: [
-        'shadcn integration',
-        'shadcn registry url',
-        'brutx shadcn',
-        'neo-brutalist shadcn components',
-        'shadcn add component',
-    ],
-    openGraph: {
-        title: 'shadcn/ui CLI Integration - Brutx',
-        description: 'Learn how to install and customize BrutxUI components using the official shadcn/ui command-line tool.',
-        url: 'https://brutxui.site/docs/installation/shadcn',
-    },
-    alternates: {
-        canonical: 'https://brutxui.site/docs/installation/shadcn',
-    },
-};
-
-export default function ShadcnIntegrationPage() {
-    return (
-        <div className="max-w-4xl space-y-8">
-            <div>
-                <Badge variant="accent" className="mb-4">
-                    Alternative Workflow
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">shadcn/ui CLI Integration</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    BrutxUI features standard shadcn/ui-compatible registry JSON schemas.
-                    This allows you to copy-paste or install Brutx components directly into your codebase using the official <code>shadcn</code> CLI in addition to our native <code>brutx</code> CLI tool.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white my-6" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">1. How it works</h2>
-                <p>
-                    Each component in BrutxUI maps to a standalone, self-describing JSON file containing all source code files, npm packages, tailwind styles, and CSS custom variables.
-                    When you run the <code>shadcn add</code> command pointing to our hosted registry, the shadcn CLI will:
-                </p>
-                <ul className="list-disc pl-5 space-y-2">
-                    <li>Automatically resolve and install any required npm dependencies (e.g. <code>@radix-ui/react-slot</code>, <code>lucide-react</code>).</li>
-                    <li>Download the component file directly to your <code>components/ui/</code> folder.</li>
-                    <li>Merge the required Brutx tailwind extensions and custom HSL/CSS variables directly into your local <code>tailwind.config.js</code> and global CSS stylesheet automatically.</li>
-                </ul>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">2. Basic Commands</h2>
-                <p>
-                    You can install any component from BrutxUI by supplying the direct URL to the component's registry schema. Below are several examples:
-                </p>
-
-                <div className="space-y-4">
-                    <div>
-                        <h4 className="font-bold mb-1 text-sm text-[#FF6B6B] uppercase">Native Brutx CLI Workflow</h4>
-                        <pre className="bg-black text-white p-3 text-xs font-mono overflow-x-auto border-2 border-black">
-{`npx brutx add button card`}
-                        </pre>
-                    </div>
-
-                    <div>
-                        <h4 className="font-bold mb-1 text-sm text-[#4ECDC4] uppercase">Installing via shadcn CLI</h4>
-                        <p className="text-sm mb-2 text-gray-600 dark:text-gray-400">
-                            Simply target the component's absolute JSON endpoint on our registry host:
-                        </p>
-                        <pre className="bg-black text-[#FFE66D] p-3 text-xs font-mono overflow-x-auto border-2 border-black space-y-1">
-{`# Add the Button component
-npx shadcn@latest add https://brutxui.site/registry/button.json
-
-# Add the Card component
-npx shadcn@latest add https://brutxui.site/registry/card.json
-
-# Add complex dashboard stats block
-npx shadcn@latest add https://brutxui.site/registry/dashboard-stats.json`}
-                        </pre>
-                    </div>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">3. Local Development, Publishing & Updates</h2>
-                <p>
-                    For contributors modifying or publishing changes to registry components, the workspace offers a automated compile-and-validation suite.
-                </p>
-
-                <div className="border-3 border-black dark:border-white p-5 bg-white dark:bg-gray-900 space-y-4">
-                    <h3 className="font-black text-lg">Registry Build Pipeline</h3>
-
-                    <div>
-                        <h4 className="font-bold text-sm uppercase tracking-wider text-[#FF6B6B] mb-1">Step 1: Edit Component Source</h4>
-                        <p className="text-sm">
-                            Make changes directly inside the core typescript components folder: <code>packages/ui/src/components/*.tsx</code>.
-                        </p>
-                    </div>
-
-                    <div>
-                        <h4 className="font-bold text-sm uppercase tracking-wider text-[#4ECDC4] mb-1">Step 2: Re-generate Registry Files</h4>
-                        <p className="text-sm mb-2">
-                            Run the compiler script to automatically parse, strip local references, and generate matching JSON payloads.
-                        </p>
-                        <pre className="bg-black text-white p-3 text-xs font-mono overflow-x-auto">
-{`pnpm --filter brutx-registry build`}
-                        </pre>
-                    </div>
-
-                    <div>
-                        <h4 className="font-bold text-sm uppercase tracking-wider text-[#FFE66D] mb-1">Step 3: Validate registry items</h4>
-                        <p className="text-sm mb-2">
-                            Confirm that the newly compiled schemas strictly comply with standard registry expectations and have valid file content and schema formats.
-                        </p>
-                        <pre className="bg-black text-white p-3 text-xs font-mono overflow-x-auto">
-{`pnpm --filter brutx-registry validate`}
-                        </pre>
-                    </div>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/installation/vite/page.tsx b/apps/docs/app/docs/installation/vite/page.tsx
deleted file mode 100644
index bca48fa..0000000
--- a/apps/docs/app/docs/installation/vite/page.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui';
-import { ChevronLeft, ChevronRight, Terminal } from 'lucide-react';
-import Link from 'next/link';
-import { CodeBlock, PackageManagerTabs } from '@/components/code-block';
-
-export default function ViteInstallationPage() {
-    return (
-        <div className="max-w-3xl">
-            <Badge variant="secondary" className="mb-4">
-                Installation
-            </Badge>
-            <h1 className="text-4xl font-black mb-4">Vite</h1>
-            <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
-                Install and configure BrutxUI for Vite + React projects.
-            </p>
-
-            <section className="mb-12">
-                <div className="flex items-center gap-3 mb-6">
-                    <div className="w-10 h-10 bg-[#4ECDC4] border-3 border-black flex items-center justify-center">
-                        <Terminal className="w-5 h-5 stroke-[2.5]" />
-                    </div>
-                    <div>
-                        <h2 className="text-xl font-black">CLI Installation</h2>
-                        <span className="text-xs uppercase tracking-wider text-[#4ECDC4] font-bold">
-                            Copy & Customize
-                        </span>
-                    </div>
-                </div>
-                <p className="mb-6 text-gray-600 dark:text-gray-400">
-                    Copy components into your project for full customization.
-                </p>
-
-                <h3 className="text-lg font-black mb-3">1. Create Vite project (if new)</h3>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm create vite@latest my-app --template react-ts',
-                        npm: 'npm create vite@latest my-app -- --template react-ts',
-                        yarn: 'yarn create vite my-app --template react-ts',
-                        bun: 'bunx create-vite my-app --template react-ts',
-                    }}
-                />
-
-                <h3 className="text-lg font-black mb-3 mt-6">
-                    2. Setup path aliases in vite.config.ts
-                </h3>
-                <CodeBlock language="vite.config.ts">{`import path from "path";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});`}</CodeBlock>
-
-                <h3 className="text-lg font-black mb-3 mt-6">3. Update tsconfig.json</h3>
-                <CodeBlock language="tsconfig.json">{`{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}`}</CodeBlock>
-
-                <h3 className="text-lg font-black mb-3 mt-6">4. Run init command</h3>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm dlx brutx@latest init',
-                        npm: 'npx brutx@latest init',
-                        yarn: 'yarn dlx brutx@latest init',
-                        bun: 'bunx brutx@latest init',
-                    }}
-                />
-
-                <h3 className="text-lg font-black mb-3 mt-6">5. Add components</h3>
-                <PackageManagerTabs
-                    commands={{
-                        pnpm: 'pnpm dlx brutx@latest add button card badge',
-                        npm: 'npx brutx@latest add button card badge',
-                        yarn: 'yarn dlx brutx@latest add button card badge',
-                        bun: 'bunx brutx@latest add button card badge',
-                    }}
-                />
-
-                <h3 className="text-lg font-black mb-3 mt-6">6. Use components</h3>
-                <CodeBlock language="src/App.tsx">{`import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-
-function App() {
-  return (
-    <div className="p-8">
-      <Card>
-        <CardContent>
-          <Badge variant="accent" className="mb-4">Welcome</Badge>
-          <h1 className="text-2xl font-black mb-4">Hello!</h1>
-          <Button variant="primary">Get Started</Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-export default App;`}</CodeBlock>
-            </section>
-
-            <div className="flex justify-between items-center pt-8 border-t-3 border-black dark:border-white mt-12">
-                <Link
-                    href="/docs/installation/nextjs"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    <ChevronLeft className="w-4 h-4 stroke-[3]" />
-                    Next.js
-                </Link>
-                <Link
-                    href="/docs/installation/manual"
-                    className="flex items-center gap-2 font-bold hover:text-[#FF6B6B] transition-colors"
-                >
-                    Manual
-                    <ChevronRight className="w-4 h-4 stroke-[3]" />
-                </Link>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx
deleted file mode 100644
index c273d8f..0000000
--- a/apps/docs/app/docs/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Sidebar } from '@/components/sidebar';
-
-export default function DocsLayout({ children }: { children: React.ReactNode }) {
-    return (
-        <div className="flex min-h-screen bg-white dark:bg-gray-950">
-            <Sidebar />
-            <main className="flex-1 min-w-0 p-4 pt-16 lg:pt-8 lg:p-8 w-full overflow-x-hidden">
-                <div className="mdx-content w-full">{children}</div>
-            </main>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/page.tsx b/apps/docs/app/docs/page.tsx
deleted file mode 100644
index 607032f..0000000
--- a/apps/docs/app/docs/page.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { Badge } from '@/components/ui';
-import { Metadata } from 'next';
-import Link from 'next/link';
-
-export const metadata: Metadata = {
-    title: 'Getting Started - Brutx | Neo-Brutalism React Component Registry',
-    description:
-        'BrutxUI is a high-fidelity Neo-Brutalist React component system built on top of Radix UI primitives and Tailwind CSS. Ideal for bold SaaS apps, dashboards, and developers.',
-    keywords: [
-        'brutx docs',
-        'neo-brutalism guide',
-        'react component registry',
-        'brutalism css',
-        'radix ui brutalism',
-        'shadcn brutalist alternative',
-    ],
-    openGraph: {
-        title: 'Getting Started - Brutx',
-        description: 'Learn how to use Brutx, the Neo-Brutalism React component registry.',
-        url: 'https://brutxui.site/docs',
-    },
-    alternates: {
-        canonical: 'https://brutxui.site/docs',
-    },
-};
-
-export default function DocsPage() {
-    return (
-        <div className="max-w-4xl space-y-8 pb-12">
-            <div>
-                <Badge variant="accent" className="mb-4">
-                    Introduction & Philosophy
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Getting Started</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    BrutxUI is a high-fidelity React component registry built with a Neo-Brutalist design language.
-                    Rather than operating as a heavy node dependency, BrutxUI is a <strong>copy-paste-first component library</strong> (inspired by shadcn/ui) designed for full customization, performance, and accessibility.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> Honest Positioning & Use Cases</h2>
-                <p>
-                    Neo-Brutalism is distinct, loud, and high-contrast. We built BrutxUI with a clear purpose in mind:
-                </p>
-                <div className="grid sm:grid-cols-2 gap-4">
-                    <div className="p-5 border-3 border-black dark:border-white bg-[#4ECDC4]/10 dark:bg-[#4ECDC4]/5 space-y-2">
-                        <h3 className="font-black text-[#4ECDC4] dark:text-[#6EE7B7] text-lg"> Where BrutxUI Shines</h3>
-                        <p className="text-sm">
-                            Best suited for bold SaaS projects, developer portals, indie hacker utilities, creative portfolios, analytics dashboards, web3 landing pages, and consumer tools trying to break through generic template noise.
-                        </p>
-                    </div>
-
-                    <div className="p-5 border-3 border-black dark:border-white bg-[#FF6B6B]/10 dark:bg-[#FF6B6B]/5 space-y-2">
-                        <h3 className="font-black text-[#FF6B6B] dark:text-[#FFA3A3] text-lg">Where to Soften It</h3>
-                        <p className="text-sm">
-                            May not be ideal out-of-the-box for highly conservative enterprise intranets, medical records, or traditional corporate fintech systems—unless you leverage our built-in <strong>Pastel</strong> or <strong>Monochrome</strong> theme presets to soften the contrast.
-                        </p>
-                    </div>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> Why copy-paste over npm dependencies?</h2>
-                <p>
-                    Following the shadcn/ui workflow philosophy, you install BrutxUI components directly into your local components folder (e.g. <code>components/ui/</code>).
-                </p>
-                <ul className="list-disc pl-5 space-y-2">
-                    <li><strong>100% Code Ownership:</strong> The code belongs to you. Need to change the core logic of a Popover or alter a Button variant? Open the file and edit it directly. No waiting on library updates.</li>
-                    <li><strong>Zero Runtime Overhead:</strong> Only bundle components you are actively importing. Tree-shaking operates natively at build time.</li>
-                    <li><strong>Composability over Abstraction:</strong> Simple APIs with low nesting depths to make extensions extremely intuitive.</li>
-                </ul>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> System Customizability (CSS Variables & Presets)</h2>
-                <p>
-                    BrutxUI features a unified theme and tokens design system built around standard CSS custom properties.
-                    You can configure borders, shadows, and base colors globally in your global CSS file.
-                </p>
-
-                <div className="border-3 border-black dark:border-white p-5 bg-white dark:bg-gray-900 space-y-4">
-                    <h3 className="font-black text-lg">Global Design Tokens</h3>
-                    <p className="text-sm">
-                        Alter shadow offsets and border widths globally. The components will adjust automatically:
-                    </p>
-                    <pre className="bg-black text-white p-4 text-xs font-mono overflow-x-auto">
-{`:root {
-    --brutal-border-width: 3px;     /* Thickness of outlines */
-    --brutal-border-color: #000000; /* Border colors */
-    --brutal-shadow-color: #000000; /* Drop shadow colors */
-    --brutal-shadow-offset: 4px;    /* Normal card/button offset */
-}`}
-                    </pre>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">Customization Presets</h2>
-                <p>
-                    Easily adjust the visual aggression level of BrutxUI components by wrapping your application in one of our built-in preset classes:
-                </p>
-                <div className="grid sm:grid-cols-3 gap-4">
-                    <div className="p-4 border-3 border-black bg-white dark:bg-gray-900">
-                        <h4 className="font-black text-base text-[#4ECDC4]">1. Classic Brutalism</h4>
-                        <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">High-contrast borders, thick shadows, and punchy neon accents.</p>
-                    </div>
-                    <div className="p-4 border-3 border-black bg-white dark:bg-gray-900">
-                        <h4 className="font-black text-base text-[#FFE66D]">2. Pastel Neo-Brut</h4>
-                        <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">Slightly rounded border radius, softened shadows, and comforting pastel colors.</p>
-                    </div>
-                    <div className="p-4 border-3 border-black bg-white dark:bg-gray-900">
-                        <h4 className="font-black text-base text-[#FF6B6B]">3. High-Contrast Mono</h4>
-                        <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">Strict black-and-white visual palette for sleek, minimalist interfaces.</p>
-                    </div>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> AI-First Integration (Cursor / LLMs)</h2>
-                <p>
-                    We provide first-class support for AI coding assistants. If you use Cursor, VSCode, or other LLMs, they can seamlessly digest our registry structure:
-                </p>
-                <ul className="list-disc pl-5 space-y-2">
-                    <li><strong>llms.txt:</strong> Accessible at the root workspace (<code>/llms.txt</code>), offering a condensed context layout for large language models to construct error-free components.</li>
-                    <li><strong>.cursorrules:</strong> Pre-configured guidelines enforcing accessibility, design token safety, and TypeScript correctness.</li>
-                </ul>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black"> Accessibility First</h2>
-                <p>
-                    BrutxUI must not compromise usability. Every BrutxUI component is built with accessibility as a core constraint:
-                </p>
-                <ul className="list-disc pl-5 space-y-2">
-                    <li><strong>Radix UI Foundation:</strong> Primitives handle proper ARIA state attributes, screen reader interaction traps, focus rings, and browser focus management natively.</li>
-                    <li><strong>Color Contrast:</strong> Heavy outline indicators protect visibility inside both light and dark modes.</li>
-                    <li><strong>Responsive Layouts:</strong> Responsive flex-grid grids protect content readability across screen viewports.</li>
-                </ul>
-            </section>
-
-            <section className="space-y-6 pt-4">
-                <h2 className="text-3xl font-black">Next Steps</h2>
-                <div className="grid sm:grid-cols-2 gap-4">
-                    <Link href="/docs/installation" className="p-4 border-3 border-black hover:bg-gray-100 dark:hover:bg-gray-800 block">
-                        <h4 className="font-bold text-lg mb-1"> Installation Guide</h4>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">Initialize BrutxUI in your project and copy components via CLI.</p>
-                    </Link>
-
-                    <Link href="/docs/theme" className="p-4 border-3 border-black hover:bg-gray-100 dark:hover:bg-gray-800 block">
-                        <h4 className="font-bold text-lg mb-1"> Customizing Theming</h4>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">Master custom variables, dark modes, and the token layer.</p>
-                    </Link>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/docs/theme/page.tsx b/apps/docs/app/docs/theme/page.tsx
deleted file mode 100644
index 727faa3..0000000
--- a/apps/docs/app/docs/theme/page.tsx
+++ /dev/null
@@ -1,259 +0,0 @@
-import { Card, CardContent, Badge } from '@/components/ui';
-import { Metadata } from 'next';
-import Link from 'next/link';
-
-export const metadata: Metadata = {
-    title: 'Themes & Design Tokens - Brutx',
-    description: 'Learn how to customize BrutxUI using dynamic CSS custom properties, presets, and customized neo-brutalist sizing variables.',
-    keywords: [
-        'brutx themes',
-        'neo-brutalism css variables',
-        'design tokens guide',
-        'pastel brutalism',
-        'mono brutalism',
-        'neubrutalism colors',
-    ],
-    openGraph: {
-        title: 'Themes & Design Tokens - Brutx',
-        description: 'Learn how to customize BrutxUI using dynamic CSS custom properties, presets, and customized neo-brutalist sizing variables.',
-        url: 'https://brutxui.site/docs/theme',
-    },
-    alternates: {
-        canonical: 'https://brutxui.site/docs/theme',
-    },
-};
-
-export default function ThemeTokensPage() {
-    return (
-        <div className="max-w-4xl space-y-8">
-            <div>
-                <Badge variant="accent" className="mb-4">
-                    Theming System
-                </Badge>
-                <h1 className="text-4xl font-black mb-2">Themes & Design Tokens</h1>
-                <p className="text-lg text-gray-700 dark:text-gray-300">
-                    BrutxUI features a highly parameterizable styling system built entirely on CSS Custom Properties (variables).
-                    Instead of hardcoding colors, borders, and shadows into tailwind classes, you can fully control the visual aggression of the framework in a single CSS layer.
-                </p>
-            </div>
-
-            <hr className="border-t-3 border-black dark:border-white my-6" />
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">1. What are the Brutx Tokens?</h2>
-                <p>
-                    BrutxUI exposes a complete set of design tokens within `:root` (for light mode) and `.dark` (for dark mode).
-                    These tokens map directly to Tailwind CSS utilities such as `bg-brutal-primary`, `border-brutal`, `shadow-brutal-lg`, and `rounded-brutal`.
-                </p>
-
-                <div className="overflow-x-auto">
-                    <table className="w-full border-3 border-black dark:border-white text-sm">
-                        <thead className="bg-brutal-accent dark:bg-gray-800">
-                            <tr>
-                                <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black dark:border-white font-black text-black dark:text-white">Token Name</th>
-                                <th className="px-4 py-2 text-left border-r-3 border-b-3 border-black dark:border-white font-black text-black dark:text-white">Default Value</th>
-                                <th className="px-4 py-2 text-left border-b-3 border-black dark:border-white font-black text-black dark:text-white">Description</th>
-                            </tr>
-                        </thead>
-                        <tbody className="bg-white dark:bg-gray-900">
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-border-width</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">3px</td>
-                                <td className="px-4 py-2">Thick border outlines across buttons, inputs, and components.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-border-color</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#000000 / #ffffff</td>
-                                <td className="px-4 py-2">The color applied to all brutal borders.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-shadow-offset-x</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">4px</td>
-                                <td className="px-4 py-2">Horizontal offset distance for hard shadows.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-shadow-offset-y</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">4px</td>
-                                <td className="px-4 py-2">Vertical offset distance for hard shadows.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-shadow-color</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#000000 / #ffffff</td>
-                                <td className="px-4 py-2">The solid shadow overlay color.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-radius</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">0px</td>
-                                <td className="px-4 py-2">Controls rounded corner radius globally.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-pressed-offset</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">2px</td>
-                                <td className="px-4 py-2">The translation depth when a button is clicked or pressed.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-primary</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#FF6B6B</td>
-                                <td className="px-4 py-2">Core variant background color (primary).</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-secondary</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#4ECDC4</td>
-                                <td className="px-4 py-2">Secondary variant background color.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-accent</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#FFE66D</td>
-                                <td className="px-4 py-2">Accent variant background color (usually yellow).</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-destructive</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#EF476F</td>
-                                <td className="px-4 py-2">Color for dangerous alerts, delete triggers, etc.</td>
-                            </tr>
-                            <tr className="border-b-2 border-black dark:border-white">
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-success</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#7FB069</td>
-                                <td className="px-4 py-2">Color for success badges and alerts.</td>
-                            </tr>
-                            <tr>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono font-bold">--brutal-ring</td>
-                                <td className="px-4 py-2 border-r-3 border-black dark:border-white font-mono">#000000</td>
-                                <td className="px-4 py-2">Focus outline ring color for keyboard navigation.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">2. Customizing Sizing and Outlines</h2>
-                <p>
-                    By overriding these variable settings in your global stylesheet, components instantly adjust.
-                    You can achieve completely different visual styles with tiny tweaks.
-                </p>
-
-                <div className="grid md:grid-cols-2 gap-4">
-                    <div className="p-5 border-3 border-black dark:border-white bg-white dark:bg-gray-900 space-y-2">
-                        <h4 className="font-black text-[#FF6B6B]">Adjusting Shadows</h4>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                            Decrease or increase the shadow offset length by writing:
-                        </p>
-                        <pre className="bg-black text-[#FFE66D] p-3 text-xs font-mono overflow-x-auto">
-{`:root {
-  --brutal-shadow-offset-x: 6px;
-  --brutal-shadow-offset-y: 6px;
-}`}
-                        </pre>
-                    </div>
-
-                    <div className="p-5 border-3 border-black dark:border-white bg-white dark:bg-gray-900 space-y-2">
-                        <h4 className="font-black text-[#4ECDC4]">Altering Border Width</h4>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                            Create dynamic borders that apply evenly across forms, cards, and dropdown triggers:
-                        </p>
-                        <pre className="bg-black text-[#4ECDC4] p-3 text-xs font-mono overflow-x-auto">
-{`:root {
-  --brutal-border-width: 2px;
-}`}
-                        </pre>
-                    </div>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">3. Soft vs. Aggressive Brutalism</h2>
-                <p>
-                    Neo-brutalism sits on a scale. You can dial it down for a softer SaaS interface or turn it up for a bold game or indie product feel.
-                </p>
-                <div className="grid md:grid-cols-2 gap-4">
-                    <div className="p-5 border-3 border-black dark:border-white bg-[#faf9f6] dark:bg-gray-800 text-black dark:text-white space-y-3">
-                        <h4 className="font-black text-sm uppercase tracking-wider text-gray-500">Softer Modern Feel</h4>
-                        <p className="text-sm">
-                            Reduce visual friction with slightly rounded corners, thinner borders, and soft shadows. Perfect for conventional SaaS dashboard panels.
-                        </p>
-                        <pre className="bg-black text-white p-3 text-xs font-mono overflow-x-auto">
-{`:root {
-  --brutal-border-width: 2px;
-  --brutal-radius: 8px;
-  --brutal-shadow-offset-x: 3px;
-  --brutal-shadow-offset-y: 3px;
-}`}
-                        </pre>
-                    </div>
-                    <div className="p-5 border-3 border-black dark:border-white bg-white dark:bg-gray-900 space-y-3">
-                        <h4 className="font-black text-sm uppercase tracking-wider text-[#FF6B6B]">Max Aggression</h4>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                            Make components extremely bold and heavy using 4px black outlines and sharp, unyielding 0px rectangular edges.
-                        </p>
-                        <pre className="bg-black text-[#FF6B6B] p-3 text-xs font-mono overflow-x-auto">
-{`:root {
-  --brutal-border-width: 4px;
-  --brutal-radius: 0px;
-  --brutal-shadow-offset-x: 6px;
-  --brutal-shadow-offset-y: 6px;
-}`}
-                        </pre>
-                    </div>
-                </div>
-            </section>
-
-            <section className="space-y-4">
-                <h2 className="text-2xl font-black">4. Built-in Theme Presets</h2>
-                <p>
-                    BrutxUI ships out of the box with three pre-coded aesthetic presets. To activate a preset, simply wrap your page or container in the corresponding class.
-                </p>
-
-                <div className="space-y-6">
-                    <div className="border-3 border-black dark:border-white p-5 bg-white dark:bg-gray-900 space-y-3">
-                        <div className="flex items-center gap-2">
-                            <Badge variant="primary">Preset</Badge>
-                            <h3 className="font-black text-lg">Classic Preset (`.theme-classic`)</h3>
-                        </div>
-                        <p className="text-sm text-gray-600 dark:text-gray-400">
-                            The definitive high-contrast brutalist profile. Sharp 0px radius, vibrant saturated colors (coral red, mint teal, yellow), and dark black shadows.
-                        </p>
-                        <pre className="bg-black text-[#FF6B6B] p-4 text-xs font-mono overflow-x-auto">
-{`<div className="theme-classic">
-  <Button variant="primary">Classic Coral</Button>
-  <Button variant="secondary">Mint Teal</Button>
-</div>`}
-                        </pre>
-                    </div>
-
-                    <div className="border-3 border-[#1e1e24] dark:border-white p-5 bg-[#faf9f6] dark:bg-gray-800 text-[#1e1e24] dark:text-white space-y-3">
-                        <div className="flex items-center gap-2">
-                            <Badge variant="outline" className="bg-[#d6c6e1] dark:bg-purple-950 text-[#1e1e24] dark:text-purple-200 border-[#1e1e24] dark:border-white">Preset</Badge>
-                            <h3 className="font-black text-lg text-[#1e1e24] dark:text-white">Pastel Preset (`.theme-pastel`)</h3>
-                        </div>
-                        <p className="text-sm text-gray-700 dark:text-gray-300">
-                            A charming, cozy pastel variation. Features soft lavender, mint sage, rounder corners (`8px`), and gentle `2px` slate-gray borders for a playful but clean UI.
-                        </p>
-                        <pre className="bg-black text-[#d6c6e1] p-4 text-xs font-mono overflow-x-auto">
-{`<div className="theme-pastel">
-  <Button variant="primary">Lavender</Button>
-  <Button variant="accent">Peach Accent</Button>
-</div>`}
-                        </pre>
-                    </div>
-
-                    <div className="border-4 border-black dark:border-white p-5 bg-white dark:bg-gray-800 text-black dark:text-white space-y-3">
-                        <div className="flex items-center gap-2">
-                            <span className="px-2 py-0.5 border-2 border-black dark:border-white font-black text-xs bg-black dark:bg-white text-white dark:text-black">Preset</span>
-                            <h3 className="font-black text-lg">Mono Preset (`.theme-mono`)</h3>
-                        </div>
-                        <p className="text-sm text-gray-700 dark:text-gray-300">
-                            A high-contrast stark layout consisting entirely of grayscale values, heavy `4px` black outlines, and thick `5px` shadows.
-                        </p>
-                        <pre className="bg-black text-white p-4 text-xs font-mono overflow-x-auto">
-{`<div className="theme-mono">
-  <Button variant="primary">Black Mono</Button>
-  <Button variant="secondary">White Mono</Button>
-</div>`}
-                        </pre>
-                    </div>
-                </div>
-            </section>
-        </div>
-    );
-}
diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css
deleted file mode 100644
index 398345f..0000000
--- a/apps/docs/app/globals.css
+++ /dev/null
@@ -1,193 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
-
-    html {
-        scroll-behavior: smooth;
-    }
-
-    body {
-        @apply bg-white text-black font-brutal;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        overflow-x: hidden;
-    }
-
-    .dark body,
-    html.dark body {
-        @apply bg-gray-950 text-gray-200;
-    }
-}
-
-@layer components {
-    .container-brutal {
-        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
-    }
-}
-
-@layer utilities {
-    .border-3 {
-        border-width: 3px;
-    }
-
-    .shadow-brutal {
-        box-shadow: 4px 4px 0px 0px #000000;
-    }
-
-    .shadow-brutal-sm {
-        box-shadow: 2px 2px 0px 0px #000000;
-    }
-
-    .shadow-brutal-lg {
-        box-shadow: 6px 6px 0px 0px #000000;
-    }
-
-    .shadow-brutal-xl {
-        box-shadow: 8px 8px 0px 0px #000000;
-    }
-
-    .dark .shadow-brutal {
-        box-shadow: 4px 4px 0px 0px #64748b;
-    }
-
-    .dark .shadow-brutal-sm {
-        box-shadow: 2px 2px 0px 0px #64748b;
-    }
-
-    .dark .shadow-brutal-lg {
-        box-shadow: 6px 6px 0px 0px #64748b;
-    }
-
-    .dark .shadow-brutal-xl {
-        box-shadow: 8px 8px 0px 0px #64748b;
-    }
-
-    .text-3d-concrete {
-        position: relative;
-        display: inline-block;
-    }
-
-    .text-3d-concrete::before,
-    .text-3d-concrete::after {
-        content: attr(data-text);
-        position: absolute;
-        top: 0;
-        left: 0;
-        -webkit-text-stroke: 3px #1a1a1a;
-    }
-
-    .text-3d-concrete::before {
-        transform: translate(6px, 6px);
-        color: #4a4a4a;
-        z-index: -2;
-    }
-
-    .text-3d-concrete::after {
-        transform: translate(3px, 3px);
-        color: #6a6a6a;
-        z-index: -1;
-    }
-}
-
-.mdx-content h1 {
-    @apply text-3xl sm:text-4xl font-black tracking-tight mb-4;
-}
-
-.mdx-content > [class*='max-w-'] {
-    max-width: none;
-}
-
-.dark .mdx-content {
-    color: rgb(229 231 235);
-}
-
-.dark .mdx-content :where(.dark\:text-white) {
-    color: rgb(229 231 235);
-}
-
-.dark .mdx-content :where(.dark\:border-white) {
-    border-color: rgb(75 85 99);
-}
-
-.dark .mdx-content :where(h1, h2, h3, h4, h5, h6, strong) {
-    color: rgb(243 244 246);
-}
-
-.dark .mdx-content :where(p, li, td) {
-    color: rgb(209 213 219);
-}
-
-.dark .mdx-content :where(pre, pre code) {
-    color: rgb(229 231 235);
-}
-
-.dark .mdx-content :where(.text-brutal-fg) {
-    color: rgb(229 231 235);
-}
-
-.dark .mdx-content :where(.bg-brutal-bg) {
-    background-color: rgb(17 24 39);
-}
-
-.dark .mdx-content :where(.border-brutal) {
-    border-color: rgb(75 85 99);
-}
-
-.mdx-content h2 {
-    @apply text-xl sm:text-2xl font-black tracking-tight mt-6 sm:mt-8 mb-4 pb-2 border-b-3 border-black dark:border-white;
-}
-
-.mdx-content h3 {
-    @apply text-lg sm:text-xl font-bold mt-4 sm:mt-6 mb-3;
-}
-
-.mdx-content p {
-    @apply mb-4 font-medium leading-relaxed text-sm sm:text-base text-gray-700 dark:text-gray-300;
-}
-
-.mdx-content code:not(pre code) {
-    @apply bg-gray-100 dark:bg-gray-800 px-1 sm:px-1.5 py-0.5 font-mono text-xs sm:text-sm border-2 border-black dark:border-white break-all;
-}
-
-.mdx-content pre {
-    @apply p-3 sm:p-4 overflow-x-auto border-3 border-black dark:border-white shadow-brutal bg-gray-900 text-white my-4 text-xs sm:text-sm;
-}
-
-.mdx-content ul {
-    @apply list-disc list-inside mb-4 ml-2 sm:ml-4;
-}
-
-.mdx-content ol {
-    @apply list-decimal list-inside mb-4 ml-2 sm:ml-4;
-}
-
-.mdx-content li {
-    @apply mb-1 font-medium text-sm sm:text-base text-gray-700 dark:text-gray-300;
-}
-
-.mdx-content blockquote {
-    @apply border-l-4 border-black dark:border-white pl-3 sm:pl-4 italic my-4 bg-yellow-100 dark:bg-yellow-900/30 py-2 text-sm sm:text-base;
-}
-
-.mdx-content .table-wrapper {
-    @apply overflow-x-auto -mx-4 sm:mx-0;
-}
-
-.mdx-content table {
-    @apply w-full border-3 border-black dark:border-white text-sm;
-}
-
-.mdx-content th,
-.mdx-content td {
-    @apply px-2 sm:px-4 py-2 text-left;
-}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
deleted file mode 100644
index 1f25066..0000000
--- a/apps/docs/app/layout.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import type { Metadata } from 'next';
-import { Space_Grotesk } from 'next/font/google';
-import './globals.css';
-import { ThemeProvider } from '@/components/theme-provider';
-import 'brutx-ui/styles.css';
-import { SITE_CONFIG } from '@/config/constants';
-
-const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] });
-
-export const metadata: Metadata = {
-    title: {
-        default: 'Brutx - Neo Brutalism React Component Library',
-        template: '%s | Brutx',
-    },
-    description:
-        'Brutx UI library for React. 27+ Neo Brutalism UI components with bold borders, offset shadows, vibrant colors. Free & open-source. Built with Radix UI, Tailwind CSS. Use CLI: npx brutx@latest init. Best shadcn alternative for brutalist design.',
-    metadataBase: new URL('https://brutxui.site'),
-    keywords: [
-        'brutalism ui',
-        'brutalist ui',
-        'neo brutalism ui',
-        'neo brutalism',
-        'neubrutalism',
-
-        'brutalism ui library',
-        'brutalism ui components',
-        'neo brutalism ui components',
-        'neo brutalism ui shadcn',
-        'brutalist ui kit',
-        'neobrutalism components',
-
-        'brutalism react',
-        'neo brutalism react',
-        'brutalist react components',
-        'react brutalism ui',
-        'react ui library',
-        'react component library',
-
-        'brutalism design',
-        'brutalist design',
-        'neo brutalist',
-        'neubrutalism design',
-        'brutalism web design',
-
-        'tailwind brutalism',
-        'radix ui brutalism',
-        'shadcn alternative',
-        'shadcn brutalism',
-
-        'bold ui components',
-        'offset shadow ui',
-        'vibrant colors ui',
-        'accessible components',
-        'typescript ui library',
-        'open source ui',
-        'free react components',
-    ],
-    authors: [{ name: 'dev-snake', url: 'https://github.com/dev-snake' }],
-    creator: 'dev-snake',
-    publisher: 'Brutx',
-    category: 'Technology',
-    classification: 'Software Development',
-    robots: {
-        index: true,
-        follow: true,
-        googleBot: {
-            index: true,
-            follow: true,
-            'max-video-preview': -1,
-            'max-image-preview': 'large',
-            'max-snippet': -1,
-        },
-    },
-    alternates: {
-        canonical: 'https://brutxui.site',
-    },
-    openGraph: {
-        type: 'website',
-        locale: 'en_US',
-        url: 'https://brutxui.site',
-        siteName: 'Brutx',
-        title: 'Brutx - Neo Brutalism React Component Library',
-        description:
-            'Brutx UI library with 27+ Neo Brutalism components. Bold borders, offset shadows, vibrant colors. Free & open-source React UI kit. Best shadcn alternative.',
-        images: [
-            {
-                url: '/og-image.svg',
-                width: 1200,
-                height: 630,
-                alt: 'Brutx - Neo Brutalism React Component Library',
-                type: 'image/svg+xml',
-            },
-        ],
-    },
-    twitter: {
-        card: 'summary_large_image',
-        title: 'Brutx - Neo Brutalism React Component Library',
-        description:
-            'Brutx UI library with 27+ Neo Brutalism React components. Free & open-source.',
-        images: ['/og-image.svg'],
-        creator: '@devsnake',
-    },
-    icons: {
-        icon: '/favicon.svg',
-        shortcut: '/favicon.svg',
-        apple: '/favicon.svg',
-    },
-    manifest: '/manifest.json',
-    verification: {
-        google: 'google4dc1dc17528f75a7',
-    },
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-    const websiteJsonLd = {
-        '@context': 'https://schema.org',
-        '@type': 'WebSite',
-        '@id': 'https://brutxui.site/#website',
-        name: 'Brutx',
-        alternateName: ['Brutx UI', 'Neo Brutalism UI', 'BrutxUI'],
-        url: 'https://brutxui.site',
-        description:
-            'Brutx UI library for React. 27+ Neo Brutalism UI components with bold borders, offset shadows, vibrant colors.',
-        publisher: {
-            '@id': 'https://brutxui.site/#organization',
-        },
-        potentialAction: [
-            {
-                '@type': 'SearchAction',
-                target: {
-                    '@type': 'EntryPoint',
-                    urlTemplate: 'https://brutxui.site/docs/components/{search_term_string}',
-                },
-                'query-input': 'required name=search_term_string',
-            },
-        ],
-        inLanguage: 'en-US',
-    };
-
-    const organizationJsonLd = {
-        '@context': 'https://schema.org',
-        '@type': 'Organization',
-        '@id': 'https://brutxui.site/#organization',
-        name: 'Brutx',
-        url: 'https://brutxui.site',
-        logo: 'https://brutxui.site/favicon.svg',
-        sameAs: [
-            SITE_CONFIG.github.url,
-            'https://www.npmjs.com/package/brutx-ui',
-        ],
-    };
-
-    const softwareJsonLd = {
-        '@context': 'https://schema.org',
-        '@type': 'SoftwareApplication',
-        name: 'Brutx',
-        alternateName: ['Brutx UI', 'Neo Brutalism UI', 'Neubrutalism UI'],
-        applicationCategory: 'DeveloperApplication',
-        applicationSubCategory: 'UI Component Library',
-        operatingSystem: 'Any',
-        description:
-            'Brutx UI library for React with 27+ Neo Brutalism components. Bold borders, offset shadows, vibrant colors. Free & open-source.',
-        url: 'https://brutxui.site',
-        downloadUrl: 'https://www.npmjs.com/package/brutx-ui',
-        softwareVersion: SITE_CONFIG.version,
-        programmingLanguage: ['TypeScript', 'React', 'JavaScript'],
-        author: {
-            '@id': 'https://brutxui.site/#organization',
-        },
-        offers: {
-            '@type': 'Offer',
-            price: '0',
-            priceCurrency: 'USD',
-            availability: 'https://schema.org/InStock',
-        },
-        keywords:
-            'brutx, neo brutalism, brutx ui, neubrutalism, react components, ui library',
-    };
-
-    const navigationJsonLd = {
-        '@context': 'https://schema.org',
-        '@type': 'ItemList',
-        '@id': 'https://brutxui.site/#navigation',
-        name: 'Main Navigation',
-        itemListElement: [
-            {
-                '@type': 'SiteNavigationElement',
-                position: 1,
-                name: 'Introduction',
-                description: 'Get started with Brutx',
-                url: 'https://brutxui.site/docs',
-            },
-            {
-                '@type': 'SiteNavigationElement',
-                position: 2,
-                name: 'Installation',
-                description: 'Install and configure Brutx for your project',
-                url: 'https://brutxui.site/docs/installation',
-            },
-            {
-                '@type': 'SiteNavigationElement',
-                position: 3,
-                name: 'Components',
-                description: 'Browse all 27+ Neo Brutalism UI components',
-                url: 'https://brutxui.site/docs/components',
-            },
-            {
-                '@type': 'SiteNavigationElement',
-                position: 4,
-                name: 'CLI',
-                description: 'Use the CLI to add components to your project',
-                url: 'https://brutxui.site/docs/cli',
-            },
-            {
-                '@type': 'SiteNavigationElement',
-                position: 5,
-                name: 'Button',
-                description: 'Interactive button component with multiple variants',
-                url: 'https://brutxui.site/docs/components/button',
-            },
-            {
-                '@type': 'SiteNavigationElement',
-                position: 6,
-                name: 'Card',
-                description: 'Container component with header, content, and footer',
-                url: 'https://brutxui.site/docs/components/card',
-            },
-        ],
-    };
-
-    return (
-        <html lang="en" suppressHydrationWarning>
-            <head>
-                <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-                <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" />
-                <link rel="apple-touch-icon" href="/favicon.svg" />
-
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteJsonLd) }}
-                />
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
-                />
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{ __html: JSON.stringify(softwareJsonLd) }}
-                />
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{ __html: JSON.stringify(navigationJsonLd) }}
-                />
-            </head>
-            <body className={spaceGrotesk.className}>
-                <ThemeProvider
-                    attribute="class"
-                    defaultTheme="system"
-                    enableSystem
-                    disableTransitionOnChange
-                >
-                    {children}
-                </ThemeProvider>
-            </body>
-        </html>
-    );
-}
diff --git a/apps/docs/app/not-found.tsx b/apps/docs/app/not-found.tsx
deleted file mode 100644
index 84d1cd6..0000000
--- a/apps/docs/app/not-found.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Link from 'next/link';
-import { Button } from '@/components/ui';
-
-export default function NotFound() {
-    return (
-        <main className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-950 px-4">
-            <div className="text-center">
-                <div className="relative inline-block mb-8">
-                    <span
-                        className="absolute inset-0 text-[150px] sm:text-[200px] md:text-[280px] font-black text-[#4ECDC4] select-none"
-                        style={{ transform: 'translate(12px, 12px)' }}
-                        aria-hidden="true"
-                    >
-                        404
-                    </span>
-                    <span
-                        className="absolute inset-0 text-[150px] sm:text-[200px] md:text-[280px] font-black text-[#FF6B6B] select-none"
-                        style={{ transform: 'translate(6px, 6px)' }}
-                        aria-hidden="true"
-                    >
-                        404
-                    </span>
-                    <h1
-                        className="relative text-[150px] sm:text-[200px] md:text-[280px] font-black text-[#FFE66D] select-none"
-                        style={{
-                            WebkitTextStroke: '3px #000',
-                            paintOrder: 'stroke fill',
-                        }}
-                    >
-                        404
-                    </h1>
-                </div>
-
-                <div className="border-3 border-black dark:border-white bg-white dark:bg-gray-900 p-6 sm:p-8 shadow-brutal max-w-md mx-auto">
-                    <h2 className="text-2xl sm:text-3xl font-black mb-4 text-gray-900 dark:text-white">
-                        Page Not Found
-                    </h2>
-                    <p className="text-gray-700 dark:text-gray-300 font-medium mb-6">
-                        Oops! The page you&apos;re looking for doesn&apos;t exist or has been moved.
-                    </p>
-
-                    <div className="flex flex-col sm:flex-row gap-3 justify-center">
-                        <Link href="/">
-                            <Button variant="primary" size="lg" className="w-full sm:w-auto truncate ">
-                                ← Go Home
-                            </Button>
-                        </Link>
-                        <Link href="/docs">
-                            <Button
-                                variant="outline"
-                                size="lg"
-                                className="w-full sm:w-auto dark:border-white dark:text-white"
-                            >
-                                Documentation
-                            </Button>
-                        </Link>
-                    </div>
-                </div>
-
-                <p className="mt-8 text-sm text-gray-500 dark:text-gray-400 font-medium">
-                    Looking for components?{' '}
-                    <Link
-                        href="/docs/components"
-                        className="text-[#FF6B6B] hover:underline font-bold"
-                    >
-                        Browse all components →
-                    </Link>
-                </p>
-            </div>
-        </main>
-    );
-}
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
deleted file mode 100644
index 3e0b90d..0000000
--- a/apps/docs/app/page.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-import Link from 'next/link';
-import {
-    ArrowRight,
-    BadgeCheck,
-    Blocks,
-    BookOpen,
-    Code2,
-    ExternalLink,
-    FileCode2,
-    Github,
-    HeartHandshake,
-    Keyboard,
-    Layers3,
-    PackagePlus,
-    Palette,
-    Rocket,
-    Server,
-    Settings2,
-    ShieldCheck,
-    Sparkles,
-    TerminalSquare,
-    Type,
-    type LucideIcon,
-} from 'lucide-react';
-import { Button, Card, CardContent, CardHeader, CardTitle, Badge } from '@/components/ui';
-import { ThemeToggle } from '@/components/theme-toggle';
-import { SITE_CONFIG } from '@/config/constants';
-
-type FeatureCard = {
-    title: string;
-    description: string;
-    Icon: LucideIcon;
-    iconClassName: string;
-};
-
-const FEATURES: FeatureCard[] = [
-    {
-        title: 'Neo-Brutalism Design',
-        description:
-            'Bold 3px borders, 4px offset shadows, heavy fonts. No rounded corners. Just pure, blocky goodness.',
-        Icon: Palette,
-        iconClassName: 'bg-[#FF6B6B]',
-    },
-    {
-        title: 'Accessible',
-        description:
-            'Built on Radix UI primitives for keyboard navigation, screen reader support, and ARIA compliance.',
-        Icon: ShieldCheck,
-        iconClassName: 'bg-[#4ECDC4]',
-    },
-    {
-        title: 'TypeScript First',
-        description: 'Full TypeScript support with type-safe variants using class-variance-authority.',
-        Icon: Type,
-        iconClassName: 'bg-[#FFE66D]',
-    },
-    {
-        title: 'Customizable',
-        description: 'Copy components to your codebase. Easy to extend and modify to match your brand.',
-        Icon: Settings2,
-        iconClassName: 'bg-[#FF6B6B]',
-    },
-    {
-        title: 'CLI Tool',
-        description: 'Add components with a single command. Full control over your code.',
-        Icon: TerminalSquare,
-        iconClassName: 'bg-[#4ECDC4]',
-    },
-    {
-        title: 'Modern Stack',
-        description:
-            'React 18+, Next.js 14 compatible. Server Components ready with "use client" directives.',
-        Icon: Layers3,
-        iconClassName: 'bg-[#FFE66D]',
-    },
-];
-
-export default function Home() {
-    return (
-        <main className="min-h-screen overflow-x-hidden bg-white dark:bg-gray-950">
-            <div className="fixed top-4 right-4 z-50">
-                <ThemeToggle />
-            </div>
-
-            <section className="container-brutal py-12 sm:py-20 px-4">
-                <div className="flex flex-col items-center text-center">
-                    <Badge
-                        variant="primary"
-                        size="lg"
-                        className="mb-4 inline-flex items-center gap-2 sm:mb-6"
-                    >
-                        <BadgeCheck className="h-4 w-4" aria-hidden="true" />
-                        v{SITE_CONFIG.version}
-                    </Badge>
-
-                    <div className="relative mb-6 sm:mb-8">
-                        <div className="relative inline-block">
-                            <h1 className="text-5xl sm:text-7xl md:text-9xl lg:text-[11rem] font-black tracking-tighter select-none">
-                                <span
-                                    className="absolute text-black"
-                                    style={{
-                                        transform: 'translate(8px, 8px)',
-                                    }}
-                                    aria-hidden="true"
-                                >
-                                    Brutx
-                                </span>
-                                <span
-                                    className="absolute text-[#FF6B6B]"
-                                    style={{
-                                        transform: 'translate(5px, 5px)',
-                                    }}
-                                    aria-hidden="true"
-                                >
-                                    Brutx
-                                </span>
-                                <span
-                                    className="absolute text-[#4ECDC4]"
-                                    style={{
-                                        transform: 'translate(2px, 2px)',
-                                    }}
-                                    aria-hidden="true"
-                                >
-                                    Brutx
-                                </span>
-                                <span
-                                    className="relative text-[#FFE66D]"
-                                    style={{
-                                        WebkitTextStroke: '2px #000',
-                                        paintOrder: 'stroke fill',
-                                    }}
-                                >
-                                    Brutx
-                                </span>
-                            </h1>
-                        </div>
-                    </div>
-                    <p className="text-lg sm:text-xl md:text-2xl font-bold max-w-2xl mb-6 sm:mb-8 text-gray-700 dark:text-gray-300 px-2">
-                        Bold, blocky, and beautiful React components. Built with Radix UI, styled
-                        with Tailwind CSS, and designed for maximum impact.
-                    </p>
-                    <div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 justify-center w-full sm:w-auto px-4 sm:px-0">
-                        <Link href="/docs" className="w-full sm:w-auto">
-                            <Button variant="primary" size="lg" className="w-full sm:w-auto">
-                                <BookOpen className="h-5 w-5 shrink-0" aria-hidden="true" />
-                                Get Started
-                                <ArrowRight className="h-5 w-5 shrink-0" aria-hidden="true" />
-                            </Button>
-                        </Link>
-                        <Link href="/docs/components" className="w-full sm:w-auto">
-                            <Button
-                                variant="outline"
-                                size="lg"
-                                className="w-full sm:w-auto dark:border-white dark:text-white dark:hover:bg-gray-800"
-                            >
-                                <Blocks className="h-5 w-5 shrink-0" aria-hidden="true" />
-                                Components
-                            </Button>
-                        </Link>
-                        <a
-                            href={SITE_CONFIG.github.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="w-full sm:w-auto"
-                        >
-                            <Button
-                                variant="default"
-                                size="lg"
-                                className="w-full sm:w-auto dark:bg-white dark:text-black"
-                            >
-                                <Github className="h-5 w-5 shrink-0" aria-hidden="true" />
-                                GitHub
-                                <ExternalLink className="h-4 w-4 shrink-0" aria-hidden="true" />
-                            </Button>
-                        </a>
-                        <Link href="/sponsor" className="w-full sm:w-auto">
-                            <Button variant="danger" size="lg" className="w-full sm:w-auto">
-                                <HeartHandshake className="h-5 w-5 shrink-0" aria-hidden="true" />
-                                Sponsor
-                            </Button>
-                        </Link>
-                    </div>
-                </div>
-            </section>
-
-            <section className="container-brutal py-12 sm:py-16 px-4">
-                <h2 className="text-3xl sm:text-4xl font-black text-center mb-8 sm:mb-12">
-                    <span className="inline-flex items-center justify-center gap-3">
-                        <Sparkles className="h-8 w-8 text-[#FFE66D]" aria-hidden="true" />
-                        Features
-                    </span>
-                </h2>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
-                    {FEATURES.map(({ title, description, Icon, iconClassName }) => (
-                        <Card
-                            key={title}
-                            variant="default"
-                            className="dark:bg-gray-900 dark:border-white"
-                        >
-                            <CardHeader>
-                                <div
-                                    className={`mb-3 flex h-12 w-12 items-center justify-center border-3 border-black text-black shadow-[3px_3px_0px_0px_#000000] dark:border-white dark:shadow-[3px_3px_0px_0px_#FFFFFF] ${iconClassName}`}
-                                >
-                                    <Icon className="h-7 w-7" aria-hidden="true" />
-                                </div>
-                                <CardTitle className="text-base sm:text-lg">{title}</CardTitle>
-                            </CardHeader>
-                            <CardContent>
-                                <p className="font-medium text-gray-700 dark:text-gray-300 text-sm sm:text-base">
-                                    {description}
-                                </p>
-                            </CardContent>
-                        </Card>
-                    ))}
-                </div>
-            </section>
-
-            <section className="container-brutal py-12 sm:py-16 px-4">
-                <h2 className="text-3xl sm:text-4xl font-black text-center mb-8 sm:mb-12">
-                    <span className="inline-flex items-center justify-center gap-3">
-                        <Keyboard className="h-8 w-8" aria-hidden="true" />
-                        Quick Start
-                    </span>
-                </h2>
-                <Card className="max-w-3xl mx-auto dark:bg-gray-900 dark:border-white">
-                    <CardContent className="pt-4 sm:pt-6">
-                        <div className="space-y-4">
-                            <div>
-                                <p className="flex items-center gap-2 font-bold mb-2 text-sm sm:text-base">
-                                    <span className="flex h-8 w-8 items-center justify-center border-3 border-black bg-[#FF6B6B] text-black shadow-[2px_2px_0px_0px_#000000] dark:border-white dark:shadow-[2px_2px_0px_0px_#FFFFFF]">
-                                        <Rocket className="h-4 w-4" aria-hidden="true" />
-                                    </span>
-                                    1. Initialize your project:
-                                </p>
-                                <pre className="bg-gray-900 text-white p-3 sm:p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-xs sm:text-sm">
-                                    <code>npx brutx@latest init</code>
-                                </pre>
-                            </div>
-                            <div>
-                                <p className="flex items-center gap-2 font-bold mb-2 text-sm sm:text-base">
-                                    <span className="flex h-8 w-8 items-center justify-center border-3 border-black bg-[#4ECDC4] text-black shadow-[2px_2px_0px_0px_#000000] dark:border-white dark:shadow-[2px_2px_0px_0px_#FFFFFF]">
-                                        <PackagePlus className="h-4 w-4" aria-hidden="true" />
-                                    </span>
-                                    2. Add components:
-                                </p>
-                                <pre className="bg-gray-900 text-white p-3 sm:p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-xs sm:text-sm">
-                                    <code>npx brutx@latest add button card</code>
-                                </pre>
-                            </div>
-                            <div>
-                                <p className="flex items-center gap-2 font-bold mb-2 text-sm sm:text-base">
-                                    <span className="flex h-8 w-8 items-center justify-center border-3 border-black bg-[#FFE66D] text-black shadow-[2px_2px_0px_0px_#000000] dark:border-white dark:shadow-[2px_2px_0px_0px_#FFFFFF]">
-                                        <FileCode2 className="h-4 w-4" aria-hidden="true" />
-                                    </span>
-                                    3. Use the components:
-                                </p>
-                                <pre className="bg-gray-900 text-white p-3 sm:p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto text-xs sm:text-sm">
-                                    <code>{`import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
-
-function App() {
-  return (
-    <Card>
-      <Button variant="primary">
-        Click me!
-      </Button>
-    </Card>
-  );
-}`}</code>
-                                </pre>
-                            </div>
-                        </div>
-                    </CardContent>
-                </Card>
-            </section>
-
-            <footer className="border-t-3 border-black dark:border-white mt-12 sm:mt-16">
-                <div className="container-brutal py-6 sm:py-8 px-4">
-                    <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-center md:text-left">
-                        <p className="font-bold text-sm sm:text-base">
-                            <span className="inline-flex items-center gap-2">
-                                <Server className="h-4 w-4" aria-hidden="true" />
-                                Built with React, Tailwind CSS & Radix UI
-                            </span>
-                        </p>
-                        <div className="flex gap-4">
-                            <a
-                                href={SITE_CONFIG.github.url}
-                                className="inline-flex items-center gap-2 font-bold hover:underline text-sm sm:text-base"
-                            >
-                                <Github className="h-4 w-4" aria-hidden="true" />
-                                GitHub
-                                <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
-                            </a>
-                            <a
-                                href="/docs"
-                                className="inline-flex items-center gap-2 font-bold hover:underline text-sm sm:text-base"
-                            >
-                                <Code2 className="h-4 w-4" aria-hidden="true" />
-                                Documentation
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </footer>
-        </main>
-    );
-}
diff --git a/apps/docs/app/robots.ts b/apps/docs/app/robots.ts
deleted file mode 100644
index 19c1ed6..0000000
--- a/apps/docs/app/robots.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { MetadataRoute } from 'next';
-
-export default function robots(): MetadataRoute.Robots {
-    return {
-        rules: [
-            {
-                userAgent: '*',
-                allow: '/',
-                disallow: ['/api/', '/_next/'],
-            },
-            {
-                userAgent: 'Googlebot',
-                allow: '/',
-            },
-            {
-                userAgent: 'Bingbot',
-                allow: '/',
-            },
-        ],
-        sitemap: 'https://brutxui.site/sitemap.xml',
-        host: 'https://brutxui.site',
-    };
-}
diff --git a/apps/docs/app/sitemap.ts b/apps/docs/app/sitemap.ts
deleted file mode 100644
index 528736c..0000000
--- a/apps/docs/app/sitemap.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { MetadataRoute } from 'next';
-
-export default function sitemap(): MetadataRoute.Sitemap {
-    const baseUrl = 'https://brutxui.site';
-
-    const components = [
-        'alert',
-        'alert-dialog',
-        'avatar',
-        'badge',
-        'button',
-        'calendar',
-        'card',
-        'checkbox',
-        'combobox',
-        'command',
-        'dialog',
-        'dropdown-menu',
-        'form',
-        'input',
-        'label',
-        'pagination',
-        'popover',
-        'progress',
-        'radio-group',
-        'scroll-area',
-        'select',
-        'separator',
-        'sheet',
-        'slider',
-        'skeleton',
-        'spinner',
-        'submit-button',
-        'switch',
-        'toggle',
-        'toggle-group',
-        'table',
-        'tabs',
-        'textarea',
-        'toast',
-        'tooltip',
-    ];
-
-    const componentPages = components.map((component) => ({
-        url: `${baseUrl}/docs/components/${component}`,
-        lastModified: new Date(),
-        changeFrequency: 'weekly' as const,
-        priority: 0.8,
-    }));
-
-    const installationPages = [
-        {
-            url: `${baseUrl}/docs/installation`,
-            lastModified: new Date(),
-            changeFrequency: 'monthly' as const,
-            priority: 0.9,
-        },
-        {
-            url: `${baseUrl}/docs/installation/nextjs`,
-            lastModified: new Date(),
-            changeFrequency: 'monthly' as const,
-            priority: 0.85,
-        },
-        {
-            url: `${baseUrl}/docs/installation/vite`,
-            lastModified: new Date(),
-            changeFrequency: 'monthly' as const,
-            priority: 0.85,
-        },
-        {
-            url: `${baseUrl}/docs/installation/manual`,
-            lastModified: new Date(),
-            changeFrequency: 'monthly' as const,
-            priority: 0.85,
-        },
-        {
-            url: `${baseUrl}/docs/installation/shadcn`,
-            lastModified: new Date(),
-            changeFrequency: 'monthly' as const,
-            priority: 0.85,
-        },
-    ];
-
-    const blocksList = [
-        'brutalist-hero',
-        'pricing-section',
-        'auth-card',
-        'dashboard-shell',
-        'empty-state',
-        'waitlist-page',
-    ];
-
-    const blockPages = blocksList.map((block) => ({
-        url: `${baseUrl}/docs/blocks/${block}`,
-        lastModified: new Date(),
-        changeFrequency: 'weekly' as const,
-        priority: 0.8,
-    }));
-
-    return [
-        {
-            url: baseUrl,
-            lastModified: new Date(),
-            changeFrequency: 'daily',
-            priority: 1,
-        },
-        {
-            url: `${baseUrl}/docs`,
-            lastModified: new Date(),
-            changeFrequency: 'weekly',
-            priority: 0.95,
-        },
-        {
-            url: `${baseUrl}/docs/components`,
-            lastModified: new Date(),
-            changeFrequency: 'weekly',
-            priority: 0.9,
-        },
-        {
-            url: `${baseUrl}/docs/blocks`,
-            lastModified: new Date(),
-            changeFrequency: 'weekly',
-            priority: 0.9,
-        },
-        {
-            url: `${baseUrl}/docs/cli`,
-            lastModified: new Date(),
-            changeFrequency: 'monthly',
-            priority: 0.9,
-        },
-        {
-            url: `${baseUrl}/docs/theme`,
-            lastModified: new Date(),
-            changeFrequency: 'weekly',
-            priority: 0.9,
-        },
-        {
-            url: `${baseUrl}/docs/ai`,
-            lastModified: new Date(),
-            changeFrequency: 'weekly',
-            priority: 0.9,
-        },
-        ...installationPages,
-        {
-            url: `${baseUrl}/sponsor`,
-            lastModified: new Date(),
-            changeFrequency: 'monthly',
-            priority: 0.5,
-        },
-        ...componentPages,
-        ...blockPages,
-    ];
-}
diff --git a/apps/docs/app/sponsor/page.tsx b/apps/docs/app/sponsor/page.tsx
deleted file mode 100644
index 2c00d30..0000000
--- a/apps/docs/app/sponsor/page.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import Link from 'next/link';
-import { Heart, Coffee, Github, Star, Zap, Gift } from 'lucide-react';
-import { Metadata } from 'next';
-import { SITE_CONFIG } from '@/config/constants';
-
-export const metadata: Metadata = {
-    title: 'Sponsor Brutx | Support Open Source Neo-Brutalism Components',
-    description:
-        'Support the development of Brutx, the open-source Neo-Brutalism React component library. Sponsor on GitHub or Buy Me a Coffee.',
-    keywords: ['sponsor brutx', 'support open source', 'github sponsors', 'buy me a coffee'],
-    openGraph: {
-        title: 'Sponsor Brutx',
-        description: 'Support the development of Brutx open-source component library.',
-        url: 'https://brutxui.site/sponsor',
-    },
-    alternates: {
-        canonical: 'https://brutxui.site/sponsor',
-    },
-};
-
-export default function SponsorPage() {
-    return (
-        <div className="min-h-screen bg-[#FFFBF5] dark:bg-gray-900">
-            <div className="max-w-4xl mx-auto px-6 py-16">
-                <div className="text-center mb-16">
-                    <div className="inline-flex items-center justify-center w-20 h-20 bg-[#FF6B6B] border-3 border-black dark:border-white mb-6">
-                        <Heart className="w-10 h-10 text-white" fill="white" />
-                    </div>
-                    <h1 className="text-4xl md:text-6xl font-black mb-4 dark:text-white">
-                        Support Brutx
-                    </h1>
-                    <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-                        Help us keep this project alive and growing. Your support enables us to add
-                        new components, fix bugs, and maintain documentation.
-                    </p>
-                </div>
-
-                <div className="grid md:grid-cols-2 gap-6 mb-16">
-                    <a
-                        href="https://github.com/sponsors/dev-snake"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="group block p-8 bg-white dark:bg-gray-800 border-3 border-black dark:border-white hover:shadow-[8px_8px_0px_0px_#000] dark:hover:shadow-[8px_8px_0px_0px_#fff] transition-all duration-200 hover:-translate-y-1"
-                    >
-                        <div className="flex items-center gap-4 mb-4">
-                            <div className="p-3 bg-[#EA4AAA] border-2 border-black">
-                                <Github className="w-6 h-6 text-white" />
-                            </div>
-                            <h2 className="text-2xl font-black dark:text-white">GitHub Sponsors</h2>
-                        </div>
-                        <p className="text-gray-600 dark:text-gray-300 mb-4">
-                            The best way to support open source. Get exclusive updates and
-                            recognition.
-                        </p>
-                        <div className="inline-flex items-center gap-2 px-4 py-2 bg-[#EA4AAA] text-white font-bold border-2 border-black group-hover:shadow-[4px_4px_0px_0px_#000] transition-all">
-                            <Heart className="w-4 h-4" />
-                            Sponsor on GitHub
-                        </div>
-                    </a>
-
-                    <a
-                        href="https://buymeacoffee.com/devsnake"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="group block p-8 bg-white dark:bg-gray-800 border-3 border-black dark:border-white hover:shadow-[8px_8px_0px_0px_#000] dark:hover:shadow-[8px_8px_0px_0px_#fff] transition-all duration-200 hover:-translate-y-1"
-                    >
-                        <div className="flex items-center gap-4 mb-4">
-                            <div className="p-3 bg-[#FFDD00] border-2 border-black">
-                                <Coffee className="w-6 h-6 text-black" />
-                            </div>
-                            <h2 className="text-2xl font-black dark:text-white">Buy Me A Coffee</h2>
-                        </div>
-                        <p className="text-gray-600 dark:text-gray-300 mb-4">
-                            Quick and easy one-time donations. Every contribution counts.
-                        </p>
-                        <div className="inline-flex items-center gap-2 px-4 py-2 bg-[#FFDD00] text-black font-bold border-2 border-black group-hover:shadow-[4px_4px_0px_0px_#000] transition-all">
-                            <Coffee className="w-4 h-4" />
-                            Buy a Coffee
-                        </div>
-                    </a>
-                </div>
-
-                <div className="bg-[#4ECDC4] border-3 border-black dark:border-white p-8 mb-16">
-                    <h2 className="text-3xl font-black mb-6 text-black">Why Sponsor?</h2>
-                    <div className="grid md:grid-cols-3 gap-6">
-                        <div className="flex items-start gap-3">
-                            <div className="p-2 bg-white border-2 border-black">
-                                <Zap className="w-5 h-5" />
-                            </div>
-                            <div>
-                                <h3 className="font-bold text-black">Active Development</h3>
-                                <p className="text-sm text-gray-800">
-                                    New components and features regularly
-                                </p>
-                            </div>
-                        </div>
-                        <div className="flex items-start gap-3">
-                            <div className="p-2 bg-white border-2 border-black">
-                                <Star className="w-5 h-5" />
-                            </div>
-                            <div>
-                                <h3 className="font-bold text-black">Priority Support</h3>
-                                <p className="text-sm text-gray-800">
-                                    Get help faster with your issues
-                                </p>
-                            </div>
-                        </div>
-                        <div className="flex items-start gap-3">
-                            <div className="p-2 bg-white border-2 border-black">
-                                <Gift className="w-5 h-5" />
-                            </div>
-                            <div>
-                                <h3 className="font-bold text-black">Exclusive Access</h3>
-                                <p className="text-sm text-gray-800">
-                                    Early access to Pro components
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="text-center">
-                    <h2 className="text-2xl font-black mb-6 dark:text-white">
-                        Other Ways to Support
-                    </h2>
-                    <div className="flex flex-wrap justify-center gap-4">
-                        <a
-                            href={SITE_CONFIG.github.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 border-3 border-black dark:border-white font-bold hover:shadow-[4px_4px_0px_0px_#000] dark:hover:shadow-[4px_4px_0px_0px_#fff] transition-all dark:text-white"
-                        >
-                            <Star className="w-5 h-5" />
-                            Star on GitHub
-                        </a>
-                        <a
-                            href={SITE_CONFIG.social.twitter}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 border-3 border-black dark:border-white font-bold hover:shadow-[4px_4px_0px_0px_#000] dark:hover:shadow-[4px_4px_0px_0px_#fff] transition-all dark:text-white"
-                        >
-                            Share on X
-                        </a>
-                    </div>
-                    <p className="mt-6 text-gray-500 dark:text-gray-400">
-                        Every star, share, and contribution helps.
-                    </p>
-                </div>
-
-                <div className="mt-16 text-center">
-                    <Link
-                        href="/docs/components"
-                        className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white font-medium"
-                    >
-                        ← Back to Documentation
-                    </Link>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/blocks/activity-log-page.md b/apps/docs/blocks/activity-log-page.md
new file mode 100644
index 0000000..ee82c80
--- /dev/null
+++ b/apps/docs/blocks/activity-log-page.md
@@ -0,0 +1,106 @@
+---
+title: Activity Log Page
+description: 带有表格、类型徽标和分页的活动日志页面区块。
+---
+
+# Activity Log Page
+
+新粗野主义风格的活动日志页面，包含表格视图、类型徽标和分页组件。
+
+## 预览
+
+<ComponentPreview>
+  <ActivityLogPageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block activity-log-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import ActivityLogPage from '@/components/ui/activity-log-page/ActivityLogPage.vue'
+
+const activities = [
+    {
+        id: '1',
+        action: 'User Login',
+        user: 'admin',
+        timestamp: '2024-01-15 10:00',
+        type: 'info',
+    },
+    {
+        id: '2',
+        action: 'Config Update',
+        user: 'system',
+        timestamp: '2024-01-15 09:30',
+        details: 'Rate limit changed',
+        type: 'warning',
+    },
+    {
+        id: '3',
+        action: 'Deploy Failed',
+        user: 'ci-bot',
+        timestamp: '2024-01-15 09:00',
+        details: 'Build timeout',
+        type: 'error',
+    },
+]
+
+function handleEntryClick(id) {
+    console.log('Entry clicked:', id)
+}
+</script>
+
+<template>
+    <ActivityLogPage
+        :activities="activities"
+        @entry-click="handleEntryClick"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `activityLogPage.defaultTitle` |
+| `activities` | `ActivityEntry[]` | `[]` |
+| `class` | `string` | — |
+
+### ActivityEntry 接口
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `id` | `string` | 条目唯一标识 |
+| `action` | `string` | 操作描述 |
+| `user` | `string` | 执行者 |
+| `timestamp` | `string` | 时间戳 |
+| `details` | `string` | 可选详情 |
+| `type` | `'info' \| 'warning' \| 'error' \| 'success'` | 条目类型（默认 `'info'`） |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `entry-click` | `[id: string]` |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `header` | 自定义页面标题区域 |
+| `default` | 自定义主内容区域（替换表格和分页） |
+| `footer` | 页面底部内容 |
+
+## 布局
+
+ActivityLogPage 包含：
+- **标题**：加粗页面标题，可通过 `header` 插槽自定义
+- **表格**：四列表格（操作、用户、时间戳、详情），操作列包含类型徽标
+- **类型徽标映射**：`info` → default、`warning` → accent、`error` → danger、`success` → success
+- **分页**：每页 10 条，自动显示分页控件
diff --git a/apps/docs/blocks/auth-card.md b/apps/docs/blocks/auth-card.md
new file mode 100644
index 0000000..6d2939e
--- /dev/null
+++ b/apps/docs/blocks/auth-card.md
@@ -0,0 +1,88 @@
+---
+title: Auth Card
+description: 用户认证登录卡片，内置邮箱输入、社交登录按钮及选项卡切换。
+---
+
+# Auth Card
+
+新粗野主义风格的认证卡片，包含社交登录按钮、邮箱/密码表单和忘记密码链接。
+
+## 预览
+
+<ComponentPreview>
+  <AuthCardDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block auth-card
+```
+
+## 用法
+
+```vue
+<script setup>
+import AuthCard from '@/components/ui/auth-card/AuthCard.vue'
+
+function handleLogin({ email, password }) {
+    console.log('Login submitted:', email, password)
+}
+
+function handleForgotPassword() {
+    console.log('Forgot password clicked')
+}
+
+function handleGoogle() {
+    console.log('Google auth clicked')
+}
+
+function handleGithub() {
+    console.log('GitHub auth clicked')
+}
+</script>
+
+<template>
+    <AuthCard
+        title="Welcome back"
+        description="Sign in to your account to continue"
+        @login-submit="handleLogin"
+        @forgot-password="handleForgotPassword"
+        @google-click="handleGoogle"
+        @github-click="handleGithub"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `authCard.welcomeBack` |
+| `description` | `string` | locale: `authCard.signInToContinue` |
+| `texts` | `AuthCardTexts` | `{}` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `loginSubmit` | `{ email: string, password: string }` |
+| `forgotPassword` | `[]` |
+| `googleClick` | `[]` |
+| `githubClick` | `[]` |
+
+## 布局
+
+AuthCard 包含：
+- **头部**：标题和描述
+- **社交按钮**：Google 和 GitHub，2 列网格布局
+- **分隔线**："or email login" 分隔符
+- **邮箱表单**：带图标的邮箱输入框、带图标的密码输入框、忘记密码链接
+- **提交按钮**：primary 变体，全宽
+- **底部**：注册链接
+
+## 可访问性
+
+- 使用 `useId()` 为邮箱和密码输入框生成唯一 ID，与 `<label>` 正确关联
+- 邮箱和密码字段通过 `v-model` 实现双向绑定，`loginSubmit` 事件携带 `{ email, password }` 表单数据
diff --git a/apps/docs/blocks/blog-card.md b/apps/docs/blocks/blog-card.md
new file mode 100644
index 0000000..de7466a
--- /dev/null
+++ b/apps/docs/blocks/blog-card.md
@@ -0,0 +1,94 @@
+---
+title: Blog Card
+description: 博客文章预览卡片，含分类徽标、标题、摘要、作者和阅读更多链接。
+---
+
+# Blog Card
+
+新粗野主义风格的博客文章预览卡片，包含分类徽标、标题、摘要、作者头像和"阅读更多"链接。
+
+## 预览
+
+<ComponentPreview>
+  <BlogCardDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block blog-card
+```
+
+## 用法
+
+```vue
+<script setup>
+import BlogCard from '@/components/ui/blog-card/BlogCard.vue'
+
+function handleReadMore() {
+    console.log('Read more clicked')
+}
+</script>
+
+<template>
+    <BlogCard
+        title="Getting Started with BrutxUI"
+        excerpt="Learn how to build bold interfaces with our component library."
+        author="John Doe"
+        date="2026-06-01"
+        category="Vue 3"
+        @read-more="handleReadMore"
+    />
+</template>
+```
+
+## 多卡片布局
+
+```vue
+<script setup>
+import BlogCard from '@/components/ui/blog-card/BlogCard.vue'
+
+const posts = [
+    { title: 'Post One', excerpt: 'First post excerpt...', author: 'Alice', date: '2026-06-01', category: 'Tutorial' },
+    { title: 'Post Two', excerpt: 'Second post excerpt...', author: 'Bob', date: '2026-05-28', category: 'Guide' },
+]
+</script>
+
+<template>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <BlogCard
+            v-for="(post, i) in posts"
+            :key="i"
+            v-bind="post"
+            @read-more="() => console.log(post.title)"
+        />
+    </div>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `blogCard.defaultTitle` |
+| `excerpt` | `string` | locale: `blogCard.defaultExcerpt` |
+| `author` | `string` | `''` |
+| `date` | `string` | `''` |
+| `category` | `string` | `''` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `readMore` | `[]` |
+
+## 布局
+
+BlogCard 包含：
+- **分类徽标**（可选）：primary 变体 Badge
+- **标题**：加粗、字距调整的标题
+- **摘要**：弱化文本
+- **作者信息**（可选）：Avatar 头像 + 姓名
+- **日期**（可选）：弱化小字
+- **阅读更多**：主色加粗链接
diff --git a/apps/docs/blocks/blog-list-page.md b/apps/docs/blocks/blog-list-page.md
new file mode 100644
index 0000000..852c914
--- /dev/null
+++ b/apps/docs/blocks/blog-list-page.md
@@ -0,0 +1,111 @@
+---
+title: Blog List Page
+description: 带有搜索、分类筛选和分页的博客文章列表页面区块。
+---
+
+# Blog List Page
+
+新粗野主义风格的博客列表页面，包含搜索框、分类标签筛选、文章卡片网格和分页组件。
+
+## 预览
+
+<ComponentPreview>
+  <BlogListPageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block blog-list-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import BlogListPage from '@/components/ui/blog-list-page/BlogListPage.vue'
+
+const posts = [
+    {
+        title: 'Getting Started with BrutxUI',
+        excerpt: 'An introduction to building with BrutxUI components.',
+        author: 'Admin',
+        date: '2024-01-15',
+        category: 'Tech',
+        slug: 'getting-started',
+    },
+    {
+        title: 'Design Principles',
+        excerpt: 'Exploring the neo-brutalist design philosophy.',
+        author: 'Designer',
+        date: '2024-01-10',
+        category: 'Design',
+        slug: 'design-principles',
+    },
+]
+
+const categories = ['Tech', 'Design']
+
+function handlePostClick(slug) {
+    console.log('Post clicked:', slug)
+}
+
+function handleCategoryFilter(category) {
+    console.log('Category filter:', category)
+}
+</script>
+
+<template>
+    <BlogListPage
+        :posts="posts"
+        :categories="categories"
+        :page-size="6"
+        @post-click="handlePostClick"
+        @category-filter="handleCategoryFilter"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `blogListPage.defaultTitle` |
+| `posts` | `BlogPost[]` | `[]` |
+| `categories` | `string[]` | `[]` |
+| `pageSize` | `number` | `6` |
+| `class` | `string` | — |
+
+### BlogPost 接口
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `title` | `string` | 文章标题 |
+| `excerpt` | `string` | 文章摘要 |
+| `author` | `string` | 作者名 |
+| `date` | `string` | 发布日期 |
+| `category` | `string` | 分类名称 |
+| `slug` | `string` | 文章唯一标识 |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `post-click` | `[slug: string]` |
+| `category-filter` | `[category: string]` |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `header` | 自定义页面标题区域 |
+| `default` | 自定义主内容区域（替换搜索、卡片网格和分页） |
+| `footer` | 页面底部内容 |
+
+## 布局
+
+BlogListPage 包含：
+- **标题**：加粗页面标题，可通过 `header` 插槽自定义
+- **搜索与筛选**：搜索输入框和分类标签按钮
+- **文章卡片网格**：响应式三列卡片布局，每张卡片包含分类徽标、日期、标题、摘要和作者
+- **分页**：当文章数量超过 `pageSize` 时自动显示
diff --git a/apps/docs/blocks/brutalist-hero.md b/apps/docs/blocks/brutalist-hero.md
new file mode 100644
index 0000000..876bd7d
--- /dev/null
+++ b/apps/docs/blocks/brutalist-hero.md
@@ -0,0 +1,71 @@
+---
+title: Brutalist Hero
+description: 新粗野主义落地页 Hero 区段模板，包含标题、CTA 和装饰性卡片。
+---
+
+# Brutalist Hero
+
+新粗野主义风格的 Hero 区段，适用于落地页，包含标题、副标题、CTA 按钮和装饰性代码预览卡片。
+
+## 预览
+
+<ComponentPreview>
+  <BrutalistHeroDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block brutalist-hero
+```
+
+## 用法
+
+```vue
+<script setup>
+import BrutalistHero from '@/components/ui/brutalist-hero/BrutalistHero.vue'
+
+function handlePrimary() {
+    console.log('Primary CTA clicked')
+}
+
+function handleSecondary() {
+    console.log('Secondary CTA clicked')
+}
+</script>
+
+<template>
+    <BrutalistHero
+        title="Build Bold Interfaces Faster with BrutxUI"
+        subtitle="A Neo-Brutalism component library for Vue 3. Bold borders, hard shadows, zero apologies."
+        primary-cta-text="Get Started Now"
+        secondary-cta-text="View Component Registry"
+        @primary-cta="handlePrimary"
+        @secondary-cta="handleSecondary"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `brutalistHero.title` |
+| `subtitle` | `string` | — |
+| `primaryCtaText` | `string` | locale: `brutalistHero.primaryCtaText` |
+| `secondaryCtaText` | `string` | locale: `brutalistHero.secondaryCtaText` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `primaryCta` | `[]` |
+| `secondaryCta` | `[]` |
+
+## 布局
+
+Hero 使用双列网格布局：
+- **左列**：徽章、标题、副标题和 CTA 按钮
+- **右列**：带有偏移阴影和代码预览的装饰性卡片
+- 在移动端，列会垂直堆叠
diff --git a/apps/docs/blocks/chart-section.md b/apps/docs/blocks/chart-section.md
new file mode 100644
index 0000000..741dca6
--- /dev/null
+++ b/apps/docs/blocks/chart-section.md
@@ -0,0 +1,77 @@
+---
+title: Chart Section
+description: 带有标签页切换的图表展示区块，支持柱状图、折线图和饼图。
+---
+
+# Chart Section
+
+新粗野主义风格的图表展示区块，包含标签页切换视图，支持柱状图、折线图和饼图。
+
+## 预览
+
+<ComponentPreview>
+  <ChartSectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block chart-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import ChartSection from '@/components/ui/chart-section/ChartSection.vue'
+
+const data = [
+    { label: 'Jan', value: 65 },
+    { label: 'Feb', value: 80 },
+    { label: 'Mar', value: 45 },
+    { label: 'Apr', value: 90 },
+    { label: 'May', value: 70 },
+]
+</script>
+
+<template>
+    <ChartSection
+        title="Analytics"
+        subtitle="Monthly performance overview"
+        chart-type="bar"
+        :data="data"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `chartSection.defaultTitle` |
+| `subtitle` | `string` | locale: `chartSection.defaultSubtitle` |
+| `chartType` | `'bar' \| 'line' \| 'pie'` | `'bar'` |
+| `data` | `ChartDataPoint[]` | `[]` |
+| `class` | `string` | — |
+
+### ChartDataPoint 接口
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `label` | `string` | 数据点标签 |
+| `value` | `number` | 数据点值 |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `header` | 自定义标题区域 |
+| `default` | 自定义主内容区域（替换标签页和图表） |
+| `footer` | 底部内容 |
+
+## 布局
+
+ChartSection 包含：
+- **标题与副标题**：加粗标题和弱化副标题
+- **标签页切换**：Bar / Line / Pie 三个标签，带有对应图标
+- **图表卡片**：根据选中标签展示对应类型的 SketchyChart
diff --git a/apps/docs/blocks/cookie-consent.md b/apps/docs/blocks/cookie-consent.md
new file mode 100644
index 0000000..81da286
--- /dev/null
+++ b/apps/docs/blocks/cookie-consent.md
@@ -0,0 +1,98 @@
+---
+title: Cookie Consent
+description: Cookie 同意横幅区块，固定在页面底部，带有接受和拒绝按钮。
+---
+
+# Cookie Consent
+
+新粗野主义风格的 Cookie 同意横幅，固定在页面底部，包含 Cookie 图标、标题、描述以及接受/拒绝按钮。
+
+## 预览
+
+<ComponentPreview>
+  <CookieConsentDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block cookie-consent
+```
+
+## 用法
+
+```vue
+<script setup>
+import CookieConsent from '@/components/ui/cookie-consent/CookieConsent.vue'
+
+function handleAccept() {
+    console.log('Cookies accepted')
+}
+
+function handleDecline() {
+    console.log('Cookies declined')
+}
+</script>
+
+<template>
+    <CookieConsent
+        title="We use cookies"
+        description="By continuing, you agree to our cookie policy."
+        accept-text="Accept"
+        decline-text="Decline"
+        @accept="handleAccept"
+        @decline="handleDecline"
+    />
+</template>
+```
+
+## 自定义文本
+
+```vue
+<script setup>
+import CookieConsent from '@/components/ui/cookie-consent/CookieConsent.vue'
+</script>
+
+<template>
+    <CookieConsent
+        title="This site uses cookies"
+        description="We use cookies to improve your experience and analyze traffic."
+        accept-text="Got it!"
+        decline-text="No thanks"
+        @accept="enableCookies"
+        @decline="disableCookies"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `cookieConsent.defaultTitle` |
+| `description` | `string` | locale: `cookieConsent.defaultDescription` |
+| `acceptText` | `string` | locale: `cookieConsent.defaultAcceptText` |
+| `declineText` | `string` | locale: `cookieConsent.defaultDeclineText` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `accept` | `[]` |
+| `decline` | `[]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `actions` | 额外操作按钮区域 |
+
+## 布局
+
+CookieConsent 包含：
+- **固定定位**：`fixed bottom-0 left-0 right-0 z-50`，始终显示在页面底部
+- **Cookie 图标**：lucide-vue-next 的 Cookie 图标
+- **标题和描述**：左侧文本区域
+- **操作按钮**：拒绝（outline 变体）和接受（primary 变体），响应式排列
+- **扩展插槽**：`actions` slot 用于添加自定义操作按钮
diff --git a/apps/docs/blocks/dashboard-shell.md b/apps/docs/blocks/dashboard-shell.md
new file mode 100644
index 0000000..fe25d8c
--- /dev/null
+++ b/apps/docs/blocks/dashboard-shell.md
@@ -0,0 +1,79 @@
+---
+title: Dashboard Shell
+description: 仪表盘外壳框架，提供左侧边栏、顶部导航和响应式内容区域。
+---
+
+# Dashboard Shell
+
+新粗野主义风格的仪表盘布局，包含可折叠侧边栏、顶部栏和主内容区域。
+
+## 预览
+
+<ComponentPreview>
+  <DashboardShellDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block dashboard-shell
+```
+
+## 用法
+
+```vue
+<script setup>
+import DashboardShell from '@/components/ui/dashboard-shell/DashboardShell.vue'
+
+function handleSignOut() {
+    console.log('Sign out clicked')
+}
+</script>
+
+<template>
+    <DashboardShell
+        user-email="user@example.com"
+        @sign-out="handleSignOut"
+    >
+        <template #sidebar>
+            <a class="block px-2 py-1.5 text-sm font-bold bg-brutal-muted border-3 border-brutal shadow-brutal-sm" href="#">Dashboard</a>
+            <a class="block px-2 py-1.5 text-sm font-bold text-brutal-muted-foreground" href="#">Analytics</a>
+            <a class="block px-2 py-1.5 text-sm font-bold text-brutal-muted-foreground" href="#">Settings</a>
+        </template>
+
+        <template #header>
+            <span class="font-bold">Dashboard</span>
+        </template>
+
+        <p>Main content goes here.</p>
+    </DashboardShell>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `userEmail` | `string` | `'user@example.com'` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `signOut` | `[]` |
+
+## 插槽
+
+| 插槽 | 描述 |
+|------|------|
+| `sidebar` | 侧边栏中的导航项 |
+| `header` | 顶部栏中的内容 |
+| `default` | 主内容区域 |
+
+## 特性
+
+- **可折叠侧边栏**：在移动端通过汉堡菜单切换
+- **响应式**：侧边栏在移动端隐藏，桌面端可见
+- **用户信息**：在侧边栏底部显示邮箱和退出按钮
+- **移动端菜单**：在小屏幕上显示汉堡按钮
diff --git a/apps/docs/blocks/dashboard-stats.md b/apps/docs/blocks/dashboard-stats.md
new file mode 100644
index 0000000..aa93f38
--- /dev/null
+++ b/apps/docs/blocks/dashboard-stats.md
@@ -0,0 +1,95 @@
+---
+title: Dashboard Stats
+description: 统计卡片组区块，用于仪表盘中的关键指标展示。
+---
+
+# Dashboard Stats
+
+新粗野主义风格的统计卡片组，展示关键业务指标和趋势变化。
+
+## 预览
+
+<ComponentPreview>
+  <DashboardStatsDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block dashboard-stats
+```
+
+## 用法
+
+```vue
+<script setup>
+import DashboardStats from '@/components/ui/dashboard-stats/DashboardStats.vue'
+import { Users, DollarSign, FolderOpen, TrendingUp } from 'lucide-vue-next'
+
+const stats = [
+    {
+        title: 'Total Users',
+        value: '1,234',
+        description: 'Active users this month',
+        change: '+12.5%',
+        trend: 'up',
+        icon: Users,
+    },
+    {
+        title: 'Revenue',
+        value: '$45.6K',
+        description: 'Monthly revenue',
+        change: '+8.2%',
+        trend: 'up',
+        icon: DollarSign,
+    },
+    {
+        title: 'Active Projects',
+        value: '89',
+        description: 'Currently active',
+        change: '-3.1%',
+        trend: 'down',
+        icon: FolderOpen,
+    },
+    {
+        title: 'Conversion',
+        value: '24.8%',
+        description: 'Visitor to customer',
+        change: '0%',
+        trend: 'neutral',
+        icon: TrendingUp,
+    },
+]
+</script>
+
+<template>
+    <DashboardStats :stats="stats" />
+</template>
+```
+
+## StatItem 类型
+
+```ts
+interface StatItem {
+    title: string
+    value: string
+    description?: string
+    change?: string
+    trend?: 'up' | 'down' | 'neutral'
+    icon?: Component
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `stats` | `StatItem[]` | `[]` |
+| `class` | `string` | — |
+
+## 特性
+
+- **趋势指示**：根据 `trend` 值显示不同颜色（up=成功色，down=危险色，neutral=强调色）
+- **图标支持**：每个统计卡片可配置 Lucide 图标
+- **响应式网格**：移动端单列，平板双列，桌面四列
+- **变化百分比**：可选的 `change` 字段展示趋势变化
diff --git a/apps/docs/blocks/data-table-section.md b/apps/docs/blocks/data-table-section.md
new file mode 100644
index 0000000..dd83d81
--- /dev/null
+++ b/apps/docs/blocks/data-table-section.md
@@ -0,0 +1,123 @@
+---
+title: Data Table Section
+description: 数据表格区块，带有搜索、排序和分页功能。
+---
+
+# Data Table Section
+
+新粗野主义风格的数据表格区块，包含搜索过滤、列排序和分页功能。
+
+## 预览
+
+<ComponentPreview>
+  <DataTableSectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block data-table-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import DataTableSection from '@/components/ui/data-table-section/DataTableSection.vue'
+import type { ColumnDef } from '@/components/ui/data-table-section/DataTableSection.vue'
+
+const columns: ColumnDef[] = [
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'email', label: 'Email', sortable: true },
+    { key: 'role', label: 'Role' },
+]
+
+const rows = [
+    { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
+    { name: 'Bob', email: 'bob@example.com', role: 'User' },
+    { name: 'Charlie', email: 'charlie@example.com', role: 'Editor' },
+]
+
+function handleRowClick(row) {
+    console.log('Row clicked:', row)
+}
+
+function handleSort(payload) {
+    console.log('Sort:', payload)
+    // payload: { key: string; direction: 'asc' | 'desc' }
+}
+</script>
+
+<template>
+    <DataTableSection
+        title="Users"
+        :columns="columns"
+        :rows="rows"
+        :searchable="true"
+        :page-size="10"
+        @row-click="handleRowClick"
+        @sort="handleSort"
+    />
+</template>
+```
+
+## 禁用搜索
+
+```vue
+<script setup>
+import DataTableSection from '@/components/ui/data-table-section/DataTableSection.vue'
+</script>
+
+<template>
+    <DataTableSection
+        title="Simple Table"
+        :columns="columns"
+        :rows="rows"
+        :searchable="false"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `dataTableSection.defaultTitle` |
+| `columns` | `ColumnDef[]` | `[]` |
+| `rows` | `Record<string, unknown>[]` | `[]` |
+| `searchable` | `boolean` | `true` |
+| `pageSize` | `number` | `10` |
+| `class` | `string` | — |
+
+### ColumnDef 类型
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `key` | `string` | 列数据字段名 |
+| `label` | `string` | 列标题显示文本 |
+| `sortable` | `boolean` | 可选，是否可排序 |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `row-click` | `[row: Record<string, unknown>]` |
+| `sort` | `[{ key: string; direction: 'asc' \| 'desc' }]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换/扩展区块头部 |
+| `default` | 替换区块主体内容（含表格和分页） |
+| `footer` | 替换/扩展区块底部 |
+
+## 布局
+
+DataTableSection 包含：
+- **头部**：标题区域
+- **搜索框**：Input 组件，仅在 `searchable` 为 `true` 时显示
+- **数据表格**：Table 组件，包含可排序的表头和可点击的数据行
+  - 可排序列显示排序图标（ArrowUpDown / ArrowUp / ArrowDown）
+  - 无数据时显示空状态文本
+- **分页**：Pagination 组件，仅在总页数大于 1 时显示
diff --git a/apps/docs/blocks/empty-state.md b/apps/docs/blocks/empty-state.md
new file mode 100644
index 0000000..5201b37
--- /dev/null
+++ b/apps/docs/blocks/empty-state.md
@@ -0,0 +1,85 @@
+---
+title: Empty State
+description: 数据空状态占位区块，带有大图标、副标题和主操作按钮。
+---
+
+# Empty State
+
+新粗野主义风格的空状态占位符，包含装饰性图标、标题、描述和操作按钮。
+
+## 预览
+
+<ComponentPreview>
+  <EmptyStateDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block empty-state
+```
+
+## 用法
+
+```vue
+<script setup>
+import EmptyState from '@/components/ui/empty-state/EmptyState.vue'
+import { Server } from 'lucide-vue-next'
+
+function handleAction() {
+    console.log('Action clicked')
+}
+</script>
+
+<template>
+    <EmptyState
+        title="No active deployments found"
+        description="Get started by deploying your first application to the cloud."
+        action-text="Deploy New App"
+        :icon="Server"
+        @action="handleAction"
+    />
+</template>
+```
+
+## 自定义图标
+
+```vue
+<script setup>
+import EmptyState from '@/components/ui/empty-state/EmptyState.vue'
+import { Inbox } from 'lucide-vue-next'
+</script>
+
+<template>
+    <EmptyState
+        title="No messages yet"
+        description="Your inbox is empty. Start a conversation."
+        action-text="New Message"
+        :icon="Inbox"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `emptyState.defaultTitle` |
+| `description` | `string` | — |
+| `actionText` | `string` | locale: `emptyState.defaultActionText` |
+| `icon` | `Component` | `FolderOpen`（来自 lucide-vue-next） |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `action` | `[]` |
+
+## 布局
+
+EmptyState 包含：
+- **装饰性图标**：强调色方框，带有偏移阴影背景
+- **标题**：加粗、字距调整的标题
+- **描述**：标题下方的弱化文本
+- **操作按钮**：primary 变体按钮（仅在提供了 `actionText` 时显示）
diff --git a/apps/docs/blocks/error-card.md b/apps/docs/blocks/error-card.md
new file mode 100644
index 0000000..0326773
--- /dev/null
+++ b/apps/docs/blocks/error-card.md
@@ -0,0 +1,93 @@
+---
+title: Error Card
+description: 错误状态卡片区块，带有警告提示、重试和关闭按钮。
+---
+
+# Error Card
+
+新粗野主义风格的错误卡片，包含 Alert 危险提示、标题、描述以及重试/关闭操作按钮。
+
+## 预览
+
+<ComponentPreview>
+  <ErrorCardDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block error-card
+```
+
+## 用法
+
+```vue
+<script setup>
+import ErrorCard from '@/components/ui/error-card/ErrorCard.vue'
+
+function handleRetry() {
+    console.log('Retry clicked')
+}
+
+function handleDismiss() {
+    console.log('Dismiss clicked')
+}
+</script>
+
+<template>
+    <ErrorCard
+        title="Something went wrong"
+        description="An unexpected error occurred. Please try again."
+        retry-text="Retry"
+        @retry="handleRetry"
+        @dismiss="handleDismiss"
+    />
+</template>
+```
+
+## 自定义文本
+
+```vue
+<script setup>
+import ErrorCard from '@/components/ui/error-card/ErrorCard.vue'
+</script>
+
+<template>
+    <ErrorCard
+        title="Upload Failed"
+        description="Your file could not be uploaded. Check the format and try again."
+        retry-text="Re-upload"
+        @retry="retryUpload"
+        @dismiss="cancelUpload"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `errorCard.defaultTitle` |
+| `description` | `string` | locale: `errorCard.defaultDescription` |
+| `retryText` | `string` | locale: `errorCard.defaultRetryText` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `retry` | `[]` |
+| `dismiss` | `[]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `actions` | 额外操作按钮区域 |
+
+## 布局
+
+ErrorCard 包含：
+- **Alert 危险提示**：带有 AlertTriangle 图标的 danger 变体 Alert，显示标题和描述
+- **操作区域**：关闭（ghost 变体）和重试（primary 变体）按钮
+- **扩展插槽**：`actions` slot 用于添加自定义操作按钮
diff --git a/apps/docs/blocks/faq-section.md b/apps/docs/blocks/faq-section.md
new file mode 100644
index 0000000..642d3b7
--- /dev/null
+++ b/apps/docs/blocks/faq-section.md
@@ -0,0 +1,94 @@
+---
+title: FAQ Section
+description: 常见问题折叠面板区块，含编号徽标和手风琴交互。
+---
+
+# FAQ Section
+
+新粗野主义风格的常见问题区块，包含标题、副标题和带编号徽标的手风琴折叠面板。
+
+## 预览
+
+<ComponentPreview>
+  <FaqSectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block faq-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import FaqSection from '@/components/ui/faq-section/FaqSection.vue'
+
+const items = [
+    {
+        question: 'What is BrutxUI?',
+        answer: 'BrutxUI is a Neo-Brutalist UI component library for Vue 3.',
+    },
+    {
+        question: 'How do I get started?',
+        answer: 'Install via npm and import the components you need.',
+    },
+    {
+        question: 'Is it free?',
+        answer: 'Yes, BrutxUI is open source and free to use under the MIT license.',
+    },
+]
+
+function handleItemClick(index) {
+    console.log('FAQ item clicked:', items[index].question)
+}
+</script>
+
+<template>
+    <FaqSection
+        title="常见问题"
+        subtitle="查找您需要的答案"
+        :items="items"
+        @item-click="handleItemClick"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `faqSection.defaultTitle` |
+| `subtitle` | `string` | locale: `faqSection.defaultSubtitle` |
+| `items` | `FaqItem[]` | `[]` |
+| `class` | `string` | — |
+
+### FaqItem 类型
+
+```ts
+interface FaqItem {
+    question: string
+    answer: string
+}
+```
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `item-click` | `[index: number]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换标题和副标题区域 |
+| `default` | 替换手风琴列表区域 |
+| `footer` | 替换/扩展区块底部 |
+
+## 布局
+
+FaqSection 包含：
+- **标题区**：居中标题和副标题
+- **手风琴列表**：Card 容器内的 Accordion 组件，每项含编号 Badge 和问题/答案
diff --git a/apps/docs/blocks/feedback-form.md b/apps/docs/blocks/feedback-form.md
new file mode 100644
index 0000000..8f52bf6
--- /dev/null
+++ b/apps/docs/blocks/feedback-form.md
@@ -0,0 +1,93 @@
+---
+title: Feedback Form
+description: 反馈表单区块，带有姓名、邮箱、主题和消息字段。
+---
+
+# Feedback Form
+
+新粗野主义风格的反馈表单，包含标题、描述和完整的表单字段（姓名、邮箱、主题、消息），带有提交按钮。
+
+## 预览
+
+<ComponentPreview>
+  <FeedbackFormDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block feedback-form
+```
+
+## 用法
+
+```vue
+<script setup>
+import FeedbackForm from '@/components/ui/feedback-form/FeedbackForm.vue'
+
+function handleSubmit(payload) {
+    console.log('Feedback:', payload)
+    // payload: { name, email, subject, message }
+}
+</script>
+
+<template>
+    <FeedbackForm
+        title="Send Feedback"
+        description="We'd love to hear from you."
+        submit-text="Submit"
+        @submit="handleSubmit"
+    />
+</template>
+```
+
+## 自定义文本
+
+```vue
+<script setup>
+import FeedbackForm from '@/components/ui/feedback-form/FeedbackForm.vue'
+</script>
+
+<template>
+    <FeedbackForm
+        title="Contact Us"
+        description="Have a question? Reach out to our team."
+        submit-text="Send Message"
+        @submit="handleContact"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `feedbackForm.defaultTitle` |
+| `description` | `string` | locale: `feedbackForm.defaultDescription` |
+| `submitText` | `string` | locale: `feedbackForm.defaultSubmitText` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `submit` | `[{ name: string; email: string; subject: string; message: string }]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换/扩展区块头部 |
+| `default` | 替换区块主体内容（含表单） |
+| `footer` | 替换/扩展区块底部 |
+
+## 布局
+
+FeedbackForm 包含：
+- **头部**：居中标题和描述文本
+- **表单卡片**：Card 组件包裹的表单区域
+  - **姓名字段**：Input 组件
+  - **邮箱字段**：Input 组件（type="email"）
+  - **主题字段**：Input 组件
+  - **消息字段**：Textarea 组件
+  - **提交按钮**：primary 变体，带 Send 图标，全宽
diff --git a/apps/docs/blocks/file-card.md b/apps/docs/blocks/file-card.md
new file mode 100644
index 0000000..9407190
--- /dev/null
+++ b/apps/docs/blocks/file-card.md
@@ -0,0 +1,90 @@
+---
+title: File Card
+description: 文件信息卡片，含文件图标、名称、类型徽标、大小和下载按钮。
+---
+
+# File Card
+
+新粗野主义风格的文件信息卡片，包含文件图标、文件名、类型徽标、文件大小和下载按钮。
+
+## 预览
+
+<ComponentPreview>
+  <FileCardDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block file-card
+```
+
+## 用法
+
+```vue
+<script setup>
+import FileCard from '@/components/ui/file-card/FileCard.vue'
+
+function handleDownload() {
+    console.log('Download clicked')
+}
+</script>
+
+<template>
+    <FileCard
+        file-name="report-2026.pdf"
+        file-size="3.2 MB"
+        file-type="PDF"
+        @download="handleDownload"
+    />
+</template>
+```
+
+## 多文件列表
+
+```vue
+<script setup>
+import FileCard from '@/components/ui/file-card/FileCard.vue'
+
+const files = [
+    { fileName: 'report.pdf', fileSize: '3.2 MB', fileType: 'PDF' },
+    { fileName: 'data.xlsx', fileSize: '1.1 MB', fileType: 'XLSX' },
+    { fileName: 'image.png', fileSize: '5.8 MB', fileType: 'PNG' },
+]
+</script>
+
+<template>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <FileCard
+            v-for="(file, i) in files"
+            :key="i"
+            v-bind="file"
+            @download="() => console.log(file.fileName)"
+        />
+    </div>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `fileName` | `string` | locale: `fileCard.defaultFileName` |
+| `fileSize` | `string` | `''` |
+| `fileType` | `string` | `''` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `download` | `[]` |
+
+## 布局
+
+FileCard 包含：
+- **文件图标**：强调色方块内的 FileIcon
+- **文件名**：加粗文本，超长截断
+- **类型徽标**（可选）：secondary 变体 Badge
+- **文件大小**（可选）：弱化小字
+- **下载按钮**：primary 变体，全宽，带 Download 图标
diff --git a/apps/docs/blocks/footer-section.md b/apps/docs/blocks/footer-section.md
new file mode 100644
index 0000000..86f2d31
--- /dev/null
+++ b/apps/docs/blocks/footer-section.md
@@ -0,0 +1,112 @@
+---
+title: Footer Section
+description: 页面底部信息栏区块，含 Logo、描述、链接组和版权声明。
+---
+
+# Footer Section
+
+新粗野主义风格的页面底部信息栏，包含 Logo 文本、描述、链接组和版权声明。
+
+## 预览
+
+<ComponentPreview>
+  <FooterSectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block footer-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import FooterSection from '@/components/ui/footer-section/FooterSection.vue'
+
+const linkGroups = [
+    {
+        title: 'Product',
+        links: [
+            { label: 'Features', href: '#features' },
+            { label: 'Pricing', href: '#pricing' },
+        ],
+    },
+    {
+        title: 'Company',
+        links: [
+            { label: 'About', href: '/about' },
+            { label: 'Blog', href: '/blog' },
+        ],
+    },
+    {
+        title: 'Support',
+        links: [
+            { label: 'Help Center', href: '/help' },
+            { label: 'Contact', href: '/contact' },
+        ],
+    },
+]
+
+function handleLinkClick({ groupIndex, linkIndex }) {
+    console.log('Link clicked:', linkGroups[groupIndex].links[linkIndex].label)
+}
+</script>
+
+<template>
+    <FooterSection
+        logo-text="MyApp"
+        description="Build bold interfaces faster."
+        :link-groups="linkGroups"
+        copyright="© 2026 MyApp. All rights reserved."
+        @link-click="handleLinkClick"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `logoText` | `string` | locale: `footerSection.defaultLogoText` |
+| `description` | `string` | locale: `footerSection.defaultDescription` |
+| `linkGroups` | `FooterLinkGroup[]` | `[]` |
+| `copyright` | `string` | locale: `footerSection.defaultCopyright` |
+| `class` | `string` | — |
+
+### FooterLinkGroup 类型
+
+```ts
+interface FooterLinkGroup {
+    title: string
+    links: FooterLink[]
+}
+
+interface FooterLink {
+    label: string
+    href?: string
+}
+```
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `link-click` | `[{ groupIndex: number; linkIndex: number }]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换 Logo 和描述区域 |
+| `default` | 替换链接组区域 |
+| `footer` | 替换版权声明区域 |
+
+## 布局
+
+FooterSection 包含：
+- **Logo 与描述**：品牌文本和简短描述
+- **链接组**：2×4 响应式网格布局，每组含标题和链接列表
+- **分隔线**：Separator 组件
+- **版权声明**：居中弱化文本
diff --git a/apps/docs/blocks/gallery-section.md b/apps/docs/blocks/gallery-section.md
new file mode 100644
index 0000000..afce300
--- /dev/null
+++ b/apps/docs/blocks/gallery-section.md
@@ -0,0 +1,95 @@
+---
+title: Gallery Section
+description: 带有轮播图和图片卡片的画廊展示区块。
+---
+
+# Gallery Section
+
+新粗野主义风格的画廊展示区块，包含轮播图组件和图片卡片。
+
+## 预览
+
+<ComponentPreview>
+  <GallerySectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block gallery-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import GallerySection from '@/components/ui/gallery-section/GallerySection.vue'
+
+const items = [
+    {
+        src: '/images/photo1.jpg',
+        alt: 'Photo 1',
+        caption: 'Mountain landscape',
+    },
+    {
+        src: '/images/photo2.jpg',
+        alt: 'Photo 2',
+        caption: 'Ocean sunset',
+    },
+    {
+        src: '/images/photo3.jpg',
+        alt: 'Photo 3',
+    },
+]
+
+function handleItemClick(index) {
+    console.log('Item clicked:', index)
+}
+</script>
+
+<template>
+    <GallerySection
+        title="Gallery"
+        :items="items"
+        @item-click="handleItemClick"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `gallerySection.defaultTitle` |
+| `items` | `GalleryItem[]` | `[]` |
+| `class` | `string` | — |
+
+### GalleryItem 接口
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `src` | `string` | 图片地址 |
+| `alt` | `string` | 替代文本 |
+| `caption` | `string` | 可选图片说明 |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `item-click` | `[index: number]` |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `header` | 自定义标题区域 |
+| `default` | 自定义主内容区域（替换轮播图） |
+| `footer` | 底部内容 |
+
+## 布局
+
+GallerySection 包含：
+- **标题**：加粗区块标题
+- **轮播图**：带有箭头和指示点的图片轮播，每张图片有粗边框和阴影
+- **图片说明**：可选的图片标题文字
+- **空状态**：当没有图片时显示图标占位
diff --git a/apps/docs/blocks/header-section.md b/apps/docs/blocks/header-section.md
new file mode 100644
index 0000000..c362ca2
--- /dev/null
+++ b/apps/docs/blocks/header-section.md
@@ -0,0 +1,93 @@
+---
+title: Header Section
+description: 页面顶部导航栏区块，含 Logo、导航链接、CTA 按钮和移动端抽屉菜单。
+---
+
+# Header Section
+
+新粗野主义风格的页面顶部导航栏，包含 Logo 文本、导航链接、CTA 按钮和响应式移动端 Sheet 抽屉菜单。
+
+## 预览
+
+<ComponentPreview>
+  <HeaderSectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block header-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import HeaderSection from '@/components/ui/header-section/HeaderSection.vue'
+
+const navItems = [
+    { label: 'Features', href: '#features' },
+    { label: 'Pricing', href: '#pricing' },
+    { label: 'Docs', href: '/docs' },
+]
+
+function handleCta() {
+    console.log('CTA clicked')
+}
+
+function handleNav(index) {
+    console.log('Nav item clicked:', navItems[index].label)
+}
+</script>
+
+<template>
+    <HeaderSection
+        logo-text="MyApp"
+        :nav-items="navItems"
+        cta-text="Sign Up"
+        @cta-click="handleCta"
+        @nav-click="handleNav"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `logoText` | `string` | locale: `headerSection.defaultLogoText` |
+| `navItems` | `NavItem[]` | `[]` |
+| `ctaText` | `string` | locale: `headerSection.defaultCtaText` |
+| `class` | `string` | — |
+
+### NavItem 类型
+
+```ts
+interface NavItem {
+    label: string
+    href?: string
+}
+```
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `cta-click` | `[]` |
+| `nav-click` | `[index: number]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换 Logo 区域 |
+| `default` | 替换导航链接区域 |
+| `footer` | 替换 CTA 按钮区域 |
+
+## 布局
+
+HeaderSection 包含：
+- **Logo**：加粗、字距调整的品牌文本
+- **导航链接**：ghost 变体按钮，桌面端水平排列
+- **CTA 按钮**：primary 变体，桌面端显示
+- **移动端菜单**：outline 变体汉堡按钮，点击打开 Sheet 抽屉
diff --git a/apps/docs/blocks/index.md b/apps/docs/blocks/index.md
new file mode 100644
index 0000000..70ab958
--- /dev/null
+++ b/apps/docs/blocks/index.md
@@ -0,0 +1,59 @@
+# 区块与模板
+
+BrutxUI 提供了预构建的区块组件，将多个基础组件组合成完整的 UI 区段。这些是常见页面模式的即用型构建模块。
+
+## 可用区块
+
+| 区块 | 描述 |
+|------|------|
+| [Brutalist Hero](/blocks/brutalist-hero) | 带有 CTA 按钮和代码预览的落地页 Hero 区段 |
+| [Pricing Section](/blocks/pricing-section) | 带有功能对比的定价表格 |
+| [Auth Card](/blocks/auth-card) | 带有社交登录和邮箱表单的登录/注册卡片 |
+| [Dashboard Shell](/blocks/dashboard-shell) | 带有侧边栏和顶栏的完整仪表盘布局 |
+| [Empty State](/blocks/empty-state) | 带有图标和操作按钮的空状态占位符 |
+| [Waitlist Page](/blocks/waitlist-page) | 带有邮箱输入和社交证明的候补注册页面 |
+| [Not Found Page](/blocks/not-found-page) | 带有故障文本效果的 404 错误页面 |
+| [Loading Page](/blocks/loading-page) | 带有旋转指示器和可选进度条的全页加载状态 |
+| [Header Section](/blocks/header-section) | 带有导航链接和移动端菜单的顶部导航栏 |
+| [Footer Section](/blocks/footer-section) | 带有链接组和版权声明的底部信息栏 |
+| [FAQ Section](/blocks/faq-section) | 带有编号徽标的手风琴常见问题区块 |
+| [Testimonial Card](/blocks/testimonial-card) | 带有头像和验证徽标的用户评价卡片 |
+| [Blog Card](/blocks/blog-card) | 带有分类徽标和阅读更多的博客文章预览卡片 |
+| [File Card](/blocks/file-card) | 带有文件图标和下载按钮的文件信息卡片 |
+| [Quick Actions](/blocks/quick-actions) | 带有图标按钮网格的快捷操作面板 |
+| [Tabs Nav](/blocks/tabs-nav) | 带有标签触发器和内容面板的标签页导航 |
+| [Error Card](/blocks/error-card) | 带有警告提示和重试/关闭按钮的错误状态卡片 |
+| [Success Card](/blocks/success-card) | 带有勾选图标和确认按钮的成功状态卡片 |
+| [Search Widget](/blocks/search-widget) | 带有输入框和分组建议列表的搜索组件 |
+| [Feedback Form](/blocks/feedback-form) | 带有姓名、邮箱、主题和消息字段的反馈表单 |
+| [Stepper Section](/blocks/stepper-section) | 带有水平步骤条和前后导航按钮的步骤导航区块 |
+| [Cookie Consent](/blocks/cookie-consent) | 固定在页面底部的 Cookie 同意横幅 |
+| [Data Table Section](/blocks/data-table-section) | 带有搜索、排序和分页功能的数据表格区块 |
+| [Settings Page](/blocks/settings-page) | 带有标签页导航和表单控件的设置页面 |
+| [Blog List Page](/blocks/blog-list-page) | 带有搜索、分类筛选和分页的博客文章列表页面 |
+| [Activity Log Page](/blocks/activity-log-page) | 带有表格、类型徽标和分页的活动日志页面 |
+| [Profile Page](/blocks/profile-page) | 带有头像、表单编辑和保存操作的个人资料页面 |
+| [Chart Section](/blocks/chart-section) | 带有标签页切换的图表展示区块 |
+| [Gallery Section](/blocks/gallery-section) | 带有轮播图和图片卡片的画廊展示区块 |
+| [Upload Card](/blocks/upload-card) | 带有拖拽上传、进度条和旋转指示器的文件上传卡片 |
+| [Overview Page](/blocks/overview-page) | 带有统计卡片和活动面板的仪表盘概览页面 |
+
+## 安装
+
+使用 CLI 添加区块：
+
+```bash
+npx brutx-vue@latest add --block auth-card
+```
+
+或同时添加多个区块：
+
+```bash
+npx brutx-vue@latest add --block brutalist-hero pricing-section
+```
+
+## 自定义
+
+区块是复制粘贴式组件。添加到项目后，你对其源代码拥有完全控制权。可以修改 props、样式和行为以满足你的需求。
+
+所有区块都使用相同的 `--brutal-*` CSS 变量令牌，因此它们会自动适配你选择的主题预设。
diff --git a/apps/docs/blocks/loading-page.md b/apps/docs/blocks/loading-page.md
new file mode 100644
index 0000000..3a54c00
--- /dev/null
+++ b/apps/docs/blocks/loading-page.md
@@ -0,0 +1,78 @@
+---
+title: Loading Page
+description: 全页加载状态区块，带有旋转指示器、骨架屏装饰和可选进度条。
+---
+
+# Loading Page
+
+新粗野主义风格的全页加载状态，包含 Spinner 旋转指示器、Skeleton 装饰元素和可选的 Progress 进度条。
+
+## 预览
+
+<ComponentPreview>
+  <LoadingPageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block loading-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import LoadingPage from '@/components/ui/loading-page/LoadingPage.vue'
+</script>
+
+<template>
+    <LoadingPage
+        title="加载中"
+        description="请稍候，内容正在加载..."
+    />
+</template>
+```
+
+## 带进度条
+
+```vue
+<script setup>
+import LoadingPage from '@/components/ui/loading-page/LoadingPage.vue'
+import { ref } from 'vue'
+
+const progress = ref(65)
+</script>
+
+<template>
+    <LoadingPage
+        :progress="progress"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `loadingPage.defaultTitle` |
+| `description` | `string` | locale: `loadingPage.defaultDescription` |
+| `progress` | `number` | — |
+| `class` | `string` | — |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换/扩展区块头部 |
+| `default` | 替换区块主体内容 |
+| `footer` | 替换/扩展区块底部 |
+
+## 布局
+
+LoadingPage 包含：
+- **Skeleton 装饰**：强调色和辅助色骨架屏方块，偏移定位
+- **Spinner**：大号旋转加载指示器
+- **标题**：加粗、字距调整的标题文本
+- **描述**：弱化文本描述
+- **进度条**（可选）：当传入 `progress` 时显示 Progress 组件
diff --git a/apps/docs/blocks/not-found-page.md b/apps/docs/blocks/not-found-page.md
new file mode 100644
index 0000000..3812fcd
--- /dev/null
+++ b/apps/docs/blocks/not-found-page.md
@@ -0,0 +1,90 @@
+---
+title: Not Found Page
+description: 404 错误页面区块，带有故障文本效果和返回按钮。
+---
+
+# Not Found Page
+
+新粗野主义风格的 404 页面，包含 GlitchText 故障效果、装饰性方块和返回首页按钮。
+
+## 预览
+
+<ComponentPreview>
+  <NotFoundPageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block not-found-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import NotFoundPage from '@/components/ui/not-found-page/NotFoundPage.vue'
+
+function handleBack() {
+    window.location.href = '/'
+}
+</script>
+
+<template>
+    <NotFoundPage
+        title="页面未找到"
+        description="您访问的页面不存在或已被移除。"
+        back-text="返回首页"
+        @back="handleBack"
+    />
+</template>
+```
+
+## 自定义文本
+
+```vue
+<script setup>
+import NotFoundPage from '@/components/ui/not-found-page/NotFoundPage.vue'
+</script>
+
+<template>
+    <NotFoundPage
+        title="Oops!"
+        description="Something went wrong."
+        back-text="Take me home"
+        @back="() => $router.push('/')"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `notFoundPage.defaultTitle` |
+| `description` | `string` | locale: `notFoundPage.defaultDescription` |
+| `backText` | `string` | locale: `notFoundPage.defaultBackText` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `back` | `[]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换/扩展区块头部 |
+| `default` | 替换区块主体内容 |
+| `footer` | 替换/扩展区块底部 |
+
+## 布局
+
+NotFoundPage 包含：
+- **装饰方块**：强调色和辅助色旋转方块，偏移阴影
+- **故障文本**：GlitchText 组件渲染 "404"，自动播放故障动画
+- **标题**：加粗、字距调整的标题文本
+- **描述**：弱化文本描述
+- **返回按钮**：primary 变体，带箭头图标
diff --git a/apps/docs/blocks/overview-page.md b/apps/docs/blocks/overview-page.md
new file mode 100644
index 0000000..3bdcb49
--- /dev/null
+++ b/apps/docs/blocks/overview-page.md
@@ -0,0 +1,111 @@
+---
+title: Overview Page
+description: 带有统计卡片和活动面板的仪表盘概览页面区块。
+---
+
+# Overview Page
+
+新粗野主义风格的仪表盘概览页面，包含统计卡片网格和活动面板。
+
+## 预览
+
+<ComponentPreview>
+  <OverviewPageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block overview-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import OverviewPage from '@/components/ui/overview-page/OverviewPage.vue'
+
+const stats = [
+    {
+        title: 'Revenue',
+        value: '$12,500',
+        change: '+12.5%',
+        trend: 'up',
+    },
+    {
+        title: 'Users',
+        value: '1,234',
+        change: '+8.2%',
+        trend: 'up',
+    },
+    {
+        title: 'Bounce Rate',
+        value: '24.3%',
+        change: '-2.1%',
+        trend: 'down',
+    },
+    {
+        title: 'Sessions',
+        value: '5,678',
+        change: '+0.5%',
+        trend: 'neutral',
+    },
+]
+
+function handleStatClick(index) {
+    console.log('Stat clicked:', index)
+}
+</script>
+
+<template>
+    <OverviewPage
+        :stats="stats"
+        @stat-click="handleStatClick"
+    >
+        <!-- Recent Activity slot content -->
+        <div class="space-y-2">
+            <div class="text-sm font-medium">New user signed up</div>
+            <div class="text-sm font-medium">Payment received</div>
+        </div>
+    </OverviewPage>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `overviewPage.defaultTitle` |
+| `stats` | `OverviewStat[]` | `[]` |
+| `class` | `string` | — |
+
+### OverviewStat 接口
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `title` | `string` | 统计项标题 |
+| `value` | `string` | 统计值 |
+| `change` | `string` | 变化描述 |
+| `trend` | `'up' \| 'down' \| 'neutral'` | 趋势方向 |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `statClick` | `[index: number]` |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `header` | 自定义页面标题区域 |
+| `default` | Recent Activity 卡片的内容区域 |
+| `footer` | 页面底部内容 |
+
+## 布局
+
+OverviewPage 包含：
+- **标题**：加粗页面标题，可通过 `header` 插槽自定义
+- **统计卡片网格**：DashboardStats 组件，展示所有统计项
+- **双栏面板**：左侧为 Recent Activity 卡片（内容由 `default` 插槽提供），右侧为 Quick Stats 列表
+- **Quick Stats**：每个统计项以行内卡片形式展示，支持点击交互
diff --git a/apps/docs/blocks/pricing-section.md b/apps/docs/blocks/pricing-section.md
new file mode 100644
index 0000000..5ba6f1f
--- /dev/null
+++ b/apps/docs/blocks/pricing-section.md
@@ -0,0 +1,108 @@
+---
+title: Pricing Section
+description: 简化版定价对比区块，支持多列方案并排和热门方案强调。
+---
+
+# Pricing Section
+
+新粗野主义风格的定价区段，包含功能列表和热门方案高亮。是 SaaSPricing 的简化替代方案，无需计费切换。
+
+## 预览
+
+<ComponentPreview>
+  <PricingSectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block pricing-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import PricingSection from '@/components/ui/pricing-section/PricingSection.vue'
+
+const plans = [
+    {
+        name: 'Starter',
+        price: '$0',
+        description: 'For individuals getting started',
+        features: [
+            '5 components',
+            'Classic theme',
+            'Community support',
+        ],
+        ctaText: 'Get Started',
+        variant: 'default',
+    },
+    {
+        name: 'Pro',
+        price: '$29',
+        description: 'For professional developers',
+        features: [
+            'All components',
+            'All themes',
+            'Priority support',
+            'CLI tool access',
+        ],
+        ctaText: 'Go Pro',
+        popular: true,
+        variant: 'primary',
+    },
+    {
+        name: 'Enterprise',
+        price: '$99',
+        description: 'For teams and organizations',
+        features: [
+            'All components',
+            'All themes',
+            'Dedicated support',
+            'Custom themes',
+            'SLA guarantee',
+        ],
+        ctaText: 'Contact Sales',
+        variant: 'secondary',
+    },
+]
+</script>
+
+<template>
+    <PricingSection
+        title="Simple, Transparent Brutalist Plans"
+        subtitle="One-time payment. Lifetime access."
+        :plans="plans"
+    />
+</template>
+```
+
+## BrutalistPricingPlan 类型
+
+```ts
+interface BrutalistPricingPlan {
+    name: string
+    price: string
+    description: string
+    features: string[]
+    ctaText: string
+    popular?: boolean
+    variant: 'primary' | 'secondary' | 'default'
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | `'Simple, Transparent Brutalist Plans'` |
+| `subtitle` | `string` | — |
+| `plans` | `BrutalistPricingPlan[]` | `[]` |
+| `class` | `string` | — |
+
+## 特性
+
+- **热门徽章**：设置了 `popular: true` 的方案会显示旋转徽章和强调色背景色调
+- **功能勾选图标**：所有功能项显示绿色勾选图标
+- **卡片变体**：使用 Card 的 variant 属性进行样式设置（primary、secondary、default）
diff --git a/apps/docs/blocks/profile-page.md b/apps/docs/blocks/profile-page.md
new file mode 100644
index 0000000..0e12c5d
--- /dev/null
+++ b/apps/docs/blocks/profile-page.md
@@ -0,0 +1,74 @@
+---
+title: Profile Page
+description: 带有头像、表单编辑和保存操作的个人资料页面区块。
+---
+
+# Profile Page
+
+新粗野主义风格的个人资料页面，包含头像、姓名/邮箱/简介表单和保存按钮。
+
+## 预览
+
+<ComponentPreview>
+  <ProfilePageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block profile-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import ProfilePage from '@/components/ui/profile-page/ProfilePage.vue'
+
+function handleSave(payload) {
+    console.log('Save profile:', payload)
+    // payload: { name: string; email: string; bio: string }
+}
+</script>
+
+<template>
+    <ProfilePage
+        name="John Doe"
+        email="john@example.com"
+        bio="Full-stack developer"
+        @save="handleSave"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `profilePage.defaultTitle` |
+| `name` | `string` | — |
+| `email` | `string` | — |
+| `bio` | `string` | — |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `save` | `[{ name: string; email: string; bio: string }]` |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `header` | 自定义页面标题区域 |
+| `default` | 自定义主内容区域（替换头像和表单） |
+| `footer` | 页面底部内容 |
+
+## 布局
+
+ProfilePage 包含：
+- **标题**：加粗页面标题，可通过 `header` 插槽自定义
+- **头像**：根据姓名自动生成首字母缩写的大尺寸头像
+- **表单**：姓名输入框、邮箱输入框、简介文本域
+- **保存按钮**：primary 变体按钮，点击时触发 `save` 事件
diff --git a/apps/docs/blocks/quick-actions.md b/apps/docs/blocks/quick-actions.md
new file mode 100644
index 0000000..d36d30d
--- /dev/null
+++ b/apps/docs/blocks/quick-actions.md
@@ -0,0 +1,78 @@
+---
+title: Quick Actions
+description: 快捷操作面板，含图标按钮网格和标题徽标。
+---
+
+# Quick Actions
+
+新粗野主义风格的快捷操作面板，包含标题徽标和图标按钮网格。
+
+## 预览
+
+<ComponentPreview>
+  <QuickActionsDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block quick-actions
+```
+
+## 用法
+
+```vue
+<script setup>
+import QuickActions from '@/components/ui/quick-actions/QuickActions.vue'
+import { Plus, Upload, Search, Settings } from 'lucide-vue-next'
+
+const actions = [
+    { label: 'New Post', icon: Plus, variant: 'primary' },
+    { label: 'Upload', icon: Upload, variant: 'secondary' },
+    { label: 'Search', icon: Search, variant: 'outline' },
+    { label: 'Settings', icon: Settings, variant: 'outline' },
+]
+
+function handleAction(index) {
+    console.log('Action clicked:', actions[index].label)
+}
+</script>
+
+<template>
+    <QuickActions
+        title="快捷操作"
+        :actions="actions"
+        @action-click="handleAction"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `quickActions.defaultTitle` |
+| `actions` | `ActionItem[]` | `[]` |
+| `class` | `string` | — |
+
+### ActionItem 类型
+
+```ts
+interface ActionItem {
+    label: string
+    icon: Component
+    variant?: 'primary' | 'secondary' | 'outline' | 'danger'
+}
+```
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `action-click` | `[index: number]` |
+
+## 布局
+
+QuickActions 包含：
+- **标题区**：accent 变体 Badge + 加粗标题
+- **操作网格**：2×3 响应式网格，每个按钮含图标和标签
diff --git a/apps/docs/blocks/saas-pricing.md b/apps/docs/blocks/saas-pricing.md
new file mode 100644
index 0000000..81d8790
--- /dev/null
+++ b/apps/docs/blocks/saas-pricing.md
@@ -0,0 +1,117 @@
+---
+title: SaaS Pricing
+description: SaaS 风格定价区块，支持月付/年付切换和多方案对比。
+---
+
+# SaaS Pricing
+
+新粗野主义风格的 SaaS 定价表，包含月付/年付切换、热门方案高亮和功能列表。
+
+## 预览
+
+<ComponentPreview>
+  <SaaSPricingDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block saas-pricing
+```
+
+## 用法
+
+```vue
+<script setup>
+import SaaSPricing from '@/components/ui/saas-pricing/SaaSPricing.vue'
+
+const plans = [
+    {
+        name: 'Starter',
+        description: 'For side projects and experiments',
+        priceMonthly: '$0',
+        priceAnnually: '$0',
+        features: [
+            { text: '5 components', included: true },
+            { text: 'Basic themes', included: true },
+            { text: 'Community support', included: true },
+            { text: 'Priority updates', included: false },
+        ],
+        buttonText: 'Get Started',
+        buttonVariant: 'outline',
+    },
+    {
+        name: 'Pro',
+        description: 'For professional developers',
+        priceMonthly: '$19',
+        priceAnnually: '$15',
+        features: [
+            { text: 'All components', included: true },
+            { text: 'All themes', included: true },
+            { text: 'Priority support', included: true },
+            { text: 'Priority updates', included: true },
+        ],
+        popular: true,
+        buttonText: 'Go Pro',
+        buttonVariant: 'primary',
+    },
+    {
+        name: 'Enterprise',
+        description: 'For teams and organizations',
+        priceMonthly: '$49',
+        priceAnnually: '$39',
+        features: [
+            { text: 'All components', included: true },
+            { text: 'All themes', included: true },
+            { text: 'Dedicated support', included: true },
+            { text: 'Custom themes', included: true },
+        ],
+        buttonText: 'Contact Sales',
+        buttonVariant: 'secondary',
+    },
+]
+</script>
+
+<template>
+    <SaaSPricing
+        title="Simple, Unapologetic Pricing"
+        :plans="plans"
+    />
+</template>
+```
+
+## PricingPlan 类型
+
+```ts
+interface PricingFeature {
+    text: string
+    included: boolean
+}
+
+interface PricingPlan {
+    name: string
+    description: string
+    priceMonthly: string
+    priceAnnually: string
+    features: PricingFeature[]
+    popular?: boolean
+    buttonText: string
+    buttonVariant?: 'default' | 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'outline' | 'ghost' | 'link'
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | `'Simple, Unapologetic Pricing'` |
+| `subtitle` | `string` | — |
+| `plans` | `PricingPlan[]` | 内置 3 个方案 |
+| `class` | `string` | — |
+
+## 特性
+
+- **月付/年付切换**：内置计费周期切换按钮
+- **热门徽章**：设置了 `popular: true` 的方案会显示脉冲徽章和放大效果
+- **功能勾选图标**：已包含功能显示绿色勾选，未包含功能显示灰色问号
+- **卡片变体**：热门方案使用 `interactive` 变体，其他使用 `default` 变体
diff --git a/apps/docs/blocks/search-widget.md b/apps/docs/blocks/search-widget.md
new file mode 100644
index 0000000..baa9108
--- /dev/null
+++ b/apps/docs/blocks/search-widget.md
@@ -0,0 +1,111 @@
+---
+title: Search Widget
+description: 搜索组件区块，带有输入框和分组建议列表。
+---
+
+# Search Widget
+
+新粗野主义风格的搜索组件，包含 Command 输入框和分组建议列表，支持实时过滤和选择。
+
+## 预览
+
+<ComponentPreview>
+  <SearchWidgetDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block search-widget
+```
+
+## 用法
+
+```vue
+<script setup>
+import SearchWidget from '@/components/ui/search-widget/SearchWidget.vue'
+import type { SearchSuggestion } from '@/components/ui/search-widget/SearchWidget.vue'
+
+const suggestions: SearchSuggestion[] = [
+    { label: 'Dashboard', value: 'dashboard', group: 'Pages' },
+    { label: 'Settings', value: 'settings', group: 'Pages' },
+    { label: 'Vue 3', value: 'vue3', group: 'Technologies' },
+    { label: 'Tailwind CSS', value: 'tailwind', group: 'Technologies' },
+]
+
+function handleSearch(value: string) {
+    console.log('Search:', value)
+}
+
+function handleSelect(suggestion: SearchSuggestion) {
+    console.log('Selected:', suggestion)
+}
+</script>
+
+<template>
+    <SearchWidget
+        placeholder="Search..."
+        :suggestions="suggestions"
+        @search="handleSearch"
+        @select="handleSelect"
+    />
+</template>
+```
+
+## 无分组建议
+
+```vue
+<script setup>
+import SearchWidget from '@/components/ui/search-widget/SearchWidget.vue'
+
+const suggestions = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Cherry', value: 'cherry' },
+]
+</script>
+
+<template>
+    <SearchWidget
+        :suggestions="suggestions"
+        @select="(s) => console.log(s)"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `placeholder` | `string` | locale: `searchWidget.defaultPlaceholder` |
+| `suggestions` | `SearchSuggestion[]` | `[]` |
+| `class` | `string` | — |
+
+### SearchSuggestion 类型
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `label` | `string` | 建议项显示文本 |
+| `value` | `string` | 建议项值 |
+| `group` | `string` | 可选，分组名称 |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `search` | `[value: string]` |
+| `select` | `[suggestion: SearchSuggestion]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `actions` | 额外操作区域 |
+
+## 布局
+
+SearchWidget 包含：
+- **Command 输入框**：基于 Command 组件的搜索输入
+- **建议列表**：输入内容后显示过滤后的建议，按 `group` 字段分组
+- **空状态**：无匹配结果时显示 CommandEmpty
+- **扩展插槽**：`actions` slot 用于添加自定义操作
diff --git a/apps/docs/blocks/settings-page.md b/apps/docs/blocks/settings-page.md
new file mode 100644
index 0000000..de58532
--- /dev/null
+++ b/apps/docs/blocks/settings-page.md
@@ -0,0 +1,131 @@
+---
+title: Settings Page
+description: 设置页面区块，带有标签页导航和表单控件。
+---
+
+# Settings Page
+
+新粗野主义风格的设置页面，包含标签页导航、表单控件（Input 和 Switch）和保存按钮。
+
+## 预览
+
+<ComponentPreview>
+  <SettingsPageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block settings-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import SettingsPage from '@/components/ui/settings-page/SettingsPage.vue'
+import type { SettingsTab } from '@/components/ui/settings-page/SettingsPage.vue'
+
+const tabs: SettingsTab[] = [
+    { label: 'General', value: 'general' },
+    { label: 'Notifications', value: 'notifications' },
+    { label: 'Security', value: 'security' },
+]
+
+function handleSave(payload) {
+    console.log('Save:', payload)
+    // payload: { tab: string; values: Record<string, unknown> }
+}
+</script>
+
+<template>
+    <SettingsPage
+        title="Settings"
+        :tabs="tabs"
+        default-tab="general"
+        @save="handleSave"
+    />
+</template>
+```
+
+## 自定义标签页内容
+
+```vue
+<script setup>
+import SettingsPage from '@/components/ui/settings-page/SettingsPage.vue'
+
+const tabs = [
+    { label: 'Profile', value: 'profile' },
+    { label: 'Account', value: 'account' },
+]
+</script>
+
+<template>
+    <SettingsPage
+        title="My Settings"
+        :tabs="tabs"
+        @save="handleSave"
+    >
+        <template #tab-profile="{ values, setValue }">
+            <div class="space-y-4">
+                <div class="flex items-center justify-between">
+                    <label class="font-bold text-sm">Display Name</label>
+                    <input
+                        class="h-10 max-w-xs border-3 border-brutal bg-brutal-bg px-3"
+                        :value="values.displayName ?? ''"
+                        @input="setValue('displayName', $event.target.value)"
+                    />
+                </div>
+            </div>
+        </template>
+    </SettingsPage>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `settingsPage.defaultTitle` |
+| `tabs` | `SettingsTab[]` | `[]` |
+| `defaultTab` | `string` | — |
+| `class` | `string` | — |
+
+### SettingsTab 类型
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `label` | `string` | 标签页显示文本 |
+| `value` | `string` | 标签页值 |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `save` | `[{ tab: string; values: Record<string, unknown> }]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换/扩展区块头部 |
+| `default` | 替换区块主体内容（含标签页和保存按钮） |
+| `footer` | 替换/扩展区块底部 |
+| `tab-{value}` | 自定义标签页内容，提供 `{ values, setValue }` 作用域属性 |
+
+### 作用域插槽属性（`tab-{value}`）
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `values` | `Record<string, unknown>` | 当前标签页的表单值 |
+| `setValue` | `(key: string, val: unknown) => void` | 设置表单值的函数 |
+
+## 布局
+
+SettingsPage 包含：
+- **头部**：标题区域
+- **标签页导航**：TabsList + TabsTrigger，根据 `tabs` prop 渲染
+- **标签页内容**：每个标签页对应一个 Card，包含：
+  - 默认内容：Name（Input）和 Notifications（Switch），用 Separator 分隔
+  - 可通过 `tab-{value}` 插槽自定义
+- **保存按钮**：primary 变体，右对齐
diff --git a/apps/docs/blocks/stepper-section.md b/apps/docs/blocks/stepper-section.md
new file mode 100644
index 0000000..b4f8e28
--- /dev/null
+++ b/apps/docs/blocks/stepper-section.md
@@ -0,0 +1,121 @@
+---
+title: Stepper Section
+description: 步骤导航区块，带有水平步骤条、内容卡片和前后导航按钮。
+---
+
+# Stepper Section
+
+新粗野主义风格的步骤导航区块，包含水平 Stepper、内容卡片和上一步/下一步按钮。
+
+## 预览
+
+<ComponentPreview>
+  <StepperSectionDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block stepper-section
+```
+
+## 用法
+
+```vue
+<script setup>
+import StepperSection from '@/components/ui/stepper-section/StepperSection.vue'
+import type { StepperStepItem } from '@/components/ui/stepper-section/StepperSection.vue'
+
+const steps: StepperStepItem[] = [
+    { title: 'Account', description: 'Create your account' },
+    { title: 'Profile', description: 'Set up your profile' },
+    { title: 'Complete', description: 'Review and finish' },
+]
+
+function handleStepClick(index: number) {
+    console.log('Step:', index)
+}
+</script>
+
+<template>
+    <StepperSection
+        title="Setup Wizard"
+        :steps="steps"
+        :current-step="0"
+        @step-click="handleStepClick"
+    />
+</template>
+```
+
+## 自定义步骤内容
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import StepperSection from '@/components/ui/stepper-section/StepperSection.vue'
+
+const currentStep = ref(0)
+
+const steps = [
+    { title: 'Personal Info', description: 'Your basic information' },
+    { title: 'Preferences', description: 'Customize your experience' },
+    { title: 'Confirmation', description: 'Review your choices' },
+]
+</script>
+
+<template>
+    <StepperSection
+        :steps="steps"
+        :current-step="currentStep"
+        @step-click="currentStep = $event"
+    >
+        <template v-if="currentStep === 0">
+            <p>Personal info form goes here</p>
+        </template>
+        <template v-if="currentStep === 1">
+            <p>Preferences form goes here</p>
+        </template>
+        <template v-if="currentStep === 2">
+            <p>Confirmation summary goes here</p>
+        </template>
+    </StepperSection>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `stepperSection.defaultTitle` |
+| `steps` | `StepperStepItem[]` | `[]` |
+| `currentStep` | `number` | `0` |
+| `class` | `string` | — |
+
+### StepperStepItem 类型
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `title` | `string` | 步骤标题 |
+| `description` | `string` | 可选，步骤描述 |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `step-click` | `[index: number]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换/扩展区块头部 |
+| `default` | 步骤内容区域（卡片内部） |
+| `footer` | 替换/扩展区块底部 |
+
+## 布局
+
+StepperSection 包含：
+- **头部**：居中标题
+- **Stepper**：水平方向的步骤指示器
+- **内容卡片**：Card 组件包裹的步骤内容区域
+- **导航按钮**：上一步（outline 变体）和下一步（primary 变体），自动根据当前步骤禁用
diff --git a/apps/docs/blocks/success-card.md b/apps/docs/blocks/success-card.md
new file mode 100644
index 0000000..c29df58
--- /dev/null
+++ b/apps/docs/blocks/success-card.md
@@ -0,0 +1,89 @@
+---
+title: Success Card
+description: 成功状态卡片区块，带有勾选图标、标题、描述和确认按钮。
+---
+
+# Success Card
+
+新粗野主义风格的成功卡片，包含成功色顶部条、装饰性勾选图标、标题、描述和确认按钮。
+
+## 预览
+
+<ComponentPreview>
+  <SuccessCardDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block success-card
+```
+
+## 用法
+
+```vue
+<script setup>
+import SuccessCard from '@/components/ui/success-card/SuccessCard.vue'
+
+function handleConfirm() {
+    console.log('Confirmed')
+}
+</script>
+
+<template>
+    <SuccessCard
+        title="Operation Successful"
+        description="Your changes have been saved successfully."
+        confirm-text="Continue"
+        @confirm="handleConfirm"
+    />
+</template>
+```
+
+## 自定义文本
+
+```vue
+<script setup>
+import SuccessCard from '@/components/ui/success-card/SuccessCard.vue'
+</script>
+
+<template>
+    <SuccessCard
+        title="Payment Complete"
+        description="Your order has been placed and is being processed."
+        confirm-text="View Order"
+        @confirm="viewOrder"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `successCard.defaultTitle` |
+| `description` | `string` | locale: `successCard.defaultDescription` |
+| `confirmText` | `string` | locale: `successCard.defaultConfirmText` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `confirm` | `[]` |
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `actions` | 额外操作按钮区域 |
+
+## 布局
+
+SuccessCard 包含：
+- **成功色顶部条**：`bg-brutal-success` 装饰条
+- **装饰性勾选图标**：成功色方框内 Check 图标，带有偏移阴影背景
+- **标题**：加粗、字距调整的标题
+- **描述**：标题下方的弱化文本（仅在提供时显示）
+- **确认按钮**：primary 变体按钮
+- **扩展插槽**：`actions` slot 用于添加自定义操作按钮
diff --git a/apps/docs/blocks/tabs-nav.md b/apps/docs/blocks/tabs-nav.md
new file mode 100644
index 0000000..107e69e
--- /dev/null
+++ b/apps/docs/blocks/tabs-nav.md
@@ -0,0 +1,95 @@
+---
+title: Tabs Nav
+description: 带内容的标签页导航区块，含标签触发器和内容面板。
+---
+
+# Tabs Nav
+
+新粗野主义风格的标签页导航区块，包含标签触发器和对应内容面板，基于 reka-ui Tabs 原语构建。
+
+## 预览
+
+<ComponentPreview>
+  <TabsNavDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block tabs-nav
+```
+
+## 用法
+
+```vue
+<script setup>
+import TabsNav from '@/components/ui/tabs-nav/TabsNav.vue'
+
+const tabs = [
+    { label: 'Overview', value: 'overview' },
+    { label: 'Features', value: 'features' },
+    { label: 'Pricing', value: 'pricing' },
+]
+</script>
+
+<template>
+    <TabsNav :tabs="tabs" default-value="overview">
+        <template #default>
+            <!-- 自定义内容面板 -->
+        </template>
+    </TabsNav>
+</template>
+```
+
+## 自定义内容
+
+```vue
+<script setup>
+import TabsNav from '@/components/ui/tabs-nav/TabsNav.vue'
+import Card from '@/components/ui/card/Card.vue'
+
+const tabs = [
+    { label: 'Tab A', value: 'a' },
+    { label: 'Tab B', value: 'b' },
+]
+</script>
+
+<template>
+    <TabsNav :tabs="tabs">
+        <template #default>
+            <!-- 使用 TabsContent 自定义每个面板 -->
+        </template>
+    </TabsNav>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `tabs` | `TabItem[]` | `[]` |
+| `defaultValue` | `string` | 第一个 tab 的 value |
+| `class` | `string` | — |
+
+### TabItem 类型
+
+```ts
+interface TabItem {
+    label: string
+    value: string
+}
+```
+
+## Slots
+
+| Slot | 用途 |
+|------|------|
+| `header` | 替换/扩展区块头部 |
+| `default` | 替换标签内容面板区域 |
+| `footer` | 替换/扩展区块底部 |
+
+## 布局
+
+TabsNav 包含：
+- **标签触发器**：全宽水平排列的 TabsTrigger，等分宽度
+- **内容面板**：默认为 Card flat 变体，显示 tab 标签文本；可通过 default slot 自定义
diff --git a/apps/docs/blocks/testimonial-card.md b/apps/docs/blocks/testimonial-card.md
new file mode 100644
index 0000000..f52aaac
--- /dev/null
+++ b/apps/docs/blocks/testimonial-card.md
@@ -0,0 +1,80 @@
+---
+title: Testimonial Card
+description: 用户评价推荐卡片，含头像、引文、署名和验证徽标。
+---
+
+# Testimonial Card
+
+新粗野主义风格的用户评价卡片，包含头像、引文图标、评价文本、作者信息和验证徽标。
+
+## 预览
+
+<ComponentPreview>
+  <TestimonialCardDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block testimonial-card
+```
+
+## 用法
+
+```vue
+<script setup>
+import TestimonialCard from '@/components/ui/testimonial-card/TestimonialCard.vue'
+</script>
+
+<template>
+    <TestimonialCard
+        quote="这款产品彻底改变了我们的工作流程。"
+        author="张明"
+        role="产品经理"
+    />
+</template>
+```
+
+## 多卡片布局
+
+```vue
+<script setup>
+import TestimonialCard from '@/components/ui/testimonial-card/TestimonialCard.vue'
+
+const testimonials = [
+    { quote: 'Great product!', author: 'Alice', role: 'CEO' },
+    { quote: 'Highly recommended.', author: 'Bob', role: 'CTO' },
+    { quote: 'Love the design.', author: 'Carol', role: 'Designer' },
+]
+</script>
+
+<template>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <TestimonialCard
+            v-for="(t, i) in testimonials"
+            :key="i"
+            :quote="t.quote"
+            :author="t.author"
+            :role="t.role"
+        />
+    </div>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `quote` | `string` | locale: `testimonialCard.defaultQuote` |
+| `author` | `string` | locale: `testimonialCard.defaultAuthor` |
+| `role` | `string` | locale: `testimonialCard.defaultRole` |
+| `class` | `string` | — |
+
+## 布局
+
+TestimonialCard 包含：
+- **头像**：Avatar 组件，从作者姓名提取首字母缩写
+- **引文图标**：Quote 图标，主色渲染
+- **评价文本**：加粗正文
+- **作者信息**：姓名和职位
+- **验证徽标**：secondary 变体 Badge
diff --git a/apps/docs/blocks/upload-card.md b/apps/docs/blocks/upload-card.md
new file mode 100644
index 0000000..2d478d9
--- /dev/null
+++ b/apps/docs/blocks/upload-card.md
@@ -0,0 +1,109 @@
+---
+title: Upload Card
+description: 带有拖拽上传、进度条和旋转指示器的文件上传卡片区块。
+---
+
+# Upload Card
+
+新粗野主义风格的文件上传卡片，支持拖拽上传、浏览文件、上传进度显示和旋转指示器。
+
+## 预览
+
+<ComponentPreview>
+  <UploadCardDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block upload-card
+```
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import UploadCard from '@/components/ui/upload-card/UploadCard.vue'
+
+const uploading = ref(false)
+const progress = ref(0)
+
+function handleUpload(files) {
+    console.log('Upload:', files)
+    uploading.value = true
+    // Simulate upload progress
+    const interval = setInterval(() => {
+        progress.value += 10
+        if (progress.value >= 100) {
+            clearInterval(interval)
+            uploading.value = false
+            progress.value = 0
+        }
+    }, 300)
+}
+
+function handleDrop(files) {
+    console.log('Drop:', files)
+    handleUpload(files)
+}
+</script>
+
+<template>
+    <UploadCard
+        accept=".png,.jpg,.pdf"
+        :uploading="uploading"
+        :progress="progress"
+        @upload="handleUpload"
+        @drop="handleDrop"
+    />
+</template>
+```
+
+## 上传中状态
+
+```vue
+<script setup>
+import UploadCard from '@/components/ui/upload-card/UploadCard.vue'
+</script>
+
+<template>
+    <UploadCard
+        uploading
+        :progress="65"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `uploadCard.defaultTitle` |
+| `description` | `string` | locale: `uploadCard.defaultDescription` |
+| `accept` | `string` | — |
+| `maxSize` | `number` | — |
+| `uploading` | `boolean` | `false` |
+| `progress` | `number` | `0` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `upload` | `[files: File[]]` |
+| `drop` | `[files: File[]]` |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `actions` | 拖拽区域下方的自定义操作区域 |
+
+## 布局
+
+UploadCard 包含：
+- **拖拽区域**：虚线边框的拖放目标区域，支持点击浏览文件
+- **上传图标**：Upload 图标（来自 lucide-vue-next）
+- **浏览按钮**：primary 变体按钮，触发文件选择器
+- **上传中状态**：旋转指示器 + 进度条，拖拽区域变为不可交互
diff --git a/apps/docs/blocks/waitlist-page.md b/apps/docs/blocks/waitlist-page.md
new file mode 100644
index 0000000..e6c4ca8
--- /dev/null
+++ b/apps/docs/blocks/waitlist-page.md
@@ -0,0 +1,67 @@
+---
+title: Waitlist Page
+description: 候补名单收集页模板，用于新品发布的邮箱预约收集。
+---
+
+# Waitlist Page
+
+新粗野主义风格的候补注册页面，包含邮箱输入、CTA 按钮和社交证明指标。
+
+## 预览
+
+<ComponentPreview>
+  <WaitlistPageDemo />
+</ComponentPreview>
+
+## 安装
+
+```bash
+npx brutx-vue@latest add --block waitlist-page
+```
+
+## 用法
+
+```vue
+<script setup>
+import WaitlistPage from '@/components/ui/waitlist-page/WaitlistPage.vue'
+
+function handleSubmit(email) {
+    console.log('Waitlist signup:', email)
+}
+</script>
+
+<template>
+    <WaitlistPage
+        title="Join the BrutxUI Waitlist Club"
+        description="Be the first to know when we launch. Get early access and exclusive perks."
+        cta-text="Secure Priority Access"
+        :waitlist-count="1247"
+        @submit="handleSubmit"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `title` | `string` | locale: `waitlistPage.title` |
+| `description` | `string` | — |
+| `ctaText` | `string` | locale: `waitlistPage.ctaText` |
+| `waitlistCount` | `number` | `0` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `submit` | `string`（邮箱地址） |
+
+## 布局
+
+WaitlistPage 包含：
+- **徽章**：旋转的强调色徽章，带有 "Early Access" 标签
+- **标题**：加粗、字距调整的标题
+- **描述**：标题下方的弱化文本
+- **邮箱表单**：输入框和 CTA 按钮，响应式行布局
+- **社交证明**：候补人数、星级评分和在线指示器
diff --git a/apps/docs/components/accordion.md b/apps/docs/components/accordion.md
new file mode 100644
index 0000000..a0a5b1b
--- /dev/null
+++ b/apps/docs/components/accordion.md
@@ -0,0 +1,82 @@
+---
+title: Accordion 折叠面板
+description: 折叠面板组件，用于在一个垂直堆叠的列表中展示和折叠内容。
+---
+
+# Accordion 折叠面板
+
+可折叠的面板列表，适用于展示常见问题解答（FAQ）、详细条款或分步信息折叠。
+
+## 预览
+
+<ComponentPreview>
+  <AccordionDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="accordion" />
+
+## 用法
+
+```vue
+<script setup>
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion'
+</script>
+
+<template>
+    <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+            <AccordionTrigger>这里是面板标题 1</AccordionTrigger>
+            <AccordionContent>
+                这里是折叠面板内容 1。
+            </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+            <AccordionTrigger>这里是面板标题 2</AccordionTrigger>
+            <AccordionContent>
+                这里是折叠面板内容 2。
+            </AccordionContent>
+        </AccordionItem>
+    </Accordion>
+</template>
+```
+
+## 变体
+
+可以使用 `AccordionItem` 的 `variant` 属性来设置不同的粗野主义风格：
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 默认带有黑粗边框和右下方偏移实心阴影 |
+| `flat` | 仅带有黑粗边框，无任何投影效果 |
+| `ghost` | 透明背景，无边框和阴影，简约展示 |
+| `interactive` | 在悬停时拥有阴影放大和位移，交互感更强 |
+
+```vue
+<template>
+    <AccordionItem value="item" variant="interactive">
+        <AccordionTrigger>交互式折叠子项</AccordionTrigger>
+        <AccordionContent>Hover 看看！有悬停偏移效果。</AccordionContent>
+    </AccordionItem>
+</template>
+```
+
+## Props
+
+### Accordion Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `type` | `'single' \| 'multiple'` | — | 展开模式，单选或多选 |
+| `collapsible` | `boolean` | `false` | 在 `type="single"` 模式下是否允许关闭全部子项 |
+| `disabled` | `boolean` | `false` | 是否禁用整个折叠面板 |
+| `modelValue` | `string \| string[]` | — | 当前选中的面板值 |
+
+### AccordionItem Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` | `string` | — | 唯一的标示值 (必填) |
+| `variant` | `'default' \| 'flat' \| 'ghost' \| 'interactive'` | `'default'` | 视觉风格变体 |
+| `disabled` | `boolean` | `false` | 是否禁用此子项 |
diff --git a/apps/docs/components/alert-dialog.md b/apps/docs/components/alert-dialog.md
new file mode 100644
index 0000000..cb67ed5
--- /dev/null
+++ b/apps/docs/components/alert-dialog.md
@@ -0,0 +1,83 @@
+---
+title: Alert Dialog 提示对话框
+description: 提示对话框组件，用于需要用户明确确认的操作，无障碍适配良好。
+---
+
+# Alert Dialog 提示对话框
+
+新粗野主义风格的确认对话框，需要用户交互。基于 reka-ui 的 AlertDialog 原语构建。
+
+## 预览
+
+<ComponentPreview>
+  <AlertDialogDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="alert-dialog" />
+
+## 用法
+
+```vue
+<script setup>
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from '@/components/ui'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <AlertDialog>
+        <AlertDialogTrigger as-child>
+            <Button variant="danger">Delete Account</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                    This action cannot be undone. This will permanently delete your account and remove your data.
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction>Continue</AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `AlertDialog` | 根组件（从 reka-ui 的 `AlertDialogRoot` 重新导出） |
+| `AlertDialogTrigger` | 打开对话框的按钮 |
+| `AlertDialogContent` | 对话框内容面板 |
+| `AlertDialogHeader` | 标题和描述的头部容器 |
+| `AlertDialogFooter` | 操作按钮的底部容器 |
+| `AlertDialogTitle` | 对话框标题 |
+| `AlertDialogDescription` | 对话框描述文本 |
+| `AlertDialogAction` | 确认操作按钮 |
+| `AlertDialogCancel` | 关闭对话框的取消按钮 |
+
+## Props
+
+### AlertDialogContent
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `showCloseButton` | `boolean` | `true` |
+| `class` | `string` | — |
+
+### AlertDialogAction / AlertDialogCancel
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+
+## 无障碍
+
+- 对话框打开时，焦点被限制在对话框内
+- 按 `Escape` 关闭对话框
+- `AlertDialogCancel` 点击后关闭对话框
+- `AlertDialogAction` 确认并关闭对话框
diff --git a/apps/docs/components/alert.md b/apps/docs/components/alert.md
new file mode 100644
index 0000000..559b55b
--- /dev/null
+++ b/apps/docs/components/alert.md
@@ -0,0 +1,101 @@
+---
+title: Alert 提示
+description: 新粗野主义风格的警告框组件，支持多种变体、状态色以及自定义图标。
+---
+
+# Alert 提示
+
+新粗野主义风格的警告组件，用于显示状态消息，支持 7 种颜色变体。
+
+## 预览
+
+<ComponentPreview>
+  <AlertDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="alert" />
+
+## 用法
+
+```vue
+<script setup>
+import Alert from '@/components/ui/alert/Alert.vue'
+import AlertTitle from '@/components/ui/alert/AlertTitle.vue'
+import AlertDescription from '@/components/ui/alert/AlertDescription.vue'
+</script>
+
+<template>
+    <Alert variant="default">
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
+    </Alert>
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 标准背景色，前景色文字 |
+| `primary` | Primary（珊瑚色）背景 |
+| `secondary` | Secondary（薄荷青）背景 |
+| `success` | Success（绿色）背景 |
+| `warning` | Warning（黄色）背景 |
+| `danger` | Destructive（红色）背景 |
+| `info` | Info（蓝色）背景 |
+
+```vue
+<script setup>
+import Alert from '@/components/ui/alert/Alert.vue'
+</script>
+
+<template>
+    <Alert variant="success">Operation completed successfully.</Alert>
+    <Alert variant="danger">Failed to save changes.</Alert>
+    <Alert variant="info">A new version is available.</Alert>
+</template>
+```
+
+## 带图标
+
+Alert 支持通过 SVG 子元素放置图标。图标绝对定位于左侧：
+
+```vue
+<script setup>
+import Alert from '@/components/ui/alert/Alert.vue'
+import AlertTitle from '@/components/ui/alert/AlertTitle.vue'
+import AlertDescription from '@/components/ui/alert/AlertDescription.vue'
+import { Terminal } from 'lucide-vue-next'
+</script>
+
+<template>
+    <Alert variant="default">
+        <Terminal class="h-5 w-5" />
+        <AlertTitle>Terminal</AlertTitle>
+        <AlertDescription>Run commands in your terminal.</AlertDescription>
+    </Alert>
+</template>
+```
+
+## Props
+
+### Alert
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'default'` |
+| `class` | `string` | — |
+
+### AlertTitle
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+
+### AlertDescription
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
diff --git a/apps/docs/components/avatar.md b/apps/docs/components/avatar.md
new file mode 100644
index 0000000..4d3999c
--- /dev/null
+++ b/apps/docs/components/avatar.md
@@ -0,0 +1,106 @@
+---
+title: Avatar 头像
+description: 头像组件，支持图片、回退文字以及多种形状和尺寸的粗野主义边框。
+---
+
+# Avatar 头像
+
+新粗野主义风格的头像组件，用于显示用户头像图片，支持回退显示。
+
+## 预览
+
+<ComponentPreview>
+  <AvatarDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="avatar" />
+
+## 用法
+
+```vue
+<script setup>
+import Avatar from '@/components/ui/avatar/Avatar.vue'
+import AvatarImage from '@/components/ui/avatar/AvatarImage.vue'
+import AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'
+</script>
+
+<template>
+    <Avatar size="default" shape="square">
+        <AvatarImage src="/avatar.jpg" alt="User avatar" />
+        <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+</template>
+```
+
+## 尺寸
+
+| 尺寸 | 大小 |
+|------|------|
+| `sm` | `h-8 w-8`（32px） |
+| `default` | `h-10 w-10`（40px） |
+| `lg` | `h-14 w-14`（56px） |
+| `xl` | `h-20 w-20`（80px） |
+
+## 形状
+
+| 形状 | 说明 |
+|------|------|
+| `square` | 无圆角（默认） |
+| `rounded` | 使用 `--brutal-radius` 令牌 |
+
+```vue
+<script setup>
+import Avatar from '@/components/ui/avatar/Avatar.vue'
+import AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'
+</script>
+
+<template>
+    <Avatar size="lg" shape="rounded">
+        <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+</template>
+```
+
+## 回退行为
+
+当图片加载失败时，`AvatarFallback` 会自动显示：
+
+```vue
+<script setup>
+import Avatar from '@/components/ui/avatar/Avatar.vue'
+import AvatarImage from '@/components/ui/avatar/AvatarImage.vue'
+import AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'
+</script>
+
+<template>
+    <Avatar>
+        <AvatarImage src="/broken-url.jpg" alt="User" />
+        <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+</template>
+```
+
+## Props
+
+### Avatar
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `size` | `'sm' \| 'default' \| 'lg' \| 'xl'` | `'default'` |
+| `shape` | `'square' \| 'rounded'` | `'square'` |
+| `class` | `string` | — |
+
+### AvatarImage
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `src` | `string` | — |
+| `alt` | `string` | — |
+
+### AvatarFallback
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
diff --git a/apps/docs/components/badge.md b/apps/docs/components/badge.md
new file mode 100644
index 0000000..e0e8198
--- /dev/null
+++ b/apps/docs/components/badge.md
@@ -0,0 +1,72 @@
+---
+title: Badge 徽标
+description: 徽标组件，用于显示状态、分类标签，提供高对比度的亮色或暗色视觉。
+---
+
+# Badge 徽标
+
+新粗野主义风格的行内徽章组件，用于标签、状态和分类。
+
+## 预览
+
+<ComponentPreview>
+  <BadgeDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="badge" />
+
+## 用法
+
+```vue
+<script setup>
+import Badge from '@/components/ui/badge/Badge.vue'
+</script>
+
+<template>
+    <Badge variant="default">Default</Badge>
+    <Badge variant="primary">Primary</Badge>
+    <Badge variant="success">Success</Badge>
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 背景色，带小阴影 |
+| `primary` | Primary（珊瑚色）背景 |
+| `secondary` | Secondary（薄荷青）背景 |
+| `accent` | Accent（黄色）背景 |
+| `danger` | Destructive（红色）背景 |
+| `success` | Success（绿色）背景 |
+| `outline` | 透明背景，无阴影 |
+
+## 尺寸
+
+| 尺寸 | 内边距 | 字体大小 |
+|------|--------|----------|
+| `sm` | `px-2 py-0.5` | `text-xs` |
+| `default` | `px-3 py-1` | `text-sm` |
+| `lg` | `px-4 py-1.5` | `text-base` |
+
+```vue
+<script setup>
+import Badge from '@/components/ui/badge/Badge.vue'
+</script>
+
+<template>
+    <Badge variant="primary" size="sm">Small</Badge>
+    <Badge variant="primary" size="default">Default</Badge>
+    <Badge variant="primary" size="lg">Large</Badge>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'danger' \| 'success' \| 'outline'` | `'default'` |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `class` | `string` | — |
diff --git a/apps/docs/components/before-after.md b/apps/docs/components/before-after.md
new file mode 100644
index 0000000..3d17aa6
--- /dev/null
+++ b/apps/docs/components/before-after.md
@@ -0,0 +1,56 @@
+---
+title: BeforeAfter 对比滑块
+description: 拖拽对比滑块组件，用于在同一框架下展示两张图片的差异，提供清晰的拖拽滑块控制。
+---
+
+# BeforeAfter 对比滑块
+
+新粗野主义风格的图片滑动对比组件。用于直观比对同一张图在修改前 (Before) 与修改后 (After) 的视觉差异。
+
+## 预览
+
+<ComponentPreview>
+  <BeforeAfterDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="before-after" />
+
+## 用法
+
+```vue
+<script setup>
+import BeforeAfter from '@/components/ui/before-after/BeforeAfter.vue'
+
+const original = '/images/before.jpg'
+const modified = '/images/after.jpg'
+</script>
+
+<template>
+    <BeforeAfter
+        :before="original"
+        :after="modified"
+        :default-value="50"
+    />
+</template>
+```
+
+## 技术方案
+
+本组件基于原生浏览器 `<input type="range">` 结合 CSS 的 `clip-path` 遮罩构建。它能带来以下显著优势：
+1. **触控友好**：在手机、平板等移动端设备上完美适配滑动手势。
+2. **零依赖**：不需要额外加载任何外部手势交互 JS 库，包体积近乎于零。
+3. **完美排版**：底层的 `clip-path: inset(...)` 裁剪方式不会破坏图片的宽高比，确保布局在多端始终对齐。
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `before` | `string` | — | 左侧/底层原始图片的 URL (必填) |
+| `after` | `string` | — | 右侧/表层对比图片的 URL (必填) |
+| `beforeAlt` | `string` | locale: `beforeAfter.before` | 原始图片的 `alt` 属性 |
+| `afterAlt` | `string` | locale: `beforeAfter.after` | 对比图片的 `alt` 属性 |
+| `defaultValue` | `number` | `50` | 初始状态下分割线所处的百分比位置 (0-100) |
+| `disabled` | `boolean` | `false` | 是否禁用拖拽交互 |
+| `class` | `string` | `""` | 容器的自定义 CSS 类 |
diff --git a/apps/docs/components/breadcrumb-schema.tsx b/apps/docs/components/breadcrumb-schema.tsx
deleted file mode 100644
index 2301d01..0000000
--- a/apps/docs/components/breadcrumb-schema.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client';
-
-interface BreadcrumbItem {
-    name: string;
-    url: string;
-}
-
-interface BreadcrumbSchemaProps {
-    items: BreadcrumbItem[];
-}
-
-export function BreadcrumbSchema({ items }: BreadcrumbSchemaProps) {
-    const breadcrumbJsonLd = {
-        '@context': 'https://schema.org',
-        '@type': 'BreadcrumbList',
-        itemListElement: items.map((item, index) => ({
-            '@type': 'ListItem',
-            position: index + 1,
-            name: item.name,
-            item: item.url,
-        })),
-    };
-
-    return (
-        <script
-            type="application/ld+json"
-            dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
-        />
-    );
-}
-
-export const breadcrumbs = {
-    home: [{ name: 'Brutx', url: 'https://brutxui.site' }],
-    docs: [
-        { name: 'Brutx', url: 'https://brutxui.site' },
-        { name: 'Documentation', url: 'https://brutxui.site/docs' },
-    ],
-    installation: [
-        { name: 'Brutx', url: 'https://brutxui.site' },
-        { name: 'Documentation', url: 'https://brutxui.site/docs' },
-        { name: 'Installation', url: 'https://brutxui.site/docs/installation' },
-    ],
-    components: [
-        { name: 'Brutx', url: 'https://brutxui.site' },
-        { name: 'Documentation', url: 'https://brutxui.site/docs' },
-        { name: 'Components', url: 'https://brutxui.site/docs/components' },
-    ],
-    cli: [
-        { name: 'Brutx', url: 'https://brutxui.site' },
-        { name: 'Documentation', url: 'https://brutxui.site/docs' },
-        { name: 'CLI', url: 'https://brutxui.site/docs/cli' },
-    ],
-};
-
-export function getComponentBreadcrumb(componentName: string, componentSlug: string) {
-    return [
-        { name: 'Brutx', url: 'https://brutxui.site' },
-        { name: 'Documentation', url: 'https://brutxui.site/docs' },
-        { name: 'Components', url: 'https://brutxui.site/docs/components' },
-        { name: componentName, url: `https://brutxui.site/docs/components/${componentSlug}` },
-    ];
-}
diff --git a/apps/docs/components/breadcrumb.md b/apps/docs/components/breadcrumb.md
new file mode 100644
index 0000000..31ce0e0
--- /dev/null
+++ b/apps/docs/components/breadcrumb.md
@@ -0,0 +1,92 @@
+---
+title: Breadcrumb 面包屑
+description: 面包屑导航组件，用于展示当前页面的路径层次结构，帮助用户快速返回上层目录。
+---
+
+# Breadcrumb 面包屑
+
+新粗野主义风格的面包屑导航组件，适用于展示多级页面树，特别在中后台 Dashboard 等复杂嵌套场景中作为标配导航。
+
+## 预览
+
+<ComponentPreview>
+  <BreadcrumbDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="breadcrumb" />
+
+## 用法
+
+```vue
+<script setup>
+import {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis
+} from '@/components/ui/breadcrumb'
+</script>
+
+<template>
+    <Breadcrumb>
+        <BreadcrumbList>
+            <BreadcrumbItem>
+                <BreadcrumbLink href="/">首页</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <BreadcrumbLink href="/components">组件</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <BreadcrumbPage>面包屑</BreadcrumbPage>
+            </BreadcrumbItem>
+        </BreadcrumbList>
+    </Breadcrumb>
+</template>
+```
+
+## 折叠省略
+
+当页面层级非常多时，可以使用 `BreadcrumbEllipsis` 来折叠中间不太重要的页面。
+
+```vue
+<template>
+    <Breadcrumb>
+        <BreadcrumbList>
+            <BreadcrumbItem>
+                <BreadcrumbLink href="#">首页</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <!-- 折叠省略按钮 -->
+                <BreadcrumbEllipsis />
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+                <BreadcrumbPage>当前页面</BreadcrumbPage>
+            </BreadcrumbItem>
+        </BreadcrumbList>
+    </Breadcrumb>
+</template>
+```
+
+## Props / 插槽
+
+### BreadcrumbLink Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `as` | `string` | `'a'` | 渲染的 HTML 标签，如 `'a'`、`'button'` 等 |
+| `asChild` | `boolean` | `false` | 是否开启 Reka UI 的 asChild，以便配合 Vue-Router 的 `<router-link>` 渲染 |
+
+### BreadcrumbSeparator Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| `default` | 默认渲染正斜杠 `/`，可放入自定义的小图标组件 |
diff --git a/apps/docs/components/button.md b/apps/docs/components/button.md
new file mode 100644
index 0000000..e863e9c
--- /dev/null
+++ b/apps/docs/components/button.md
@@ -0,0 +1,121 @@
+---
+title: Button 按钮
+description: 新粗野主义风格的按钮组件，提供9种颜色变体、加载动画与键盘导航。
+---
+
+# Button 按钮
+
+新粗野主义风格的按钮组件，支持 9 种变体、5 种尺寸、加载状态和 `asChild` 组合支持。
+
+## 预览
+
+<ComponentPreview>
+  <ButtonDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="button" />
+
+## 用法
+
+```vue
+<script setup>
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <Button variant="primary" size="default">
+        Click me
+    </Button>
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 背景色，硬阴影 |
+| `primary` | Primary（珊瑚色）背景 |
+| `secondary` | Secondary（薄荷青）背景 |
+| `accent` | Accent（黄色）背景 |
+| `danger` | Destructive（红色）背景，白色文字 |
+| `success` | Success（绿色）背景 |
+| `outline` | 透明背景，悬停时反转 |
+| `ghost` | 无边框和阴影，柔和悬停效果 |
+| `link` | 无边框和阴影，悬停时显示下划线 |
+
+## 尺寸
+
+| 尺寸 | 高度 | 内边距 | 字体大小 |
+|------|------|--------|----------|
+| `sm` | `h-9` | `px-3 py-1` | `text-sm` |
+| `default` | `h-11` | `px-5 py-2` | `text-base` |
+| `lg` | `h-14` | `px-8 py-3` | `text-lg` |
+| `xl` | `h-16` | `px-10 py-4` | `text-xl` |
+| `icon` | `h-11 w-11` | `p-0` | — |
+
+## 加载状态
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const isLoading = ref(false)
+
+async function handleSubmit() {
+    isLoading.value = true
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    isLoading.value = false
+}
+</script>
+
+<template>
+    <Button variant="primary" :loading="isLoading" @click="handleSubmit">
+        Save Changes
+    </Button>
+</template>
+```
+
+## 禁用状态
+
+```vue
+<script setup>
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <Button variant="primary" disabled>
+        Disabled
+    </Button>
+</template>
+```
+
+## asChild
+
+使用 `asChild` 将按钮样式渲染到自定义元素上（例如路由链接）：
+
+```vue
+<script setup>
+import Button from '@/components/ui/button/Button.vue'
+import { RouterLink } from 'vue-router'
+</script>
+
+<template>
+    <Button as-child>
+        <RouterLink to="/about">About</RouterLink>
+    </Button>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'danger' \| 'success' \| 'outline' \| 'ghost' \| 'link'` | `'default'` |
+| `size` | `'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon'` | `'default'` |
+| `asChild` | `boolean` | `false` |
+| `loading` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `class` | `string` | — |
diff --git a/apps/docs/components/calendar.md b/apps/docs/components/calendar.md
new file mode 100644
index 0000000..c3c59e2
--- /dev/null
+++ b/apps/docs/components/calendar.md
@@ -0,0 +1,83 @@
+---
+title: Calendar 日历
+description: 日历组件，支持日期选择、标记，结合新粗野主义边框与硬质阴影设计。
+---
+
+# Calendar 日历
+
+新粗野主义风格的日历组件，基于 v-calendar 构建，支持单日期和日期范围选择。
+
+## 预览
+
+<ComponentPreview>
+  <ClientOnly>
+    <CalendarDemo />
+  </ClientOnly>
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="calendar" />
+
+**需要额外安装依赖：**
+
+```bash
+pnpm add v-calendar
+```
+
+## 用法
+
+### 单日期选择
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Calendar from '@/components/ui/calendar/Calendar.vue'
+
+const date = ref(null)
+</script>
+
+<template>
+    <Calendar v-model="date" />
+</template>
+```
+
+### 日期范围选择
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Calendar from '@/components/ui/calendar/Calendar.vue'
+
+const dateRange = ref(null)
+</script>
+
+<template>
+    <Calendar v-model="dateRange" :is-range="true" />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `modelValue` | `Date \| Date[] \| null` | — |
+| `isRange` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `Date \| Date[] \| null` |
+
+## 样式
+
+Calendar 组件对所有日期单元格使用新粗野主义样式：
+
+- **选中日期**：Primary 背景色，带边框和阴影
+- **范围日期**：范围内使用 Accent 背景色，起止日期使用 Secondary 背景色
+- **今天**：Secondary 背景色，带边框
+- **非当月日期**：柔和前景色，降低透明度
+- **禁用状态**：降低透明度，显示禁止光标
diff --git a/apps/docs/components/card-3d.md b/apps/docs/components/card-3d.md
new file mode 100644
index 0000000..3985418
--- /dev/null
+++ b/apps/docs/components/card-3d.md
@@ -0,0 +1,61 @@
+---
+title: Card3D 3D 悬浮卡片
+description: 3D 物理悬浮卡片，鼠标悬停时产生 3D 旋转偏转与反向阴影投影。
+---
+
+# Card3D 3D 悬浮卡片
+
+新粗野主义风格的 3D 交互卡片，通过捕捉指针相对卡片中心的坐标偏移，产生流畅的 3D 旋转偏转，阴影层朝反方向位移产生实体立体质感。
+
+## 预览
+
+<ComponentPreview>
+  <Card3DDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="card-3d" />
+
+## 用法
+
+```vue
+<script setup>
+import Card3D from '@/components/ui/card-3d/Card3D.vue'
+</script>
+
+<template>
+    <Card3D class="w-full max-w-sm">
+        <div class="p-6">
+            <h3 class="text-lg font-black mb-2">3D 悬浮卡片</h3>
+            <p class="text-sm">将鼠标移入卡片，体验 3D 物理偏转效果。</p>
+        </div>
+    </Card3D>
+</template>
+```
+
+## 阴影变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 标准阴影偏移 |
+| `lg` | 大阴影偏移 |
+| `xl` | 超大阴影偏移 |
+
+## 无障碍
+
+- 组件设置了 `role="region"` 和 `aria-label="3D 交互卡片"`
+- 当用户偏好 `prefers-reduced-motion: reduce` 时，自动禁用 3D 偏转效果
+- 可通过 `disabled` prop 完全禁用 3D 效果
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `maxRotation` | `number` | `15` | 最大偏转角度（度） |
+| `perspective` | `number` | `1000` | 3D 透视深度 (px) |
+| `scale` | `number` | `1.02` | Hover 时的缩放比例 |
+| `shadowOffset` | `number` | `10` | 阴影最大物理位移像素量 (px) |
+| `shadow` | `'default' \| 'lg' \| 'xl'` | `'default'` | 阴影大小变体 |
+| `disabled` | `boolean` | `false` | 禁用 3D 效果，卡片保持静态 |
+| `class` | `string` | — | 外部类覆盖 |
diff --git a/apps/docs/components/card.md b/apps/docs/components/card.md
new file mode 100644
index 0000000..3612d32
--- /dev/null
+++ b/apps/docs/components/card.md
@@ -0,0 +1,94 @@
+---
+title: Card 卡片
+description: 卡片容器组件，支持多种内边距与可组合的头部、标题、描述和底部块。
+---
+
+# Card 卡片
+
+新粗野主义风格的卡片容器，支持 6 种变体和可组合的子组件，用于结构化内容展示。
+
+## 预览
+
+<ComponentPreview>
+  <CardDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="card" />
+
+## 用法
+
+```vue
+<script setup>
+import Card from '@/components/ui/card/Card.vue'
+import CardHeader from '@/components/ui/card/CardHeader.vue'
+import CardTitle from '@/components/ui/card/CardTitle.vue'
+import CardDescription from '@/components/ui/card/CardDescription.vue'
+import CardContent from '@/components/ui/card/CardContent.vue'
+import CardFooter from '@/components/ui/card/CardFooter.vue'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <Card variant="default">
+        <CardHeader>
+            <CardTitle>Payment Method</CardTitle>
+            <CardDescription>Add a new payment method to your account.</CardDescription>
+        </CardHeader>
+        <CardContent>
+            <p>Card content goes here.</p>
+        </CardContent>
+        <CardFooter>
+            <Button variant="primary">Save</Button>
+        </CardFooter>
+    </Card>
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 标准阴影 |
+| `elevated` | 大阴影，用于强调 |
+| `flat` | 无阴影 |
+| `interactive` | 阴影加悬停上浮效果和手型光标 |
+| `primary` | Primary 色阴影和边框 |
+| `secondary` | Secondary 色阴影和边框 |
+
+## 内边距
+
+| 内边距 | 值 |
+|--------|----|
+| `none` | `p-0` |
+| `sm` | `p-3` |
+| `default` | `p-5` |
+| `lg` | `p-8` |
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Card` | 根容器，支持 variant 和 padding 属性 |
+| `CardHeader` | 头部区域，带底部内边距 |
+| `CardTitle` | 标题文本，加粗且带字间距 |
+| `CardDescription` | 柔和的描述文本 |
+| `CardContent` | 主内容区域 |
+| `CardFooter` | 底部区域，弹性布局 |
+
+## Props
+
+### Card
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'elevated' \| 'flat' \| 'interactive' \| 'primary' \| 'secondary'` | `'default'` |
+| `padding` | `'none' \| 'sm' \| 'default' \| 'lg'` | `'default'` |
+| `class` | `string` | — |
+
+### CardHeader / CardTitle / CardDescription / CardContent / CardFooter
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
diff --git a/apps/docs/components/carousel.md b/apps/docs/components/carousel.md
new file mode 100644
index 0000000..159612e
--- /dev/null
+++ b/apps/docs/components/carousel.md
@@ -0,0 +1,71 @@
+---
+title: Carousel 轮播图
+description: 基于 Embla Carousel 的高性能轮播组件，支持自动播放、循环、小圆点导航与新粗野主义视觉风格。
+---
+
+# Carousel 轮播图
+
+由 Embla Carousel 驱动的触摸友好型轮播组件，具备流畅的物理滑动惯性，适用于图片画廊、产品展示、功能介绍等场景。
+
+## 预览
+
+<ComponentPreview>
+  <CarouselDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="carousel" />
+
+## 用法
+
+```vue
+<script setup>
+import { Carousel, CarouselItem } from '@/components/ui/carousel'
+</script>
+
+<template>
+    <Carousel :loop="true" :autoplay="true" :autoplay-delay="3000" size="md">
+        <CarouselItem>
+            <div class="w-full h-full flex items-center justify-center bg-brutal-primary border-3 border-brutal">
+                幻灯片 1
+            </div>
+        </CarouselItem>
+        <CarouselItem>
+            <div class="w-full h-full flex items-center justify-center bg-brutal-secondary border-3 border-brutal">
+                幻灯片 2
+            </div>
+        </CarouselItem>
+    </Carousel>
+</template>
+```
+
+## Props
+
+### Carousel Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `loop` | `boolean` | `false` | 是否开启首尾循环滚动 |
+| `autoplay` | `boolean` | `false` | 是否自动播放 |
+| `autoplayDelay` | `number` | `3000` | 自动播放间隔（毫秒） |
+| `showArrows` | `boolean` | `true` | 是否显示左右切换箭头 |
+| `showDots` | `boolean` | `true` | 是否显示底部导航圆点 |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'full' \| 'auto'` | `'auto'` | 轮播容器高度预设 |
+| `class` | `string` | — | 根节点自定义样式类 |
+
+### CarouselItem Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `class` | `string` | — | 单张幻灯片容器自定义样式类 |
+
+## 事件
+
+Carousel 不对外暴露独立事件，所有交互通过鼠标悬停自动暂停 / 离开恢复播放实现。如需访问 Embla API，可通过 `ref` + 内部 `emblaApi` 的方式进行扩展。
+
+## 无障碍
+
+- 左右箭头按钮均带有 `aria-label`
+- 导航圆点按钮均带有 `aria-label`
+- 键盘焦点管理由 Embla 内置支持
diff --git a/apps/docs/components/chat-bubble.md b/apps/docs/components/chat-bubble.md
new file mode 100644
index 0000000..a38af96
--- /dev/null
+++ b/apps/docs/components/chat-bubble.md
@@ -0,0 +1,79 @@
+---
+title: ChatBubble 聊天气泡
+description: 聊天消息气泡组件，支持发送方/接收方/系统消息三种变体，附带头像、姓名、时间戳展示。
+---
+
+# ChatBubble 聊天气泡
+
+支持三种消息角色变体的聊天 UI 组件，粗边框气泡 + 阴影偏移让对话界面充满个性张力。
+
+## 预览
+
+<ComponentPreview>
+  <ChatBubbleDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="chat-bubble" />
+
+## 用法
+
+```vue
+<script setup>
+import { ChatBubble } from '@/components/ui/chat-bubble'
+
+const message = {
+    id: '1',
+    variant: 'received',
+    name: 'Alex',
+    content: '这个 UI 库太好用了！',
+    timestamp: '14:01',
+}
+</script>
+
+<template>
+    <div class="flex flex-col gap-3">
+        <ChatBubble :message="{ id: '1', variant: 'received', name: 'Alex', content: '你好！' }" />
+        <ChatBubble :message="{ id: '2', variant: 'sent', content: '嘿！' }" />
+        <ChatBubble :message="{ id: '3', variant: 'system', content: '对话已开始' }" />
+    </div>
+</template>
+```
+
+## 消息数据类型
+
+```ts
+interface ChatMessage {
+    id: string
+    content: string
+    variant?: 'sent' | 'received' | 'system'  // 默认 'received'
+    avatar?: string      // 头像图片 URL
+    name?: string        // 发送者姓名
+    timestamp?: string   // 时间戳文本
+}
+```
+
+## Props
+
+### ChatBubble Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `message` | `ChatMessage` | — | 消息数据对象 |
+| `showAvatar` | `boolean` | `true` | 是否显示头像区域 |
+| `class` | `string` | — | 气泡自定义样式类 |
+
+## 变体说明
+
+| 变体 | 样式 | 用途 |
+|------|------|------|
+| `received` | 左对齐，白底 | 对方消息 |
+| `sent` | 右对齐，主色背景 | 自己发送的消息 |
+| `system` | 居中，斜体，虚线边框 | 系统通知 |
+
+## 插槽
+
+| 插槽名 | 说明 |
+|--------|------|
+| `default` | 自定义气泡内容（默认显示 `message.content`） |
diff --git a/apps/docs/components/checkbox.md b/apps/docs/components/checkbox.md
new file mode 100644
index 0000000..e3f6254
--- /dev/null
+++ b/apps/docs/components/checkbox.md
@@ -0,0 +1,83 @@
+---
+title: Checkbox 复选框
+description: 复选框组件，带有厚边框和鲜明勾选图标，实现完全的键盘操作支持。
+---
+
+# Checkbox 复选框
+
+新粗野主义风格的复选框，基于 reka-ui 的 CheckboxRoot 原语构建，带勾选指示器。
+
+## 预览
+
+<ComponentPreview>
+  <CheckboxDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="checkbox" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '@/components/ui/checkbox/Checkbox.vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+    <div class="flex items-center gap-3">
+        <Checkbox v-model:checked="checked" />
+        <span class="text-sm font-bold">Accept terms</span>
+    </div>
+</template>
+```
+
+## 搭配 Label
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Checkbox from '@/components/ui/checkbox/Checkbox.vue'
+import Label from '@/components/ui/label/Label.vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+    <div class="flex items-center gap-3">
+        <Checkbox v-model:checked="checked" id="terms" />
+        <Label for="terms">Accept terms and conditions</Label>
+    </div>
+</template>
+```
+
+## 禁用状态
+
+```vue
+<script setup>
+import Checkbox from '@/components/ui/checkbox/Checkbox.vue'
+</script>
+
+<template>
+    <Checkbox disabled />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+| `disabled` | `boolean` | — |
+
+Checkbox 使用 reka-ui 的 `CheckboxRoot`，支持 `v-model:checked` 双向绑定。
+
+## 样式
+
+- **未选中**：白色背景，粗野主义边框和小阴影
+- **已选中**：Success（绿色）背景，带勾选图标
+- **禁用状态**：降低透明度，显示禁止光标
+- **聚焦状态**：使用 `--brutal-ring` 令牌显示可见聚焦环
diff --git a/apps/docs/components/code-block.md b/apps/docs/components/code-block.md
new file mode 100644
index 0000000..ff896a7
--- /dev/null
+++ b/apps/docs/components/code-block.md
@@ -0,0 +1,54 @@
+---
+title: CodeBlock 代码块
+description: 新粗野主义风格的代码块组件，集成文件名称、语言标签以及浮动复制按钮。
+---
+
+# CodeBlock 代码块
+
+专门用于展示格式化代码或脚本的卡片式容器。具有高对比度的顶栏、复制动作反馈、并支持开启行号。
+
+## 预览
+
+<ComponentPreview>
+  <CodeBlockDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="code-block" />
+
+## 用法
+
+```vue
+<script setup>
+import CodeBlock from '@/components/ui/code-block/CodeBlock.vue'
+
+const codeString = `const app = createApp(App)
+app.mount('#app')`
+</script>
+
+<template>
+    <CodeBlock
+        :code="codeString"
+        language="javascript"
+        filename="main.js"
+        show-line-numbers
+    />
+</template>
+```
+
+## 功能特性
+
+- **一键复制**：右上角无缝集成了 `CopyToClipboard` 按钮，并在复制成功后提供触感物理动画及文本反馈。
+- **行号支持**：配置 `show-line-numbers` 属性为 `true` 后，会自动在左侧展示行号列表，且行号栏伴有经典的右侧实心线条分割。
+- **插槽扩展**：如果您使用了 `Shiki`、`Prism` 等外部高亮引擎，可以使用默认插槽直接渲染预先高亮过后的 HTML 节点。
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `code` | `string` | — | 需要展示的原始代码文本 (必填) |
+| `language` | `string` | `'plaintext'` | 代码语言（仅用于顶栏的徽章标签展示） |
+| `filename` | `string` | `""` | 文件名或路径名，展示在顶栏左侧 |
+| `showLineNumbers` | `boolean` | `false` | 是否在代码左侧展示行号 |
+| `class` | `string` | `""` | 组件卡片容器的自定义样式类 |
diff --git a/apps/docs/components/code-block.tsx b/apps/docs/components/code-block.tsx
deleted file mode 100644
index a93d259..0000000
--- a/apps/docs/components/code-block.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { CopyButton } from '@/components/copy-button';
-import { cn } from '@/lib/utils';
-
-interface CodeBlockProps {
-    children: string;
-    language?: string;
-    className?: string;
-    preClassName?: string;
-    copyButtonClassName?: string;
-}
-
-export function CodeBlock({
-    children,
-    language,
-    className,
-    preClassName,
-    copyButtonClassName,
-}: CodeBlockProps) {
-    return (
-        <div className={cn('relative group', className)}>
-            <CopyButton
-                text={children}
-                className={cn(
-                    'absolute top-2 right-2 z-10 h-8 w-8 opacity-0 group-hover:opacity-100 focus:opacity-100',
-                    'shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff]',
-                    copyButtonClassName
-                )}
-            />
-            {language && (
-                <span className="absolute top-2 left-3 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase">
-                    {language}
-                </span>
-            )}
-            <pre
-                className={cn(
-                    'bg-gray-900 text-gray-100 p-4 pt-8 border-3 border-black dark:border-white shadow-brutal overflow-x-auto font-mono text-sm',
-                    preClassName
-                )}
-            >
-                <code>{children}</code>
-            </pre>
-        </div>
-    );
-}
-
-interface PackageManagerTabsProps {
-    commands: {
-        npm: string;
-        pnpm: string;
-        yarn: string;
-        bun?: string;
-    };
-}
-
-type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
-
-export function PackageManagerTabs({ commands }: PackageManagerTabsProps) {
-    const [activeManager, setActiveManager] = React.useState<PackageManager>('pnpm');
-
-    const managers: PackageManager[] = commands.bun
-        ? ['pnpm', 'npm', 'yarn', 'bun']
-        : ['pnpm', 'npm', 'yarn'];
-
-    return (
-        <div className="space-y-0">
-            <div className="flex border-3 border-b-0 border-black dark:border-white w-fit">
-                {managers.map((pm, index) => (
-                    <button
-                        key={pm}
-                        onClick={() => setActiveManager(pm)}
-                        className={cn(
-                            'px-4 py-2 text-sm font-bold transition-colors',
-                            index > 0 && 'border-l-3 border-black dark:border-white',
-                            activeManager === pm
-                                ? 'bg-[#4ECDC4] text-black'
-                                : 'bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700'
-                        )}
-                    >
-                        {pm}
-                    </button>
-                ))}
-            </div>
-
-            <div className="relative group">
-                <CopyButton
-                    text={commands[activeManager] || ''}
-                    className="absolute top-3 right-3 z-10 h-8 w-8"
-                />
-                <pre className="bg-gray-900 text-gray-100 p-4 border-3 border-black dark:border-white shadow-brutal overflow-x-auto font-mono text-sm">
-                    <code>{commands[activeManager]}</code>
-                </pre>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/components/combobox.md b/apps/docs/components/combobox.md
new file mode 100644
index 0000000..2c0489e
--- /dev/null
+++ b/apps/docs/components/combobox.md
@@ -0,0 +1,123 @@
+---
+title: Combobox 组合框
+description: 组合框（下拉搜索选择）组件，支持多选、单选，支持大数据量过滤。
+---
+
+# Combobox 组合框
+
+新粗野主义风格的可搜索选择组件。提供单选（`Combobox`）和多选（`ComboboxMulti`）两种模式。
+
+## 预览
+
+<ComponentPreview>
+  <ComboboxDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="combobox" />
+
+## 单选模式
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Combobox from '@/components/ui/combobox/Combobox.vue'
+
+const selected = ref(undefined)
+
+const options = [
+    { value: 'vue', label: 'Vue' },
+    { value: 'react', label: 'React' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'svelte', label: 'Svelte' },
+]
+</script>
+
+<template>
+    <Combobox
+        v-model="selected"
+        :options="options"
+        placeholder="Select a framework..."
+        search-placeholder="Search frameworks..."
+    />
+</template>
+```
+
+## 多选模式
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import ComboboxMulti from '@/components/ui/combobox/ComboboxMulti.vue'
+
+const selected = ref([])
+
+const options = [
+    { value: 'vue', label: 'Vue' },
+    { value: 'react', label: 'React' },
+    { value: 'angular', label: 'Angular' },
+    { value: 'svelte', label: 'Svelte' },
+]
+</script>
+
+<template>
+    <ComboboxMulti
+        v-model="selected"
+        :options="options"
+        placeholder="Select frameworks..."
+        :max-display="3"
+    />
+</template>
+```
+
+## ComboboxOption 类型
+
+```ts
+interface ComboboxOption {
+    value: string
+    label: string
+    disabled?: boolean
+}
+```
+
+## Props
+
+### Combobox（单选）
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `options` | `ComboboxOption[]` | —（必填） |
+| `modelValue` | `string \| undefined` | — |
+| `placeholder` | `string` | locale: `combobox.placeholder` |
+| `searchPlaceholder` | `string` | locale: `combobox.searchPlaceholder` |
+| `emptyText` | `string` | locale: `combobox.emptyText` |
+| `disabled` | `boolean` | `false` |
+| `class` | `string` | — |
+
+### ComboboxMulti（多选）
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `options` | `ComboboxOption[]` | —（必填） |
+| `modelValue` | `string[]` | `[]` |
+| `placeholder` | `string` | locale: `combobox.multiPlaceholder` |
+| `searchPlaceholder` | `string` | locale: `combobox.searchPlaceholder` |
+| `emptyText` | `string` | locale: `combobox.emptyText` |
+| `disabled` | `boolean` | `false` |
+| `maxDisplay` | `number` | `3` |
+| `class` | `string` | — |
+
+## 事件
+
+### Combobox
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `string \| undefined` |
+
+### ComboboxMulti
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `string[]` |
diff --git a/apps/docs/components/command.md b/apps/docs/components/command.md
new file mode 100644
index 0000000..fccf157
--- /dev/null
+++ b/apps/docs/components/command.md
@@ -0,0 +1,127 @@
+---
+title: Command 命令面板
+description: 命令面板组件，支持键盘快捷键、分组过滤和快捷指令执行。
+---
+
+# Command 命令面板
+
+新粗野主义风格的命令面板组件，用于搜索和导航。基于 cmdk，通过 reka-ui 模式构建。
+
+## 预览
+
+<ComponentPreview>
+  <CommandDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="command" />
+
+## 用法
+
+```vue
+<script setup>
+import Command from '@/components/ui/command/Command.vue'
+import CommandInput from '@/components/ui/command/CommandInput.vue'
+import CommandList from '@/components/ui/command/CommandList.vue'
+import CommandEmpty from '@/components/ui/command/CommandEmpty.vue'
+import CommandGroup from '@/components/ui/command/CommandGroup.vue'
+import CommandItem from '@/components/ui/command/CommandItem.vue'
+import CommandSeparator from '@/components/ui/command/CommandSeparator.vue'
+import CommandShortcut from '@/components/ui/command/CommandShortcut.vue'
+</script>
+
+<template>
+    <Command>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+                <CommandItem value="calendar">Calendar</CommandItem>
+                <CommandItem value="search">Search Emoji</CommandItem>
+                <CommandItem value="calculator">Calculator</CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+                <CommandItem value="profile">Profile</CommandItem>
+                <CommandItem value="billing">Billing</CommandItem>
+                <CommandItem value="settings">Settings</CommandItem>
+            </CommandGroup>
+        </CommandList>
+    </Command>
+</template>
+```
+
+## 命令对话框
+
+使用 `CommandDialog` 实现模态命令面板：
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import CommandDialog from '@/components/ui/command/CommandDialog.vue'
+import CommandInput from '@/components/ui/command/CommandInput.vue'
+import CommandList from '@/components/ui/command/CommandList.vue'
+import CommandEmpty from '@/components/ui/command/CommandEmpty.vue'
+import CommandGroup from '@/components/ui/command/CommandGroup.vue'
+import CommandItem from '@/components/ui/command/CommandItem.vue'
+
+const open = ref(false)
+</script>
+
+<template>
+    <button @click="open = true">Open Command Palette</button>
+    <CommandDialog v-model:open="open">
+        <CommandInput placeholder="Type a command..." />
+        <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Actions">
+                <CommandItem value="new">New File</CommandItem>
+                <CommandItem value="open">Open File</CommandItem>
+            </CommandGroup>
+        </CommandList>
+    </CommandDialog>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Command` | 根容器 |
+| `CommandDialog` | 模态对话框包装器 |
+| `CommandInput` | 搜索输入框 |
+| `CommandList` | 可滚动列表容器 |
+| `CommandEmpty` | 无匹配结果时显示 |
+| `CommandGroup` | 带标题的分组区域 |
+| `CommandItem` | 可选项 |
+| `CommandSeparator` | 分组之间的视觉分隔线 |
+| `CommandShortcut` | 键盘快捷键提示 |
+
+## Props
+
+### CommandInput
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `modelValue` | `string` | — |
+| `placeholder` | `string` | — |
+
+### CommandItem
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `value` | `string` | — |
+| `disabled` | `boolean` | — |
+
+### CommandGroup
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `heading` | `string` | — |
+
+### CommandDialog
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `open` | `boolean` | — |
diff --git a/apps/docs/components/component-preview.tsx b/apps/docs/components/component-preview.tsx
deleted file mode 100644
index 1887bf5..0000000
--- a/apps/docs/components/component-preview.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Card, cn } from '@/components/ui';
-
-interface ComponentPreviewProps {
-    children: React.ReactNode;
-    className?: string;
-    align?: 'center' | 'start' | 'stretch';
-}
-
-export function ComponentPreview({ children, className, align = 'center' }: ComponentPreviewProps) {
-    return (
-        <Card
-            className={cn(
-                'p-4 sm:p-8 flex min-h-[150px] sm:min-h-[200px] bg-gray-50 dark:bg-gray-900 dark:border-white overflow-x-auto',
-                align === 'center' ? 'items-center justify-center' : 'items-stretch justify-start',
-                className
-            )}
-            variant="flat"
-        >
-            <div
-                className={cn(
-                    'w-full gap-2 sm:gap-4',
-                    align === 'center'
-                        ? 'flex items-center justify-center flex-wrap'
-                        : 'flex flex-col items-stretch'
-                )}
-            >
-                {children}
-            </div>
-        </Card>
-    );
-}
diff --git a/apps/docs/components/copy-button.tsx b/apps/docs/components/copy-button.tsx
deleted file mode 100644
index dd8e04c..0000000
--- a/apps/docs/components/copy-button.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client';
-
-import type * as React from 'react';
-import { Check, Copy } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';
-
-interface CopyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    text: string;
-    iconSize?: number;
-}
-
-export function CopyButton({ text, iconSize = 16, className, ...props }: CopyButtonProps) {
-    const { copied, copy } = useCopyToClipboard();
-    const Icon = copied ? Check : Copy;
-
-    return (
-        <button
-            type="button"
-            onClick={() => copy(text)}
-            className={cn(
-                'inline-flex items-center justify-center border-2 font-bold text-xs transition-all duration-200',
-                copied
-                    ? 'border-black bg-[#4ECDC4] text-black'
-                    : 'border-white bg-gray-800 text-gray-100 hover:border-black hover:bg-[#4ECDC4] hover:text-black',
-                className
-            )}
-            title={copied ? 'Copied!' : 'Copy to clipboard'}
-            aria-label={copied ? 'Copied' : 'Copy to clipboard'}
-            {...props}
-        >
-            <Icon style={{ width: iconSize, height: iconSize }} strokeWidth={2.5} />
-        </button>
-    );
-}
diff --git a/apps/docs/components/copy-to-clipboard.md b/apps/docs/components/copy-to-clipboard.md
new file mode 100644
index 0000000..59bc45c
--- /dev/null
+++ b/apps/docs/components/copy-to-clipboard.md
@@ -0,0 +1,56 @@
+---
+title: CopyToClipboard 复制按钮
+description: 带有强烈触感和物理拟真反馈的复制按钮组件，能够一键复制指定文本。
+---
+
+# CopyToClipboard 复制按钮
+
+一键复制到剪贴板组件，当用户点击并成功复制时，按钮会在 2 秒内显示成功的物理压下状态及绿色徽标反馈。
+
+## 预览
+
+<ComponentPreview>
+  <CopyToClipboardDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="copy-to-clipboard" />
+
+## 用法
+
+```vue
+<script setup>
+import CopyToClipboard from '@/components/ui/copy-to-clipboard/CopyToClipboard.vue'
+</script>
+
+<template>
+    <CopyToClipboard text="pnpm install brutx-ui-vue" />
+</template>
+```
+
+## 自定义展示插槽
+
+组件提供了默认插槽，它暴露了 `copied` 状态（是否刚复制成功），支持您自定义按钮的各种显示形式。
+
+```vue
+<script setup>
+import CopyToClipboard from '@/components/ui/copy-to-clipboard/CopyToClipboard.vue'
+</script>
+
+<template>
+    <CopyToClipboard text="Custom Text">
+        <template #default="{ copied }">
+            <span>{{ copied ? '成功啦！' : '点此复制' }}</span>
+        </template>
+    </CopyToClipboard>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `text` | `string` | — | 需要拷贝到剪贴板的文本 (必填) |
+| `duration` | `number` | `2000` | 复制成功反馈（"已复制"状态）的保持毫秒数 |
+| `class` | `string` | `""` | 按钮容器自定义样式类 |
diff --git a/apps/docs/components/counter.md b/apps/docs/components/counter.md
new file mode 100644
index 0000000..15684f7
--- /dev/null
+++ b/apps/docs/components/counter.md
@@ -0,0 +1,70 @@
+---
+title: Counter 数字滚动
+description: 基于 requestAnimationFrame 的数字滚动动画组件，支持缓动函数、前后缀、千位分隔符，适合展示统计数字。
+---
+
+# Counter 数字滚动
+
+纯原生 `requestAnimationFrame` 驱动的数字缓动动画，无第三方动画库依赖，配合 Hero 区块和 Dashboard 统计展示效果极佳。
+
+## 预览
+
+<ComponentPreview>
+  <CounterDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="counter" />
+
+## 用法
+
+```vue
+<script setup>
+import { Counter } from '@/components/ui/counter'
+import { ref } from 'vue'
+
+const counterRef = ref()
+</script>
+
+<template>
+    <!-- 基础用法 -->
+    <Counter :to="12800" suffix="+" size="lg" />
+
+    <!-- 小数点 -->
+    <Counter :to="99.9" :decimals="1" suffix="%" />
+
+    <!-- 手动控制 -->
+    <Counter ref="counterRef" :to="500" :auto-start="false" />
+    <button @click="counterRef.start()">开始</button>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `to` | `number` | — | 目标数值（必填） |
+| `from` | `number` | `0` | 起始数值 |
+| `duration` | `number` | `2000` | 动画时长（毫秒） |
+| `decimals` | `number` | `0` | 小数位数 |
+| `prefix` | `string` | `''` | 数字前缀（如 `¥` `$`） |
+| `suffix` | `string` | `''` | 数字后缀（如 `+` `%`） |
+| `separator` | `string` | `','` | 千位分隔符，传空字符串可禁用 |
+| `easing` | `'linear' \| 'ease-out' \| 'ease-in-out'` | `'ease-out'` | 缓动函数 |
+| `autoStart` | `boolean` | `true` | 是否挂载后自动播放 |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | 字号预设 |
+| `class` | `string` | — | 自定义样式类 |
+
+## 事件
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `complete` | — | 动画播放完毕时触发 |
+
+## 暴露方法（`defineExpose`）
+
+| 方法 | 说明 |
+|------|------|
+| `start()` | 从 `from` 重新开始播放动画 |
+| `stop()` | 立即停止动画 |
diff --git a/apps/docs/components/dashboard-stats.md b/apps/docs/components/dashboard-stats.md
new file mode 100644
index 0000000..5726249
--- /dev/null
+++ b/apps/docs/components/dashboard-stats.md
@@ -0,0 +1,104 @@
+---
+title: Dashboard Stats 仪表盘统计
+description: 仪表盘统计卡片，以大号数字、对比标签展示核心业务指标数据。
+---
+
+# Dashboard Stats 仪表盘统计
+
+新粗野主义风格的仪表盘统计块，用于展示关键指标，支持趋势、图标和进度条。
+
+## 预览
+
+<ComponentPreview>
+  <DashboardStatsDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="dashboard-stats" />
+
+## 用法
+
+```vue
+<script setup>
+import DashboardStats from '@/components/ui/dashboard-stats/DashboardStats.vue'
+import { DollarSign, Users, Activity } from 'lucide-vue-next'
+
+const stats = [
+    {
+        title: 'Revenue',
+        value: '$45,231',
+        description: 'Total revenue this month',
+        change: '+20.1%',
+        trend: 'up',
+        icon: DollarSign,
+        accentColor: 'primary',
+        progress: 75,
+    },
+    {
+        title: 'Users',
+        value: '+2,350',
+        description: 'New users this month',
+        change: '+12.5%',
+        trend: 'up',
+        icon: Users,
+        accentColor: 'secondary',
+        progress: 60,
+    },
+    {
+        title: 'Bounce Rate',
+        value: '12.3%',
+        description: 'Visitor bounce rate',
+        change: '-2.1%',
+        trend: 'down',
+        icon: Activity,
+        accentColor: 'destructive',
+    },
+]
+</script>
+
+<template>
+    <DashboardStats
+        title="Overview Performance"
+        subtitle="Key metrics for this month"
+        :stats="stats"
+    />
+</template>
+```
+
+## StatItem 类型
+
+```ts
+interface StatItem {
+    title: string
+    value: string
+    description: string
+    change: string
+    trend: 'up' | 'down' | 'neutral'
+    icon: Component
+    accentColor?: 'primary' | 'secondary' | 'accent' | 'destructive' | 'success' | 'info'
+    progress?: number
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `stats` | `StatItem[]` | `[]` |
+| `title` | `string` | `'Overview Performance'` |
+| `subtitle` | `string` | — |
+| `class` | `string` | — |
+
+## 强调色
+
+每个统计项的 `accentColor` 属性控制图标背景和进度条颜色：
+
+| 值 | 颜色 |
+|----|------|
+| `primary` | 珊瑚色（`--brutal-primary`） |
+| `secondary` | 薄荷青（`--brutal-secondary`） |
+| `accent` | 黄色（`--brutal-accent`） |
+| `destructive` | 红色（`--brutal-destructive`） |
+| `success` | 绿色（`--brutal-success`） |
+| `info` | 蓝色（`--brutal-info`） |
diff --git a/apps/docs/components/dialog.md b/apps/docs/components/dialog.md
new file mode 100644
index 0000000..5a55ff2
--- /dev/null
+++ b/apps/docs/components/dialog.md
@@ -0,0 +1,85 @@
+---
+title: Dialog 对话框
+description: 模态对话框，支持焦点锁定、无障碍角色标记，硬边缘遮罩设计。
+---
+
+# Dialog 对话框
+
+新粗野主义风格的模态对话框，基于 reka-ui 的 Dialog 原语构建。支持遮罩层、关闭按钮和可组合的子组件。
+
+## 预览
+
+<ComponentPreview>
+  <DialogDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="dialog" />
+
+## 用法
+
+```vue
+<script setup>
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@/components/ui'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <Dialog>
+        <DialogTrigger as-child>
+            <Button variant="primary">Open Dialog</Button>
+        </DialogTrigger>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>Edit Profile</DialogTitle>
+                <DialogDescription>
+                    Make changes to your profile here. Click save when you're done.
+                </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+                <DialogClose as-child>
+                    <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button variant="primary">Save</Button>
+            </DialogFooter>
+        </DialogContent>
+    </Dialog>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Dialog` | 根组件（从 reka-ui 的 `DialogRoot` 重新导出） |
+| `DialogTrigger` | 打开对话框的按钮 |
+| `DialogContent` | 带遮罩层的对话框内容面板 |
+| `DialogHeader` | 头部容器 |
+| `DialogFooter` | 底部容器，弹性布局 |
+| `DialogTitle` | 对话框标题 |
+| `DialogDescription` | 对话框描述文本 |
+| `DialogClose` | 关闭按钮 |
+| `DialogOverlay` | 背景遮罩层 |
+
+## Props
+
+### DialogContent
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `showCloseButton` | `boolean` | `true` |
+| `class` | `string` | — |
+
+### DialogHeader / DialogFooter / DialogTitle / DialogDescription
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+
+## 无障碍
+
+- 对话框打开时，焦点被限制在对话框内
+- 按 `Escape` 关闭对话框
+- 点击遮罩层关闭对话框
+- 关闭按钮包含屏幕阅读器文本
diff --git a/apps/docs/components/dropdown-menu.md b/apps/docs/components/dropdown-menu.md
new file mode 100644
index 0000000..6d8f955
--- /dev/null
+++ b/apps/docs/components/dropdown-menu.md
@@ -0,0 +1,144 @@
+---
+title: Dropdown Menu 下拉菜单
+description: 下拉菜单组件，支持嵌套子菜单、复选菜单项、单选菜单项。
+---
+
+# Dropdown Menu 下拉菜单
+
+新粗野主义风格的下拉菜单，基于 reka-ui 的 DropdownMenu 原语构建，支持菜单项、复选框、单选组、子菜单和快捷键。
+
+## 预览
+
+<ComponentPreview>
+  <DropdownMenuDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="dropdown-menu" />
+
+## 用法
+
+```vue
+<script setup>
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuLabel,
+    DropdownMenuShortcut,
+} from '@/components/ui'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <Button variant="outline">Open Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+                Profile
+                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+                Settings
+                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Log out</DropdownMenuItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+```
+
+## 复选框项
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuCheckboxItem,
+} from '@/components/ui'
+import Button from '@/components/ui/button/Button.vue'
+
+const showStatusBar = ref(true)
+const showActivityBar = ref(false)
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <Button variant="outline">View</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+            <DropdownMenuCheckboxItem v-model:checked="showStatusBar">
+                Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem v-model:checked="showActivityBar">
+                Activity Bar
+            </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+```
+
+## 单选项
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuRadioItem,
+    DropdownMenuRadioGroup,
+} from '@/components/ui'
+import Button from '@/components/ui/button/Button.vue'
+
+const position = ref('bottom')
+</script>
+
+<template>
+    <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+            <Button variant="outline">Position</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+            <DropdownMenuRadioGroup v-model="position">
+                <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+    </DropdownMenu>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `DropdownMenu` | 根组件 |
+| `DropdownMenuTrigger` | 打开菜单的按钮 |
+| `DropdownMenuContent` | 下拉内容面板 |
+| `DropdownMenuItem` | 标准菜单项 |
+| `DropdownMenuCheckboxItem` | 复选框菜单项 |
+| `DropdownMenuRadioItem` | 单选菜单项 |
+| `DropdownMenuRadioGroup` | 单选项分组 |
+| `DropdownMenuLabel` | 区域标签 |
+| `DropdownMenuSeparator` | 视觉分隔线 |
+| `DropdownMenuShortcut` | 键盘快捷键提示 |
+| `DropdownMenuSub` | 子菜单容器 |
+| `DropdownMenuSubTrigger` | 子菜单触发器 |
+| `DropdownMenuSubContent` | 子菜单内容 |
+| `DropdownMenuGroup` | 菜单项分组 |
diff --git a/apps/docs/components/form.md b/apps/docs/components/form.md
new file mode 100644
index 0000000..83f9116
--- /dev/null
+++ b/apps/docs/components/form.md
@@ -0,0 +1,136 @@
+---
+title: Form 表单
+description: 完整的表单字段包装器，集成了 Vee-Validate 与 Zod 模式校验支持。
+---
+
+# Form 表单
+
+新粗野主义风格的表单系统，基于 vee-validate 构建，提供可组合的子组件用于结构化表单布局。
+
+## 预览
+
+<ComponentPreview>
+  <FormDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="form" />
+
+**需要额外安装依赖：**
+
+```bash
+pnpm add vee-validate @vee-validate/zod zod
+```
+
+## 用法
+
+```vue
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import Form from '@/components/ui/form/Form.vue'
+import FormField from '@/components/ui/form/FormField.vue'
+import FormItem from '@/components/ui/form/FormItem.vue'
+import FormLabel from '@/components/ui/form/FormLabel.vue'
+import FormControl from '@/components/ui/form/FormControl.vue'
+import FormDescription from '@/components/ui/form/FormDescription.vue'
+import FormMessage from '@/components/ui/form/FormMessage.vue'
+import Input from '@/components/ui/input/Input.vue'
+import SubmitButton from '@/components/ui/submit-button/SubmitButton.vue'
+
+const schema = toTypedSchema(z.object({
+    username: z.string().min(2).max(50),
+    email: z.string().email(),
+}))
+
+function onSubmit(values) {
+    console.log('Form submitted:', values)
+}
+</script>
+
+<template>
+    <Form :validation-schema="schema" @submit="onSubmit">
+        <FormField name="username" v-slot="{ componentField }">
+            <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                    <Input v-bind="componentField" placeholder="Enter username" />
+                </FormControl>
+                <FormDescription>This is your public display name.</FormDescription>
+                <FormMessage />
+            </FormItem>
+        </FormField>
+
+        <FormField name="email" v-slot="{ componentField }">
+            <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                    <Input v-bind="componentField" type="email" placeholder="you@example.com" />
+                </FormControl>
+                <FormMessage />
+            </FormItem>
+        </FormField>
+
+        <SubmitButton variant="primary">Submit</SubmitButton>
+    </Form>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Form` | 根表单组件，集成 vee-validate |
+| `FormField` | 字段包装器，连接表单状态，提供 `value` 和 `setValue` |
+| `FormItem` | 标签、控件和消息的布局容器 |
+| `FormLabel` | 支持错误状态的标签，注入字段上下文 |
+| `FormControl` | 输入控件的包装器，注入字段上下文 |
+| `FormDescription` | 输入框下方的辅助文本 |
+| `FormMessage` | 验证错误消息，注入字段上下文 |
+
+## 字段上下文
+
+`FormField` 通过 `provide/inject` 向子组件提供 `FormFieldContext`：
+
+```ts
+interface FormFieldContext {
+    name: string
+    error: Ref<string | undefined>
+    value: Ref<unknown>        // 字段当前值
+    setValue: (value: unknown) => void  // 设置字段值
+}
+```
+
+`FormControl`、`FormLabel`、`FormMessage` 均注入此上下文，可直接访问字段值和错误状态。
+
+## Props
+
+### Form
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+| `initialValues` | `Record<string, unknown>` | — |
+| `validationSchema` | `unknown` | — |
+
+### FormField
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `name` | `string` | —（必填） |
+
+### FormLabel
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'error' \| 'success' \| 'muted'` | `'default'` |
+| `class` | `string` | — |
+
+## 事件
+
+### Form
+
+| 事件 | 载荷 |
+|------|------|
+| `submit` | `Record<string, unknown>` |
diff --git a/apps/docs/components/glitch-text.md b/apps/docs/components/glitch-text.md
new file mode 100644
index 0000000..b488788
--- /dev/null
+++ b/apps/docs/components/glitch-text.md
@@ -0,0 +1,75 @@
+---
+title: GlitchText 故障撕裂文本
+description: CSS clip-path 驱动的故障撕裂文本效果，支持多种触发模式和速度变体。
+---
+
+# GlitchText 故障撕裂文本
+
+新粗野主义风格的故障文本效果，利用 CSS `clip-path` 对伪元素进行横向分片，在触发时产生高频左右错位、色差（RGB 通道分离）和瞬间撕裂动效。
+
+## 预览
+
+<ComponentPreview>
+  <GlitchTextDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="glitch-text" />
+
+## 用法
+
+```vue
+<script setup>
+import GlitchText from '@/components/ui/glitch-text/GlitchText.vue'
+</script>
+
+<template>
+    <GlitchText text="BRUTAL GLITCH" class="text-4xl" />
+</template>
+```
+
+## 触发模式
+
+| 模式 | 说明 |
+|------|------|
+| `hover` | 鼠标悬停时触发动画，离开后停止（默认） |
+| `click` | 点击切换动画开/关 |
+| `autoplay` | 组件挂载后自动循环播放，hover 时暂停 |
+| `none` | 不自动触发，通过 `expose({ play(), stop() })` 供外部程序化控制 |
+
+## 速度变体
+
+| 速度 | CSS 变量值 |
+|------|-----------|
+| `slow` | `--glitch-duration: 800ms` |
+| `medium` | `--glitch-duration: 300ms`（默认） |
+| `fast` | `--glitch-duration: 100ms` |
+
+## 无障碍
+
+- 组件设置了 `role="status"` 和 `aria-live="polite"`
+- 当用户偏好 `prefers-reduced-motion: reduce` 时，CSS 媒体查询自动禁用所有故障动画
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `text` | `string` | `''` | 要显示的文本内容（与默认插槽二选一） |
+| `trigger` | `'hover' \| 'click' \| 'autoplay' \| 'none'` | `'hover'` | 动画触发时机 |
+| `interval` | `number` | `3000` | 自动播放时的周期时间 (ms) |
+| `speed` | `'slow' \| 'medium' \| 'fast'` | `'medium'` | 撕裂抖动的频率和速度 |
+| `class` | `string` | — | 外部类覆盖 |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `default` | 文本内容（优先于 `text` prop，允许内联样式化部分文本） |
+
+## 暴露方法
+
+| 方法 | 说明 |
+|------|------|
+| `play()` | 开始故障动画 |
+| `stop()` | 停止故障动画 |
diff --git a/apps/docs/components/hardcore-input.md b/apps/docs/components/hardcore-input.md
new file mode 100644
index 0000000..a030bc5
--- /dev/null
+++ b/apps/docs/components/hardcore-input.md
@@ -0,0 +1,125 @@
+---
+title: HardcoreInput 硬核输入框
+description: 带 8-bit 复古音效、表情反馈和物理震动的表单校验输入框，集成 Form 系统。
+---
+
+# HardcoreInput 硬核输入框
+
+输入框校验器的终极形态。通过 Web Audio API 动态合成 8-bit 复古电子音效（零音频依赖），同时在校验结果变化时触发 Neobrutalist 表情弹跳与物理震动。
+
+## 预览
+
+<ComponentPreview>
+  <HardcoreInputDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="hardcore-input" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import HardcoreInput from '@/components/ui/hardcore-input/HardcoreInput.vue'
+
+const value = ref('')
+
+const minLength = (val) => val.length >= 5 || '至少需要 5 个字符'
+const hasNumber = (val) => /\d/.test(val) || '必须包含数字'
+</script>
+
+<template>
+    <HardcoreInput
+        v-model="value"
+        placeholder="输入内容..."
+        :rules="[minLength, hasNumber]"
+        validate-on="blur"
+    />
+</template>
+```
+
+## 校验触发时机
+
+| 模式 | 说明 |
+|------|------|
+| `blur` | 失焦时校验（默认） |
+| `input` | 每次输入时实时校验 |
+| `submit` | 外部调用 `validate()` 时校验 |
+
+## 音效系统
+
+通过 `useAudioEngine` composable 使用 Web Audio API 合成三种音效：
+
+| 音效 | 波形 | 说明 |
+|------|------|------|
+| `type` | Triangle | 打字音效，带 50ms 节流 |
+| `success` | Sine | 校验通过，频率上升 |
+| `fail` | Square | 校验失败，频率下降 |
+
+可通过 `sound` prop 禁用音效。
+
+## 视觉反馈
+
+- **成功**：输入框边框变为 `--brutal-success` 色，右侧显示酷表情 SVG
+- **错误**：输入框边框变为 `--brutal-destructive` 色，右侧显示怒气表情 SVG，输入框产生抖动动画
+- **默认**：无额外反馈
+
+## Form 集成
+
+HardcoreInput 可与 Form 系统集成，当存在于 `FormField` 中时自动同步校验状态：
+
+```vue
+<Form v-slot="{ handleSubmit }">
+    <FormField v-slot="{ componentField }" name="username">
+        <FormItem>
+            <FormLabel>用户名</FormLabel>
+            <HardcoreInput v-bind="componentField" :rules="[minLength]" />
+            <FormMessage />
+        </FormItem>
+    </FormField>
+</Form>
+```
+
+## 无障碍
+
+- 输入框设置了 `:aria-invalid` 和 `:aria-describedby`
+- 错误消息设置了 `aria-live="polite"`
+- 当用户偏好 `prefers-reduced-motion: reduce` 时，抖动和弹跳动画被禁用
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `modelValue` | `string` | `''` | v-model 绑定值 |
+| `sound` | `boolean` | `true` | 是否启用 8-bit 复古电子音效 |
+| `rules` | `Array<(val: string) => boolean \| string>` | `[]` | 校验规则函数列表 |
+| `shakeOnError` | `boolean` | `true` | 输入错误时是否触发输入框抖动 |
+| `type` | `string` | `'text'` | HTML input type 属性 |
+| `placeholder` | `string` | `''` | 占位文本 |
+| `disabled` | `boolean` | `false` | 是否禁用 |
+| `readonly` | `boolean` | `false` | 是否只读 |
+| `validateOn` | `'input' \| 'blur' \| 'submit'` | `'blur'` | 校验触发时机 |
+| `class` | `string` | — | 外部类覆盖 |
+
+## 事件
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `@update:modelValue` | `(value: string)` | v-model 更新事件 |
+| `@validationChange` | `(state, message?)` | 校验状态变化事件 |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `default` | 输入框右侧附加内容（如图标、表情区域覆盖） |
+
+## 暴露属性/方法
+
+| 名称 | 说明 |
+|------|------|
+| `validate()` | 主动触发校验 |
+| `validationState` | 当前校验状态 |
+| `errorMessage` | 当前错误消息 |
diff --git a/apps/docs/components/index.md b/apps/docs/components/index.md
new file mode 100644
index 0000000..53d48e0
--- /dev/null
+++ b/apps/docs/components/index.md
@@ -0,0 +1,85 @@
+# 组件
+
+BrutxUI 提供了一套全面的新粗野主义风格 Vue 3 组件。所有组件均以无障碍性、类型安全和可定制性为设计理念。
+
+## 布局与结构
+
+| 组件 | 说明 |
+|------|------|
+| [Card](/components/card) | 容器组件，6 种变体和可组合子组件 |
+| [Card3D](/components/card-3d) | 3D 物理悬浮卡片，鼠标悬停偏转与反向阴影 |
+| [Separator](/components/separator) | 内容区域之间的视觉分隔线 |
+| [Scroll Area](/components/scroll-area) | 带 ScrollBar 的自定义滚动区域 |
+
+## 表单与输入
+
+| 组件 | 说明 |
+|------|------|
+| [Button](/components/button) | 操作按钮，9 种变体、5 种尺寸、加载状态 |
+| [Input](/components/input) | 文本输入框，支持变体和尺寸 |
+| [Textarea](/components/textarea) | 多行文本输入框，支持尺寸 |
+| [Checkbox](/components/checkbox) | 复选框，通过 v-model 绑定选中状态 |
+| [Switch](/components/switch) | 切换开关，通过 v-model:checked 绑定 |
+| [Radio Group](/components/radio-group) | 单选按钮组 |
+| [Select](/components/select) | 下拉选择框，支持子组件 |
+| [Slider](/components/slider) | 滑块，支持 v-model |
+| [Label](/components/label) | 表单字段标签 |
+| [Form](/components/form) | 表单系统，集成 vee-validate |
+| [GlitchText](/components/glitch-text) | 故障撕裂文本，CSS clip-path 驱动 |
+| [HardcoreInput](/components/hardcore-input) | 硬核输入框，8-bit 音效 + 表情反馈 + 物理震动 |
+| [Submit Button](/components/submit-button) | 提交按钮，支持加载/等待状态 |
+| [Combobox](/components/combobox) | 可搜索的单选/多选 |
+| [Calendar](/components/calendar) | 日期选择器，支持范围模式 |
+
+## 反馈与状态
+
+| 组件 | 说明 |
+|------|------|
+| [Alert](/components/alert) | 状态消息，7 种变体 |
+| [Alert Dialog](/components/alert-dialog) | 确认对话框，支持操作/取消 |
+| [Badge](/components/badge) | 行内状态标签，7 种变体 |
+| [Progress](/components/progress) | 进度条指示器 |
+| [Spinner](/components/spinner) | 加载旋转器，4 种变体 |
+| [Skeleton](/components/skeleton) | 内容占位符，支持子组件 |
+| [Toast](/components/toast) | 通知提示，搭配 useToast 组合式函数 |
+
+## 弹出层与浮层
+
+| 组件 | 说明 |
+|------|------|
+| [Dialog](/components/dialog) | 模态对话框，支持 header/footer/title/description |
+| [Sheet](/components/sheet) | 侧边面板，4 个方向变体 |
+| [Popover](/components/popover) | 浮动内容面板 |
+| [Tooltip](/components/tooltip) | 悬停工具提示 |
+| [Dropdown Menu](/components/dropdown-menu) | 右键菜单，支持子菜单项 |
+| [Command](/components/command) | 命令面板，支持搜索 |
+
+## 导航
+
+| 组件 | 说明 |
+|------|------|
+| [Tabs](/components/tabs) | 标签页导航，支持 list/trigger/content |
+| [Pagination](/components/pagination) | 分页导航，支持计算算法 |
+| [Toggle](/components/toggle) | 可按下的切换按钮 |
+| [Toggle Group](/components/toggle-group) | 切换按钮组，支持多选 |
+
+## 数据展示
+
+| 组件 | 说明 |
+|------|------|
+| [Avatar](/components/avatar) | 用户头像，支持 image/fallback、尺寸、形状 |
+| [Table](/components/table) | 数据表格，8 个子组件 |
+
+## 交互与可视化
+
+| 组件 | 说明 |
+|------|------|
+| [ScratchCard](/components/scratch-card) | 刮刮卡，Canvas 覆盖层擦除 |
+| [SketchyChart](/components/sketchy-chart) | 手绘感折线/柱状图表，SVG + 分形噪声 |
+
+## 区块
+
+| 组件 | 说明 |
+|------|------|
+| [Dashboard Stats](/components/dashboard-stats) | 仪表盘统计区块 |
+| [SaaS Pricing](/components/saas-pricing) | 定价表，支持计费切换 |
diff --git a/apps/docs/components/input.md b/apps/docs/components/input.md
new file mode 100644
index 0000000..d5ea449
--- /dev/null
+++ b/apps/docs/components/input.md
@@ -0,0 +1,98 @@
+---
+title: Input 输入框
+description: 单行文本输入框，带新粗野主义高亮外边框和自定义占位符。
+---
+
+# Input 输入框
+
+新粗野主义风格的文本输入框，支持变体、尺寸和 v-model 双向绑定。
+
+## 预览
+
+<ComponentPreview>
+  <InputDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="input" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Input from '@/components/ui/input/Input.vue'
+
+const value = ref('')
+</script>
+
+<template>
+    <Input v-model="value" placeholder="Enter your name..." />
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 标准边框 |
+| `error` | 错误边框，聚焦时使用 Primary 阴影 |
+| `success` | 成功边框，聚焦时使用 Secondary 阴影 |
+
+## 尺寸
+
+| 尺寸 | 高度 | 内边距 | 字体大小 |
+|------|------|--------|----------|
+| `sm` | `h-9` | `px-3 py-1` | `text-sm` |
+| `default` | `h-11` | `px-4 py-2` | `text-base` |
+| `lg` | `h-14` | `px-5 py-3` | `text-lg` |
+
+## 搭配 Label
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Input from '@/components/ui/input/Input.vue'
+import Label from '@/components/ui/label/Label.vue'
+
+const email = ref('')
+</script>
+
+<template>
+    <div class="space-y-2">
+        <Label for="email">Email</Label>
+        <Input id="email" v-model="email" type="email" placeholder="you@example.com" />
+    </div>
+</template>
+```
+
+## 禁用状态
+
+```vue
+<script setup>
+import Input from '@/components/ui/input/Input.vue'
+</script>
+
+<template>
+    <Input disabled placeholder="Disabled input" />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `type` | `string` | `'text'` |
+| `modelValue` | `string \| number` | — |
+| `variant` | `'default' \| 'error' \| 'success'` | `'default'` |
+| `inputSize` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `disabled` | `boolean` | `false` |
+| `placeholder` | `string` | — |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `string \| number` |
diff --git a/apps/docs/components/installation-tabs.tsx b/apps/docs/components/installation-tabs.tsx
deleted file mode 100644
index 78734bd..0000000
--- a/apps/docs/components/installation-tabs.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { CodeBlock } from '@/components/code-block';
-import { cn } from '@/components/ui';
-import { componentDependencies, componentImports } from '@/config/component-installation';
-import { SITE_CONFIG } from '@/config/constants';
-import { Github } from 'lucide-react';
-
-interface InstallationTabsProps {
-    componentName: string;
-    dependencies?: string[];
-    imports?: string[];
-}
-
-type TabType = 'cli' | 'manual';
-type PackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun';
-
-export function InstallationTabs({
-    componentName,
-    dependencies: customDependencies,
-    imports: customImports,
-}: InstallationTabsProps) {
-    const [activeTab, setActiveTab] = React.useState<TabType>('cli');
-    const [packageManager, setPackageManager] = React.useState<PackageManager>('pnpm');
-
-    const cliCommands: Record<PackageManager, string> = {
-        pnpm: `pnpm dlx brutx@latest add ${componentName}`,
-        npm: `npx brutx@latest add ${componentName}`,
-        yarn: `yarn dlx brutx@latest add ${componentName}`,
-        bun: `bunx brutx@latest add ${componentName}`,
-    };
-
-    const deps = customDependencies || componentDependencies[componentName] || [];
-    const allDeps = ['clsx', 'tailwind-merge', ...deps];
-
-    const dependencyCommands: Record<PackageManager, string> = {
-        pnpm: `pnpm add ${allDeps.join(' ')}`,
-        npm: `npm install ${allDeps.join(' ')}`,
-        yarn: `yarn add ${allDeps.join(' ')}`,
-        bun: `bun add ${allDeps.join(' ')}`,
-    };
-
-    const imports = customImports ||
-        componentImports[componentName] || [
-            componentName
-                .split('-')
-                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                .join(''),
-        ];
-
-    const importStatement =
-        imports.length > 3
-            ? `import {\n  ${imports.join(',\n  ')},\n} from "@/components/ui/${componentName}"`
-            : `import { ${imports.join(', ')} } from "@/components/ui/${componentName}"`;
-
-    return (
-        <div className="space-y-4">
-            <div className="flex border-3 border-black dark:border-white w-fit">
-                <button
-                    onClick={() => setActiveTab('cli')}
-                    className={cn(
-                        'px-4 py-2 font-bold transition-colors',
-                        activeTab === 'cli'
-                            ? 'bg-[#FF6B6B] text-black'
-                            : 'bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800'
-                    )}
-                >
-                    CLI
-                </button>
-                <button
-                    onClick={() => setActiveTab('manual')}
-                    className={cn(
-                        'px-4 py-2 font-bold transition-colors border-l-3 border-black dark:border-white',
-                        activeTab === 'manual'
-                            ? 'bg-[#FF6B6B] text-black'
-                            : 'bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800'
-                    )}
-                >
-                    Manual
-                </button>
-            </div>
-
-            <div className="flex border-3 border-black dark:border-white w-fit">
-                {(['pnpm', 'npm', 'yarn', 'bun'] as PackageManager[]).map((pm, index) => (
-                    <button
-                        key={pm}
-                        onClick={() => setPackageManager(pm)}
-                        className={cn(
-                            'px-3 py-1.5 text-sm font-bold transition-colors',
-                            index > 0 && 'border-l-3 border-black dark:border-white',
-                            packageManager === pm
-                                ? 'bg-[#4ECDC4] text-black'
-                                : 'bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800'
-                        )}
-                    >
-                        {pm}
-                    </button>
-                ))}
-            </div>
-
-            {activeTab === 'cli' ? (
-                <div className="space-y-4">
-                    <CodeBlock preClassName="pr-12">{cliCommands[packageManager]}</CodeBlock>
-                </div>
-            ) : (
-                <div className="space-y-4">
-                    <div>
-                        <p className="text-sm font-bold mb-2 text-gray-600 dark:text-gray-400">
-                            1. Install dependencies:
-                        </p>
-                        <CodeBlock preClassName="pr-12">{dependencyCommands[packageManager]}</CodeBlock>
-                    </div>
-
-                    <div>
-                        <p className="text-sm font-bold mb-2 text-gray-600 dark:text-gray-400">
-                            2. Copy the component code from GitHub:
-                        </p>
-                        <a
-                            href={`${SITE_CONFIG.github.componentBlobUrl}/${componentName}.tsx`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-2 px-4 py-2 font-bold border-3 border-black dark:border-white bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                        >
-                            <Github className="h-5 w-5 stroke-[2.5]" />
-                            View {componentName}.tsx on GitHub
-                        </a>
-                    </div>
-
-                    <div>
-                        <p className="text-sm font-bold mb-2 text-gray-600 dark:text-gray-400">
-                            3. Save to{' '}
-                            <code className="bg-gray-200 dark:bg-gray-700 px-1 rounded">
-                                components/ui/{componentName}.tsx
-                            </code>
-                        </p>
-                    </div>
-
-                    <div>
-                        <p className="text-sm font-bold mb-2 text-gray-600 dark:text-gray-400">
-                            4. Import and use:
-                        </p>
-                        <CodeBlock preClassName="pr-12">{importStatement}</CodeBlock>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/apps/docs/components/kanban-board.md b/apps/docs/components/kanban-board.md
new file mode 100644
index 0000000..2ea4699
--- /dev/null
+++ b/apps/docs/components/kanban-board.md
@@ -0,0 +1,92 @@
+---
+title: KanbanBoard 看板
+description: 基于原生 HTML5 拖拽 API 的看板组件，支持多列卡片拖拽移动、标签、颜色标记，适合任务管理场景。
+---
+
+# KanbanBoard 看板
+
+轻量级、无外部拖拽库依赖的看板组件，粗边框列 + 硬朗阴影卡片尽显新粗野主义张力。
+
+## 预览
+
+<ComponentPreview>
+  <KanbanBoardDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="kanban" />
+
+## 用法
+
+```vue
+<script setup>
+import { KanbanBoard } from '@/components/ui/kanban'
+import type { KanbanColumn } from '@/components/ui/kanban'
+import { ref } from 'vue'
+
+const columns = ref<KanbanColumn[]>([
+    {
+        id: 'todo',
+        title: '待办',
+        color: '#FFE66D',
+        cards: [
+            { id: 'c1', title: '需求分析', tags: ['研发'] },
+        ],
+    },
+    {
+        id: 'done',
+        title: '已完成',
+        cards: [],
+    },
+])
+</script>
+
+<template>
+    <KanbanBoard
+        v-model="columns"
+        @card-move="(id, from, to) => console.log(id, from, to)"
+    />
+</template>
+```
+
+## 数据类型
+
+```ts
+interface KanbanCard {
+    id: string
+    title: string
+    description?: string
+    tags?: string[]
+    color?: string
+}
+
+interface KanbanColumn {
+    id: string
+    title: string
+    color?: string
+    cards: KanbanCard[]
+}
+```
+
+## Props
+
+### KanbanBoard Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `modelValue` | `KanbanColumn[]` | — | 看板数据（v-model） |
+| `class` | `string` | — | 根节点自定义样式类 |
+
+## 事件
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `update:modelValue` | `KanbanColumn[]` | 列数据更新（卡片移动后） |
+| `card-move` | `(cardId: string, fromColumn: string, toColumn: string)` | 卡片跨列移动完成时触发 |
+
+## 插槽
+
+| 插槽名 | 说明 |
+|--------|------|
+| `add-{columnId}` | 在指定列底部插入自定义内容（如「添加卡片」按钮） |
diff --git a/apps/docs/components/kbd.md b/apps/docs/components/kbd.md
new file mode 100644
index 0000000..edc80a1
--- /dev/null
+++ b/apps/docs/components/kbd.md
@@ -0,0 +1,69 @@
+---
+title: Kbd 键盘按键
+description: 键盘按键样式组件，用于展示快捷键提示，配合 Command 组件使用效果极佳。
+---
+
+# Kbd 键盘按键
+
+语义化的 `<kbd>` 封装组件，通过新粗野主义样式将快捷键从普通文本中视觉剥离，让文档和命令提示一目了然。
+
+## 预览
+
+<ComponentPreview>
+  <KbdDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="kbd" />
+
+## 用法
+
+```vue
+<script setup>
+import { Kbd } from '@/components/ui/kbd'
+</script>
+
+<template>
+    <!-- 单键 -->
+    <Kbd>Enter</Kbd>
+
+    <!-- 组合键 -->
+    <div class="flex items-center gap-1">
+        <Kbd>⌘</Kbd>
+        <span>+</span>
+        <Kbd>K</Kbd>
+    </div>
+
+    <!-- 尺寸 -->
+    <Kbd size="sm">Esc</Kbd>
+    <Kbd size="md">Tab</Kbd>
+    <Kbd size="lg">Space</Kbd>
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 按键尺寸 |
+| `class` | `string` | — | 自定义样式类 |
+
+## 插槽
+
+| 插槽名 | 说明 |
+|--------|------|
+| `default` | 按键内容（文字或符号） |
+
+## 常用按键符号参考
+
+| 符号 | 含义 |
+|------|------|
+| `⌘` | Command (macOS) |
+| `⌥` | Option/Alt (macOS) |
+| `⇧` | Shift |
+| `⌃` | Control |
+| `⏎` | Enter/Return |
+| `⌫` | Backspace |
+| `⇥` | Tab |
+| `⎋` | Escape |
diff --git a/apps/docs/components/label.md b/apps/docs/components/label.md
new file mode 100644
index 0000000..8b8de1a
--- /dev/null
+++ b/apps/docs/components/label.md
@@ -0,0 +1,54 @@
+---
+title: Label 标签
+description: 关联表单项的文本标签，支持禁用状态与点击聚焦特性。
+---
+
+# Label 标签
+
+新粗野主义风格的标签组件，用于表单字段，支持变体。
+
+## 预览
+
+<ComponentPreview>
+  <LabelDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="label" />
+
+## 用法
+
+```vue
+<script setup>
+import Label from '@/components/ui/label/Label.vue'
+import Input from '@/components/ui/input/Input.vue'
+</script>
+
+<template>
+    <div class="space-y-2">
+        <Label for="email">Email</Label>
+        <Input id="email" type="email" placeholder="you@example.com" />
+    </div>
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 标准前景色文字 |
+| `error` | Destructive（红色）文字 |
+| `success` | Success（绿色）文字 |
+| `muted` | 柔和前景色文字 |
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'error' \| 'success' \| 'muted'` | `'default'` |
+| `class` | `string` | — |
+
+## 无障碍
+
+Label 组件渲染为 HTML `<label>` 元素。当使用 `for` 属性时，它会关联到匹配的表单控件，从而改善无障碍性和点击聚焦行为。
diff --git a/apps/docs/components/logo.tsx b/apps/docs/components/logo.tsx
deleted file mode 100644
index 4ea792c..0000000
--- a/apps/docs/components/logo.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-'use client';
-
-import { cn } from '@/components/ui';
-
-interface LogoProps {
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    showText?: boolean;
-    className?: string;
-}
-
-export function Logo({ size = 'md', showText = true, className }: LogoProps) {
-    const sizeConfig = {
-        sm: {
-            container: 'w-8 h-8',
-            text: 'text-lg',
-            border: 'border-2',
-            shadow: '2px',
-            letterSize: 'text-sm',
-        },
-        md: {
-            container: 'w-10 h-10',
-            text: 'text-xl',
-            border: 'border-3',
-            shadow: '3px',
-            letterSize: 'text-base',
-        },
-        lg: {
-            container: 'w-14 h-14',
-            text: 'text-2xl',
-            border: 'border-3',
-            shadow: '4px',
-            letterSize: 'text-xl',
-        },
-        xl: {
-            container: 'w-24 h-24',
-            text: 'text-4xl',
-            border: 'border-4',
-            shadow: '6px',
-            letterSize: 'text-3xl',
-        },
-    };
-
-    const config = sizeConfig[size];
-
-    return (
-        <div className={cn('flex items-center gap-3', className)}>
-            <div
-                className={cn(
-                    'relative flex items-center justify-center font-black',
-                    config.container,
-                    config.border,
-                    'border-black dark:border-white',
-                    'bg-[#FFE66D]'
-                )}
-                style={{
-                    boxShadow: `${config.shadow} ${config.shadow} 0px 0px #000000`,
-                }}
-            >
-                <div
-                    className={cn(
-                        'absolute inset-0 bg-[#FF6B6B]',
-                        config.border,
-                        'border-black dark:border-white'
-                    )}
-                    style={{
-                        transform: `translate(${config.shadow}, ${config.shadow})`,
-                        zIndex: -2,
-                    }}
-                />
-                <div
-                    className={cn(
-                        'absolute inset-0 bg-[#4ECDC4]',
-                        config.border,
-                        'border-black dark:border-white'
-                    )}
-                    style={{
-                        transform: `translate(calc(${config.shadow} / 2), calc(${config.shadow} / 2))`,
-                        zIndex: -1,
-                    }}
-                />
-
-                <span className={cn('font-black text-black tracking-tighter', config.letterSize)}>
-                    BX
-                </span>
-            </div>
-
-            {showText && (
-                <span className={cn('font-black text-black dark:text-white', config.text)}>
-                    BrutxUI
-                </span>
-            )}
-        </div>
-    );
-}
-
-export function LogoStacked({ size = 'md', className }: Omit<LogoProps, 'showText'>) {
-    const sizeConfig = {
-        sm: { block: 'w-3 h-3', gap: 'gap-0.5', border: 'border', container: 'w-8 h-8' },
-        md: { block: 'w-4 h-4', gap: 'gap-1', border: 'border-2', container: 'w-12 h-12' },
-        lg: { block: 'w-5 h-5', gap: 'gap-1', border: 'border-2', container: 'w-14 h-14' },
-        xl: { block: 'w-8 h-8', gap: 'gap-1.5', border: 'border-3', container: 'w-24 h-24' },
-    };
-
-    const config = sizeConfig[size];
-    const colors = ['bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#FFE66D]', 'bg-[#A855F7]'];
-
-    return (
-        <div className={cn('grid grid-cols-2', config.gap, className)}>
-            {colors.map((color, i) => (
-                <div
-                    key={i}
-                    className={cn(
-                        config.block,
-                        config.border,
-                        'border-black dark:border-white',
-                        color
-                    )}
-                    style={{
-                        boxShadow: '2px 2px 0px 0px #000000',
-                    }}
-                />
-            ))}
-        </div>
-    );
-}
-
-export function LogoHero({ className }: { className?: string }) {
-    return (
-        <div className={cn('flex flex-col items-center', className)}>
-            <div className="relative mb-6">
-                <div
-                    className="absolute w-32 h-32 bg-[#FF6B6B] border-4 border-black"
-                    style={{ transform: 'translate(12px, 12px)' }}
-                />
-                <div
-                    className="absolute w-32 h-32 bg-[#4ECDC4] border-4 border-black"
-                    style={{ transform: 'translate(6px, 6px)' }}
-                />
-
-                <div className="relative w-32 h-32 bg-[#FFE66D] border-4 border-black flex items-center justify-center">
-                    <span className="text-5xl font-black text-black tracking-tighter">BX</span>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/components/marquee.md b/apps/docs/components/marquee.md
new file mode 100644
index 0000000..2ac7722
--- /dev/null
+++ b/apps/docs/components/marquee.md
@@ -0,0 +1,50 @@
+---
+title: Marquee 跑马灯
+description: 无限水平循环滚动的跑马灯横幅组件，粗犷动感的视觉表现非常契合新粗野主义风格。
+---
+
+# Marquee 跑马灯
+
+水平跑马灯组件，能够将文本、图片或任意卡片内容在水平轨道上进行无限无缝循环滚动。适合在营销页、Hero 引导区展示推荐标语或合作品牌。
+
+## 预览
+
+<ComponentPreview>
+  <MarqueeDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="marquee" />
+
+## 用法
+
+```vue
+<script setup>
+import Marquee from '@/components/ui/marquee/Marquee.vue'
+</script>
+
+<template>
+    <Marquee :speed="20" fade>
+        <span>⚡️ FAST AND FLUID</span>
+        <span>💥 NEO-BRUTALISM</span>
+        <span>🚀 VUE 3 + TAILWIND</span>
+    </Marquee>
+</template>
+```
+
+## 功能特性
+
+- **双向滚动**：通过 `direction` 属性可以控制内容向左 (`left`) 或向右 (`right`) 滚动。
+- **悬停暂停**：开启 `pauseOnHover` 属性后，鼠标悬停时滚动会自动暂停，方便用户阅读。
+- **边缘淡化**：配置 `fade` 属性，会在组件左右两侧生成透明度渐变遮罩，使内容过渡更为柔和。
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `direction` | `'left' \| 'right'` | `'left'` | 跑马灯滚动方向 |
+| `speed` | `number` | `20` | 单次循环所耗费的秒数（数值越小速度越快） |
+| `pauseOnHover` | `boolean` | `false` | 鼠标悬停时是否暂停动画 |
+| `fade` | `boolean` | `false` | 是否开启左右边缘淡入淡出遮罩效果 |
+| `class` | `string` | `""` | 容器的自定义 CSS 类 |
diff --git a/apps/docs/components/number-input.md b/apps/docs/components/number-input.md
new file mode 100644
index 0000000..9804b23
--- /dev/null
+++ b/apps/docs/components/number-input.md
@@ -0,0 +1,65 @@
+---
+title: NumberInput 数字输入框
+description: 数字微调输入框组件，带有一对粗野主义的加减控制按钮，提供两种加减按钮的排版布局。
+---
+
+# NumberInput 数字输入框
+
+用于录入数字的文本框，内置了长按加减按钮连续滚动的逻辑，并支持最大值、最小值、精度步长调整。
+
+## 预览
+
+<ComponentPreview>
+  <NumberInputDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="number-input" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import NumberInput from '@/components/ui/number-input/NumberInput.vue'
+
+const count = ref(5)
+</script>
+
+<template>
+    <NumberInput v-model="count" :min="0" :max="10" :step="1" />
+</template>
+```
+
+## 布局变体
+
+NumberInput 提供两种按钮排版形态，通过 `layout` 属性配置：
+
+| 布局属性 | 排版说明 |
+|----------|----------|
+| `split` (默认) | **双侧分立式**：减号按钮在输入框左侧，加号按钮在右侧，极具粗野对称感。 |
+| `stacked` | **右侧堆叠式**：加减上下按钮成组排列在右边。 |
+
+```vue
+<template>
+    <!-- 分立式 -->
+    <NumberInput v-model="count" layout="split" />
+    
+    <!-- 堆叠式 -->
+    <NumberInput v-model="count" layout="stacked" />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `modelValue` | `number` | — | 当前输入值 |
+| `min` | `number` | — | 允许的最小值 |
+| `max` | `number` | — | 允许的最大值 |
+| `step` | `number` | `1` | 每次微调的增减幅度 |
+| `layout` | `'split' \| 'stacked'` | `'split'` | 调整按钮的布局结构 |
+| `placeholder` | `string` | `""` | 占位符 |
+| `disabled` | `boolean` | `false` | 是否禁用输入框及按钮 |
+| `class` | `string` | `""` | 容器的自定义 CSS 类 |
diff --git a/apps/docs/components/pagination.md b/apps/docs/components/pagination.md
new file mode 100644
index 0000000..89a174a
--- /dev/null
+++ b/apps/docs/components/pagination.md
@@ -0,0 +1,114 @@
+---
+title: Pagination 分页
+description: 分页控制组件，带硬质翻页按钮，适配各种列表和数据表格场景。
+---
+
+# Pagination 分页
+
+新粗野主义风格的分页组件，内置计算分页算法，支持兄弟页数和首页/末页导航。
+
+## 预览
+
+<ComponentPreview>
+  <PaginationDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="pagination" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Pagination from '@/components/ui/pagination/Pagination.vue'
+
+const currentPage = ref(1)
+const totalPages = 10
+</script>
+
+<template>
+    <Pagination
+        v-model:current-page="currentPage"
+        :total-pages="totalPages"
+    />
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 标准按钮 |
+| `rounded` | 按钮使用 `--brutal-radius` 圆角 |
+| `minimal` | 按钮无边框和阴影 |
+
+## 尺寸
+
+| 尺寸 | 按钮高度 | 间距 |
+|------|----------|------|
+| `sm` | `h-8` | `gap-1` |
+| `default` | `h-10` | `gap-2` |
+| `lg` | `h-12` | `gap-3` |
+
+## 带完整选项
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Pagination from '@/components/ui/pagination/Pagination.vue'
+
+const currentPage = ref(1)
+</script>
+
+<template>
+    <Pagination
+        v-model:current-page="currentPage"
+        :total-pages="50"
+        :sibling-count="2"
+        :show-first-last="true"
+        :show-page-numbers="true"
+        variant="default"
+        size="default"
+    />
+</template>
+```
+
+## 不显示页码
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Pagination from '@/components/ui/pagination/Pagination.vue'
+
+const currentPage = ref(1)
+</script>
+
+<template>
+    <Pagination
+        v-model:current-page="currentPage"
+        :total-pages="10"
+        :show-page-numbers="false"
+    />
+</template>
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `currentPage` | `number` | —（必填） |
+| `totalPages` | `number` | —（必填） |
+| `siblingCount` | `number` | `1` |
+| `showFirstLast` | `boolean` | `true` |
+| `showPageNumbers` | `boolean` | `true` |
+| `variant` | `'default' \| 'rounded' \| 'minimal'` | `'default'` |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `update:currentPage` | `number` |
diff --git a/apps/docs/components/popover.md b/apps/docs/components/popover.md
new file mode 100644
index 0000000..eec06f0
--- /dev/null
+++ b/apps/docs/components/popover.md
@@ -0,0 +1,71 @@
+---
+title: Popover 弹出层
+description: 浮层弹出框，支持在指定元素周围展示复杂的气泡内容。
+---
+
+# Popover 弹出层
+
+新粗野主义风格的弹出层组件，用于显示锚定到触发元素的浮动内容。
+
+## 预览
+
+<ComponentPreview>
+  <PopoverDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="popover" />
+
+## 用法
+
+```vue
+<script setup>
+import { Popover, PopoverTrigger, PopoverAnchor } from '@/components/ui'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <Popover>
+        <PopoverTrigger as-child>
+            <Button variant="outline">Open Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+            <div class="grid gap-4">
+                <div class="space-y-2">
+                    <h4 class="font-black leading-none">Dimensions</h4>
+                    <p class="text-sm text-brutal-muted-foreground">
+                        Set the dimensions for the layer.
+                    </p>
+                </div>
+            </div>
+        </PopoverContent>
+    </Popover>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Popover` | 根组件（从 reka-ui 的 `PopoverRoot` 重新导出） |
+| `PopoverTrigger` | 打开弹出层的按钮 |
+| `PopoverContent` | 弹出层内容面板 |
+| `PopoverAnchor` | 用于定位的锚点元素 |
+
+## Props
+
+### PopoverContent
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+| `align` | `'start' \| 'center' \| 'end'` | `'center'` |
+| `sideOffset` | `number` | — |
+
+## 无障碍
+
+- 弹出层打开时，焦点被限制在弹出层内
+- 按 `Escape` 关闭弹出层
+- 点击外部区域关闭弹出层
diff --git a/apps/docs/components/progress.md b/apps/docs/components/progress.md
new file mode 100644
index 0000000..53b8f72
--- /dev/null
+++ b/apps/docs/components/progress.md
@@ -0,0 +1,62 @@
+---
+title: Progress 进度条
+description: 进度条组件，支持动画过渡和自定义指示器色块，粗边缘设计。
+---
+
+# Progress 进度条
+
+基于 reka-ui 的 Progress 原语构建的新粗野主义风格进度条。
+
+## 预览
+
+<ComponentPreview>
+  <ProgressDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="progress" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Progress from '@/components/ui/progress/Progress.vue'
+
+const progress = ref(45)
+</script>
+
+<template>
+    <Progress v-model="progress" />
+</template>
+```
+
+## 带最大值
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Progress from '@/components/ui/progress/Progress.vue'
+
+const progress = ref(75)
+</script>
+
+<template>
+    <Progress v-model="progress" :max="100" />
+</template>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `modelValue` | `number` | `0` |
+| `max` | `number` | `100` |
+| `class` | `string` | — |
+
+## 样式
+
+- 轨道使用 `border-3 border-brutal` 搭配 `shadow-brutal-sm`
+- 指示器使用 `bg-brutal-primary` 搭配平滑的 transform 过渡
+- 填充通过 `translateX` 实现平滑动画
diff --git a/apps/docs/components/radio-group.md b/apps/docs/components/radio-group.md
new file mode 100644
index 0000000..e2a2152
--- /dev/null
+++ b/apps/docs/components/radio-group.md
@@ -0,0 +1,80 @@
+---
+title: Radio Group 单选组
+description: 单选按钮组组件，用于在互斥选项中进行单项选择。
+---
+
+# Radio Group 单选组
+
+基于 reka-ui 的 RadioGroup 原语构建的新粗野主义风格单选组，用于单项选择。
+
+## 预览
+
+<ComponentPreview>
+  <RadioGroupDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="radio-group" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import RadioGroup from '@/components/ui/radio-group/RadioGroup.vue'
+import RadioGroupItem from '@/components/ui/radio-group/RadioGroupItem.vue'
+import Label from '@/components/ui/label/Label.vue'
+
+const selected = ref('comfortable')
+</script>
+
+<template>
+    <RadioGroup v-model="selected">
+        <div class="flex items-center gap-3">
+            <RadioGroupItem value="default" />
+            <Label for="default">Default</Label>
+        </div>
+        <div class="flex items-center gap-3">
+            <RadioGroupItem value="comfortable" />
+            <Label for="comfortable">Comfortable</Label>
+        </div>
+        <div class="flex items-center gap-3">
+            <RadioGroupItem value="compact" />
+            <Label for="compact">Compact</Label>
+        </div>
+    </RadioGroup>
+</template>
+```
+
+## 属性
+
+### RadioGroup
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `modelValue` | `string` | — |
+| `defaultValue` | `string` | — |
+| `class` | `string` | — |
+
+### RadioGroupItem
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `value` | `string` | —（必填） |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+## 事件
+
+### RadioGroup
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `string` |
+
+## 无障碍
+
+- 方向键在单选项之间导航
+- 空格键选中当前聚焦项
+- 选中项使用 `aria-checked="true"`
diff --git a/apps/docs/components/saas-pricing.md b/apps/docs/components/saas-pricing.md
new file mode 100644
index 0000000..372407f
--- /dev/null
+++ b/apps/docs/components/saas-pricing.md
@@ -0,0 +1,115 @@
+---
+title: SaaS Pricing 定价
+description: 完整的 SaaS 定价页面模板，包含周期切换和方案功能清单对比。
+---
+
+# SaaS Pricing 定价
+
+新粗野主义风格的 SaaS 定价区块，支持月付/年付切换和功能对比。
+
+## 预览
+
+<ComponentPreview>
+  <SaaSPricingDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="saas-pricing" />
+
+## 用法
+
+```vue
+<script setup>
+import SaaSPricing from '@/components/ui/saas-pricing/SaaSPricing.vue'
+
+const plans = [
+    {
+        name: 'Starter',
+        description: 'For side projects and experiments',
+        priceMonthly: '$0',
+        priceAnnually: '$0',
+        features: [
+            { text: '5 components', included: true },
+            { text: 'Basic themes', included: true },
+            { text: 'Community support', included: true },
+            { text: 'Priority updates', included: false },
+        ],
+        buttonText: 'Get Started',
+        buttonVariant: 'outline',
+    },
+    {
+        name: 'Pro',
+        description: 'For professional developers',
+        priceMonthly: '$19',
+        priceAnnually: '$15',
+        features: [
+            { text: 'All components', included: true },
+            { text: 'All themes', included: true },
+            { text: 'Priority support', included: true },
+            { text: 'Priority updates', included: true },
+        ],
+        popular: true,
+        buttonText: 'Go Pro',
+        buttonVariant: 'primary',
+    },
+    {
+        name: 'Enterprise',
+        description: 'For teams and organizations',
+        priceMonthly: '$49',
+        priceAnnually: '$39',
+        features: [
+            { text: 'All components', included: true },
+            { text: 'All themes', included: true },
+            { text: 'Dedicated support', included: true },
+            { text: 'Custom themes', included: true },
+        ],
+        buttonText: 'Contact Sales',
+        buttonVariant: 'secondary',
+    },
+]
+</script>
+
+<template>
+    <SaaSPricing
+        title="Simple, Unapologetic Pricing"
+        subtitle="Choose the plan that fits your needs"
+        :plans="plans"
+    />
+</template>
+```
+
+## PricingPlan 类型
+
+```ts
+interface PricingFeature {
+    text: string
+    included: boolean
+}
+
+interface PricingPlan {
+    name: string
+    description: string
+    priceMonthly: string
+    priceAnnually: string
+    features: PricingFeature[]
+    popular?: boolean
+    buttonText: string
+    buttonVariant?: 'default' | 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'outline' | 'ghost' | 'link'
+}
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `plans` | `PricingPlan[]` | 默认 3 个套餐 |
+| `title` | `string` | locale: `saasPricing.title` |
+| `subtitle` | `string` | — |
+| `class` | `string` | — |
+
+## 功能特性
+
+- **计费切换**：在月付和年付定价之间切换
+- **热门标记**：设置 `popular: true` 的套餐会获得高亮标记和缩放效果
+- **功能勾选**：包含的功能显示绿色勾选，不包含的功能显示灰色图标和删除线
diff --git a/apps/docs/components/scratch-card.md b/apps/docs/components/scratch-card.md
new file mode 100644
index 0000000..eb6adef
--- /dev/null
+++ b/apps/docs/components/scratch-card.md
@@ -0,0 +1,80 @@
+---
+title: ScratchCard 刮刮卡
+description: Canvas 覆盖层驱动的刮刮卡组件，支持自定义覆盖层、进度回调和键盘可访问。
+---
+
+# ScratchCard 刮刮卡
+
+新粗野主义风格的刮刮卡组件，使用 HTML5 Canvas 覆盖在底稿内容上方，绘制斑驳条纹层。用户用鼠标/手指擦除一定面积后，Canvas 淡出并销毁，完全露出插槽中的 Vue 内容。
+
+## 预览
+
+<ComponentPreview>
+  <ScratchCardDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="scratch-card" />
+
+## 用法
+
+```vue
+<script setup>
+import ScratchCard from '@/components/ui/scratch-card/ScratchCard.vue'
+</script>
+
+<template>
+    <ScratchCard class="w-full max-w-sm h-48">
+        <div class="flex items-center justify-center h-full bg-brutal-accent">
+            <p class="text-2xl font-black">🎉 恭喜中奖！</p>
+        </div>
+    </ScratchCard>
+</template>
+```
+
+## 自定义覆盖层
+
+默认绘制 Neobrutalist 双色条纹图案（`--brutal-primary` + `--brutal-secondary`）。可通过 `overlayColor` prop 设置纯色覆盖层：
+
+```vue
+<ScratchCard overlay-color="#FFE66D">
+    <p>底稿内容</p>
+</ScratchCard>
+```
+
+## 无障碍
+
+- 组件设置了 `role="region"`、`aria-label="刮刮卡"` 和 `tabindex="0"`
+- 按 `Enter` 或 `Space` 键可自动揭开全部内容
+- 当用户偏好 `prefers-reduced-motion: reduce` 时，淡出动画被跳过，Canvas 立即移除
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `percentage` | `number` | `50` | 自动刮除全部的面积百分比阈值 (0-100) |
+| `brushRadius` | `number` | `20` | 刮除画笔擦头半径 (px) |
+| `overlayColor` | `string` | — | 覆盖层底色，不设则默认绘制双色条纹图案 |
+| `fadeDuration` | `number` | `300` | 达到阈值后 Canvas 淡出动画时长 (ms) |
+| `class` | `string` | — | 外部类覆盖 |
+
+## 事件
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `@progress` | `(percent: number)` | 刮除进度改变回调（已节流） |
+| `@completed` | — | 刮开完成（达阈值淡出后）触发 |
+
+## 插槽
+
+| 插槽 | 说明 |
+|------|------|
+| `default` | 刮刮卡底稿内容 |
+
+## 暴露属性/方法
+
+| 名称 | 说明 |
+|------|------|
+| `isRevealed` | 是否已揭开 |
+| `revealAll()` | 立即揭开全部内容 |
diff --git a/apps/docs/components/scroll-area.md b/apps/docs/components/scroll-area.md
new file mode 100644
index 0000000..64118f3
--- /dev/null
+++ b/apps/docs/components/scroll-area.md
@@ -0,0 +1,81 @@
+---
+title: Scroll Area 滚动区域
+description: 自定义滚动区域组件，提供符合新粗野主义外观的厚滚动条。
+---
+
+# Scroll Area 滚动区域
+
+基于 reka-ui 的 ScrollArea 原语构建的新粗野主义风格滚动区域，带有自定义滚动条样式。
+
+## 预览
+
+<ComponentPreview>
+  <ScrollAreaDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="scroll-area" />
+
+## 用法
+
+```vue
+<script setup>
+import ScrollArea from '@/components/ui/scroll-area/ScrollArea.vue'
+</script>
+
+<template>
+    <ScrollArea class="h-72 w-48 border-3 border-brutal">
+        <div class="p-4">
+            <h4 class="mb-4 text-sm font-black leading-none">Tags</h4>
+            <div class="space-y-1">
+                <div v-for="tag in tags" :key="tag" class="text-sm font-medium">
+                    {{ tag }}
+                </div>
+            </div>
+        </div>
+    </ScrollArea>
+</template>
+```
+
+## 水平滚动
+
+```vue
+<script setup>
+import ScrollArea from '@/components/ui/scroll-area/ScrollArea.vue'
+import ScrollBar from '@/components/ui/scroll-area/ScrollBar.vue'
+</script>
+
+<template>
+    <ScrollArea class="w-96 border-3 border-brutal">
+        <div class="flex w-max space-x-4 p-4">
+            <div v-for="artwork in artworks" :key="artwork" class="shrink-0">
+                <div class="h-[250px] w-[200px] border-3 border-brutal bg-brutal-muted" />
+            </div>
+        </div>
+        <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `ScrollArea` | 根可滚动容器 |
+| `ScrollBar` | 自定义滚动条（默认垂直，支持水平） |
+
+## 属性
+
+### ScrollArea
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+
+### ScrollBar
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` |
+| `class` | `string` | — |
diff --git a/apps/docs/components/select.md b/apps/docs/components/select.md
new file mode 100644
index 0000000..f28220e
--- /dev/null
+++ b/apps/docs/components/select.md
@@ -0,0 +1,125 @@
+---
+title: Select 选择器
+description: 选择器组件，可替代浏览器原生下拉，提供更好的无障碍支持。
+---
+
+# Select 选择器
+
+基于 reka-ui 的 Select 原语构建的新粗野主义风格下拉选择框，完整支持子组件。
+
+## 预览
+
+<ComponentPreview>
+  <SelectDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="select" />
+
+## 用法
+
+```vue
+<script setup>
+import {
+    Select,
+    SelectTrigger,
+    SelectContent,
+    SelectItem,
+    SelectValue,
+    SelectGroup,
+    SelectLabel,
+} from '@/components/ui'
+</script>
+
+<template>
+    <Select>
+        <SelectTrigger class="w-[280px]">
+            <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+            <SelectGroup>
+                <SelectLabel>Fruits</SelectLabel>
+                <SelectItem value="apple">Apple</SelectItem>
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="orange">Orange</SelectItem>
+                <SelectItem value="grape">Grape</SelectItem>
+            </SelectGroup>
+        </SelectContent>
+    </Select>
+</template>
+```
+
+## 使用 v-model
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import {
+    Select,
+    SelectTrigger,
+    SelectContent,
+    SelectItem,
+    SelectValue,
+} from '@/components/ui'
+
+const selectedFruit = ref('')
+</script>
+
+<template>
+    <Select v-model="selectedFruit">
+        <SelectTrigger class="w-[280px]">
+            <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="orange">Orange</SelectItem>
+        </SelectContent>
+    </Select>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Select` | 根组件（从 reka-ui 重新导出为 `SelectRoot`） |
+| `SelectTrigger` | 打开下拉菜单的按钮 |
+| `SelectContent` | 下拉内容面板 |
+| `SelectItem` | 可选项 |
+| `SelectValue` | 显示已选中的值 |
+| `SelectGroup` | 选项分组 |
+| `SelectLabel` | 分组标签 |
+| `SelectSeparator` | 视觉分隔线 |
+| `SelectScrollUpButton` | 向上滚动指示器 |
+| `SelectScrollDownButton` | 向下滚动指示器 |
+
+## 属性
+
+### SelectTrigger
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+
+### SelectContent
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+| `position` | `'popper' \| 'item-aligned'` | — |
+
+### SelectItem
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `value` | `string` | —（必填） |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+### SelectLabel
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
diff --git a/apps/docs/components/separator.md b/apps/docs/components/separator.md
new file mode 100644
index 0000000..5e2de5a
--- /dev/null
+++ b/apps/docs/components/separator.md
@@ -0,0 +1,77 @@
+---
+title: Separator 分隔线
+description: 分隔线组件，用于在粗野主义布局中进行模块化视觉分割。
+---
+
+# Separator 分隔线
+
+新粗野主义风格的视觉分隔线，支持水平和垂直方向。
+
+## 预览
+
+<ComponentPreview>
+  <SeparatorDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="separator" />
+
+## 用法
+
+```vue
+<script setup>
+import Separator from '@/components/ui/separator/Separator.vue'
+</script>
+
+<template>
+    <div>
+        <p class="text-sm font-medium">Content above</p>
+        <Separator />
+        <p class="text-sm font-medium">Content below</p>
+    </div>
+</template>
+```
+
+## 方向
+
+### 水平（默认）
+
+```vue
+<script setup>
+import Separator from '@/components/ui/separator/Separator.vue'
+</script>
+
+<template>
+    <Separator orientation="horizontal" />
+</template>
+```
+
+### 垂直
+
+```vue
+<script setup>
+import Separator from '@/components/ui/separator/Separator.vue'
+</script>
+
+<template>
+    <div class="flex h-8 items-center gap-4">
+        <span class="text-sm font-bold">Item 1</span>
+        <Separator orientation="vertical" />
+        <span class="text-sm font-bold">Item 2</span>
+    </div>
+</template>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `class` | `string` | — |
+
+## 样式
+
+- **水平**：`h-[3px] w-full` — 使用 `--brutal-border-width` 作为粗细
+- **垂直**：`h-full w-[3px]` — 使用 `--brutal-border-width` 作为粗细
+- 颜色：`bg-brutal-fg` — 使用 `--brutal-fg` 令牌
diff --git a/apps/docs/components/sheet.md b/apps/docs/components/sheet.md
new file mode 100644
index 0000000..5069bda
--- /dev/null
+++ b/apps/docs/components/sheet.md
@@ -0,0 +1,116 @@
+---
+title: Sheet 抽屉
+description: 滑动抽屉组件，支持从上、下、左、右四个方向滑出。
+---
+
+# Sheet 抽屉
+
+新粗野主义风格的侧边面板组件，可从任意边缘滑入。基于 reka-ui 的 Dialog 原语构建。
+
+## 预览
+
+<ComponentPreview>
+  <SheetDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="sheet" />
+
+## 用法
+
+```vue
+<script setup>
+import {
+    Sheet,
+    SheetTrigger,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+    SheetClose,
+} from '@/components/ui'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <Sheet>
+        <SheetTrigger as-child>
+            <Button variant="outline">Open Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="right">
+            <SheetHeader>
+                <SheetTitle>Edit Profile</SheetTitle>
+                <SheetDescription>
+                    Make changes to your profile here.
+                </SheetDescription>
+            </SheetHeader>
+            <div class="py-4">
+                <p class="text-sm">Sheet content goes here.</p>
+            </div>
+            <SheetFooter>
+                <SheetClose as-child>
+                    <Button variant="outline">Cancel</Button>
+                </SheetClose>
+                <Button variant="primary">Save</Button>
+            </SheetFooter>
+        </SheetContent>
+    </Sheet>
+</template>
+```
+
+## 方向变体
+
+| 方向 | 说明 |
+|------|------|
+| `top` | 从顶部滑入 |
+| `bottom` | 从底部滑入 |
+| `left` | 从左侧滑入（最大 `sm:max-w-sm`） |
+| `right` | 从右侧滑入（默认，最大 `sm:max-w-sm`） |
+
+```vue
+<script setup>
+import { Sheet, SheetTrigger, SheetContent } from '@/components/ui'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <Sheet>
+        <SheetTrigger as-child>
+            <Button>Open Left Sheet</Button>
+        </SheetTrigger>
+        <SheetContent side="left">
+            <p>Content slides in from the left.</p>
+        </SheetContent>
+    </Sheet>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Sheet` | 根组件（从 reka-ui 重新导出为 `DialogRoot`） |
+| `SheetTrigger` | 打开面板的按钮 |
+| `SheetContent` | 带方向变体的面板内容 |
+| `SheetHeader` | 头部容器 |
+| `SheetFooter` | 底部容器 |
+| `SheetTitle` | 面板标题 |
+| `SheetDescription` | 面板描述文字 |
+| `SheetClose` | 关闭按钮 |
+
+## 属性
+
+### SheetContent
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `side` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'right'` |
+| `class` | `string` | — |
+
+### SheetHeader / SheetFooter / SheetTitle / SheetDescription
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
diff --git a/apps/docs/components/sidebar.tsx b/apps/docs/components/sidebar.tsx
deleted file mode 100644
index dcf9bc0..0000000
--- a/apps/docs/components/sidebar.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { cn, ScrollArea } from '@/components/ui';
-import { useState } from 'react';
-import { Menu, X, Heart } from 'lucide-react';
-import { ThemeToggle } from './theme-toggle';
-
-const navigation = [
-    { name: 'Getting Started', href: '/docs' },
-    {
-        name: 'Installation',
-        href: '/docs/installation',
-        children: [
-            { name: 'Next.js', href: '/docs/installation/nextjs' },
-            { name: 'Vite', href: '/docs/installation/vite' },
-            { name: 'Manual', href: '/docs/installation/manual' },
-            { name: 'shadcn/ui CLI', href: '/docs/installation/shadcn' },
-        ],
-    },
-    { name: 'CLI', href: '/docs/cli' },
-    { name: 'Theme & Tokens', href: '/docs/theme' },
-    { name: 'AI Integration', href: '/docs/ai' },
-    {
-        name: 'Components',
-        href: '/docs/components',
-        children: [
-            { name: 'Alert', href: '/docs/components/alert' },
-            { name: 'Alert Dialog', href: '/docs/components/alert-dialog' },
-            { name: 'Avatar', href: '/docs/components/avatar' },
-            { name: 'Badge', href: '/docs/components/badge' },
-            { name: 'Button', href: '/docs/components/button' },
-            { name: 'Calendar', href: '/docs/components/calendar' },
-            { name: 'Card', href: '/docs/components/card' },
-            {name: 'Checkbox', href: '/docs/components/checkbox'},
-            {name: 'Combobox', href: '/docs/components/combobox'},
-            {name: 'Command', href: '/docs/components/command'},
-            {name: 'Dashboard Stats', href: '/docs/components/dashboard-stats'},
-            {name: 'Dialog', href: '/docs/components/dialog'},
-            {name: 'Dropdown Menu', href: '/docs/components/dropdown-menu'},
-            {name: 'Form', href: '/docs/components/form'},
-            {name: 'Input', href: '/docs/components/input'},
-            {name: 'Label', href: '/docs/components/label'},
-            {name: 'Pagination', href: '/docs/components/pagination'},
-            {name: 'Popover', href: '/docs/components/popover'},
-            {name: 'Progress', href: '/docs/components/progress'},
-            {name: 'Radio Group', href: '/docs/components/radio-group'},
-            {name: 'Scroll Area', href: '/docs/components/scroll-area'},
-            {name: 'Select', href: '/docs/components/select'},
-            {name: 'Separator', href: '/docs/components/separator'},
-            {name: 'Sheet', href: '/docs/components/sheet'},
-            {name: 'Slider', href: '/docs/components/slider'},
-            {name: 'Skeleton', href: '/docs/components/skeleton'},
-            {name: 'Spinner', href: '/docs/components/spinner'},
-            {name: 'Submit Button', href: '/docs/components/submit-button'},
-            {name: 'SaaS Pricing', href: '/docs/components/saas-pricing'},
-            {name: 'Switch', href: '/docs/components/switch'},
-            {name: 'Toggle', href: '/docs/components/toggle'},
-            {name: 'Toggle Group', href: '/docs/components/toggle-group'},
-            {name: 'Table', href: '/docs/components/table'},
-            {name: 'Tabs', href: '/docs/components/tabs'},
-            {name: 'Textarea', href: '/docs/components/textarea'},
-            {name: 'Toast', href: '/docs/components/toast'},
-            {name: 'Tooltip', href: '/docs/components/tooltip'},
-        ],
-    },
-    {
-        name: 'Blocks & Templates',
-        href: '/docs/blocks',
-        children: [
-            { name: 'Brutalist Hero', href: '/docs/blocks/brutalist-hero' },
-            { name: 'Pricing Section', href: '/docs/blocks/pricing-section' },
-            { name: 'Auth Card', href: '/docs/blocks/auth-card' },
-            { name: 'Dashboard Shell', href: '/docs/blocks/dashboard-shell' },
-            { name: 'Empty State', href: '/docs/blocks/empty-state' },
-            { name: 'Waitlist Page', href: '/docs/blocks/waitlist-page' },
-        ],
-    },
-];
-
-export function Sidebar() {
-    const pathname = usePathname();
-    const [isOpen, setIsOpen] = useState(false);
-
-    const toggleSidebar = () => setIsOpen(!isOpen);
-    const closeSidebar = () => setIsOpen(false);
-
-    return (
-        <>
-            <button
-                onClick={toggleSidebar}
-                className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-brutal"
-                aria-label="Toggle menu"
-            >
-                {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-            </button>
-
-            <div className="lg:hidden fixed top-4 right-4 z-50">
-                <ThemeToggle />
-            </div>
-
-            {isOpen && (
-                <div className="lg:hidden fixed inset-0 bg-black/50 z-30" onClick={closeSidebar} />
-            )}
-
-            <aside
-                className={cn(
-                    'fixed lg:sticky top-0 left-0 z-40 w-64 border-r-3 border-black dark:border-white h-screen bg-white dark:bg-gray-950 transition-transform duration-300 ease-in-out',
-                    isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
-                )}
-            >
-                <div className="flex items-center justify-between p-6 pb-4">
-                    <Link href="/" className="block" onClick={closeSidebar}>
-                        <h1 className="text-xl font-black">BrutxUI</h1>
-                    </Link>
-                    <div className="hidden lg:block">
-                        <ThemeToggle />
-                    </div>
-                </div>
-                <ScrollArea className="h-[calc(100vh-80px)]">
-                    <nav className="space-y-2 px-6 pb-8">
-                        {navigation.map((item) => (
-                            <div key={item.name}>
-                                <Link
-                                    href={item.href}
-                                    onClick={closeSidebar}
-                                    className={cn(
-                                        'block px-3 py-2 font-bold transition-colors border-3 border-transparent',
-                                        pathname === item.href
-                                            ? 'bg-[#FFE66D] text-black border-black shadow-[2px_2px_0px_0px_#000000]'
-                                            : 'hover:bg-gray-100 dark:hover:bg-gray-800'
-                                    )}
-                                >
-                                    {item.name}
-                                </Link>
-                                {item.children && (
-                                    <div className="ml-4 mt-1 space-y-1">
-                                        {item.children.map((child) => (
-                                            <Link
-                                                key={child.name}
-                                                href={child.href}
-                                                onClick={closeSidebar}
-                                                className={cn(
-                                                    'block px-3 py-1.5 text-sm font-medium transition-colors',
-                                                    pathname === child.href
-                                                        ? 'bg-[#FFE66D] text-black border-2 border-black'
-                                                        : 'hover:bg-gray-100 dark:hover:bg-gray-800'
-                                                )}
-                                            >
-                                                {child.name}
-                                            </Link>
-                                        ))}
-                                    </div>
-                                )}
-                            </div>
-                        ))}
-
-                        <div className="pt-4 mt-4 border-t-2 border-gray-200 dark:border-gray-700">
-                            <Link
-                                href="/sponsor"
-                                onClick={closeSidebar}
-                                className={cn(
-                                    'flex items-center gap-2 px-3 py-2 font-bold transition-all border-3',
-                                    pathname === '/sponsor'
-                                        ? 'bg-[#FF6B6B] text-white border-black shadow-[2px_2px_0px_0px_#000000]'
-                                        : 'bg-[#FF6B6B] text-white border-black hover:shadow-[4px_4px_0px_0px_#000000] hover:-translate-y-0.5'
-                                )}
-                            >
-                                <Heart className="w-4 h-4" fill="white" />
-                                Sponsor
-                            </Link>
-                        </div>
-                    </nav>
-                </ScrollArea>
-            </aside>
-        </>
-    );
-}
diff --git a/apps/docs/components/skeleton.md b/apps/docs/components/skeleton.md
new file mode 100644
index 0000000..698d400
--- /dev/null
+++ b/apps/docs/components/skeleton.md
@@ -0,0 +1,130 @@
+---
+title: Skeleton 骨架屏
+description: 骨架屏占位组件，支持圆形、文本行、卡片等多种布局预览。
+---
+
+# Skeleton 骨架屏
+
+新粗野主义风格的骨架屏加载组件，提供子组件用于常见加载模式。
+
+## 预览
+
+<ComponentPreview>
+  <SkeletonDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="skeleton" />
+
+## 用法
+
+### 基础骨架屏
+
+```vue
+<script setup>
+import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
+</script>
+
+<template>
+    <Skeleton class="h-12 w-12" />
+</template>
+```
+
+### SkeletonText
+
+```vue
+<script setup>
+import SkeletonText from '@/components/ui/skeleton/SkeletonText.vue'
+</script>
+
+<template>
+    <SkeletonText :lines="3" />
+</template>
+```
+
+### SkeletonAvatar
+
+```vue
+<script setup>
+import SkeletonAvatar from '@/components/ui/skeleton/SkeletonAvatar.vue'
+</script>
+
+<template>
+    <SkeletonAvatar size="default" />
+</template>
+```
+
+### SkeletonCard
+
+```vue
+<script setup>
+import SkeletonCard from '@/components/ui/skeleton/SkeletonCard.vue'
+</script>
+
+<template>
+    <SkeletonCard />
+</template>
+```
+
+### SkeletonTable
+
+```vue
+<script setup>
+import SkeletonTable from '@/components/ui/skeleton/SkeletonTable.vue'
+</script>
+
+<template>
+    <SkeletonTable :rows="5" :columns="4" />
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 灰色背景 |
+| `primary` | 主色，30% 不透明度 |
+| `secondary` | 辅助色，30% 不透明度 |
+| `accent` | 强调色，30% 不透明度 |
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Skeleton` | 基础骨架块 |
+| `SkeletonText` | 多行骨架文本 |
+| `SkeletonAvatar` | 圆形/方形头像占位符 |
+| `SkeletonCard` | 完整卡片骨架，包含头部、内容、底部 |
+| `SkeletonTable` | 表格骨架，包含行和列 |
+
+## 属性
+
+### Skeleton
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'accent'` | `'default'` |
+| `class` | `string` | — |
+
+### SkeletonText
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `lines` | `number` | `3` |
+| `class` | `string` | — |
+
+### SkeletonAvatar
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `class` | `string` | — |
+
+### SkeletonTable
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `rows` | `number` | `5` |
+| `columns` | `number` | `4` |
+| `class` | `string` | — |
diff --git a/apps/docs/components/sketchy-chart.md b/apps/docs/components/sketchy-chart.md
new file mode 100644
index 0000000..382ccbd
--- /dev/null
+++ b/apps/docs/components/sketchy-chart.md
@@ -0,0 +1,75 @@
+---
+title: SketchyChart 手绘图表
+description: SVG + 分形噪声滤镜驱动的手绘感折线/柱状/饼图表，零外部依赖。
+---
+
+# SketchyChart 手绘图表
+
+新粗野主义风格的手绘感图表组件，纯 Vue 使用 `<svg>` 绘制。利用 SVG 分形噪声滤镜让坐标轴、折线和柱体边缘产生波动，完美拟合手写草稿质感。零外部依赖。
+
+## 预览
+
+<ComponentPreview>
+  <SketchyChartDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="sketchy-chart" />
+
+## 用法
+
+```vue
+<script setup>
+import SketchyChart from '@/components/ui/sketchy-chart/SketchyChart.vue'
+
+const data = [
+    { label: 'Jan', value: 30 },
+    { label: 'Feb', value: 65 },
+    { label: 'Mar', value: 45 },
+]
+</script>
+
+<template>
+    <SketchyChart type="line" :data="data" />
+</template>
+```
+
+## 图表类型
+
+| 类型 | 说明 |
+|------|------|
+| `line` | 折线图，带阴影填充区和拐点圆圈 |
+| `bar` | 柱状图，带 Hatch 斜线填充和硬投影 |
+| `pie` | 饼图，使用设计令牌色板和粗黑边框 |
+
+## 手绘抖动
+
+`sketchiness` prop 控制手绘抖动幅度 (0-10)，值越大抖动越明显：
+
+```vue
+<SketchyChart type="line" :data="data" :sketchiness="8" />
+```
+
+## 数据处理
+
+- **空数组**：渲染空图表框架（仅坐标轴）
+- **负值**：取绝对值
+- **大数据集**（>30 项）：自动降采样
+
+## 无障碍
+
+- SVG 设置了 `role="img"` 和 `aria-label`
+- 包含 `<title>` 元素供屏幕阅读器读取
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `type` | `'line' \| 'bar' \| 'pie'` | `'line'` | 图表类型 |
+| `data` | `Array<{ label: string, value: number }>` | `[]` | 图表数据源 |
+| `sketchiness` | `number` | `2` | 手绘抖动幅度 (0-10) |
+| `grid` | `boolean` | `true` | 是否绘制背景网格 |
+| `width` | `number` | `600` | 图表宽度 (px) |
+| `height` | `number` | `400` | 图表高度 (px) |
+| `class` | `string` | — | 外部类覆盖 |
diff --git a/apps/docs/components/slider.md b/apps/docs/components/slider.md
new file mode 100644
index 0000000..c3a6e7f
--- /dev/null
+++ b/apps/docs/components/slider.md
@@ -0,0 +1,104 @@
+---
+title: Slider 滑块
+description: 滑动输入条组件，用于连续数值的区间调节或拖动输入。
+---
+
+# Slider 滑块
+
+基于 reka-ui 的 Slider 原语构建的新粗野主义风格滑块，支持 v-model。
+
+## 预览
+
+<ComponentPreview>
+  <SliderDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="slider" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+
+const value = ref([50])
+</script>
+
+<template>
+    <Slider v-model="value" :max="100" :step="1" />
+</template>
+```
+
+## 范围滑块
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+
+const range = ref([25, 75])
+</script>
+
+<template>
+    <Slider v-model="range" :max="100" :step="1" />
+</template>
+```
+
+## 带最小/最大值
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+
+const value = ref([500])
+</script>
+
+<template>
+    <Slider v-model="value" :min="0" :max="1000" :step="50" />
+</template>
+```
+
+## 禁用状态
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Slider from '@/components/ui/slider/Slider.vue'
+
+const value = ref([50])
+</script>
+
+<template>
+    <Slider v-model="value" disabled />
+</template>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `modelValue` | `number[]` | — |
+| `defaultValue` | `number[]` | — |
+| `min` | `number` | `0` |
+| `max` | `number` | `100` |
+| `step` | `number` | `1` |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `number[]` |
+
+## 样式
+
+- **轨道**：`border-3 border-brutal` 搭配 `shadow-brutal-sm`
+- **范围**：`bg-brutal-secondary` 填充
+- **滑块**：`bg-brutal-accent` 搭配 `border-3 border-brutal` 和 `shadow-brutal-sm`
+- **悬停**：滑块放大
+- **激活**：滑块缩小并显示抓取光标
diff --git a/apps/docs/components/spinner.md b/apps/docs/components/spinner.md
new file mode 100644
index 0000000..eeadc94
--- /dev/null
+++ b/apps/docs/components/spinner.md
@@ -0,0 +1,105 @@
+---
+title: Spinner 加载指示器
+description: 加载指示器组件，提供旋转点、旋转线等多种经典粗野主义加载动画。
+---
+
+# Spinner 加载指示器
+
+新粗野主义风格加载旋转器，提供 4 种视觉变体：标准、方块、圆点和条形。
+
+## 预览
+
+<ComponentPreview>
+  <SpinnerDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="spinner" />
+
+## 用法
+
+### Spinner（标准）
+
+```vue
+<script setup>
+import Spinner from '@/components/ui/spinner/Spinner.vue'
+</script>
+
+<template>
+    <Spinner size="default" variant="default" />
+</template>
+```
+
+### BlockSpinner
+
+```vue
+<script setup>
+import BlockSpinner from '@/components/ui/spinner/BlockSpinner.vue'
+</script>
+
+<template>
+    <BlockSpinner size="default" />
+</template>
+```
+
+### DotsSpinner
+
+```vue
+<script setup>
+import DotsSpinner from '@/components/ui/spinner/DotsSpinner.vue'
+</script>
+
+<template>
+    <DotsSpinner size="default" />
+</template>
+```
+
+### BarsSpinner
+
+```vue
+<script setup>
+import BarsSpinner from '@/components/ui/spinner/BarsSpinner.vue'
+</script>
+
+<template>
+    <BarsSpinner size="default" />
+</template>
+```
+
+## Spinner 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 顶部和右侧边框透明，旋转 |
+| `primary` | 主色边框，旋转 |
+| `secondary` | 辅助色边框，旋转 |
+| `accent` | 顶部和右侧强调色边框，旋转 |
+
+## 尺寸
+
+所有旋转器类型支持以下尺寸：
+
+| 尺寸 | Spinner | Block | Bars | Dots |
+|------|---------|-------|------|------|
+| `sm` | `h-5 w-5` | `h-5 w-5` | `h-4` | `gap-1` |
+| `default` | `h-8 w-8` | `h-8 w-8` | `h-6` | `gap-2` |
+| `lg` | `h-12 w-12` | `h-12 w-12` | `h-8` | `gap-3` |
+| `xl` | `h-16 w-16` | `h-16 w-16` | `h-12` | `gap-4` |
+
+## 属性
+
+### Spinner
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `size` | `'sm' \| 'default' \| 'lg' \| 'xl'` | `'default'` |
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'accent'` | `'default'` |
+| `class` | `string` | — |
+
+### BlockSpinner / DotsSpinner / BarsSpinner
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `size` | `'sm' \| 'default' \| 'lg' \| 'xl'` | `'default'` |
+| `class` | `string` | — |
diff --git a/apps/docs/components/stepper.md b/apps/docs/components/stepper.md
new file mode 100644
index 0000000..c71d652
--- /dev/null
+++ b/apps/docs/components/stepper.md
@@ -0,0 +1,101 @@
+---
+title: Stepper 步骤条
+description: 多步骤进度指示组件，支持水平与垂直方向，完成/激活/未开始三种状态，可点击跳转，适合多步表单与向导流程。
+---
+
+# Stepper 步骤条
+
+可视化的多步流程引导组件，完成步骤带勾选图标，激活步骤高亮放大，粗边框圆形节点与连接线尽显新粗野主义质感。
+
+## 预览
+
+<ComponentPreview>
+  <StepperDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="stepper" />
+
+## 用法
+
+```vue
+<script setup>
+import { Stepper } from '@/components/ui/stepper'
+import type { StepperStep } from '@/components/ui/stepper'
+import { ref } from 'vue'
+
+const steps: StepperStep[] = [
+    { id: 1, title: '基本信息', description: '填写账户资料' },
+    { id: 2, title: '安全设置', description: '设置密码' },
+    { id: 3, title: '完成', description: '注册成功' },
+]
+
+const current = ref(0)
+</script>
+
+<template>
+    <!-- 水平步骤条 -->
+    <Stepper v-model="current" :steps="steps" orientation="horizontal" />
+
+    <!-- 垂直步骤条（支持内容插槽） -->
+    <Stepper v-model="current" :steps="steps" orientation="vertical">
+        <template #step-1>
+            <p class="text-sm">在此填写第一步的内容...</p>
+        </template>
+        <template #step-2>
+            <p class="text-sm">在此填写第二步的内容...</p>
+        </template>
+    </Stepper>
+
+    <!-- 导航按钮 -->
+    <button :disabled="current === 0" @click="current--">上一步</button>
+    <button :disabled="current === steps.length - 1" @click="current++">下一步</button>
+</template>
+```
+
+## StepperStep 类型
+
+```ts
+interface StepperStep {
+    id: string | number   // 唯一标识（垂直插槽名为 step-{id}）
+    title: string         // 步骤标题
+    description?: string  // 可选副标题
+}
+```
+
+## Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `steps` | `StepperStep[]` | — | 步骤数据列表 |
+| `modelValue` | `number` | — | 当前步骤索引（0 开始，v-model） |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | 布局方向 |
+| `class` | `string` | — | 根节点自定义样式类 |
+
+## 事件
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `update:modelValue` | `number` | 步骤变更（v-model） |
+| `step-click` | `number` | 点击某步骤节点时触发 |
+
+## 插槽（垂直模式）
+
+垂直模式下，每个步骤在激活时可通过 `#step-{id}` 插槽注入内容区域：
+
+```html
+<Stepper v-model="current" :steps="steps" orientation="vertical">
+    <template #step-1>
+        <!-- 第一步激活时展示的内容 -->
+    </template>
+</Stepper>
+```
+
+## 节点状态说明
+
+| 状态 | 样式 | 条件 |
+|------|------|------|
+| `completed` | 绿色背景 + ✓ 图标 | 索引 < 当前步骤 |
+| `active` | 主色背景 + 阴影放大 | 索引 = 当前步骤 |
+| `upcoming` | 白色背景 + 半透明 | 索引 > 当前步骤 |
diff --git a/apps/docs/components/submit-button.md b/apps/docs/components/submit-button.md
new file mode 100644
index 0000000..0d7eeec
--- /dev/null
+++ b/apps/docs/components/submit-button.md
@@ -0,0 +1,104 @@
+---
+title: Submit Button 提交按钮
+description: 提交按钮，自带防重复提交逻辑与加载中状态切换。
+---
+
+# Submit Button 提交按钮
+
+新粗野主义风格提交按钮，内置加载和等待状态，专为表单提交设计。
+
+## 预览
+
+<ComponentPreview>
+  <SubmitButtonDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="submit-button" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import SubmitButton from '@/components/ui/submit-button/SubmitButton.vue'
+
+const isLoading = ref(false)
+
+async function handleSubmit() {
+    isLoading.value = true
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    isLoading.value = false
+}
+</script>
+
+<template>
+    <form @submit.prevent="handleSubmit">
+        <SubmitButton :loading="isLoading" variant="primary">
+            Save Changes
+        </SubmitButton>
+    </form>
+</template>
+```
+
+## 配合表单使用
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Form from '@/components/ui/form/Form.vue'
+import SubmitButton from '@/components/ui/submit-button/SubmitButton.vue'
+
+const isLoading = ref(false)
+
+function onSubmit(values) {
+    isLoading.value = true
+    setTimeout(() => {
+        isLoading.value = false
+    }, 2000)
+}
+</script>
+
+<template>
+    <Form @submit="onSubmit">
+        <SubmitButton :loading="isLoading" variant="primary">
+            Sign In
+        </SubmitButton>
+    </Form>
+</template>
+```
+
+## 等待文本
+
+加载时，按钮会显示 `pendingText` 属性的值，而非插槽内容：
+
+```vue
+<script setup>
+import SubmitButton from '@/components/ui/submit-button/SubmitButton.vue'
+</script>
+
+<template>
+    <SubmitButton loading pending-text="Processing..." variant="primary">
+        Pay Now
+    </SubmitButton>
+</template>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'danger' \| 'success' \| 'outline' \| 'ghost' \| 'link'` | `'default'` |
+| `size` | `'sm' \| 'default' \| 'lg' \| 'xl' \| 'icon'` | `'default'` |
+| `pendingText` | `string` | locale: `submitButton.submitting` |
+| `loading` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `class` | `string` | — |
+
+## 行为
+
+- 按钮渲染为 `<button type="submit">` 用于表单提交
+- 当 `loading` 为 `true` 时，按钮被禁用并显示旋转图标
+- 当 `loading` 为 `true` 时，插槽内容被替换为 `pendingText`
+- `disabled` 属性或 `loading` 状态都会阻止点击
diff --git a/apps/docs/components/switch.md b/apps/docs/components/switch.md
new file mode 100644
index 0000000..da437a7
--- /dev/null
+++ b/apps/docs/components/switch.md
@@ -0,0 +1,91 @@
+---
+title: Switch 开关
+description: 开关选择器组件，用于快捷切换 true/false 布尔值状态。
+---
+
+# Switch 开关
+
+基于 reka-ui 的 Switch 原语构建的新粗野主义风格切换开关，支持 v-model。
+
+## 预览
+
+<ComponentPreview>
+  <SwitchDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="switch" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Switch from '@/components/ui/switch/Switch.vue'
+import Label from '@/components/ui/label/Label.vue'
+
+const enabled = ref(false)
+</script>
+
+<template>
+    <div class="flex items-center gap-3">
+        <Switch v-model="enabled" />
+        <Label>Airplane mode</Label>
+    </div>
+</template>
+```
+
+## 带标签
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Switch from '@/components/ui/switch/Switch.vue'
+import Label from '@/components/ui/label/Label.vue'
+
+const notifications = ref(true)
+</script>
+
+<template>
+    <div class="flex items-center justify-between">
+        <Label for="notifications">Email notifications</Label>
+        <Switch v-model="notifications" />
+    </div>
+</template>
+```
+
+## 禁用状态
+
+```vue
+<script setup>
+import Switch from '@/components/ui/switch/Switch.vue'
+</script>
+
+<template>
+    <Switch disabled />
+</template>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `modelValue` | `boolean` | — |
+| `defaultValue` | `boolean` | — |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `boolean` |
+
+## 样式
+
+- **未选中**：`bg-brutal-bg` 背景，滑块在左侧
+- **选中**：`bg-brutal-success` 背景，滑块向右平移
+- **滑块**：`bg-brutal-fg` 搭配 `shadow-brutal-sm`
+- **禁用**：降低不透明度，显示禁止光标
+- **聚焦**：使用 `--brutal-ring` 令牌显示可见聚焦环
diff --git a/apps/docs/components/table.md b/apps/docs/components/table.md
new file mode 100644
index 0000000..e81468c
--- /dev/null
+++ b/apps/docs/components/table.md
@@ -0,0 +1,85 @@
+---
+title: Table 表格
+description: 数据表格，拥有高对比度表头、斑马纹行和硬边缘网格线。
+---
+
+# Table 表格
+
+新粗野主义风格数据表格，包含 8 个可组合子组件，用于结构化表格数据展示。
+
+## 预览
+
+<ComponentPreview>
+  <TableDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="table" />
+
+## 用法
+
+```vue
+<script setup>
+import Table from '@/components/ui/table/Table.vue'
+import TableHeader from '@/components/ui/table/TableHeader.vue'
+import TableBody from '@/components/ui/table/TableBody.vue'
+import TableHead from '@/components/ui/table/TableHead.vue'
+import TableRow from '@/components/ui/table/TableRow.vue'
+import TableCell from '@/components/ui/table/TableCell.vue'
+import TableCaption from '@/components/ui/table/TableCaption.vue'
+import TableFooter from '@/components/ui/table/TableFooter.vue'
+</script>
+
+<template>
+    <Table>
+        <TableCaption>A list of your recent invoices.</TableCaption>
+        <TableHeader>
+            <TableRow>
+                <TableHead class="w-[100px]">Invoice</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead class="text-right">Amount</TableHead>
+            </TableRow>
+        </TableHeader>
+        <TableBody>
+            <TableRow>
+                <TableCell class="font-medium">INV001</TableCell>
+                <TableCell>Paid</TableCell>
+                <TableCell class="text-right">$250.00</TableCell>
+            </TableRow>
+            <TableRow>
+                <TableCell class="font-medium">INV002</TableCell>
+                <TableCell>Pending</TableCell>
+                <TableCell class="text-right">$150.00</TableCell>
+            </TableRow>
+        </TableBody>
+        <TableFooter>
+            <TableRow>
+                <TableCell colspan="2">Total</TableCell>
+                <TableCell class="text-right">$400.00</TableCell>
+            </TableRow>
+        </TableFooter>
+    </Table>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Table` | 根表格容器，带边框和阴影 |
+| `TableHeader` | 表头区域（`<thead>`） |
+| `TableBody` | 表体区域（`<tbody>`） |
+| `TableFooter` | 表尾区域（`<tfoot>`） |
+| `TableRow` | 表格行（`<tr>`），带底部边框 |
+| `TableHead` | 头部单元格（`<th>`），粗体文字 |
+| `TableCell` | 数据单元格（`<td>`） |
+| `TableCaption` | 表格标题（`<caption>`） |
+
+## 属性
+
+所有子组件均接受：
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
diff --git a/apps/docs/components/tabs.md b/apps/docs/components/tabs.md
new file mode 100644
index 0000000..7f4d2ad
--- /dev/null
+++ b/apps/docs/components/tabs.md
@@ -0,0 +1,89 @@
+---
+title: Tabs 标签页
+description: 选项卡组件，提供按压切换动画和极高辨识度的激活状态边框。
+---
+
+# Tabs 标签页
+
+基于 reka-ui 的 Tabs 原语构建的新粗野主义风格标签页导航组件。
+
+## 预览
+
+<ComponentPreview>
+  <TabsDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="tabs" />
+
+## 用法
+
+```vue
+<script setup>
+import { Tabs } from '@/components/ui'
+import TabsList from '@/components/ui/tabs/TabsList.vue'
+import TabsTrigger from '@/components/ui/tabs/TabsTrigger.vue'
+import TabsContent from '@/components/ui/tabs/TabsContent.vue'
+</script>
+
+<template>
+    <Tabs default-value="account">
+        <TabsList>
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+            <p class="text-sm">Manage your account settings.</p>
+        </TabsContent>
+        <TabsContent value="password">
+            <p class="text-sm">Change your password here.</p>
+        </TabsContent>
+    </Tabs>
+</template>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `Tabs` | 根组件（从 reka-ui 重新导出为 `TabsRoot`） |
+| `TabsList` | 标签触发器容器 |
+| `TabsTrigger` | 可点击的标签按钮 |
+| `TabsContent` | 每个标签的内容面板 |
+
+## 属性
+
+### Tabs
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `defaultValue` | `string` | — |
+| `modelValue` | `string` | — |
+
+### TabsTrigger
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `value` | `string` | —（必填） |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+### TabsContent
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `value` | `string` | —（必填） |
+| `class` | `string` | — |
+
+### TabsList
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+
+## 无障碍
+
+- 方向键在标签触发器之间导航
+- 标签内容通过 ARIA 属性与其触发器关联
+- 激活标签具有 `aria-selected="true"`
diff --git a/apps/docs/components/tags-input.md b/apps/docs/components/tags-input.md
new file mode 100644
index 0000000..d2ad1d0
--- /dev/null
+++ b/apps/docs/components/tags-input.md
@@ -0,0 +1,86 @@
+---
+title: TagsInput 标签输入
+description: 标签输入框组件，用于输入或粘贴以添加标签、分类，支持键盘快捷键和退格键删除。
+---
+
+# TagsInput 标签输入
+
+新粗野主义风格的标签录入组件，常用于文章标签、邮件收件人、关键词筛选等表单场景。
+
+## 预览
+
+<ComponentPreview>
+  <TagsInputDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="tags-input" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import {
+    TagsInput,
+    TagsInputInput,
+    TagsInputItem,
+    TagsInputItemText,
+    TagsInputItemDelete
+} from '@/components/ui/tags-input'
+
+const tags = ref(['vue', 'css'])
+</script>
+
+<template>
+    <TagsInput v-model="tags">
+        <TagsInputItem v-for="tag in tags" :key="tag" :value="tag">
+            <TagsInputItemText>{{ tag }}</TagsInputItemText>
+            <TagsInputItemDelete />
+        </TagsInputItem>
+        <TagsInputInput placeholder="Add tag..." />
+    </TagsInput>
+</template>
+```
+
+## 变体
+
+可以使用 `TagsInputItem` 的 `variant` 属性定制单个标签的配色方案：
+
+| 变体 | 颜色说明 |
+|------|----------|
+| `primary` | 默认珊瑚红背景，配黑色粗边框 |
+| `secondary` | 薄荷青背景 |
+| `accent` | 粗野黄色背景 |
+| `success` | 经典绿色背景 |
+| `danger` | 经典红色背景 |
+| `default` | 纯白背景 |
+
+```vue
+<template>
+    <TagsInputItem value="css" variant="secondary">
+        <TagsInputItemText>CSS</TagsInputItemText>
+        <TagsInputItemDelete />
+    </TagsInputItem>
+</template>
+```
+
+## Props
+
+### TagsInput Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `modelValue` | `string[]` | `[]` | 标签数据列表 |
+| `disabled` | `boolean` | `false` | 是否禁用输入 |
+| `max` | `number` | — | 最大允许标签数 |
+| `addOnPaste` | `boolean` | `false` | 是否在粘贴时根据分词自动添加标签 |
+
+### TagsInputItem Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `value` | `string` | — | 标签值 (必填) |
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'danger' \| 'success'` | `'primary'` | 标签的视觉配色变体 |
+| `disabled` | `boolean` | `false` | 是否禁用此标签 |
diff --git a/apps/docs/components/textarea.md b/apps/docs/components/textarea.md
new file mode 100644
index 0000000..aa57402
--- /dev/null
+++ b/apps/docs/components/textarea.md
@@ -0,0 +1,111 @@
+---
+title: Textarea 文本域
+description: 多行文本输入域，支持自适应高度或固定行高，硬边框外观。
+---
+
+# Textarea 文本域
+
+新粗野主义风格多行文本输入框，支持变体、尺寸和 v-model。
+
+## 预览
+
+<ComponentPreview>
+  <TextareaDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="textarea" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Textarea from '@/components/ui/textarea/Textarea.vue'
+
+const message = ref('')
+</script>
+
+<template>
+    <Textarea v-model="message" placeholder="Type your message here..." />
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 标准边框 |
+| `error` | 危险色边框，主色聚焦阴影 |
+| `success` | 成功色边框，辅助色聚焦阴影 |
+
+## 尺寸
+
+| 尺寸 | 内边距 | 字体大小 |
+|------|--------|----------|
+| `sm` | `px-3 py-2` | `text-sm` |
+| `default` | `px-4 py-3` | `text-base` |
+| `lg` | `px-5 py-4` | `text-lg` |
+
+## 带标签
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Textarea from '@/components/ui/textarea/Textarea.vue'
+import Label from '@/components/ui/label/Label.vue'
+
+const bio = ref('')
+</script>
+
+<template>
+    <div class="space-y-2">
+        <Label for="bio">Bio</Label>
+        <Textarea id="bio" v-model="bio" placeholder="Tell us about yourself..." />
+    </div>
+</template>
+```
+
+## 禁用状态
+
+```vue
+<script setup>
+import Textarea from '@/components/ui/textarea/Textarea.vue'
+</script>
+
+<template>
+    <Textarea disabled placeholder="Disabled textarea" />
+</template>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `modelValue` | `string` | — |
+| `variant` | `'default' \| 'error' \| 'success'` | `'default'` |
+| `textareaSize` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `disabled` | `boolean` | `false` |
+| `placeholder` | `string` | — |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `string` |
+
+## 样式
+
+Textarea 默认设置了 `resize-none`。如需允许调整大小，可通过自定义 class 覆盖：
+
+```vue
+<script setup>
+import Textarea from '@/components/ui/textarea/Textarea.vue'
+</script>
+
+<template>
+    <Textarea class="resize-y" placeholder="Resizable textarea" />
+</template>
+```
diff --git a/apps/docs/components/theme-provider.tsx b/apps/docs/components/theme-provider.tsx
deleted file mode 100644
index 0e6efbb..0000000
--- a/apps/docs/components/theme-provider.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import type { ThemeProviderProps } from 'next-themes/dist/types';
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-}
diff --git a/apps/docs/components/theme-toggle.tsx b/apps/docs/components/theme-toggle.tsx
deleted file mode 100644
index 888b379..0000000
--- a/apps/docs/components/theme-toggle.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useTheme } from 'next-themes';
-import { Moon, Sun } from 'lucide-react';
-import { Button } from '@/components/ui';
-
-export function ThemeToggle() {
-    const { theme, setTheme } = useTheme();
-    const [mounted, setMounted] = React.useState(false);
-
-    React.useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) {
-        return (
-            <Button
-                variant="outline"
-                size="icon"
-                className="w-10 h-10 dark:border-white dark:text-white dark:bg-gray-900"
-            >
-                <Sun className="h-5 w-5" />
-            </Button>
-        );
-    }
-
-    return (
-        <Button
-            variant="outline"
-            size="icon"
-            className="w-10 h-10 dark:border-white dark:text-white dark:bg-gray-900 dark:hover:bg-gray-800"
-            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-        >
-            {theme === 'dark' ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
-            <span className="sr-only">Toggle theme</span>
-        </Button>
-    );
-}
diff --git a/apps/docs/components/timeline.md b/apps/docs/components/timeline.md
new file mode 100644
index 0000000..a5b03d1
--- /dev/null
+++ b/apps/docs/components/timeline.md
@@ -0,0 +1,89 @@
+---
+title: Timeline 时间线
+description: 时间线组件，用于垂直或水平展示一系列时间事件、里程碑或活动日志。
+---
+
+# Timeline 时间线
+
+以一条主线串联的流式信息展示组件，适用于构建企业发展里程碑、版本发布日志、以及任务审批进度流程。
+
+## 预览
+
+<ComponentPreview>
+  <TimelineDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="timeline" />
+
+## 用法
+
+```vue
+<script setup>
+import {
+    Timeline,
+    TimelineItem,
+    TimelineSeparator,
+    TimelineDot,
+    TimelineConnector,
+    TimelineContent
+} from '@/components/ui/timeline'
+</script>
+
+<template>
+    <Timeline orientation="vertical">
+        <!-- 节点 1 -->
+        <TimelineItem>
+            <TimelineSeparator>
+                <TimelineDot variant="primary" shape="circle">1</TimelineDot>
+                <TimelineConnector />
+            </TimelineSeparator>
+            <TimelineContent class="pl-2">
+                <div class="font-black">第一阶段</div>
+                <p class="font-normal text-sm mt-1">这里是第一阶段的信息说明。</p>
+            </TimelineContent>
+        </TimelineItem>
+        
+        <!-- 节点 2 -->
+        <TimelineItem>
+            <TimelineSeparator>
+                <TimelineDot variant="accent" shape="square">2</TimelineDot>
+            </TimelineSeparator>
+            <TimelineContent class="pl-2">
+                <div class="font-black">第二阶段</div>
+                <p class="font-normal text-sm mt-1">这里是第二阶段的信息说明。</p>
+            </TimelineContent>
+        </TimelineItem>
+    </Timeline>
+</template>
+```
+
+## 节点属性配置
+
+`TimelineDot` 支持多样化的新粗野主义几何设计与颜色主题，通过 `shape` 和 `variant` 进行自定义：
+
+### 形状选择 (`shape`)
+- `circle` (默认)：经典的圆形小徽章。
+- `square`：方正的硬朗线条卡片。
+- `diamond`：斜向 45 度旋转的菱形（文字插槽内容会被内部自动反向微调，以防排版发生倾斜）。
+
+### 配色变体 (`variant`)
+- `'primary' | 'secondary' | 'accent' | 'success' | 'danger' | 'default'`
+
+## Props
+
+### Timeline Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | 时间线排版布局朝向 |
+| `class` | `string` | `""` | 整体包裹容器自定义样式类 |
+
+### TimelineDot Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `variant` | `'default' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'danger'` | `'accent'` | 配色变体 |
+| `shape` | `'circle' \| 'square' \| 'diamond'` | `'circle'` | 几何形态变体 |
+| `class` | `string` | `""` | 节点微标的自定义样式类 |
diff --git a/apps/docs/components/toast.md b/apps/docs/components/toast.md
new file mode 100644
index 0000000..a762356
--- /dev/null
+++ b/apps/docs/components/toast.md
@@ -0,0 +1,138 @@
+---
+title: Toast 轻提示
+description: 全局通知气泡组件，支持成功、失败、信息等多种类型的通知分发。
+---
+
+# Toast 轻提示
+
+新粗野主义风格通知提示系统，提供 `useToast` 组合式函数、5 种变体和 `ToastContainer` 用于渲染。
+
+## 预览
+
+<ComponentPreview>
+  <ToastDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="toast" />
+
+## 用法
+
+### 1. 在应用中添加 ToastContainer
+
+将 `ToastContainer` 放置在根 `App.vue` 中：
+
+```vue
+<script setup>
+import ToastContainer from '@/components/ui/toast/ToastContainer.vue'
+</script>
+
+<template>
+    <router-view />
+    <ToastContainer />
+</template>
+```
+
+### 2. 使用 useToast 组合式函数
+
+```vue
+<script setup>
+import { useToast } from '@/composables/useToast'
+
+const { success, error, warning, info, addToast } = useToast()
+
+function handleSave() {
+    success('Saved!', 'Your changes have been saved.')
+}
+
+function handleError() {
+    error('Error', 'Something went wrong. Please try again.')
+}
+</script>
+
+<template>
+    <button @click="handleSave">Save</button>
+    <button @click="handleError">Trigger Error</button>
+</template>
+```
+
+## 变体
+
+| 变体 | 背景 | 文字 |
+|------|------|------|
+| `default` | `bg-brutal-bg` | `text-brutal-fg` |
+| `success` | `bg-brutal-success` | `text-black` |
+| `error` | `bg-brutal-destructive` | `text-white` |
+| `warning` | `bg-brutal-accent` | `text-black` |
+| `info` | `bg-brutal-secondary` | `text-black` |
+
+## 尺寸
+
+| 尺寸 | 最大宽度 |
+|------|----------|
+| `sm` | `max-w-xs` |
+| `default` | `max-w-sm` |
+| `lg` | `max-w-md` |
+
+## useToast API
+
+```ts
+const {
+    toasts,       // Ref<ToastItem[]> - 响应式提示列表
+    addToast,     // (toast: Omit<ToastItem, 'id'>) => string
+    removeToast,  // (id: string) => void
+    clearToasts,  // () => void
+    success,      // (title: string, description?: string) => string
+    error,        // (title: string, description?: string) => string
+    warning,      // (title: string, description?: string) => string
+    info,         // (title: string, description?: string) => string
+} = useToast()
+```
+
+## 自定义提示
+
+```vue
+<script setup>
+import { useToast } from '@/composables/useToast'
+
+const { addToast } = useToast()
+
+function showCustomToast() {
+    addToast({
+        variant: 'warning',
+        title: 'Warning',
+        description: 'Your session will expire in 5 minutes.',
+        duration: 10000,
+    })
+}
+</script>
+```
+
+## ToastItem 类型
+
+```ts
+interface ToastItem {
+    id: string
+    variant?: 'default' | 'success' | 'error' | 'warning' | 'info'
+    title?: string
+    description?: string
+    duration?: number
+}
+```
+
+## 属性
+
+### Toast
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'success' \| 'error' \| 'warning' \| 'info'` | `'default'` |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `class` | `string` | — |
+
+### ToastContainer
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
diff --git a/apps/docs/components/toggle-group.md b/apps/docs/components/toggle-group.md
new file mode 100644
index 0000000..78eebae
--- /dev/null
+++ b/apps/docs/components/toggle-group.md
@@ -0,0 +1,103 @@
+---
+title: Toggle Group 切换组
+description: 切换按钮组，支持单选或多选组合，适合控制视图或排版。
+---
+
+# Toggle Group 切换组
+
+基于 reka-ui 的 ToggleGroup 原语构建的新粗野主义风格切换按钮组，支持单选或多选。
+
+## 预览
+
+<ComponentPreview>
+  <ToggleGroupDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="toggle-group" />
+
+## 用法
+
+### 单选
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import ToggleGroup from '@/components/ui/toggle-group/ToggleGroup.vue'
+import ToggleGroupItem from '@/components/ui/toggle-group/ToggleGroupItem.vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+const selected = ref('bold')
+</script>
+
+<template>
+    <ToggleGroup type="single" v-model="selected" variant="default">
+        <ToggleGroupItem value="bold">
+            <Bold class="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic">
+            <Italic class="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline">
+            <Underline class="h-4 w-4" />
+        </ToggleGroupItem>
+    </ToggleGroup>
+</template>
+```
+
+### 多选
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import ToggleGroup from '@/components/ui/toggle-group/ToggleGroup.vue'
+import ToggleGroupItem from '@/components/ui/toggle-group/ToggleGroupItem.vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+const selected = ref(['bold'])
+</script>
+
+<template>
+    <ToggleGroup type="multiple" v-model="selected" variant="default">
+        <ToggleGroupItem value="bold">
+            <Bold class="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic">
+            <Italic class="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline">
+            <Underline class="h-4 w-4" />
+        </ToggleGroupItem>
+    </ToggleGroup>
+</template>
+```
+
+## 属性
+
+### ToggleGroup
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `type` | `'single' \| 'multiple'` | —（必填） |
+| `modelValue` | `string \| string[]` | — |
+| `variant` | `'default' \| 'outline'` | `'default'` |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+### ToggleGroupItem
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `value` | `string` | —（必填） |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+## 事件
+
+### ToggleGroup
+
+| 事件 | 载荷 |
+|------|------|
+| `update:modelValue` | `string \| string[]` |
diff --git a/apps/docs/components/toggle.md b/apps/docs/components/toggle.md
new file mode 100644
index 0000000..7265539
--- /dev/null
+++ b/apps/docs/components/toggle.md
@@ -0,0 +1,84 @@
+---
+title: Toggle 切换
+description: 独立切换按钮，用于表示启用/关闭或选中/未选中状态。
+---
+
+# Toggle 切换
+
+基于 reka-ui 的 Toggle 原语构建的新粗野主义风格切换按钮，支持按下状态。
+
+## 预览
+
+<ComponentPreview>
+  <ToggleDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="toggle" />
+
+## 用法
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import Toggle from '@/components/ui/toggle/Toggle.vue'
+import { Bold, Italic, Underline } from 'lucide-vue-next'
+
+const bold = ref(false)
+const italic = ref(false)
+const underline = ref(false)
+</script>
+
+<template>
+    <div class="flex items-center gap-2">
+        <Toggle v-model:pressed="bold" variant="default" size="default">
+            <Bold class="h-4 w-4" />
+        </Toggle>
+        <Toggle v-model:pressed="italic" variant="default" size="default">
+            <Italic class="h-4 w-4" />
+        </Toggle>
+        <Toggle v-model:pressed="underline" variant="default" size="default">
+            <Underline class="h-4 w-4" />
+        </Toggle>
+    </div>
+</template>
+```
+
+## 变体
+
+| 变体 | 说明 |
+|------|------|
+| `default` | 带背景和小阴影，按下时为主色背景 |
+| `outline` | 透明带边框，按下时为辅助色背景 |
+
+## 尺寸
+
+| 尺寸 | 高度 | 最小宽度 | 字体大小 |
+|------|------|----------|----------|
+| `sm` | `h-8` | `min-w-8` | `text-xs` |
+| `default` | `h-10` | `min-w-10` | `text-sm` |
+| `lg` | `h-12` | `min-w-12` | `text-sm` |
+
+## 属性
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `variant` | `'default' \| 'outline'` | `'default'` |
+| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` |
+| `pressed` | `boolean` | — |
+| `defaultValue` | `boolean` | — |
+| `disabled` | `boolean` | — |
+| `class` | `string` | — |
+
+## 事件
+
+| 事件 | 载荷 |
+|------|------|
+| `update:pressed` | `boolean` |
+
+## 样式
+
+- **未按下**：带背景和小阴影，悬停时上浮并增大阴影
+- **按下**：主色/辅助色背景，无阴影，向下偏移（按下偏移量）
+- **禁用**：降低不透明度，显示禁止光标
diff --git a/apps/docs/components/tooltip.md b/apps/docs/components/tooltip.md
new file mode 100644
index 0000000..1413e36
--- /dev/null
+++ b/apps/docs/components/tooltip.md
@@ -0,0 +1,126 @@
+---
+title: Tooltip 工具提示
+description: 工具提示浮层组件，悬停或聚焦时快速展示辅助文本。
+---
+
+# Tooltip 工具提示
+
+基于 reka-ui 的 Tooltip 原语构建的新粗野主义风格工具提示，悬停时显示信息文字。
+
+## 预览
+
+<ComponentPreview>
+  <TooltipDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="tooltip" />
+
+## 用法
+
+```vue
+<script setup>
+import { TooltipProvider, Tooltip, TooltipTrigger } from '@/components/ui'
+import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue'
+import Button from '@/components/ui/button/Button.vue'
+</script>
+
+<template>
+    <TooltipProvider>
+        <Tooltip>
+            <TooltipTrigger as-child>
+                <Button variant="outline">Hover me</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+                <p>This is a tooltip</p>
+            </TooltipContent>
+        </Tooltip>
+    </TooltipProvider>
+</template>
+```
+
+## 配合 Provider 使用
+
+用 `TooltipProvider` 包裹你的应用（或某个区域）以启用工具提示：
+
+```vue
+<script setup>
+import { TooltipProvider } from '@/components/ui'
+</script>
+
+<template>
+    <TooltipProvider>
+        <router-view />
+    </TooltipProvider>
+</template>
+```
+
+## 触发延迟
+
+通过 `TooltipProvider` 的 `delayDuration` 属性控制从指针进入触发元素到工具提示打开的延迟时间（毫秒）。也可以在单个 `Tooltip` 上通过 `delayDuration` 覆盖全局设置。
+
+```vue
+<TooltipProvider :delay-duration="0">
+    <Tooltip>
+        <TooltipTrigger>
+            <Button>立即显示</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+            <p>无延迟</p>
+        </TooltipContent>
+    </Tooltip>
+</TooltipProvider>
+
+<TooltipProvider :delay-duration="700">
+    <Tooltip :delay-duration="1500">
+        <TooltipTrigger>
+            <Button>长延迟</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+            <p>覆盖为 1500ms</p>
+        </TooltipContent>
+    </Tooltip>
+</TooltipProvider>
+```
+
+## 子组件
+
+| 组件 | 说明 |
+|------|------|
+| `TooltipProvider` | 上下文提供者（必需的祖先组件） |
+| `Tooltip` | 根组件（从 reka-ui 重新导出为 `TooltipRoot`） |
+| `TooltipTrigger` | 悬停时触发工具提示的元素 |
+| `TooltipContent` | 工具提示内容面板 |
+
+## 属性
+
+### TooltipProvider
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `delayDuration` | `number` | `700` | 指针进入触发元素后到工具提示打开的延迟时间（毫秒） |
+| `skipDelayDuration` | `number` | `300` | 从一个工具提示移到另一个时跳过延迟的时间窗口（毫秒） |
+| `disableHoverableContent` | `boolean` | `false` | 为 `true` 时，指针移入内容区域会关闭工具提示 |
+
+### Tooltip
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `delayDuration` | `number` | `700` | 覆盖 Provider 的延迟时间，针对单个工具提示自定义 |
+| `disableHoverableContent` | `boolean` | `false` | 继承自 Provider，可单独覆盖 |
+| `disableClosingTrigger` | `boolean` | `false` | 为 `true` 时，点击触发元素不会关闭工具提示 |
+| `disabled` | `boolean` | `false` | 为 `true` 时，禁用工具提示 |
+
+### TooltipContent
+
+| 属性 | 类型 | 默认值 |
+|------|------|--------|
+| `class` | `string` | — |
+| `sideOffset` | `number` | — |
+
+## 无障碍
+
+- 工具提示在悬停和聚焦时出现
+- 按 `Escape` 键关闭工具提示
+- 工具提示内容可被屏幕阅读器朗读
diff --git a/apps/docs/components/tree-view.md b/apps/docs/components/tree-view.md
new file mode 100644
index 0000000..3d480ff
--- /dev/null
+++ b/apps/docs/components/tree-view.md
@@ -0,0 +1,79 @@
+---
+title: TreeView 树形目录
+description: 递归树形组件，支持节点展开折叠、单选、图标、自定义缩进，适合文件系统、分类层级等场景。
+---
+
+# TreeView 树形目录
+
+可递归展开的层级数据可视化组件，内置文件夹 / 文件图标，支持键盘导航与受控单选状态。
+
+## 预览
+
+<ComponentPreview>
+  <TreeViewDemo />
+</ComponentPreview>
+
+## 安装
+
+<InstallationTabs componentName="tree-view" />
+
+## 用法
+
+```vue
+<script setup>
+import { TreeView } from '@/components/ui/tree-view'
+import type { TreeNode } from '@/components/ui/tree-view'
+
+const nodes: TreeNode[] = [
+    {
+        id: 'src',
+        label: 'src',
+        children: [
+            { id: 'button', label: 'Button.vue' },
+            { id: 'input', label: 'Input.vue' },
+        ],
+    },
+    { id: 'pkg', label: 'package.json' },
+]
+
+const selected = ref(null)
+</script>
+
+<template>
+    <TreeView
+        v-model="selected"
+        :nodes="nodes"
+        :default-expanded="['src']"
+    />
+</template>
+```
+
+## TreeNode 类型
+
+```ts
+interface TreeNode {
+    id: string       // 唯一标识
+    label: string    // 显示文本
+    children?: TreeNode[]  // 子节点（省略则为叶节点）
+    data?: unknown   // 自定义附加数据
+}
+```
+
+## Props
+
+### TreeView Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `nodes` | `TreeNode[]` | — | 树形数据源 |
+| `modelValue` | `string \| null` | `null` | 当前选中节点的 id（v-model） |
+| `defaultExpanded` | `string[]` | `[]` | 初始展开的节点 id 列表 |
+| `class` | `string` | — | 根节点自定义样式类 |
+
+## 事件
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `update:modelValue` | `string \| null` | 选中节点 id 变更 |
+| `select` | `TreeNode` | 点击任意节点时触发 |
+| `expand` | `(id: string, expanded: boolean)` | 展开 / 折叠节点时触发 |
diff --git a/apps/docs/components/ui/alert-dialog.tsx b/apps/docs/components/ui/alert-dialog.tsx
deleted file mode 100644
index 8fec28b..0000000
--- a/apps/docs/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-
-import { cn } from '@/lib/utils';
-import { buttonVariants } from '@/components/ui/button';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Overlay
-        className={cn(
-            'fixed inset-0 z-50 bg-black/50',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            className
-        )}
-        {...props}
-        ref={ref}
-    />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-    <AlertDialogPortal>
-        <AlertDialogOverlay />
-        <AlertDialogPrimitive.Content
-            ref={ref}
-            className={cn(
-                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4',
-                'bg-brutal-bg p-6 text-brutal-fg border-brutal border-3 shadow-brutal dark:shadow-brutal-white rounded-none',
-                'duration-200',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2',
-                'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2',
-                className
-            )}
-            {...props}
-        />
-    </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', className)}
-        {...props}
-    />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',
-            className
-        )}
-        {...props}
-    />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Title
-        ref={ref}
-        className={cn('text-lg font-black tracking-tight text-brutal-fg', className)}
-        {...props}
-    />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Description
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Action>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
-        variant?: 'primary' | 'secondary' | 'accent' | 'danger' | 'outline';
-    }
->(({ className, variant = 'primary', ...props }, ref) => (
-    <AlertDialogPrimitive.Action
-        ref={ref}
-        className={cn(buttonVariants({ variant }), className)}
-        {...props}
-    />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Cancel
-        ref={ref}
-        className={cn(buttonVariants({ variant: 'outline' }), className)}
-        {...props}
-    />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-    AlertDialog,
-    AlertDialogPortal,
-    AlertDialogOverlay,
-    AlertDialogTrigger,
-    AlertDialogContent,
-    AlertDialogHeader,
-    AlertDialogFooter,
-    AlertDialogTitle,
-    AlertDialogDescription,
-    AlertDialogAction,
-    AlertDialogCancel,
-};
diff --git a/apps/docs/components/ui/alert.tsx b/apps/docs/components/ui/alert.tsx
deleted file mode 100644
index 2c3114b..0000000
--- a/apps/docs/components/ui/alert.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva(
-    [
-        'relative w-full p-4',
-        'border-3 border-black dark:border-gray-600',
-        'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#64748b]',
-        '[&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
-        '[&>svg]:h-5 [&>svg]:w-5 [&>svg]:stroke-[2.5]',
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'bg-white text-black dark:bg-gray-900 dark:text-gray-100',
-                primary: 'bg-[#FF6B6B] text-black',
-                secondary: 'bg-[#4ECDC4] text-black',
-                success: 'bg-[#7FB069] text-black',
-                warning: 'bg-[#FFE66D] text-black',
-                danger: 'bg-[#EF476F] text-white',
-                info: 'bg-[#4A90D9] text-white',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-        },
-    }
-);
-
-export interface AlertProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof alertVariants> {}
-
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-    ({ className, variant, ...props }, ref) => (
-        <div
-            ref={ref}
-            role="alert"
-            className={cn(alertVariants({ variant }), className)}
-            {...props}
-        />
-    )
-);
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-    ({ className, ...props }, ref) => (
-        <h5
-            ref={ref}
-            className={cn('mb-1 font-black tracking-tight leading-none', className)}
-            {...props}
-        />
-    )
-);
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-    <div
-        ref={ref}
-        className={cn('text-sm font-medium [&_p]:leading-relaxed', className)}
-        {...props}
-    />
-));
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertTitle, AlertDescription, alertVariants };
diff --git a/apps/docs/components/ui/auth-card.tsx b/apps/docs/components/ui/auth-card.tsx
deleted file mode 100644
index 46948ca..0000000
--- a/apps/docs/components/ui/auth-card.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { Mail, Lock, Github, Chrome } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-export interface AuthCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    description?: string;
-    onLoginSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
-    onForgotPasswordClick?: () => void;
-    onGoogleClick?: () => void;
-    onGithubClick?: () => void;
-}
-
-export function AuthCard({
-    title = 'Welcome back',
-    description = 'Enter your credential tags to access your custom developer workspace console.',
-    onLoginSubmit,
-    onForgotPasswordClick,
-    onGoogleClick,
-    onGithubClick,
-    className,
-    ...props
-}: AuthCardProps) {
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (onLoginSubmit) onLoginSubmit(e);
-    };
-
-    return (
-        <div className={`w-full max-w-[420px] mx-auto ${className || ''}`} {...props}>
-            <Card className="border-3 border-brutal rounded-none shadow-brutal bg-white dark:bg-gray-800 p-2">
-                <CardHeader className="space-y-2 pb-6 border-b-3 border-brutal bg-gray-50 dark:bg-gray-900/50 p-4">
-                    <CardTitle className="text-3xl font-black tracking-tight leading-none text-brutal-fg">
-                        {title}
-                    </CardTitle>
-                    <CardDescription className="text-sm font-bold text-gray-600 dark:text-gray-400">
-                        {description}
-                    </CardDescription>
-                </CardHeader>
-
-                <CardContent className="space-y-6 pt-6">
-                    <div className="grid grid-cols-2 gap-3">
-                        <Button
-                            variant="outline"
-                            className="w-full font-black text-sm flex items-center justify-center gap-2"
-                            onClick={onGoogleClick}
-                            type="button"
-                        >
-                            <Chrome className="h-4 w-4 stroke-[3] text-red-500" />
-                            <span>Google</span>
-                        </Button>
-                        <Button
-                            variant="outline"
-                            className="w-full font-black text-sm flex items-center justify-center gap-2"
-                            onClick={onGithubClick}
-                            type="button"
-                        >
-                            <Github className="h-4 w-4 stroke-[3]" />
-                            <span>GitHub</span>
-                        </Button>
-                    </div>
-
-                    <div className="relative flex items-center justify-center">
-                        <div className="absolute inset-0 flex items-center">
-                            <span className="w-full border-t-3 border-brutal" />
-                        </div>
-                        <span className="relative z-10 px-3 bg-white dark:bg-gray-800 font-black text-xs uppercase tracking-wider text-gray-500">
-                            or email login
-                        </span>
-                    </div>
-
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                        <div className="space-y-2">
-                            <Label htmlFor="auth-email" className="font-black text-sm text-brutal-fg flex items-center gap-2">
-                                <Mail className="h-4 w-4 stroke-[2.5]" />
-                                <span>Email Address</span>
-                            </Label>
-                            <Input
-                                id="auth-email"
-                                type="email"
-                                placeholder="name@domain.com"
-                                required
-                                className="w-full"
-                            />
-                        </div>
-
-                        <div className="space-y-2">
-                            <div className="flex items-center justify-between">
-                                <Label htmlFor="auth-password" className="font-black text-sm text-brutal-fg flex items-center gap-2">
-                                    <Lock className="h-4 w-4 stroke-[2.5]" />
-                                    <span>Password</span>
-                                </Label>
-                                <button
-                                    onClick={onForgotPasswordClick}
-                                    type="button"
-                                    className="text-xs font-black underline hover:text-brutal-primary focus:outline-none"
-                                >
-                                    Forgot password?
-                                </button>
-                            </div>
-                            <Input
-                                id="auth-password"
-                                type="password"
-                                placeholder="••••••••"
-                                required
-                                className="w-full"
-                            />
-                        </div>
-
-                        <Button type="submit" variant="primary" className="w-full py-6 font-black text-base mt-2">
-                            Access Account console
-                        </Button>
-                    </form>
-                </CardContent>
-
-                <CardFooter className="pt-4 border-t-3 border-brutal bg-gray-50 dark:bg-gray-900/50 p-4 justify-center">
-                    <p className="text-xs font-bold text-gray-600 dark:text-gray-400">
-                        Don't have an account?{' '}
-                        <button type="button" className="font-black underline hover:text-brutal-primary">
-                            Register workspace
-                        </button>
-                    </p>
-                </CardFooter>
-            </Card>
-        </div>
-    );
-}
diff --git a/apps/docs/components/ui/avatar.tsx b/apps/docs/components/ui/avatar.tsx
deleted file mode 100644
index c861b0b..0000000
--- a/apps/docs/components/ui/avatar.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const avatarVariants = cva(
-    ['relative flex shrink-0 overflow-hidden', 'border-3 border-black', 'bg-gray-100'],
-    {
-        variants: {
-            size: {
-                sm: 'h-8 w-8',
-                default: 'h-10 w-10',
-                lg: 'h-14 w-14',
-                xl: 'h-20 w-20',
-            },
-            shape: {
-                square: '',
-                rounded: 'rounded-lg',
-            },
-        },
-        defaultVariants: {
-            size: 'default',
-            shape: 'square',
-        },
-    }
-);
-
-export interface AvatarProps
-    extends React.HTMLAttributes<HTMLSpanElement>,
-        VariantProps<typeof avatarVariants> {}
-
-const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
-    ({ className, size, shape, ...props }, ref) => (
-        <span ref={ref} className={cn(avatarVariants({ size, shape }), className)} {...props} />
-    )
-);
-Avatar.displayName = 'Avatar';
-
-const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
-    ({ className, ...props }, ref) => (
-        <img
-            ref={ref}
-            className={cn('aspect-square h-full w-full object-cover', className)}
-            {...props}
-        />
-    )
-);
-AvatarImage.displayName = 'AvatarImage';
-
-const AvatarFallback = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
-    ({ className, ...props }, ref) => (
-        <span
-            ref={ref}
-            className={cn(
-                'flex h-full w-full items-center justify-center bg-gray-200 font-bold',
-                className
-            )}
-            {...props}
-        />
-    )
-);
-AvatarFallback.displayName = 'AvatarFallback';
-
-export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
diff --git a/apps/docs/components/ui/badge.tsx b/apps/docs/components/ui/badge.tsx
deleted file mode 100644
index 487656d..0000000
--- a/apps/docs/components/ui/badge.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-    [
-        'inline-flex items-center',
-        'border-2 border-black',
-        'font-bold tracking-wide',
-        'transition-colors',
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'bg-white text-black shadow-[2px_2px_0px_0px_#000000]',
-                primary: 'bg-[#FF6B6B] text-black shadow-[2px_2px_0px_0px_#000000]',
-                secondary: 'bg-[#4ECDC4] text-black shadow-[2px_2px_0px_0px_#000000]',
-                accent: 'bg-[#FFE66D] text-black shadow-[2px_2px_0px_0px_#000000]',
-                danger: 'bg-[#EF476F] text-white shadow-[2px_2px_0px_0px_#000000]',
-                success: 'bg-[#7FB069] text-black shadow-[2px_2px_0px_0px_#000000]',
-                outline: 'bg-transparent text-black dark:text-white',
-            },
-            size: {
-                sm: 'px-2 py-0.5 text-xs',
-                default: 'px-3 py-1 text-sm',
-                lg: 'px-4 py-1.5 text-base',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-export interface BadgeProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof badgeVariants> {}
-
-const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-    ({ className, variant, size, ...props }, ref) => (
-        <div ref={ref} className={cn(badgeVariants({ variant, size, className }))} {...props} />
-    )
-);
-Badge.displayName = 'Badge';
-
-export { Badge, badgeVariants };
diff --git a/apps/docs/components/ui/brutalist-hero.tsx b/apps/docs/components/ui/brutalist-hero.tsx
deleted file mode 100644
index 02b05e1..0000000
--- a/apps/docs/components/ui/brutalist-hero.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { ArrowRight, Sparkles } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-
-export interface BrutalistHeroProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    subtitle?: string;
-    primaryCtaText?: string;
-    secondaryCtaText?: string;
-    onPrimaryCtaClick?: () => void;
-    onSecondaryCtaClick?: () => void;
-}
-
-export function BrutalistHero({
-    title = 'Build Bold Interfaces Faster with BrutxUI',
-    subtitle = 'A hyper-responsive, neo-brutalist component registry built with Radix UI and Tailwind CSS. Designed for devs who dare to be different.',
-    primaryCtaText = 'Get Started Now',
-    secondaryCtaText = 'View Component Registry',
-    onPrimaryCtaClick,
-    onSecondaryCtaClick,
-    className,
-    ...props
-}: BrutalistHeroProps) {
-    return (
-        <section
-            className={`w-full py-12 md:py-24 lg:py-32 bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-none transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="container px-4 md:px-6 mx-auto">
-                <div className="grid gap-12 lg:grid-cols-2 lg:gap-16 items-center">
-                    <div className="flex flex-col justify-center space-y-6 text-left">
-                        <div className="inline-flex items-center space-x-2 bg-brutal-accent text-black px-3 py-1 border-3 border-brutal w-fit font-black text-sm uppercase tracking-wider rotate-[-1deg]">
-                            <Sparkles className="h-4 w-4 stroke-[3]" />
-                            <span>V0.2.1 Release</span>
-                        </div>
-
-                        <h1 className="text-4xl font-black tracking-tight sm:text-5xl md:text-6xl lg:text-7xl leading-[1.05]">
-                            {title}
-                        </h1>
-
-                        <p className="max-w-[600px] text-lg md:text-xl font-bold text-gray-700 dark:text-gray-300 leading-relaxed">
-                            {subtitle}
-                        </p>
-
-                        <div className="flex flex-col sm:flex-row gap-4 pt-4">
-                            <Button
-                                size="lg"
-                                variant="primary"
-                                className="font-black text-lg gap-2"
-                                onClick={onPrimaryCtaClick}
-                            >
-                                <span>{primaryCtaText}</span>
-                                <ArrowRight className="h-5 w-5 stroke-[3]" />
-                            </Button>
-                            <Button
-                                size="lg"
-                                variant="outline"
-                                className="font-black text-lg"
-                                onClick={onSecondaryCtaClick}
-                            >
-                                {secondaryCtaText}
-                            </Button>
-                        </div>
-                    </div>
-
-                    <div className="relative mx-auto w-full max-w-[500px] lg:max-w-none">
-                        <div className="absolute inset-0 bg-brutal-secondary translate-x-3 translate-y-3 border-3 border-brutal rounded-none" />
-                        <Card className="relative z-10 border-3 border-brutal bg-white dark:bg-gray-800 rounded-none shadow-none p-2">
-                            <div className="flex items-center justify-between border-b-3 border-brutal pb-2 mb-4 bg-gray-100 dark:bg-gray-700 p-2">
-                                <div className="flex space-x-2">
-                                    <div className="w-3.5 h-3.5 rounded-full bg-brutal-destructive border-2 border-brutal" />
-                                    <div className="w-3.5 h-3.5 rounded-full bg-brutal-accent border-2 border-brutal" />
-                                    <div className="w-3.5 h-3.5 rounded-full bg-brutal-success border-2 border-brutal" />
-                                </div>
-                                <span className="text-xs font-black uppercase tracking-wider opacity-60">brutx-terminal</span>
-                            </div>
-                            <CardContent className="font-mono text-sm space-y-3 text-black dark:text-white pt-2">
-                                <p className="text-brutal-destructive font-black">~/projects/my-bold-saas</p>
-                                <p className="flex items-center gap-2">
-                                    <span className="text-brutal-secondary font-black">$</span>
-                                    <span>npx brutx init</span>
-                                </p>
-                                <p className="text-gray-500 font-medium">Custom Tailwind design tokens configured</p>
-                                <p className="text-gray-500 font-medium">Global CSS token layer synchronized</p>
-                                <p className="flex items-center gap-2">
-                                    <span className="text-brutal-secondary font-black">$</span>
-                                    <span>npx brutx add hero pricing auth-card</span>
-                                </p>
-                                <p className="text-brutal-success font-black">Successfully added 3 blocks into /components/ui!</p>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/apps/docs/components/ui/button.tsx b/apps/docs/components/ui/button.tsx
deleted file mode 100644
index 60d2431..0000000
--- a/apps/docs/components/ui/button.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-import { Loader2 } from 'lucide-react';
-
-const buttonVariants = cva(
-    [
-        'inline-flex items-center justify-center gap-2',
-        'border-3 border-black dark:border-white',
-        'font-black tracking-wide',
-        'transition-all duration-150',
-        'focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2',
-        'disabled:opacity-50 disabled:pointer-events-none',
-        'active:translate-y-0.5 active:shadow-none',
-    ],
-    {
-        variants: {
-            variant: {
-                default: [
-                    'bg-white dark:bg-gray-900 text-black dark:text-white',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                ],
-                primary: [
-                    'bg-[#FF6B6B] text-black',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                ],
-                secondary: [
-                    'bg-[#4ECDC4] text-black',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                ],
-                accent: [
-                    'bg-[#FFE66D] text-black',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                ],
-                danger: [
-                    'bg-[#EF476F] text-white',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                ],
-                success: [
-                    'bg-[#7FB069] text-black',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                ],
-                outline: [
-                    'bg-transparent text-black dark:text-white',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                ],
-                ghost: [
-                    'bg-transparent text-black dark:text-white border-transparent',
-                    'shadow-none',
-                    'hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-black dark:hover:border-white',
-                ],
-                link: [
-                    'bg-transparent text-black dark:text-white border-transparent',
-                    'shadow-none underline-offset-4',
-                    'hover:underline',
-                ],
-            },
-            size: {
-                sm: 'h-9 px-3 py-1 text-sm',
-                default: 'h-11 px-5 py-2 text-base',
-                lg: 'h-13 px-8 py-3 text-lg',
-                xl: 'h-16 px-10 py-4 text-xl',
-                icon: 'h-11 w-11 p-0',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-    loading?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    (
-        {
-            className,
-            variant,
-            size,
-            asChild = false,
-            loading = false,
-            disabled,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        const Comp = asChild ? Slot : 'button';
-        const isDisabled = disabled || loading;
-
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                disabled={isDisabled}
-                {...props}
-            >
-                {loading ? (
-                    <>
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                        {children}
-                    </>
-                ) : (
-                    children
-                )}
-            </Comp>
-        );
-    }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
diff --git a/apps/docs/components/ui/calendar.tsx b/apps/docs/components/ui/calendar.tsx
deleted file mode 100644
index 2e1712c..0000000
--- a/apps/docs/components/ui/calendar.tsx
+++ /dev/null
@@ -1,251 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
-
-import { cn } from '@/lib/utils';
-import { Button, buttonVariants } from './button';
-
-function Calendar({
-    className,
-    classNames,
-    showOutsideDays = true,
-    captionLayout = 'label',
-    buttonVariant = 'outline',
-    formatters,
-    components,
-    ...props
-}: React.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
-}) {
-    const defaultClassNames = getDefaultClassNames();
-
-    return (
-        <DayPicker
-            showOutsideDays={showOutsideDays}
-            className={cn(
-                'p-2 sm:p-3 bg-[#FFFEF0] text-black dark:bg-gray-900 dark:text-gray-100',
-                'border-2 sm:border-3 border-black dark:border-white',
-                'shadow-[3px_3px_0px_0px_#000000] sm:shadow-[4px_4px_0px_0px_#000000]',
-                'dark:shadow-[3px_3px_0px_0px_#FFFFFF] sm:dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                'w-fit max-w-full overflow-x-auto',
-                className
-            )}
-            captionLayout={captionLayout}
-            formatters={{
-                formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
-                ...formatters,
-            }}
-            classNames={{
-                root: cn('w-fit select-none', defaultClassNames.root),
-                months: cn('flex gap-2 sm:gap-4 flex-col', defaultClassNames.months),
-                month: cn('flex flex-col gap-1 sm:gap-2', defaultClassNames.month),
-                nav: cn(
-                    'flex items-center gap-1 absolute top-0 inset-x-0 justify-between z-10',
-                    defaultClassNames.nav
-                ),
-                button_previous: cn(
-                    buttonVariants({ variant: buttonVariant, size: 'icon' }),
-                    'h-6 w-6 sm:h-7 sm:w-7 p-0 select-none',
-                    'border-2 border-black dark:border-white',
-                    'shadow-[2px_2px_0px_0px_#000000] dark:shadow-[2px_2px_0px_0px_#FFFFFF]',
-                    'hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[1px_1px_0px_0px_#000000]',
-                    'transition-all duration-100',
-                    'aria-disabled:opacity-50',
-                    defaultClassNames.button_previous
-                ),
-                button_next: cn(
-                    buttonVariants({ variant: buttonVariant, size: 'icon' }),
-                    'h-6 w-6 sm:h-7 sm:w-7 p-0 select-none',
-                    'border-2 border-black dark:border-white',
-                    'shadow-[2px_2px_0px_0px_#000000] dark:shadow-[2px_2px_0px_0px_#FFFFFF]',
-                    'hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[1px_1px_0px_0px_#000000]',
-                    'transition-all duration-100',
-                    'aria-disabled:opacity-50',
-                    defaultClassNames.button_next
-                ),
-                month_caption: cn(
-                    'flex items-center justify-center h-6 sm:h-7 relative',
-                    'font-black text-xs sm:text-sm tracking-tight uppercase text-black dark:text-gray-100',
-                    defaultClassNames.month_caption
-                ),
-                dropdowns: cn(
-                    'flex items-center text-[10px] sm:text-xs font-bold justify-center gap-1',
-                    defaultClassNames.dropdowns
-                ),
-                dropdown_root: cn(
-                    'relative border-2 border-black dark:border-white bg-white text-black dark:bg-gray-800 dark:text-gray-100',
-                    'shadow-[2px_2px_0px_0px_#000000] dark:shadow-[2px_2px_0px_0px_#FFFFFF]',
-                    'focus-within:ring-2 focus-within:ring-offset-1 focus-within:ring-black',
-                    defaultClassNames.dropdown_root
-                ),
-                dropdown: cn(
-                    'absolute inset-0 opacity-0 cursor-pointer',
-                    defaultClassNames.dropdown
-                ),
-                caption_label: cn(
-                    'select-none font-black tracking-tight text-black dark:text-gray-100',
-                    captionLayout === 'label'
-                        ? 'text-xs sm:text-sm'
-                        : 'pl-1 sm:pl-1.5 pr-0.5 flex items-center gap-0.5 sm:gap-1 text-[10px] sm:text-xs h-6 sm:h-7 [&>svg]:size-2.5 sm:[&>svg]:size-3',
-                    defaultClassNames.caption_label
-                ),
-                table: 'w-full border-collapse border-spacing-0',
-                weekdays: cn('', defaultClassNames.weekdays),
-                weekday: cn(
-                    'text-black dark:text-white font-black text-[8px] sm:text-[10px] select-none uppercase tracking-wide',
-                    'h-6 w-6 sm:h-8 sm:w-8 text-center',
-                    'bg-[#FFE66D] dark:bg-[#FFE66D] dark:text-black',
-                    'border sm:border-2 border-black dark:border-black',
-                    defaultClassNames.weekday
-                ),
-                week: cn('', defaultClassNames.week),
-                week_number_header: cn(
-                    'select-none h-6 w-6 sm:h-8 sm:w-8 text-center font-black text-[8px] sm:text-[10px]',
-                    'bg-[#A8E6CF] border sm:border-2 border-black',
-                    defaultClassNames.week_number_header
-                ),
-                week_number: cn(
-                    'text-[8px] sm:text-[10px] select-none font-black text-black',
-                    'h-6 w-6 sm:h-8 sm:w-8 text-center align-middle',
-                    'bg-[#A8E6CF] border sm:border-2 border-black',
-                    defaultClassNames.week_number
-                ),
-                day: cn(
-                    'relative h-6 w-6 sm:h-8 sm:w-8 p-0 text-center select-none',
-                    'text-black dark:text-gray-100 border border-black/10 dark:border-white/10',
-                    defaultClassNames.day
-                ),
-                range_start: cn(
-                    '[&>button]:bg-[#FF6B6B] [&>button]:border-2 [&>button]:border-black [&>button]:font-black',
-                    defaultClassNames.range_start
-                ),
-                range_middle: cn(
-                    '[&>button]:bg-[#FFE66D] [&>button]:text-black',
-                    defaultClassNames.range_middle
-                ),
-                range_end: cn(
-                    '[&>button]:bg-[#FF6B6B] [&>button]:border-2 [&>button]:border-black [&>button]:font-black',
-                    defaultClassNames.range_end
-                ),
-                today: cn(
-                    '[&>button]:bg-[#4ECDC4] [&>button]:text-black [&>button]:font-black',
-                    '[&>button]:border-2 [&>button]:border-black',
-                    defaultClassNames.today
-                ),
-                outside: cn(
-                    'text-gray-400 dark:text-gray-600 opacity-40',
-                    defaultClassNames.outside
-                ),
-                disabled: cn(
-                    'text-gray-400 dark:text-gray-600 opacity-40 cursor-not-allowed',
-                    'bg-gray-100 dark:bg-gray-800',
-                    defaultClassNames.disabled
-                ),
-                hidden: cn('invisible', defaultClassNames.hidden),
-                ...classNames,
-            }}
-            components={{
-                Root: ({ className, rootRef, ...props }) => {
-                    return (
-                        <div
-                            data-slot="calendar"
-                            ref={rootRef}
-                            className={cn(className)}
-                            {...props}
-                        />
-                    );
-                },
-                Chevron: ({ className, orientation, ...props }) => {
-                    if (orientation === 'left') {
-                        return (
-                            <ChevronLeftIcon
-                                className={cn('size-4 stroke-[3]', className)}
-                                {...props}
-                            />
-                        );
-                    }
-
-                    if (orientation === 'right') {
-                        return (
-                            <ChevronRightIcon
-                                className={cn('size-4 stroke-[3]', className)}
-                                {...props}
-                            />
-                        );
-                    }
-
-                    return (
-                        <ChevronDownIcon
-                            className={cn('size-3 stroke-[3]', className)}
-                            {...props}
-                        />
-                    );
-                },
-                DayButton: CalendarDayButton,
-                WeekNumber: ({ children, ...props }) => {
-                    return (
-                        <td {...props}>
-                            <div className="flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center text-center font-black">
-                                {children}
-                            </div>
-                        </td>
-                    );
-                },
-                ...components,
-            }}
-            {...props}
-        />
-    );
-}
-
-function CalendarDayButton({
-    className,
-    day,
-    modifiers,
-    ...props
-}: React.ComponentProps<typeof DayButton>) {
-    const defaultClassNames = getDefaultClassNames();
-
-    const ref = React.useRef<HTMLButtonElement>(null);
-    React.useEffect(() => {
-        if (modifiers.focused) ref.current?.focus();
-    }, [modifiers.focused]);
-
-    return (
-        <button
-            ref={ref}
-            type="button"
-            data-day={day.date.toLocaleDateString()}
-            data-selected-single={
-                modifiers.selected &&
-                !modifiers.range_start &&
-                !modifiers.range_end &&
-                !modifiers.range_middle
-            }
-            data-range-start={modifiers.range_start}
-            data-range-end={modifiers.range_end}
-            data-range-middle={modifiers.range_middle}
-            className={cn(
-                'flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center',
-                'text-[10px] sm:text-xs font-semibold transition-all duration-100',
-                'hover:bg-[#DDA0DD] hover:text-black hover:font-bold',
-                'focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-1',
-                'data-[selected-single=true]:bg-[#FF6B6B] data-[selected-single=true]:text-black',
-                'data-[selected-single=true]:border sm:data-[selected-single=true]:border-2 data-[selected-single=true]:border-black',
-                'data-[selected-single=true]:shadow-[1px_1px_0px_0px_#000000] sm:data-[selected-single=true]:shadow-[2px_2px_0px_0px_#000000]',
-                'data-[selected-single=true]:font-black',
-                'data-[range-start=true]:bg-[#FF6B6B] data-[range-start=true]:text-black data-[range-start=true]:font-black',
-                'data-[range-end=true]:bg-[#FF6B6B] data-[range-end=true]:text-black data-[range-end=true]:font-black',
-                'data-[range-middle=true]:bg-[#FFE66D] data-[range-middle=true]:text-black',
-                'disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent',
-                defaultClassNames.day,
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-export { Calendar, CalendarDayButton };
diff --git a/apps/docs/components/ui/card.tsx b/apps/docs/components/ui/card.tsx
deleted file mode 100644
index 838167e..0000000
--- a/apps/docs/components/ui/card.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const cardVariants = cva(
-    [
-        'border-3 border-black dark:border-white',
-        'bg-white dark:bg-gray-900 dark:text-white',
-        'transition-all duration-150',
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                elevated: 'shadow-[6px_6px_0px_0px_#000000] dark:shadow-[6px_6px_0px_0px_#FFFFFF]',
-                flat: 'shadow-none',
-                interactive: [
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:shadow-[6px_6px_0px_0px_#000000] dark:hover:shadow-[6px_6px_0px_0px_#FFFFFF] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'cursor-pointer',
-                ],
-                primary: 'shadow-[4px_4px_0px_0px_#FF6B6B] border-[#FF6B6B]',
-                secondary: 'shadow-[4px_4px_0px_0px_#4ECDC4] border-[#4ECDC4]',
-            },
-            padding: {
-                none: 'p-0',
-                sm: 'p-3',
-                default: 'p-5',
-                lg: 'p-8',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            padding: 'default',
-        },
-    }
-);
-
-export interface CardProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof cardVariants> {}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(
-    ({ className, variant, padding, ...props }, ref) => (
-        <div ref={ref} className={cn(cardVariants({ variant, padding, className }))} {...props} />
-    )
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex flex-col space-y-1.5 pb-4', className)} {...props} />
-    )
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-    ({ className, ...props }, ref) => (
-        <h3
-            ref={ref}
-            className={cn('text-2xl font-black tracking-tight leading-none', className)}
-            {...props}
-        />
-    )
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-    <p
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => <div ref={ref} className={cn('', className)} {...props} />
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div
-            ref={ref}
-            className={cn(
-                'flex items-center pt-4 border-t-3 border-black dark:border-white',
-                className
-            )}
-            {...props}
-        />
-    )
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants };
diff --git a/apps/docs/components/ui/checkbox.tsx b/apps/docs/components/ui/checkbox.tsx
deleted file mode 100644
index 3d94065..0000000
--- a/apps/docs/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const Checkbox = React.forwardRef<
-    React.ElementRef<typeof CheckboxPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <CheckboxPrimitive.Root
-        ref={ref}
-        className={cn(
-            'peer h-6 w-6 shrink-0',
-            'border-3 border-black dark:border-white',
-            'bg-white dark:bg-gray-800',
-            'flex items-center justify-center',
-            'transition-all duration-150',
-            'shadow-[2px_2px_0px_0px_#000000] dark:shadow-[2px_2px_0px_0px_#FFFFFF]',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            'data-[state=checked]:bg-[#7FB069]',
-            className
-        )}
-        {...props}
-    >
-        <CheckboxPrimitive.Indicator
-            className={cn('flex items-center justify-center text-current')}
-        >
-            <Check className="h-4 w-4 stroke-[3] text-black dark:text-white" />
-        </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/apps/docs/components/ui/combobox.tsx b/apps/docs/components/ui/combobox.tsx
deleted file mode 100644
index 18d28a4..0000000
--- a/apps/docs/components/ui/combobox.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Button } from './button';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from './command';
-
-export interface ComboboxOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-
-export interface ComboboxProps {
-    options: ComboboxOption[];
-    value?: string;
-    onValueChange?: (value: string) => void;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyText?: string;
-    className?: string;
-    disabled?: boolean;
-}
-
-function Combobox({
-    options,
-    value,
-    onValueChange,
-    placeholder = 'Select option...',
-    searchPlaceholder = 'Search...',
-    emptyText = 'No results found.',
-    className,
-    disabled = false,
-}: ComboboxProps) {
-    const [open, setOpen] = React.useState(false);
-
-    const selectedOption = options.find((option) => option.value === value);
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={open}
-                    disabled={disabled}
-                    className={cn(
-                        'w-full justify-between font-semibold',
-                        !value && 'text-gray-500',
-                        className
-                    )}
-                >
-                    {selectedOption ? selectedOption.label : placeholder}
-                    <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
-                <Command>
-                    <CommandInput placeholder={searchPlaceholder} />
-                    <CommandList>
-                        <CommandEmpty>{emptyText}</CommandEmpty>
-                        <CommandGroup>
-                            {options.map((option) => (
-                                <CommandItem
-                                    key={option.value}
-                                    value={option.value}
-                                    disabled={option.disabled}
-                                    onSelect={(currentValue) => {
-                                        onValueChange?.(currentValue === value ? '' : currentValue);
-                                        setOpen(false);
-                                    }}
-                                >
-                                    <CheckIcon
-                                        className={cn(
-                                            'mr-2 h-4 w-4 stroke-[3]',
-                                            value === option.value ? 'opacity-100' : 'opacity-0'
-                                        )}
-                                    />
-                                    {option.label}
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
-
-export interface ComboboxMultiProps {
-    options: ComboboxOption[];
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyText?: string;
-    className?: string;
-    disabled?: boolean;
-    maxDisplay?: number;
-}
-
-function ComboboxMulti({
-    options,
-    value = [],
-    onValueChange,
-    placeholder = 'Select options...',
-    searchPlaceholder = 'Search...',
-    emptyText = 'No results found.',
-    className,
-    disabled = false,
-    maxDisplay = 3,
-}: ComboboxMultiProps) {
-    const [open, setOpen] = React.useState(false);
-
-    const selectedOptions = options.filter((option) => value.includes(option.value));
-
-    const displayText = React.useMemo(() => {
-        if (selectedOptions.length === 0) return placeholder;
-        if (selectedOptions.length <= maxDisplay) {
-            return selectedOptions.map((o) => o.label).join(', ');
-        }
-        return `${selectedOptions.length} selected`;
-    }, [selectedOptions, placeholder, maxDisplay]);
-
-    const handleSelect = (optionValue: string) => {
-        const newValue = value.includes(optionValue)
-            ? value.filter((v) => v !== optionValue)
-            : [...value, optionValue];
-        onValueChange?.(newValue);
-    };
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={open}
-                    disabled={disabled}
-                    className={cn(
-                        'w-full justify-between font-semibold',
-                        selectedOptions.length === 0 && 'text-gray-500',
-                        className
-                    )}
-                >
-                    <span className="truncate">{displayText}</span>
-                    <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
-                <Command>
-                    <CommandInput placeholder={searchPlaceholder} />
-                    <CommandList>
-                        <CommandEmpty>{emptyText}</CommandEmpty>
-                        <CommandGroup>
-                            {options.map((option) => (
-                                <CommandItem
-                                    key={option.value}
-                                    value={option.value}
-                                    disabled={option.disabled}
-                                    onSelect={() => handleSelect(option.value)}
-                                >
-                                    <div
-                                        className={cn(
-                                            'mr-2 flex h-4 w-4 items-center justify-center',
-                                            'border-2 border-black dark:border-white',
-                                            value.includes(option.value)
-                                                ? 'bg-[#4ECDC4]'
-                                                : 'bg-white dark:bg-gray-900'
-                                        )}
-                                    >
-                                        {value.includes(option.value) && (
-                                            <CheckIcon className="h-3 w-3 stroke-[3] text-black" />
-                                        )}
-                                    </div>
-                                    {option.label}
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
-
-export { Combobox, ComboboxMulti };
diff --git a/apps/docs/components/ui/command.tsx b/apps/docs/components/ui/command.tsx
deleted file mode 100644
index 413debc..0000000
--- a/apps/docs/components/ui/command.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-import { SearchIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
-
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-    return (
-        <CommandPrimitive
-            data-slot="command"
-            className={cn(
-                'flex h-full w-full flex-col overflow-hidden',
-                'bg-white dark:bg-gray-900',
-                'text-black dark:text-white',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandDialog({
-    title = 'Command Palette',
-    description = 'Search for a command to run...',
-    children,
-    className,
-    showCloseButton = true,
-    ...props
-}: React.ComponentProps<typeof Dialog> & {
-    title?: string;
-    description?: string;
-    className?: string;
-    showCloseButton?: boolean;
-}) {
-    return (
-        <Dialog {...props}>
-            <DialogHeader className="sr-only">
-                <DialogTitle>{title}</DialogTitle>
-                <DialogDescription>{description}</DialogDescription>
-            </DialogHeader>
-            <DialogContent
-                className={cn('overflow-hidden p-0', className)}
-                showCloseButton={showCloseButton}
-            >
-                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-black [&_[cmdk-group-heading]]:text-gray-600 dark:[&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-                    {children}
-                </Command>
-            </DialogContent>
-        </Dialog>
-    );
-}
-
-function CommandInput({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-    return (
-        <div
-            data-slot="command-input-wrapper"
-            className={cn(
-                'flex h-12 items-center gap-3 px-4',
-                'border-b-3 border-black dark:border-white',
-                'bg-[#FFE66D]'
-            )}
-        >
-            <SearchIcon className="size-5 shrink-0 stroke-[3] text-black" />
-            <CommandPrimitive.Input
-                data-slot="command-input"
-                className={cn(
-                    'flex h-full w-full bg-transparent py-3',
-                    'text-sm font-bold text-black placeholder:text-black/60',
-                    'outline-none',
-                    'disabled:cursor-not-allowed disabled:opacity-50',
-                    className
-                )}
-                {...props}
-            />
-        </div>
-    );
-}
-
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-    return (
-        <CommandPrimitive.List
-            data-slot="command-list"
-            className={cn(
-                'max-h-[300px] overflow-x-hidden overflow-y-auto scroll-py-1',
-                'p-2',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandEmpty({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-    return (
-        <CommandPrimitive.Empty
-            data-slot="command-empty"
-            className={cn(
-                'py-8 text-center text-sm font-bold',
-                'text-gray-500 dark:text-gray-400',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandGroup({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-    return (
-        <CommandPrimitive.Group
-            data-slot="command-group"
-            className={cn(
-                'overflow-hidden p-1',
-                '[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2',
-                '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-black [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider',
-                '[&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandSeparator({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-    return (
-        <CommandPrimitive.Separator
-            data-slot="command-separator"
-            className={cn('-mx-1 my-2 h-[3px]', 'bg-black dark:bg-white', className)}
-            {...props}
-        />
-    );
-}
-
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-    return (
-        <CommandPrimitive.Item
-            data-slot="command-item"
-            className={cn(
-                'relative flex cursor-pointer items-center gap-3 px-3 py-2',
-                'text-sm font-semibold',
-                'select-none outline-none',
-                'border-2 border-transparent',
-                'data-[selected=true]:bg-[#4ECDC4] data-[selected=true]:text-black',
-                'data-[selected=true]:border-black data-[selected=true]:font-black',
-                'data-[selected=true]:shadow-[2px_2px_0px_0px_#000000]',
-                'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-                '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-                "[&_svg:not([class*='size-'])]:size-5",
-                "[&_svg:not([class*='text-'])]:text-current",
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-    return (
-        <span
-            data-slot="command-shortcut"
-            className={cn(
-                'ml-auto text-xs font-black tracking-wider',
-                'px-2 py-1',
-                'bg-gray-100 dark:bg-gray-800',
-                'border-2 border-black dark:border-white',
-                'text-gray-600 dark:text-gray-300',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-export {
-    Command,
-    CommandDialog,
-    CommandInput,
-    CommandList,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandShortcut,
-    CommandSeparator,
-};
diff --git a/apps/docs/components/ui/dashboard-shell.tsx b/apps/docs/components/ui/dashboard-shell.tsx
deleted file mode 100644
index 4e52e33..0000000
--- a/apps/docs/components/ui/dashboard-shell.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import * as React from 'react';
-import {
-    LayoutDashboard,
-    Settings,
-    Users,
-    Layers,
-    Bell,
-    Search,
-    Menu,
-    LogOut,
-    TrendingUp,
-    ShieldAlert,
-    CheckCircle2
-} from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-
-export interface DashboardShellProps extends React.HTMLAttributes<HTMLDivElement> {
-    userEmail?: string;
-    onSignOutClick?: () => void;
-}
-
-const mockTransactions = [
-    { id: 'TX-901', name: 'Alpha Agency', status: 'completed', amount: '$1,299.00', date: 'May 24, 2026' },
-    { id: 'TX-902', name: 'Beta Labs', status: 'pending', amount: '$499.00', date: 'May 23, 2026' },
-    { id: 'TX-903', name: 'Delta Studio', status: 'completed', amount: '$2,800.00', date: 'May 22, 2026' },
-    { id: 'TX-904', name: 'Gamma Corp', status: 'failed', amount: '$99.00', date: 'May 20, 2026' },
-];
-
-export function DashboardShell({
-    userEmail = 'creator@brutxui.site',
-    onSignOutClick,
-    className,
-    ...props
-}: DashboardShellProps) {
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-        <div
-            className={`min-h-[600px] flex bg-brutal-bg text-brutal-fg border-3 border-brutal transition-colors duration-200 overflow-hidden ${className || ''}`}
-            {...props}
-        >
-            <aside
-                className={`w-64 border-r-3 border-brutal bg-gray-50 dark:bg-gray-900 transition-all duration-200 flex flex-col shrink-0 ${sidebarOpen ? 'block' : 'hidden md:flex'}`}
-            >
-                <div className="p-4 border-b-3 border-brutal flex items-center justify-between bg-brutal-accent/20">
-                    <div className="flex items-center space-x-2 font-black text-xl">
-                        <div className="w-6 h-6 border-2 border-brutal bg-brutal-primary rounded-none rotate-[-2deg]" />
-                        <span>BrutxConsole</span>
-                    </div>
-                </div>
-
-                <nav className="flex-grow p-4 space-y-2">
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 bg-brutal-primary text-black border-3 border-brutal font-black text-sm text-left shadow-none transition-all">
-                        <LayoutDashboard className="h-4 w-4 stroke-[3]" />
-                        <span>Overview</span>
-                    </button>
-
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all">
-                        <Layers className="h-4 w-4 stroke-[2.5]" />
-                        <span>Deployments</span>
-                    </button>
-
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all">
-                        <Users className="h-4 w-4 stroke-[2.5]" />
-                        <span>Team Access</span>
-                    </button>
-
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all">
-                        <Settings className="h-4 w-4 stroke-[2.5]" />
-                        <span>System Settings</span>
-                    </button>
-                </nav>
-
-                <div className="p-4 border-t-3 border-brutal bg-gray-100 dark:bg-gray-800">
-                    <div className="flex items-center justify-between mb-3">
-                        <div className="flex flex-col min-w-0">
-                            <span className="text-xs font-black truncate">{userEmail}</span>
-                            <span className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Owner Account</span>
-                        </div>
-                    </div>
-                    <Button
-                        variant="danger"
-                        size="sm"
-                        className="w-full gap-2 py-4 font-black"
-                        onClick={onSignOutClick}
-                    >
-                        <LogOut className="h-3.5 w-3.5 stroke-[3]" />
-                        <span>Sign Out</span>
-                    </Button>
-                </div>
-            </aside>
-
-            <div className="flex-grow flex flex-col min-w-0 bg-white dark:bg-gray-800/20">
-                <header className="h-16 border-b-3 border-brutal flex items-center justify-between px-6 bg-white dark:bg-gray-800 z-10">
-                    <div className="flex items-center space-x-4">
-                        <button
-                            onClick={() => setSidebarOpen(!sidebarOpen)}
-                            className="p-1.5 border-3 border-brutal bg-white text-black shadow-brutal-sm active:translate-y-[2px] active:shadow-none transition-all"
-                        >
-                            <Menu className="h-4 w-4 stroke-[3]" />
-                        </button>
-                        <div className="relative hidden sm:block">
-                            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400 stroke-[2.5]" />
-                            <input
-                                placeholder="Global workspace search..."
-                                className="pl-9 pr-4 py-1.5 border-3 border-brutal bg-gray-50 text-sm font-bold text-black focus:outline-none w-64"
-                            />
-                        </div>
-                    </div>
-
-                    <div className="flex items-center space-x-4">
-                        <button className="relative p-1.5 border-3 border-brutal bg-white text-black shadow-brutal-sm active:translate-y-[2px] active:shadow-none transition-all">
-                            <Bell className="h-4 w-4 stroke-[3]" />
-                            <span className="absolute top-[-4px] right-[-4px] h-3.5 w-3.5 bg-brutal-destructive rounded-full border-2 border-brutal" />
-                        </button>
-                        <div className="w-8 h-8 rounded-full border-3 border-brutal bg-brutal-accent flex items-center justify-center font-black text-sm text-black">
-                            C
-                        </div>
-                    </div>
-                </header>
-
-                <main className="flex-grow p-6 space-y-6 overflow-y-auto max-w-[1200px] w-full mx-auto">
-                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                        <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4">
-                            <CardHeader className="flex flex-row items-center justify-between pb-2">
-                                <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500">Monthly Revenue</CardTitle>
-                                <TrendingUp className="h-4 w-4 text-brutal-success stroke-[3]" />
-                            </CardHeader>
-                            <CardContent className="space-y-1">
-                                <div className="text-3xl font-black">$12,492.00</div>
-                                <p className="text-xs font-bold text-brutal-success flex items-center gap-1">
-                                    <span>+18.2% from previous billing cycle</span>
-                                </p>
-                            </CardContent>
-                        </Card>
-
-                        <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4">
-                            <CardHeader className="flex flex-row items-center justify-between pb-2">
-                                <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500">Active Licenses</CardTitle>
-                                <CheckCircle2 className="h-4 w-4 text-brutal-primary stroke-[3]" />
-                            </CardHeader>
-                            <CardContent className="space-y-1">
-                                <div className="text-3xl font-black">+428</div>
-                                <p className="text-xs font-bold text-brutal-primary">+4.1% monthly net active users</p>
-                            </CardContent>
-                        </Card>
-
-                        <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4">
-                            <CardHeader className="flex flex-row items-center justify-between pb-2">
-                                <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500">System Warnings</CardTitle>
-                                <ShieldAlert className="h-4 w-4 text-brutal-accent stroke-[3]" />
-                            </CardHeader>
-                            <CardContent className="space-y-1">
-                                <div className="text-3xl font-black">2 Warnings</div>
-                                <p className="text-xs font-bold text-brutal-accent">SSL domain renewals pending config</p>
-                            </CardContent>
-                        </Card>
-                    </div>
-
-                    <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none">
-                        <CardHeader className="border-b-3 border-brutal p-4 bg-gray-50 dark:bg-gray-900/50">
-                            <CardTitle className="text-lg font-black leading-none">Recent Transaction Ledgers</CardTitle>
-                        </CardHeader>
-                        <CardContent className="p-0">
-                            <Table>
-                                <TableHeader className="border-b-3 border-brutal">
-                                    <TableRow className="hover:bg-transparent">
-                                        <TableHead className="font-black text-black dark:text-white p-3">Receipt ID</TableHead>
-                                        <TableHead className="font-black text-black dark:text-white">Account</TableHead>
-                                        <TableHead className="font-black text-black dark:text-white">Status</TableHead>
-                                        <TableHead className="font-black text-black dark:text-white">date</TableHead>
-                                        <TableHead className="text-right font-black text-black dark:text-white p-3">Amount</TableHead>
-                                    </TableRow>
-                                </TableHeader>
-                                <TableBody>
-                                    {mockTransactions.map((tx) => (
-                                        <TableRow key={tx.id} className="border-b border-gray-200 hover:bg-gray-50/50 dark:hover:bg-gray-700/20">
-                                            <TableCell className="font-black text-sm p-3">{tx.id}</TableCell>
-                                            <TableCell className="font-bold text-sm text-gray-700 dark:text-gray-300">{tx.name}</TableCell>
-                                            <TableCell>
-                                                <Badge
-                                                    variant={
-                                                        tx.status === 'completed'
-                                                            ? 'success'
-                                                            : tx.status === 'pending'
-                                                            ? 'accent'
-                                                            : 'danger'
-                                                    }
-                                                    className="font-black text-xs px-2 py-0.5 border-2 border-brutal rounded-none"
-                                                >
-                                                    {tx.status}
-                                                </Badge>
-                                            </TableCell>
-                                            <TableCell className="font-bold text-sm text-gray-500">{tx.date}</TableCell>
-                                            <TableCell className="text-right font-black text-sm p-3">{tx.amount}</TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
-                        </CardContent>
-                    </Card>
-                </main>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/docs/components/ui/dashboard-stats.tsx b/apps/docs/components/ui/dashboard-stats.tsx
deleted file mode 100644
index a65b6d2..0000000
--- a/apps/docs/components/ui/dashboard-stats.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Card, CardHeader, CardContent, CardTitle, CardDescription } from './card';
-import { Badge } from './badge';
-import { ArrowUpRight, ArrowDownRight, TrendingUp, Users, Zap, Wallet, MoreHorizontal } from 'lucide-react';
-
-export interface StatItem {
-    title: string;
-    value: string;
-    description: string;
-    change: string;
-    trend: 'up' | 'down' | 'neutral';
-    icon: React.ComponentType<{ className?: string }>;
-    accentColor: string;
-    progress?: number;
-}
-
-const defaultStats: StatItem[] = [
-    {
-        title: 'Monthly Recurring Revenue',
-        value: '$24,890',
-        description: 'Total subscription earnings',
-        change: '+14.2%',
-        trend: 'up',
-        icon: Wallet,
-        accentColor: '#FF6B6B',
-        progress: 78,
-    },
-    {
-        title: 'Active Subscribers',
-        value: '1,429',
-        description: 'Subscribed active users',
-        change: '+8.3%',
-        trend: 'up',
-        icon: Users,
-        accentColor: '#4ECDC4',
-        progress: 62,
-    },
-    {
-        title: 'API Request Load',
-        value: '4.8M',
-        description: 'Requests in the last 24h',
-        change: '-2.1%',
-        trend: 'down',
-        icon: Zap,
-        accentColor: '#FFE66D',
-        progress: 45,
-    },
-];
-
-export interface DashboardStatsProps extends React.HTMLAttributes<HTMLDivElement> {
-    stats?: StatItem[];
-    title?: string;
-    subtitle?: string;
-}
-
-export function DashboardStats({
-    stats = defaultStats,
-    title = 'Overview Performance',
-    subtitle = 'Real-time telemetry and operational growth metrics.',
-    className,
-    ...props
-}: DashboardStatsProps) {
-    return (
-        <div
-            className={`w-full py-8 px-4 md:px-8 bg-gray-50 dark:bg-gray-950 text-black dark:text-white ${
-                className || ''
-            }`}
-            {...props}
-        >
-            <div className="max-w-6xl mx-auto">
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
-                    <div>
-                        <h2 className="text-3xl font-black uppercase tracking-tight flex items-center gap-2">
-                            <TrendingUp className="h-8 w-8 text-[#FF6B6B] stroke-[3]" />
-                            {title}
-                        </h2>
-                        <p className="text-sm font-semibold text-gray-500 dark:text-gray-400 mt-1">
-                            {subtitle}
-                        </p>
-                    </div>
-
-                    <div className="flex items-center gap-3">
-                        <Badge variant="outline" className="cursor-pointer hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black">
-                            Last 30 Days
-                        </Badge>
-                        <Badge variant="primary" className="cursor-pointer hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 transition-all">
-                            Export PDF
-                        </Badge>
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    {stats.map((stat, idx) => {
-                        const Icon = stat.icon;
-
-                        return (
-                            <Card
-                                key={idx}
-                                variant="interactive"
-                                className="bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal hover:shadow-brutal-lg flex flex-col justify-between"
-                            >
-                                <CardHeader className="p-6 pb-2 flex flex-row items-center justify-between space-y-0">
-                                    <div className="flex flex-col">
-                                        <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                                            {stat.title}
-                                        </CardTitle>
-                                        <CardDescription className="mt-1 text-xs font-semibold">
-                                            {stat.description}
-                                        </CardDescription>
-                                    </div>
-                                    <div
-                                        className="p-3 border-3 border-brutal shadow-brutal-sm flex items-center justify-center"
-                                        style={{ backgroundColor: stat.accentColor }}
-                                    >
-                                        <Icon className="h-5 w-5 text-black stroke-[3]" />
-                                    </div>
-                                </CardHeader>
-
-                                <CardContent className="p-6 pt-2">
-                                    <div className="flex items-baseline justify-between mb-4">
-                                        <span className="text-4xl font-black tracking-tight">{stat.value}</span>
-                                        <Badge
-                                            variant={stat.trend === 'up' ? 'success' : stat.trend === 'down' ? 'danger' : 'default'}
-                                            className="font-black text-xs border-2 gap-1"
-                                        >
-                                            {stat.trend === 'up' ? (
-                                                <ArrowUpRight className="h-3.5 w-3.5 stroke-[3]" />
-                                            ) : (
-                                                <ArrowDownRight className="h-3.5 w-3.5 stroke-[3]" />
-                                            )}
-                                            {stat.change}
-                                        </Badge>
-                                    </div>
-
-                                    {stat.progress !== undefined && (
-                                        <div className="mt-4 pt-4 border-t-2 border-dashed border-gray-200 dark:border-gray-800">
-                                            <div className="flex justify-between text-xs font-bold mb-1.5">
-                                                <span className="text-gray-500 dark:text-gray-400">TARGET LIMIT</span>
-                                                <span>{stat.progress}%</span>
-                                            </div>
-                                            <div className="w-full h-3 border-2 border-brutal bg-gray-100 dark:bg-gray-800 overflow-hidden">
-                                                <div
-                                                    className="h-full border-r-2 border-brutal transition-all duration-500"
-                                                    style={{
-                                                        width: `${stat.progress}%`,
-                                                        backgroundColor: stat.accentColor,
-                                                    }}
-                                                />
-                                            </div>
-                                        </div>
-                                    )}
-                                </CardContent>
-                            </Card>
-                        );
-                    })}
-                </div>
-
-                <div className="mt-8 p-5 bg-[#4ECDC4] text-black border-3 border-black shadow-brutal flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                    <div>
-                        <span className="font-black uppercase mr-2 text-xs border-2 border-black px-2 py-0.5 bg-white">
-                            INSIGHT
-                        </span>
-                        <span className="font-black text-sm">
-                            Operational status is outstanding. Request volume is running 12% below cluster threshold limit.
-                        </span>
-                    </div>
-                    <button className="flex items-center gap-1 font-black text-xs uppercase border-3 border-black px-3 py-1.5 bg-white shadow-brutal-sm active:translate-y-0.5 active:shadow-none transition-all">
-                        Details <MoreHorizontal className="h-4 w-4 stroke-[3]" />
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-}
-DashboardStats.displayName = 'DashboardStats';
diff --git a/apps/docs/components/ui/dialog.tsx b/apps/docs/components/ui/dialog.tsx
deleted file mode 100644
index 5c1d398..0000000
--- a/apps/docs/components/ui/dialog.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-        ref={ref}
-        className={cn(
-            'fixed inset-0 z-50 bg-black/50',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            className
-        )}
-        {...props}
-    />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-        showCloseButton?: boolean;
-    }
->(({ className, children, showCloseButton = true, ...props }, ref) => (
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogPrimitive.Content
-            ref={ref}
-            className={cn(
-                'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
-                'w-full max-w-lg p-6',
-                'bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-[8px_8px_0px_0px_#000000] dark:shadow-[8px_8px_0px_0px_#FFFFFF] dark:text-white',
-                'duration-200',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
-                'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-                className
-            )}
-            {...props}
-        >
-            {children}
-            {showCloseButton && (
-                <DialogPrimitive.Close
-                    className={cn(
-                        'absolute right-4 top-4',
-                        'h-8 w-8 flex items-center justify-center',
-                        'border-3 border-black dark:border-white bg-white dark:bg-gray-900',
-                        'shadow-[2px_2px_0px_0px_#000000] dark:shadow-[2px_2px_0px_0px_#FFFFFF]',
-                        'transition-all duration-150',
-                        'hover:bg-[#EF476F] hover:text-white',
-                        'hover:shadow-[3px_3px_0px_0px_#000000] hover:-translate-x-0.5 hover:-translate-y-0.5',
-                        'active:translate-y-0.5 active:shadow-none',
-                        'focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2'
-                    )}
-                >
-                    <X className="h-4 w-4 stroke-[3]" />
-                    <span className="sr-only">Close</span>
-                </DialogPrimitive.Close>
-            )}
-        </DialogPrimitive.Content>
-    </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col space-y-2 pb-4 border-b-3 border-black dark:border-white',
-            className
-        )}
-        {...props}
-    />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-black dark:border-white',
-            className
-        )}
-        {...props}
-    />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-        ref={ref}
-        className={cn('text-xl font-black tracking-tight', className)}
-        {...props}
-    />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Description
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-    Dialog,
-    DialogPortal,
-    DialogOverlay,
-    DialogTrigger,
-    DialogClose,
-    DialogContent,
-    DialogHeader,
-    DialogFooter,
-    DialogTitle,
-    DialogDescription,
-};
diff --git a/apps/docs/components/ui/dropdown-menu.tsx b/apps/docs/components/ui/dropdown-menu.tsx
deleted file mode 100644
index f555a86..0000000
--- a/apps/docs/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-        inset?: boolean;
-    }
->(({ className, inset, children, ...props }, ref) => (
-    <DropdownMenuPrimitive.SubTrigger
-        ref={ref}
-        className={cn(
-            'flex cursor-pointer select-none items-center px-3 py-2',
-            'font-bold outline-none dark:text-white',
-            'focus:bg-[#FFE66D] focus:text-black data-[state=open]:bg-[#FFE66D] data-[state=open]:text-black',
-            inset && 'pl-8',
-            className
-        )}
-        {...props}
-    >
-        {children}
-        <ChevronRight className="ml-auto h-4 w-4 stroke-[3]" />
-    </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.SubContent
-        ref={ref}
-        className={cn(
-            'z-50 min-w-[8rem] overflow-hidden p-1',
-            'bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] dark:text-white',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-            'data-[side=bottom]:slide-in-from-top-2',
-            'data-[side=left]:slide-in-from-right-2',
-            'data-[side=right]:slide-in-from-left-2',
-            'data-[side=top]:slide-in-from-bottom-2',
-            className
-        )}
-        {...props}
-    />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 6, ...props }, ref) => (
-    <DropdownMenuPrimitive.Portal>
-        <DropdownMenuPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            className={cn(
-                'z-50 min-w-[8rem] overflow-hidden p-1',
-                'bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] dark:text-white',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[side=bottom]:slide-in-from-top-2',
-                'data-[side=left]:slide-in-from-right-2',
-                'data-[side=right]:slide-in-from-left-2',
-                'data-[side=top]:slide-in-from-bottom-2',
-                className
-            )}
-            {...props}
-        />
-    </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-        inset?: boolean;
-    }
->(({ className, inset, ...props }, ref) => (
-    <DropdownMenuPrimitive.Item
-        ref={ref}
-        className={cn(
-            'relative flex cursor-pointer select-none items-center px-3 py-2',
-            'font-bold outline-none transition-colors',
-            'focus:bg-[#FFE66D] focus:text-black',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            'dark:hover:bg-gray-800',
-            inset && 'pl-8',
-            className
-        )}
-        {...props}
-    />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-    <DropdownMenuPrimitive.CheckboxItem
-        ref={ref}
-        className={cn(
-            'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',
-            'font-bold outline-none transition-colors',
-            'focus:bg-[#FFE66D] focus:text-black',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            className
-        )}
-        checked={checked}
-        {...props}
-    >
-        <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-            <DropdownMenuPrimitive.ItemIndicator>
-                <Check className="h-4 w-4 stroke-[3]" />
-            </DropdownMenuPrimitive.ItemIndicator>
-        </span>
-        {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-    <DropdownMenuPrimitive.RadioItem
-        ref={ref}
-        className={cn(
-            'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',
-            'font-bold outline-none transition-colors',
-            'focus:bg-[#FFE66D] focus:text-black',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            className
-        )}
-        {...props}
-    >
-        <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-            <DropdownMenuPrimitive.ItemIndicator>
-                <Circle className="h-2 w-2 fill-current" />
-            </DropdownMenuPrimitive.ItemIndicator>
-        </span>
-        {children}
-    </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-        inset?: boolean;
-    }
->(({ className, inset, ...props }, ref) => (
-    <DropdownMenuPrimitive.Label
-        ref={ref}
-        className={cn('px-3 py-2 text-sm font-black tracking-wide', inset && 'pl-8', className)}
-        {...props}
-    />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.Separator
-        ref={ref}
-        className={cn('-mx-1 my-1 h-[3px] bg-black dark:bg-white', className)}
-        {...props}
-    />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-    return (
-        <span
-            className={cn('ml-auto text-xs tracking-widest opacity-60 font-bold', className)}
-            {...props}
-        />
-    );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuCheckboxItem,
-    DropdownMenuRadioItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuGroup,
-    DropdownMenuPortal,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuRadioGroup,
-};
diff --git a/apps/docs/components/ui/empty-state.tsx b/apps/docs/components/ui/empty-state.tsx
deleted file mode 100644
index 9b6450e..0000000
--- a/apps/docs/components/ui/empty-state.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { Plus, FolderOpen } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    description?: string;
-    actionText?: string;
-    onActionClick?: () => void;
-    icon?: React.ReactNode;
-}
-
-export function EmptyState({
-    title = 'No active deployments found',
-    description = 'You haven\'t launched any brutalist web projects on this cluster node. Deploy your first static directory in seconds.',
-    actionText = 'Deploy New App',
-    onActionClick,
-    icon,
-    className,
-    ...props
-}: EmptyStateProps) {
-    return (
-        <div
-            className={`flex flex-col items-center justify-center text-center p-8 md:p-12 border-3 border-brutal bg-white dark:bg-gray-800 rounded-none shadow-brutal transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="relative mb-6">
-                <div className="absolute inset-0 bg-brutal-accent translate-x-2 translate-y-2 border-3 border-brutal" />
-                <div className="relative z-10 h-16 w-16 bg-white dark:bg-gray-700 border-3 border-brutal flex items-center justify-center text-brutal-fg">
-                    {icon || <FolderOpen className="h-8 w-8 stroke-[2.5]" />}
-                </div>
-            </div>
-
-            <h3 className="text-2xl font-black mb-3 tracking-tight text-brutal-fg leading-none">
-                {title}
-            </h3>
-
-            <p className="max-w-[440px] text-sm font-bold text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
-                {description}
-            </p>
-
-            <Button
-                variant="primary"
-                className="font-black text-sm gap-2"
-                onClick={onActionClick}
-            >
-                <Plus className="h-4 w-4 stroke-[3]" />
-                <span>{actionText}</span>
-            </Button>
-        </div>
-    );
-}
diff --git a/apps/docs/components/ui/form.tsx b/apps/docs/components/ui/form.tsx
deleted file mode 100644
index 81f3c75..0000000
--- a/apps/docs/components/ui/form.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import {
-    Controller,
-    ControllerProps,
-    FieldPath,
-    FieldValues,
-    FormProvider,
-    useFormContext,
-} from 'react-hook-form';
-
-import { cn } from '@/lib/utils';
-import { Label } from '@/components/ui/label';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-    name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
-
-const FormField = <
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-    ...props
-}: ControllerProps<TFieldValues, TName>) => {
-    return (
-        <FormFieldContext.Provider value={{ name: props.name }}>
-            <Controller {...props} />
-        </FormFieldContext.Provider>
-    );
-};
-
-const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext);
-    const itemContext = React.useContext(FormItemContext);
-    const { getFieldState, formState } = useFormContext();
-
-    const fieldState = getFieldState(fieldContext.name, formState);
-
-    if (!fieldContext) {
-        throw new Error('useFormField should be used within <FormField>');
-    }
-
-    const { id } = itemContext;
-
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState,
-    };
-};
-
-type FormItemContextValue = {
-    id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => {
-        const id = React.useId();
-
-        return (
-            <FormItemContext.Provider value={{ id }}>
-                <div ref={ref} className={cn('space-y-2', className)} {...props} />
-            </FormItemContext.Provider>
-        );
-    }
-);
-FormItem.displayName = 'FormItem';
-
-const FormLabel = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-    const { error, formItemId } = useFormField();
-
-    return (
-        <Label
-            ref={ref}
-            className={cn(error && 'text-brutal-destructive dark:text-red-400', className)}
-            htmlFor={formItemId}
-            {...props}
-        />
-    );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
-    React.ElementRef<typeof Slot>,
-    React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-    return (
-        <Slot
-            ref={ref}
-            id={formItemId}
-            aria-describedby={
-                !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-            }
-            aria-invalid={!!error}
-            {...props}
-        />
-    );
-});
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
-
-    return (
-        <p
-            ref={ref}
-            id={formDescriptionId}
-            className={cn('text-sm text-gray-500 dark:text-gray-400 font-medium', className)}
-            {...props}
-        />
-    );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children;
-
-    if (!body) {
-        return null;
-    }
-
-    return (
-        <p
-            ref={ref}
-            id={formMessageId}
-            className={cn('text-sm font-black text-brutal-destructive dark:text-red-400', className)}
-            {...props}
-        >
-            {body}
-        </p>
-    );
-});
-FormMessage.displayName = 'FormMessage';
-
-export {
-    useFormField,
-    Form,
-    FormItem,
-    FormLabel,
-    FormControl,
-    FormDescription,
-    FormMessage,
-    FormField,
-};
diff --git a/apps/docs/components/ui/index.ts b/apps/docs/components/ui/index.ts
deleted file mode 100644
index 15d0204..0000000
--- a/apps/docs/components/ui/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export * from './alert';
-export * from './avatar';
-export * from './badge';
-export * from './button';
-export * from './calendar';
-export * from './card';
-export * from './checkbox';
-export * from './combobox';
-export * from './command';
-export * from './dialog';
-export * from './dropdown-menu';
-export * from './input';
-export * from './label';
-export * from './pagination';
-export * from './popover';
-export * from './scroll-area';
-export * from './select';
-export * from './separator';
-export * from './skeleton';
-export * from './spinner';
-export * from './submit-button';
-export * from './switch';
-export * from './table';
-export * from './tabs';
-export * from './textarea';
-export * from './toast';
-export * from './tooltip';
-export * from './saas-pricing';
-export * from './dashboard-stats';
-export * from './form';
-export * from './alert-dialog';
-export * from './sheet';
-export * from './radio-group';
-export * from './slider';
-export * from './progress';
-export * from './toggle';
-export * from './toggle-group';
-
-export { cn } from '@/lib/utils';
diff --git a/apps/docs/components/ui/input.tsx b/apps/docs/components/ui/input.tsx
deleted file mode 100644
index 22b2ff2..0000000
--- a/apps/docs/components/ui/input.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const inputVariants = cva(
-    [
-        'flex w-full',
-        'border-3 border-black dark:border-white',
-        'bg-white dark:bg-gray-900 dark:text-white',
-        'font-medium',
-        'placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:font-normal',
-        'transition-all duration-150',
-        'focus:outline-none focus:shadow-[4px_4px_0px_0px_#000000] dark:focus:shadow-[4px_4px_0px_0px_#FFFFFF]',
-        'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-100 dark:disabled:bg-gray-800',
-    ],
-    {
-        variants: {
-            variant: {
-                default: '',
-                error: 'border-[#EF476F] focus:shadow-[4px_4px_0px_0px_#EF476F]',
-                success: 'border-[#7FB069] focus:shadow-[4px_4px_0px_0px_#7FB069]',
-            },
-            inputSize: {
-                sm: 'h-9 px-3 py-1 text-sm',
-                default: 'h-11 px-4 py-2 text-base',
-                lg: 'h-14 px-5 py-3 text-lg',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            inputSize: 'default',
-        },
-    }
-);
-
-export interface InputProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
-        VariantProps<typeof inputVariants> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, variant, inputSize, type, ...props }, ref) => {
-        return (
-            <input
-                type={type}
-                className={cn(inputVariants({ variant, inputSize, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
-);
-Input.displayName = 'Input';
-
-export { Input, inputVariants };
diff --git a/apps/docs/components/ui/label.tsx b/apps/docs/components/ui/label.tsx
deleted file mode 100644
index db10ea5..0000000
--- a/apps/docs/components/ui/label.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const labelVariants = cva(
-    [
-        'text-sm font-bold tracking-wide leading-none',
-        'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'text-black dark:text-white',
-                error: 'text-[#EF476F]',
-                success: 'text-[#7FB069]',
-                muted: 'text-gray-500 dark:text-gray-400',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-        },
-    }
-);
-
-export interface LabelProps
-    extends React.LabelHTMLAttributes<HTMLLabelElement>,
-        VariantProps<typeof labelVariants> {}
-
-const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-    ({ className, variant, ...props }, ref) => (
-        <label ref={ref} className={cn(labelVariants({ variant, className }))} {...props} />
-    )
-);
-Label.displayName = 'Label';
-
-export { Label, labelVariants };
diff --git a/apps/docs/components/ui/pagination.tsx b/apps/docs/components/ui/pagination.tsx
deleted file mode 100644
index 49fcf09..0000000
--- a/apps/docs/components/ui/pagination.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const paginationVariants = cva('flex items-center justify-center', {
-    variants: {
-        variant: {
-            default: '',
-            rounded: '[&_button]:rounded-none',
-            minimal: '[&_button]:border-0 [&_button]:shadow-none',
-        },
-        size: {
-            sm: 'gap-1',
-            default: 'gap-2',
-            lg: 'gap-3',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default',
-    },
-});
-
-const paginationButtonVariants = cva(
-    [
-        'inline-flex items-center justify-center font-black',
-        'border-3 border-black dark:border-white',
-        'transition-all duration-150',
-        'focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2',
-        'disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none',
-    ],
-    {
-        variants: {
-            size: {
-                sm: 'h-8 min-w-8 text-sm px-2',
-                default: 'h-10 min-w-10 text-base px-3',
-                lg: 'h-12 min-w-12 text-lg px-4',
-            },
-            isActive: {
-                true: [
-                    'bg-black text-white dark:bg-white dark:text-black',
-                    'shadow-[4px_4px_0px_0px_#FF6B6B]',
-                    'hover:shadow-[2px_2px_0px_0px_#FF6B6B]',
-                    'active:shadow-none active:translate-x-1 active:translate-y-1',
-                ],
-                false: [
-                    'bg-white dark:bg-gray-900 text-black dark:text-white',
-                    'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'hover:bg-gray-100 dark:hover:bg-gray-800',
-                    'hover:shadow-[2px_2px_0px_0px_#000000] dark:hover:shadow-[2px_2px_0px_0px_#FFFFFF]',
-                    'active:shadow-none active:translate-x-1 active:translate-y-1',
-                ],
-            },
-        },
-        defaultVariants: {
-            size: 'default',
-            isActive: false,
-        },
-    }
-);
-
-interface PaginationProps
-    extends React.HTMLAttributes<HTMLElement>,
-        VariantProps<typeof paginationVariants> {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    siblingCount?: number;
-    showFirstLast?: boolean;
-    showPageNumbers?: boolean;
-}
-
-const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
-    (
-        {
-            className,
-            currentPage,
-            totalPages,
-            onPageChange,
-            siblingCount = 1,
-            showFirstLast = true,
-            showPageNumbers = true,
-            variant,
-            size,
-            ...props
-        },
-        ref
-    ) => {
-        const range = (start: number, end: number) => {
-            const length = end - start + 1;
-            return Array.from({ length }, (_, idx) => idx + start);
-        };
-
-        const paginationRange = React.useMemo(() => {
-            const totalPageNumbers = siblingCount + 5;
-
-            if (totalPageNumbers >= totalPages) {
-                return range(1, totalPages);
-            }
-
-            const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-            const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-
-            const shouldShowLeftDots = leftSiblingIndex > 2;
-            const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
-
-            const firstPageIndex = 1;
-            const lastPageIndex = totalPages;
-
-            if (!shouldShowLeftDots && shouldShowRightDots) {
-                const leftItemCount = 3 + 2 * siblingCount;
-                const leftRange = range(1, leftItemCount);
-                return [...leftRange, 'dots', totalPages];
-            }
-
-            if (shouldShowLeftDots && !shouldShowRightDots) {
-                const rightItemCount = 3 + 2 * siblingCount;
-                const rightRange = range(totalPages - rightItemCount + 1, totalPages);
-                return [firstPageIndex, 'dots', ...rightRange];
-            }
-
-            if (shouldShowLeftDots && shouldShowRightDots) {
-                const middleRange = range(leftSiblingIndex, rightSiblingIndex);
-                return [firstPageIndex, 'dots', ...middleRange, 'dots', lastPageIndex];
-            }
-
-            return range(1, totalPages);
-        }, [totalPages, siblingCount, currentPage]);
-
-        const buttonSize = size || 'default';
-
-        return (
-            <nav
-                ref={ref}
-                role="navigation"
-                aria-label="pagination"
-                className={cn(paginationVariants({ variant, size, className }))}
-                {...props}
-            >
-                {showFirstLast && (
-                    <button
-                        className={cn(
-                            paginationButtonVariants({ size: buttonSize, isActive: false })
-                        )}
-                        onClick={() => onPageChange(1)}
-                        disabled={currentPage === 1}
-                        aria-label="Go to first page"
-                    >
-                        <ChevronsLeft className="h-4 w-4 stroke-[3]" />
-                    </button>
-                )}
-
-                <button
-                    className={cn(paginationButtonVariants({ size: buttonSize, isActive: false }))}
-                    onClick={() => onPageChange(currentPage - 1)}
-                    disabled={currentPage === 1}
-                    aria-label="Go to previous page"
-                >
-                    <ChevronLeft className="h-4 w-4 stroke-[3]" />
-                </button>
-
-                {showPageNumbers &&
-                    paginationRange.map((pageNumber, index) => {
-                        if (pageNumber === 'dots') {
-                            return (
-                                <span
-                                    key={`dots-${index}`}
-                                    className={cn(
-                                        'flex items-center justify-center font-black text-black dark:text-white',
-                                        buttonSize === 'sm' && 'h-8 w-8',
-                                        buttonSize === 'default' && 'h-10 w-10',
-                                        buttonSize === 'lg' && 'h-12 w-12'
-                                    )}
-                                >
-                                    •••
-                                </span>
-                            );
-                        }
-
-                        return (
-                            <button
-                                key={pageNumber}
-                                className={cn(
-                                    paginationButtonVariants({
-                                        size: buttonSize,
-                                        isActive: currentPage === pageNumber,
-                                    })
-                                )}
-                                onClick={() => onPageChange(pageNumber as number)}
-                                aria-label={`Go to page ${pageNumber}`}
-                                aria-current={currentPage === pageNumber ? 'page' : undefined}
-                            >
-                                {pageNumber}
-                            </button>
-                        );
-                    })}
-
-                {!showPageNumbers && (
-                    <span className="px-4 font-black text-black dark:text-white">
-                        {currentPage} / {totalPages}
-                    </span>
-                )}
-
-                <button
-                    className={cn(paginationButtonVariants({ size: buttonSize, isActive: false }))}
-                    onClick={() => onPageChange(currentPage + 1)}
-                    disabled={currentPage === totalPages}
-                    aria-label="Go to next page"
-                >
-                    <ChevronRight className="h-4 w-4 stroke-[3]" />
-                </button>
-
-                {showFirstLast && (
-                    <button
-                        className={cn(
-                            paginationButtonVariants({ size: buttonSize, isActive: false })
-                        )}
-                        onClick={() => onPageChange(totalPages)}
-                        disabled={currentPage === totalPages}
-                        aria-label="Go to last page"
-                    >
-                        <ChevronsRight className="h-4 w-4 stroke-[3]" />
-                    </button>
-                )}
-            </nav>
-        );
-    }
-);
-Pagination.displayName = 'Pagination';
-
-export { Pagination, paginationVariants, paginationButtonVariants };
-export type { PaginationProps };
diff --git a/apps/docs/components/ui/popover.tsx b/apps/docs/components/ui/popover.tsx
deleted file mode 100644
index 73938a2..0000000
--- a/apps/docs/components/ui/popover.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { cn } from '@/lib/utils';
-
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-    React.ElementRef<typeof PopoverPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 8, ...props }, ref) => (
-    <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-            ref={ref}
-            align={align}
-            sideOffset={sideOffset}
-            className={cn(
-                'z-50 w-72 p-4',
-                'bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] dark:text-white',
-                'outline-none',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[side=bottom]:slide-in-from-top-2',
-                'data-[side=left]:slide-in-from-right-2',
-                'data-[side=right]:slide-in-from-left-2',
-                'data-[side=top]:slide-in-from-bottom-2',
-                className
-            )}
-            {...props}
-        />
-    </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/apps/docs/components/ui/pricing-section.tsx b/apps/docs/components/ui/pricing-section.tsx
deleted file mode 100644
index 06c1238..0000000
--- a/apps/docs/components/ui/pricing-section.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import * as React from 'react';
-import { Check } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-
-export interface BrutalistPricingPlan {
-    name: string;
-    price: string;
-    description: string;
-    features: string[];
-    ctaText: string;
-    popular?: boolean;
-    variant: 'primary' | 'secondary' | 'accent' | 'default';
-}
-
-export interface PricingSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    subtitle?: string;
-    plans?: BrutalistPricingPlan[];
-}
-
-const defaultPlans: BrutalistPricingPlan[] = [
-    {
-        name: 'Indie Creator',
-        price: '$9',
-        description: 'For solo devs and side-project hackers building clean products.',
-        features: [
-            'Access to 24+ atomic components',
-            'Full registry copying workflow',
-            'Figma design assets',
-            'Community Support Channel',
-        ],
-        ctaText: 'Start Building',
-        variant: 'default',
-    },
-    {
-        name: 'Pro Developer',
-        price: '$29',
-        description: 'For growing creators, SaaS platforms, and professional agencies.',
-        features: [
-            'Access to all 36+ components',
-            'All copy-paste premium blocks',
-            'Advanced customizable variables',
-            '1 year of regular registry updates',
-            'Priority GitHub issue support',
-        ],
-        ctaText: 'Unlock Pro Access',
-        popular: true,
-        variant: 'primary',
-    },
-    {
-        name: 'Team Studio',
-        price: '$99',
-        description: 'For collaborative development groups and startups building scaled apps.',
-        features: [
-            'Unlimited user accounts',
-            'Custom internal branding theme presets',
-            'AI-ready prompts and generation guidelines',
-            'Direct Slack developer console support',
-            'SLA uptime assurance',
-        ],
-        ctaText: 'Contact Workspace Sales',
-        variant: 'secondary',
-    },
-];
-
-export function PricingSection({
-    title = 'Simple, Transparent Brutalist Plans',
-    subtitle = 'Choose the subscription tier that matches your current development workflow. No hidden fees, instant cancel.',
-    plans = defaultPlans,
-    className,
-    ...props
-}: PricingSectionProps) {
-    return (
-        <section
-            className={`w-full py-12 md:py-24 bg-brutal-bg text-brutal-fg transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="container px-4 md:px-6 mx-auto space-y-12">
-                <div className="flex flex-col items-center justify-center space-y-4 text-center max-w-3xl mx-auto">
-                    <div className="bg-brutal-secondary text-black px-3 py-1 border-3 border-brutal font-black text-xs uppercase tracking-wider rotate-[1.5deg]">
-                        Flexible Pricing Plans
-                    </div>
-                    <h2 className="text-3xl font-black sm:text-4xl md:text-5xl tracking-tight leading-none">
-                        {title}
-                    </h2>
-                    <p className="text-lg font-bold text-gray-700 dark:text-gray-300">
-                        {subtitle}
-                    </p>
-                </div>
-
-                <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 items-stretch max-w-6xl mx-auto pt-6">
-                    {plans.map((plan, idx) => {
-                        return (
-                            <div key={idx} className="relative flex flex-col h-full">
-                                {plan.popular && (
-                                    <div className="absolute top-[-16px] left-[50%] translate-x-[-50%] z-20">
-                                        <Badge variant="accent" className="text-xs font-black uppercase tracking-wider px-3 py-1 animate-pulse border-3 border-brutal">
-                                            Most Popular Tier
-                                        </Badge>
-                                    </div>
-                                )}
-
-                                <Card className={`flex flex-col h-full border-3 border-brutal rounded-none shadow-brutal hover:-translate-x-1 hover:-translate-y-1 hover:shadow-brutal-lg transition-all duration-150 ${plan.popular ? 'bg-yellow-50/20' : 'bg-white dark:bg-gray-800'}`}>
-                                    <CardHeader className="space-y-2 pb-6 border-b-3 border-brutal">
-                                        <CardTitle className="text-2xl font-black leading-none">{plan.name}</CardTitle>
-                                        <div className="flex items-baseline space-x-1">
-                                            <span className="text-5xl font-black tracking-tight">{plan.price}</span>
-                                            <span className="text-sm font-bold text-gray-500 dark:text-gray-400">/ lifetime</span>
-                                        </div>
-                                        <CardDescription className="font-bold text-sm text-gray-600 dark:text-gray-300 pt-2 min-h-[48px]">
-                                            {plan.description}
-                                        </CardDescription>
-                                    </CardHeader>
-
-                                    <CardContent className="flex-grow pt-6 space-y-4">
-                                        <p className="font-black text-xs uppercase tracking-wider text-gray-500">What's included:</p>
-                                        <ul className="space-y-3">
-                                            {plan.features.map((feature, fIdx) => (
-                                                <li key={fIdx} className="flex items-start space-x-3 text-sm font-bold">
-                                                    <div className="h-5 w-5 shrink-0 rounded-full bg-brutal-success border-2 border-brutal flex items-center justify-center">
-                                                        <Check className="h-3 w-3 stroke-[4] text-black" />
-                                                    </div>
-                                                    <span className="text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </CardContent>
-
-                                    <CardFooter className="pt-6 border-t-3 border-brutal mt-auto bg-gray-50 dark:bg-gray-900/50 p-6">
-                                        <Button
-                                            className="w-full font-black text-base py-6"
-                                            variant={plan.variant}
-                                        >
-                                            {plan.ctaText}
-                                        </Button>
-                                    </CardFooter>
-                                </Card>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/apps/docs/components/ui/progress.tsx b/apps/docs/components/ui/progress.tsx
deleted file mode 100644
index 7fd9168..0000000
--- a/apps/docs/components/ui/progress.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-
-import { cn } from '@/lib/utils';
-
-const Progress = React.forwardRef<
-    React.ElementRef<typeof ProgressPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-    <ProgressPrimitive.Root
-        ref={ref}
-        value={value}
-        className={cn(
-            'relative h-6 w-full overflow-hidden rounded-brutal',
-            'border-3 border-brutal bg-white dark:bg-gray-800',
-            'shadow-brutal-sm',
-            className
-        )}
-        {...props}
-    >
-        <ProgressPrimitive.Indicator
-            className="h-full w-full flex-1 bg-brutal-primary transition-all duration-300 ease-out"
-            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-        />
-    </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
diff --git a/apps/docs/components/ui/radio-group.tsx b/apps/docs/components/ui/radio-group.tsx
deleted file mode 100644
index edfcc3f..0000000
--- a/apps/docs/components/ui/radio-group.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const RadioGroup = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-    return (
-        <RadioGroupPrimitive.Root
-            className={cn('grid gap-2', className)}
-            {...props}
-            ref={ref}
-        />
-    );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-    return (
-        <RadioGroupPrimitive.Item
-            ref={ref}
-            className={cn(
-                'peer aspect-square h-6 w-6 rounded-full',
-                'border-3 border-brutal bg-white dark:bg-gray-800 text-brutal-fg',
-                'shadow-brutal-sm',
-                'transition-all duration-150',
-                'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
-                'disabled:cursor-not-allowed disabled:opacity-50',
-                'data-[state=checked]:bg-brutal-primary',
-                className
-            )}
-            {...props}
-        >
-            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <Circle className="h-2.5 w-2.5 fill-black dark:fill-white stroke-none" />
-            </RadioGroupPrimitive.Indicator>
-        </RadioGroupPrimitive.Item>
-    );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };
diff --git a/apps/docs/components/ui/saas-pricing.tsx b/apps/docs/components/ui/saas-pricing.tsx
deleted file mode 100644
index 8ac6645..0000000
--- a/apps/docs/components/ui/saas-pricing.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Button } from './button';
-import { Card, CardHeader, CardContent, CardTitle, CardDescription, CardFooter } from './card';
-import { Badge } from './badge';
-import { Check, HelpCircle } from 'lucide-react';
-
-export interface PricingFeature {
-    text: string;
-    included: boolean;
-}
-
-export interface PricingPlan {
-    name: string;
-    description: string;
-    priceMonthly: number;
-    priceAnnually: number;
-    features: PricingFeature[];
-    popular?: boolean;
-    buttonText: string;
-    buttonVariant?: 'default' | 'primary' | 'secondary' | 'accent' | 'outline';
-}
-
-const defaultPlans: PricingPlan[] = [
-    {
-        name: 'Starter',
-        description: 'For builders, side-projects, and early prototypes.',
-        priceMonthly: 19,
-        priceAnnually: 15,
-        buttonText: 'Start Free Trial',
-        buttonVariant: 'outline',
-        features: [
-            { text: '3 active projects', included: true },
-            { text: 'Basic analytics dashboard', included: true },
-            { text: '10,000 monthly active users', included: true },
-            { text: 'Community slack support', included: true },
-            { text: 'API endpoints access', included: false },
-            { text: 'Custom brand domains', included: false },
-        ],
-    },
-    {
-        name: 'Pro',
-        description: 'The sweet spot for growing companies and SaaS products.',
-        priceMonthly: 49,
-        priceAnnually: 39,
-        popular: true,
-        buttonText: 'Upgrade to Pro',
-        buttonVariant: 'primary',
-        features: [
-            { text: 'Unlimited active projects', included: true },
-            { text: 'Advanced real-time analytics', included: true },
-            { text: '100,000 monthly active users', included: true },
-            { text: 'Priority 24/7 support email', included: true },
-            { text: 'Full API access', included: true },
-            { text: 'Custom brand domains', included: true },
-        ],
-    },
-    {
-        name: 'Enterprise',
-        description: 'Bespoke security, unlimited scaling, and dedicated resources.',
-        priceMonthly: 149,
-        priceAnnually: 119,
-        buttonText: 'Contact Sales',
-        buttonVariant: 'secondary',
-        features: [
-            { text: 'Dedicated isolated server cluster', included: true },
-            { text: 'Custom SLAs and data policies', included: true },
-            { text: 'Unlimited active users', included: true },
-            { text: 'Dedicated account success manager', included: true },
-            { text: 'Full API access + custom webhooks', included: true },
-            { text: 'White-label custom portal', included: true },
-        ],
-    },
-];
-
-export interface SaaSPricingProps extends React.HTMLAttributes<HTMLDivElement> {
-    plans?: PricingPlan[];
-    title?: string;
-    subtitle?: string;
-}
-
-export function SaaSPricing({
-    plans = defaultPlans,
-    title = 'Simple, Unapologetic Pricing',
-    subtitle = 'Choose the tier that fuels your app. No hidden fees, cancel anytime you want.',
-    className,
-    ...props
-}: SaaSPricingProps) {
-    const [billingPeriod, setBillingPeriod] = React.useState<'monthly' | 'annually'>('monthly');
-
-    return (
-        <section
-            className={`w-full py-16 px-4 md:px-8 bg-white dark:bg-gray-950 text-black dark:text-white ${className || ''}`}
-            {...props}
-        >
-            <div className="max-w-6xl mx-auto flex flex-col items-center">
-                <div className="text-center max-w-3xl mb-12">
-                    <Badge variant="accent" className="mb-4">
-                        PRICING PLANS
-                    </Badge>
-                    <h2 className="text-4xl md:text-5xl font-black tracking-tight mb-4 uppercase">
-                        {title}
-                    </h2>
-                    <p className="text-lg text-gray-600 dark:text-gray-400 font-medium">
-                        {subtitle}
-                    </p>
-                </div>
-
-                <div className="flex items-center gap-4 mb-16 bg-gray-100 dark:bg-gray-900 p-2 border-3 border-brutal shadow-brutal-sm">
-                    <button
-                        onClick={() => setBillingPeriod('monthly')}
-                        className={`px-4 py-2 font-black transition-all ${
-                            billingPeriod === 'monthly'
-                                ? 'bg-[#FFE66D] text-black border-2 border-black shadow-brutal-sm'
-                                : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'
-                        }`}
-                    >
-                        Monthly Billing
-                    </button>
-                    <button
-                        onClick={() => setBillingPeriod('annually')}
-                        className={`px-4 py-2 font-black transition-all flex items-center gap-2 ${
-                            billingPeriod === 'annually'
-                                ? 'bg-[#FFE66D] text-black border-2 border-black shadow-brutal-sm'
-                                : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'
-                        }`}
-                    >
-                        Annually (Save 20%)
-                        <Badge variant="success" size="sm" className="hidden sm:inline-flex">
-                            PROMO
-                        </Badge>
-                    </button>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full items-start">
-                    {plans.map((plan) => {
-                        const price = billingPeriod === 'monthly' ? plan.priceMonthly : plan.priceAnnually;
-
-                        return (
-                            <Card
-                                key={plan.name}
-                                variant={plan.popular ? 'interactive' : 'default'}
-                                className={`relative flex flex-col h-full bg-white dark:bg-gray-900 border-3 ${
-                                    plan.popular
-                                        ? 'border-brutal scale-100 md:scale-105 shadow-brutal-lg z-10'
-                                        : 'border-brutal'
-                                }`}
-                            >
-                                {plan.popular && (
-                                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-20">
-                                        <Badge variant="primary" className="uppercase font-black text-xs border-2">
-                                            MOST POPULAR
-                                        </Badge>
-                                    </div>
-                                )}
-
-                                <CardHeader className="p-6">
-                                    <CardTitle className="text-2xl font-black uppercase tracking-tight">
-                                        {plan.name}
-                                    </CardTitle>
-                                    <CardDescription className="min-h-[48px] mt-2">
-                                        {plan.description}
-                                    </CardDescription>
-                                </CardHeader>
-
-                                <CardContent className="p-6 pt-0 flex-grow">
-                                    <div className="flex items-baseline gap-1 mb-6 border-b-3 border-brutal pb-6">
-                                        <span className="text-5xl font-black tracking-tight">${price}</span>
-                                        <span className="text-gray-600 dark:text-gray-400 font-bold">
-                                            / month
-                                        </span>
-                                    </div>
-
-                                    <ul className="space-y-4">
-                                        {plan.features.map((feature, idx) => (
-                                            <li key={idx} className="flex items-center gap-3">
-                                                <div
-                                                    className={`p-1 border-2 border-brutal ${
-                                                        feature.included
-                                                            ? 'bg-[#7FB069] text-black'
-                                                            : 'bg-gray-150 dark:bg-gray-800 text-gray-400 dark:text-gray-600'
-                                                    }`}
-                                                >
-                                                    <Check className="h-3 w-3 stroke-[3]" />
-                                                </div>
-                                                <span
-                                                    className={`text-sm font-bold ${
-                                                        feature.included
-                                                            ? 'text-black dark:text-white'
-                                                            : 'text-gray-400 dark:text-gray-600 line-through'
-                                                    }`}
-                                                >
-                                                    {feature.text}
-                                                </span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </CardContent>
-
-                                <CardFooter className="p-6 border-t-3 border-brutal">
-                                    <Button
-                                        variant={plan.buttonVariant || 'default'}
-                                        className="w-full justify-center text-center font-black py-6 uppercase tracking-wider"
-                                    >
-                                        {plan.buttonText}
-                                    </Button>
-                                </CardFooter>
-                            </Card>
-                        );
-                    })}
-                </div>
-
-                <div className="mt-16 text-center flex flex-col sm:flex-row items-center gap-4 p-6 bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal">
-                    <HelpCircle className="h-8 w-8 text-[#FF6B6B]" />
-                    <p className="font-bold text-sm text-left">
-                        <span className="font-black uppercase text-[#FF6B6B] block sm:inline mr-2">
-                            No risk guarantee:
-                        </span>
-                        Try any tier completely free for 14 days. If you are not satisfied, we will issue a full refund within 30 seconds.
-                    </p>
-                </div>
-            </div>
-        </section>
-    );
-}
-SaaSPricing.displayName = 'SaaSPricing';
diff --git a/apps/docs/components/ui/scroll-area.tsx b/apps/docs/components/ui/scroll-area.tsx
deleted file mode 100644
index cc29260..0000000
--- a/apps/docs/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { cn } from '@/lib/utils';
-
-const ScrollArea = React.forwardRef<
-    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-    <ScrollAreaPrimitive.Root
-        ref={ref}
-        className={cn('relative overflow-hidden', className)}
-        {...props}
-    >
-        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-            {children}
-        </ScrollAreaPrimitive.Viewport>
-        <ScrollBar />
-        <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-        ref={ref}
-        orientation={orientation}
-        className={cn(
-            'flex touch-none select-none transition-colors',
-            orientation === 'vertical' &&
-                'h-full w-3 border-l-2 border-black dark:border-white p-[1px]',
-            orientation === 'horizontal' &&
-                'h-3 flex-col border-t-2 border-black dark:border-white p-[1px]',
-            className
-        )}
-        {...props}
-    >
-        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 bg-black dark:bg-white" />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/apps/docs/components/ui/select.tsx b/apps/docs/components/ui/select.tsx
deleted file mode 100644
index 3d283da..0000000
--- a/apps/docs/components/ui/select.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-    <SelectPrimitive.Trigger
-        ref={ref}
-        className={cn(
-            'flex h-11 w-full items-center justify-between px-4 py-2',
-            'bg-white dark:bg-gray-900 border-3 border-black dark:border-white dark:text-white',
-            'font-bold placeholder:text-gray-400',
-            'shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-            'transition-all duration-150',
-            'focus:outline-none focus:shadow-[6px_6px_0px_0px_#000000] dark:focus:shadow-[6px_6px_0px_0px_#FFFFFF] focus:-translate-x-0.5 focus:-translate-y-0.5',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            '[&>span]:line-clamp-1',
-            className
-        )}
-        {...props}
-    >
-        {children}
-        <SelectPrimitive.Icon asChild>
-            <ChevronDown className="h-5 w-5 stroke-[3]" />
-        </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollUpButton
-        ref={ref}
-        className={cn(
-            'flex cursor-default items-center justify-center py-1 bg-white dark:bg-gray-900',
-            className
-        )}
-        {...props}
-    >
-        <ChevronUp className="h-4 w-4 stroke-[3]" />
-    </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollDownButton
-        ref={ref}
-        className={cn(
-            'flex cursor-default items-center justify-center py-1 bg-white dark:bg-gray-900',
-            className
-        )}
-        {...props}
-    >
-        <ChevronDown className="h-4 w-4 stroke-[3]" />
-    </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-    <SelectPrimitive.Portal>
-        <SelectPrimitive.Content
-            ref={ref}
-            className={cn(
-                'relative z-50 max-h-96 min-w-[8rem] overflow-hidden',
-                'bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] dark:text-white',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[side=bottom]:slide-in-from-top-2',
-                'data-[side=left]:slide-in-from-right-2',
-                'data-[side=right]:slide-in-from-left-2',
-                'data-[side=top]:slide-in-from-bottom-2',
-                position === 'popper' &&
-                    'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-                className
-            )}
-            position={position}
-            {...props}
-        >
-            <SelectScrollUpButton />
-            <SelectPrimitive.Viewport
-                className={cn(
-                    'p-1',
-                    position === 'popper' &&
-                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-                )}
-            >
-                {children}
-            </SelectPrimitive.Viewport>
-            <SelectScrollDownButton />
-        </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.Label
-        ref={ref}
-        className={cn('px-3 py-2 text-sm font-black tracking-wide', className)}
-        {...props}
-    />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-    <SelectPrimitive.Item
-        ref={ref}
-        className={cn(
-            'relative flex w-full cursor-pointer select-none items-center py-2 pl-8 pr-3',
-            'font-bold outline-none',
-            'focus:bg-[#FFE66D] focus:text-black',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            'dark:hover:bg-gray-800',
-            className
-        )}
-        {...props}
-    >
-        <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-            <SelectPrimitive.ItemIndicator>
-                <Check className="h-4 w-4 stroke-[3]" />
-            </SelectPrimitive.ItemIndicator>
-        </span>
-        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.Separator
-        ref={ref}
-        className={cn('-mx-1 my-1 h-[3px] bg-black dark:bg-white', className)}
-        {...props}
-    />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-    Select,
-    SelectGroup,
-    SelectValue,
-    SelectTrigger,
-    SelectContent,
-    SelectLabel,
-    SelectItem,
-    SelectSeparator,
-    SelectScrollUpButton,
-    SelectScrollDownButton,
-};
diff --git a/apps/docs/components/ui/separator.tsx b/apps/docs/components/ui/separator.tsx
deleted file mode 100644
index 670868d..0000000
--- a/apps/docs/components/ui/separator.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const separatorVariants = cva('shrink-0 bg-black', {
-    variants: {
-        orientation: {
-            horizontal: 'h-[3px] w-full',
-            vertical: 'h-full w-[3px]',
-        },
-    },
-    defaultVariants: {
-        orientation: 'horizontal',
-    },
-});
-
-export interface SeparatorProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof separatorVariants> {
-    decorative?: boolean;
-}
-
-const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
-    ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-        <div
-            ref={ref}
-            role={decorative ? 'none' : 'separator'}
-            aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}
-            className={cn(separatorVariants({ orientation }), className)}
-            {...props}
-        />
-    )
-);
-Separator.displayName = 'Separator';
-
-export { Separator, separatorVariants };
diff --git a/apps/docs/components/ui/sheet.tsx b/apps/docs/components/ui/sheet.tsx
deleted file mode 100644
index 5693741..0000000
--- a/apps/docs/components/ui/sheet.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Sheet = SheetPrimitive.Root;
-const SheetTrigger = SheetPrimitive.Trigger;
-const SheetClose = SheetPrimitive.Close;
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <SheetPrimitive.Overlay
-        ref={ref}
-        className={cn(
-            'fixed inset-0 z-50 bg-black/50',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            className
-        )}
-        {...props}
-    />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-    'fixed z-50 gap-4 bg-brutal-bg p-6 border-brutal border-3 text-brutal-fg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-    {
-        variants: {
-            side: {
-                top: 'inset-x-0 top-0 border-b-3 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-                bottom: 'inset-x-0 bottom-0 border-t-3 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-                left: 'inset-y-0 left-0 h-full w-3/4 border-r-3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-                right: 'inset-y-0 right-0 h-full w-3/4 border-l-3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-            },
-        },
-        defaultVariants: {
-            side: 'right',
-        },
-    }
-);
-
-interface SheetContentProps
-    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-        VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Content>,
-    SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-    <SheetPortal>
-        <SheetOverlay />
-        <SheetPrimitive.Content
-            ref={ref}
-            className={cn(sheetVariants({ side }), className)}
-            {...props}
-        >
-            {children}
-            <SheetPrimitive.Close
-                className={cn(
-                    'absolute right-4 top-4',
-                    'h-8 w-8 flex items-center justify-center',
-                    'border-3 border-brutal bg-brutal-bg text-brutal-fg',
-                    'shadow-brutal-sm',
-                    'transition-all duration-150',
-                    'hover:bg-brutal-destructive hover:text-brutal-fg',
-                    'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
-                    'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'
-                )}
-            >
-                <X className="h-4 w-4 stroke-[3]" />
-                <span className="sr-only">Close</span>
-            </SheetPrimitive.Close>
-        </SheetPrimitive.Content>
-    </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', className)}
-        {...props}
-    />
-);
-SheetHeader.displayName = 'SheetHeader';
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',
-            className
-        )}
-        {...props}
-    />
-);
-SheetFooter.displayName = 'SheetFooter';
-
-const SheetTitle = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <SheetPrimitive.Title
-        ref={ref}
-        className={cn('text-lg font-black tracking-tight text-brutal-fg', className)}
-        {...props}
-    />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <SheetPrimitive.Description
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-    Sheet,
-    SheetPortal,
-    SheetOverlay,
-    SheetTrigger,
-    SheetClose,
-    SheetContent,
-    SheetHeader,
-    SheetFooter,
-    SheetTitle,
-    SheetDescription,
-};
diff --git a/apps/docs/components/ui/skeleton.tsx b/apps/docs/components/ui/skeleton.tsx
deleted file mode 100644
index ff8ad9f..0000000
--- a/apps/docs/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const skeletonVariants = cva(['animate-pulse', 'border-3 border-black dark:border-white'], {
-    variants: {
-        variant: {
-            default: 'bg-gray-200 dark:bg-gray-800',
-            primary: 'bg-[#FF6B6B]/30',
-            secondary: 'bg-[#4ECDC4]/30',
-            accent: 'bg-[#FFE66D]/30',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
-});
-
-export interface SkeletonProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof skeletonVariants> {}
-
-const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
-    ({ className, variant, ...props }, ref) => {
-        return (
-            <div ref={ref} className={cn(skeletonVariants({ variant, className }))} {...props} />
-        );
-    }
-);
-Skeleton.displayName = 'Skeleton';
-
-const SkeletonText = React.forwardRef<
-    HTMLDivElement,
-    SkeletonProps & { lines?: number; lastLineWidth?: string }
->(({ className, lines = 3, lastLineWidth = '60%', variant, ...props }, ref) => {
-    return (
-        <div ref={ref} className={cn('space-y-2', className)} {...props}>
-            {Array.from({ length: lines }).map((_, index) => (
-                <Skeleton
-                    key={index}
-                    variant={variant}
-                    className="h-4"
-                    style={{
-                        width: index === lines - 1 ? lastLineWidth : '100%',
-                    }}
-                />
-            ))}
-        </div>
-    );
-});
-SkeletonText.displayName = 'SkeletonText';
-
-const SkeletonAvatar = React.forwardRef<
-    HTMLDivElement,
-    SkeletonProps & { size?: 'sm' | 'default' | 'lg' | 'xl' }
->(({ className, size = 'default', variant, ...props }, ref) => {
-    const sizeClasses = {
-        sm: 'h-8 w-8',
-        default: 'h-10 w-10',
-        lg: 'h-12 w-12',
-        xl: 'h-16 w-16',
-    };
-
-    return (
-        <Skeleton
-            ref={ref}
-            variant={variant}
-            className={cn(sizeClasses[size], className)}
-            {...props}
-        />
-    );
-});
-SkeletonAvatar.displayName = 'SkeletonAvatar';
-
-const SkeletonCard = React.forwardRef<HTMLDivElement, SkeletonProps>(
-    ({ className, variant, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                className={cn(
-                    'p-4 border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF]',
-                    'bg-white dark:bg-gray-900',
-                    className
-                )}
-                {...props}
-            >
-                <div className="space-y-4">
-                    <Skeleton variant={variant} className="h-32 w-full" />
-                    <Skeleton variant={variant} className="h-6 w-3/4" />
-                    <SkeletonText variant={variant} lines={2} />
-                    <div className="flex gap-2">
-                        <Skeleton variant={variant} className="h-10 w-24" />
-                        <Skeleton variant={variant} className="h-10 w-24" />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-);
-SkeletonCard.displayName = 'SkeletonCard';
-
-const SkeletonTable = React.forwardRef<
-    HTMLDivElement,
-    SkeletonProps & { rows?: number; columns?: number }
->(({ className, rows = 5, columns = 4, variant, ...props }, ref) => {
-    return (
-        <div
-            ref={ref}
-            className={cn('border-3 border-black dark:border-white overflow-hidden', className)}
-            {...props}
-        >
-            <div className="flex bg-[#FFE66D] border-b-3 border-black dark:border-white">
-                {Array.from({ length: columns }).map((_, index) => (
-                    <div
-                        key={`header-${index}`}
-                        className={cn(
-                            'flex-1 p-3',
-                            index < columns - 1 && 'border-r-3 border-black dark:border-white'
-                        )}
-                    >
-                        <Skeleton variant={variant} className="h-5 w-3/4 bg-black/20" />
-                    </div>
-                ))}
-            </div>
-            {Array.from({ length: rows }).map((_, rowIndex) => (
-                <div
-                    key={`row-${rowIndex}`}
-                    className={cn(
-                        'flex',
-                        rowIndex < rows - 1 && 'border-b-3 border-black dark:border-white',
-                        rowIndex % 2 === 1 && 'bg-gray-50 dark:bg-gray-800'
-                    )}
-                >
-                    {Array.from({ length: columns }).map((_, colIndex) => (
-                        <div
-                            key={`cell-${rowIndex}-${colIndex}`}
-                            className={cn(
-                                'flex-1 p-3',
-                                colIndex < columns - 1 &&
-                                    'border-r-3 border-black dark:border-white'
-                            )}
-                        >
-                            <Skeleton
-                                variant={variant}
-                                className="h-4"
-                                style={{ width: `${60 + Math.random() * 30}%` }}
-                            />
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </div>
-    );
-});
-SkeletonTable.displayName = 'SkeletonTable';
-
-export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonTable, skeletonVariants };
diff --git a/apps/docs/components/ui/slider.tsx b/apps/docs/components/ui/slider.tsx
deleted file mode 100644
index 616479f..0000000
--- a/apps/docs/components/ui/slider.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SliderPrimitive from '@radix-ui/react-slider';
-
-import { cn } from '@/lib/utils';
-
-const Slider = React.forwardRef<
-    React.ElementRef<typeof SliderPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <SliderPrimitive.Root
-        ref={ref}
-        className={cn(
-            'relative flex w-full touch-none select-none items-center',
-            className
-        )}
-        {...props}
-    >
-        <SliderPrimitive.Track
-            className={cn(
-                'relative h-5 w-full grow overflow-hidden rounded-full',
-                'border-3 border-brutal bg-white dark:bg-gray-800',
-                'shadow-brutal-sm'
-            )}
-        >
-            <SliderPrimitive.Range className="absolute h-full bg-brutal-secondary" />
-        </SliderPrimitive.Track>
-        <SliderPrimitive.Thumb
-            className={cn(
-                'block h-6 w-6 rounded-full',
-                'border-3 border-brutal bg-brutal-accent',
-                'shadow-brutal-sm',
-                'transition-all duration-150',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
-                'disabled:pointer-events-none disabled:opacity-50',
-                'hover:scale-110 active:scale-95',
-                'cursor-grab active:cursor-grabbing'
-            )}
-        />
-    </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };
diff --git a/apps/docs/components/ui/spinner.tsx b/apps/docs/components/ui/spinner.tsx
deleted file mode 100644
index ad404c3..0000000
--- a/apps/docs/components/ui/spinner.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const spinnerVariants = cva(
-    ['inline-block rounded-full', 'border-4 border-black dark:border-white', 'animate-spin'],
-    {
-        variants: {
-            size: {
-                sm: 'h-5 w-5 border-[3px]',
-                default: 'h-8 w-8 border-4',
-                lg: 'h-12 w-12 border-[5px]',
-                xl: 'h-16 w-16 border-[6px]',
-            },
-            variant: {
-                default: 'border-t-transparent border-r-transparent',
-                primary: 'border-[#FF6B6B] border-t-transparent border-r-transparent',
-                secondary: 'border-[#4ECDC4] border-t-transparent border-r-transparent',
-                accent: 'border-[#FFE66D] border-t-[#000] border-r-[#000] dark:border-t-white dark:border-r-white',
-            },
-        },
-        defaultVariants: {
-            size: 'default',
-            variant: 'default',
-        },
-    }
-);
-
-export interface SpinnerProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof spinnerVariants> {
-    label?: string;
-}
-
-const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
-    ({ className, size, variant, label = 'Loading...', ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                role="status"
-                aria-label={label}
-                className={cn(spinnerVariants({ size, variant }), className)}
-                {...props}
-            >
-                <span className="sr-only">{label}</span>
-            </div>
-        );
-    }
-);
-Spinner.displayName = 'Spinner';
-
-const blockSpinnerVariants = cva('grid grid-cols-2 gap-1', {
-    variants: {
-        size: {
-            sm: 'h-5 w-5 gap-0.5',
-            default: 'h-8 w-8 gap-1',
-            lg: 'h-12 w-12 gap-1.5',
-            xl: 'h-16 w-16 gap-2',
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-
-const BlockSpinner = React.forwardRef<
-    HTMLDivElement,
-    Omit<SpinnerProps, 'variant'> & {
-        color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed';
-    }
->(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {
-    const colorMap = {
-        default: [
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-        ],
-        primary: ['bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]'],
-        secondary: ['bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]'],
-        accent: ['bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]'],
-        mixed: ['bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#FFE66D]', 'bg-[#A855F7]'],
-    };
-
-    const colors = colorMap[color];
-
-    return (
-        <div
-            ref={ref}
-            role="status"
-            aria-label={label}
-            className={cn(blockSpinnerVariants({ size }), className)}
-            {...props}
-        >
-            {[0, 1, 2, 3].map((i) => (
-                <div
-                    key={i}
-                    className={cn(
-                        'border-2 border-black dark:border-white',
-                        colors[i],
-                        'animate-pulse'
-                    )}
-                    style={{
-                        animationDelay: `${i * 150}ms`,
-                        animationDuration: '600ms',
-                    }}
-                />
-            ))}
-            <span className="sr-only">{label}</span>
-        </div>
-    );
-});
-BlockSpinner.displayName = 'BlockSpinner';
-
-const DotsSpinner = React.forwardRef<
-    HTMLDivElement,
-    Omit<SpinnerProps, 'variant'> & { color?: 'default' | 'primary' | 'secondary' | 'accent' }
->(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {
-    const sizeMap = {
-        sm: 'h-1.5 w-1.5',
-        default: 'h-2.5 w-2.5',
-        lg: 'h-3.5 w-3.5',
-        xl: 'h-5 w-5',
-    };
-
-    const gapMap = {
-        sm: 'gap-1',
-        default: 'gap-2',
-        lg: 'gap-3',
-        xl: 'gap-4',
-    };
-
-    const colorMap = {
-        default: 'bg-black dark:bg-white',
-        primary: 'bg-[#FF6B6B]',
-        secondary: 'bg-[#4ECDC4]',
-        accent: 'bg-[#FFE66D]',
-    };
-
-    return (
-        <div
-            ref={ref}
-            role="status"
-            aria-label={label}
-            className={cn('flex items-center', gapMap[size || 'default'], className)}
-            {...props}
-        >
-            {[0, 1, 2].map((i) => (
-                <div
-                    key={i}
-                    className={cn(
-                        sizeMap[size || 'default'],
-                        'border-2 border-black dark:border-white',
-                        colorMap[color],
-                        'animate-bounce'
-                    )}
-                    style={{
-                        animationDelay: `${i * 100}ms`,
-                        animationDuration: '500ms',
-                    }}
-                />
-            ))}
-            <span className="sr-only">{label}</span>
-        </div>
-    );
-});
-DotsSpinner.displayName = 'DotsSpinner';
-
-const BarsSpinner = React.forwardRef<
-    HTMLDivElement,
-    Omit<SpinnerProps, 'variant'> & {
-        color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed';
-    }
->(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {
-    const heightMap = {
-        sm: 'h-4',
-        default: 'h-6',
-        lg: 'h-8',
-        xl: 'h-12',
-    };
-
-    const barWidthMap = {
-        sm: 'w-1',
-        default: 'w-1.5',
-        lg: 'w-2',
-        xl: 'w-3',
-    };
-
-    const colorMap = {
-        default: [
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-        ],
-        primary: ['bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]'],
-        secondary: ['bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]'],
-        accent: ['bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]'],
-        mixed: ['bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#FFE66D]', 'bg-[#A855F7]', 'bg-[#FF6B6B]'],
-    };
-
-    const colors = colorMap[color];
-
-    return (
-        <div
-            ref={ref}
-            role="status"
-            aria-label={label}
-            className={cn('flex items-end gap-0.5', heightMap[size || 'default'], className)}
-            {...props}
-        >
-            {[0, 1, 2, 3, 4].map((i) => (
-                <div
-                    key={i}
-                    className={cn(
-                        barWidthMap[size || 'default'],
-                        'border border-black dark:border-white',
-                        colors[i],
-                        'animate-pulse origin-bottom'
-                    )}
-                    style={{
-                        height: `${40 + Math.sin(i * 0.8) * 30}%`,
-                        animationDelay: `${i * 100}ms`,
-                        animationDuration: '400ms',
-                    }}
-                />
-            ))}
-            <span className="sr-only">{label}</span>
-        </div>
-    );
-});
-BarsSpinner.displayName = 'BarsSpinner';
-
-export { Spinner, BlockSpinner, DotsSpinner, BarsSpinner, spinnerVariants, blockSpinnerVariants };
diff --git a/apps/docs/components/ui/submit-button.tsx b/apps/docs/components/ui/submit-button.tsx
deleted file mode 100644
index ba2fdf5..0000000
--- a/apps/docs/components/ui/submit-button.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { useFormStatus } from 'react-dom';
-import { Button, type ButtonProps } from './button';
-
-export interface SubmitButtonProps extends ButtonProps {
-    pendingText?: string;
-}
-
-/**
- * Renders a submit button that follows React form pending state.
- *
- * @param props - Submit button props.
- * @returns Submit button with pending state.
- */
-function SubmitButton({ children, pendingText, disabled, ...props }: SubmitButtonProps) {
-    const { pending } = useFormStatus();
-
-    return (
-        <Button type="submit" disabled={disabled || pending} loading={pending} {...props}>
-            {pending && pendingText ? pendingText : children}
-        </Button>
-    );
-}
-
-SubmitButton.displayName = 'SubmitButton';
-
-export { SubmitButton };
diff --git a/apps/docs/components/ui/switch.tsx b/apps/docs/components/ui/switch.tsx
deleted file mode 100644
index 3a220cb..0000000
--- a/apps/docs/components/ui/switch.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cn } from '@/lib/utils';
-
-const Switch = React.forwardRef<
-    React.ElementRef<typeof SwitchPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <SwitchPrimitive.Root
-        className={cn(
-            'peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center',
-            'border-3 border-black dark:border-white',
-            'transition-colors duration-150',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            'data-[state=checked]:bg-[#7FB069] data-[state=unchecked]:bg-white dark:data-[state=unchecked]:bg-gray-900',
-            className
-        )}
-        {...props}
-        ref={ref}
-    >
-        <SwitchPrimitive.Thumb
-            className={cn(
-                'pointer-events-none block h-5 w-5',
-                'bg-black dark:bg-white',
-                'shadow-[2px_2px_0px_0px_rgba(0,0,0,0.3)]',
-                'transition-transform duration-150',
-                'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5'
-            )}
-        />
-    </SwitchPrimitive.Root>
-));
-Switch.displayName = SwitchPrimitive.Root.displayName;
-
-export { Switch };
diff --git a/apps/docs/components/ui/table.tsx b/apps/docs/components/ui/table.tsx
deleted file mode 100644
index 2047946..0000000
--- a/apps/docs/components/ui/table.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-    ({ className, ...props }, ref) => (
-        <div className="relative w-full overflow-auto">
-            <table
-                ref={ref}
-                className={cn(
-                    'w-full caption-bottom text-sm',
-                    'border-3 border-black dark:border-white',
-                    className
-                )}
-                {...props}
-            />
-        </div>
-    )
-);
-Table.displayName = 'Table';
-
-const TableHeader = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <thead
-        ref={ref}
-        className={cn(
-            'bg-[#FFE66D] text-black [&_tr]:border-b-3 [&_tr]:border-black dark:[&_tr]:border-white',
-            className
-        )}
-        {...props}
-    />
-));
-TableHeader.displayName = 'TableHeader';
-
-const TableBody = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tbody
-        ref={ref}
-        className={cn(
-            '[&_tr:last-child]:border-0',
-            '[&_tr:nth-child(even)]:bg-gray-50 dark:[&_tr:nth-child(even)]:bg-gray-800',
-            'dark:text-white',
-            className
-        )}
-        {...props}
-    />
-));
-TableBody.displayName = 'TableBody';
-
-const TableFooter = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tfoot
-        ref={ref}
-        className={cn(
-            'border-t-3 border-black bg-[#4ECDC4] font-bold [&>tr]:last:border-b-0',
-            className
-        )}
-        {...props}
-    />
-));
-TableFooter.displayName = 'TableFooter';
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-    ({ className, ...props }, ref) => (
-        <tr
-            ref={ref}
-            className={cn(
-                'border-b-3 border-black dark:border-white transition-colors',
-                'hover:bg-[#FFE66D]/30',
-                'data-[state=selected]:bg-[#FFE66D]',
-                className
-            )}
-            {...props}
-        />
-    )
-);
-TableRow.displayName = 'TableRow';
-
-const TableHead = React.forwardRef<
-    HTMLTableCellElement,
-    React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <th
-        ref={ref}
-        className={cn(
-            'h-12 px-4 text-left align-middle font-black tracking-wide text-black',
-            '[&:has([role=checkbox])]:pr-0',
-            'border-r-3 border-black last:border-r-0',
-            className
-        )}
-        {...props}
-    />
-));
-TableHead.displayName = 'TableHead';
-
-const TableCell = React.forwardRef<
-    HTMLTableCellElement,
-    React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <td
-        ref={ref}
-        className={cn(
-            'p-4 align-middle font-medium',
-            '[&:has([role=checkbox])]:pr-0',
-            'border-r-3 border-black dark:border-white last:border-r-0',
-            className
-        )}
-        {...props}
-    />
-));
-TableCell.displayName = 'TableCell';
-
-const TableCaption = React.forwardRef<
-    HTMLTableCaptionElement,
-    React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-    <caption
-        ref={ref}
-        className={cn('mt-4 text-sm font-bold text-gray-600 dark:text-gray-400', className)}
-        {...props}
-    />
-));
-TableCaption.displayName = 'TableCaption';
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/apps/docs/components/ui/tabs.tsx b/apps/docs/components/ui/tabs.tsx
deleted file mode 100644
index aceafcd..0000000
--- a/apps/docs/components/ui/tabs.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '@/lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-    React.ElementRef<typeof TabsPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-    <TabsPrimitive.List
-        ref={ref}
-        className={cn(
-            'inline-flex h-12 items-center justify-center p-1 gap-1',
-            'bg-white dark:bg-gray-900 border-3 border-black dark:border-white',
-            className
-        )}
-        {...props}
-    />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-    React.ElementRef<typeof TabsPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-    <TabsPrimitive.Trigger
-        ref={ref}
-        className={cn(
-            'inline-flex items-center justify-center whitespace-nowrap px-4 py-2',
-            'font-bold text-sm tracking-wide dark:text-white',
-            'border-3 border-transparent',
-            'transition-all duration-150',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            'disabled:pointer-events-none disabled:opacity-50',
-            'data-[state=active]:bg-[#FFE66D] data-[state=active]:text-black data-[state=active]:border-black data-[state=active]:shadow-[2px_2px_0px_0px_#000000]',
-            'data-[state=inactive]:hover:bg-gray-100 dark:data-[state=inactive]:hover:bg-gray-800',
-            className
-        )}
-        {...props}
-    />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-    React.ElementRef<typeof TabsPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-    <TabsPrimitive.Content
-        ref={ref}
-        className={cn(
-            'mt-3 p-4',
-            'bg-white dark:bg-gray-900 border-3 border-black dark:border-white shadow-[4px_4px_0px_0px_#000000] dark:shadow-[4px_4px_0px_0px_#FFFFFF] dark:text-white',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            className
-        )}
-        {...props}
-    />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/docs/components/ui/textarea.tsx b/apps/docs/components/ui/textarea.tsx
deleted file mode 100644
index 83143df..0000000
--- a/apps/docs/components/ui/textarea.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const textareaVariants = cva(
-    [
-        'flex min-h-[100px] w-full',
-        'border-3 border-black dark:border-white',
-        'bg-white dark:bg-gray-900 dark:text-white',
-        'font-medium',
-        'placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:font-normal',
-        'transition-all duration-150',
-        'focus:outline-none focus:shadow-[4px_4px_0px_0px_#000000] dark:focus:shadow-[4px_4px_0px_0px_#FFFFFF]',
-        'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-150 dark:disabled:bg-gray-800',
-        'resize-none',
-    ],
-    {
-        variants: {
-            variant: {
-                default: '',
-                error: 'border-[#EF476F] focus:shadow-[4px_4px_0px_0px_#EF476F]',
-                success: 'border-[#7FB069] focus:shadow-[4px_4px_0px_0px_#7FB069]',
-            },
-            textareaSize: {
-                sm: 'px-3 py-2 text-sm',
-                default: 'px-4 py-3 text-base',
-                lg: 'px-5 py-4 text-lg',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            textareaSize: 'default',
-        },
-    }
-);
-
-export interface TextareaProps
-    extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-        VariantProps<typeof textareaVariants> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-    ({ className, variant, textareaSize, ...props }, ref) => {
-        return (
-            <textarea
-                className={cn(textareaVariants({ variant, textareaSize, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea, textareaVariants };
diff --git a/apps/docs/components/ui/toast.tsx b/apps/docs/components/ui/toast.tsx
deleted file mode 100644
index dd40955..0000000
--- a/apps/docs/components/ui/toast.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X, CheckCircle, AlertCircle, AlertTriangle, Info, Zap } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const toastVariants = cva(
-    [
-        'pointer-events-auto relative w-full overflow-hidden',
-        'border-3 border-black dark:border-white',
-        'transition-all duration-300 ease-out',
-        'animate-in slide-in-from-right-full fade-in-0',
-    ],
-    {
-        variants: {
-            variant: {
-                default: [
-                    'bg-white dark:bg-gray-900 text-black dark:text-white',
-                    'shadow-[6px_6px_0px_0px_#000000] dark:shadow-[6px_6px_0px_0px_#FFFFFF]',
-                ],
-                success: [
-                    'bg-[#7FB069] text-black dark:bg-[#2d4a28] dark:text-white',
-                    'shadow-[6px_6px_0px_0px_#000000] dark:shadow-[6px_6px_0px_0px_#FFFFFF]',
-                ],
-                error: [
-                    'bg-[#FF6B6B] text-black dark:bg-[#7a2d2d] dark:text-white',
-                    'shadow-[6px_6px_0px_0px_#000000] dark:shadow-[6px_6px_0px_0px_#FFFFFF]',
-                ],
-                warning: [
-                    'bg-[#FFE66D] text-black dark:bg-[#6b5a1f] dark:text-white',
-                    'shadow-[6px_6px_0px_0px_#000000] dark:shadow-[6px_6px_0px_0px_#FFFFFF]',
-                ],
-                info: [
-                    'bg-[#4ECDC4] text-black dark:bg-[#1f5450] dark:text-white',
-                    'shadow-[6px_6px_0px_0px_#000000] dark:shadow-[6px_6px_0px_0px_#FFFFFF]',
-                ],
-            },
-            size: {
-                sm: 'max-w-xs',
-                default: 'max-w-sm',
-                lg: 'max-w-md',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-export interface ToastProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof toastVariants> {
-    title?: string;
-    description?: string;
-    onClose?: () => void;
-    icon?: React.ReactNode;
-    action?: React.ReactNode;
-    duration?: number;
-}
-
-const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
-    (
-        {
-            className,
-            variant,
-            size,
-            title,
-            description,
-            onClose,
-            icon,
-            action,
-            duration = 5000,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        const [isLeaving, setIsLeaving] = React.useState(false);
-
-        React.useEffect(() => {
-            if (duration && onClose) {
-                const timer = setTimeout(() => {
-                    setIsLeaving(true);
-                    setTimeout(() => onClose(), 200);
-                }, duration);
-                return () => clearTimeout(timer);
-            }
-            return undefined;
-        }, [duration, onClose]);
-
-        const getDefaultIcon = (): React.ReactNode | null => {
-            const iconClass = 'h-6 w-6 stroke-[2.5] flex-shrink-0';
-            switch (variant) {
-                case 'success':
-                    return <CheckCircle className={iconClass} />;
-                case 'error':
-                    return <AlertCircle className={iconClass} />;
-                case 'warning':
-                    return <AlertTriangle className={iconClass} />;
-                case 'info':
-                    return <Info className={iconClass} />;
-                default:
-                    return <Zap className={iconClass} />;
-            }
-        };
-
-        const defaultIcon = getDefaultIcon();
-
-        return (
-            <div
-                ref={ref}
-                className={cn(
-                    toastVariants({ variant, size }),
-                    isLeaving && 'animate-out slide-out-to-right-full fade-out-0',
-                    className
-                )}
-                role="alert"
-                {...props}
-            >
-                {duration && onClose && (
-                    <div className="absolute top-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden">
-                        <div
-                            className="h-full bg-black/30 dark:bg-white/30"
-                            style={{
-                                animation: `shrink ${duration}ms linear forwards`,
-                            }}
-                        />
-                    </div>
-                )}
-
-                <div className="flex items-start gap-4 p-4 pt-5">
-                    {(icon || defaultIcon) && (
-                        <div className="flex-shrink-0 mt-0.5">{icon || defaultIcon}</div>
-                    )}
-
-                    <div className="flex-1 min-w-0">
-                        {title && <p className="font-black text-base leading-tight">{title}</p>}
-                        {description && (
-                            <p className="font-medium text-sm mt-1 opacity-80 leading-snug">
-                                {description}
-                            </p>
-                        )}
-                        {children}
-
-                        {action && <div className="mt-3">{action}</div>}
-                    </div>
-
-                    {onClose && (
-                        <button
-                            onClick={() => {
-                                setIsLeaving(true);
-                                setTimeout(() => onClose(), 200);
-                            }}
-                            className={cn(
-                                'flex-shrink-0 h-8 w-8 flex items-center justify-center',
-                                'border-2 border-black bg-white',
-                                'shadow-[2px_2px_0px_0px_#000000]',
-                                'transition-all duration-150',
-                                'hover:shadow-[1px_1px_0px_0px_#000000] hover:translate-x-0.5 hover:translate-y-0.5',
-                                'active:shadow-none active:translate-x-1 active:translate-y-1',
-                                'focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2'
-                            )}
-                            aria-label="Close"
-                        >
-                            <X className="h-4 w-4 stroke-[3]" />
-                        </button>
-                    )}
-                </div>
-            </div>
-        );
-    }
-);
-Toast.displayName = 'Toast';
-
-interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    position?:
-        | 'top-left'
-        | 'top-center'
-        | 'top-right'
-        | 'bottom-left'
-        | 'bottom-center'
-        | 'bottom-right';
-}
-
-const ToastContainer = React.forwardRef<HTMLDivElement, ToastContainerProps>(
-    ({ className, position = 'bottom-right', children, ...props }, ref) => {
-        const positionClasses = {
-            'top-left': 'top-4 left-4 items-start',
-            'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
-            'top-right': 'top-4 right-4 items-end',
-            'bottom-left': 'bottom-4 left-4 items-start',
-            'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
-            'bottom-right': 'bottom-4 right-4 items-end',
-        };
-
-        return (
-            <>
-                <style>{`
-                    @keyframes shrink {
-                        from { width: 100%; }
-                        to { width: 0%; }
-                    }
-                `}</style>
-                <div
-                    ref={ref}
-                    className={cn(
-                        'fixed z-50 flex flex-col gap-3 pointer-events-none p-4',
-                        positionClasses[position],
-                        className
-                    )}
-                    {...props}
-                >
-                    {children}
-                </div>
-            </>
-        );
-    }
-);
-ToastContainer.displayName = 'ToastContainer';
-
-interface ToastItem {
-    id: string;
-    variant?: ToastProps['variant'];
-    title?: string;
-    description?: string;
-    duration?: number;
-    action?: React.ReactNode;
-}
-
-function useToast() {
-    const [toasts, setToasts] = React.useState<ToastItem[]>([]);
-
-    const addToast = React.useCallback((toast: Omit<ToastItem, 'id'>) => {
-        const id = Math.random().toString(36).substr(2, 9);
-        setToasts((prev) => [...prev, { ...toast, id }]);
-        return id;
-    }, []);
-
-    const removeToast = React.useCallback((id: string) => {
-        setToasts((prev) => prev.filter((toast) => toast.id !== id));
-    }, []);
-
-    const clearToasts = React.useCallback(() => {
-        setToasts([]);
-    }, []);
-
-    const success = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'success', title, description });
-        },
-        [addToast]
-    );
-
-    const error = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'error', title, description });
-        },
-        [addToast]
-    );
-
-    const warning = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'warning', title, description });
-        },
-        [addToast]
-    );
-
-    const info = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'info', title, description });
-        },
-        [addToast]
-    );
-
-    return {
-        toasts,
-        addToast,
-        removeToast,
-        clearToasts,
-        success,
-        error,
-        warning,
-        info,
-    };
-}
-
-export { Toast, ToastContainer, useToast, toastVariants };
-export type { ToastContainerProps, ToastItem };
diff --git a/apps/docs/components/ui/toggle-group.tsx b/apps/docs/components/ui/toggle-group.tsx
deleted file mode 100644
index ecd680f..0000000
--- a/apps/docs/components/ui/toggle-group.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-import { toggleVariants } from '@/components/ui/toggle';
-
-const ToggleGroupContext = React.createContext<
-    VariantProps<typeof toggleVariants>
->({
-    size: 'default',
-    variant: 'default',
-});
-
-const ToggleGroup = React.forwardRef<
-    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-        VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-    <ToggleGroupPrimitive.Root
-        ref={ref}
-        className={cn('flex items-center justify-center gap-1.5', className)}
-        {...props}
-    >
-        <ToggleGroupContext.Provider value={{ variant, size }}>
-            {children}
-        </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-        VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-    const context = React.useContext(ToggleGroupContext);
-
-    return (
-        <ToggleGroupPrimitive.Item
-            ref={ref}
-            className={cn(
-                toggleVariants({
-                    variant: context.variant || variant,
-                    size: context.size || size,
-                }),
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </ToggleGroupPrimitive.Item>
-    );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/docs/components/ui/tooltip.tsx b/apps/docs/components/ui/tooltip.tsx
deleted file mode 100644
index 7f7c579..0000000
--- a/apps/docs/components/ui/tooltip.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from '@/lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-    React.ElementRef<typeof TooltipPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, ...props }, ref) => (
-    <TooltipPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={cn(
-            'z-50 overflow-hidden px-3 py-1.5',
-            'bg-black dark:bg-white text-white dark:text-black text-sm font-bold',
-            'border-2 border-black dark:border-white',
-            'animate-in fade-in-0 zoom-in-95',
-            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-            'data-[side=bottom]:slide-in-from-top-2',
-            'data-[side=left]:slide-in-from-right-2',
-            'data-[side=right]:slide-in-from-left-2',
-            'data-[side=top]:slide-in-from-bottom-2',
-            className
-        )}
-        {...props}
-    />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/docs/components/ui/waitlist-page.tsx b/apps/docs/components/ui/waitlist-page.tsx
deleted file mode 100644
index cfbced4..0000000
--- a/apps/docs/components/ui/waitlist-page.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { Sparkles, Users, Star } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-
-export interface WaitlistPageProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    description?: string;
-    ctaText?: string;
-    onWaitlistSubmit?: (e: React.FormEvent<HTMLFormElement>, email: string) => void;
-}
-
-export function WaitlistPage({
-    title = 'Join the BrutxUI Waitlist Club',
-    description = 'Get early developer keys to copy premium blocks, customized theme presets, and unlock deep registry CLI integrations before everyone else.',
-    ctaText = 'Secure Priority Access',
-    onWaitlistSubmit,
-    className,
-    ...props
-}: WaitlistPageProps) {
-    const [email, setEmail] = React.useState('');
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (onWaitlistSubmit) onWaitlistSubmit(e, email);
-    };
-
-    return (
-        <section
-            className={`w-full py-16 md:py-24 bg-brutal-bg text-brutal-fg border-3 border-brutal transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="container px-4 md:px-6 mx-auto max-w-4xl">
-                <div className="flex flex-col items-center justify-center text-center space-y-8">
-                    <div className="inline-flex items-center space-x-2 bg-brutal-accent text-black px-4 py-1.5 border-3 border-brutal font-black text-xs uppercase tracking-wider rotate-[-1.5deg]">
-                        <Sparkles className="h-4 w-4 stroke-[3] animate-spin" />
-                        <span>Private Beta Access Open</span>
-                    </div>
-
-                    <div className="space-y-4">
-                        <h1 className="text-4xl font-black tracking-tight sm:text-5xl md:text-6xl leading-[1.05]">
-                            {title}
-                        </h1>
-                        <p className="max-w-[640px] text-lg font-bold text-gray-700 dark:text-gray-300 mx-auto leading-relaxed">
-                            {description}
-                        </p>
-                    </div>
-
-                    <form
-                        onSubmit={handleSubmit}
-                        className="w-full max-w-md flex flex-col sm:flex-row gap-3 pt-2"
-                    >
-                        <Input
-                            type="email"
-                            placeholder="Enter your personal email..."
-                            required
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            className="flex-grow text-base py-6 bg-white dark:bg-gray-800"
-                        />
-                        <Button
-                            type="submit"
-                            variant="primary"
-                            className="font-black text-sm py-6 px-6 shrink-0"
-                        >
-                            {ctaText}
-                        </Button>
-                    </form>
-
-                    <div className="w-full border-t-3 border-brutal pt-8 mt-6">
-                        <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 items-center justify-center max-w-2xl mx-auto">
-                            <div className="flex items-center justify-center space-x-2 font-black text-sm">
-                                <Users className="h-5 w-5 text-brutal-secondary stroke-[2.5]" />
-                                <span>1,840+ Developers on waitlist</span>
-                            </div>
-                            <div className="flex items-center justify-center space-x-1 font-black text-sm">
-                                {[...Array(5)].map((_, i) => (
-                                    <Star key={i} className="h-4 w-4 fill-brutal-accent text-black stroke-[2.5]" />
-                                ))}
-                                <span className="pl-1">4.9/5 stars rating</span>
-                            </div>
-                            <div className="flex items-center justify-center space-x-2 font-black text-sm sm:col-span-2 md:col-span-1">
-                                <span className="h-2 w-2 rounded-full bg-brutal-success animate-ping" />
-                                <span>Beta Invites sent daily</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/apps/docs/config/component-installation.ts b/apps/docs/config/component-installation.ts
deleted file mode 100644
index c44b9f0..0000000
--- a/apps/docs/config/component-installation.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-export const componentDependencies: Record<string, string[]> = {
-    button: ['@radix-ui/react-slot', 'class-variance-authority'],
-    card: ['class-variance-authority'],
-    input: ['class-variance-authority'],
-    textarea: [],
-    label: ['class-variance-authority'],
-    badge: ['class-variance-authority'],
-    dialog: ['@radix-ui/react-dialog'],
-    popover: ['@radix-ui/react-popover'],
-    tooltip: ['@radix-ui/react-tooltip'],
-    'dropdown-menu': ['@radix-ui/react-dropdown-menu'],
-    select: ['@radix-ui/react-select'],
-    tabs: ['@radix-ui/react-tabs'],
-    table: [],
-    alert: ['class-variance-authority'],
-    avatar: ['class-variance-authority'],
-    separator: ['@radix-ui/react-separator'],
-    switch: ['@radix-ui/react-switch'],
-    checkbox: ['@radix-ui/react-checkbox'],
-    pagination: [],
-    spinner: [],
-    toast: [],
-    skeleton: [],
-    calendar: ['react-day-picker'],
-    'context-menu': ['@radix-ui/react-context-menu'],
-    command: ['cmdk'],
-    combobox: ['cmdk', '@radix-ui/react-popover'],
-    'scroll-area': ['@radix-ui/react-scroll-area'],
-};
-
-export const componentImports: Record<string, string[]> = {
-    button: ['Button', 'buttonVariants'],
-    card: ['Card', 'CardHeader', 'CardTitle', 'CardDescription', 'CardContent', 'CardFooter'],
-    input: ['Input'],
-    textarea: ['Textarea'],
-    label: ['Label'],
-    badge: ['Badge', 'badgeVariants'],
-    dialog: [
-        'Dialog',
-        'DialogTrigger',
-        'DialogContent',
-        'DialogHeader',
-        'DialogFooter',
-        'DialogTitle',
-        'DialogDescription',
-        'DialogClose',
-    ],
-    popover: ['Popover', 'PopoverTrigger', 'PopoverContent'],
-    tooltip: ['Tooltip', 'TooltipTrigger', 'TooltipContent', 'TooltipProvider'],
-    'dropdown-menu': [
-        'DropdownMenu',
-        'DropdownMenuTrigger',
-        'DropdownMenuContent',
-        'DropdownMenuItem',
-        'DropdownMenuCheckboxItem',
-        'DropdownMenuRadioItem',
-        'DropdownMenuLabel',
-        'DropdownMenuSeparator',
-        'DropdownMenuShortcut',
-        'DropdownMenuGroup',
-        'DropdownMenuSub',
-        'DropdownMenuSubContent',
-        'DropdownMenuSubTrigger',
-        'DropdownMenuRadioGroup',
-    ],
-    select: [
-        'Select',
-        'SelectGroup',
-        'SelectValue',
-        'SelectTrigger',
-        'SelectContent',
-        'SelectLabel',
-        'SelectItem',
-        'SelectSeparator',
-    ],
-    tabs: ['Tabs', 'TabsList', 'TabsTrigger', 'TabsContent'],
-    table: [
-        'Table',
-        'TableHeader',
-        'TableBody',
-        'TableFooter',
-        'TableHead',
-        'TableRow',
-        'TableCell',
-        'TableCaption',
-    ],
-    alert: ['Alert', 'AlertTitle', 'AlertDescription'],
-    avatar: ['Avatar', 'AvatarImage', 'AvatarFallback'],
-    separator: ['Separator'],
-    switch: ['Switch'],
-    checkbox: ['Checkbox'],
-    pagination: [
-        'Pagination',
-        'PaginationContent',
-        'PaginationEllipsis',
-        'PaginationItem',
-        'PaginationLink',
-        'PaginationNext',
-        'PaginationPrevious',
-    ],
-    spinner: ['Spinner'],
-    toast: [
-        'Toast',
-        'ToastAction',
-        'ToastClose',
-        'ToastDescription',
-        'ToastTitle',
-        'ToastProvider',
-        'ToastViewport',
-    ],
-    skeleton: ['Skeleton'],
-    calendar: ['Calendar'],
-    'context-menu': [
-        'ContextMenu',
-        'ContextMenuTrigger',
-        'ContextMenuContent',
-        'ContextMenuItem',
-        'ContextMenuCheckboxItem',
-        'ContextMenuRadioItem',
-        'ContextMenuLabel',
-        'ContextMenuSeparator',
-        'ContextMenuShortcut',
-        'ContextMenuGroup',
-        'ContextMenuSub',
-        'ContextMenuSubContent',
-        'ContextMenuSubTrigger',
-        'ContextMenuRadioGroup',
-    ],
-    command: [
-        'Command',
-        'CommandDialog',
-        'CommandInput',
-        'CommandList',
-        'CommandEmpty',
-        'CommandGroup',
-        'CommandItem',
-        'CommandShortcut',
-        'CommandSeparator',
-    ],
-    combobox: ['Combobox', 'ComboboxMulti'],
-    'scroll-area': ['ScrollArea', 'ScrollBar'],
-};
diff --git a/apps/docs/config/constants.ts b/apps/docs/config/constants.ts
deleted file mode 100644
index 011d4c4..0000000
--- a/apps/docs/config/constants.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import uiPackage from '../../../packages/ui/package.json';
-
-export const SITE_CONFIG = {
-    version: uiPackage.version,
-    name: 'Brutx',
-    title: 'Brutx - Neo Brutalism React Component Library',
-    description: 'Brutx UI library for React. 27+ Neo Brutalism UI components with bold borders, offset shadows, vibrant colors. Free & open-source. Built with Radix UI, Tailwind CSS. Use CLI: npx brutx@latest init. Best shadcn alternative for brutalist design.',
-    url: 'https://brutxui.site',
-    github: {
-        owner: 'dev-snake',
-        repo: 'brutxui',
-        url: 'https://github.com/dev-snake/brutxui',
-        raw: 'https://raw.githubusercontent.com/dev-snake/brutxui/main',
-        componentsUrl: 'https://github.com/dev-snake/brutxui/tree/main/packages/ui/src/components',
-        componentBlobUrl: 'https://github.com/dev-snake/brutxui/blob/main/packages/ui/src/components'
-    },
-    npm: {
-        cli: 'https://www.npmjs.com/package/brutx',
-        ui: 'https://www.npmjs.com/package/brutx-ui'
-    },
-    social: {
-        twitter: 'https://twitter.com/intent/tweet?text=Check%20out%20Brutx%20-%20A%20Neo-Brutalism%20styled%20React%20component%20library!%20https://github.com/dev-snake/brutxui',
-        creator: '@devsnake'
-    }
-} as const;
diff --git a/apps/docs/config/seo.ts b/apps/docs/config/seo.ts
deleted file mode 100644
index 870df92..0000000
--- a/apps/docs/config/seo.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import { Metadata } from 'next';
-
-interface ComponentSEOProps {
-    name: string;
-    description: string;
-    slug: string;
-}
-
-export function generateComponentMetadata({
-    name,
-    description,
-    slug,
-}: ComponentSEOProps): Metadata {
-    const title = `${name} - Brutx Component`;
-    const fullDescription = `${description} Free Neo-Brutalism styled React ${name} component with TypeScript support.`;
-
-    return {
-        title,
-        description: fullDescription,
-        keywords: [
-            `react ${name.toLowerCase()}`,
-            `${name.toLowerCase()} component`,
-            `brutalist ${name.toLowerCase()}`,
-            `neo brutalism ${name.toLowerCase()}`,
-            `tailwind ${name.toLowerCase()}`,
-            'react component',
-            'brutx',
-        ],
-        openGraph: {
-            title,
-            description: fullDescription,
-            url: `https://brutxui.site/docs/components/${slug}`,
-            type: 'article',
-        },
-        twitter: {
-            title,
-            description: fullDescription,
-        },
-        alternates: {
-            canonical: `https://brutxui.site/docs/components/${slug}`,
-        },
-    };
-}
-
-export const componentsSEO: Record<string, ComponentSEOProps> = {
-    alert: {
-        name: 'Alert',
-        description: 'Display important messages and notifications with Neo-Brutalism styling.',
-        slug: 'alert',
-    },
-    avatar: {
-        name: 'Avatar',
-        description: 'User profile image with fallback support and multiple sizes.',
-        slug: 'avatar',
-    },
-    badge: {
-        name: 'Badge',
-        description: 'Status indicators and labels with bold brutalist design.',
-        slug: 'badge',
-    },
-    button: {
-        name: 'Button',
-        description: 'Interactive button with multiple variants, sizes, and states.',
-        slug: 'button',
-    },
-    card: {
-        name: 'Card',
-        description: 'Container component with header, content, and footer sections.',
-        slug: 'card',
-    },
-    checkbox: {
-        name: 'Checkbox',
-        description: 'Accessible checkbox input with Neo-Brutalism checkmark.',
-        slug: 'checkbox',
-    },
-    dialog: {
-        name: 'Dialog',
-        description: 'Modal dialog windows built on Radix UI primitives.',
-        slug: 'dialog',
-    },
-    'dropdown-menu': {
-        name: 'Dropdown Menu',
-        description: 'Context and dropdown menus with keyboard navigation.',
-        slug: 'dropdown-menu',
-    },
-    input: {
-        name: 'Input',
-        description: 'Text input field with brutalist borders and focus states.',
-        slug: 'input',
-    },
-    label: {
-        name: 'Label',
-        description: 'Accessible form labels for input fields.',
-        slug: 'label',
-    },
-    pagination: {
-        name: 'Pagination',
-        description: 'Page navigation with first, last, previous, and next buttons.',
-        slug: 'pagination',
-    },
-    popover: {
-        name: 'Popover',
-        description: 'Floating content panels triggered by user interaction.',
-        slug: 'popover',
-    },
-    select: {
-        name: 'Select',
-        description: 'Dropdown select menu with search and keyboard navigation.',
-        slug: 'select',
-    },
-    separator: {
-        name: 'Separator',
-        description: 'Visual divider for separating content sections.',
-        slug: 'separator',
-    },
-    skeleton: {
-        name: 'Skeleton',
-        description: 'Loading placeholder animations for content.',
-        slug: 'skeleton',
-    },
-    spinner: {
-        name: 'Spinner',
-        description: 'Loading spinners with brutalist, dots, pulse, and bars variants.',
-        slug: 'spinner',
-    },
-    'submit-button': {
-        name: 'Submit Button',
-        description: 'Server component-ready form submission handler with brutalist styling.',
-        slug: 'submit-button',
-    },
-    switch: {
-        name: 'Switch',
-        description: 'Toggle switch control for boolean settings.',
-        slug: 'switch',
-    },
-    table: {
-        name: 'Table',
-        description: 'Data tables with brutalist styling and responsive design.',
-        slug: 'table',
-    },
-    tabs: {
-        name: 'Tabs',
-        description: 'Tabbed content navigation built on Radix UI.',
-        slug: 'tabs',
-    },
-    textarea: {
-        name: 'Textarea',
-        description: 'Multi-line text input with size variants.',
-        slug: 'textarea',
-    },
-    toast: {
-        name: 'Toast',
-        description: 'Toast notification system for user feedback.',
-        slug: 'toast',
-    },
-    tooltip: {
-        name: 'Tooltip',
-        description: 'Hover tooltips for additional information.',
-        slug: 'tooltip',
-    },
-    calendar: {
-        name: 'Calendar',
-        description: 'Date picker calendar with neo-brutalist styling using react-day-picker.',
-        slug: 'calendar',
-    },
-    command: {
-        name: 'Command',
-        description: 'Command palette and search interface built on cmdk.',
-        slug: 'command',
-    },
-    combobox: {
-        name: 'Combobox',
-        description: 'Autocomplete and multi-select picker with search functionality.',
-        slug: 'combobox',
-    },
-    'scroll-area': {
-        name: 'Scroll Area',
-        description: 'Custom scrollbar component with neo-brutalist rails.',
-        slug: 'scroll-area',
-    },
-    'saas-pricing': {
-        name: 'SaaS Pricing',
-        description: 'Premium SaaS pricing plans, features matrix, and billing frequency toggles with stark brutalist design.',
-        slug: 'saas-pricing',
-    },
-    'dashboard-stats': {
-        name: 'Dashboard Stats',
-        description: 'Premium dashboard stat metrics, trends indicators, and interactive sparkline summaries with hard offset shadows.',
-        slug: 'dashboard-stats',
-    },
-};
diff --git a/apps/docs/global.d.ts b/apps/docs/global.d.ts
deleted file mode 100644
index 13c5a66..0000000
--- a/apps/docs/global.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-declare module '*.css' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module 'brutx-ui/styles.css';
diff --git a/apps/docs/guide/ai.md b/apps/docs/guide/ai.md
new file mode 100644
index 0000000..dbc1ee9
--- /dev/null
+++ b/apps/docs/guide/ai.md
@@ -0,0 +1,135 @@
+# AI 集成
+
+BrutxUI 旨在与 AI 编码助手无缝协作。组件库提供结构化的、类型安全的 API，AI 工具可以理解并据此生成代码。
+
+## AGENTS.md
+
+项目根目录的 `AGENTS.md` 是 AI 编码助手的统一配置文件，为所有 AI 工具（Cursor、Copilot、Windsurf、Claude Code 等）提供项目特定的指令，包括：
+
+- Monorepo 结构与命令
+- Vue 3 `<script setup>` 组件约定
+- 导入路径别名（`@/` 映射）
+- CVA 变体模式与 `cn()` 类名合并工具
+- 新粗野主义设计令牌与视觉规则
+- 反模式清单（禁止软阴影、圆角边框等）
+- 代码风格规则（4 空格缩进、单引号、无注释）
+- 安全要求与 Registry Schema 规范
+
+AI 助手可以使用 `AGENTS.md` 来：
+
+- 了解项目结构与可用命令
+- 生成符合项目约定的组件代码
+- 遵循新粗野主义视觉规则
+- 避免反模式（软阴影、圆角边框等）
+- 正确使用导入路径和类名合并工具
+
+## AI 助手如何使用 BrutxUI
+
+### 组件生成
+
+AI 助手可以按照既定模式生成 BrutxUI 组件：
+
+```vue
+<script setup>
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+import Button from '@/components/ui/Button.vue'
+
+const isLoading = ref(false)
+
+const buttonClasses = computed(() =>
+    cn('custom-class')
+)
+</script>
+
+<template>
+    <Button variant="primary" size="lg" :loading="isLoading">
+        Submit
+    </Button>
+</template>
+```
+
+### 变体用法
+
+所有变体值都是字符串字面量，AI 可以自动补全：
+
+- **Button 变体**：`default`、`primary`、`secondary`、`accent`、`danger`、`success`、`outline`、`ghost`、`link`
+- **Button 尺寸**：`sm`、`default`、`lg`、`xl`、`icon`
+- **Alert 变体**：`default`、`primary`、`secondary`、`success`、`warning`、`danger`、`info`
+- **Badge 变体**：`default`、`primary`、`secondary`、`accent`、`danger`、`success`、`outline`
+
+### 表单模式
+
+AI 可以使用 Form 组件配合 vee-validate 生成完整的表单实现：
+
+```vue
+<script setup>
+import { toTypedSchema } from '@vee-validate/zod'
+import { z } from 'zod'
+import Form from '@/components/ui/Form.vue'
+import FormField from '@/components/ui/FormField.vue'
+import FormItem from '@/components/ui/FormItem.vue'
+import FormLabel from '@/components/ui/FormLabel.vue'
+import FormControl from '@/components/ui/FormControl.vue'
+import FormMessage from '@/components/ui/FormMessage.vue'
+import Input from '@/components/ui/Input.vue'
+import SubmitButton from '@/components/ui/SubmitButton.vue'
+
+const schema = toTypedSchema(z.object({
+    email: z.string().email(),
+    password: z.string().min(8),
+}))
+
+function onSubmit(values) {
+    console.log(values)
+}
+</script>
+
+<template>
+    <Form :validation-schema="schema" @submit="onSubmit">
+        <FormField name="email" v-slot="{ componentField }">
+            <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                    <Input v-bind="componentField" type="email" />
+                </FormControl>
+                <FormMessage />
+            </FormItem>
+        </FormField>
+        <SubmitButton variant="primary">Sign In</SubmitButton>
+    </Form>
+</template>
+```
+
+### 组合式函数用法
+
+AI 可以正确使用 BrutxUI 的组合式函数，如 `useToast`：
+
+```vue
+<script setup>
+import { useToast } from '@/composables/useToast'
+
+const { success, error, warning, info } = useToast()
+
+function handleSave() {
+    success('Saved!', 'Your changes have been saved.')
+}
+
+function handleError() {
+    error('Error', 'Something went wrong.')
+}
+</script>
+```
+
+## AI 辅助开发的最佳实践
+
+1. 始终使用 `v-model` 而非 `onChange`/`onInput` 进行双向绑定
+2. 使用 `@click` 而非 `onClick` 作为事件处理器
+3. 使用 `<script setup>` 语法，而非 Options API
+4. 在本地项目文件中导入组件时带上 `.vue` 扩展名
+5. 使用 `ref()` 和 `computed()` 而非 `useState` 和 `useMemo`
+6. 使用 `cn()` 合并类名，绝不拼接字符串
+7. 使用 `--brutal-*` CSS 变量，绝不硬编码颜色
+8. 禁止使用软阴影（`shadow-md`、`shadow-lg`），只使用 `shadow-brutal*`
+9. 禁止使用圆角（`rounded-md`、`rounded-lg`），只使用 `rounded-brutal`
+10. 交互元素必须有按压反馈（`active:translate-y` + `active:shadow-none`）
diff --git a/apps/docs/guide/cli.md b/apps/docs/guide/cli.md
new file mode 100644
index 0000000..1a7a88d
--- /dev/null
+++ b/apps/docs/guide/cli.md
@@ -0,0 +1,86 @@
+# CLI
+
+`brutx-vue` CLI 帮助你在项目中初始化 BrutxUI，并通过单条命令添加组件。
+
+## 概览
+
+```bash
+npx brutx-vue@latest <command>
+```
+
+CLI 会自动处理依赖安装、文件创建和配置更新。
+
+## brutx-vue init
+
+在你的项目中初始化 BrutxUI。它会设置基础配置：
+
+```bash
+npx brutx-vue@latest init
+```
+
+init 命令将：
+
+1. 检测你的项目框架（Vite、Nuxt 等）
+2. 安装所需依赖（`reka-ui`、`class-variance-authority`、`clsx`、`tailwind-merge`、`lucide-vue-next`）
+3. 在 `src/lib/utils.ts` 创建 `cn()` 工具函数
+4. 配置 Tailwind CSS 粗野主义插件
+5. 将 BrutxUI CSS 自定义属性添加到你的样式表中
+6. 设置组件目录结构
+
+### 选项
+
+| 标志 | 描述 | 默认值 |
+|------|------|--------|
+| `--yes` / `-y` | 跳过提示并使用默认值 | `false` |
+| `--cwd <path>` | 设置工作目录 | 当前目录 |
+
+## brutx-vue add
+
+向项目中添加单个组件：
+
+```bash
+npx brutx-vue@latest add <component...>
+```
+
+### 示例
+
+添加单个组件：
+
+```bash
+npx brutx-vue@latest add button
+```
+
+添加多个组件：
+
+```bash
+npx brutx-vue@latest add button card dialog input
+```
+
+添加所有可用组件：
+
+```bash
+npx brutx-vue@latest add --all
+```
+
+### 选项
+
+| 标志 | 描述 | 默认值 |
+|------|------|--------|
+| `--all` | 添加所有可用组件 | `false` |
+| `--yes` / `-y` | 跳过确认提示 | `false` |
+| `--cwd <path>` | 设置工作目录 | 当前目录 |
+| `--overwrite` | 覆盖已有的组件文件 | `false` |
+
+### 可用组件
+
+alert, alert-dialog, avatar, badge, button, calendar, card, checkbox, combobox, command, dashboard-stats, dialog, dropdown-menu, form, input, label, pagination, popover, progress, radio-group, saas-pricing, scroll-area, select, separator, sheet, skeleton, slider, spinner, submit-button, switch, table, tabs, textarea, toast, toggle, toggle-group, tooltip
+
+### 可用区块
+
+brutalist-hero, pricing-section, auth-card, dashboard-shell, empty-state, waitlist-page
+
+添加区块：
+
+```bash
+npx brutx-vue@latest add --block auth-card
+```
diff --git a/apps/docs/guide/getting-started.md b/apps/docs/guide/getting-started.md
new file mode 100644
index 0000000..ce19908
--- /dev/null
+++ b/apps/docs/guide/getting-started.md
@@ -0,0 +1,119 @@
+# 快速开始
+
+BrutxUI 是一个**以复制粘贴为核心**的 Neo-Brutalism 组件库，专为 Vue 3 + Tailwind CSS 打造。它提供大胆、无障碍且高度可定制的 UI 组件，遵循新粗野主义设计哲学。
+
+## BrutxUI 的优势场景
+
+- **落地页和营销网站** — 需要大胆的视觉识别来脱颖而出
+- **SaaS 仪表盘** — 清晰自信的 UI 建立用户信任
+- **创意作品集** — 拥抱原始、富有表现力的设计
+- **开发者工具** — 功能优先的美学契合目标受众
+- **初创团队** — 希望快速交付且拥有独特外观
+
+## 适合柔和处理的场景
+
+- **企业后台应用** — 用户期望传统的 UI 模式
+- **表单密集型工作流** — 最少的视觉噪音有助于完成填写
+- **数据密集型表格** — 粗野主义边框在大规模下可能显得沉重
+- **无障碍关键场景** — 减少动画和高对比度模式是主要需求
+
+## 为什么采用复制粘贴模式？
+
+BrutxUI 采用复制粘贴组件模式，而非传统的 npm 包方式：
+
+- **完全拥有** 项目中的组件源代码
+- **零依赖锁定** — 无需 fork 即可修改任何组件
+- **更小的打包体积** — 只包含你实际使用的组件
+- **轻松定制** — 直接修改变体、样式和行为
+- **AI 友好** — LLM 可以直接读取和修改你的组件
+
+## 系统可定制性
+
+所有视觉属性都由 CSS 自定义属性驱动。你可以在 `:root` 级别或按组件覆盖它们：
+
+```css
+:root {
+    --brutal-border-width: 3px;
+    --brutal-border-color: #000000;
+    --brutal-shadow-offset-x: 4px;
+    --brutal-shadow-offset-y: 4px;
+    --brutal-shadow-color: #000000;
+    --brutal-radius: 0px;
+    --brutal-bg: #ffffff;
+    --brutal-fg: #000000;
+    --brutal-primary: #FF6B6B;
+    --brutal-secondary: #4ECDC4;
+    --brutal-accent: #FFE66D;
+    --brutal-destructive: #EF476F;
+    --brutal-success: #7FB069;
+    --brutal-muted: #f3f4f6;
+    --brutal-muted-foreground: #4B5563;
+    --brutal-ring: #000000;
+    --brutal-pressed-offset: 2px;
+    --brutal-info: #4A90D9;
+    --brutal-overlay: rgba(0, 0, 0, 0.5);
+    --brutal-placeholder: #9CA3AF;
+}
+```
+
+## 定制预设
+
+BrutxUI 内置三套主题预设，你可以通过在根元素上添加类名来应用：
+
+### Classic（默认）
+
+标志性的 BrutxUI 风格 — 粗 3px 边框、硬 4px 阴影、零圆角、鲜艳色彩。
+
+```html
+<div class="theme-classic">
+    <!-- Your app -->
+</div>
+```
+
+### Pastel
+
+更柔和的风格 — 2px 边框、3px 阴影、8px 圆角、柔和的粉彩色调。
+
+```html
+<div class="theme-pastel">
+    <!-- Your app -->
+</div>
+```
+
+### Mono
+
+灰度极致 — 4px 边框、5px 阴影、零圆角、黑白调色板。
+
+```html
+<div class="theme-mono">
+    <!-- Your app -->
+</div>
+```
+
+## AI 优先集成
+
+BrutxUI 旨在与 AI 编码助手无缝协作：
+
+- **AGENTS.md** — 项目根目录的统一 AI 配置文件，为所有 AI 工具提供项目指令
+- **结构化 Props** — AI 可以理解和生成的 TypeScript 接口
+
+详见 [AI 集成](/guide/ai)指南。
+
+## 无障碍优先
+
+每个组件都基于 [reka-ui](https://reka-ui.com/) 无头原语构建，确保：
+
+- 正确的 ARIA 属性和角色
+- 键盘导航支持
+- 焦点管理和可见的焦点环
+- 屏幕阅读器兼容性
+- 减少动画支持
+
+## 下一步
+
+- 在你的 Vite + Vue 3 项目中[安装 BrutxUI](/guide/installation-vite)
+- 其他配置方式请参考[手动安装](/guide/installation-manual)
+- [CLI 参考](/guide/cli)了解 `brutx-vue` 命令行工具
+- [主题与令牌](/guide/theme)进行深度定制
+- [国际化](/guide/locale)配置多语言支持
+- [浏览组件](/components/alert)查看可用组件
diff --git a/apps/docs/guide/installation-manual.md b/apps/docs/guide/installation-manual.md
new file mode 100644
index 0000000..280d6b8
--- /dev/null
+++ b/apps/docs/guide/installation-manual.md
@@ -0,0 +1,146 @@
+# 手动安装
+
+不使用 CLI 手动设置 BrutxUI，适用于需要对安装过程完全控制的项目。
+
+## 前提条件
+
+- **Node.js** 18+
+- **Vue** 3.5+
+- **Tailwind CSS** 3.4+
+
+## 第 1 步：安装依赖
+
+安装所需的包：
+
+```bash
+pnpm add reka-ui class-variance-authority clsx tailwind-merge lucide-vue-next
+```
+
+| 包名 | 用途 |
+|---------|---------|
+| `reka-ui` | 无障碍无头原语 |
+| `class-variance-authority` | CVA 变体系统 |
+| `clsx` | 条件类名 |
+| `tailwind-merge` | 合并 Tailwind 类名避免冲突 |
+| `lucide-vue-next` | 图标库 |
+
+可选依赖：
+
+```bash
+pnpm add v-calendar vee-validate
+```
+
+| 包名 | 用途 |
+|---------|---------|
+| `v-calendar` | 日历组件 |
+| `vee-validate` | 表单验证 |
+
+## 第 2 步：创建 cn() 工具函数
+
+创建 `src/lib/utils.ts`：
+
+```ts
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+```
+
+## 第 3 步：配置 Tailwind CSS
+
+创建或更新 `tailwind.config.js`，添加 BrutxUI 的内容路径和插件：
+
+```js
+import brutalism from './src/lib/brutalism-plugin.js'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: 'class',
+    content: [
+        './index.html',
+        './src/**/*.{vue,js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {
+            colors: {
+                brutal: {
+                    bg: 'var(--brutal-bg)',
+                    fg: 'var(--brutal-fg)',
+                    primary: 'var(--brutal-primary)',
+                    secondary: 'var(--brutal-secondary)',
+                    accent: 'var(--brutal-accent)',
+                    destructive: 'var(--brutal-destructive)',
+                    success: 'var(--brutal-success)',
+                    muted: 'var(--brutal-muted)',
+                    'muted-foreground': 'var(--brutal-muted-foreground)',
+                    ring: 'var(--brutal-ring)',
+                    info: 'var(--brutal-info)',
+                    placeholder: 'var(--brutal-placeholder)',
+                },
+            },
+            borderRadius: {
+                brutal: 'var(--brutal-radius, 0px)',
+            },
+        },
+    },
+    plugins: [brutalism],
+}
+```
+
+## 第 4 步：导入样式
+
+将 BrutxUI CSS 自定义属性添加到你的主 CSS 文件中（例如 `src/style.css`）：
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --brutal-border-width: 3px;
+        --brutal-border-color: #000000;
+        --brutal-shadow-offset-x: 4px;
+        --brutal-shadow-offset-y: 4px;
+        --brutal-shadow-color: #000000;
+        --brutal-radius: 0px;
+        --brutal-bg: #ffffff;
+        --brutal-fg: #000000;
+        --brutal-primary: #FF6B6B;
+        --brutal-secondary: #4ECDC4;
+        --brutal-accent: #FFE66D;
+        --brutal-destructive: #EF476F;
+        --brutal-success: #7FB069;
+        --brutal-muted: #f3f4f6;
+        --brutal-muted-foreground: #4B5563;
+        --brutal-ring: #000000;
+        --brutal-pressed-offset: 2px;
+        --brutal-info: #4A90D9;
+        --brutal-overlay: rgba(0, 0, 0, 0.5);
+        --brutal-placeholder: #9CA3AF;
+    }
+
+    .dark {
+        --brutal-border-color: #ffffff;
+        --brutal-shadow-color: #ffffff;
+        --brutal-bg: #141414;
+        --brutal-fg: #ffffff;
+        --brutal-muted-foreground: #9CA3AF;
+        --brutal-ring: #ffffff;
+        --brutal-info: #3B82F6;
+        --brutal-overlay: rgba(0, 0, 0, 0.7);
+        --brutal-placeholder: #6B7280;
+    }
+}
+```
+
+## 第 5 步：复制组件文件
+
+从 `packages/ui/src/components/` 中将你需要的组件文件复制到项目的 `src/components/ui/` 目录下。每个组件由以下文件组成：
+
+- `.vue` 文件（例如 `Button.vue`）
+- 对应的变体文件（例如 `button-variants.ts`），如果有的话
+
+请确保更新复制文件中的导入路径以匹配你的项目结构。组件使用相对路径导入（如 `../lib/utils`），请根据需要调整。
diff --git a/apps/docs/guide/installation-vite.md b/apps/docs/guide/installation-vite.md
new file mode 100644
index 0000000..67448ac
--- /dev/null
+++ b/apps/docs/guide/installation-vite.md
@@ -0,0 +1,139 @@
+# 安装（Vite）
+
+在新建或现有的 Vite + Vue 3 项目中设置 BrutxUI。
+
+## 前提条件
+
+- **Node.js** 18+
+- **Vue** 3.5+
+- **Tailwind CSS** 3.4+
+
+## 第 1 步：创建 Vite 项目
+
+如果你还没有项目，先创建一个：
+
+```bash
+pnpm create vite my-app --template vue-ts
+cd my-app
+```
+
+## 第 2 步：安装 Tailwind CSS
+
+安装并配置 Tailwind CSS：
+
+```bash
+pnpm add -D tailwindcss postcss autoprefixer
+pnpm exec tailwindcss init -p
+```
+
+更新 `tailwind.config.js`：
+
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        './index.html',
+        './src/**/*.{vue,js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}
+```
+
+将 Tailwind 指令添加到 `src/style.css`：
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## 第 3 步：初始化 BrutxUI
+
+运行 init 命令来设置粗野主义插件和样式：
+
+```bash
+npx brutx-vue@latest init
+```
+
+此命令将：
+- 安装所需依赖（`reka-ui`、`class-variance-authority`、`clsx`、`tailwind-merge`、`lucide-vue-next`）
+- 配置 Tailwind 粗野主义插件
+- 创建 `cn()` 工具函数
+- 将 BrutxUI 样式添加到你的 CSS 中
+
+## 第 4 步：添加组件
+
+只添加你需要的组件：
+
+```bash
+npx brutx-vue@latest add button
+npx brutx-vue@latest add card dialog
+npx brutx-vue@latest add input label checkbox
+```
+
+或者一次性添加所有组件：
+
+```bash
+npx brutx-vue@latest add --all
+```
+
+## 第 5 步：导入样式
+
+确保在你的 `src/main.ts` 中导入了 BrutxUI 样式：
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')
+```
+
+`brutx-vue init` 命令会将所需的 CSS 添加到你的 `style.css` 文件中，包括 `--brutal-*` CSS 自定义属性和 Tailwind 层。
+
+## 第 6 步：使用组件
+
+在你的 Vue 文件中导入并使用组件：
+
+```vue
+<script setup>
+import Button from '@/components/ui/Button.vue'
+import Card from '@/components/ui/Card.vue'
+import CardHeader from '@/components/ui/CardHeader.vue'
+import CardTitle from '@/components/ui/CardTitle.vue'
+import CardContent from '@/components/ui/CardContent.vue'
+</script>
+
+<template>
+    <Card variant="default">
+        <CardHeader>
+            <CardTitle>Hello BrutxUI</CardTitle>
+        </CardHeader>
+        <CardContent>
+            <Button variant="primary" size="default">
+                Get Started
+            </Button>
+        </CardContent>
+    </Card>
+</template>
+```
+
+## 配置语言（可选）
+
+BrutxUI 默认显示中文文本。如需切换为英文或其他语言，在 `main.ts` 中配置 `BrutxUIPlugin`：
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { BrutxUIPlugin, en } from 'brutx-ui-vue'
+import './style.css'
+
+const app = createApp(App)
+app.use(BrutxUIPlugin, { locale: en })
+app.mount('#app')
+```
+
+更多语言配置选项请参考[国际化](/guide/locale)指南。
diff --git a/apps/docs/guide/locale.md b/apps/docs/guide/locale.md
new file mode 100644
index 0000000..1cb27bd
--- /dev/null
+++ b/apps/docs/guide/locale.md
@@ -0,0 +1,261 @@
+# 国际化（i18n）
+
+BrutxUI 内置轻量多语言支持，**默认语言为中文（zh-CN）**，同时提供英文（en）语言包。无需安装 `vue-i18n`，开箱即用。
+
+## 设计原则
+
+- **不强制依赖 vue-i18n** — 自带轻量 locale 系统（provide/inject），可与 vue-i18n 共存
+- **默认中文** — 所有组件的默认文本为中文
+- **完全向后兼容** — props 优先级最高，现有用法不受影响
+- **零配置开箱即用** — 不传任何配置时显示中文
+- **响应式切换** — 运行时切换语言，组件自动更新
+
+## 优先级链
+
+组件文本的解析优先级从高到低：
+
+```text
+组件 props > 全局 locale 配置 > 默认中文（zh-CN）
+```
+
+## 默认中文（零配置）
+
+不进行任何配置时，组件自动显示中文文本：
+
+```vue
+<template>
+    <CommandInput />
+    <!-- placeholder 显示 "输入命令或搜索..." -->
+</template>
+```
+
+## 全局切换为英文
+
+通过 `BrutxUIPlugin` 的 `locale` 选项切换语言：
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { BrutxUIPlugin, en } from 'brutx-ui-vue'
+
+const app = createApp(App)
+app.use(BrutxUIPlugin, { locale: en })
+app.mount('#app')
+```
+
+## 局部覆盖
+
+### 通过 props 覆盖单个组件
+
+props 优先级最高，可以覆盖任何 locale 文本：
+
+```vue
+<template>
+    <CommandInput placeholder="自定义搜索..." />
+    <Spinner label="处理中..." />
+</template>
+```
+
+### 通过 texts prop 批量覆盖
+
+对于包含大量文本的组件（如 AuthCard），提供 `texts` prop 进行批量覆盖：
+
+```vue
+<template>
+    <AuthCard :texts="{
+        google: '使用 Google 登录',
+        github: '使用 GitHub 登录',
+        orEmailLogin: '或使用邮箱登录',
+        signIn: '登 录',
+    }" />
+</template>
+```
+
+### 局部子树覆盖语言
+
+使用 `provideLocale` 在某个组件子树内使用不同语言，不影响全局：
+
+```vue
+<script setup>
+import { provideLocale, en } from 'brutx-ui-vue'
+
+provideLocale(en)
+</script>
+
+<template>
+    <div>
+        <!-- 此区域内的组件显示英文 -->
+        <CommandInput />
+    </div>
+</template>
+```
+
+## 响应式切换
+
+`BrutxUIPlugin` 和 `provideLocale` 都接受响应式的 locale 值，切换时组件自动更新：
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+import { BrutxUIPlugin, zhCN, en } from 'brutx-ui-vue'
+
+const isEnglish = ref(false)
+const locale = computed(() => isEnglish.value ? en : zhCN)
+</script>
+```
+
+## 自定义语言包
+
+### 部分覆盖
+
+使用 `mergeLocale` 深合并，只覆盖需要修改的字段：
+
+```ts
+import { zhCN, mergeLocale } from 'brutx-ui-vue/locales'
+
+const customLocale = mergeLocale(zhCN, {
+    command: { placeholder: '请输入...' },
+})
+app.use(BrutxUIPlugin, { locale: customLocale })
+```
+
+### 创建全新语言包
+
+导入 `Locale` 类型，创建完整的语言包：
+
+```ts
+import type { Locale } from 'brutx-ui-vue'
+import { zhCN } from 'brutx-ui-vue/locales'
+
+const jaJP: Locale = {
+    command: {
+        placeholder: 'コマンドを入力...',
+        emptyText: '結果が見つかりません。',
+        dialogTitle: 'コマンドパレット',
+        dialogDescription: '実行するコマンドを検索...',
+    },
+    // ... 其他组件的翻译
+}
+
+app.use(BrutxUIPlugin, { locale: jaJP })
+```
+
+## 与 vue-i18n 共存
+
+BrutxUI 的 locale 系统独立于 vue-i18n，两者互不干扰。推荐在 vue-i18n 的 locale watch 中同步更新 BrutxUI 的 locale：
+
+```ts
+import { watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { provideLocale, zhCN, en } from 'brutx-ui-vue'
+
+const LOCALE_MAP = { 'zh-CN': zhCN, en }
+
+const { locale } = useI18n()
+provideLocale(computed(() => LOCALE_MAP[locale.value] ?? zhCN))
+```
+
+## t() 翻译函数
+
+`useLocale()` 返回的 `t()` 函数支持点号路径访问和插值参数：
+
+```ts
+import { useLocale } from 'brutx-ui-vue'
+
+const { t } = useLocale()
+
+t('command.placeholder')
+// → '输入命令或搜索...'
+
+t('combobox.selectedCount', { count: 3 })
+// → '已选 3 项'
+
+t('pagination.page', { number: 5 })
+// → '第 5 页'
+```
+
+### 回退链
+
+当 `t(path, params?)` 被调用时，按以下顺序查找：
+
+1. 当前 locale 中查找 `path` 对应的值
+2. 不存在 → 回退到 zh-CN 语言包中 `path` 对应的值
+3. 仍不存在 → 返回路径字符串 `path` 本身
+
+## 可用语言包
+
+| 语言包 | 导入路径 | 说明 |
+|--------|---------|------|
+| `zhCN` | `brutx-ui-vue` 或 `brutx-ui-vue/locales` | 简体中文（默认） |
+| `en` | `brutx-ui-vue` 或 `brutx-ui-vue/locales` | 英文 |
+
+## API 参考
+
+### BrutxUIPlugin
+
+Vue 插件，用于全局配置 locale。
+
+```ts
+interface BrutxUIPluginOptions {
+    locale?: MaybeRef<Locale>
+}
+
+app.use(BrutxUIPlugin, { locale: en })
+```
+
+### provideLocale
+
+在组件子树内注入 locale 配置。
+
+```ts
+function provideLocale(locale: MaybeRef<Locale>): void
+```
+
+### useLocale
+
+获取当前 locale 和翻译函数。
+
+```ts
+function useLocale(): {
+    locale: ComputedRef<Locale>
+    t: TranslateFunction
+}
+
+type TranslateFunction = (
+    path: string,
+    params?: Record<string, string | number>
+) => string
+```
+
+### mergeLocale
+
+深合并语言包，用于部分覆盖。
+
+```ts
+function mergeLocale(base: Locale, override: DeepPartial<Locale>): Locale
+```
+
+## 支持的组件文本键
+
+| 组件 | locale 键 | 含插值参数 |
+|------|----------|-----------|
+| Command | `command.placeholder`、`command.emptyText`、`command.dialogTitle`、`command.dialogDescription` | — |
+| Combobox | `combobox.placeholder`、`combobox.multiPlaceholder`、`combobox.searchPlaceholder`、`combobox.emptyText`、`combobox.selectedCount` | `selectedCount`: `{count}` |
+| Pagination | `pagination.firstPage`、`pagination.previousPage`、`pagination.nextPage`、`pagination.lastPage`、`pagination.page`、`pagination.label` | `page`: `{number}` |
+| Carousel | `carousel.previousSlide`、`carousel.nextSlide`、`carousel.goToSlide` | `goToSlide`: `{index}` |
+| Spinner | `spinner.loading` | — |
+| SubmitButton | `submitButton.submitting` | — |
+| CopyToClipboard | `copyToClipboard.copy`、`copyToClipboard.copied` | — |
+| BeforeAfter | `beforeAfter.before`、`beforeAfter.after` | — |
+| AuthCard | `authCard.welcomeBack`、`authCard.signInToContinue`、`authCard.google`、`authCard.github`、`authCard.orEmailLogin`、`authCard.email`、`authCard.password`、`authCard.forgotPassword`、`authCard.signIn`、`authCard.noAccount`、`authCard.register` | — |
+| WaitlistPage | `waitlistPage.title`、`waitlistPage.ctaText`、`waitlistPage.earlyAccess`、`waitlistPage.onWaitlist`、`waitlistPage.live` | `onWaitlist`: `{count}` |
+| DashboardShell | `dashboardShell.sidebarNavigation`、`dashboardShell.signOut` | — |
+| BrutalistHero | `brutalistHero.title`、`brutalistHero.primaryCtaText`、`brutalistHero.secondaryCtaText`、`brutalistHero.neoBrutalismUI` | — |
+| SaaSPricing | `saasPricing.title`、`saasPricing.monthly`、`saasPricing.annually`、`saasPricing.mostPopular`、`saasPricing.perMonth`、`saasPricing.perMonthBilledAnnually`、`saasPricing.billingPeriod` | — |
+| Toast | `toast.close` | — |
+| Dialog | `dialog.close` | — |
+| Sheet | `sheet.close` | — |
+| Breadcrumb | `breadcrumb.label`、`breadcrumb.more` | — |
+| TreeView | `treeView.fileTree` | — |
+| Stepper | `stepper.progressSteps`、`stepper.step` | `step`: `{index}`、`{title}` |
+| EmptyState | `emptyState.defaultTitle`、`emptyState.defaultActionText` | — |
diff --git a/apps/docs/guide/theme.md b/apps/docs/guide/theme.md
new file mode 100644
index 0000000..395709c
--- /dev/null
+++ b/apps/docs/guide/theme.md
@@ -0,0 +1,174 @@
+# 主题与令牌
+
+BrutxUI 使用 CSS 自定义属性（设计令牌）来控制新粗野主义系统的每个视觉方面。这让定制变得像覆盖一个变量一样简单。
+
+## CSS 变量
+
+所有令牌都以 `--brutal-` 为前缀，并在 `:root` 级别定义：
+
+| 令牌 | 亮色模式 | 暗色模式 | 用途 |
+|-------|-------|------|---------|
+| `--brutal-border-width` | `3px` | `3px` | 所有组件的边框粗细 |
+| `--brutal-border-color` | `#000000` | `#ffffff` | 边框颜色 |
+| `--brutal-shadow-offset-x` | `4px` | `4px` | 阴影水平偏移 |
+| `--brutal-shadow-offset-y` | `4px` | `4px` | 阴影垂直偏移 |
+| `--brutal-shadow-color` | `#000000` | `#ffffff` | 阴影颜色 |
+| `--brutal-radius` | `0px` | `0px` | 圆角元素的边框圆角 |
+| `--brutal-bg` | `#ffffff` | `#141414` | 背景颜色 |
+| `--brutal-fg` | `#000000` | `#ffffff` | 前景（文本）颜色 |
+| `--brutal-primary` | `#FF6B6B` | `#FF6B6B` | 主色（珊瑚色） |
+| `--brutal-secondary` | `#4ECDC4` | `#4ECDC4` | 辅助色（薄荷青） |
+| `--brutal-accent` | `#FFE66D` | `#FFE66D` | 强调色（黄色） |
+| `--brutal-destructive` | `#EF476F` | `#EF476F` | 危险/错误颜色 |
+| `--brutal-success` | `#7FB069` | `#7FB069` | 成功颜色 |
+| `--brutal-muted` | `#f3f4f6` | `#1e1e1e` | 柔和背景 |
+| `--brutal-muted-foreground` | `#4B5563` | `#9CA3AF` | 柔和文本颜色 |
+| `--brutal-ring` | `#000000` | `#ffffff` | 焦点环颜色 |
+| `--brutal-pressed-offset` | `2px` | `2px` | 按下状态的 Y 轴偏移 |
+| `--brutal-info` | `#4A90D9` | `#3B82F6` | 信息颜色 |
+| `--brutal-overlay` | `rgba(0,0,0,0.5)` | `rgba(0,0,0,0.7)` | 遮罩背景 |
+| `--brutal-placeholder` | `#9CA3AF` | `#6B7280` | 占位符文本颜色 |
+
+## 主题预设
+
+### Classic（默认）
+
+标志性的 BrutxUI 风格。粗边框、硬阴影、零圆角、鲜艳色彩。
+
+```css
+.theme-classic {
+    --brutal-border-width: 3px;
+    --brutal-border-color: #000000;
+    --brutal-shadow-offset-x: 4px;
+    --brutal-shadow-offset-y: 4px;
+    --brutal-shadow-color: #000000;
+    --brutal-radius: 0px;
+    --brutal-primary: #FF6B6B;
+    --brutal-secondary: #4ECDC4;
+    --brutal-accent: #FFE66D;
+}
+```
+
+### Pastel
+
+更柔和、更友好的风格。更细的边框、更小的阴影、圆角、柔和色调。
+
+```css
+.theme-pastel {
+    --brutal-border-width: 2px;
+    --brutal-border-color: #1e1e24;
+    --brutal-shadow-offset-x: 3px;
+    --brutal-shadow-offset-y: 3px;
+    --brutal-shadow-color: #1e1e24;
+    --brutal-radius: 8px;
+    --brutal-primary: #d6c6e1;
+    --brutal-secondary: #c5ded9;
+    --brutal-accent: #fbe3b5;
+}
+```
+
+### Mono
+
+极致对比。超粗边框、更大阴影、灰度调色板。
+
+```css
+.theme-mono {
+    --brutal-border-width: 4px;
+    --brutal-border-color: #000000;
+    --brutal-shadow-offset-x: 5px;
+    --brutal-shadow-offset-y: 5px;
+    --brutal-shadow-color: #000000;
+    --brutal-radius: 0px;
+    --brutal-primary: #000000;
+    --brutal-secondary: #ffffff;
+    --brutal-accent: #7a7a7a;
+}
+```
+
+## 自定义令牌
+
+在 `:root` 级别覆盖令牌以进行全局修改：
+
+```css
+:root {
+    --brutal-primary: #8B5CF6;
+    --brutal-secondary: #06B6D4;
+    --brutal-radius: 4px;
+}
+```
+
+或将覆盖范围限定到特定区域：
+
+```css
+.sidebar {
+    --brutal-primary: #8B5CF6;
+    --brutal-border-width: 2px;
+}
+```
+
+## Tailwind 工具类
+
+BrutxUI 注册了以下引用 CSS 变量的 Tailwind 工具类：
+
+### 边框
+
+| 工具类 | 映射到 |
+|---------|---------|
+| `border-3` | `border-width: var(--brutal-border-width)` |
+| `border-brutal` | `border-color: var(--brutal-border-color)` |
+| `rounded-brutal` | `border-radius: var(--brutal-radius)` |
+
+### 阴影
+
+| 工具类 | 映射到 |
+|---------|---------|
+| `shadow-brutal` | 完整偏移阴影 |
+| `shadow-brutal-sm` | 半偏移阴影 |
+| `shadow-brutal-lg` | 1.5 倍偏移阴影 |
+| `shadow-brutal-xl` | 2 倍偏移阴影 |
+
+### 颜色
+
+| 工具类 | 映射到 |
+|---------|---------|
+| `bg-brutal-bg` | `var(--brutal-bg)` |
+| `text-brutal-fg` | `var(--brutal-fg)` |
+| `bg-brutal-primary` | `var(--brutal-primary)` |
+| `bg-brutal-secondary` | `var(--brutal-secondary)` |
+| `bg-brutal-accent` | `var(--brutal-accent)` |
+| `bg-brutal-destructive` | `var(--brutal-destructive)` |
+| `bg-brutal-success` | `var(--brutal-success)` |
+| `bg-brutal-muted` | `var(--brutal-muted)` |
+| `text-brutal-muted-foreground` | `var(--brutal-muted-foreground)` |
+| `ring-brutal-ring` | `var(--brutal-ring)` |
+
+## 暗色模式
+
+BrutxUI 通过 `.dark` 类支持暗色模式。当 `dark` 类被应用到 `<html>` 或 `<body>` 元素时，所有 CSS 变量会自动切换为暗色值。
+
+```html
+<html class="dark">
+    <!-- Dark mode active -->
+</html>
+```
+
+通过编程方式切换暗色模式：
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isDark = ref(false)
+
+function toggleDark() {
+    isDark.value = !isDark.value
+    document.documentElement.classList.toggle('dark', isDark.value)
+}
+</script>
+
+<template>
+    <button @click="toggleDark">Toggle Dark Mode</button>
+</template>
+```
+
+主题预设也通过 `.dark .theme-pastel` 或 `.theme-pastel.dark` 选择器支持暗色模式。
diff --git a/apps/docs/hooks/use-copy-to-clipboard.ts b/apps/docs/hooks/use-copy-to-clipboard.ts
deleted file mode 100644
index 4dd1924..0000000
--- a/apps/docs/hooks/use-copy-to-clipboard.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-export function useCopyToClipboard(resetDelay = 2000) {
-    const [copied, setCopied] = React.useState(false);
-
-    const copy = React.useCallback(
-        async (text: string) => {
-            try {
-                await navigator.clipboard.writeText(text);
-                setCopied(true);
-                window.setTimeout(() => setCopied(false), resetDelay);
-                return true;
-            } catch (error) {
-                console.error('Failed to copy:', error);
-                return false;
-            }
-        },
-        [resetDelay]
-    );
-
-    return { copied, copy };
-}
diff --git a/apps/docs/index.md b/apps/docs/index.md
new file mode 100644
index 0000000..9ea798a
--- /dev/null
+++ b/apps/docs/index.md
@@ -0,0 +1,32 @@
+---
+layout: home
+
+hero:
+  name: BrutxUI
+  text: Neo-Brutalism Vue 3 组件库
+  tagline: 粗边框。硬阴影。零妥协。为 Vue 3 + Tailwind CSS 打造的复制粘贴优先组件库，每一个像素都遵循新粗野主义设计哲学。
+  actions:
+    - theme: brand
+      text: 快速开始 →
+      link: /guide/getting-started
+    - theme: alt
+      text: 浏览组件
+      link: /components/alert
+    - theme: alt
+      text: GitHub
+      link: https://github.com/lidaixingchen/brutxui-vue3
+
+features:
+  - title: 粗野主义设计系统
+    details: 3px 粗边框、4px 硬阴影、零圆角、鲜艳色彩。每个组件都基于 CSS 自定义属性令牌构建，支持 Classic / Pastel / Mono 三套主题预设。
+  - title: 无障碍优先
+    details: 基于 reka-ui 无头原语构建。正确的 ARIA 属性、键盘导航、焦点管理和屏幕阅读器兼容性，符合 WCAG 标准。
+  - title: TypeScript 严格模式
+    details: 全程严格类型安全。通过 defineProps、CVA 变体和每个 prop 的自动补全，零 any 类型。
+  - title: 复制粘贴优先
+    details: 零依赖锁定。直接将组件源码复制到你的项目中，完全拥有代码，随心定制每一个细节。
+  - title: CLI 工具
+    details: 一条命令添加组件。npx brutx-vue init 初始化项目，npx brutx-vue add button card 按需安装，AI 友好的项目结构。
+  - title: 现代技术栈
+    details: Vue 3.5+ script setup、Tailwind CSS 3.4+、Vite 6+、Vitest 3+、pnpm。为现代 Vue 生态而生。
+---
diff --git a/apps/docs/lib/utils.ts b/apps/docs/lib/utils.ts
deleted file mode 100644
index 8c7f872..0000000
--- a/apps/docs/lib/utils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}
-
-export function getVariantClass(
-    variants: Record<string, string>,
-    variant: string,
-    fallback: string = ''
-): string {
-    return variants[variant] || fallback;
-}
-
-export const brutalismClasses = {
-    base: 'nb-border nb-shadow nb-font nb-no-radius nb-transition',
-    interactive: 'nb-hover nb-active nb-focus nb-disabled',
-    button: 'nb-btn',
-    card: 'nb-card',
-    input: 'nb-input',
-} as const;
diff --git a/apps/docs/next-env.d.ts b/apps/docs/next-env.d.ts
deleted file mode 100644
index 830fb59..0000000
--- a/apps/docs/next-env.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
deleted file mode 100644
index 3cadd5d..0000000
--- a/apps/docs/next.config.mjs
+++ /dev/null
@@ -1,61 +0,0 @@
-import createMDX from '@next/mdx';
-
-/**
- * @type {import('next').NextConfig}
- */
-const nextConfig = {
-    pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
-    transpilePackages: ['brutx-ui'],
-
-    experimental: {
-        reactCompiler: true,
-        optimizePackageImports: [
-            'lucide-react',
-            '@radix-ui/react-dialog',
-            '@radix-ui/react-dropdown-menu',
-            '@radix-ui/react-popover',
-            '@radix-ui/react-select',
-            '@radix-ui/react-tabs',
-            '@radix-ui/react-tooltip',
-            '@radix-ui/react-checkbox',
-            '@radix-ui/react-switch',
-            '@radix-ui/react-avatar',
-            '@radix-ui/react-scroll-area',
-            '@radix-ui/react-separator',
-            '@radix-ui/react-slot',
-            'cmdk',
-        ],
-    },
-
-    images: {
-        remotePatterns: [
-            {
-                protocol: 'https',
-                hostname: 'i.pravatar.cc',
-            },
-            {
-                protocol: 'https',
-                hostname: 'avatars.githubusercontent.com',
-            },
-        ],
-    },
-
-    turbopack: {
-        rules: {
-            '*.svg': {
-                loaders: ['@svgr/webpack'],
-                as: '*.js',
-            },
-        },
-    },
-};
-
-const withMDX = createMDX({
-    extension: /\.mdx?$/,
-    options: {
-        remarkPlugins: [],
-        rehypePlugins: [],
-    },
-});
-
-export default withMDX(nextConfig);
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5bee4e1..f284c0a 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -2,45 +2,27 @@
     "name": "docs",
     "version": "0.1.0",
     "private": true,
+    "type": "module",
     "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint",
-        "typecheck": "tsc --noEmit"
+        "dev": "vitepress dev",
+        "build": "vitepress build",
+        "preview": "vitepress preview"
     },
     "dependencies": {
-        "@hookform/resolvers": "^5.4.0",
-        "@mdx-js/loader": "^3.0.0",
-        "@mdx-js/react": "^3.0.0",
-        "@next/mdx": "^15.5.18",
-        "@radix-ui/react-alert-dialog": "^1.1.15",
-        "@radix-ui/react-label": "^2.1.8",
-        "@radix-ui/react-progress": "^1.1.8",
-        "@radix-ui/react-radio-group": "^1.3.8",
-        "@radix-ui/react-slider": "^1.3.6",
-        "@radix-ui/react-toggle": "^1.1.10",
-        "@radix-ui/react-toggle-group": "^1.1.11",
-        "brutx-ui": "workspace:*",
-        "next": "15.5.18",
-        "next-themes": "^0.2.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "react-hook-form": "^7.76.1",
-        "zod": "^4.4.3"
+        "brutx-ui-vue": "workspace:*",
+        "clsx": "^2.1.0",
+        "lucide-vue-next": "^0.510.0",
+        "tailwind-merge": "^2.2.0",
+        "vue": "^3.5.0"
     },
     "devDependencies": {
-        "@types/mdx": "^2.0.10",
-        "@types/node": "^20.17.15",
-        "@types/react": "^19.0.8",
-        "@types/react-dom": "^19.0.3",
+        "@vitejs/plugin-vue": "^5.2.0",
         "autoprefixer": "^10.4.16",
-        "babel-plugin-react-compiler": "^1.0.0",
-        "eslint": "^8.56.0",
-        "eslint-config-next": "15.5.18",
-        "lucide-react": "^0.555.0",
         "postcss": "^8.4.33",
         "tailwindcss": "^3.4.0",
-        "typescript": "^5.7.2"
+        "tailwindcss-animate": "^1.0.7",
+        "typescript": "^5.7.2",
+        "vitepress": "^1.6.0",
+        "vue-tsc": "^2.2.0"
     }
 }
diff --git a/apps/docs/postcss.config.js b/apps/docs/postcss.config.cjs
similarity index 96%
rename from apps/docs/postcss.config.js
rename to apps/docs/postcss.config.cjs
index 67cdf1a..fef1b22 100644
--- a/apps/docs/postcss.config.js
+++ b/apps/docs/postcss.config.cjs
@@ -3,4 +3,4 @@ module.exports = {
         tailwindcss: {},
         autoprefixer: {},
     },
-};
+}
diff --git a/apps/docs/public/--output b/apps/docs/public/--output
deleted file mode 100644
index b440a5d..0000000
Binary files a/apps/docs/public/--output and /dev/null differ
diff --git a/apps/docs/public/manifest.json b/apps/docs/public/manifest.json
index 7ccfb05..a842563 100644
--- a/apps/docs/public/manifest.json
+++ b/apps/docs/public/manifest.json
@@ -1,14 +1,14 @@
 {
-    "name": "Brutx",
-    "short_name": "Brutx",
-    "description": "Brutx - Neo-Brutalism React Component Library - 27+ accessible components with bold borders, offset shadows, and vibrant colors.",
-    "start_url": "/",
+    "name": "BrutxUI",
+    "short_name": "BrutxUI",
+    "description": "BrutxUI - Neo-Brutalism 风格 Vue 3 组件库 - 35+ 无障碍组件，粗边框、硬阴影、鲜艳色彩。",
+    "start_url": "/brutxui-vue3/",
     "display": "standalone",
-    "background_color": "#FFFBF5",
+    "background_color": "#ffffff",
     "theme_color": "#FF6B6B",
     "icons": [
         {
-            "src": "/favicon.svg",
+            "src": "/brutxui-vue3/favicon.svg",
             "sizes": "any",
             "type": "image/svg+xml"
         }
diff --git a/apps/docs/public/og-image.svg b/apps/docs/public/og-image.svg
index ba68b6b..a4b1ba2 100644
--- a/apps/docs/public/og-image.svg
+++ b/apps/docs/public/og-image.svg
@@ -31,13 +31,13 @@
   
   <!-- Subtitle -->
   <text x="600" y="380" font-family="Arial, sans-serif" font-size="28" font-weight="bold" text-anchor="middle" fill="#333">
-    Neo-Brutalism React Component Library
+    Neo-Brutalism Vue 3 Component Library
   </text>
-  
+
   <!-- Features -->
   <g transform="translate(300, 440)">
     <rect x="0" y="0" width="140" height="40" fill="#FF6B6B" stroke="#000" stroke-width="3"/>
-    <text x="70" y="27" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#000">27 Components</text>
+    <text x="70" y="27" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#000">43 Components</text>
   </g>
   <g transform="translate(460, 440)">
     <rect x="0" y="0" width="120" height="40" fill="#4ECDC4" stroke="#000" stroke-width="3"/>
@@ -51,9 +51,9 @@
     <rect x="0" y="0" width="120" height="40" fill="#FF6B6B" stroke="#000" stroke-width="3"/>
     <text x="60" y="27" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#000">Dark Mode</text>
   </g>
-  
+
   <!-- URL -->
   <text x="600" y="560" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#666">
-    brutxui.site
+    lidaixingchen.github.io/brutxui-vue3
   </text>
 </svg>
diff --git a/apps/docs/public/robots.txt b/apps/docs/public/robots.txt
new file mode 100644
index 0000000..ed5b2ec
--- /dev/null
+++ b/apps/docs/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://lidaixingchen.github.io/brutxui-vue3/sitemap.xml
diff --git a/apps/docs/tailwind.config.cjs b/apps/docs/tailwind.config.cjs
new file mode 100644
index 0000000..d04bb0c
--- /dev/null
+++ b/apps/docs/tailwind.config.cjs
@@ -0,0 +1,49 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: 'class',
+    content: [
+        './*.md',
+        './guide/*.md',
+        './components/*.md',
+        './blocks/*.md',
+        './.vitepress/**/*.{ts,vue}',
+        '../../packages/ui/src/**/*.{js,ts,vue}',
+    ],
+    theme: {
+        extend: {
+            colors: {
+                brutal: {
+                    bg: 'var(--brutal-bg)',
+                    fg: 'var(--brutal-fg)',
+                    primary: 'var(--brutal-primary)',
+                    secondary: 'var(--brutal-secondary)',
+                    accent: 'var(--brutal-accent)',
+                    destructive: 'var(--brutal-destructive)',
+                    success: 'var(--brutal-success)',
+                    muted: 'var(--brutal-muted)',
+                    'muted-foreground': 'var(--brutal-muted-foreground)',
+                    ring: 'var(--brutal-ring)',
+                    info: 'var(--brutal-info)',
+                    overlay: 'var(--brutal-overlay)',
+                    placeholder: 'var(--brutal-placeholder)',
+                },
+            },
+            fontFamily: {
+                brutal: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
+            },
+            boxShadow: {
+                brutal: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
+                'brutal-sm': 'calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)',
+                'brutal-lg': 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
+                'brutal-xl': 'calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)',
+            },
+            borderWidth: {
+                3: '3px',
+            },
+        },
+    },
+    plugins: [
+        require('../../packages/ui/src/lib/brutalism-plugin'),
+        require('tailwindcss-animate'),
+    ],
+}
diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
deleted file mode 100644
index 2818655..0000000
--- a/apps/docs/tailwind.config.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-    darkMode: 'class',
-    content: [
-        './pages/**/*.{js,ts,jsx,tsx,mdx}',
-        './components/**/*.{js,ts,jsx,tsx,mdx}',
-        './app/**/*.{js,ts,jsx,tsx,mdx}',
-        '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
-        './node_modules/brutx-ui/**/*.{js,mjs}',
-    ],
-    theme: {
-        extend: {
-            colors: {
-                border: 'hsl(var(--border))',
-                input: 'hsl(var(--input))',
-                ring: 'hsl(var(--ring))',
-                background: 'hsl(var(--background))',
-                foreground: 'hsl(var(--foreground))',
-                primary: {
-                    DEFAULT: 'hsl(var(--primary))',
-                    foreground: 'hsl(var(--primary-foreground))',
-                },
-                secondary: {
-                    DEFAULT: 'hsl(var(--secondary))',
-                    foreground: 'hsl(var(--secondary-foreground))',
-                },
-                destructive: {
-                    DEFAULT: 'hsl(var(--destructive))',
-                    foreground: 'hsl(var(--destructive-foreground))',
-                },
-                muted: {
-                    DEFAULT: 'hsl(var(--muted))',
-                    foreground: 'hsl(var(--muted-foreground))',
-                },
-                accent: {
-                    DEFAULT: 'hsl(var(--accent))',
-                    foreground: 'hsl(var(--accent-foreground))',
-                },
-                popover: {
-                    DEFAULT: 'hsl(var(--popover))',
-                    foreground: 'hsl(var(--popover-foreground))',
-                },
-                card: {
-                    DEFAULT: 'hsl(var(--card))',
-                    foreground: 'hsl(var(--card-foreground))',
-                },
-                brutalism: {
-                    bg: '#FFFFFF',
-                    text: '#000000',
-                    primary: '#FF6B6B',
-                    secondary: '#4ECDC4',
-                    accent: '#FFE66D',
-                    success: '#7FB069',
-                    warning: '#F9A825',
-                    danger: '#EF476F',
-                    info: '#4A90D9',
-                },
-            },
-            fontFamily: {
-                brutal: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
-            },
-            boxShadow: {
-                xs: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                brutal: '4px 4px 0px 0px #000000',
-                'brutal-sm': '2px 2px 0px 0px #000000',
-                'brutal-lg': '6px 6px 0px 0px #000000',
-                'brutal-xl': '8px 8px 0px 0px #000000',
-                'brutal-dark': '4px 4px 0px 0px #FFFFFF',
-                'brutal-dark-sm': '2px 2px 0px 0px #FFFFFF',
-                'brutal-dark-lg': '6px 6px 0px 0px #FFFFFF',
-            },
-            borderWidth: {
-                3: '3px',
-            },
-        },
-    },
-    plugins: [require('../../packages/ui/src/lib/brutalism-plugin')],
-};
-
-export default config;
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index dd517d9..dcc8e9e 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,29 +1,19 @@
 {
     "compilerOptions": {
-        "target": "ES2017",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "noEmit": true,
-        "esModuleInterop": true,
-        "module": "esnext",
+        "target": "ES2020",
+        "module": "ESNext",
         "moduleResolution": "bundler",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
+        "strict": true,
         "jsx": "preserve",
-        "incremental": true,
-        "plugins": [
-            {
-                "name": "next"
-            }
-        ],
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+        "noEmit": true,
         "paths": {
-            "@/*": ["./*"],
-            "@ui/*": ["../../packages/ui/src/*"],
-            "@components/ui/*": ["../../packages/ui/src/components/ui/*"]
+            "@/*": ["./.vitepress/*"]
         }
     },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mdx"],
+    "include": [".vitepress/**/*.ts", ".vitepress/**/*.vue"],
     "exclude": ["node_modules"]
 }
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index 60225ce..0000000
--- a/docs/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Internal Architecture Documentation
-
-> **Note**: This directory contains **internal developer documentation** for the Brutx project.
-> For the public-facing documentation site, see [`apps/docs/`](../apps/docs/).
-
-## Contents
-
-- **[cli.md](./cli.md)** — CLI command reference and `components.json` schema
-- **[registry.md](./registry.md)** — Registry architecture, JSON schema, and how to add new components
-- **[tailwind.md](./tailwind.md)** — Tailwind CSS v3/v4 integration guide and dark mode support
diff --git a/docs/cli.md b/docs/cli.md
deleted file mode 100644
index af40cb1..0000000
--- a/docs/cli.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Brutx CLI Reference
-
-The Brutx CLI (`brutx`) is an on-demand tool for project initialization, styles configuration, and component installation.
-
----
-
-## Usage
-
-Execute commands via `npx`:
-
-```bash
-npx brutx@latest [command] [options]
-```
-
----
-
-## Commands
-
-### 1. `init`
-
-Initialize Brutx configuration and style system in your local project.
-
-```bash
-npx brutx@latest init [options]
-```
-
-#### What it does
-- Detects project structure (Next.js, Vite, Create React App, Remix, etc.) and package managers (npm, pnpm, yarn, bun).
-- Creates `components.json` in the root folder.
-- Generates the utility file `lib/utils.ts` containing the standard class merger helper (`cn`).
-- Creates a `components/ui/` directory.
-- Appends Neo-Brutalist styles and utility classes (such as `.shadow-brutal`, `.border-3`) to your globals CSS.
-- Installs base dependencies (`clsx`, `tailwind-merge`, `class-variance-authority`, `lucide-react`).
-
-#### Options
-- `-y, --yes`: Skip all confirmation prompts and use detected configurations.
-- `-d, --defaults`: Initialize with default tailwind settings.
-- `-f, --force`: Force overwrite existing configuration file.
-- `-c, --cwd <cwd>`: Override target working directory (default is `process.cwd()`).
-- `-s, --silent`: Suppress all outputs and spinner logging.
-
----
-
-### 2. `add`
-
-Add components and all of their dependencies to your project.
-
-```bash
-npx brutx@latest add [components...] [options]
-```
-
-#### What it does
-- Resolves and downloads all sub-components (`registryDependencies`) recursively.
-- Replaces import paths matching registry defaults with your workspace custom aliases (e.g. `@/lib/utils` is replaced with `~/utils/cn`).
-- Writes component files and recursively ensures target folders are created safely.
-- Detects and installs required npm dependencies.
-
-#### Options
-- `-y, --yes`: Skip confirmation picker if no components arguments are passed.
-- `-a, --all`: Add every available Brutx component.
-- `-o, --overwrite`: Overwrite existing local components files if they exist.
-- `-p, --path <path>`: Override the path to install components to.
-- `-c, --cwd <cwd>`: Override working directory.
-- `-s, --silent`: Mute all logs.
-- `--dry-run`: Simulate files generation and dependency installation without writing files to disk (useful for dry runs and testing configurations).
-- `-r, --registry <registry>`: Specify a custom registry URL or local file-based path for offline setups and testing.
-
----
-
-## Configuration File (`components.json`)
-
-The CLI reads and writes project settings inside `components.json`:
-
-```json
-{
-  "$schema": "https://brutxui.site/schema.json",
-  "style": "brutalism",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/app/globals.css"
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}
-```
-
-### Fields
-- **`style`**: Design style token (default is `"brutalism"`).
-- **`tailwind.config`**: Path to the Tailwind configuration file.
-- **`tailwind.css`**: Path to the global CSS file of your project.
-- **`aliases.components`**: Import alias pointing to the components directory.
-- **`aliases.utils`**: Import alias pointing to the utilities directory.
diff --git a/docs/registry.md b/docs/registry.md
deleted file mode 100644
index 68495e2..0000000
--- a/docs/registry.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# Component Registry System
-
-Brutx distributes React components through a **registry-based architecture**. Instead of installing one large npm package with every style and layout, users fetch the components they need directly into their local codebase.
-
----
-
-## How it Works
-
-Every component is defined as a static JSON file stored in `packages/registry/registry/[name].json`. 
-
-When a user runs `npx brutx add [component]`, the CLI:
-1. Resolves all dependencies and sub-components (`registryDependencies`) recursively using a DFS topological sort.
-2. Fetches the JSON file from the GitHub remote registry (or reads it locally in offline mode).
-3. Resolves import aliases (e.g., `@/lib/utils` and `@/components`) to match the user's custom workspace configuration.
-4. Writes files to the local disk and triggers the project's package manager to install npm dependencies.
-
----
-
-## Registry JSON Schema
-
-Each registry item follows this TypeScript schema structure:
-
-```json
-{
-  "name": "combobox",
-  "type": "registry:ui",
-  "dependencies": [
-    "cmdk"
-  ],
-  "registryDependencies": [
-    "button",
-    "popover",
-    "command"
-  ],
-  "files": [
-    {
-      "path": "components/ui/combobox.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\n..."
-    }
-  ]
-}
-```
-
-### Fields
-- **`name`** *(string)*: Unique identifier of the component.
-- **`type`** *(string)*: Type of registry item (usually `"registry:ui"`).
-- **`dependencies`** *(string[])*: Third-party npm packages required by this component (e.g. `lucide-react`, `@radix-ui/react-slot`).
-- **`registryDependencies`** *(string[])*: Other Brutx components required by this component.
-- **`files`** *(Array)*: List of files to be written to the user's project, containing paths relative to the component alias and the raw file string content.
-
----
-
-## Adding a New Component to the Registry
-
-To add a new component dynamically:
-
-1. Create your React component in `packages/ui/src/components/[name].tsx` or `packages/ui/src/components/ui/[name].tsx`.
-2. Declare it inside the CLI `COMPONENTS` metadata constant within `packages/cli/src/lib/constants.ts`:
-   ```typescript
-   export const COMPONENTS = {
-     // ...
-     "new-component": {
-       name: "new-component",
-       dependencies: ["some-npm-package"]
-     }
-   }
-   ```
-3. Run the automated registry bundler script:
-   ```bash
-   pnpm --filter brutx-registry build
-   ```
-   This script will:
-   - Read the template code.
-   - Use regex to detect other Brutx components imported in the file and add them as `registryDependencies`.
-   - Package everything into a static `.json` schema file inside `packages/registry/registry/`.
-4. Commit your changes and push to GitHub. Once the registry is published, the component is available from the remote registry.
diff --git a/docs/tailwind.md b/docs/tailwind.md
deleted file mode 100644
index 6fe7d1d..0000000
--- a/docs/tailwind.md
+++ /dev/null
@@ -1,110 +0,0 @@
-# Tailwind CSS Integration Guide
-
-Brutx is built on React and uses **Tailwind CSS** for styling. It supports both **Tailwind CSS v3** and the CSS-first **Tailwind CSS v4** workflow.
-
----
-
-## Tailwind CSS v4 Configuration (CSS-First)
-
-Tailwind CSS v4 introduces a CSS-first configuration pipeline. In most v4 projects, you no longer need a `tailwind.config.js` file.
-
-### 1. Style Integration on `init`
-When you run `npx brutx@latest init` in a Tailwind v4 project, the CLI automatically detects the version and configures your `components.json` with an empty config value (`"config": ""`).
-
-It appends the Neo-Brutalist design tokens directly to your main CSS file (`globals.css`):
-
-```css
-@import "tailwindcss";
-
-/* Brutalist UI Styles */
-.border-3 {
-    border-width: 3px;
-}
-
-.shadow-brutal {
-    box-shadow: 4px 4px 0px 0px #000;
-}
-
-.shadow-brutal-sm {
-    box-shadow: 2px 2px 0px 0px #000;
-}
-
-.shadow-brutal-lg {
-    box-shadow: 6px 6px 0px 0px #000;
-}
-
-.dark .shadow-brutal {
-    box-shadow: 4px 4px 0px 0px #fff;
-}
-
-.dark .shadow-brutal-sm {
-    box-shadow: 2px 2px 0px 0px #fff;
-}
-
-.dark .shadow-brutal-lg {
-    box-shadow: 6px 6px 0px 0px #fff;
-}
-```
-
-Because these utility classes are written in native CSS, Tailwind v4 can parse them directly.
-
-### 2. Customizing Theme Colors in Tailwind v4
-To customize theme colors in Tailwind v4, declare them inside the `@theme` directive in your `globals.css`:
-
-```css
-@import "tailwindcss";
-
-@theme {
-  /* Override default tailwind colors or add custom ones */
-  --color-coral: #FF6B6B;
-  --color-teal: #4ECDC4;
-  --color-yellow: #FFE66D;
-  
-  /* Configure custom font */
-  --font-sans: 'Outfit', sans-serif;
-}
-```
-
-You can then use `bg-coral`, `text-teal`, and `border-yellow` inside your project.
-
----
-
-## Tailwind CSS v3 Configuration (JS-Based)
-
-Tailwind CSS v3 relies on JavaScript config files.
-
-### 1. Configuration on `init`
-Running `npx brutx@latest init` creates/updates `tailwind.config.js` and appends the Neo-Brutalist CSS utilities inside your globals CSS file.
-
-### 2. Customizing Theme Colors in Tailwind v3
-To customize colors in Tailwind v3, add them inside `tailwind.config.js`:
-
-```javascript
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        coral: '#FF6B6B',
-        teal: '#4ECDC4',
-        yellow: '#FFE66D',
-      },
-    },
-  },
-}
-```
-
----
-
-## Dark Mode
-
-Brutx fully supports dark mode on both Tailwind v3 and v4:
-
-- **Tailwind v4:** Dark mode variants are automatically handled. Standard class selectors like `.dark` work out of the box.
-- **Tailwind v3:** If you are using class-based dark mode, ensure you have configured it in `tailwind.config.js`:
-  ```javascript
-  module.exports = {
-    darkMode: 'class',
-    // ...
-  }
-  ```
diff --git a/llms-full.txt b/llms-full.txt
deleted file mode 100644
index 59eabf5..0000000
--- a/llms-full.txt
+++ /dev/null
@@ -1,99 +0,0 @@
-# BrutxUI (Full Context)
-
-BrutxUI is a high-fidelity Neo-Brutalist React and Tailwind CSS component registry. It maps bold, black comic-book borders, offset shadows, and saturated highlights directly into accessible React components.
-
----
-
-## 🎨 Complete Design Tokens & Utility Classes
-
-BrutxUI exposes CSS Custom Properties that can be dynamically customized. The entire system is built around these core tokens:
-
-```css
-:root {
-  /* Sizing Outlines */
-  --brutal-border-width: 3px;
-  --brutal-border-color: #000000;
-  
-  /* Shadows */
-  --brutal-shadow-offset-x: 4px;
-  --brutal-shadow-offset-y: 4px;
-  --brutal-shadow-color: #000000;
-  
-  /* Radii */
-  --brutal-radius: 0px;
-  
-  /* pressed translation depths */
-  --brutal-pressed-offset: 2px;
-  
-  /* Colors */
-  --brutal-primary: #FF6B6B;     /* Coral Red */
-  --brutal-secondary: #4ECDC4;   /* Mint Teal */
-  --brutal-accent: #FFE66D;      /* Neon Yellow */
-  --brutal-destructive: #EF476F; /* Dangerous Red */
-  --brutal-success: #7FB069;     /* Saturated Green */
-  --brutal-ring: #000000;        /* Focus indicator */
-}
-```
-
----
-
-## 🧩 Architectural Blueprint: CVA Variant Setup
-
-Every BrutxUI component leverages `class-variance-authority` (cva) to declare variants cleanly, merging custom user classes via `cn`.
-
-### Button Component Blueprint:
-```tsx
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-black ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_#000]',
-  {
-    variants: {
-      variant: {
-        primary: 'bg-[#FF6B6B] text-white border-3 border-black shadow-brutal hover:bg-[#FF6B6B]/90',
-        secondary: 'bg-[#4ECDC4] text-black border-3 border-black shadow-brutal hover:bg-[#4ECDC4]/90',
-        accent: 'bg-[#FFE66D] text-black border-3 border-black shadow-brutal hover:bg-[#FFE66D]/90',
-        outline: 'bg-white text-black border-3 border-black shadow-brutal hover:bg-gray-100',
-        ghost: 'hover:bg-gray-100 text-black border-3 border-transparent'
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 px-3',
-        lg: 'h-11 px-8'
-      }
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'default'
-    }
-  }
-);
-```
-
----
-
-## 🛠️ Monorepo Directories & Code Locations
-
-- **Documentation Website:** `/apps/docs/`
-- **Core Package Registry:** `/packages/ui/`
-  - Component files reside in: `/packages/ui/src/components/ui/`
-  - Workspace exports mapping: `/packages/ui/package.json`
-- **Registry Builders:** `/packages/registry/`
-  - Components schema configurations: `/packages/registry/registry.json`
-- **CLI Utilities:** `/packages/cli/`
-  - CLI operations: `/packages/cli/src/commands/`
-  - Tests suite coverage: `/packages/cli/tests/`
-
----
-
-## 🚫 Avoid These Bad Anti-Patterns
-
-When writing code for BrutxUI:
-1. **NO Soft Shadows:** Do not use Tailwind default `shadow-md` or `shadow-lg`. Use `shadow-brutal` or `shadow-brutal-lg`.
-2. **NO Rounded Borders:** Do not use `rounded-md` or `rounded-lg` as default variants unless softened explicitly via theme custom styling classes. Use `rounded-none` or `rounded-brutal`.
-3. **NO Dull Outlines:** Do not use light borders like `border-slate-100` or `border-slate-200` for primary borders. Outlines must remain heavy (`border-3 border-black`).
-4. **NO Missing Press Feedback:** Interactive buttons must translate on click. Do not let active states feel inert or lifeless.
-5. **NO Path Traversal:** When compiling or editing CLI dependencies, never allow relative traverses (`..`) to escape safe workspaces. Normalise and check paths.
diff --git a/llms.txt b/llms.txt
deleted file mode 100644
index a339816..0000000
--- a/llms.txt
+++ /dev/null
@@ -1,41 +0,0 @@
-# BrutxUI
-
-The ultimate copy-paste Neo-Brutalist React & Tailwind CSS component registry. Bold, raw, accessible, and 100% compatible with shadcn/ui.
-
-## Philosophy
-BrutxUI distributes components on-demand via a JSON registry CLI rather than a monolithic node dependency. You copy, paste, and own the code.
-
-## Visual Styling Rules
-- **Borders:** Thick black outlines using `border-3 border-black` (or `dark:border-white` in dark mode).
-- **Shadows:** Hard offset shadows using `shadow-brutal` (4px 4px 0px 0px #000) or `shadow-brutal-lg` (6px 6px). Avoid standard blurred shadows.
-- **Corners:** Sharp 0px corners via `rounded-none`, or global token parameterized classes like `rounded-brutal`.
-- **Transitions / Press:** Physical press effect translation on active state: `active:translate-x-[2px] active:translate-y-[2px] active:shadow-[2px_2px_0px_0px_#000] transition-all`.
-- **Contrast / Accents:** Neon saturated colors: Coral (`#FF6B6B`), Mint Teal (`#4ECDC4`), Saturated Yellow (`#FFE66D`).
-
-## Directory Structure
-- `apps/docs/`: Next.js 15 documentation website
-- `packages/ui/`: Core React source code modules (`brutx-ui`)
-  - `src/components/ui/`: Direct component files (e.g. `button.tsx`, `card.tsx`)
-- `packages/cli/`: CLI package commands (`brutx`) for `init` and `add`
-- `packages/registry/`: Dynamic JSON component registry builder
-
-## Core Commands
-```bash
-# Initialize BrutxUI
-npx brutx@latest init
-
-# Add atomic components
-npx brutx@latest add button card dialog
-
-# Add all components
-npx brutx@latest add --all
-
-# shadcn compatibility workflow addition
-npx shadcn@latest add https://brutxui.site/registry/button.json
-```
-
-## Creating Custom Components
-1. Save React markup in `packages/ui/src/components/ui/my-component.tsx`
-2. Extend class variance authorities (CVA) inside components.
-3. Import the shared class merger utility `cn` from `@/lib/utils` or `../lib/utils` depending on nesting depths.
-4. Keep props predictable, well-typed, and accessible.
diff --git a/package.json b/package.json
index 22b2ce8..c936c7b 100644
--- a/package.json
+++ b/package.json
@@ -2,18 +2,18 @@
     "name": "brutx-monorepo",
     "version": "1.0.0",
     "private": true,
-    "description": "Neo-Brutalism UI Library Monorepo",
+    "description": "Neo-Brutalism UI Library Monorepo (Vue 3)",
     "scripts": {
         "dev": "pnpm --filter docs dev",
-        "build": "pnpm --filter brutx-ui build && pnpm --filter docs build",
-        "build:ui": "pnpm --filter brutx-ui build",
+        "build": "pnpm --filter brutx-ui-vue build",
+        "build:ui": "pnpm --filter brutx-ui-vue build",
         "build:docs": "pnpm --filter docs build",
         "lint": "pnpm -r lint",
         "clean": "pnpm -r clean",
         "typecheck": "pnpm -r typecheck",
-        "test": "pnpm --filter brutx-ui test && pnpm --filter brutx test",
-        "test:watch": "pnpm --filter brutx-ui test:watch",
-        "test:coverage": "pnpm --filter brutx-ui test:coverage"
+        "test": "pnpm --filter brutx-ui-vue test",
+        "test:watch": "pnpm --filter brutx-ui-vue test:watch",
+        "test:coverage": "pnpm --filter brutx-ui-vue test:coverage"
     },
     "devDependencies": {
         "typescript": "^5.7.2"
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 07d1131..63c5e81 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,9 +1,9 @@
 {
-    "name": "brutx",
-    "version": "0.3.0",
-    "description": "CLI for adding Brutalist UI components to your project",
+    "name": "brutx-vue",
+    "version": "0.3.1",
+    "description": "CLI for adding Neo-Brutalist Vue 3 UI components to your project",
     "bin": {
-        "brutx": "dist/index.js"
+        "brutx-vue": "dist/index.js"
     },
     "main": "./dist/index.js",
     "type": "module",
@@ -17,7 +17,7 @@
         "test": "vitest run"
     },
     "dependencies": {
-        "brutx-shared": "workspace:*",
+        "brutx-shared-vue": "workspace:*",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "fs-extra": "^11.2.0",
@@ -32,17 +32,19 @@
         "vitest": "^1.3.1"
     },
     "keywords": [
-        "brutx",
+        "brutx-vue",
         "cli",
         "neo-brutalism",
-        "react",
-        "components"
+        "vue",
+        "vue3",
+        "components",
+        "tailwindcss"
     ],
-    "author": "dev-snake",
+    "author": "lidaixingchen",
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/dev-snake/brutxui"
+        "url": "https://github.com/lidaixingchen/brutxui-vue3"
     },
-    "homepage": "https://brutxui.site"
+    "homepage": "https://lidaixingchen.github.io/brutxui-vue3/"
 }
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index 8f032d2..9c92375 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -25,12 +25,18 @@ async function ensureInitialized(cwd: string): Promise<BrutalistConfig> {
     const configPath = path.join(cwd, 'components.json');
 
     if (!(await fs.pathExists(configPath))) {
-        logger.error('Error: Brutx is not initialized.');
-        logger.warn('Run: npx brutx@latest init');
+        logger.error('Error: Brutx-Vue is not initialized.');
+        logger.warn('Run: npx brutx-vue@latest init');
         process.exit(1);
     }
 
-    return fs.readJson(configPath);
+    const config = await fs.readJson(configPath);
+    if (!config?.aliases?.components || !config?.aliases?.utils) {
+        logger.error('Error: Invalid components.json. Missing required "aliases.components" or "aliases.utils".');
+        logger.warn('Run: npx brutx-vue@latest init --force to regenerate.');
+        process.exit(1);
+    }
+    return config;
 }
 
 async function validateComponents(components: string[]): Promise<void> {
@@ -40,7 +46,7 @@ async function validateComponents(components: string[]): Promise<void> {
     if (invalid.length > 0) {
         logger.newLine();
         logger.error(`Unknown components: ${invalid.join(', ')}`);
-        logger.warn('Please choose from the available list or run npx brutx add interactively without arguments.');
+        logger.warn('Please choose from the available list or run npx brutx-vue add interactively without arguments.');
         logger.warn(`Available: ${AVAILABLE_COMPONENTS.join(', ')}`);
         process.exit(1);
     }
@@ -57,7 +63,7 @@ async function selectComponents(inputComponents: string[], options: AddOptions):
 
     if (options.yes) {
         logger.error('Error: No components specified.');
-        logger.warn('Use: npx brutx@latest add [component] or --all');
+        logger.warn('Use: npx brutx-vue@latest add [component] or --all');
         process.exit(1);
     }
 
@@ -86,7 +92,7 @@ function resolveComponentFilePath(registryPath: string, config: BrutalistConfig,
     }
 
     if (registryPath.startsWith('lib/')) {
-        const relative = registryPath.replace('lib/', '');
+        const relative = registryPath.slice(4);
         const aliasPath = resolveAliasPath(config.aliases.utils, cwd);
         return path.join(path.dirname(aliasPath), relative);
     }
@@ -112,20 +118,20 @@ async function writeRegistryFiles(
     spinner: Ora | null
 ): Promise<{ added: string[]; skipped: string[]; filesWritten: string[] }> {
     const added: string[] = [];
-    const skipped: string[] = [];
+    const skippedSet = new Set<string>();
     const filesWritten: string[] = [];
 
     for (const item of items) {
         let itemAdded = false;
 
         for (const file of item.files) {
-            const targetPath = resolveComponentFilePath(file.path, config, cwd);
-
             const normalizedPath = path.normalize(file.path);
             if (normalizedPath.startsWith('..') || path.isAbsolute(normalizedPath)) {
                 throw new Error(`Security Error: Malicious component file path detected: "${file.path}".`);
             }
 
+            const targetPath = resolveComponentFilePath(file.path, config, cwd);
+
             if (!isSafePath(targetPath, cwd)) {
                 throw new Error(`Security Error: Path traversal detected. Access denied to path "${targetPath}".`);
             }
@@ -133,7 +139,7 @@ async function writeRegistryFiles(
             if (await fs.pathExists(targetPath)) {
                 if (!options.overwrite) {
                     spinner?.info(`Skipping file "${file.path}" for "${item.name}" (already exists). Use --overwrite to overwrite.`);
-                    skipped.push(item.name);
+                    skippedSet.add(item.name);
                     continue;
                 }
             }
@@ -152,12 +158,12 @@ async function writeRegistryFiles(
             filesWritten.push(targetPath);
         }
 
-        if (itemAdded && !skipped.includes(item.name)) {
+        if (itemAdded && !skippedSet.has(item.name)) {
             added.push(item.name);
         }
     }
 
-    return { added, skipped, filesWritten };
+    return { added, skipped: Array.from(skippedSet), filesWritten };
 }
 
 function installComponentDeps(deps: string[], cwd: string, dryRun: boolean): void {
@@ -192,16 +198,23 @@ function toPascalCase(str: string): string {
 
 function printUsageExample(component: string, componentsAlias: string): void {
     const componentName = toPascalCase(component);
-    logger.info(`  import { ${componentName} } from "${componentsAlias}/ui/${component}";`);
+    logger.info(`  import ${componentName} from "${componentsAlias}/ui/${component}/${componentName}.vue"`);
 }
 
 export async function add(components: string[], options: AddOptions): Promise<void> {
     const cwd = options.cwd ?? process.cwd();
+    const targetCwd = options.path ? path.resolve(cwd, options.path) : cwd;
+
+    if (options.path && !isSafePath(targetCwd, cwd)) {
+        throw new Error(`Security Error: Path traversal detected. Access denied to path "${targetCwd}".`);
+    }
 
     logger.setSilent(options.silent ?? false);
 
     const config = await ensureInitialized(cwd);
 
+    await validateComponents(components);
+
     const selectedComponents = await selectComponents(components, options);
 
     if (selectedComponents.length === 0) {
@@ -209,9 +222,7 @@ export async function add(components: string[], options: AddOptions): Promise<vo
         return;
     }
 
-    await validateComponents(selectedComponents);
-
-    const utilsPath = resolveAliasPath(config.aliases.utils, cwd) + '.ts';
+    const utilsPath = resolveAliasPath(config.aliases.utils, targetCwd) + '.ts';
 
     const spinner = options.silent ? null : ora('Resolving components and checking dependencies...').start();
 
@@ -222,8 +233,8 @@ export async function add(components: string[], options: AddOptions): Promise<vo
             spinner.stop();
         }
 
-        logger.bold('\n📦 Brutx CLI - Installation Plan:');
-        logger.info(`   Registry source: ${options.registry || 'Default Brutx hosted registry'}`);
+        logger.bold('\n📦 Brutx-Vue CLI - Installation Plan:');
+        logger.info(`   Registry source: ${options.registry || 'Default Brutx-Vue hosted registry'}`);
         logger.newLine();
 
         logger.bold('🧩 Components to install/update:');
@@ -262,7 +273,7 @@ export async function add(components: string[], options: AddOptions): Promise<vo
         const { added, skipped, filesWritten } = await writeRegistryFiles(
             registryItems,
             config,
-            cwd,
+            targetCwd,
             options,
             spinner
         );
@@ -281,7 +292,7 @@ export async function add(components: string[], options: AddOptions): Promise<vo
             logger.newLine();
             logger.bold('💾 Files written to disk:');
             for (const filePath of filesWritten) {
-                const relativePath = path.relative(cwd, filePath);
+                const relativePath = path.relative(targetCwd, filePath);
                 logger.success(`   ✓ ${relativePath}`);
             }
         }
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 6694caf..e75ffe9 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -22,6 +22,7 @@ import {
     detectTailwindVersion,
     installPackages,
     getInstallCommand,
+    isSafePath,
     logger,
 } from '../lib/index.js';
 
@@ -38,7 +39,9 @@ async function detectSettings(cwd: string): Promise<DetectedSettings> {
     const cssFile = findCssFile(cwd, projectType);
     const aliases = getDefaultAliases(cwd);
 
-    const fallbackCss = projectType.includes('src') ? 'src/index.css' : 'app/globals.css';
+    const fallbackCss = projectType === 'nuxt'
+        ? 'assets/css/main.css'
+        : (projectType.includes('src') ? 'src/index.css' : 'index.css');
 
     return {
         tailwind: {
@@ -104,6 +107,11 @@ async function createConfigFile(cwd: string, settings: DetectedSettings): Promis
 
 async function addBrutalistStyles(cwd: string, cssPath: string): Promise<boolean> {
     const fullPath = path.join(cwd, cssPath);
+
+    if (!isSafePath(fullPath, cwd)) {
+        throw new Error(`Security Error: CSS path traversal detected. Access denied to path "${fullPath}".`);
+    }
+
     await fs.ensureDir(path.dirname(fullPath));
 
     const tailwindVersion = detectTailwindVersion(cwd);
@@ -139,7 +147,7 @@ async function shouldProceed(cwd: string, options: InitOptions): Promise<boolean
     }
 
     if (options.yes) {
-        logger.warn('Brutx is already initialized. Use --force to overwrite.');
+        logger.warn('Brutx-Vue is already initialized. Use --force to overwrite.');
         return false;
     }
 
@@ -147,7 +155,7 @@ async function shouldProceed(cwd: string, options: InitOptions): Promise<boolean
         {
             type: 'confirm',
             name: 'overwrite',
-            message: 'Brutx is already initialized. Overwrite?',
+            message: 'Brutx-Vue is already initialized. Overwrite?',
             default: false,
         },
     ]);
@@ -166,7 +174,7 @@ export async function init(options: InitOptions): Promise<void> {
 
     logger.setSilent(options.silent ?? false);
 
-    logger.bold('\n🎨 Brutx - Neo-Brutalism Component Library\n');
+    logger.bold('\n🎨 Brutx-Vue - Neo-Brutalism Vue 3 Component Library\n');
     logger.info(`   Detected project: ${projectType}\n`);
 
     if (!(await shouldProceed(cwd, options))) {
@@ -179,7 +187,7 @@ export async function init(options: InitOptions): Promise<void> {
         settings = await promptForConfig(settings);
     }
 
-    const spinner = options.silent ? null : ora('Initializing Brutx...').start();
+    const spinner = options.silent ? null : ora('Initializing Brutx-Vue...').start();
 
     try {
         await createConfigFile(cwd, settings);
@@ -204,7 +212,7 @@ export async function init(options: InitOptions): Promise<void> {
             spinner?.info('Brutalist design tokens already present in ' + settings.tailwind.css + ', skipped duplicate injection.');
         }
 
-        spinner?.succeed('Brutx initialized successfully!');
+        spinner?.succeed('Brutx-Vue initialized successfully!');
 
         const packageManager = detectPackageManager(cwd);
         logger.newLine();
@@ -223,12 +231,12 @@ export async function init(options: InitOptions): Promise<void> {
         logger.newLine();
         logger.bold('Next steps:');
         logger.highlight('  1. Add components:');
-        logger.info('     npx brutx@latest add button');
-        logger.info('     npx brutx@latest add --all');
+        logger.info('     npx brutx-vue@latest add button');
+        logger.info('     npx brutx-vue@latest add --all');
         logger.newLine();
-        logger.dim('Documentation: https://brutxui.site/docs');
+        logger.dim('Documentation: https://lidaixingchen.github.io/brutxui-vue3/');
     } catch (error) {
-        spinner?.fail('Failed to initialize Brutx');
+        spinner?.fail('Failed to initialize Brutx-Vue');
         console.error(error);
         process.exit(1);
     }
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 2712846..a7c68f1 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -9,13 +9,13 @@ const pkg = require('../package.json');
 const program = new Command();
 
 program
-    .name('brutx')
-    .description('CLI for adding Brutx components to your project')
+    .name('brutx-vue')
+    .description('CLI for adding Brutx-Vue components to your project')
     .version(pkg.version);
 
 program
     .command('init')
-    .description('Initialize Brutx in your project')
+    .description('Initialize Brutx-Vue in your project')
     .option('-y, --yes', 'Skip confirmation prompts', false)
     .option('-d, --defaults', 'Use default configuration', false)
     .option('-c, --cwd <cwd>', 'The working directory', process.cwd())
diff --git a/packages/cli/src/lib/constants.ts b/packages/cli/src/lib/constants.ts
index 3dce919..901c12d 100644
--- a/packages/cli/src/lib/constants.ts
+++ b/packages/cli/src/lib/constants.ts
@@ -1,12 +1,11 @@
 import type { ProjectType } from './types.js';
 
-export { COMPONENTS, AVAILABLE_COMPONENTS } from 'brutx-shared';
-export type { ComponentMeta as ComponentInfo } from 'brutx-shared';
+export { COMPONENTS, AVAILABLE_COMPONENTS } from 'brutx-shared-vue';
+export type { ComponentMeta as ComponentInfo } from 'brutx-shared-vue';
 
 export const CONFIG_FILES = {
-    next: ['next.config.js', 'next.config.mjs', 'next.config.ts'],
     vite: ['vite.config.js', 'vite.config.ts', 'vite.config.mjs'],
-    remix: ['remix.config.js'],
+    nuxt: ['nuxt.config.js', 'nuxt.config.ts', 'nuxt.config.mjs'],
     tailwind: [
         'tailwind.config.ts',
         'tailwind.config.js',
@@ -22,18 +21,14 @@ export const CONFIG_FILES = {
 } as const;
 
 export const CSS_LOCATIONS: Record<ProjectType, readonly string[]> = {
-    nextjs: ['app/globals.css', 'styles/globals.css', 'app/global.css'],
-    'nextjs-src': ['src/app/globals.css', 'src/styles/globals.css', 'src/app/global.css'],
-    vite: ['src/index.css', 'src/App.css', 'index.css'],
-    'vite-src': ['src/index.css', 'src/App.css', 'src/styles/index.css'],
-    cra: ['src/index.css', 'src/App.css'],
-    remix: ['app/styles/global.css', 'app/root.css', 'app/tailwind.css'],
+    'vite-vue': ['src/index.css', 'src/App.css', 'src/assets/main.css', 'index.css'],
+    'vite-vue-src': ['src/index.css', 'src/App.css', 'src/assets/main.css', 'src/styles/index.css'],
+    nuxt: ['assets/css/main.css', 'assets/css/tailwind.css', 'assets/css/global.css'],
     unknown: [
         'src/index.css',
-        'src/app/globals.css',
-        'app/globals.css',
-        'src/styles/globals.css',
-        'styles/globals.css',
+        'src/assets/main.css',
+        'src/styles/index.css',
+        'assets/css/main.css',
         'index.css',
     ],
 } as const;
@@ -42,7 +37,8 @@ export const BASE_DEPENDENCIES = [
     'clsx',
     'tailwind-merge',
     'class-variance-authority',
-    'lucide-react',
+    'lucide-vue-next',
+    'reka-ui',
 ] as const;
 
 export const DEFAULT_ALIASES = {
@@ -52,9 +48,9 @@ export const DEFAULT_ALIASES = {
 
 export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js';
 
-export const SCHEMA_URL = 'https://brutxui.site/schema.json';
+export const SCHEMA_URL = 'https://lidaixingchen.github.io/brutxui-vue3/schema.json';
 
-export const DEFAULT_REGISTRY_URL = 'https://raw.githubusercontent.com/dev-snake/brutxui/main/packages/registry/registry';
+export const DEFAULT_REGISTRY_URL = 'https://raw.githubusercontent.com/lidaixingchen/brutxui-vue3/main/packages/registry/registry';
 
 export const BRUTALIST_CSS_STYLES = `
 :root {
diff --git a/packages/cli/src/lib/logger.ts b/packages/cli/src/lib/logger.ts
index 0e571ac..f4ad2c9 100644
--- a/packages/cli/src/lib/logger.ts
+++ b/packages/cli/src/lib/logger.ts
@@ -26,7 +26,7 @@ class Logger {
     }
 
     error(message: string): void {
-        console.log(chalk.red(message));
+        this.log(chalk.red(message));
     }
 
     bold(message: string): void {
diff --git a/packages/cli/src/lib/package-manager.ts b/packages/cli/src/lib/package-manager.ts
index 0f3fb83..4ae481c 100644
--- a/packages/cli/src/lib/package-manager.ts
+++ b/packages/cli/src/lib/package-manager.ts
@@ -1,4 +1,4 @@
-import { execSync } from 'child_process';
+import { execFileSync } from 'child_process';
 import type { PackageManager } from './types.js';
 
 const INSTALL_COMMANDS: Record<PackageManager, string> = {
@@ -15,8 +15,8 @@ export function installPackages(
 ): void {
     if (packages.length === 0) return;
 
-    const command = `${INSTALL_COMMANDS[packageManager]} ${packages.join(' ')}`;
-    execSync(command, { stdio: 'inherit', cwd });
+    const [command, ...baseArgs] = INSTALL_COMMANDS[packageManager].split(' ');
+    execFileSync(command, [...baseArgs, ...packages], { stdio: 'inherit', cwd });
 }
 
 export function getInstallCommand(packageManager: PackageManager, packages: string[]): string {
diff --git a/packages/cli/src/lib/project.ts b/packages/cli/src/lib/project.ts
index 95c0add..acd0e0e 100644
--- a/packages/cli/src/lib/project.ts
+++ b/packages/cli/src/lib/project.ts
@@ -16,41 +16,38 @@ function findFirstExisting(cwd: string, files: readonly string[]): string | null
     return null;
 }
 
+function hasVueDependency(cwd: string): boolean {
+    try {
+        const packageJson = fs.readJsonSync(path.join(cwd, 'package.json'));
+        return Boolean(
+            packageJson.dependencies?.['vue'] ||
+                packageJson.devDependencies?.['vue'] ||
+                packageJson.dependencies?.['nuxt'] ||
+                packageJson.devDependencies?.['nuxt']
+        );
+    } catch {
+        return false;
+    }
+}
+
 export function detectProjectType(cwd: string): ProjectType {
-    const hasNext = hasAnyFile(cwd, CONFIG_FILES.next);
+    const hasNuxt = hasAnyFile(cwd, CONFIG_FILES.nuxt);
     const hasVite = hasAnyFile(cwd, CONFIG_FILES.vite);
-    const hasRemix = hasAnyFile(cwd, CONFIG_FILES.remix);
-
     const hasSrc = fs.existsSync(path.join(cwd, 'src'));
-    const hasSrcApp = fs.existsSync(path.join(cwd, 'src', 'app'));
 
-    if (hasRemix) return 'remix';
+    if (hasNuxt) return 'nuxt';
 
-    if (hasNext) {
-        return hasSrc && hasSrcApp ? 'nextjs-src' : 'nextjs';
+    if (hasVite && hasVueDependency(cwd)) {
+        return hasSrc ? 'vite-vue-src' : 'vite-vue';
     }
 
-    if (hasVite) {
-        return hasSrc ? 'vite-src' : 'vite';
+    if (hasVueDependency(cwd)) {
+        return hasSrc ? 'vite-vue-src' : 'vite-vue';
     }
 
-    if (isCRA(cwd)) return 'cra';
-
     return 'unknown';
 }
 
-function isCRA(cwd: string): boolean {
-    try {
-        const packageJson = fs.readJsonSync(path.join(cwd, 'package.json'));
-        return Boolean(
-            packageJson.dependencies?.['react-scripts'] ||
-                packageJson.devDependencies?.['react-scripts']
-        );
-    } catch {
-        return false;
-    }
-}
-
 export function detectPackageManager(cwd: string): PackageManager {
     const { lockfiles } = CONFIG_FILES;
 
@@ -69,7 +66,7 @@ export function readTsConfig(cwd: string): TsConfig | null {
 
         try {
             const content = fs.readFileSync(configPath, 'utf-8');
-            const jsonContent = content.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '');
+            const jsonContent = content.replace(/\/\*[\s\S]*?\*\/|(?<!:)\/\/.*/g, '');
             return JSON.parse(jsonContent);
         } catch {
             continue;
@@ -147,12 +144,9 @@ function resolveByProjectType(cwd: string, relativePath: string): string {
     const projectType = detectProjectType(cwd);
 
     const projectTypeToBase: Record<ProjectType, string> = {
-        'nextjs-src': 'src',
-        'vite-src': 'src',
-        cra: 'src',
-        nextjs: '',
-        vite: '',
-        remix: 'app',
+        'vite-vue-src': 'src',
+        'vite-vue': '',
+        nuxt: '',
         unknown: fs.existsSync(path.join(cwd, 'src')) ? 'src' : '',
     };
 
@@ -175,25 +169,12 @@ export function resolveImportAlias(content: string, config: BrutalistConfig): st
         .replace(/["']@\/components\/(.*?)["']/g, `"${config.aliases.components}/$1"`);
 }
 
-/**
- * Checks whether a resolved path stays inside the target workspace.
- *
- * @param targetPath - Path selected for a write operation.
- * @param cwd - Workspace root that must contain the target.
- * @returns Whether the target path is within the workspace.
- */
 export function isSafePath(targetPath: string, cwd: string): boolean {
-    const resolvedTarget = path.resolve(targetPath);
-    const resolvedCwd = path.resolve(cwd);
-    return resolvedTarget.startsWith(resolvedCwd);
+    const resolvedTarget = path.resolve(targetPath).toLowerCase();
+    const resolvedCwd = path.resolve(cwd).toLowerCase();
+    return resolvedTarget.startsWith(resolvedCwd + path.sep) || resolvedTarget === resolvedCwd;
 }
 
-/**
- * Detects the Tailwind CSS major version used by a project.
- *
- * @param cwd - Project root to inspect.
- * @returns Tailwind version inferred from package.json or config files.
- */
 export function detectTailwindVersion(cwd: string): 'v3' | 'v4' {
     try {
         const pkgJsonPath = path.join(cwd, 'package.json');
@@ -217,4 +198,3 @@ export function detectTailwindVersion(cwd: string): 'v3' | 'v4' {
 
     return inferTailwindVersionFromConfig(cwd);
 }
-
diff --git a/packages/cli/src/lib/registry.ts b/packages/cli/src/lib/registry.ts
index d40711e..77bd2f0 100644
--- a/packages/cli/src/lib/registry.ts
+++ b/packages/cli/src/lib/registry.ts
@@ -68,13 +68,16 @@ export async function getItem(name: string, source: string = DEFAULT_REGISTRY_UR
 
     if (isUrl(source)) {
         const url = `${source}/${name}.json`;
-        const res = await fetch(url);
+        const res = await fetch(url, { signal: AbortSignal.timeout(30000) });
         if (!res.ok) {
             throw new Error(`Failed to fetch component "${name}" from registry: ${res.statusText}`);
         }
         data = await res.json();
     } else {
         const filePath = path.resolve(source, `${name}.json`);
+        if (!filePath.startsWith(path.resolve(source) + path.sep)) {
+            throw new Error(`Security Error: Path traversal detected in component name "${name}".`);
+        }
         if (!(await fs.pathExists(filePath))) {
             throw new Error(`Component "${name}" not found in local registry: ${filePath}`);
         }
@@ -95,12 +98,14 @@ export async function resolveDeps(names: string[], source: string = DEFAULT_REGI
         let itemSource = source;
 
         if (fullName.includes('@')) {
-            const parts = fullName.split('@');
-            cleanName = parts[0];
-            const version = parts[1];
+            const match = fullName.match(/^([a-z0-9-]+)@([a-zA-Z0-9._-]+)$/);
+            if (match) {
+                cleanName = match[1];
+                const version = match[2];
 
-            if (source === DEFAULT_REGISTRY_URL) {
-                itemSource = `https://raw.githubusercontent.com/dev-snake/brutxui/${version}/packages/registry/registry`;
+                if (source === DEFAULT_REGISTRY_URL) {
+                    itemSource = `https://raw.githubusercontent.com/lidaixingchen/brutxui-vue3/${version}/packages/registry/registry`;
+                }
             }
         }
 
diff --git a/packages/cli/src/lib/types.ts b/packages/cli/src/lib/types.ts
index 56577b2..bfd8d7b 100644
--- a/packages/cli/src/lib/types.ts
+++ b/packages/cli/src/lib/types.ts
@@ -1,10 +1,7 @@
 export type ProjectType =
-    | 'nextjs'
-    | 'nextjs-src'
-    | 'vite'
-    | 'vite-src'
-    | 'cra'
-    | 'remix'
+    | 'vite-vue'
+    | 'vite-vue-src'
+    | 'nuxt'
     | 'unknown';
 
 export type PackageManager = 'pnpm' | 'yarn' | 'bun' | 'npm';
@@ -52,10 +49,7 @@ export interface AddOptions {
     registry?: string;
 }
 
-/**
- * @deprecated Import ComponentMeta from 'brutx-shared' instead.
- */
-export type { ComponentMeta as ComponentInfo } from 'brutx-shared';
+export type { ComponentMeta as ComponentInfo } from 'brutx-shared-vue';
 
 export interface RegistryFile {
     path: string;
@@ -69,4 +63,3 @@ export interface RegistryItem {
     registryDependencies: string[];
     files: RegistryFile[];
 }
-
diff --git a/packages/cli/tests/project.test.ts b/packages/cli/tests/project.test.ts
index e3c3a46..0b40669 100644
--- a/packages/cli/tests/project.test.ts
+++ b/packages/cli/tests/project.test.ts
@@ -81,16 +81,56 @@ describe('detectProjectType', () => {
         vi.restoreAllMocks();
     });
 
-    it('should detect nextjs if next config exists and no src dir', () => {
+    it('should detect nuxt if nuxt config exists', () => {
         vi.spyOn(fs, 'existsSync').mockImplementation((p: any) => {
             const pStr = p.toString();
-            if (pStr.endsWith('next.config.js') || pStr.endsWith('next.config.mjs') || pStr.endsWith('next.config.ts')) {
+            if (pStr.endsWith('nuxt.config.js') || pStr.endsWith('nuxt.config.ts') || pStr.endsWith('nuxt.config.mjs')) {
                 return true;
             }
             return false;
         });
         const type = detectProjectType('/dummy/path');
-        expect(type).toBe('nextjs');
+        expect(type).toBe('nuxt');
+    });
+
+    it('should detect vite-vue if vite config exists and vue dependency exists and no src dir', () => {
+        vi.spyOn(fs, 'existsSync').mockImplementation((p: any) => {
+            const pStr = p.toString();
+            if (pStr.endsWith('vite.config.js') || pStr.endsWith('vite.config.ts') || pStr.endsWith('vite.config.mjs')) {
+                return true;
+            }
+            if (pStr.endsWith('src')) {
+                return false;
+            }
+            return false;
+        });
+        vi.spyOn(fs, 'readJsonSync').mockReturnValue({
+            dependencies: {
+                vue: '^3.5.0'
+            }
+        });
+        const type = detectProjectType('/dummy/path');
+        expect(type).toBe('vite-vue');
+    });
+
+    it('should detect vite-vue-src if vite config exists and vue dependency exists and src dir exists', () => {
+        vi.spyOn(fs, 'existsSync').mockImplementation((p: any) => {
+            const pStr = p.toString();
+            if (pStr.endsWith('vite.config.js') || pStr.endsWith('vite.config.ts') || pStr.endsWith('vite.config.mjs')) {
+                return true;
+            }
+            if (pStr.endsWith('src')) {
+                return true;
+            }
+            return false;
+        });
+        vi.spyOn(fs, 'readJsonSync').mockReturnValue({
+            dependencies: {
+                vue: '^3.5.0'
+            }
+        });
+        const type = detectProjectType('/dummy/path');
+        expect(type).toBe('vite-vue-src');
     });
 });
 
diff --git a/packages/cli/tsup.config.ts b/packages/cli/tsup.config.ts
index b10b18c..e1b5595 100644
--- a/packages/cli/tsup.config.ts
+++ b/packages/cli/tsup.config.ts
@@ -7,7 +7,7 @@ export default defineConfig({
     clean: true,
     sourcemap: true,
     target: 'node18',
-    noExternal: ['brutx-shared'],
+    noExternal: ['brutx-shared-vue'],
     banner: {
         js: '#!/usr/bin/env node',
     },
diff --git a/packages/registry/package.json b/packages/registry/package.json
index 0644b56..cb5fdff 100644
--- a/packages/registry/package.json
+++ b/packages/registry/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "brutx-registry",
+    "name": "brutx-registry-vue",
     "version": "0.1.0",
     "private": true,
     "type": "module",
@@ -8,7 +8,7 @@
         "validate": "tsx scripts/validate-registry.ts"
     },
     "dependencies": {
-        "brutx-shared": "workspace:*"
+        "brutx-shared-vue": "workspace:*"
     },
     "devDependencies": {
         "tsx": "^4.7.1",
diff --git a/packages/registry/registry/accordion.json b/packages/registry/registry/accordion.json
new file mode 100644
index 0000000..3453672
--- /dev/null
+++ b/packages/registry/registry/accordion.json
@@ -0,0 +1,123 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "title": "Accordion",
+  "description": "A highly customizable neo-brutalist Accordion component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/accordion/Accordion.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionRoot, type AccordionRootProps, type AccordionRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\n\nconst props = defineProps<AccordionRootProps & { class?: string }>()\nconst emits = defineEmits<AccordionRootEmits>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, ...delegated } = props\n    return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n    <AccordionRoot v-bind=\"forwarded\" :class=\"props.class\">\n        <slot />\n    </AccordionRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/accordion/AccordionItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { accordionItemVariants } from '@/components/ui/accordion/accordion-variants'\n\ntype AccordionItemVariantProps = VariantProps<typeof accordionItemVariants>\n\ninterface Props extends AccordionItemProps {\n    variant?: NonNullable<AccordionItemVariantProps['variant']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    variant: 'default',\n    class: '',\n})\n\nconst delegatedProps = computed(() => {\n    const { class: _, variant: __, ...delegated } = props\n    return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n\nconst classes = computed(() =>\n    cn(accordionItemVariants({ variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n    <AccordionItem v-bind=\"forwardedProps\" :class=\"classes\">\n        <slot />\n    </AccordionItem>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/accordion/AccordionTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { accordionTriggerVariants } from '@/components/ui/accordion/accordion-variants'\n\nconst props = defineProps<AccordionTriggerProps & { class?: string }>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, ...delegated } = props\n    return delegated\n})\n\nconst forwarded = useForwardProps(delegatedProps)\n\nconst classes = computed(() =>\n    cn(\n        accordionTriggerVariants(),\n        '[&[data-state=open]>svg]:rotate-180',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <AccordionHeader class=\"flex\">\n        <AccordionTrigger v-bind=\"forwarded\" :class=\"classes\">\n            <slot />\n            <slot name=\"icon\">\n                <ChevronDown\n                    class=\"h-5 w-5 shrink-0 transition-transform duration-200 border-3 border-brutal rounded-brutal bg-brutal-bg p-0.5 shadow-brutal-sm\"\n                />\n            </slot>\n        </AccordionTrigger>\n    </AccordionHeader>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/accordion/AccordionContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { accordionContentVariants } from '@/components/ui/accordion/accordion-variants'\n\nconst props = defineProps<AccordionContentProps & { class?: string }>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, ...delegated } = props\n    return delegated\n})\n\nconst classes = computed(() =>\n    cn(accordionContentVariants(), props.class)\n)\n</script>\n\n<template>\n    <AccordionContent\n        v-bind=\"delegatedProps\"\n        class=\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    >\n        <div :class=\"classes\">\n            <slot />\n        </div>\n    </AccordionContent>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/accordion/accordion-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const accordionItemVariants = cva(\n    [\n        'border-3 border-brutal bg-brutal-bg text-brutal-fg',\n        'transition-all duration-150',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'shadow-brutal mb-4',\n                flat: 'shadow-none mb-4',\n                ghost: 'border-transparent shadow-none mb-2',\n                interactive: [\n                    'shadow-brutal mb-4',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    }\n)\n\nexport const accordionTriggerVariants = cva(\n    [\n        'flex flex-1 items-center justify-between py-4 px-6',\n        'text-left font-black tracking-wide transition-all',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'hover:bg-brutal-muted',\n                flat: 'hover:bg-brutal-muted',\n                ghost: 'hover:bg-brutal-muted',\n                interactive: 'hover:bg-brutal-muted',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    }\n)\n\nexport const accordionContentVariants = cva(\n    'border-t-3 border-brutal p-6 bg-brutal-bg text-brutal-fg'\n)\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/activity-log-page.json b/packages/registry/registry/activity-log-page.json
new file mode 100644
index 0000000..61aaab1
--- /dev/null
+++ b/packages/registry/registry/activity-log-page.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "activity-log-page",
+  "type": "registry:ui",
+  "title": "Activity Log Page",
+  "description": "A highly customizable neo-brutalist Activity Log Page component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "table",
+    "badge",
+    "pagination"
+  ],
+  "files": [
+    {
+      "path": "components/ui/activity-log-page/ActivityLogPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Table from '@/components/ui/table/Table.vue'\nimport TableHeader from '@/components/ui/table/TableHeader.vue'\nimport TableBody from '@/components/ui/table/TableBody.vue'\nimport TableRow from '@/components/ui/table/TableRow.vue'\nimport TableHead from '@/components/ui/table/TableHead.vue'\nimport TableCell from '@/components/ui/table/TableCell.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\nimport Pagination from '@/components/ui/pagination/Pagination.vue'\n\nexport interface ActivityEntry {\n    id: string\n    action: string\n    user: string\n    timestamp: string\n    details?: string\n    type?: 'info' | 'warning' | 'error' | 'success'\n}\n\ninterface ActivityLogPageProps {\n    title?: string\n    activities?: ActivityEntry[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ActivityLogPageProps>(), {\n    title: undefined,\n    activities: () => [],\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'entry-click': [id: string]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('activityLogPage.defaultTitle'))\nconst resolvedAction = computed(() => t('activityLogPage.action'))\nconst resolvedUser = computed(() => t('activityLogPage.user'))\nconst resolvedTimestamp = computed(() => t('activityLogPage.timestamp'))\nconst resolvedDetails = computed(() => t('activityLogPage.details'))\nconst resolvedNoActivityFound = computed(() => t('activityLogPage.noActivityFound'))\n\nconst PAGE_SIZE = 10\n\nconst currentPage = ref(1)\nconst totalPages = computed(() => Math.max(1, Math.ceil(props.activities.length / PAGE_SIZE)))\n\nconst paginatedActivities = computed(() => {\n    const start = (currentPage.value - 1) * PAGE_SIZE\n    return props.activities.slice(start, start + PAGE_SIZE)\n})\n\nconst typeVariantMap: Record<string, 'default' | 'accent' | 'danger' | 'success'> = {\n    info: 'default',\n    warning: 'accent',\n    error: 'danger',\n    success: 'success',\n}\n\nfunction getTypeBadgeVariant(type?: string): 'default' | 'accent' | 'danger' | 'success' {\n    return typeVariantMap[type ?? 'info'] ?? 'default'\n}\n\nfunction handleEntryClick(id: string) {\n    emit('entry-click', id)\n}\n\nfunction handlePageChange(page: number) {\n    currentPage.value = page\n}\n\nconst rootClasses = computed(() =>\n    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"w-full max-w-4xl mx-auto\">\n            <slot name=\"header\">\n                <div class=\"mb-8\">\n                    <h1 class=\"text-3xl font-black tracking-tight\">\n                        {{ resolvedTitle }}\n                    </h1>\n                </div>\n            </slot>\n\n            <slot>\n                <Table>\n                    <TableHeader>\n                        <TableRow>\n                            <TableHead>{{ resolvedAction }}</TableHead>\n                            <TableHead>{{ resolvedUser }}</TableHead>\n                            <TableHead>{{ resolvedTimestamp }}</TableHead>\n                            <TableHead>{{ resolvedDetails }}</TableHead>\n                        </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                        <TableRow\n                            v-for=\"entry in paginatedActivities\"\n                            :key=\"entry.id\"\n                            class=\"cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\"\n                            @click=\"handleEntryClick(entry.id)\"\n                        >\n                            <TableCell>\n                                <div class=\"flex items-center gap-2\">\n                                    <Badge :variant=\"getTypeBadgeVariant(entry.type)\" size=\"sm\">\n                                        {{ entry.type ?? 'info' }}\n                                    </Badge>\n                                    <span class=\"font-bold\">{{ entry.action }}</span>\n                                </div>\n                            </TableCell>\n                            <TableCell>\n                                <span class=\"font-medium\">{{ entry.user }}</span>\n                            </TableCell>\n                            <TableCell>\n                                <span class=\"font-medium\">{{ entry.timestamp }}</span>\n                            </TableCell>\n                            <TableCell>\n                                <span v-if=\"entry.details\" class=\"font-medium\">{{ entry.details }}</span>\n                                <span v-else class=\"text-brutal-fg\">—</span>\n                            </TableCell>\n                        </TableRow>\n                    </TableBody>\n                </Table>\n\n                <div v-if=\"activities.length === 0\" class=\"text-center py-12\">\n                    <p class=\"text-lg font-bold text-brutal-fg\">{{ resolvedNoActivityFound }}</p>\n                </div>\n\n                <div v-if=\"totalPages > 1\" class=\"mt-8 flex justify-center\">\n                    <Pagination\n                        :current-page=\"currentPage\"\n                        :total-pages=\"totalPages\"\n                        @update:current-page=\"handlePageChange\"\n                    />\n                </div>\n            </slot>\n\n            <slot name=\"footer\" />\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/alert-dialog.json b/packages/registry/registry/alert-dialog.json
index 1a8e011..7ac8923 100644
--- a/packages/registry/registry/alert-dialog.json
+++ b/packages/registry/registry/alert-dialog.json
@@ -3,17 +3,47 @@
   "name": "alert-dialog",
   "type": "registry:ui",
   "title": "Alert Dialog",
-  "description": "A highly customizable neo-brutalist Alert Dialog component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Alert Dialog component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-alert-dialog"
+    "reka-ui"
   ],
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "components/ui/alert-dialog.tsx",
-      "content": "import * as React from 'react';\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';\n\nimport { cn } from '@/lib/utils';\nimport { buttonVariants } from '@/components/ui/button';\n\nconst AlertDialog = AlertDialogPrimitive.Root;\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nconst AlertDialogCancel = AlertDialogPrimitive.Cancel;\n\nconst AlertDialogOverlay = React.forwardRef<\n    React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n    <AlertDialogPrimitive.Overlay\n        ref={ref}\n        className={cn(\n            'fixed inset-0 z-50 bg-black/50',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            className\n        )}\n        {...props}\n    />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nconst AlertDialogContent = React.forwardRef<\n    React.ElementRef<typeof AlertDialogPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n    <AlertDialogPortal>\n        <AlertDialogOverlay />\n        <AlertDialogPrimitive.Content\n            ref={ref}\n            className={cn(\n                'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n                'w-full max-w-lg p-6',\n                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal-xl',\n                'duration-200',\n                'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n                'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',\n                'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n                className\n            )}\n            {...props}\n        />\n    </AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nconst AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', className)}\n        {...props}\n    />\n);\nAlertDialogHeader.displayName = 'AlertDialogHeader';\n\nconst AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={cn(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',\n            className\n        )}\n        {...props}\n    />\n);\nAlertDialogFooter.displayName = 'AlertDialogFooter';\n\nconst AlertDialogTitle = React.forwardRef<\n    React.ElementRef<typeof AlertDialogPrimitive.Title>,\n    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n    <AlertDialogPrimitive.Title\n        ref={ref}\n        className={cn('text-xl font-black tracking-tight', className)}\n        {...props}\n    />\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nconst AlertDialogDescription = React.forwardRef<\n    React.ElementRef<typeof AlertDialogPrimitive.Description>,\n    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n    <AlertDialogPrimitive.Description\n        ref={ref}\n        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}\n        {...props}\n    />\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nconst AlertDialogAction = React.forwardRef<\n    React.ElementRef<typeof AlertDialogPrimitive.Action>,\n    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {\n        variant?: 'primary' | 'secondary' | 'accent' | 'danger' | 'outline';\n    }\n>(({ className, variant = 'primary', ...props }, ref) => (\n    <AlertDialogPrimitive.Action\n        ref={ref}\n        className={cn(buttonVariants({ variant }), className)}\n        {...props}\n    />\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport {\n    AlertDialog,\n    AlertDialogPortal,\n    AlertDialogOverlay,\n    AlertDialogTrigger,\n    AlertDialogContent,\n    AlertDialogHeader,\n    AlertDialogFooter,\n    AlertDialogTitle,\n    AlertDialogDescription,\n    AlertDialogAction,\n    AlertDialogCancel,\n};\n",
+      "path": "components/ui/alert-dialog/AlertDialogAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AlertDialogAction as AlertDialogActionPrimitive } from 'reka-ui'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button/button-variants'\n\ntype ButtonVariantProps = VariantProps<typeof buttonVariants>\n\ninterface AlertDialogActionProps {\n    variant?: NonNullable<ButtonVariantProps['variant']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<AlertDialogActionProps>(), {\n    variant: 'primary',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(buttonVariants({ variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n    <AlertDialogActionPrimitive :class=\"classes\">\n        <slot />\n    </AlertDialogActionPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert-dialog/AlertDialogCancel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AlertDialogCancel as AlertDialogCancelPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button/button-variants'\n\ninterface AlertDialogCancelProps {\n    class?: string\n}\n\nconst props = defineProps<AlertDialogCancelProps>()\n\nconst classes = computed(() =>\n    cn(buttonVariants({ variant: 'outline' }), props.class)\n)\n</script>\n\n<template>\n    <AlertDialogCancelPrimitive :class=\"classes\">\n        <slot />\n    </AlertDialogCancelPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert-dialog/AlertDialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    AlertDialogPortal as AlertDialogPortalPrimitive,\n    AlertDialogOverlay as AlertDialogOverlayPrimitive,\n    AlertDialogContent as AlertDialogContentPrimitive,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface AlertDialogContentProps {\n    class?: string\n}\n\nconst props = defineProps<AlertDialogContentProps>()\n\nconst overlayClasses = computed(() =>\n    cn(\n        'fixed inset-0 z-50 bg-brutal-overlay',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n    )\n)\n\nconst contentClasses = computed(() =>\n    cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4',\n        'bg-brutal-bg p-6 text-brutal-fg border-brutal border-3 shadow-brutal-xl rounded-brutal',\n        'duration-200',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2',\n        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <AlertDialogPortalPrimitive>\n        <AlertDialogOverlayPrimitive :class=\"overlayClasses\" />\n        <AlertDialogContentPrimitive :class=\"contentClasses\">\n            <slot />\n        </AlertDialogContentPrimitive>\n    </AlertDialogPortalPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert-dialog/AlertDialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AlertDialogDescription as AlertDialogDescriptionPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface AlertDialogDescriptionProps {\n    class?: string\n}\n\nconst props = defineProps<AlertDialogDescriptionProps>()\n\nconst classes = computed(() =>\n    cn('text-sm text-brutal-muted-foreground font-medium', props.class)\n)\n</script>\n\n<template>\n    <AlertDialogDescriptionPrimitive :class=\"classes\">\n        <slot />\n    </AlertDialogDescriptionPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert-dialog/AlertDialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface AlertDialogFooterProps {\n    class?: string\n}\n\nconst props = defineProps<AlertDialogFooterProps>()\n\nconst classes = computed(() =>\n    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert-dialog/AlertDialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface AlertDialogHeaderProps {\n    class?: string\n}\n\nconst props = defineProps<AlertDialogHeaderProps>()\n\nconst classes = computed(() =>\n    cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert-dialog/AlertDialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AlertDialogTitle as AlertDialogTitlePrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface AlertDialogTitleProps {\n    class?: string\n}\n\nconst props = defineProps<AlertDialogTitleProps>()\n\nconst classes = computed(() =>\n    cn('text-lg font-black tracking-tight text-brutal-fg', props.class)\n)\n</script>\n\n<template>\n    <AlertDialogTitlePrimitive :class=\"classes\">\n        <slot />\n    </AlertDialogTitlePrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -39,7 +69,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -69,7 +103,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -79,16 +116,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/alert.json b/packages/registry/registry/alert.json
index d306d8f..0b0ee94 100644
--- a/packages/registry/registry/alert.json
+++ b/packages/registry/registry/alert.json
@@ -3,15 +3,30 @@
   "name": "alert",
   "type": "registry:ui",
   "title": "Alert",
-  "description": "A highly customizable neo-brutalist Alert component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Alert component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/alert.tsx",
-      "content": "import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst alertVariants = cva(\n    [\n        'relative w-full p-4 rounded-brutal',\n        'border-3 border-brutal',\n        'shadow-brutal',\n        '[&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',\n        '[&>svg]:h-5 [&>svg]:w-5 [&>svg]:stroke-[2.5]',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'bg-brutal-bg text-brutal-fg',\n                primary: 'bg-brutal-primary text-brutal-fg',\n                secondary: 'bg-brutal-secondary text-brutal-fg',\n                success: 'bg-brutal-success text-brutal-fg',\n                warning: 'bg-brutal-accent text-brutal-fg',\n                danger: 'bg-brutal-destructive text-brutal-fg',\n                info: 'bg-[var(--brutal-info,#4A90D9)] text-brutal-fg',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    }\n);\n\nexport interface AlertProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof alertVariants> {}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n    ({ className, variant, ...props }, ref) => (\n        <div\n            ref={ref}\n            role=\"alert\"\n            className={cn(alertVariants({ variant }), className)}\n            {...props}\n        />\n    )\n);\nAlert.displayName = 'Alert';\n\nconst AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(\n    ({ className, ...props }, ref) => (\n        <h5\n            ref={ref}\n            className={cn('mb-1 font-black tracking-tight leading-none', className)}\n            {...props}\n        />\n    )\n);\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n    HTMLParagraphElement,\n    React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n    <div\n        ref={ref}\n        className={cn('text-sm font-medium [&_p]:leading-relaxed', className)}\n        {...props}\n    />\n));\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\n",
+      "path": "components/ui/alert/Alert.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { alertVariants } from '@/components/ui/alert/alert-variants'\n\ntype AlertVariantProps = VariantProps<typeof alertVariants>\n\ninterface AlertProps {\n    variant?: NonNullable<AlertVariantProps['variant']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<AlertProps>(), {\n    variant: 'default',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(alertVariants({ variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n    <div role=\"alert\" :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert/AlertDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface AlertDescriptionProps {\n    class?: string\n}\n\nconst props = defineProps<AlertDescriptionProps>()\n\nconst classes = computed(() =>\n    cn('text-sm font-medium [&_p]:leading-relaxed', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert/AlertTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface AlertTitleProps {\n    class?: string\n}\n\nconst props = defineProps<AlertTitleProps>()\n\nconst classes = computed(() =>\n    cn('mb-1 font-black tracking-tight leading-none', props.class)\n)\n</script>\n\n<template>\n    <h5 :class=\"classes\">\n        <slot />\n    </h5>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/alert/alert-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const alertVariants = cva(\n    [\n        'relative w-full p-4',\n        'border-3 border-brutal',\n        'shadow-brutal',\n        '[&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',\n        '[&>svg]:h-5 [&>svg]:w-5 [&>svg]:stroke-[2.5]',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'bg-brutal-bg text-brutal-fg',\n                primary: 'bg-brutal-primary text-brutal-fg',\n                secondary: 'bg-brutal-secondary text-brutal-fg',\n                success: 'bg-brutal-success text-brutal-fg',\n                warning: 'bg-brutal-accent text-brutal-fg',\n                danger: 'bg-brutal-destructive text-brutal-fg',\n                info: 'bg-brutal-info text-brutal-fg',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +52,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +86,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +99,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/auth-card.json b/packages/registry/registry/auth-card.json
index 651bf09..bf81fec 100644
--- a/packages/registry/registry/auth-card.json
+++ b/packages/registry/registry/auth-card.json
@@ -3,9 +3,9 @@
   "name": "auth-card",
   "type": "registry:ui",
   "title": "Auth Card",
-  "description": "A highly customizable neo-brutalist Auth Card component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Auth Card component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "button",
@@ -15,8 +15,8 @@
   ],
   "files": [
     {
-      "path": "components/ui/auth-card.tsx",
-      "content": "import * as React from 'react';\nimport { Mail, Lock, Github, Chrome } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\n\nexport interface AuthCardProps extends React.HTMLAttributes<HTMLDivElement> {\n    title?: string;\n    description?: string;\n    onLoginSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;\n    onForgotPasswordClick?: () => void;\n    onGoogleClick?: () => void;\n    onGithubClick?: () => void;\n}\n\nexport function AuthCard({\n    title = 'Welcome back',\n    description = 'Enter your credential tags to access your custom developer workspace console.',\n    onLoginSubmit,\n    onForgotPasswordClick,\n    onGoogleClick,\n    onGithubClick,\n    className,\n    ...props\n}: AuthCardProps) {\n    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n        if (onLoginSubmit) onLoginSubmit(e);\n    };\n\n    return (\n        <div className={`w-full max-w-[420px] mx-auto ${className || ''}`} {...props}>\n            <Card className=\"border-3 border-brutal rounded-none shadow-brutal bg-white dark:bg-gray-800 p-2\">\n                <CardHeader className=\"space-y-2 pb-6 border-b-3 border-brutal bg-gray-50 dark:bg-gray-900/50 p-4\">\n                    <CardTitle className=\"text-3xl font-black tracking-tight leading-none text-brutal-fg\">\n                        {title}\n                    </CardTitle>\n                    <CardDescription className=\"text-sm font-bold text-gray-600 dark:text-gray-400\">\n                        {description}\n                    </CardDescription>\n                </CardHeader>\n\n                <CardContent className=\"space-y-6 pt-6\">\n                    <div className=\"grid grid-cols-2 gap-3\">\n                        <Button\n                            variant=\"outline\"\n                            className=\"w-full font-black text-sm flex items-center justify-center gap-2\"\n                            onClick={onGoogleClick}\n                            type=\"button\"\n                        >\n                            <Chrome className=\"h-4 w-4 stroke-[3] text-red-500\" />\n                            <span>Google</span>\n                        </Button>\n                        <Button\n                            variant=\"outline\"\n                            className=\"w-full font-black text-sm flex items-center justify-center gap-2\"\n                            onClick={onGithubClick}\n                            type=\"button\"\n                        >\n                            <Github className=\"h-4 w-4 stroke-[3]\" />\n                            <span>GitHub</span>\n                        </Button>\n                    </div>\n\n                    <div className=\"relative flex items-center justify-center\">\n                        <div className=\"absolute inset-0 flex items-center\">\n                            <span className=\"w-full border-t-3 border-brutal\" />\n                        </div>\n                        <span className=\"relative z-10 px-3 bg-white dark:bg-gray-800 font-black text-xs uppercase tracking-wider text-gray-500\">\n                            or email login\n                        </span>\n                    </div>\n\n                    <form onSubmit={handleSubmit} className=\"space-y-4\">\n                        <div className=\"space-y-2\">\n                            <Label htmlFor=\"auth-email\" className=\"font-black text-sm text-brutal-fg flex items-center gap-2\">\n                                <Mail className=\"h-4 w-4 stroke-[2.5]\" />\n                                <span>Email Address</span>\n                            </Label>\n                            <Input\n                                id=\"auth-email\"\n                                type=\"email\"\n                                placeholder=\"name@domain.com\"\n                                required\n                                className=\"w-full\"\n                            />\n                        </div>\n\n                        <div className=\"space-y-2\">\n                            <div className=\"flex items-center justify-between\">\n                                <Label htmlFor=\"auth-password\" className=\"font-black text-sm text-brutal-fg flex items-center gap-2\">\n                                    <Lock className=\"h-4 w-4 stroke-[2.5]\" />\n                                    <span>Password</span>\n                                </Label>\n                                <button\n                                    onClick={onForgotPasswordClick}\n                                    type=\"button\"\n                                    className=\"text-xs font-black underline hover:text-brutal-primary focus:outline-none\"\n                                >\n                                    Forgot password?\n                                </button>\n                            </div>\n                            <Input\n                                id=\"auth-password\"\n                                type=\"password\"\n                                placeholder=\"••••••••\"\n                                required\n                                className=\"w-full\"\n                            />\n                        </div>\n\n                        <Button type=\"submit\" variant=\"primary\" className=\"w-full py-6 font-black text-base mt-2\">\n                            Access Account console\n                        </Button>\n                    </form>\n                </CardContent>\n\n                <CardFooter className=\"pt-4 border-t-3 border-brutal bg-gray-50 dark:bg-gray-900/50 p-4 justify-center\">\n                    <p className=\"text-xs font-bold text-gray-600 dark:text-gray-400\">\n                        Don't have an account?{' '}\n                        <button type=\"button\" className=\"font-black underline hover:text-brutal-primary\">\n                            Register workspace\n                        </button>\n                    </p>\n                </CardFooter>\n            </Card>\n        </div>\n    );\n}\n",
+      "path": "components/ui/auth-card/AuthCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Mail, Lock } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { useId } from 'vue'\nimport Button from '@/components/ui/button/Button.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport CardDescription from '@/components/ui/card/CardDescription.vue'\nimport CardFooter from '@/components/ui/card/CardFooter.vue'\nimport Input from '@/components/ui/input/Input.vue'\nimport LabelRoot from '@/components/ui/label/Label.vue'\n\ninterface AuthCardTexts {\n    welcomeBack?: string\n    signInToContinue?: string\n    google?: string\n    github?: string\n    orEmailLogin?: string\n    email?: string\n    password?: string\n    forgotPassword?: string\n    signIn?: string\n    noAccount?: string\n    register?: string\n}\n\ninterface AuthCardProps {\n    title?: string\n    description?: string\n    texts?: AuthCardTexts\n    class?: string\n}\n\nconst props = withDefaults(defineProps<AuthCardProps>(), {\n    title: undefined,\n    description: undefined,\n    texts: () => ({}),\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    loginSubmit: [payload: { email: string; password: string }]\n    forgotPassword: []\n    googleClick: []\n    githubClick: []\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-md mx-auto', props.class))\n\nconst emailId = useId()\nconst passwordId = useId()\n\nconst email = ref('')\nconst password = ref('')\n\nconst resolvedTitle = computed(() => props.title ?? props.texts.welcomeBack ?? t('authCard.welcomeBack'))\nconst resolvedDescription = computed(() => props.description ?? props.texts.signInToContinue ?? t('authCard.signInToContinue'))\nconst resolvedGoogle = computed(() => props.texts.google ?? t('authCard.google'))\nconst resolvedGithub = computed(() => props.texts.github ?? t('authCard.github'))\nconst resolvedOrEmailLogin = computed(() => props.texts.orEmailLogin ?? t('authCard.orEmailLogin'))\nconst resolvedEmail = computed(() => props.texts.email ?? t('authCard.email'))\nconst resolvedPassword = computed(() => props.texts.password ?? t('authCard.password'))\nconst resolvedForgotPassword = computed(() => props.texts.forgotPassword ?? t('authCard.forgotPassword'))\nconst resolvedSignIn = computed(() => props.texts.signIn ?? t('authCard.signIn'))\nconst resolvedNoAccount = computed(() => props.texts.noAccount ?? t('authCard.noAccount'))\nconst resolvedRegister = computed(() => props.texts.register ?? t('authCard.register'))\n\nfunction handleSubmit() {\n    emit('loginSubmit', { email: email.value, password: password.value })\n}\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <CardHeader>\n            <CardTitle class=\"text-2xl\">\n{{ resolvedTitle }}\n</CardTitle>\n            <CardDescription>{{ resolvedDescription }}</CardDescription>\n        </CardHeader>\n        <CardContent>\n            <div class=\"grid grid-cols-2 gap-3 mb-6\">\n                <Button variant=\"outline\" class=\"w-full\" @click=\"emit('googleClick')\">\n                    <svg class=\"mr-2 h-4 w-4\" viewBox=\"0 0 24 24\"><path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\" fill=\"var(--brutal-info)\" /><path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"var(--brutal-success)\" /><path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" fill=\"var(--brutal-accent)\" /><path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"var(--brutal-destructive)\" /></svg>\n                    {{ resolvedGoogle }}\n                </Button>\n                <Button variant=\"outline\" class=\"w-full\" @click=\"emit('githubClick')\">\n                    <svg class=\"mr-2 h-4 w-4\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\" /></svg>\n                    {{ resolvedGithub }}\n                </Button>\n            </div>\n\n            <div class=\"relative mb-6\">\n                <div class=\"absolute inset-0 flex items-center\">\n<div class=\"w-full border-t-3 border-brutal\" />\n</div>\n                <div class=\"relative flex justify-center text-xs\">\n<span class=\"bg-brutal-bg px-2 font-bold text-brutal-muted-foreground\">{{ resolvedOrEmailLogin }}</span>\n</div>\n            </div>\n\n            <form class=\"space-y-4\" @submit.prevent=\"handleSubmit\">\n                <div class=\"space-y-2\">\n                    <LabelRoot :for=\"emailId\">\n{{ resolvedEmail }}\n</LabelRoot>\n                    <div class=\"relative\">\n                        <Mail class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 stroke-[3] text-brutal-muted-foreground\" />\n                        <Input :id=\"emailId\" v-model=\"email\" type=\"email\" :placeholder=\"t('authCard.emailPlaceholder')\" input-size=\"default\" class=\"pl-10\" />\n                    </div>\n                </div>\n                <div class=\"space-y-2\">\n                    <div class=\"flex items-center justify-between\">\n                        <LabelRoot :for=\"passwordId\">\n{{ resolvedPassword }}\n</LabelRoot>\n                        <button type=\"button\" class=\"text-sm font-bold text-brutal-primary active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\" @click=\"emit('forgotPassword')\">\n{{ resolvedForgotPassword }}\n</button>\n                    </div>\n                    <div class=\"relative\">\n                        <Lock class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 stroke-[3] text-brutal-muted-foreground\" />\n                        <Input :id=\"passwordId\" v-model=\"password\" type=\"password\" :placeholder=\"t('authCard.passwordPlaceholder')\" input-size=\"default\" class=\"pl-10\" />\n                    </div>\n                </div>\n                <Button type=\"submit\" variant=\"primary\" class=\"w-full\">\n{{ resolvedSignIn }}\n</Button>\n            </form>\n        </CardContent>\n        <CardFooter class=\"justify-center\">\n            <p class=\"text-sm font-medium text-brutal-muted-foreground\">\n                {{ resolvedNoAccount }} <button type=\"button\" class=\"font-bold text-brutal-primary cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\">{{ resolvedRegister }}</button>\n            </p>\n        </CardFooter>\n    </Card>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -42,7 +42,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -72,7 +76,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -82,16 +89,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/avatar.json b/packages/registry/registry/avatar.json
index 4a96f67..7005dfe 100644
--- a/packages/registry/registry/avatar.json
+++ b/packages/registry/registry/avatar.json
@@ -3,15 +3,30 @@
   "name": "avatar",
   "type": "registry:ui",
   "title": "Avatar",
-  "description": "A highly customizable neo-brutalist Avatar component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Avatar component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-avatar"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/avatar.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst avatarVariants = cva(\n    [\n        'relative flex shrink-0 overflow-hidden',\n        'border-3 border-black dark:border-white',\n    ],\n    {\n        variants: {\n            size: {\n                sm: 'h-8 w-8',\n                default: 'h-10 w-10',\n                lg: 'h-14 w-14',\n                xl: 'h-20 w-20',\n            },\n            shape: {\n                square: '',\n                rounded: 'rounded-lg',\n            },\n        },\n        defaultVariants: {\n            size: 'default',\n            shape: 'square',\n        },\n    }\n);\n\nexport interface AvatarProps\n    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n        VariantProps<typeof avatarVariants> {}\n\nconst Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n    ({ className, size, shape, ...props }, ref) => (\n        <AvatarPrimitive.Root\n            ref={ref}\n            className={cn(avatarVariants({ size, shape }), className)}\n            {...props}\n        />\n    )\n);\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nconst AvatarImage = React.forwardRef<\n    React.ElementRef<typeof AvatarPrimitive.Image>,\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n    <AvatarPrimitive.Image\n        ref={ref}\n        className={cn('aspect-square h-full w-full object-cover', className)}\n        {...props}\n    />\n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nconst AvatarFallback = React.forwardRef<\n    React.ElementRef<typeof AvatarPrimitive.Fallback>,\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n    <AvatarPrimitive.Fallback\n        ref={ref}\n        className={cn(\n            'flex h-full w-full items-center justify-center',\n            'bg-gray-200 dark:bg-gray-700',\n            'font-bold text-black dark:text-white',\n            className\n        )}\n        {...props}\n    />\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nexport { Avatar, AvatarImage, AvatarFallback, avatarVariants };\n",
+      "path": "components/ui/avatar/Avatar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AvatarRoot } from 'reka-ui'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { avatarVariants } from '@/components/ui/avatar/avatar-variants'\n\ntype AvatarVariantProps = VariantProps<typeof avatarVariants>\n\ninterface AvatarProps {\n    size?: NonNullable<AvatarVariantProps['size']>\n    shape?: NonNullable<AvatarVariantProps['shape']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n    size: 'default',\n    shape: 'square',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(avatarVariants({ size: props.size, shape: props.shape }), props.class)\n)\n</script>\n\n<template>\n    <AvatarRoot :class=\"classes\">\n        <slot />\n    </AvatarRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/avatar/AvatarFallback.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AvatarFallback as AvatarFallbackPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface AvatarFallbackProps {\n    class?: string\n}\n\nconst props = defineProps<AvatarFallbackProps>()\n\nconst classes = computed(() =>\n    cn('flex h-full w-full items-center justify-center bg-brutal-primary text-brutal-fg font-bold', props.class)\n)\n</script>\n\n<template>\n    <AvatarFallbackPrimitive :class=\"classes\">\n        <slot />\n    </AvatarFallbackPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/avatar/AvatarImage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AvatarImage as AvatarImagePrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface AvatarImageProps {\n    src?: string\n    alt?: string\n    class?: string\n}\n\nconst props = defineProps<AvatarImageProps>()\n\nconst classes = computed(() =>\n    cn('aspect-square h-full w-full object-cover', props.class)\n)\n</script>\n\n<template>\n    <AvatarImagePrimitive v-if=\"src\" :src=\"src\" :alt=\"alt\" :class=\"classes\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/avatar/avatar-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const avatarVariants = cva(\n    ['relative flex shrink-0 overflow-hidden', 'border-3 border-brutal', 'bg-brutal-muted'],\n    {\n        variants: {\n            size: {\n                sm: 'h-8 w-8',\n                default: 'h-10 w-10',\n                lg: 'h-14 w-14',\n                xl: 'h-20 w-20',\n            },\n            shape: {\n                square: '',\n                rounded: 'rounded-brutal',\n            },\n        },\n        defaultVariants: {\n            size: 'default',\n            shape: 'square',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +52,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +86,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +99,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/badge.json b/packages/registry/registry/badge.json
index e3faacb..c66f899 100644
--- a/packages/registry/registry/badge.json
+++ b/packages/registry/registry/badge.json
@@ -3,13 +3,18 @@
   "name": "badge",
   "type": "registry:ui",
   "title": "Badge",
-  "description": "A highly customizable neo-brutalist Badge component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Badge component built with Brutx design tokens for Vue 3.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/badge.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva(\n    [\n        'inline-flex items-center',\n        'border-2 border-brutal rounded-brutal',\n        'font-bold tracking-wide',\n        'transition-colors',\n    ],\n    {\n        variants: {\n            variant: {\n                default: [\n                    'bg-brutal-bg text-brutal-fg',\n                    'shadow-brutal-sm',\n                ],\n                primary: [\n                    'bg-brutal-primary text-brutal-fg',\n                    'shadow-brutal-sm',\n                ],\n                secondary: [\n                    'bg-brutal-secondary text-brutal-fg',\n                    'shadow-brutal-sm',\n                ],\n                accent: [\n                    'bg-brutal-accent text-brutal-fg',\n                    'shadow-brutal-sm',\n                ],\n                danger: [\n                    'bg-brutal-destructive text-brutal-fg',\n                    'shadow-brutal-sm',\n                ],\n                success: [\n                    'bg-brutal-success text-brutal-fg',\n                    'shadow-brutal-sm',\n                ],\n                outline: 'bg-transparent text-brutal-fg',\n            },\n            size: {\n                sm: 'px-2 py-0.5 text-xs',\n                default: 'px-3 py-1 text-sm',\n                lg: 'px-4 py-1.5 text-base',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface BadgeProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof badgeVariants> {}\n\nconst Badge = React.forwardRef<HTMLDivElement, BadgeProps>(\n    ({ className, variant, size, ...props }, ref) => (\n        <div ref={ref} className={cn(badgeVariants({ variant, size, className }))} {...props} />\n    )\n);\nBadge.displayName = 'Badge';\n\nexport { Badge, badgeVariants };\n",
+      "path": "components/ui/badge/Badge.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { badgeVariants } from '@/components/ui/badge/badge-variants'\n\ntype BadgeVariantProps = VariantProps<typeof badgeVariants>\n\ninterface BadgeProps {\n    variant?: NonNullable<BadgeVariantProps['variant']>\n    size?: NonNullable<BadgeVariantProps['size']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n    variant: 'default',\n    size: 'default',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(badgeVariants({ variant: props.variant, size: props.size }), props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/badge/badge-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const badgeVariants = cva(\n    [\n        'inline-flex items-center',\n        'border-3 border-brutal',\n        'font-bold tracking-wide',\n        'transition-colors',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'bg-brutal-bg text-brutal-fg shadow-brutal-sm',\n                primary: 'bg-brutal-primary text-brutal-fg shadow-brutal-sm',\n                secondary: 'bg-brutal-secondary text-brutal-fg shadow-brutal-sm',\n                accent: 'bg-brutal-accent text-brutal-fg shadow-brutal-sm',\n                danger: 'bg-brutal-destructive text-brutal-fg shadow-brutal-sm',\n                success: 'bg-brutal-success text-brutal-fg shadow-brutal-sm',\n                outline: 'bg-transparent text-brutal-fg',\n            },\n            size: {\n                sm: 'px-2 py-0.5 text-xs',\n                default: 'px-3 py-1 text-sm',\n                lg: 'px-4 py-1.5 text-base',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -35,7 +40,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -65,7 +74,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -75,16 +87,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/before-after.json b/packages/registry/registry/before-after.json
new file mode 100644
index 0000000..24c5002
--- /dev/null
+++ b/packages/registry/registry/before-after.json
@@ -0,0 +1,100 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "before-after",
+  "type": "registry:ui",
+  "title": "Before After",
+  "description": "A highly customizable neo-brutalist Before After component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/before-after/BeforeAfter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue'\nimport { MoveHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { beforeAfterRootVariants, beforeAfterHandleVariants } from './before-after-variants'\n\nconst DEFAULT_SLIDER_POSITION = 50\n\ninterface BeforeAfterProps {\n    before: string\n    after: string\n    beforeAlt?: string\n    afterAlt?: string\n    defaultValue?: number\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BeforeAfterProps>(), {\n    beforeAlt: undefined,\n    afterAlt: undefined,\n    defaultValue: DEFAULT_SLIDER_POSITION,\n    disabled: false,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedBeforeAlt = computed(() => props.beforeAlt ?? t('beforeAfter.before'))\nconst resolvedAfterAlt = computed(() => props.afterAlt ?? t('beforeAfter.after'))\n\nconst sliderVal = ref(props.defaultValue)\n\nwatch(() => props.defaultValue, (val) => {\n    if (val !== undefined) sliderVal.value = val\n})\n\nconst clipStyle = computed(() => {\n    return {\n        clipPath: `inset(0 0 0 ${sliderVal.value}%)`,\n    }\n})\n\nconst sliderStyle = computed(() => {\n    return {\n        left: `${sliderVal.value}%`,\n    }\n})\n\nconst rootClasses = computed(() =>\n    cn(beforeAfterRootVariants(), props.class)\n)\n\nconst handleClasses = computed(() =>\n    cn(beforeAfterHandleVariants())\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <img\n            :src=\"before\"\n            :alt=\"resolvedBeforeAlt\"\n            class=\"absolute inset-0 w-full h-full object-cover pointer-events-none\"\n        />\n\n        <div\n            class=\"absolute inset-0 w-full h-full pointer-events-none\"\n            :style=\"clipStyle\"\n        >\n            <img\n                :src=\"after\"\n                :alt=\"resolvedAfterAlt\"\n                class=\"absolute inset-0 w-full h-full object-cover pointer-events-none\"\n            />\n        </div>\n\n        <div\n            class=\"absolute top-0 bottom-0 w-[4px] bg-brutal-fg -translate-x-1/2 pointer-events-none z-10\"\n            :style=\"sliderStyle\"\n        />\n\n        <div\n            :class=\"handleClasses\"\n            :style=\"sliderStyle\"\n        >\n            <MoveHorizontal class=\"h-4 w-4 stroke-[3] text-brutal-fg\" />\n        </div>\n\n        <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            v-model=\"sliderVal\"\n            :disabled=\"disabled\"\n            class=\"absolute inset-0 w-full h-full opacity-0 cursor-ew-resize z-30 disabled:cursor-not-allowed\"\n        />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/blog-card.json b/packages/registry/registry/blog-card.json
new file mode 100644
index 0000000..9b4e2d5
--- /dev/null
+++ b/packages/registry/registry/blog-card.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "blog-card",
+  "type": "registry:ui",
+  "title": "Blog Card",
+  "description": "A highly customizable neo-brutalist Blog Card component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "badge",
+    "avatar"
+  ],
+  "files": [
+    {
+      "path": "components/ui/blog-card/BlogCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\nimport Avatar from '@/components/ui/avatar/Avatar.vue'\nimport AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'\n\ninterface BlogCardProps {\n    title?: string\n    excerpt?: string\n    author?: string\n    date?: string\n    category?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BlogCardProps>(), {\n    title: undefined,\n    excerpt: undefined,\n    author: '',\n    date: '',\n    category: '',\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'read-more': []\n}>()\n\nconst { t } = useLocale()\n\nconst rootClasses = computed(() => cn('w-full max-w-lg', props.class))\n\nconst resolvedTitle = computed(() => props.title ?? t('blogCard.defaultTitle'))\nconst resolvedExcerpt = computed(() => props.excerpt ?? t('blogCard.defaultExcerpt'))\nconst resolvedReadMore = computed(() => t('blogCard.readMore'))\n\nconst initials = computed(() => {\n    if (!props.author) return ''\n    return props.author\n        .split(' ')\n        .map(w => w[0])\n        .join('')\n        .slice(0, 2)\n        .toUpperCase()\n})\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <CardHeader>\n            <Badge v-if=\"category\" variant=\"primary\" size=\"sm\" class=\"w-fit mb-2\">\n                {{ category }}\n            </Badge>\n            <h3 class=\"text-lg font-black tracking-tight leading-snug\">\n{{ resolvedTitle }}\n</h3>\n        </CardHeader>\n        <CardContent>\n            <p class=\"text-sm text-brutal-muted-foreground font-medium leading-relaxed\">\n{{ resolvedExcerpt }}\n</p>\n            <div class=\"mt-4 flex items-center justify-between\">\n                <div v-if=\"author\" class=\"flex items-center gap-2\">\n                    <Avatar size=\"sm\" shape=\"square\">\n                        <AvatarFallback>{{ initials }}</AvatarFallback>\n                    </Avatar>\n                    <span class=\"text-sm font-bold\">{{ author }}</span>\n                </div>\n                <span v-if=\"date\" class=\"text-xs text-brutal-muted-foreground font-medium\">{{ date }}</span>\n            </div>\n            <button class=\"mt-3 text-sm font-bold text-brutal-primary cursor-pointer hover:underline active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\" @click=\"emit('read-more')\">\n                {{ resolvedReadMore }}\n            </button>\n            <slot name=\"actions\" />\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/blog-list-page.json b/packages/registry/registry/blog-list-page.json
new file mode 100644
index 0000000..712e7f9
--- /dev/null
+++ b/packages/registry/registry/blog-list-page.json
@@ -0,0 +1,108 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "blog-list-page",
+  "type": "registry:ui",
+  "title": "Blog List Page",
+  "description": "A highly customizable neo-brutalist Blog List Page component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "pagination",
+    "badge",
+    "input",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "components/ui/blog-list-page/BlogListPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { Search } from 'lucide-vue-next'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport Pagination from '@/components/ui/pagination/Pagination.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\nimport Input from '@/components/ui/input/Input.vue'\nimport Button from '@/components/ui/button/Button.vue'\n\nexport interface BlogPost {\n    title: string\n    excerpt: string\n    author: string\n    date: string\n    category: string\n    slug: string\n}\n\ninterface BlogListPageProps {\n    title?: string\n    posts?: BlogPost[]\n    categories?: string[]\n    pageSize?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BlogListPageProps>(), {\n    title: undefined,\n    posts: () => [],\n    categories: () => [],\n    pageSize: 6,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'post-click': [slug: string]\n    'category-filter': [category: string]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('blogListPage.defaultTitle'))\nconst resolvedSearchPlaceholder = computed(() => t('blogListPage.searchPlaceholder'))\nconst resolvedAllCategories = computed(() => t('blogListPage.allCategories'))\nconst resolvedNoPostsFound = computed(() => t('blogListPage.noPostsFound'))\n\nconst searchQuery = ref('')\nconst activeCategory = ref('')\n\nwatch(searchQuery, () => {\n    currentPage.value = 1\n})\n\nconst filteredPosts = computed(() => {\n    let result = props.posts\n    if (activeCategory.value) {\n        result = result.filter(post => post.category === activeCategory.value)\n    }\n    if (searchQuery.value) {\n        const query = searchQuery.value.toLowerCase()\n        result = result.filter(post =>\n            post.title.toLowerCase().includes(query) ||\n            post.excerpt.toLowerCase().includes(query) ||\n            post.author.toLowerCase().includes(query)\n        )\n    }\n    return result\n})\n\nconst currentPage = ref(1)\nconst totalPages = computed(() => Math.max(1, Math.ceil(filteredPosts.value.length / props.pageSize)))\n\nconst paginatedPosts = computed(() => {\n    const start = (currentPage.value - 1) * props.pageSize\n    return filteredPosts.value.slice(start, start + props.pageSize)\n})\n\nfunction handleCategoryFilter(category: string) {\n    activeCategory.value = category\n    currentPage.value = 1\n    emit('category-filter', category)\n}\n\nfunction handlePostClick(slug: string) {\n    emit('post-click', slug)\n}\n\nfunction handlePageChange(page: number) {\n    currentPage.value = page\n}\n\nconst rootClasses = computed(() =>\n    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"w-full max-w-4xl mx-auto\">\n            <slot name=\"header\">\n                <div class=\"mb-8\">\n                    <h1 class=\"text-3xl font-black tracking-tight\">\n                        {{ resolvedTitle }}\n                    </h1>\n                </div>\n            </slot>\n\n            <slot>\n                <div class=\"mb-6 flex flex-col sm:flex-row gap-4\">\n                    <div class=\"relative flex-1\">\n                        <Search class=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 stroke-[3] text-brutal-fg\" />\n                        <Input\n                            v-model=\"searchQuery\"\n                            :placeholder=\"resolvedSearchPlaceholder\"\n                            class=\"pl-10\"\n                        />\n                    </div>\n                    <div class=\"flex flex-wrap gap-2\">\n                        <Button\n                            :variant=\"activeCategory === '' ? 'primary' : 'outline'\"\n                            size=\"sm\"\n                            @click=\"handleCategoryFilter('')\"\n                        >\n                            {{ resolvedAllCategories }}\n                        </Button>\n                        <Badge\n                            v-for=\"category in categories\"\n                            :key=\"category\"\n                            :variant=\"activeCategory === category ? 'primary' : 'default'\"\n                            size=\"sm\"\n                            class=\"cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\"\n                            @click=\"handleCategoryFilter(category)\"\n                        >\n                            {{ category }}\n                        </Badge>\n                    </div>\n                </div>\n\n                <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n                    <Card\n                        v-for=\"post in paginatedPosts\"\n                        :key=\"post.slug\"\n                        variant=\"elevated\"\n                        class=\"cursor-pointer hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\"\n                        @click=\"handlePostClick(post.slug)\"\n                    >\n                        <CardHeader>\n                            <div class=\"flex items-center justify-between\">\n                                <Badge variant=\"accent\" size=\"sm\">{{ post.category }}</Badge>\n                                <span class=\"text-xs font-bold text-brutal-fg\">{{ post.date }}</span>\n                            </div>\n                            <CardTitle class=\"text-lg\">{{ post.title }}</CardTitle>\n                        </CardHeader>\n                        <CardContent>\n                            <p class=\"text-sm font-medium text-brutal-fg line-clamp-3\">{{ post.excerpt }}</p>\n                            <div class=\"mt-3 text-xs font-bold text-brutal-fg\">\n                                {{ post.author }}\n                            </div>\n                        </CardContent>\n                    </Card>\n                </div>\n\n                <div v-if=\"filteredPosts.length === 0\" class=\"text-center py-12\">\n                    <p class=\"text-lg font-bold text-brutal-fg\">{{ resolvedNoPostsFound }}</p>\n                </div>\n\n                <div v-if=\"totalPages > 1\" class=\"mt-8 flex justify-center\">\n                    <Pagination\n                        :current-page=\"currentPage\"\n                        :total-pages=\"totalPages\"\n                        @update:current-page=\"handlePageChange\"\n                    />\n                </div>\n            </slot>\n\n            <slot name=\"footer\" />\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/breadcrumb.json b/packages/registry/registry/breadcrumb.json
new file mode 100644
index 0000000..42b5625
--- /dev/null
+++ b/packages/registry/registry/breadcrumb.json
@@ -0,0 +1,133 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "title": "Breadcrumb",
+  "description": "A highly customizable neo-brutalist Breadcrumb component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/breadcrumb/Breadcrumb.vue",
+      "content": "<script setup lang=\"ts\">\nimport { useLocale } from '@/composables/useLocale'\n\ninterface BreadcrumbProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbProps>(), {\n    class: '',\n})\n\nconst { t } = useLocale()\n</script>\n\n<template>\n    <nav :aria-label=\"t('breadcrumb.label')\" :class=\"props.class\">\n        <slot />\n    </nav>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/breadcrumb/BreadcrumbList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { breadcrumbListVariants } from './breadcrumb-variants'\n\ninterface BreadcrumbListProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbListProps>(), {\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(breadcrumbListVariants(), props.class)\n)\n</script>\n\n<template>\n    <ol :class=\"classes\">\n        <slot />\n    </ol>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/breadcrumb/BreadcrumbItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { breadcrumbItemVariants } from './breadcrumb-variants'\n\ninterface BreadcrumbItemProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbItemProps>(), {\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(breadcrumbItemVariants(), props.class)\n)\n</script>\n\n<template>\n    <li :class=\"classes\">\n        <slot />\n    </li>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/breadcrumb/BreadcrumbLink.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { breadcrumbLinkVariants } from './breadcrumb-variants'\n\ninterface BreadcrumbLinkProps extends PrimitiveProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbLinkProps>(), {\n    as: 'a',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(breadcrumbLinkVariants(), props.class)\n)\n</script>\n\n<template>\n    <Primitive\n        :as=\"props.as\"\n        :as-child=\"props.asChild\"\n        :class=\"classes\"\n    >\n        <slot />\n    </Primitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/breadcrumb/BreadcrumbPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { breadcrumbPageVariants } from './breadcrumb-variants'\n\ninterface BreadcrumbPageProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbPageProps>(), {\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(breadcrumbPageVariants(), props.class)\n)\n</script>\n\n<template>\n    <span\n        role=\"link\"\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        :class=\"classes\"\n    >\n        <slot />\n    </span>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/breadcrumb/BreadcrumbSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { breadcrumbSeparatorVariants } from './breadcrumb-variants'\n\ninterface BreadcrumbSeparatorProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbSeparatorProps>(), {\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(breadcrumbSeparatorVariants(), props.class)\n)\n</script>\n\n<template>\n    <li\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        :class=\"classes\"\n    >\n        <slot>\n            <span>/</span>\n        </slot>\n    </li>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/breadcrumb/BreadcrumbEllipsis.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { breadcrumbEllipsisVariants } from './breadcrumb-variants'\nimport { useLocale } from '@/composables/useLocale'\n\ninterface BreadcrumbEllipsisProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BreadcrumbEllipsisProps>(), {\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst classes = computed(() =>\n    cn(breadcrumbEllipsisVariants(), props.class)\n)\n</script>\n\n<template>\n    <span\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        :class=\"classes\"\n    >\n        <slot>\n            <MoreHorizontal class=\"h-4 w-4 stroke-[3]\" />\n        </slot>\n        <span class=\"sr-only\">{{ t('breadcrumb.more') }}</span>\n    </span>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/brutalist-hero.json b/packages/registry/registry/brutalist-hero.json
index 4a1525c..4f777a7 100644
--- a/packages/registry/registry/brutalist-hero.json
+++ b/packages/registry/registry/brutalist-hero.json
@@ -3,9 +3,9 @@
   "name": "brutalist-hero",
   "type": "registry:ui",
   "title": "Brutalist Hero",
-  "description": "A highly customizable neo-brutalist Brutalist Hero component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Brutalist Hero component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "button",
@@ -13,8 +13,8 @@
   ],
   "files": [
     {
-      "path": "components/ui/brutalist-hero.tsx",
-      "content": "import * as React from 'react';\nimport { ArrowRight, Sparkles } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\n\nexport interface BrutalistHeroProps extends React.HTMLAttributes<HTMLDivElement> {\n    title?: string;\n    subtitle?: string;\n    primaryCtaText?: string;\n    secondaryCtaText?: string;\n    onPrimaryCtaClick?: () => void;\n    onSecondaryCtaClick?: () => void;\n}\n\nexport function BrutalistHero({\n    title = 'Build Bold Interfaces Faster with BrutxUI',\n    subtitle = 'A hyper-responsive, neo-brutalist component registry built with Radix UI and Tailwind CSS. Designed for devs who dare to be different.',\n    primaryCtaText = 'Get Started Now',\n    secondaryCtaText = 'View Component Registry',\n    onPrimaryCtaClick,\n    onSecondaryCtaClick,\n    className,\n    ...props\n}: BrutalistHeroProps) {\n    return (\n        <section\n            className={`w-full py-12 md:py-24 lg:py-32 bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-none transition-colors duration-200 ${className || ''}`}\n            {...props}\n        >\n            <div className=\"container px-4 md:px-6 mx-auto\">\n                <div className=\"grid gap-12 lg:grid-cols-2 lg:gap-16 items-center\">\n                    <div className=\"flex flex-col justify-center space-y-6 text-left\">\n                        <div className=\"inline-flex items-center space-x-2 bg-brutal-accent text-black px-3 py-1 border-3 border-brutal w-fit font-black text-sm uppercase tracking-wider rotate-[-1deg]\">\n                            <Sparkles className=\"h-4 w-4 stroke-[3]\" />\n                            <span>V0.2.1 Release</span>\n                        </div>\n\n                        <h1 className=\"text-4xl font-black tracking-tight sm:text-5xl md:text-6xl lg:text-7xl leading-[1.05]\">\n                            {title}\n                        </h1>\n\n                        <p className=\"max-w-[600px] text-lg md:text-xl font-bold text-gray-700 dark:text-gray-300 leading-relaxed\">\n                            {subtitle}\n                        </p>\n\n                        <div className=\"flex flex-col sm:flex-row gap-4 pt-4\">\n                            <Button\n                                size=\"lg\"\n                                variant=\"primary\"\n                                className=\"font-black text-lg gap-2\"\n                                onClick={onPrimaryCtaClick}\n                            >\n                                <span>{primaryCtaText}</span>\n                                <ArrowRight className=\"h-5 w-5 stroke-[3]\" />\n                            </Button>\n                            <Button\n                                size=\"lg\"\n                                variant=\"outline\"\n                                className=\"font-black text-lg\"\n                                onClick={onSecondaryCtaClick}\n                            >\n                                {secondaryCtaText}\n                            </Button>\n                        </div>\n                    </div>\n\n                    <div className=\"relative mx-auto w-full max-w-[500px] lg:max-w-none\">\n                        <div className=\"absolute inset-0 bg-brutal-secondary translate-x-3 translate-y-3 border-3 border-brutal rounded-none\" />\n                        <Card className=\"relative z-10 border-3 border-brutal bg-white dark:bg-gray-800 rounded-none shadow-none p-2\">\n                            <div className=\"flex items-center justify-between border-b-3 border-brutal pb-2 mb-4 bg-gray-100 dark:bg-gray-700 p-2\">\n                                <div className=\"flex space-x-2\">\n                                    <div className=\"w-3.5 h-3.5 rounded-full bg-brutal-destructive border-2 border-brutal\" />\n                                    <div className=\"w-3.5 h-3.5 rounded-full bg-brutal-accent border-2 border-brutal\" />\n                                    <div className=\"w-3.5 h-3.5 rounded-full bg-brutal-success border-2 border-brutal\" />\n                                </div>\n                                <span className=\"text-xs font-black uppercase tracking-wider opacity-60\">brutx-terminal</span>\n                            </div>\n                            <CardContent className=\"font-mono text-sm space-y-3 text-black dark:text-white pt-2\">\n                                <p className=\"text-brutal-destructive font-black\">~/projects/my-bold-saas</p>\n                                <p className=\"flex items-center gap-2\">\n                                    <span className=\"text-brutal-secondary font-black\">$</span>\n                                    <span>npx brutx init</span>\n                                </p>\n                                <p className=\"text-gray-500 font-medium\">✓ Custom Tailwind design tokens configured</p>\n                                <p className=\"text-gray-500 font-medium\">✓ Global CSS token layer synchronized</p>\n                                <p className=\"flex items-center gap-2\">\n                                    <span className=\"text-brutal-secondary font-black\">$</span>\n                                    <span>npx brutx add hero pricing auth-card</span>\n                                </p>\n                                <p className=\"text-brutal-success font-black\">✓ Successfully added 3 blocks into /components/ui!</p>\n                            </CardContent>\n                        </Card>\n                    </div>\n                </div>\n            </div>\n        </section>\n    );\n}\n",
+      "path": "components/ui/brutalist-hero/BrutalistHero.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ArrowRight, Sparkles } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Button from '@/components/ui/button/Button.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\n\ninterface BrutalistHeroProps {\n    title?: string\n    subtitle?: string\n    primaryCtaText?: string\n    secondaryCtaText?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BrutalistHeroProps>(), {\n    title: undefined,\n    subtitle: '',\n    primaryCtaText: undefined,\n    secondaryCtaText: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('brutalistHero.title'))\nconst resolvedPrimaryCtaText = computed(() => props.primaryCtaText ?? t('brutalistHero.primaryCtaText'))\nconst resolvedSecondaryCtaText = computed(() => props.secondaryCtaText ?? t('brutalistHero.secondaryCtaText'))\n\nconst emit = defineEmits<{\n    primaryCta: []\n    secondaryCta: []\n}>()\n\nconst rootClasses = computed(() => cn('w-full', props.class))\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\n            <div>\n                <div class=\"inline-flex items-center gap-2 mb-6 bg-brutal-accent px-3 py-1 border-3 border-brutal rotate-[-1deg]\">\n                    <Sparkles class=\"h-4 w-4 stroke-[3]\" />\n                    <span class=\"font-black text-sm\">{{ t('brutalistHero.neoBrutalismUI') }}</span>\n                </div>\n                <h1 class=\"text-4xl lg:text-5xl font-black tracking-tight leading-tight\">\n{{ resolvedTitle }}\n</h1>\n                <p v-if=\"subtitle\" class=\"mt-4 text-lg text-brutal-muted-foreground font-medium\">\n{{ subtitle }}\n</p>\n                <div class=\"mt-8 flex flex-wrap gap-4\">\n                    <Button variant=\"primary\" size=\"lg\" @click=\"emit('primaryCta')\">\n                        {{ resolvedPrimaryCtaText }}\n                        <ArrowRight class=\"ml-2 h-5 w-5 stroke-[3]\" />\n                    </Button>\n                    <Button variant=\"outline\" size=\"lg\" @click=\"emit('secondaryCta')\">\n{{ resolvedSecondaryCtaText }}\n</Button>\n                </div>\n            </div>\n\n            <div class=\"relative\">\n                <div class=\"absolute inset-0 bg-brutal-primary border-3 border-brutal translate-x-3 translate-y-3\" />\n                <Card variant=\"default\" padding=\"default\" class=\"relative bg-brutal-bg font-mono text-sm\">\n                    <CardContent>\n                        <div class=\"space-y-1\">\n                            <p class=\"text-brutal-muted-foreground\">\n$ npx brutxui init\n</p>\n                            <p class=\"text-brutal-success font-bold\">\n✓ Project initialized\n</p>\n                            <p class=\"text-brutal-muted-foreground\">\n$ npx brutxui add button\n</p>\n                            <p class=\"text-brutal-success font-bold\">\n✓ Button component added\n</p>\n                            <p class=\"text-brutal-muted-foreground\">\n$ npx brutxui add card dialog\n</p>\n                            <p class=\"text-brutal-success font-bold\">\n✓ 2 components added\n</p>\n                            <p class=\"text-brutal-accent font-bold animate-pulse\">\n█\n</p>\n                        </div>\n                    </CardContent>\n                </Card>\n            </div>\n        </div>\n    </div>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -40,7 +40,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -70,7 +74,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -80,16 +87,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/button.json b/packages/registry/registry/button.json
index dbdd385..101c034 100644
--- a/packages/registry/registry/button.json
+++ b/packages/registry/registry/button.json
@@ -3,15 +3,21 @@
   "name": "button",
   "type": "registry:ui",
   "title": "Button",
-  "description": "A highly customizable neo-brutalist Button component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Button component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-slot"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/button.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { Loader2 } from 'lucide-react';\n\nconst buttonVariants = cva(\n    [\n        'inline-flex items-center justify-center gap-2',\n        'border-3 border-brutal rounded-brutal',\n        'font-black tracking-wide',\n        'transition-all duration-150',\n        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2',\n        'disabled:opacity-50 disabled:pointer-events-none',\n    ],\n    {\n        variants: {\n            variant: {\n                default: [\n                    'bg-brutal-bg text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                ],\n                primary: [\n                    'bg-brutal-primary text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                ],\n                secondary: [\n                    'bg-brutal-secondary text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                ],\n                accent: [\n                    'bg-brutal-accent text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                ],\n                danger: [\n                    'bg-brutal-destructive text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                ],\n                success: [\n                    'bg-brutal-success text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                ],\n                outline: [\n                    'bg-transparent text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:bg-brutal-fg hover:text-brutal-bg',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                ],\n                ghost: [\n                    'bg-transparent text-brutal-fg border-transparent',\n                    'shadow-none',\n                    'hover:bg-brutal-muted hover:border-brutal',\n                ],\n                link: [\n                    'bg-transparent text-brutal-fg border-transparent',\n                    'shadow-none underline-offset-4',\n                    'hover:underline',\n                ],\n            },\n            size: {\n                sm: 'h-9 px-3 py-1 text-sm',\n                default: 'h-11 px-5 py-2 text-base',\n                lg: 'h-12 px-8 py-3 text-lg',\n                xl: 'h-16 px-10 py-4 text-xl',\n                icon: 'h-11 w-11 p-0',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface ButtonProps\n    extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n        VariantProps<typeof buttonVariants> {\n    asChild?: boolean;\n    loading?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n    (\n        {\n            className,\n            variant,\n            size,\n            asChild = false,\n            loading = false,\n            disabled,\n            children,\n            ...props\n        },\n        ref\n    ) => {\n        const Comp = asChild ? Slot : 'button';\n        const isDisabled = disabled || loading;\n\n        return (\n            <Comp\n                className={cn(buttonVariants({ variant, size, className }))}\n                ref={ref}\n                disabled={isDisabled}\n                {...props}\n            >\n                {loading ? (\n                    <>\n                        <Loader2 className=\"h-4 w-4 animate-spin\" />\n                        {children}\n                    </>\n                ) : (\n                    children\n                )}\n            </Comp>\n        );\n    }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n",
+      "path": "components/ui/button/Button.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Loader2 } from 'lucide-vue-next'\nimport { Primitive } from 'reka-ui'\nimport { buttonVariants } from '@/components/ui/button/button-variants'\n\ntype ButtonVariantProps = VariantProps<typeof buttonVariants>\n\ninterface ButtonProps {\n    variant?: NonNullable<ButtonVariantProps['variant']>\n    size?: NonNullable<ButtonVariantProps['size']>\n    asChild?: boolean\n    loading?: boolean\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    variant: 'default',\n    size: 'default',\n    asChild: false,\n    loading: false,\n    disabled: false,\n    class: '',\n})\n\nconst isDisabled = computed(() => props.disabled || props.loading)\n\nconst classes = computed(() =>\n    cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)\n)\n</script>\n\n<template>\n    <Primitive\n        :as=\"asChild ? undefined : 'button'\"\n        :as-child=\"asChild\"\n        :class=\"classes\"\n        :disabled=\"!asChild && isDisabled\"\n        :aria-disabled=\"asChild && isDisabled ? true : undefined\"\n    >\n        <Loader2 v-if=\"loading\" class=\"h-4 w-4 animate-spin\" />\n        <slot />\n    </Primitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/button/button-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const buttonVariants = cva(\n    [\n        'inline-flex items-center justify-center gap-2',\n        'border-3 border-brutal',\n        'font-black tracking-wide',\n        'transition-all duration-150',\n        'focus:outline focus:outline-[3px] focus:outline-brutal-ring focus:outline-offset-2',\n        'disabled:opacity-50 disabled:pointer-events-none',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n    ],\n    {\n        variants: {\n            variant: {\n                default: [\n                    'bg-brutal-bg text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n                primary: [\n                    'bg-brutal-primary text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n                secondary: [\n                    'bg-brutal-secondary text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n                accent: [\n                    'bg-brutal-accent text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n                danger: [\n                    'bg-brutal-destructive text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n                success: [\n                    'bg-brutal-success text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n                outline: [\n                    'bg-transparent text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:bg-brutal-fg hover:text-brutal-bg',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                ],\n                ghost: [\n                    'bg-transparent text-brutal-fg border-transparent',\n                    'shadow-none',\n                    'hover:bg-brutal-muted hover:border-brutal',\n                ],\n                link: [\n                    'bg-transparent text-brutal-fg border-transparent',\n                    'shadow-none underline-offset-4',\n                    'hover:underline',\n                ],\n            },\n            size: {\n                sm: 'h-9 px-3 py-1 text-sm',\n                default: 'h-11 px-5 py-2 text-base',\n                lg: 'h-14 px-8 py-3 text-lg',\n                xl: 'h-16 px-10 py-4 text-xl',\n                icon: 'h-11 w-11 p-0',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +43,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +77,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +90,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/calendar.json b/packages/registry/registry/calendar.json
index 3135bbf..8bb6931 100644
--- a/packages/registry/registry/calendar.json
+++ b/packages/registry/registry/calendar.json
@@ -3,19 +3,16 @@
   "name": "calendar",
   "type": "registry:ui",
   "title": "Calendar",
-  "description": "A highly customizable neo-brutalist Calendar component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Calendar component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "react-day-picker",
-    "date-fns",
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "button"
+    "v-calendar",
+    "lucide-vue-next"
   ],
+  "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/calendar.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';\nimport { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';\n\nimport { cn } from '@/lib/utils';\nimport { Button, buttonVariants } from '@/components/ui/button';\n\nfunction Calendar({\n    className,\n    classNames,\n    showOutsideDays = true,\n    captionLayout = 'label',\n    buttonVariant = 'outline',\n    formatters,\n    components,\n    ...props\n}: React.ComponentProps<typeof DayPicker> & {\n    buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) {\n    const defaultClassNames = getDefaultClassNames();\n\n    return (\n        <DayPicker\n            showOutsideDays={showOutsideDays}\n            className={cn(\n                'p-2 sm:p-3 bg-[#FFFEF0] dark:bg-[#1a1a2e]',\n                'border-2 sm:border-3 border-brutal',\n                'shadow-brutal',\n                'w-fit max-w-full overflow-x-auto',\n                className\n            )}\n            captionLayout={captionLayout}\n            formatters={{\n                formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),\n                ...formatters,\n            }}\n            classNames={{\n                root: cn('w-fit select-none', defaultClassNames.root),\n                months: cn('flex gap-2 sm:gap-4 flex-col', defaultClassNames.months),\n                month: cn('flex flex-col gap-1 sm:gap-2', defaultClassNames.month),\n                nav: cn(\n                    'flex items-center gap-1 absolute top-0 inset-x-0 justify-between z-10',\n                    defaultClassNames.nav\n                ),\n                button_previous: cn(\n                    buttonVariants({ variant: buttonVariant, size: 'icon' }),\n                    'h-6 w-6 sm:h-7 sm:w-7 p-0 select-none',\n                    'border-2 border-brutal',\n                    'shadow-brutal-sm',\n                    'hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[1px_1px_0px_0px_#000000]',\n                    'transition-all duration-100',\n                    'aria-disabled:opacity-50',\n                    defaultClassNames.button_previous\n                ),\n                button_next: cn(\n                    buttonVariants({ variant: buttonVariant, size: 'icon' }),\n                    'h-6 w-6 sm:h-7 sm:w-7 p-0 select-none',\n                    'border-2 border-brutal',\n                    'shadow-brutal-sm',\n                    'hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[1px_1px_0px_0px_#000000]',\n                    'transition-all duration-100',\n                    'aria-disabled:opacity-50',\n                    defaultClassNames.button_next\n                ),\n                month_caption: cn(\n                    'flex items-center justify-center h-6 sm:h-7 relative',\n                    'font-black text-xs sm:text-sm tracking-tight uppercase',\n                    defaultClassNames.month_caption\n                ),\n                dropdowns: cn(\n                    'flex items-center text-[10px] sm:text-xs font-bold justify-center gap-1',\n                    defaultClassNames.dropdowns\n                ),\n                dropdown_root: cn(\n                    'relative border-2 border-brutal bg-white dark:bg-gray-800',\n                    'shadow-brutal-sm',\n                    'focus-within:ring-2 focus-within:ring-offset-1 focus-within:ring-black',\n                    defaultClassNames.dropdown_root\n                ),\n                dropdown: cn(\n                    'absolute inset-0 opacity-0 cursor-pointer',\n                    defaultClassNames.dropdown\n                ),\n                caption_label: cn(\n                    'select-none font-black tracking-tight',\n                    captionLayout === 'label'\n                        ? 'text-xs sm:text-sm'\n                        : 'pl-1 sm:pl-1.5 pr-0.5 flex items-center gap-0.5 sm:gap-1 text-[10px] sm:text-xs h-6 sm:h-7 [&>svg]:size-2.5 sm:[&>svg]:size-3',\n                    defaultClassNames.caption_label\n                ),\n                table: 'w-full border-collapse border-spacing-0',\n                weekdays: cn('', defaultClassNames.weekdays),\n                weekday: cn(\n                    'text-black dark:text-white font-black text-[8px] sm:text-[10px] select-none uppercase tracking-wide',\n                    'h-6 w-6 sm:h-8 sm:w-8 text-center',\n                    'bg-[#FFE66D] dark:bg-[#FFE66D] dark:text-black',\n                    'border sm:border-2 border-black dark:border-black',\n                    defaultClassNames.weekday\n                ),\n                week: cn('', defaultClassNames.week),\n                week_number_header: cn(\n                    'select-none h-6 w-6 sm:h-8 sm:w-8 text-center font-black text-[8px] sm:text-[10px]',\n                    'bg-[#A8E6CF] border sm:border-2 border-black',\n                    defaultClassNames.week_number_header\n                ),\n                week_number: cn(\n                    'text-[8px] sm:text-[10px] select-none font-black text-black',\n                    'h-6 w-6 sm:h-8 sm:w-8 text-center align-middle',\n                    'bg-[#A8E6CF] border sm:border-2 border-black',\n                    defaultClassNames.week_number\n                ),\n                day: cn(\n                    'relative h-6 w-6 sm:h-8 sm:w-8 p-0 text-center select-none',\n                    'border border-black/10 dark:border-white/10',\n                    defaultClassNames.day\n                ),\n                range_start: cn(\n                    '[&>button]:bg-[#FF6B6B] [&>button]:border-2 [&>button]:border-black [&>button]:font-black',\n                    defaultClassNames.range_start\n                ),\n                range_middle: cn(\n                    '[&>button]:bg-[#FFE66D] [&>button]:text-black',\n                    defaultClassNames.range_middle\n                ),\n                range_end: cn(\n                    '[&>button]:bg-[#FF6B6B] [&>button]:border-2 [&>button]:border-black [&>button]:font-black',\n                    defaultClassNames.range_end\n                ),\n                today: cn(\n                    '[&>button]:bg-[#4ECDC4] [&>button]:text-black [&>button]:font-black',\n                    '[&>button]:border-2 [&>button]:border-black',\n                    defaultClassNames.today\n                ),\n                outside: cn(\n                    'text-gray-400 dark:text-gray-600 opacity-40',\n                    defaultClassNames.outside\n                ),\n                disabled: cn(\n                    'text-gray-400 dark:text-gray-600 opacity-40 cursor-not-allowed',\n                    'bg-gray-100 dark:bg-gray-800',\n                    defaultClassNames.disabled\n                ),\n                hidden: cn('invisible', defaultClassNames.hidden),\n                ...classNames,\n            }}\n            components={{\n                Root: ({ className, rootRef, ...props }) => {\n                    return (\n                        <div\n                            data-slot=\"calendar\"\n                            ref={rootRef}\n                            className={cn(className)}\n                            {...props}\n                        />\n                    );\n                },\n                Chevron: ({ className, orientation, ...props }) => {\n                    if (orientation === 'left') {\n                        return (\n                            <ChevronLeftIcon\n                                className={cn('size-4 stroke-[3]', className)}\n                                {...props}\n                            />\n                        );\n                    }\n\n                    if (orientation === 'right') {\n                        return (\n                            <ChevronRightIcon\n                                className={cn('size-4 stroke-[3]', className)}\n                                {...props}\n                            />\n                        );\n                    }\n\n                    return (\n                        <ChevronDownIcon\n                            className={cn('size-3 stroke-[3]', className)}\n                            {...props}\n                        />\n                    );\n                },\n                DayButton: CalendarDayButton,\n                WeekNumber: ({ children, ...props }) => {\n                    return (\n                        <td {...props}>\n                            <div className=\"flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center text-center font-black\">\n                                {children}\n                            </div>\n                        </td>\n                    );\n                },\n                ...components,\n            }}\n            {...props}\n        />\n    );\n}\n\nfunction CalendarDayButton({\n    className,\n    day,\n    modifiers,\n    ...props\n}: React.ComponentProps<typeof DayButton>) {\n    const defaultClassNames = getDefaultClassNames();\n\n    const ref = React.useRef<HTMLButtonElement>(null);\n    React.useEffect(() => {\n        if (modifiers.focused) ref.current?.focus();\n    }, [modifiers.focused]);\n\n    return (\n        <button\n            ref={ref}\n            type=\"button\"\n            data-day={day.date.toLocaleDateString()}\n            data-selected-single={\n                modifiers.selected &&\n                !modifiers.range_start &&\n                !modifiers.range_end &&\n                !modifiers.range_middle\n            }\n            data-range-start={modifiers.range_start}\n            data-range-end={modifiers.range_end}\n            data-range-middle={modifiers.range_middle}\n            className={cn(\n                'flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center',\n                'text-[10px] sm:text-xs font-semibold transition-all duration-100',\n                'hover:bg-[#DDA0DD] hover:text-black hover:font-bold',\n                'focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-1',\n                'data-[selected-single=true]:bg-[#FF6B6B] data-[selected-single=true]:text-black',\n                'data-[selected-single=true]:border sm:data-[selected-single=true]:border-2 data-[selected-single=true]:border-brutal',\n                'data-[selected-single=true]:shadow-brutal-sm',\n                'data-[selected-single=true]:font-black',\n                'data-[range-start=true]:bg-[#FF6B6B] data-[range-start=true]:text-black data-[range-start=true]:font-black',\n                'data-[range-end=true]:bg-[#FF6B6B] data-[range-end=true]:text-black data-[range-end=true]:font-black',\n                'data-[range-middle=true]:bg-[#FFE66D] data-[range-middle=true]:text-black',\n                'disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent',\n                defaultClassNames.day,\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport { Calendar, CalendarDayButton };\n",
+      "path": "components/ui/calendar/Calendar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Calendar as VCalendar } from 'v-calendar'\nimport { cn } from '@/lib/utils'\n\ninterface CalendarProps {\n    modelValue?: Date | Date[] | null\n    isRange?: boolean\n    disabled?: boolean\n    class?: string\n}\n\ninterface DateRangeValue {\n    start: Date\n    end: Date\n}\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n    modelValue: undefined,\n    isRange: false,\n    disabled: false,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: Date | Date[] | null]\n}>()\n\nconst rootClasses = computed(() =>\n    cn(\n        'p-2 sm:p-3',\n        'bg-brutal-bg text-brutal-fg',\n        'border-3 border-brutal',\n        'shadow-brutal',\n        'w-fit max-w-full overflow-x-auto',\n        props.class\n    )\n)\n\nconst vCalendarModelValue = computed<Date | DateRangeValue | null>(() => {\n    if (props.isRange && Array.isArray(props.modelValue) && props.modelValue.length === 2) {\n        return { start: props.modelValue[0], end: props.modelValue[1] }\n    }\n    if (props.isRange) return null\n    if (props.modelValue instanceof Date) return props.modelValue\n    return null\n})\n\nfunction handleUpdate(value: Date | DateRangeValue | null) {\n    if (props.disabled) return\n    if (props.isRange) {\n        if (value && typeof value === 'object' && 'start' in value && 'end' in value) {\n            emit('update:modelValue', [value.start, value.end])\n        } else {\n            emit('update:modelValue', null)\n        }\n    } else {\n        if (value instanceof Date || value === null) {\n            emit('update:modelValue', value)\n        } else {\n            emit('update:modelValue', null)\n        }\n    }\n}\n\nconst dayBaseClasses = cn(\n    'flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center text-[10px] sm:text-xs font-semibold transition-all duration-100 hover:bg-brutal-secondary hover:text-brutal-fg hover:font-bold cursor-pointer border-3 border-brutal/10',\n    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all'\n)\n\nconst daySelectedClasses = 'bg-brutal-primary text-brutal-fg font-black border-3 border-brutal shadow-brutal-sm'\nconst dayInRangeClasses = 'bg-brutal-accent text-brutal-fg'\nconst dayRangeEndpointClasses = 'bg-brutal-secondary text-brutal-fg font-black border-3 border-brutal shadow-brutal-sm'\nconst dayTodayClasses = 'bg-brutal-secondary text-brutal-fg font-black border-3 border-brutal'\nconst dayOutsideClasses = 'text-brutal-muted-foreground opacity-40'\nconst dayDisabledClasses = 'opacity-40 cursor-not-allowed'\n</script>\n\n<template>\n    <VCalendar\n        :model-value=\"vCalendarModelValue\"\n        :mode=\"isRange ? 'range' : 'date'\"\n        :disabled=\"disabled\"\n        :class=\"rootClasses\"\n        :attributes=\"[]\"\n        trim-weeks\n        :first-day-of-week=\"1\"\n        @update:model-value=\"handleUpdate\"\n    >\n        <template #default=\"{ page }\">\n            <div class=\"vc-header flex items-center justify-between mb-2\">\n                <div class=\"vc-title font-black text-xs sm:text-sm tracking-tight uppercase text-brutal-fg\">\n                    {{ page.monthLabel }} {{ page.yearLabel }}\n                </div>\n            </div>\n        </template>\n        <template #day-content=\"{ day }\">\n            <div\n                :class=\"[\n                    dayBaseClasses,\n                    day.isSelected && !day.isInRange ? daySelectedClasses : '',\n                    day.isInRange && !day.isStart && !day.isEnd ? dayInRangeClasses : '',\n                    (day.isStart || day.isEnd) ? dayRangeEndpointClasses : '',\n                    day.isToday ? dayTodayClasses : '',\n                    day.isOutside ? dayOutsideClasses : '',\n                    day.isDisabled ? dayDisabledClasses : '',\n                ]\"\n            >\n                {{ day.label }}\n            </div>\n        </template>\n    </VCalendar>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -41,7 +38,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -71,7 +72,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -81,16 +85,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/card-3d.json b/packages/registry/registry/card-3d.json
new file mode 100644
index 0000000..3f3bd77
--- /dev/null
+++ b/packages/registry/registry/card-3d.json
@@ -0,0 +1,110 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card-3d",
+  "type": "registry:ui",
+  "title": "Card 3d",
+  "description": "A highly customizable neo-brutalist Card 3d component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/card-3d/Card3D.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useReducedMotion } from '@/composables/useReducedMotion'\nimport { useLocale } from '@/composables/useLocale'\nimport { card3dVariants, card3dShadowVariants } from '@/components/ui/card-3d/card-3d-variants'\n\ntype Card3DVariantProps = VariantProps<typeof card3dVariants>\n\ninterface Card3DProps {\n    maxRotation?: number\n    perspective?: number\n    scale?: number\n    shadowOffset?: number\n    shadow?: NonNullable<Card3DVariantProps['shadow']>\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<Card3DProps>(), {\n    maxRotation: 15,\n    perspective: 1000,\n    scale: 1.02,\n    shadowOffset: 10,\n    shadow: 'default',\n    disabled: false,\n    class: '',\n})\n\nconst cardRef = ref<HTMLDivElement | null>(null)\nconst rx = ref(0)\nconst ry = ref(0)\nconst isHovered = ref(false)\n\nconst prefersReducedMotion = useReducedMotion()\nconst { t } = useLocale()\n\n// 静态/初始阴影偏移量\nconst initialOffset = computed(() => {\n    switch (props.shadow) {\n        case 'lg':\n            return 6\n        case 'xl':\n            return 8\n        default:\n            return 4\n    }\n})\n\n// 动态阴影偏移量\nconst sx = ref(0)\nconst sy = ref(0)\n\nconst CENTER_OFFSET = 0.5\n\nconst handlePointerMove = (e: PointerEvent) => {\n    if (props.disabled || prefersReducedMotion.value) return\n    const rect = cardRef.value?.getBoundingClientRect()\n    if (!rect) return\n\n    isHovered.value = true\n    const x = (e.clientX - rect.left) / rect.width - CENTER_OFFSET // [-0.5, 0.5]\n    const y = (e.clientY - rect.top) / rect.height - CENTER_OFFSET // [-0.5, 0.5]\n\n    rx.value = -y * props.maxRotation\n    ry.value = x * props.maxRotation\n\n    // 阴影向反方向位移，加上初始阴影值作为偏移基数\n    sx.value = -x * props.shadowOffset + initialOffset.value\n    sy.value = -y * props.shadowOffset + initialOffset.value\n}\n\nconst handlePointerLeave = () => {\n    isHovered.value = false\n    rx.value = 0\n    ry.value = 0\n    sx.value = initialOffset.value\n    sy.value = initialOffset.value\n}\n\n// 初始化时设定阴影位置\nsx.value = initialOffset.value\nsy.value = initialOffset.value\n\nconst cardStyles = computed(() => {\n    if (props.disabled || prefersReducedMotion.value) {\n        return {}\n    }\n    return {\n        transform: isHovered.value\n            ? `perspective(${props.perspective}px) rotateX(${rx.value}deg) rotateY(${ry.value}deg) scale(${props.scale})`\n            : `perspective(${props.perspective}px) rotateX(0deg) rotateY(0deg) scale(1)`,\n    }\n})\n\nconst shadowStyles = computed(() => {\n    if (props.disabled || prefersReducedMotion.value) {\n        return {\n            transform: `translate(${initialOffset.value}px, ${initialOffset.value}px)`,\n        }\n    }\n    return {\n        transform: `translate(${sx.value}px, ${sy.value}px)`,\n    }\n})\n\nconst containerClasses = computed(() =>\n    cn('relative inline-block w-full', props.class)\n)\n\nconst cardClasses = computed(() =>\n    cn(card3dVariants({ shadow: props.shadow }))\n)\n\nconst shadowClasses = computed(() =>\n    cn(card3dShadowVariants())\n)\n</script>\n\n<template>\n    <div :class=\"containerClasses\" role=\"region\" :aria-label=\"t('card3d.ariaLabel')\">\n        <div\n            ref=\"cardRef\"\n            :class=\"cardClasses\"\n            :style=\"cardStyles\"\n            @pointermove=\"handlePointerMove\"\n            @pointerleave=\"handlePointerLeave\"\n        >\n            <slot />\n        </div>\n        <!-- 绝对定位的底色 div 模拟物理阴影 -->\n        <div :class=\"shadowClasses\" :style=\"shadowStyles\" aria-hidden=\"true\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/card-3d/card-3d-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const card3dVariants = cva(\n    [\n        'relative',\n        'border-3 border-brutal',\n        'rounded-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'transition-transform duration-200 ease-out',\n    ],\n    {\n        variants: {\n            shadow: {\n                default: 'shadow-brutal',\n                lg: 'shadow-brutal-lg',\n                xl: 'shadow-brutal-xl',\n            },\n        },\n        defaultVariants: {\n            shadow: 'default',\n        },\n    }\n)\n\nexport const card3dShadowVariants = cva(\n    [\n        'absolute inset-0',\n        'border-3 border-brutal',\n        'rounded-brutal',\n        'bg-brutal-fg',\n        'transition-transform duration-200 ease-out',\n        '-z-10',\n    ]\n)\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "composables/useReducedMotion.ts",
+      "content": "import { onMounted, onUnmounted, ref } from 'vue'\n\nexport function useReducedMotion() {\n    const prefersReduced = ref(false)\n    let mediaQuery: MediaQueryList | null = null\n\n    const onChange = (e: MediaQueryListEvent) => {\n        prefersReduced.value = e.matches\n    }\n\n    onMounted(() => {\n        if (typeof window !== 'undefined') {\n            mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n            prefersReduced.value = mediaQuery.matches\n            mediaQuery.addEventListener('change', onChange)\n        }\n    })\n\n    onUnmounted(() => {\n        mediaQuery?.removeEventListener('change', onChange)\n    })\n\n    return prefersReduced\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/card.json b/packages/registry/registry/card.json
index 726cb66..105ef3f 100644
--- a/packages/registry/registry/card.json
+++ b/packages/registry/registry/card.json
@@ -3,13 +3,43 @@
   "name": "card",
   "type": "registry:ui",
   "title": "Card",
-  "description": "A highly customizable neo-brutalist Card component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Card component built with Brutx design tokens for Vue 3.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/card.tsx",
-      "content": "import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst cardVariants = cva(\n    [\n        'border-3 border-brutal rounded-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'transition-all duration-150',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'shadow-brutal',\n                elevated: 'shadow-brutal-lg',\n                flat: 'shadow-none',\n                interactive: [\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'cursor-pointer',\n                ],\n                primary: 'shadow-[var(--brutal-shadow-offset-x,4px)_var(--brutal-shadow-offset-y,4px)_0px_0px_var(--brutal-primary,#FF6B6B)] border-[var(--brutal-primary,#FF6B6B)]',\n                secondary: 'shadow-[var(--brutal-shadow-offset-x,4px)_var(--brutal-shadow-offset-y,4px)_0px_0px_var(--brutal-secondary,#4ECDC4)] border-[var(--brutal-secondary,#4ECDC4)]',\n            },\n            padding: {\n                none: 'p-0',\n                sm: 'p-3',\n                default: 'p-5',\n                lg: 'p-8',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            padding: 'default',\n        },\n    }\n);\n\nexport interface CardProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n    ({ className, variant, padding, ...props }, ref) => (\n        <div ref={ref} className={cn(cardVariants({ variant, padding, className }))} {...props} />\n    )\n);\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n    ({ className, ...props }, ref) => (\n        <div ref={ref} className={cn('flex flex-col space-y-1.5 pb-4', className)} {...props} />\n    )\n);\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(\n    ({ className, ...props }, ref) => (\n        <h3\n            ref={ref}\n            className={cn('text-2xl font-black tracking-tight leading-none', className)}\n            {...props}\n        />\n    )\n);\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<\n    HTMLParagraphElement,\n    React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n    <p\n        ref={ref}\n        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}\n        {...props}\n    />\n));\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n    ({ className, ...props }, ref) => <div ref={ref} className={cn('', className)} {...props} />\n);\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n    ({ className, ...props }, ref) => (\n        <div\n            ref={ref}\n            className={cn(\n                'flex items-center pt-4 border-t-3 border-brutal',\n                className\n            )}\n            {...props}\n        />\n    )\n);\nCardFooter.displayName = 'CardFooter';\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants };\n",
+      "path": "components/ui/card/Card.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { cardVariants } from '@/components/ui/card/card-variants'\n\ntype CardVariantProps = VariantProps<typeof cardVariants>\n\ninterface CardProps {\n    variant?: NonNullable<CardVariantProps['variant']>\n    padding?: NonNullable<CardVariantProps['padding']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<CardProps>(), {\n    variant: 'default',\n    padding: 'default',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(cardVariants({ variant: props.variant, padding: props.padding }), props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/card/CardContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CardContentProps {\n    class?: string\n}\n\nconst props = defineProps<CardContentProps>()\n\nconst classes = computed(() => cn(props.class))\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/card/CardDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CardDescriptionProps {\n    class?: string\n}\n\nconst props = defineProps<CardDescriptionProps>()\n\nconst classes = computed(() =>\n    cn('text-sm text-brutal-muted-foreground font-medium', props.class)\n)\n</script>\n\n<template>\n    <p :class=\"classes\">\n        <slot />\n    </p>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/card/CardFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CardFooterProps {\n    class?: string\n}\n\nconst props = defineProps<CardFooterProps>()\n\nconst classes = computed(() =>\n    cn('flex items-center pt-4 border-t-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/card/CardHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CardHeaderProps {\n    class?: string\n}\n\nconst props = defineProps<CardHeaderProps>()\n\nconst classes = computed(() =>\n    cn('flex flex-col space-y-1.5 pb-4', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/card/CardTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CardTitleProps {\n    class?: string\n}\n\nconst props = defineProps<CardTitleProps>()\n\nconst classes = computed(() =>\n    cn('text-2xl font-black tracking-tight leading-none', props.class)\n)\n</script>\n\n<template>\n    <h3 :class=\"classes\">\n        <slot />\n    </h3>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/card/card-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const cardVariants = cva(\n    [\n        'border-3 border-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'transition-all duration-150',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'shadow-brutal',\n                elevated: 'shadow-brutal-lg',\n                flat: 'shadow-none',\n                interactive: [\n                    'shadow-brutal',\n                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'cursor-pointer',\n                ],\n                primary: 'shadow-brutal-primary border-[var(--brutal-primary)]',\n                secondary: 'shadow-brutal-secondary border-[var(--brutal-secondary)]',\n            },\n            padding: {\n                none: 'p-0',\n                sm: 'p-3',\n                default: 'p-5',\n                lg: 'p-8',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            padding: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -35,7 +65,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -65,7 +99,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -75,16 +112,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/carousel.json b/packages/registry/registry/carousel.json
new file mode 100644
index 0000000..9f672ad
--- /dev/null
+++ b/packages/registry/registry/carousel.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "title": "Carousel",
+  "description": "A highly customizable neo-brutalist Carousel component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "embla-carousel-vue",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/carousel/Carousel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, watch } from 'vue';\nimport useEmblaCarousel from 'embla-carousel-vue';\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next';\nimport { cn } from '@/lib/utils';\nimport { carouselRootVariants, carouselButtonVariants } from '@/components/ui/carousel/carousel-variants';\nimport { useLocale } from '@/composables/useLocale';\n\nconst { t } = useLocale();\n\nconst DEFAULT_AUTOPLAY_DELAY = 3000\n\ninterface CarouselProps {\n    loop?: boolean;\n    autoplay?: boolean;\n    autoplayDelay?: number;\n    showArrows?: boolean;\n    showDots?: boolean;\n    size?: 'sm' | 'md' | 'lg' | 'full' | 'auto';\n    class?: string;\n}\n\nconst props = withDefaults(defineProps<CarouselProps>(), {\n    loop: false,\n    autoplay: false,\n    autoplayDelay: DEFAULT_AUTOPLAY_DELAY,\n    showArrows: true,\n    showDots: true,\n    size: 'auto',\n});\n\nconst [emblaRef, emblaApi] = useEmblaCarousel({ loop: props.loop });\n\nconst selectedIndex = ref(0);\nconst scrollSnaps = ref<number[]>([]);\nlet autoplayTimer: ReturnType<typeof setInterval> | null = null;\n\nconst canScrollPrev = computed(() => props.loop || selectedIndex.value > 0);\nconst canScrollNext = computed(() => props.loop || selectedIndex.value < scrollSnaps.value.length - 1);\n\nfunction onInit() {\n    if (!emblaApi.value) return;\n    scrollSnaps.value = emblaApi.value.scrollSnapList();\n    selectedIndex.value = emblaApi.value.selectedScrollSnap();\n}\n\nfunction onSelect() {\n    if (!emblaApi.value) return;\n    selectedIndex.value = emblaApi.value.selectedScrollSnap();\n}\n\nfunction scrollPrev() {\n    emblaApi.value?.scrollPrev();\n}\n\nfunction scrollNext() {\n    emblaApi.value?.scrollNext();\n}\n\nfunction scrollTo(index: number) {\n    emblaApi.value?.scrollTo(index);\n}\n\nfunction startAutoplay() {\n    stopAutoplay();\n    if (!props.autoplay) return;\n    autoplayTimer = setInterval(() => {\n        if (emblaApi.value) {\n            if (!props.loop && selectedIndex.value === scrollSnaps.value.length - 1) {\n                emblaApi.value.scrollTo(0);\n            } else {\n                emblaApi.value.scrollNext();\n            }\n        }\n    }, props.autoplayDelay);\n}\n\nfunction stopAutoplay() {\n    if (autoplayTimer) {\n        clearInterval(autoplayTimer);\n        autoplayTimer = null;\n    }\n}\n\nonMounted(() => {\n    if (!emblaApi.value) return;\n    emblaApi.value.on('init', onInit);\n    emblaApi.value.on('select', onSelect);\n    emblaApi.value.on('reInit', onInit);\n    onInit();\n    startAutoplay();\n});\n\nwatch(() => props.autoplay, (val) => {\n    if (val) startAutoplay();\n    else stopAutoplay();\n});\n\nwatch(() => props.loop, () => {\n    if (emblaApi.value) emblaApi.value.reInit({ loop: props.loop });\n});\n\nwatch(() => props.autoplayDelay, () => {\n    if (props.autoplay) startAutoplay();\n});\n\nonUnmounted(() => {\n    stopAutoplay();\n});\n\nconst rootClass = computed(() =>\n    cn(carouselRootVariants({ size: props.size }), props.class)\n);\n\nconst prevButtonClass = computed(() =>\n    cn(carouselButtonVariants({ direction: 'prev' }))\n);\n\nconst nextButtonClass = computed(() =>\n    cn(carouselButtonVariants({ direction: 'next' }))\n);\n\nconst dotActiveClasses = cn(\n    'w-3 h-3 border-3 border-brutal rounded-brutal cursor-pointer transition-all duration-150',\n    'bg-brutal-primary shadow-brutal'\n)\n\nconst dotInactiveClasses = cn(\n    'w-3 h-3 border-3 border-brutal rounded-brutal cursor-pointer transition-all duration-150',\n    'bg-brutal-bg hover:bg-brutal-muted'\n);\n</script>\n\n<template>\n    <div :class=\"rootClass\" @mouseenter=\"stopAutoplay\" @mouseleave=\"startAutoplay\">\n        <div ref=\"emblaRef\" class=\"overflow-hidden h-full\">\n            <div class=\"flex h-full\">\n                <slot />\n            </div>\n        </div>\n\n        <button\n            v-if=\"showArrows\"\n            type=\"button\"\n            :class=\"prevButtonClass\"\n            :disabled=\"!canScrollPrev\"\n            :aria-label=\"t('carousel.previousSlide')\"\n            @click=\"scrollPrev\"\n        >\n            <ChevronLeft class=\"w-5 h-5\" />\n        </button>\n\n        <button\n            v-if=\"showArrows\"\n            type=\"button\"\n            :class=\"nextButtonClass\"\n            :disabled=\"!canScrollNext\"\n            :aria-label=\"t('carousel.nextSlide')\"\n            @click=\"scrollNext\"\n        >\n            <ChevronRight class=\"w-5 h-5\" />\n        </button>\n\n        <div\n            v-if=\"showDots && scrollSnaps.length > 1\"\n            class=\"absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 z-10\"\n        >\n            <button\n                v-for=\"(_, i) in scrollSnaps\"\n                :key=\"i\"\n                type=\"button\"\n                :aria-label=\"t('carousel.goToSlide', { index: i + 1 })\"\n                :class=\"i === selectedIndex ? dotActiveClasses : dotInactiveClasses\"\n                @click=\"scrollTo(i)\"\n            />\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/carousel/CarouselItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { cn } from '@/lib/utils';\n\ninterface CarouselItemProps {\n    class?: string;\n}\n\nconst props = withDefaults(defineProps<CarouselItemProps>(), {});\n\nconst itemClass = computed(() =>\n    cn('flex-none w-full h-full', props.class)\n);\n</script>\n\n<template>\n    <div :class=\"itemClass\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/carousel/carousel-variants.ts",
+      "content": "import { cva } from 'class-variance-authority';\n\nexport const carouselRootVariants = cva(\n    'relative overflow-hidden border-3 border-brutal shadow-brutal rounded-brutal',\n    {\n        variants: {\n            size: {\n                sm: 'h-48',\n                md: 'h-64',\n                lg: 'h-96',\n                full: 'h-full',\n                auto: '',\n            },\n        },\n        defaultVariants: {\n            size: 'auto',\n        },\n    }\n);\n\nexport const carouselButtonVariants = cva(\n    [\n        'absolute z-10 top-1/2 -translate-y-1/2',\n        'flex items-center justify-center',\n        'bg-brutal-bg border-3 border-brutal shadow-brutal rounded-brutal',\n        'w-10 h-10 cursor-pointer',\n        'transition-all duration-150',\n        'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-[calc(50%+2px)]',\n        'active:translate-y-[calc(-50%+var(--brutal-pressed-offset,2px))] active:shadow-none',\n        'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-brutal',\n    ].join(' '),\n    {\n        variants: {\n            direction: {\n                prev: 'left-2',\n                next: 'right-2',\n            },\n        },\n        defaultVariants: {\n            direction: 'prev',\n        },\n    }\n);\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/chart-section.json b/packages/registry/registry/chart-section.json
new file mode 100644
index 0000000..4e48e25
--- /dev/null
+++ b/packages/registry/registry/chart-section.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart-section",
+  "type": "registry:ui",
+  "title": "Chart Section",
+  "description": "A highly customizable neo-brutalist Chart Section component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "sketchy-chart",
+    "card",
+    "tabs"
+  ],
+  "files": [
+    {
+      "path": "components/ui/chart-section/ChartSection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { TabsRoot } from 'reka-ui'\nimport { BarChart3, TrendingUp, PieChart } from 'lucide-vue-next'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport SketchyChart from '@/components/ui/sketchy-chart/SketchyChart.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport TabsList from '@/components/ui/tabs/TabsList.vue'\nimport TabsTrigger from '@/components/ui/tabs/TabsTrigger.vue'\nimport TabsContent from '@/components/ui/tabs/TabsContent.vue'\n\nexport interface ChartDataPoint {\n    label: string\n    value: number\n}\n\ninterface ChartSectionProps {\n    title?: string\n    subtitle?: string\n    chartType?: 'bar' | 'line' | 'pie'\n    data?: ChartDataPoint[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ChartSectionProps>(), {\n    title: undefined,\n    subtitle: undefined,\n    chartType: 'bar',\n    data: () => [],\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('chartSection.defaultTitle'))\nconst resolvedSubtitle = computed(() => props.subtitle ?? t('chartSection.defaultSubtitle'))\nconst resolvedBar = computed(() => t('chartSection.bar'))\nconst resolvedLine = computed(() => t('chartSection.line'))\nconst resolvedPie = computed(() => t('chartSection.pie'))\n\nconst activeTab = ref<string>(props.chartType === 'pie' ? 'bar' : props.chartType)\n\nconst rootClasses = computed(() => cn('w-full max-w-4xl mx-auto', props.class))\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\">\n            <div class=\"mb-6\">\n                <h2 class=\"text-3xl font-black tracking-tight\">\n                    {{ resolvedTitle }}\n                </h2>\n                <p v-if=\"resolvedSubtitle\" class=\"mt-2 text-brutal-muted-foreground font-medium\">\n                    {{ resolvedSubtitle }}\n                </p>\n            </div>\n        </slot>\n\n        <slot>\n            <TabsRoot v-model=\"activeTab\" :default-value=\"chartType\">\n                <TabsList class=\"w-full\">\n                    <TabsTrigger value=\"bar\">\n                        <BarChart3 class=\"w-4 h-4 mr-2\" />\n                        {{ resolvedBar }}\n                    </TabsTrigger>\n                    <TabsTrigger value=\"line\">\n                        <TrendingUp class=\"w-4 h-4 mr-2\" />\n                        {{ resolvedLine }}\n                    </TabsTrigger>\n                    <TabsTrigger value=\"pie\">\n                        <PieChart class=\"w-4 h-4 mr-2\" />\n                        {{ resolvedPie }}\n                    </TabsTrigger>\n                </TabsList>\n\n                <TabsContent value=\"bar\">\n                    <Card variant=\"flat\" class=\"p-4\">\n                        <SketchyChart\n                            type=\"pie\"\n                            :data=\"data\"\n                        />\n                    </Card>\n                </TabsContent>\n\n                <TabsContent value=\"line\">\n                    <Card variant=\"flat\" class=\"p-4\">\n                        <SketchyChart\n                            type=\"line\"\n                            :data=\"data\"\n                        />\n                    </Card>\n                </TabsContent>\n\n                <TabsContent value=\"pie\">\n                    <Card variant=\"flat\" class=\"p-4\">\n                        <SketchyChart\n                            type=\"bar\"\n                            :data=\"data\"\n                        />\n                    </Card>\n                </TabsContent>\n            </TabsRoot>\n        </slot>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/chat-bubble.json b/packages/registry/registry/chat-bubble.json
new file mode 100644
index 0000000..8f2c6d3
--- /dev/null
+++ b/packages/registry/registry/chat-bubble.json
@@ -0,0 +1,108 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chat-bubble",
+  "type": "registry:ui",
+  "title": "Chat Bubble",
+  "description": "A highly customizable neo-brutalist Chat Bubble component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/chat-bubble/ChatBubble.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { cn } from '@/lib/utils';\nimport { chatBubbleVariants, chatAvatarVariants } from '@/components/ui/chat-bubble/chat-bubble-variants';\n\ninterface ChatMessage {\n    id: string;\n    content: string;\n    variant?: 'sent' | 'received' | 'system';\n    avatar?: string;\n    name?: string;\n    timestamp?: string;\n}\n\ninterface ChatBubbleProps {\n    message: ChatMessage;\n    showAvatar?: boolean;\n    class?: string;\n}\n\nconst props = withDefaults(defineProps<ChatBubbleProps>(), {\n    showAvatar: true,\n});\n\nconst isSent = computed(() => props.message.variant === 'sent');\nconst isSystem = computed(() => props.message.variant === 'system');\n\nconst wrapperClass = computed(() =>\n    cn(\n        'flex gap-2 w-full',\n        isSent.value ? 'flex-row-reverse' : 'flex-row',\n        isSystem.value ? 'justify-center' : '',\n    )\n);\n\nconst bubbleClass = computed(() =>\n    cn(chatBubbleVariants({ variant: props.message.variant ?? 'received' }), props.class)\n);\n\nconst avatarClass = computed(() => cn(chatAvatarVariants()));\n\nconst initials = computed(() => {\n    const name = props.message.name ?? '?';\n    return name.slice(0, 2).toUpperCase();\n});\n</script>\n\n<template>\n    <div :class=\"wrapperClass\">\n        <!-- Avatar -->\n        <div\n            v-if=\"showAvatar && !isSystem\"\n            :class=\"avatarClass\"\n            :title=\"message.name\"\n        >\n            <img\n                v-if=\"message.avatar\"\n                :src=\"message.avatar\"\n                :alt=\"message.name\"\n                class=\"w-full h-full object-cover rounded-brutal\"\n            />\n            <span v-else>{{ initials }}</span>\n        </div>\n\n        <!-- Content -->\n        <div :class=\"cn('flex flex-col gap-1', isSent ? 'items-end' : 'items-start')\">\n            <span v-if=\"message.name && !isSystem\" class=\"text-xs font-bold text-brutal-fg opacity-60 px-1\">\n                {{ message.name }}\n            </span>\n            <div :class=\"bubbleClass\">\n                <slot>{{ message.content }}</slot>\n            </div>\n            <span v-if=\"message.timestamp\" class=\"text-xs opacity-40 font-medium px-1\">\n                {{ message.timestamp }}\n            </span>\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/chat-bubble/chat-bubble-variants.ts",
+      "content": "import { cva } from 'class-variance-authority';\n\nexport const chatBubbleVariants = cva(\n    [\n        'relative max-w-[75%] px-4 py-2.5',\n        'border-3 border-brutal rounded-brutal',\n        'text-sm font-medium leading-relaxed',\n        'shadow-brutal',\n    ].join(' '),\n    {\n        variants: {\n            variant: {\n                sent: 'bg-brutal-primary text-brutal-fg ml-auto',\n                received: 'bg-brutal-bg text-brutal-fg mr-auto',\n                system: 'bg-brutal-muted text-brutal-fg mx-auto text-center text-xs italic border-dashed shadow-none',\n            },\n        },\n        defaultVariants: {\n            variant: 'received',\n        },\n    }\n);\n\nexport const chatAvatarVariants = cva(\n    [\n        'flex-shrink-0 w-8 h-8 rounded-brutal border-3 border-brutal',\n        'flex items-center justify-center font-bold text-xs',\n        'bg-brutal-secondary text-brutal-fg',\n    ].join(' ')\n);\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/checkbox.json b/packages/registry/registry/checkbox.json
index cb31023..8161013 100644
--- a/packages/registry/registry/checkbox.json
+++ b/packages/registry/registry/checkbox.json
@@ -3,16 +3,16 @@
   "name": "checkbox",
   "type": "registry:ui",
   "title": "Checkbox",
-  "description": "A highly customizable neo-brutalist Checkbox component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Checkbox component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-checkbox",
-    "lucide-react"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/checkbox.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Check } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst Checkbox = React.forwardRef<\n    React.ElementRef<typeof CheckboxPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n    <CheckboxPrimitive.Root\n        ref={ref}\n        className={cn(\n            'peer h-6 w-6 shrink-0',\n            'border-3 border-brutal',\n            'bg-white dark:bg-gray-800',\n            'flex items-center justify-center',\n            'transition-all duration-150',\n            'shadow-brutal-sm',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            'data-[state=checked]:bg-[#7FB069]',\n            className\n        )}\n        {...props}\n    >\n        <CheckboxPrimitive.Indicator\n            className={cn('flex items-center justify-center text-current')}\n        >\n            <Check className=\"h-4 w-4 stroke-[3] text-black dark:text-white\" />\n        </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox };\n",
+      "path": "components/ui/checkbox/Checkbox.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { CheckboxRoot, CheckboxIndicator } from 'reka-ui'\nimport { Check } from 'lucide-vue-next'\n\ninterface CheckboxProps {\n    class?: string\n    checked?: boolean\n    defaultChecked?: boolean\n    disabled?: boolean\n}\n\nconst props = defineProps<CheckboxProps>()\n\nconst emit = defineEmits<{\n    'update:checked': [value: boolean]\n}>()\n\nconst classes = computed(() =>\n    cn(\n        'peer h-6 w-6 shrink-0',\n        'border-3 border-brutal',\n        'bg-brutal-bg',\n        'flex items-center justify-center',\n        'transition-all duration-150',\n        'shadow-brutal-sm',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'data-[state=checked]:bg-brutal-success',\n        props.class\n    )\n)\n\nconst checkClasses = computed(() =>\n    cn('h-4 w-4 stroke-[3] text-brutal-fg')\n)\n</script>\n\n<template>\n    <CheckboxRoot\n        :class=\"classes\"\n        :checked=\"checked\"\n        :default-checked=\"defaultChecked\"\n        :disabled=\"disabled\"\n        @update:checked=\"emit('update:checked', $event)\"\n    >\n        <CheckboxIndicator class=\"flex items-center justify-center text-current\">\n            <Check :class=\"checkClasses\" />\n        </CheckboxIndicator>\n    </CheckboxRoot>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -38,7 +38,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -68,7 +72,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -78,16 +85,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/code-block.json b/packages/registry/registry/code-block.json
new file mode 100644
index 0000000..6b54c6c
--- /dev/null
+++ b/packages/registry/registry/code-block.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "code-block",
+  "type": "registry:ui",
+  "title": "Code Block",
+  "description": "A highly customizable neo-brutalist Code Block component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "copy-to-clipboard"
+  ],
+  "files": [
+    {
+      "path": "components/ui/code-block/CodeBlock.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport CopyToClipboard from '@/components/ui/copy-to-clipboard/CopyToClipboard.vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { codeBlockRootVariants, codeBlockHeaderVariants, codeBlockLanguageVariants, codeBlockBodyVariants, codeBlockLineNumbersVariants, codeBlockCopyButtonVariants } from './code-block-variants'\n\ninterface CodeBlockProps {\n    code: string\n    language?: string\n    filename?: string\n    showLineNumbers?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<CodeBlockProps>(), {\n    language: 'plaintext',\n    filename: '',\n    showLineNumbers: false,\n    class: '',\n})\n\nconst lines = computed(() => {\n    return props.code.split('\\n')\n})\n\nconst { t } = useLocale()\n\nconst rootClasses = computed(() =>\n    cn(codeBlockRootVariants(), props.class)\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div :class=\"codeBlockHeaderVariants()\">\n            <div class=\"flex items-center gap-2\">\n                <span :class=\"codeBlockLanguageVariants()\">\n                    {{ language }}\n                </span>\n                <span v-if=\"filename\" class=\"text-brutal-fg/80 font-black\">\n                    {{ filename }}\n                </span>\n            </div>\n            <CopyToClipboard\n                :text=\"code\"\n                :class=\"codeBlockCopyButtonVariants()\"\n            >\n                <template #default=\"{ copied }\">\n                    <span>{{ copied ? t('codeBlock.copied') : t('codeBlock.copy') }}</span>\n                </template>\n            </CopyToClipboard>\n        </div>\n\n        <div :class=\"codeBlockBodyVariants()\">\n            <div\n                v-if=\"showLineNumbers\"\n                :class=\"codeBlockLineNumbersVariants()\"\n            >\n                <span v-for=\"(_, i) in lines\" :key=\"i\">{{ i + 1 }}</span>\n            </div>\n\n            <pre class=\"flex-1 min-w-0 m-0\"><code class=\"block whitespace-pre font-bold\"><slot v-if=\"$slots.default\"></slot><template v-else>{{ code }}</template></code></pre>\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/combobox.json b/packages/registry/registry/combobox.json
index 1b55d7a..9f7af24 100644
--- a/packages/registry/registry/combobox.json
+++ b/packages/registry/registry/combobox.json
@@ -3,11 +3,10 @@
   "name": "combobox",
   "type": "registry:ui",
   "title": "Combobox",
-  "description": "A highly customizable neo-brutalist Combobox component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Combobox component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "cmdk",
-    "@radix-ui/react-popover",
-    "lucide-react"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "button",
@@ -16,8 +15,18 @@
   ],
   "files": [
     {
-      "path": "components/ui/combobox.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport {\n    Command,\n    CommandEmpty,\n    CommandGroup,\n    CommandInput,\n    CommandItem,\n    CommandList,\n} from '@/components/ui/command';\n\nexport interface ComboboxOption {\n    value: string;\n    label: string;\n    disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n    options: ComboboxOption[];\n    value?: string;\n    onValueChange?: (value: string) => void;\n    placeholder?: string;\n    searchPlaceholder?: string;\n    emptyText?: string;\n    className?: string;\n    disabled?: boolean;\n}\n\nfunction Combobox({\n    options,\n    value,\n    onValueChange,\n    placeholder = 'Select option...',\n    searchPlaceholder = 'Search...',\n    emptyText = 'No results found.',\n    className,\n    disabled = false,\n}: ComboboxProps) {\n    const [open, setOpen] = React.useState(false);\n\n    const selectedOption = options.find((option) => option.value === value);\n\n    return (\n        <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n                <Button\n                    variant=\"outline\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    disabled={disabled}\n                    className={cn(\n                        'w-full justify-between font-semibold',\n                        !value && 'text-gray-500',\n                        className\n                    )}\n                >\n                    {selectedOption ? selectedOption.label : placeholder}\n                    <ChevronsUpDownIcon className=\"ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]\" />\n                </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0\" align=\"start\">\n                <Command>\n                    <CommandInput placeholder={searchPlaceholder} />\n                    <CommandList>\n                        <CommandEmpty>{emptyText}</CommandEmpty>\n                        <CommandGroup>\n                            {options.map((option) => (\n                                <CommandItem\n                                    key={option.value}\n                                    value={option.value}\n                                    disabled={option.disabled}\n                                    onSelect={(currentValue) => {\n                                        onValueChange?.(currentValue === value ? '' : currentValue);\n                                        setOpen(false);\n                                    }}\n                                >\n                                    <CheckIcon\n                                        className={cn(\n                                            'mr-2 h-4 w-4 stroke-[3]',\n                                            value === option.value ? 'opacity-100' : 'opacity-0'\n                                        )}\n                                    />\n                                    {option.label}\n                                </CommandItem>\n                            ))}\n                        </CommandGroup>\n                    </CommandList>\n                </Command>\n            </PopoverContent>\n        </Popover>\n    );\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxMultiProps {\n    options: ComboboxOption[];\n    value?: string[];\n    onValueChange?: (value: string[]) => void;\n    placeholder?: string;\n    searchPlaceholder?: string;\n    emptyText?: string;\n    className?: string;\n    disabled?: boolean;\n    maxDisplay?: number;\n}\n\nfunction ComboboxMulti({\n    options,\n    value = [],\n    onValueChange,\n    placeholder = 'Select options...',\n    searchPlaceholder = 'Search...',\n    emptyText = 'No results found.',\n    className,\n    disabled = false,\n    maxDisplay = 3,\n}: ComboboxMultiProps) {\n    const [open, setOpen] = React.useState(false);\n\n    const selectedOptions = options.filter((option) => value.includes(option.value));\n\n    const displayText = React.useMemo(() => {\n        if (selectedOptions.length === 0) return placeholder;\n        if (selectedOptions.length <= maxDisplay) {\n            return selectedOptions.map((o) => o.label).join(', ');\n        }\n        return `${selectedOptions.length} selected`;\n    }, [selectedOptions, placeholder, maxDisplay]);\n\n    const handleSelect = (optionValue: string) => {\n        const newValue = value.includes(optionValue)\n            ? value.filter((v) => v !== optionValue)\n            : [...value, optionValue];\n        onValueChange?.(newValue);\n    };\n\n    return (\n        <Popover open={open} onOpenChange={setOpen}>\n            <PopoverTrigger asChild>\n                <Button\n                    variant=\"outline\"\n                    role=\"combobox\"\n                    aria-expanded={open}\n                    disabled={disabled}\n                    className={cn(\n                        'w-full justify-between font-semibold',\n                        selectedOptions.length === 0 && 'text-gray-500',\n                        className\n                    )}\n                >\n                    <span className=\"truncate\">{displayText}</span>\n                    <ChevronsUpDownIcon className=\"ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]\" />\n                </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0\" align=\"start\">\n                <Command>\n                    <CommandInput placeholder={searchPlaceholder} />\n                    <CommandList>\n                        <CommandEmpty>{emptyText}</CommandEmpty>\n                        <CommandGroup>\n                            {options.map((option) => (\n                                <CommandItem\n                                    key={option.value}\n                                    value={option.value}\n                                    disabled={option.disabled}\n                                    onSelect={() => handleSelect(option.value)}\n                                >\n                                    <div\n                                        className={cn(\n                                            'mr-2 flex h-4 w-4 items-center justify-center',\n                                            'border-2 border-brutal',\n                                            value.includes(option.value)\n                                                ? 'bg-[#4ECDC4]'\n                                                : 'bg-white dark:bg-gray-900'\n                                        )}\n                                    >\n                                        {value.includes(option.value) && (\n                                            <CheckIcon className=\"h-3 w-3 stroke-[3] text-black\" />\n                                        )}\n                                    </div>\n                                    {option.label}\n                                </CommandItem>\n                            ))}\n                        </CommandGroup>\n                    </CommandList>\n                </Command>\n            </PopoverContent>\n        </Popover>\n    );\n}\nComboboxMulti.displayName = 'ComboboxMulti';\n\nexport { Combobox, ComboboxMulti };\n",
+      "path": "components/ui/combobox/Combobox.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button/button-variants'\nimport { PopoverRoot, PopoverTrigger } from 'reka-ui'\nimport PopoverContent from '@/components/ui/popover/PopoverContent.vue'\nimport Command from '@/components/ui/command/Command.vue'\nimport CommandInput from '@/components/ui/command/CommandInput.vue'\nimport CommandList from '@/components/ui/command/CommandList.vue'\nimport CommandEmpty from '@/components/ui/command/CommandEmpty.vue'\nimport CommandGroup from '@/components/ui/command/CommandGroup.vue'\nimport CommandItem from '@/components/ui/command/CommandItem.vue'\nimport { useLocale } from '@/composables/useLocale'\n\nimport { type ComboboxOption } from '@/components/ui/combobox/combobox-types'\n\ninterface ComboboxProps {\n    options: ComboboxOption[]\n    modelValue?: string\n    placeholder?: string\n    searchPlaceholder?: string\n    emptyText?: string\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ComboboxProps>(), {\n    modelValue: undefined,\n    placeholder: undefined,\n    searchPlaceholder: undefined,\n    emptyText: undefined,\n    disabled: false,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('combobox.placeholder'))\nconst resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t('combobox.searchPlaceholder'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('combobox.emptyText'))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | undefined] }>()\n\nconst open = ref(false)\nconst searchQuery = ref('')\n\nconst selectedOption = computed(() =>\n    props.options.find((option) => option.value === props.modelValue)\n)\n\nconst filteredOptions = computed(() => {\n    if (!searchQuery.value) return props.options\n    const query = searchQuery.value.toLowerCase()\n    return props.options.filter((option) =>\n        option.label.toLowerCase().includes(query)\n    )\n})\n\nconst triggerClasses = computed(() =>\n    cn(\n        buttonVariants({ variant: 'outline' }),\n        'w-full justify-between font-semibold',\n        !props.modelValue && 'text-brutal-muted-foreground',\n        props.class\n    )\n)\n\nfunction handleSelect(value: string) {\n    emit('update:modelValue', value === props.modelValue ? undefined : value)\n    open.value = false\n    searchQuery.value = ''\n}\n\nconst checkSelectedClasses = cn('mr-2 h-4 w-4 stroke-[3]', 'opacity-100')\nconst checkUnselectedClasses = cn('mr-2 h-4 w-4 stroke-[3]', 'opacity-0')\n</script>\n\n<template>\n    <PopoverRoot v-model:open=\"open\">\n        <PopoverTrigger as-child :disabled=\"disabled\">\n            <button\n                type=\"button\"\n                role=\"combobox\"\n                :aria-expanded=\"open\"\n                aria-haspopup=\"listbox\"\n                :class=\"triggerClasses\"\n            >\n                <span>{{ selectedOption ? selectedOption.label : resolvedPlaceholder }}</span>\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]\" />\n            </button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-[var(--reka-popover-trigger-width)] p-0\" align=\"start\">\n            <Command>\n                <CommandInput v-model=\"searchQuery\" :placeholder=\"resolvedSearchPlaceholder\" />\n                <CommandList>\n                    <CommandEmpty>{{ resolvedEmptyText }}</CommandEmpty>\n                    <CommandGroup>\n                        <CommandItem\n                            v-for=\"option in filteredOptions\"\n                            :key=\"option.value\"\n                            :value=\"option.value\"\n                            :disabled=\"option.disabled\"\n                            @select=\"handleSelect\"\n                        >\n                            <Check\n                                :class=\"props.modelValue === option.value ? checkSelectedClasses : checkUnselectedClasses\"\n                            />\n                            {{ option.label }}\n                        </CommandItem>\n                    </CommandGroup>\n                </CommandList>\n            </Command>\n        </PopoverContent>\n    </PopoverRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/combobox/ComboboxMulti.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/components/ui/button/button-variants'\nimport { PopoverRoot, PopoverTrigger } from 'reka-ui'\nimport PopoverContent from '@/components/ui/popover/PopoverContent.vue'\nimport Command from '@/components/ui/command/Command.vue'\nimport CommandInput from '@/components/ui/command/CommandInput.vue'\nimport CommandList from '@/components/ui/command/CommandList.vue'\nimport CommandEmpty from '@/components/ui/command/CommandEmpty.vue'\nimport CommandGroup from '@/components/ui/command/CommandGroup.vue'\nimport CommandItem from '@/components/ui/command/CommandItem.vue'\nimport { useLocale } from '@/composables/useLocale'\nimport { type ComboboxOption } from '@/components/ui/combobox/combobox-types'\n\ninterface ComboboxMultiProps {\n    options: ComboboxOption[]\n    modelValue?: string[]\n    placeholder?: string\n    searchPlaceholder?: string\n    emptyText?: string\n    disabled?: boolean\n    maxDisplay?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ComboboxMultiProps>(), {\n    modelValue: () => [],\n    placeholder: undefined,\n    searchPlaceholder: undefined,\n    emptyText: undefined,\n    disabled: false,\n    maxDisplay: 3,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('combobox.multiPlaceholder'))\nconst resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t('combobox.searchPlaceholder'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('combobox.emptyText'))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string[]] }>()\n\nconst open = ref(false)\nconst searchQuery = ref('')\n\nconst selectedOptions = computed(() =>\n    props.options.filter((option) => props.modelValue.includes(option.value))\n)\n\nconst displayText = computed(() => {\n    if (selectedOptions.value.length === 0) return resolvedPlaceholder.value\n    if (selectedOptions.value.length <= props.maxDisplay) {\n        return selectedOptions.value.map((o) => o.label).join(', ')\n    }\n    return t('combobox.selectedCount', { count: selectedOptions.value.length })\n})\n\nconst filteredOptions = computed(() => {\n    if (!searchQuery.value) return props.options\n    const query = searchQuery.value.toLowerCase()\n    return props.options.filter((option) =>\n        option.label.toLowerCase().includes(query)\n    )\n})\n\nconst triggerClasses = computed(() =>\n    cn(\n        buttonVariants({ variant: 'outline' }),\n        'w-full justify-between font-semibold',\n        selectedOptions.value.length === 0 && 'text-brutal-muted-foreground',\n        props.class\n    )\n)\n\nfunction handleSelect(optionValue: string) {\n    const newValue = props.modelValue.includes(optionValue)\n        ? props.modelValue.filter((v) => v !== optionValue)\n        : [...props.modelValue, optionValue]\n    emit('update:modelValue', newValue)\n}\n\nconst checkboxBaseClasses = cn('mr-2 flex h-4 w-4 items-center justify-center', 'border-3 border-brutal')\nconst checkboxSelectedClasses = cn(checkboxBaseClasses, 'bg-brutal-secondary')\nconst checkboxUnselectedClasses = cn(checkboxBaseClasses, 'bg-brutal-bg')\n</script>\n\n<template>\n    <PopoverRoot v-model:open=\"open\">\n        <PopoverTrigger as-child :disabled=\"disabled\">\n            <button\n                type=\"button\"\n                role=\"combobox\"\n                :aria-expanded=\"open\"\n                :class=\"triggerClasses\"\n            >\n                <span class=\"truncate\">{{ displayText }}</span>\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]\" />\n            </button>\n        </PopoverTrigger>\n        <PopoverContent class=\"w-[var(--reka-popover-trigger-width)] p-0\" align=\"start\">\n            <Command>\n                <CommandInput v-model=\"searchQuery\" :placeholder=\"resolvedSearchPlaceholder\" />\n                <CommandList>\n                    <CommandEmpty>{{ resolvedEmptyText }}</CommandEmpty>\n                    <CommandGroup>\n                        <CommandItem\n                            v-for=\"option in filteredOptions\"\n                            :key=\"option.value\"\n                            :value=\"option.value\"\n                            :disabled=\"option.disabled\"\n                            @select=\"handleSelect\"\n                        >\n                            <div\n                                :class=\"props.modelValue.includes(option.value) ? checkboxSelectedClasses : checkboxUnselectedClasses\"\n                            >\n                                <Check v-if=\"props.modelValue.includes(option.value)\" class=\"h-3 w-3 stroke-[3] text-brutal-fg\" />\n                            </div>\n                            {{ option.label }}\n                        </CommandItem>\n                    </CommandGroup>\n                </CommandList>\n            </Command>\n        </PopoverContent>\n    </PopoverRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/combobox/combobox-types.ts",
+      "content": "export interface ComboboxOption {\n    value: string\n    label: string\n    disabled?: boolean\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -43,7 +52,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -73,7 +86,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -83,16 +99,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/command.json b/packages/registry/registry/command.json
index 46cb5f3..963ec77 100644
--- a/packages/registry/registry/command.json
+++ b/packages/registry/registry/command.json
@@ -3,18 +3,55 @@
   "name": "command",
   "type": "registry:ui",
   "title": "Command",
-  "description": "A highly customizable neo-brutalist Command component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Command component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "cmdk",
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "dialog"
+    "reka-ui"
   ],
+  "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/command.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { SearchIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n    return (\n        <CommandPrimitive\n            data-slot=\"command\"\n            className={cn(\n                'flex h-full w-full flex-col overflow-hidden',\n                'bg-white dark:bg-gray-900',\n                'text-black dark:text-white',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction CommandDialog({\n    title = 'Command Palette',\n    description = 'Search for a command to run...',\n    children,\n    className,\n    showCloseButton = true,\n    ...props\n}: React.ComponentProps<typeof Dialog> & {\n    title?: string;\n    description?: string;\n    className?: string;\n    showCloseButton?: boolean;\n}) {\n    return (\n        <Dialog {...props}>\n            <DialogContent\n                className={cn('overflow-hidden p-0', className)}\n                showCloseButton={showCloseButton}\n            >\n                <DialogHeader className=\"sr-only\">\n                    <DialogTitle>{title}</DialogTitle>\n                    <DialogDescription>{description}</DialogDescription>\n                </DialogHeader>\n                <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-black [&_[cmdk-group-heading]]:text-gray-600 dark:[&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n                    {children}\n                </Command>\n            </DialogContent>\n        </Dialog>\n    );\n}\n\nfunction CommandInput({\n    className,\n    ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n    return (\n        <div\n            data-slot=\"command-input-wrapper\"\n            className={cn(\n                'flex h-12 items-center gap-3 px-4',\n                'border-b-3 border-brutal',\n                'bg-[#FFE66D]'\n            )}\n        >\n            <SearchIcon className=\"size-5 shrink-0 stroke-[3] text-black\" />\n            <CommandPrimitive.Input\n                data-slot=\"command-input\"\n                className={cn(\n                    'flex h-full w-full bg-transparent py-3',\n                    'text-sm font-bold text-black placeholder:text-black/60',\n                    'outline-none',\n                    'disabled:cursor-not-allowed disabled:opacity-50',\n                    className\n                )}\n                {...props}\n            />\n        </div>\n    );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n    return (\n        <CommandPrimitive.List\n            data-slot=\"command-list\"\n            className={cn(\n                'max-h-[300px] overflow-x-hidden overflow-y-auto scroll-py-1',\n                'p-2',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction CommandEmpty({\n    className,\n    ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n    return (\n        <CommandPrimitive.Empty\n            data-slot=\"command-empty\"\n            className={cn(\n                'py-8 text-center text-sm font-bold',\n                'text-gray-500 dark:text-gray-400',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction CommandGroup({\n    className,\n    ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n    return (\n        <CommandPrimitive.Group\n            data-slot=\"command-group\"\n            className={cn(\n                'overflow-hidden p-1',\n                '[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2',\n                '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-black [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider',\n                '[&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction CommandSeparator({\n    className,\n    ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n    return (\n        <CommandPrimitive.Separator\n            data-slot=\"command-separator\"\n            className={cn('-mx-1 my-2 h-[3px]', 'bg-[var(--brutal-border-color,#000)]', className)}\n            {...props}\n        />\n    );\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n    return (\n        <CommandPrimitive.Item\n            data-slot=\"command-item\"\n            className={cn(\n                'relative flex cursor-pointer items-center gap-3 px-3 py-2',\n                'text-sm font-semibold',\n                'select-none outline-none',\n                'border-2 border-transparent',\n                'data-[selected=true]:bg-[#4ECDC4] data-[selected=true]:text-black',\n                'data-[selected=true]:border-brutal data-[selected=true]:font-black',\n                'data-[selected=true]:shadow-brutal-sm',\n                'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n                '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n                \"[&_svg:not([class*='size-'])]:size-5\",\n                \"[&_svg:not([class*='text-'])]:text-current\",\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n    return (\n        <span\n            data-slot=\"command-shortcut\"\n            className={cn(\n                'ml-auto text-xs font-black tracking-wider',\n                'px-2 py-1',\n                'bg-gray-100 dark:bg-gray-800',\n                'border-2 border-brutal',\n                'text-gray-600 dark:text-gray-300',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport {\n    Command,\n    CommandDialog,\n    CommandInput,\n    CommandList,\n    CommandEmpty,\n    CommandGroup,\n    CommandItem,\n    CommandShortcut,\n    CommandSeparator,\n};\n",
+      "path": "components/ui/command/Command.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CommandProps {\n    class?: string\n}\n\nconst props = defineProps<CommandProps>()\n\nconst classes = computed(() =>\n    cn(\n        'flex h-full w-full flex-col overflow-hidden',\n        'bg-brutal-bg text-brutal-fg',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\" role=\"combobox\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandDialog.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Command from '@/components/ui/command/Command.vue'\n\ninterface CommandDialogProps {\n    open?: boolean\n    title?: string\n    description?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<CommandDialogProps>(), {\n    open: false,\n    title: undefined,\n    description: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('command.dialogTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('command.dialogDescription'))\n\nconst emit = defineEmits<{ 'update:open': [value: boolean] }>()\n\nconst overlayClasses = computed(() =>\n    cn(\n        'fixed inset-0 z-50 bg-brutal-overlay',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n    )\n)\n\nconst contentClasses = computed(() =>\n    cn(\n        'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n        'w-full max-w-lg overflow-hidden p-0',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal-xl rounded-brutal',\n        'duration-200',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DialogRoot :open=\"props.open\" @update:open=\"emit('update:open', $event)\">\n        <DialogPortal>\n            <DialogOverlay :class=\"overlayClasses\" />\n            <DialogContent :class=\"contentClasses\">\n                <div class=\"sr-only\">\n                    <DialogTitle>{{ resolvedTitle }}</DialogTitle>\n                    <DialogDescription>{{ resolvedDescription }}</DialogDescription>\n                </div>\n                <Command class=\"[&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:font-black [&_[data-slot=command-group-heading]]:text-brutal-muted-foreground [&_[data-slot=command-group]]:px-2 [&_[data-slot=command-input]]:h-12 [&_[data-slot=command-item]]:px-3 [&_[data-slot=command-item]]:py-3\">\n                    <slot />\n                </Command>\n            </DialogContent>\n        </DialogPortal>\n    </DialogRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\n\ninterface CommandEmptyProps {\n    class?: string\n}\n\nconst props = defineProps<CommandEmptyProps>()\n\nconst { t } = useLocale()\n\nconst classes = computed(() =>\n    cn(\n        'py-8 text-center text-sm font-bold',\n        'text-brutal-muted-foreground',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <p :class=\"classes\" data-slot=\"command-empty\">\n        <slot>{{ t('command.emptyText') }}</slot>\n    </p>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CommandGroupProps {\n    heading?: string\n    class?: string\n}\n\nconst props = defineProps<CommandGroupProps>()\n\nconst classes = computed(() =>\n    cn(\n        'overflow-hidden p-1',\n        props.class\n    )\n)\n\nconst headingClasses = computed(() =>\n    cn(\n        'px-3 py-2 text-xs font-black uppercase tracking-wider',\n        'text-brutal-muted-foreground'\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\" data-slot=\"command-group\" role=\"group\">\n        <div v-if=\"heading\" :class=\"headingClasses\" data-slot=\"command-group-heading\">\n            {{ heading }}\n        </div>\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\n\ninterface CommandInputProps {\n    modelValue?: string\n    placeholder?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<CommandInputProps>(), {\n    modelValue: undefined,\n    placeholder: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('command.placeholder'))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\nconst wrapperClasses = computed(() =>\n    cn(\n        'flex h-12 items-center gap-3 px-4',\n        'border-b-3 border-brutal',\n        'bg-brutal-accent'\n    )\n)\n\nconst inputClasses = computed(() =>\n    cn(\n        'flex h-full w-full bg-transparent py-3',\n        'text-sm font-bold text-brutal-fg placeholder:text-brutal-placeholder',\n        'outline-none',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"wrapperClasses\" data-slot=\"command-input\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"size-5 shrink-0 stroke-[3] text-brutal-fg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\" />\n            <path d=\"m21 21-4.3-4.3\" />\n        </svg>\n        <input\n            type=\"text\"\n            :value=\"modelValue\"\n            :placeholder=\"resolvedPlaceholder\"\n            :class=\"inputClasses\"\n            @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n        >\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CommandItemProps {\n    value: string\n    disabled?: boolean\n    class?: string\n}\n\nconst props = defineProps<CommandItemProps>()\n\nconst emit = defineEmits<{ select: [value: string] }>()\n\nconst isSelected = ref(false)\n\nconst classes = computed(() =>\n    cn(\n        'relative flex cursor-pointer items-center gap-3 px-3 py-2',\n        'text-sm font-semibold',\n        'select-none outline-none',\n        'border-3 border-transparent',\n        'data-[selected=true]:bg-brutal-secondary data-[selected=true]:text-brutal-fg',\n        'data-[selected=true]:border-brutal data-[selected=true]:font-black',\n        'data-[selected=true]:shadow-brutal-sm',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        props.class\n    )\n)\n\nfunction handleMouseEnter() {\n    isSelected.value = true\n}\n\nfunction handleMouseLeave() {\n    isSelected.value = false\n}\n\nfunction handleClick() {\n    if (!props.disabled) {\n        emit('select', props.value)\n    }\n}\n</script>\n\n<template>\n    <div\n        :class=\"classes\"\n        role=\"option\"\n        :aria-selected=\"isSelected\"\n        :aria-disabled=\"disabled || undefined\"\n        data-slot=\"command-item\"\n        :data-selected=\"isSelected\"\n        :data-disabled=\"disabled\"\n        tabindex=\"-1\"\n        @mouseenter=\"handleMouseEnter\"\n        @mouseleave=\"handleMouseLeave\"\n        @click=\"handleClick\"\n        @keydown.enter=\"handleClick\"\n    >\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CommandListProps {\n    class?: string\n}\n\nconst props = defineProps<CommandListProps>()\n\nconst classes = computed(() =>\n    cn(\n        'max-h-80 overflow-x-hidden overflow-y-auto scroll-py-1',\n        'p-2',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\" role=\"listbox\" data-slot=\"command-list\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CommandSeparatorProps {\n    class?: string\n}\n\nconst props = defineProps<CommandSeparatorProps>()\n\nconst classes = computed(() =>\n    cn('-mx-1 my-2 h-[3px] bg-brutal-fg', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\" role=\"separator\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/command/CommandShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface CommandShortcutProps {\n    class?: string\n}\n\nconst props = defineProps<CommandShortcutProps>()\n\nconst classes = computed(() =>\n    cn(\n        'ml-auto text-xs font-black tracking-wider',\n        'px-2 py-1',\n        'bg-brutal-muted',\n        'border-3 border-brutal',\n        'text-brutal-muted-foreground',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <span :class=\"classes\" data-slot=\"command-shortcut\">\n        <slot />\n    </span>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -40,7 +77,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -70,7 +111,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -80,16 +124,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/cookie-consent.json b/packages/registry/registry/cookie-consent.json
new file mode 100644
index 0000000..ff074bc
--- /dev/null
+++ b/packages/registry/registry/cookie-consent.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cookie-consent",
+  "type": "registry:ui",
+  "title": "Cookie Consent",
+  "description": "A highly customizable neo-brutalist Cookie Consent component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "components/ui/cookie-consent/CookieConsent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Cookie } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport Button from '@/components/ui/button/Button.vue'\n\ninterface CookieConsentProps {\n    title?: string\n    description?: string\n    acceptText?: string\n    declineText?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<CookieConsentProps>(), {\n    title: undefined,\n    description: undefined,\n    acceptText: undefined,\n    declineText: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    accept: []\n    decline: []\n}>()\n\nconst rootClasses = computed(() =>\n    cn(\n        'fixed bottom-0 left-0 right-0 z-50 p-4',\n        props.class\n    )\n)\n\nconst cardClasses = computed(() =>\n    cn(\n        'mx-auto w-full max-w-4xl',\n        'border-3 border-brutal shadow-brutal-lg',\n    )\n)\n\nconst resolvedTitle = computed(() => props.title ?? t('cookieConsent.defaultTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('cookieConsent.defaultDescription'))\nconst resolvedAcceptText = computed(() => props.acceptText ?? t('cookieConsent.defaultAcceptText'))\nconst resolvedDeclineText = computed(() => props.declineText ?? t('cookieConsent.defaultDeclineText'))\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <Card :class=\"cardClasses\" variant=\"default\">\n            <CardContent class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n                <div class=\"flex items-start gap-3\">\n                    <Cookie class=\"h-6 w-6 shrink-0 stroke-[2.5] mt-0.5\" />\n                    <div>\n                        <h3 class=\"text-base font-black tracking-tight\">\n{{ resolvedTitle }}\n</h3>\n                        <p class=\"mt-1 text-sm text-brutal-muted-foreground font-medium\">\n{{ resolvedDescription }}\n</p>\n                    </div>\n                </div>\n                <div class=\"flex flex-col gap-2 sm:flex-row sm:shrink-0\">\n                    <Button variant=\"outline\" size=\"sm\" @click=\"emit('decline')\">\n                        {{ resolvedDeclineText }}\n                    </Button>\n                    <Button variant=\"primary\" size=\"sm\" @click=\"emit('accept')\">\n                        {{ resolvedAcceptText }}\n                    </Button>\n                </div>\n                <slot name=\"actions\" />\n            </CardContent>\n        </Card>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/copy-to-clipboard.json b/packages/registry/registry/copy-to-clipboard.json
new file mode 100644
index 0000000..72bfb60
--- /dev/null
+++ b/packages/registry/registry/copy-to-clipboard.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "copy-to-clipboard",
+  "type": "registry:ui",
+  "title": "Copy To Clipboard",
+  "description": "A highly customizable neo-brutalist Copy To Clipboard component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/copy-to-clipboard/CopyToClipboard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Check, Copy } from 'lucide-vue-next'\nimport { useClipboard } from '@/composables/useClipboard'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport { copyToClipboardVariants } from './copy-to-clipboard-variants'\n\nconst DEFAULT_COPY_DURATION = 2000\n\ninterface CopyToClipboardProps {\n    text: string\n    duration?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<CopyToClipboardProps>(), {\n    duration: DEFAULT_COPY_DURATION,\n    class: '',\n})\n\nconst { t } = useLocale()\nconst { copy, copied, isSupported } = useClipboard({ duration: props.duration })\n\nconst handleCopy = () => {\n    if (isSupported) {\n        copy(props.text)\n    }\n}\n\nconst classes = computed(() =>\n    cn(\n        copyToClipboardVariants({ state: copied.value ? 'copied' : 'idle' }),\n        props.class\n    )\n)\n</script>\n\n<template>\n    <button\n        type=\"button\"\n        :disabled=\"!isSupported\"\n        @click=\"handleCopy\"\n        :class=\"classes\"\n    >\n        <slot :copied=\"copied\">\n            <template v-if=\"copied\">\n                <Check class=\"h-4 w-4 stroke-[3]\" />\n                <span>{{ t('copyToClipboard.copied') }}</span>\n            </template>\n            <template v-else>\n                <Copy class=\"h-4 w-4 stroke-[3]\" />\n                <span>{{ t('copyToClipboard.copy') }}</span>\n            </template>\n        </slot>\n    </button>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "composables/useClipboard.ts",
+      "content": "import { ref, onUnmounted } from 'vue'\n\nexport function useClipboard(options: { duration?: number } = {}) {\n    const duration = options.duration ?? 2000\n    const copied = ref(false)\n    const isSupported = ref(typeof navigator !== 'undefined' && !!navigator.clipboard?.writeText)\n\n    let timeoutId: number | null = null\n\n    onUnmounted(() => {\n        if (timeoutId) clearTimeout(timeoutId)\n    })\n\n    async function copy(text: string) {\n        if (!isSupported.value) return false\n\n        try {\n            await navigator.clipboard.writeText(text)\n            copied.value = true\n\n            if (timeoutId) clearTimeout(timeoutId)\n            timeoutId = window.setTimeout(() => {\n                copied.value = false\n            }, duration)\n\n            return true\n        } catch (err) {\n            console.error('Failed to copy text: ', err)\n            return false\n        }\n    }\n\n    return {\n        copy,\n        copied,\n        isSupported,\n    }\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/counter.json b/packages/registry/registry/counter.json
new file mode 100644
index 0000000..7e0a99e
--- /dev/null
+++ b/packages/registry/registry/counter.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "counter",
+  "type": "registry:ui",
+  "title": "Counter",
+  "description": "A highly customizable neo-brutalist Counter component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/counter/Counter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { counterVariants } from '@/components/ui/counter/counter-variants';\n\nconst DEFAULT_COUNTER_DURATION = 2000\n\ntype CounterVariantProps = VariantProps<typeof counterVariants>;\n\ninterface CounterProps {\n    to: number;\n    from?: number;\n    duration?: number;\n    decimals?: number;\n    prefix?: string;\n    suffix?: string;\n    separator?: string;\n    easing?: 'linear' | 'ease-out' | 'ease-in-out';\n    autoStart?: boolean;\n    size?: NonNullable<CounterVariantProps['size']>;\n    class?: string;\n}\n\nconst props = withDefaults(defineProps<CounterProps>(), {\n    from: 0,\n    duration: DEFAULT_COUNTER_DURATION,\n    decimals: 0,\n    prefix: '',\n    suffix: '',\n    separator: ',',\n    easing: 'ease-out',\n    autoStart: true,\n    size: 'md',\n});\n\nconst emit = defineEmits<{\n    complete: [];\n}>();\n\nconst current = ref(props.from);\nconst rootRef = ref<HTMLElement | null>(null);\nconst measureRef = ref<HTMLElement | null>(null);\nconst scaleFactor = ref(1);\nlet resizeObserver: ResizeObserver | null = null;\nlet rafId: number | null = null;\nlet startTime: number | null = null;\nlet scaleRafId: number | null = null;\n\nfunction easingFn(t: number): number {\n    if (props.easing === 'linear') return t;\n    if (props.easing === 'ease-out') return 1 - Math.pow(1 - t, 3);\n    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nfunction formatNumber(val: number): string {\n    const fixed = val.toFixed(props.decimals);\n    if (!props.separator) return fixed;\n    const [int, dec] = fixed.split('.');\n    const formatted = int.replace(/\\B(?=(\\d{3})+(?!\\d))/g, props.separator);\n    return dec !== undefined ? `${formatted}.${dec}` : formatted;\n}\n\nfunction animate(ts: number) {\n    if (startTime === null) startTime = ts;\n    const elapsed = ts - startTime;\n    const progress = Math.min(elapsed / props.duration, 1);\n    const eased = easingFn(progress);\n    current.value = props.from + (props.to - props.from) * eased;\n\n    if (progress < 1) {\n        rafId = requestAnimationFrame(animate);\n    } else {\n        current.value = props.to;\n        emit('complete');\n    }\n}\n\nfunction start() {\n    if (rafId !== null) cancelAnimationFrame(rafId);\n    startTime = null;\n    current.value = props.from;\n    rafId = requestAnimationFrame(animate);\n}\n\nfunction stop() {\n    if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n        rafId = null;\n    }\n}\n\ndefineExpose({ start, stop });\n\nfunction scheduleUpdateScale() {\n    if (scaleRafId !== null) return;\n    scaleRafId = requestAnimationFrame(() => {\n        scaleRafId = null;\n        updateScale();\n    });\n}\n\nfunction updateScale() {\n    const measure = measureRef.value;\n    const root = rootRef.value;\n    if (!measure || !root) return;\n    const naturalWidth = measure.scrollWidth;\n    const constrainedWidth = root.clientWidth;\n    if (naturalWidth > constrainedWidth) {\n        scaleFactor.value = constrainedWidth / naturalWidth;\n    } else {\n        scaleFactor.value = 1;\n    }\n}\n\nonMounted(() => {\n    if (props.autoStart) start();\n    nextTick(() => {\n        const root = rootRef.value;\n        if (!root) return;\n        updateScale();\n        resizeObserver = new ResizeObserver(updateScale);\n        resizeObserver.observe(root);\n    });\n});\n\nonUnmounted(() => {\n    stop();\n    if (scaleRafId !== null) {\n        cancelAnimationFrame(scaleRafId);\n        scaleRafId = null;\n    }\n    if (resizeObserver) {\n        resizeObserver.disconnect();\n        resizeObserver = null;\n    }\n});\n\nwatch(() => [props.to, props.from] as const, () => {\n    if (props.autoStart) start();\n});\n\nwatch(() => [props.to, props.prefix, props.suffix, props.separator, props.decimals, props.size] as const, () => {\n    scheduleUpdateScale();\n});\n\nconst displayValue = computed(() =>\n    `${props.prefix}${formatNumber(current.value)}${props.suffix}`\n);\n\nconst finalDisplayValue = computed(() =>\n    `${props.prefix}${formatNumber(props.to)}${props.suffix}`\n);\n\nconst scaleStyle = computed(() => {\n    if (scaleFactor.value >= 1) return undefined;\n    return {\n        transform: `scale(${scaleFactor.value})`,\n        transformOrigin: 'left center' as const,\n    };\n});\n\nconst classes = computed(() =>\n    cn(counterVariants({ size: props.size }), props.class)\n);\n\nconst measureClasses = computed(() =>\n    cn(counterVariants({ size: props.size }), props.class, 'absolute invisible whitespace-nowrap !max-w-none')\n);\n</script>\n\n<template>\n    <span class=\"relative inline-flex max-w-full min-w-0\">\n        <span ref=\"measureRef\" :class=\"measureClasses\" aria-hidden=\"true\">\n            {{ finalDisplayValue }}\n        </span>\n        <span ref=\"rootRef\" :class=\"classes\" :style=\"scaleStyle\" aria-live=\"polite\" :aria-label=\"displayValue\">\n            {{ displayValue }}\n        </span>\n    </span>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/counter/counter-variants.ts",
+      "content": "import { cva } from 'class-variance-authority';\n\nexport const counterVariants = cva(\n    [\n        'inline-flex items-baseline tabular-nums whitespace-nowrap',\n        'font-black text-brutal-fg',\n        'max-w-full min-w-0',\n    ].join(' '),\n    {\n        variants: {\n            size: {\n                sm: 'text-2xl',\n                md: 'text-4xl',\n                lg: 'text-6xl',\n                xl: 'text-8xl',\n            },\n        },\n        defaultVariants: {\n            size: 'md',\n        },\n    }\n);\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/dashboard-shell.json b/packages/registry/registry/dashboard-shell.json
index 778077e..2a2b09b 100644
--- a/packages/registry/registry/dashboard-shell.json
+++ b/packages/registry/registry/dashboard-shell.json
@@ -3,20 +3,15 @@
   "name": "dashboard-shell",
   "type": "registry:ui",
   "title": "Dashboard Shell",
-  "description": "A highly customizable neo-brutalist Dashboard Shell component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Dashboard Shell component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
-  ],
-  "registryDependencies": [
-    "card",
-    "table",
-    "badge",
-    "button"
+    "lucide-vue-next"
   ],
+  "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/dashboard-shell.tsx",
-      "content": "import * as React from 'react';\nimport {\n    LayoutDashboard,\n    Settings,\n    Users,\n    Layers,\n    Bell,\n    Search,\n    Menu,\n    LogOut,\n    TrendingUp,\n    ShieldAlert,\n    CheckCircle2\n} from 'lucide-react';\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\n\nexport interface DashboardShellProps extends React.HTMLAttributes<HTMLDivElement> {\n    userEmail?: string;\n    onSignOutClick?: () => void;\n}\n\nconst mockTransactions = [\n    { id: 'TX-901', name: 'Alpha Agency', status: 'completed', amount: '$1,299.00', date: 'May 24, 2026' },\n    { id: 'TX-902', name: 'Beta Labs', status: 'pending', amount: '$499.00', date: 'May 23, 2026' },\n    { id: 'TX-903', name: 'Delta Studio', status: 'completed', amount: '$2,800.00', date: 'May 22, 2026' },\n    { id: 'TX-904', name: 'Gamma Corp', status: 'failed', amount: '$99.00', date: 'May 20, 2026' },\n];\n\nexport function DashboardShell({\n    userEmail = 'creator@brutxui.site',\n    onSignOutClick,\n    className,\n    ...props\n}: DashboardShellProps) {\n    const [sidebarOpen, setSidebarOpen] = React.useState(true);\n\n    return (\n        <div\n            className={`min-h-[600px] flex bg-brutal-bg text-brutal-fg border-3 border-brutal transition-colors duration-200 overflow-hidden ${className || ''}`}\n            {...props}\n        >\n            <aside\n                className={`w-64 border-r-3 border-brutal bg-gray-50 dark:bg-gray-900 transition-all duration-200 flex flex-col shrink-0 ${sidebarOpen ? 'block' : 'hidden md:flex'}`}\n            >\n                <div className=\"p-4 border-b-3 border-brutal flex items-center justify-between bg-brutal-accent/20\">\n                    <div className=\"flex items-center space-x-2 font-black text-xl\">\n                        <div className=\"w-6 h-6 border-2 border-brutal bg-brutal-primary rounded-none rotate-[-2deg]\" />\n                        <span>BrutxConsole</span>\n                    </div>\n                </div>\n\n                <nav className=\"flex-grow p-4 space-y-2\">\n                    <button className=\"w-full flex items-center space-x-3 px-3 py-2.5 bg-brutal-primary text-black border-3 border-brutal font-black text-sm text-left shadow-none transition-all\">\n                        <LayoutDashboard className=\"h-4 w-4 stroke-[3]\" />\n                        <span>Overview</span>\n                    </button>\n\n                    <button className=\"w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all\">\n                        <Layers className=\"h-4 w-4 stroke-[2.5]\" />\n                        <span>Deployments</span>\n                    </button>\n\n                    <button className=\"w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all\">\n                        <Users className=\"h-4 w-4 stroke-[2.5]\" />\n                        <span>Team Access</span>\n                    </button>\n\n                    <button className=\"w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all\">\n                        <Settings className=\"h-4 w-4 stroke-[2.5]\" />\n                        <span>System Settings</span>\n                    </button>\n                </nav>\n\n                <div className=\"p-4 border-t-3 border-brutal bg-gray-100 dark:bg-gray-800\">\n                    <div className=\"flex items-center justify-between mb-3\">\n                        <div className=\"flex flex-col min-w-0\">\n                            <span className=\"text-xs font-black truncate\">{userEmail}</span>\n                            <span className=\"text-[10px] text-gray-500 font-bold uppercase tracking-wider\">Owner Account</span>\n                        </div>\n                    </div>\n                    <Button\n                        variant=\"danger\"\n                        size=\"sm\"\n                        className=\"w-full gap-2 py-4 font-black\"\n                        onClick={onSignOutClick}\n                    >\n                        <LogOut className=\"h-3.5 w-3.5 stroke-[3]\" />\n                        <span>Sign Out</span>\n                    </Button>\n                </div>\n            </aside>\n\n            <div className=\"flex-grow flex flex-col min-w-0 bg-white dark:bg-gray-800/20\">\n                <header className=\"h-16 border-b-3 border-brutal flex items-center justify-between px-6 bg-white dark:bg-gray-800 z-10\">\n                    <div className=\"flex items-center space-x-4\">\n                        <button\n                            onClick={() => setSidebarOpen(!sidebarOpen)}\n                            className=\"p-1.5 border-3 border-brutal bg-white text-black shadow-brutal-sm active:translate-y-[2px] active:shadow-none transition-all\"\n                        >\n                            <Menu className=\"h-4 w-4 stroke-[3]\" />\n                        </button>\n                        <div className=\"relative hidden sm:block\">\n                            <Search className=\"absolute left-3 top-2.5 h-4 w-4 text-gray-400 stroke-[2.5]\" />\n                            <input\n                                placeholder=\"Global workspace search...\"\n                                className=\"pl-9 pr-4 py-1.5 border-3 border-brutal bg-gray-50 text-sm font-bold text-black focus:outline-none w-64\"\n                            />\n                        </div>\n                    </div>\n\n                    <div className=\"flex items-center space-x-4\">\n                        <button className=\"relative p-1.5 border-3 border-brutal bg-white text-black shadow-brutal-sm active:translate-y-[2px] active:shadow-none transition-all\">\n                            <Bell className=\"h-4 w-4 stroke-[3]\" />\n                            <span className=\"absolute top-[-4px] right-[-4px] h-3.5 w-3.5 bg-brutal-destructive rounded-full border-2 border-brutal\" />\n                        </button>\n                        <div className=\"w-8 h-8 rounded-full border-3 border-brutal bg-brutal-accent flex items-center justify-center font-black text-sm text-black\">\n                            C\n                        </div>\n                    </div>\n                </header>\n\n                <main className=\"flex-grow p-6 space-y-6 overflow-y-auto max-w-[1200px] w-full mx-auto\">\n                    <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n                        <Card className=\"border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4\">\n                            <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n                                <CardTitle className=\"text-sm font-black uppercase tracking-wider text-gray-500\">Monthly Revenue</CardTitle>\n                                <TrendingUp className=\"h-4 w-4 text-brutal-success stroke-[3]\" />\n                            </CardHeader>\n                            <CardContent className=\"space-y-1\">\n                                <div className=\"text-3xl font-black\">$12,492.00</div>\n                                <p className=\"text-xs font-bold text-brutal-success flex items-center gap-1\">\n                                    <span>+18.2% from previous billing cycle</span>\n                                </p>\n                            </CardContent>\n                        </Card>\n\n                        <Card className=\"border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4\">\n                            <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n                                <CardTitle className=\"text-sm font-black uppercase tracking-wider text-gray-500\">Active Licenses</CardTitle>\n                                <CheckCircle2 className=\"h-4 w-4 text-brutal-primary stroke-[3]\" />\n                            </CardHeader>\n                            <CardContent className=\"space-y-1\">\n                                <div className=\"text-3xl font-black\">+428</div>\n                                <p className=\"text-xs font-bold text-brutal-primary\">+4.1% monthly net active users</p>\n                            </CardContent>\n                        </Card>\n\n                        <Card className=\"border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4\">\n                            <CardHeader className=\"flex flex-row items-center justify-between pb-2\">\n                                <CardTitle className=\"text-sm font-black uppercase tracking-wider text-gray-500\">System Warnings</CardTitle>\n                                <ShieldAlert className=\"h-4 w-4 text-brutal-accent stroke-[3]\" />\n                            </CardHeader>\n                            <CardContent className=\"space-y-1\">\n                                <div className=\"text-3xl font-black\">2 Warnings</div>\n                                <p className=\"text-xs font-bold text-brutal-accent\">SSL domain renewals pending config</p>\n                            </CardContent>\n                        </Card>\n                    </div>\n\n                    <Card className=\"border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none\">\n                        <CardHeader className=\"border-b-3 border-brutal p-4 bg-gray-50 dark:bg-gray-900/50\">\n                            <CardTitle className=\"text-lg font-black leading-none\">Recent Transaction Ledgers</CardTitle>\n                        </CardHeader>\n                        <CardContent className=\"p-0\">\n                            <Table>\n                                <TableHeader className=\"border-b-3 border-brutal\">\n                                    <TableRow className=\"hover:bg-transparent\">\n                                        <TableHead className=\"font-black text-black dark:text-white p-3\">Receipt ID</TableHead>\n                                        <TableHead className=\"font-black text-black dark:text-white\">Account</TableHead>\n                                        <TableHead className=\"font-black text-black dark:text-white\">Status</TableHead>\n                                        <TableHead className=\"font-black text-black dark:text-white\">date</TableHead>\n                                        <TableHead className=\"text-right font-black text-black dark:text-white p-3\">Amount</TableHead>\n                                    </TableRow>\n                                </TableHeader>\n                                <TableBody>\n                                    {mockTransactions.map((tx) => (\n                                        <TableRow key={tx.id} className=\"border-b border-gray-200 hover:bg-gray-50/50 dark:hover:bg-gray-700/20\">\n                                            <TableCell className=\"font-black text-sm p-3\">{tx.id}</TableCell>\n                                            <TableCell className=\"font-bold text-sm text-gray-700 dark:text-gray-300\">{tx.name}</TableCell>\n                                            <TableCell>\n                                                <Badge\n                                                    variant={\n                                                        tx.status === 'completed'\n                                                            ? 'success'\n                                                            : tx.status === 'pending'\n                                                            ? 'accent'\n                                                            : 'danger'\n                                                    }\n                                                    className=\"font-black text-xs px-2 py-0.5 border-2 border-brutal rounded-none\"\n                                                >\n                                                    {tx.status}\n                                                </Badge>\n                                            </TableCell>\n                                            <TableCell className=\"font-bold text-sm text-gray-500\">{tx.date}</TableCell>\n                                            <TableCell className=\"text-right font-black text-sm p-3\">{tx.amount}</TableCell>\n                                        </TableRow>\n                                    ))}\n                                </TableBody>\n                            </Table>\n                        </CardContent>\n                    </Card>\n                </main>\n            </div>\n        </div>\n    );\n}\n",
+      "path": "components/ui/dashboard-shell/DashboardShell.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Menu } from 'lucide-vue-next'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\n\ninterface DashboardShellProps {\n    userEmail?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<DashboardShellProps>(), {\n    userEmail: undefined,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    signOut: []\n}>()\n\nconst { t } = useLocale()\n\nconst sidebarOpen = ref(true)\n\nconst displayEmail = computed(() => props.userEmail ?? t('dashboardShell.defaultEmail'))\n\nconst rootClasses = computed(() => cn('flex h-screen bg-brutal-bg', props.class))\n\nconst sidebarClasses = computed(() =>\n    cn(\n        'border-r-3 border-brutal bg-brutal-bg p-4 flex flex-col',\n        sidebarOpen.value ? 'w-64' : 'w-0 overflow-hidden md:w-64'\n    )\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <aside :class=\"sidebarClasses\" :aria-label=\"t('dashboardShell.sidebarNavigation')\">\n            <div class=\"font-black text-lg tracking-tight mb-8\">\nBrutxUI\n</div>\n            <nav class=\"flex-1 space-y-1\">\n                <slot name=\"sidebar\" />\n            </nav>\n            <div class=\"border-t-3 border-brutal pt-4 mt-4\">\n                <div class=\"text-sm font-bold truncate\">\n{{ displayEmail }}\n</div>\n                <button class=\"text-sm font-bold text-brutal-destructive mt-1 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\" @click=\"emit('signOut')\">\n{{ t('dashboardShell.signOut') }}\n</button>\n            </div>\n        </aside>\n\n        <div class=\"flex-1 flex flex-col overflow-hidden\">\n            <header class=\"border-b-3 border-brutal bg-brutal-bg px-6 py-3 flex items-center justify-between\">\n                <button class=\"md:hidden h-8 w-8 flex items-center justify-center border-3 border-brutal shadow-brutal-sm active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5\" @click=\"sidebarOpen = !sidebarOpen\">\n                    <Menu class=\"h-4 w-4 stroke-[3]\" />\n                </button>\n                <slot name=\"header\" />\n            </header>\n\n            <main class=\"flex-1 overflow-y-auto p-6\">\n                <slot />\n            </main>\n        </div>\n    </div>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -42,7 +37,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -72,7 +71,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -82,16 +84,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/dashboard-stats.json b/packages/registry/registry/dashboard-stats.json
index 00012bb..64483d7 100644
--- a/packages/registry/registry/dashboard-stats.json
+++ b/packages/registry/registry/dashboard-stats.json
@@ -3,9 +3,9 @@
   "name": "dashboard-stats",
   "type": "registry:ui",
   "title": "Dashboard Stats",
-  "description": "A highly customizable neo-brutalist Dashboard Stats component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Dashboard Stats component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "card",
@@ -13,8 +13,8 @@
   ],
   "files": [
     {
-      "path": "components/ui/dashboard-stats.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Card, CardHeader, CardContent, CardTitle, CardDescription } from '@/components/ui/card';\nimport { Badge } from '@/components/ui/badge';\nimport { ArrowUpRight, ArrowDownRight, TrendingUp, Users, Zap, Wallet, MoreHorizontal } from 'lucide-react';\n\nexport interface StatItem {\n    title: string;\n    value: string;\n    description: string;\n    change: string;\n    trend: 'up' | 'down' | 'neutral';\n    icon: React.ComponentType<{ className?: string }>;\n    accentColor: string;\n    progress?: number;\n}\n\nconst defaultStats: StatItem[] = [\n    {\n        title: 'Monthly Recurring Revenue',\n        value: '$24,890',\n        description: 'Total subscription earnings',\n        change: '+14.2%',\n        trend: 'up',\n        icon: Wallet,\n        accentColor: '#FF6B6B',\n        progress: 78,\n    },\n    {\n        title: 'Active Subscribers',\n        value: '1,429',\n        description: 'Subscribed active users',\n        change: '+8.3%',\n        trend: 'up',\n        icon: Users,\n        accentColor: '#4ECDC4',\n        progress: 62,\n    },\n    {\n        title: 'API Request Load',\n        value: '4.8M',\n        description: 'Requests in the last 24h',\n        change: '-2.1%',\n        trend: 'down',\n        icon: Zap,\n        accentColor: '#FFE66D',\n        progress: 45,\n    },\n];\n\nexport interface DashboardStatsProps extends React.HTMLAttributes<HTMLDivElement> {\n    stats?: StatItem[];\n    title?: string;\n    subtitle?: string;\n}\n\nexport function DashboardStats({\n    stats = defaultStats,\n    title = 'Overview Performance',\n    subtitle = 'Real-time telemetry and operational growth metrics.',\n    className,\n    ...props\n}: DashboardStatsProps) {\n    return (\n        <div\n            className={`w-full py-8 px-4 md:px-8 bg-gray-50 dark:bg-gray-950 text-black dark:text-white ${\n                className || ''\n            }`}\n            {...props}\n        >\n            <div className=\"max-w-6xl mx-auto\">\n                <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8\">\n                    <div>\n                        <h2 className=\"text-3xl font-black uppercase tracking-tight flex items-center gap-2\">\n                            <TrendingUp className=\"h-8 w-8 text-[#FF6B6B] stroke-[3]\" />\n                            {title}\n                        </h2>\n                        <p className=\"text-sm font-semibold text-gray-500 dark:text-gray-400 mt-1\">\n                            {subtitle}\n                        </p>\n                    </div>\n\n                    <div className=\"flex items-center gap-3\">\n                        <Badge variant=\"outline\" className=\"cursor-pointer hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black\">\n                            Last 30 Days\n                        </Badge>\n                        <Badge variant=\"primary\" className=\"cursor-pointer hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 transition-all\">\n                            Export PDF\n                        </Badge>\n                    </div>\n                </div>\n\n                <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n                    {stats.map((stat, idx) => {\n                        const Icon = stat.icon;\n\n                        return (\n                            <Card\n                                key={idx}\n                                variant=\"interactive\"\n                                className=\"bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal hover:shadow-brutal-lg flex flex-col justify-between\"\n                            >\n                                <CardHeader className=\"p-6 pb-2 flex flex-row items-center justify-between space-y-0\">\n                                    <div className=\"flex flex-col\">\n                                        <CardTitle className=\"text-sm font-black uppercase tracking-wider text-gray-500 dark:text-gray-400\">\n                                            {stat.title}\n                                        </CardTitle>\n                                        <CardDescription className=\"mt-1 text-xs font-semibold\">\n                                            {stat.description}\n                                        </CardDescription>\n                                    </div>\n                                    <div\n                                        className=\"p-3 border-3 border-brutal shadow-brutal-sm flex items-center justify-center\"\n                                        style={{ backgroundColor: stat.accentColor }}\n                                    >\n                                        <Icon className=\"h-5 w-5 text-black stroke-[3]\" />\n                                    </div>\n                                </CardHeader>\n\n                                <CardContent className=\"p-6 pt-2\">\n                                    <div className=\"flex items-baseline justify-between mb-4\">\n                                        <span className=\"text-4xl font-black tracking-tight\">{stat.value}</span>\n                                        <Badge\n                                            variant={stat.trend === 'up' ? 'success' : stat.trend === 'down' ? 'danger' : 'default'}\n                                            className=\"font-black text-xs border-2 gap-1\"\n                                        >\n                                            {stat.trend === 'up' ? (\n                                                <ArrowUpRight className=\"h-3.5 w-3.5 stroke-[3]\" />\n                                            ) : (\n                                                <ArrowDownRight className=\"h-3.5 w-3.5 stroke-[3]\" />\n                                            )}\n                                            {stat.change}\n                                        </Badge>\n                                    </div>\n\n                                    {stat.progress !== undefined && (\n                                        <div className=\"mt-4 pt-4 border-t-2 border-dashed border-gray-200 dark:border-gray-800\">\n                                            <div className=\"flex justify-between text-xs font-bold mb-1.5\">\n                                                <span className=\"text-gray-500 dark:text-gray-400\">TARGET LIMIT</span>\n                                                <span>{stat.progress}%</span>\n                                            </div>\n                                            <div className=\"w-full h-3 border-2 border-brutal bg-gray-100 dark:bg-gray-800 overflow-hidden\">\n                                                <div\n                                                    className=\"h-full border-r-2 border-brutal transition-all duration-500\"\n                                                    style={{\n                                                        width: `${stat.progress}%`,\n                                                        backgroundColor: stat.accentColor,\n                                                    }}\n                                                />\n                                            </div>\n                                        </div>\n                                    )}\n                                </CardContent>\n                            </Card>\n                        );\n                    })}\n                </div>\n\n                <div className=\"mt-8 p-5 bg-[#4ECDC4] text-black border-3 border-black shadow-brutal flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4\">\n                    <div>\n                        <span className=\"font-black uppercase mr-2 text-xs border-2 border-black px-2 py-0.5 bg-white\">\n                            INSIGHT\n                        </span>\n                        <span className=\"font-black text-sm\">\n                            Operational status is outstanding. Request volume is running 12% below cluster threshold limit.\n                        </span>\n                    </div>\n                    <button className=\"flex items-center gap-1 font-black text-xs uppercase border-3 border-black px-3 py-1.5 bg-white shadow-brutal-sm active:translate-y-0.5 active:shadow-none transition-all\">\n                        Details <MoreHorizontal className=\"h-4 w-4 stroke-[3]\" />\n                    </button>\n                </div>\n            </div>\n        </div>\n    );\n}\nDashboardStats.displayName = 'DashboardStats';\n",
+      "path": "components/ui/dashboard-stats/DashboardStats.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue'\nimport { ArrowUpRight, ArrowDownRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardDescription from '@/components/ui/card/CardDescription.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\n\ntype AccentColorKey = 'primary' | 'secondary' | 'accent' | 'destructive' | 'success' | 'info'\n\nconst ACCENT_COLOR_MAP: Record<AccentColorKey, string> = {\n    primary: 'bg-brutal-primary',\n    secondary: 'bg-brutal-secondary',\n    accent: 'bg-brutal-accent',\n    destructive: 'bg-brutal-destructive',\n    success: 'bg-brutal-success',\n    info: 'bg-brutal-info',\n}\n\nexport interface StatItem {\n    title: string\n    value: string\n    description: string\n    change: string\n    trend: 'up' | 'down' | 'neutral'\n    icon: Component\n    accentColor?: AccentColorKey\n    progress?: number\n}\n\ninterface DashboardStatsProps {\n    stats?: StatItem[]\n    title?: string\n    subtitle?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<DashboardStatsProps>(), {\n    title: 'Overview Performance',\n    subtitle: '',\n    stats: () => [],\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'stat-click': [index: number]\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))\n\nfunction getIconClasses(stat: StatItem) {\n    return cn(\n        'h-8 w-8 flex items-center justify-center border-3 border-brutal',\n        stat.accentColor ? ACCENT_COLOR_MAP[stat.accentColor] : 'bg-brutal-primary'\n    )\n}\n\nfunction getTrendIconClasses(stat: StatItem) {\n    return cn(\n        'h-4 w-4 stroke-[3]',\n        stat.trend === 'up' ? 'text-brutal-success' : 'text-brutal-destructive'\n    )\n}\n\nfunction getProgressClasses(stat: StatItem) {\n    return cn(\n        'h-full transition-all',\n        stat.accentColor ? ACCENT_COLOR_MAP[stat.accentColor] : 'bg-brutal-primary'\n    )\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"mb-8\">\n            <h2 class=\"text-2xl font-black tracking-tight\">\n{{ title }}\n</h2>\n            <p v-if=\"subtitle\" class=\"mt-1 text-brutal-muted-foreground font-medium\">\n{{ subtitle }}\n</p>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n            <Card v-for=\"(stat, index) in stats\" :key=\"stat.title\" variant=\"default\" class=\"cursor-pointer\" @click=\"emit('stat-click', index)\">\n                <CardHeader class=\"pb-2\">\n                    <div class=\"flex items-center justify-between\">\n                        <CardDescription>{{ stat.title }}</CardDescription>\n                        <div :class=\"getIconClasses(stat)\">\n                            <component :is=\"stat.icon\" class=\"h-4 w-4 stroke-[3]\" />\n                        </div>\n                    </div>\n                </CardHeader>\n                <CardContent>\n                    <div class=\"text-2xl font-black\">\n{{ stat.value }}\n</div>\n                    <div class=\"flex items-center gap-2 mt-1\">\n                        <component :is=\"stat.trend === 'up' ? ArrowUpRight : ArrowDownRight\" :class=\"getTrendIconClasses(stat)\" />\n                        <Badge :variant=\"stat.trend === 'up' ? 'success' : stat.trend === 'down' ? 'danger' : 'default'\" size=\"sm\">\n{{ stat.change }}\n</Badge>\n                    </div>\n                    <p class=\"text-xs text-brutal-muted-foreground mt-1 font-medium\">\n{{ stat.description }}\n</p>\n                    <div v-if=\"stat.progress !== undefined\" class=\"mt-3 h-2 bg-brutal-muted border-3 border-brutal overflow-hidden\">\n                        <div :class=\"getProgressClasses(stat)\" :style=\"{ width: `${stat.progress}%` }\" />\n                    </div>\n                </CardContent>\n            </Card>\n        </div>\n    </div>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -40,7 +40,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -70,7 +74,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -80,16 +87,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/data-table-section.json b/packages/registry/registry/data-table-section.json
new file mode 100644
index 0000000..2be50d2
--- /dev/null
+++ b/packages/registry/registry/data-table-section.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "data-table-section",
+  "type": "registry:ui",
+  "title": "Data Table Section",
+  "description": "A highly customizable neo-brutalist Data Table Section component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "table",
+    "pagination",
+    "input"
+  ],
+  "files": [
+    {
+      "path": "components/ui/data-table-section/DataTableSection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-vue-next'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Table from '@/components/ui/table/Table.vue'\nimport TableHeader from '@/components/ui/table/TableHeader.vue'\nimport TableBody from '@/components/ui/table/TableBody.vue'\nimport TableRow from '@/components/ui/table/TableRow.vue'\nimport TableHead from '@/components/ui/table/TableHead.vue'\nimport TableCell from '@/components/ui/table/TableCell.vue'\nimport Pagination from '@/components/ui/pagination/Pagination.vue'\nimport Input from '@/components/ui/input/Input.vue'\n\nexport interface ColumnDef {\n    key: string\n    label: string\n    sortable?: boolean\n}\n\ninterface DataTableSectionProps {\n    title?: string\n    columns?: ColumnDef[]\n    rows?: Record<string, unknown>[]\n    searchable?: boolean\n    pageSize?: number\n    class?: string\n}\n\nconst DEFAULT_PAGE_SIZE = 10\n\nconst props = withDefaults(defineProps<DataTableSectionProps>(), {\n    title: undefined,\n    columns: () => [],\n    rows: () => [],\n    searchable: true,\n    pageSize: DEFAULT_PAGE_SIZE,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'row-click': [row: Record<string, unknown>]\n    'sort': [payload: { key: string; direction: 'asc' | 'desc' }]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('dataTableSection.defaultTitle'))\nconst resolvedSearchPlaceholder = computed(() => t('dataTableSection.searchPlaceholder'))\nconst resolvedNoResults = computed(() => t('dataTableSection.noResults'))\n\nconst searchQuery = ref('')\nconst sortKey = ref('')\nconst sortDirection = ref<'asc' | 'desc'>('asc')\nconst currentPage = ref(1)\n\nconst filteredRows = computed(() => {\n    if (!searchQuery.value) return props.rows\n    const query = searchQuery.value.toLowerCase()\n    return props.rows.filter(row =>\n        Object.values(row).some(val =>\n            String(val).toLowerCase().includes(query)\n        )\n    )\n})\n\nconst sortedRows = computed(() => {\n    if (!sortKey.value) return filteredRows.value\n    const key = sortKey.value\n    const dir = sortDirection.value\n    return [...filteredRows.value].sort((a, b) => {\n        const aVal = a[key]\n        const bVal = b[key]\n        if (aVal == null && bVal == null) return 0\n        if (aVal == null) return dir === 'asc' ? -1 : 1\n        if (bVal == null) return dir === 'asc' ? 1 : -1\n        const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true })\n        return dir === 'asc' ? cmp : -cmp\n    })\n})\n\nconst totalPages = computed(() => Math.max(1, Math.ceil(sortedRows.value.length / props.pageSize)))\n\nconst paginatedRows = computed(() => {\n    const start = (currentPage.value - 1) * props.pageSize\n    return sortedRows.value.slice(start, start + props.pageSize)\n})\n\nfunction handleSort(key: string) {\n    if (sortKey.value === key) {\n        sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'\n    } else {\n        sortKey.value = key\n        sortDirection.value = 'asc'\n    }\n    currentPage.value = 1\n    emit('sort', { key, direction: sortDirection.value })\n}\n\nfunction handleRowClick(row: Record<string, unknown>) {\n    emit('row-click', row)\n}\n\nfunction handleSearch() {\n    currentPage.value = 1\n}\n\nconst rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))\n\nconst columnClasses = computed(() =>\n    props.columns.map(col =>\n        cn(col.sortable && 'cursor-pointer select-none active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all')\n    )\n)\n\nfunction sortIcon(key: string) {\n    if (sortKey.value !== key) return ArrowUpDown\n    return sortDirection.value === 'asc' ? ArrowUp : ArrowDown\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\">\n            <div class=\"mb-6\">\n                <h2 class=\"text-3xl font-black tracking-tight\">\n                    {{ resolvedTitle }}\n                </h2>\n            </div>\n        </slot>\n\n        <slot>\n            <div v-if=\"searchable\" class=\"mb-4\">\n                <Input\n                    v-model=\"searchQuery\"\n                    :placeholder=\"resolvedSearchPlaceholder\"\n                    @update:model-value=\"handleSearch\"\n                />\n            </div>\n\n            <Table>\n                <TableHeader>\n                    <TableRow>\n                        <TableHead\n                            v-for=\"(col, index) in columns\"\n                            :key=\"col.key\"\n                            :class=\"columnClasses[index]\"\n                            @click=\"col.sortable && handleSort(col.key)\"\n                        >\n                            <span class=\"inline-flex items-center gap-1\">\n                                {{ col.label }}\n                                <component\n                                    :is=\"sortIcon(col.key)\"\n                                    v-if=\"col.sortable\"\n                                    class=\"h-4 w-4 stroke-[3]\"\n                                />\n                            </span>\n                        </TableHead>\n                    </TableRow>\n                </TableHeader>\n                <TableBody>\n                    <template v-if=\"paginatedRows.length > 0\">\n                        <TableRow\n                            v-for=\"(row, rowIndex) in paginatedRows\"\n                            :key=\"rowIndex\"\n                            class=\"cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\"\n                            @click=\"handleRowClick(row)\"\n                        >\n                            <TableCell v-for=\"col in columns\" :key=\"col.key\">\n                                {{ row[col.key] }}\n                            </TableCell>\n                        </TableRow>\n                    </template>\n                    <TableRow v-else>\n                        <TableCell :colspan=\"columns.length || 1\" class=\"text-center text-brutal-muted-foreground font-bold py-8\">\n                            {{ resolvedNoResults }}\n                        </TableCell>\n                    </TableRow>\n                </TableBody>\n            </Table>\n\n            <div v-if=\"totalPages > 1\" class=\"mt-4 flex justify-center\">\n                <Pagination\n                    :current-page=\"currentPage\"\n                    :total-pages=\"totalPages\"\n                    @update:current-page=\"currentPage = $event\"\n                />\n            </div>\n        </slot>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/dialog.json b/packages/registry/registry/dialog.json
index 397d5c1..ca031f4 100644
--- a/packages/registry/registry/dialog.json
+++ b/packages/registry/registry/dialog.json
@@ -3,16 +3,41 @@
   "name": "dialog",
   "type": "registry:ui",
   "title": "Dialog",
-  "description": "A highly customizable neo-brutalist Dialog component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Dialog component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-dialog",
-    "lucide-react"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/dialog.tsx",
-      "content": "import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogPortal = DialogPrimitive.Portal;\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n    React.ElementRef<typeof DialogPrimitive.Overlay>,\n    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n    <DialogPrimitive.Overlay\n        ref={ref}\n        className={cn(\n            'fixed inset-0 z-50 bg-black/50',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            className\n        )}\n        {...props}\n    />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n    React.ElementRef<typeof DialogPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n        showCloseButton?: boolean;\n    }\n>(({ className, children, showCloseButton = true, ...props }, ref) => (\n    <DialogPortal>\n        <DialogOverlay />\n        <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n                'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n                'w-full max-w-lg p-6',\n                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal-xl',\n                'duration-200',\n                'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n                'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',\n                'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            {showCloseButton && (\n                <DialogPrimitive.Close\n                    className={cn(\n                        'absolute right-4 top-4',\n                        'h-8 w-8 flex items-center justify-center',\n                        'border-3 border-brutal rounded-brutal bg-brutal-bg text-brutal-fg',\n                        'shadow-brutal-sm',\n                        'transition-all duration-150',\n                        'hover:bg-brutal-destructive hover:text-brutal-fg',\n                        'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',\n                        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'\n                    )}\n                >\n                     <X className=\"h-4 w-4 stroke-[3]\" />\n                     <span className=\"sr-only\">Close</span>\n                </DialogPrimitive.Close>\n            )}\n        </DialogPrimitive.Content>\n    </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={cn(\n            'flex flex-col space-y-2 pb-4 border-b-3 border-brutal',\n            className\n        )}\n        {...props}\n    />\n);\nDialogHeader.displayName = 'DialogHeader';\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={cn(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',\n            className\n        )}\n        {...props}\n    />\n);\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n    React.ElementRef<typeof DialogPrimitive.Title>,\n    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n    <DialogPrimitive.Title\n        ref={ref}\n        className={cn('text-xl font-black tracking-tight', className)}\n        {...props}\n    />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n    React.ElementRef<typeof DialogPrimitive.Description>,\n    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n    <DialogPrimitive.Description\n        ref={ref}\n        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}\n        {...props}\n    />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n    Dialog,\n    DialogPortal,\n    DialogOverlay,\n    DialogTrigger,\n    DialogClose,\n    DialogContent,\n    DialogHeader,\n    DialogFooter,\n    DialogTitle,\n    DialogDescription,\n};\n",
+      "path": "components/ui/dialog/DialogContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    DialogPortal as DialogPortalPrimitive,\n    DialogContent as DialogContentPrimitive,\n    DialogClose as DialogClosePrimitive,\n} from 'reka-ui'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport DialogOverlay from '@/components/ui/dialog/DialogOverlay.vue'\nimport { useLocale } from '@/composables/useLocale'\n\ninterface DialogContentProps {\n    showCloseButton?: boolean\n    forceMount?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<DialogContentProps>(), {\n    showCloseButton: true,\n    forceMount: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst contentClasses = computed(() =>\n    cn(\n        'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',\n        'w-full max-w-lg p-6',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal-xl rounded-brutal',\n        'duration-200',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',\n        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n        props.class\n    )\n)\n\nconst closeClasses = computed(() =>\n    cn(\n        'absolute right-4 top-4',\n        'h-8 w-8 flex items-center justify-center',\n        'border-3 border-brutal bg-brutal-bg text-brutal-fg',\n        'shadow-brutal-sm',\n        'transition-all duration-150',\n        'hover:bg-brutal-destructive hover:text-brutal-fg',\n        'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'\n    )\n)\n</script>\n\n<template>\n    <DialogPortalPrimitive>\n        <DialogOverlay />\n        <DialogContentPrimitive :class=\"contentClasses\" :force-mount=\"props.forceMount\">\n            <slot />\n            <DialogClosePrimitive v-if=\"showCloseButton\" :class=\"closeClasses\">\n                <X class=\"h-4 w-4 stroke-[3]\" />\n                <span class=\"sr-only\">{{ t('dialog.close') }}</span>\n            </DialogClosePrimitive>\n        </DialogContentPrimitive>\n    </DialogPortalPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dialog/DialogDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogDescription as DialogDescriptionPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DialogDescriptionProps {\n    class?: string\n}\n\nconst props = defineProps<DialogDescriptionProps>()\n\nconst classes = computed(() =>\n    cn('text-sm text-brutal-muted-foreground font-medium', props.class)\n)\n</script>\n\n<template>\n    <DialogDescriptionPrimitive :class=\"classes\">\n        <slot />\n    </DialogDescriptionPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dialog/DialogFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface DialogFooterProps {\n    class?: string\n}\n\nconst props = defineProps<DialogFooterProps>()\n\nconst classes = computed(() =>\n    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dialog/DialogHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface DialogHeaderProps {\n    class?: string\n}\n\nconst props = defineProps<DialogHeaderProps>()\n\nconst classes = computed(() =>\n    cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dialog/DialogOverlay.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogOverlay as DialogOverlayPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DialogOverlayProps {\n    class?: string\n}\n\nconst props = defineProps<DialogOverlayProps>()\n\nconst classes = computed(() =>\n    cn(\n        'fixed inset-0 z-50 bg-brutal-overlay',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DialogOverlayPrimitive :class=\"classes\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dialog/DialogTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogTitle as DialogTitlePrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DialogTitleProps {\n    class?: string\n}\n\nconst props = defineProps<DialogTitleProps>()\n\nconst classes = computed(() =>\n    cn('text-xl font-black tracking-tight', props.class)\n)\n</script>\n\n<template>\n    <DialogTitlePrimitive :class=\"classes\">\n        <slot />\n    </DialogTitlePrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -38,7 +63,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -68,7 +97,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -78,16 +110,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/dropdown-menu.json b/packages/registry/registry/dropdown-menu.json
index fe44a51..717a454 100644
--- a/packages/registry/registry/dropdown-menu.json
+++ b/packages/registry/registry/dropdown-menu.json
@@ -3,16 +3,56 @@
   "name": "dropdown-menu",
   "type": "registry:ui",
   "title": "Dropdown Menu",
-  "description": "A highly customizable neo-brutalist Dropdown Menu component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Dropdown Menu component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-dropdown-menu",
-    "lucide-react"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/dropdown-menu.tsx",
-      "content": "import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Check, ChevronRight, Circle } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst DropdownMenu = DropdownMenuPrimitive.Root;\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group;\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal;\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub;\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n        inset?: boolean;\n    }\n>(({ className, inset, children, ...props }, ref) => (\n    <DropdownMenuPrimitive.SubTrigger\n        ref={ref}\n        className={cn(\n            'flex cursor-pointer select-none items-center px-3 py-2',\n            'font-bold outline-none',\n            'focus:bg-brutal-accent focus:text-brutal-fg data-[state=open]:bg-brutal-accent data-[state=open]:text-brutal-fg',\n            inset && 'pl-8',\n            className\n        )}\n        {...props}\n    >\n        {children}\n        <ChevronRight className=\"ml-auto h-4 w-4 stroke-[3]\" />\n    </DropdownMenuPrimitive.SubTrigger>\n));\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;\n\nconst DropdownMenuSubContent = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n    <DropdownMenuPrimitive.SubContent\n        ref={ref}\n        className={cn(\n            'z-50 min-w-[8rem] overflow-hidden p-1',\n            'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            'data-[side=bottom]:slide-in-from-top-2',\n            'data-[side=left]:slide-in-from-right-2',\n            'data-[side=right]:slide-in-from-left-2',\n            'data-[side=top]:slide-in-from-bottom-2',\n            className\n        )}\n        {...props}\n    />\n));\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 6, ...props }, ref) => (\n    <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n            ref={ref}\n            sideOffset={sideOffset}\n            className={cn(\n                'z-50 min-w-[8rem] overflow-hidden p-1',\n                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal',\n                'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n                'data-[side=bottom]:slide-in-from-top-2',\n                'data-[side=left]:slide-in-from-right-2',\n                'data-[side=right]:slide-in-from-left-2',\n                'data-[side=top]:slide-in-from-bottom-2',\n                className\n            )}\n            {...props}\n        />\n    </DropdownMenuPrimitive.Portal>\n));\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;\n\nconst DropdownMenuItem = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n        inset?: boolean;\n    }\n>(({ className, inset, ...props }, ref) => (\n    <DropdownMenuPrimitive.Item\n        ref={ref}\n        className={cn(\n            'relative flex cursor-pointer select-none items-center px-3 py-2',\n            'font-bold outline-none transition-colors',\n            'focus:bg-brutal-accent focus:text-brutal-fg',\n            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n            'hover:bg-brutal-muted',\n            inset && 'pl-8',\n            className\n        )}\n        {...props}\n    />\n));\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n    <DropdownMenuPrimitive.CheckboxItem\n        ref={ref}\n        className={cn(\n            'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',\n            'font-bold outline-none transition-colors',\n            'focus:bg-brutal-accent focus:text-brutal-fg',\n            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n            className\n        )}\n        checked={checked}\n        {...props}\n    >\n        <span className=\"absolute left-2 flex h-4 w-4 items-center justify-center\">\n            <DropdownMenuPrimitive.ItemIndicator>\n                <Check className=\"h-4 w-4 stroke-[3]\" />\n            </DropdownMenuPrimitive.ItemIndicator>\n        </span>\n        {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuRadioItem = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n    <DropdownMenuPrimitive.RadioItem\n        ref={ref}\n        className={cn(\n            'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',\n            'font-bold outline-none transition-colors',\n            'focus:bg-brutal-accent focus:text-brutal-fg',\n            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n            className\n        )}\n        {...props}\n    >\n        <span className=\"absolute left-2 flex h-4 w-4 items-center justify-center\">\n            <DropdownMenuPrimitive.ItemIndicator>\n                <Circle className=\"h-2 w-2 fill-current\" />\n            </DropdownMenuPrimitive.ItemIndicator>\n        </span>\n        {children}\n    </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n        inset?: boolean;\n    }\n>(({ className, inset, ...props }, ref) => (\n    <DropdownMenuPrimitive.Label\n        ref={ref}\n        className={cn('px-3 py-2 text-sm font-black tracking-wide', inset && 'pl-8', className)}\n        {...props}\n    />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n    React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n    <DropdownMenuPrimitive.Separator\n        ref={ref}\n        className={cn('-mx-1 my-1 h-[3px] bg-[var(--brutal-border-color,#000)]', className)}\n        {...props}\n    />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {\n    return (\n        <span\n            className={cn('ml-auto text-xs tracking-widest opacity-60 font-bold', className)}\n            {...props}\n        />\n    );\n};\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut';\n\nexport {\n    DropdownMenu,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuCheckboxItem,\n    DropdownMenuRadioItem,\n    DropdownMenuLabel,\n    DropdownMenuSeparator,\n    DropdownMenuShortcut,\n    DropdownMenuGroup,\n    DropdownMenuPortal,\n    DropdownMenuSub,\n    DropdownMenuSubContent,\n    DropdownMenuSubTrigger,\n    DropdownMenuRadioGroup,\n};\n",
+      "path": "components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,\n    DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,\n} from 'reka-ui'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuCheckboxItemProps {\n    modelValue?: boolean | 'indeterminate'\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuCheckboxItemProps>()\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean | 'indeterminate']\n}>()\n\nconst classes = computed(() =>\n    cn(\n        'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',\n        'font-bold outline-none transition-colors',\n        'focus:bg-brutal-accent focus:text-brutal-fg',\n        'focus-visible:ring-2 focus-visible:ring-brutal-ring',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DropdownMenuCheckboxItemPrimitive :model-value=\"modelValue\" :class=\"classes\" @update:model-value=\"emit('update:modelValue', $event)\">\n        <span class=\"absolute left-2 flex h-4 w-4 items-center justify-center\">\n            <DropdownMenuItemIndicatorPrimitive>\n                <Check class=\"h-4 w-4 stroke-[3]\" />\n            </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        <slot />\n    </DropdownMenuCheckboxItemPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    DropdownMenuPortal as DropdownMenuPortalPrimitive,\n    DropdownMenuContent as DropdownMenuContentPrimitive,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuContentProps {\n    sideOffset?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<DropdownMenuContentProps>(), {\n    sideOffset: 6,\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(\n        'z-50 min-w-[8rem] overflow-hidden p-1',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal rounded-brutal',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DropdownMenuPortalPrimitive>\n        <DropdownMenuContentPrimitive :side-offset=\"sideOffset\" :class=\"classes\">\n            <slot />\n        </DropdownMenuContentPrimitive>\n    </DropdownMenuPortalPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DropdownMenuItem as DropdownMenuItemPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuItemProps {\n    inset?: boolean\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuItemProps>()\n\nconst classes = computed(() =>\n    cn(\n        'relative flex cursor-pointer select-none items-center px-3 py-2',\n        'font-bold outline-none transition-colors',\n        'focus:bg-brutal-accent focus:text-brutal-fg',\n        'focus-visible:ring-2 focus-visible:ring-brutal-ring',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.inset && 'pl-8',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DropdownMenuItemPrimitive :class=\"classes\">\n        <slot />\n    </DropdownMenuItemPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DropdownMenuLabel as DropdownMenuLabelPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuLabelProps {\n    inset?: boolean\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuLabelProps>()\n\nconst classes = computed(() =>\n    cn(\n        'px-3 py-2 text-sm font-black tracking-wide',\n        props.inset && 'pl-8',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DropdownMenuLabelPrimitive :class=\"classes\">\n        <slot />\n    </DropdownMenuLabelPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuRadioItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,\n    DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,\n} from 'reka-ui'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuRadioItemProps {\n    value: string\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuRadioItemProps>()\n\nconst classes = computed(() =>\n    cn(\n        'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',\n        'font-bold outline-none transition-colors',\n        'focus:bg-brutal-accent focus:text-brutal-fg',\n        'focus-visible:ring-2 focus-visible:ring-brutal-ring',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DropdownMenuRadioItemPrimitive :value=\"value\" :class=\"classes\">\n        <span class=\"absolute left-2 flex h-4 w-4 items-center justify-center\">\n            <DropdownMenuItemIndicatorPrimitive>\n                <Circle class=\"h-2 w-2 fill-current\" />\n            </DropdownMenuItemIndicatorPrimitive>\n        </span>\n        <slot />\n    </DropdownMenuRadioItemPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DropdownMenuSeparator as DropdownMenuSeparatorPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuSeparatorProps {\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuSeparatorProps>()\n\nconst classes = computed(() =>\n    cn('-mx-1 my-1 h-[3px] bg-brutal-fg', props.class)\n)\n</script>\n\n<template>\n    <DropdownMenuSeparatorPrimitive :class=\"classes\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuShortcut.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuShortcutProps {\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuShortcutProps>()\n\nconst classes = computed(() =>\n    cn('ml-auto text-xs tracking-widest opacity-60 font-bold', props.class)\n)\n</script>\n\n<template>\n    <span :class=\"classes\">\n        <slot />\n    </span>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuSubContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DropdownMenuSubContent as DropdownMenuSubContentPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuSubContentProps {\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuSubContentProps>()\n\nconst classes = computed(() =>\n    cn(\n        'z-50 min-w-[8rem] overflow-hidden p-1',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal rounded-brutal',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DropdownMenuSubContentPrimitive :class=\"classes\">\n        <slot />\n    </DropdownMenuSubContentPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive } from 'reka-ui'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface DropdownMenuSubTriggerProps {\n    inset?: boolean\n    class?: string\n}\n\nconst props = defineProps<DropdownMenuSubTriggerProps>()\n\nconst classes = computed(() =>\n    cn(\n        'flex cursor-pointer select-none items-center px-3 py-2',\n        'font-bold outline-none',\n        'focus:bg-brutal-accent focus:text-brutal-fg data-[state=open]:bg-brutal-accent data-[state=open]:text-brutal-fg',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'focus-visible:ring-2 focus-visible:ring-brutal-ring',\n        props.inset && 'pl-8',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <DropdownMenuSubTriggerPrimitive :class=\"classes\">\n        <slot />\n        <ChevronRight class=\"ml-auto h-4 w-4 stroke-[3]\" />\n    </DropdownMenuSubTriggerPrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -38,7 +78,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -68,7 +112,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -78,16 +125,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/empty-state.json b/packages/registry/registry/empty-state.json
index 401e4c7..7ed7a91 100644
--- a/packages/registry/registry/empty-state.json
+++ b/packages/registry/registry/empty-state.json
@@ -3,17 +3,17 @@
   "name": "empty-state",
   "type": "registry:ui",
   "title": "Empty State",
-  "description": "A highly customizable neo-brutalist Empty State component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Empty State component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "components/ui/empty-state.tsx",
-      "content": "import * as React from 'react';\nimport { Plus, FolderOpen } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n    title?: string;\n    description?: string;\n    actionText?: string;\n    onActionClick?: () => void;\n    icon?: React.ReactNode;\n}\n\nexport function EmptyState({\n    title = 'No active deployments found',\n    description = 'You haven\\'t launched any brutalist web projects on this cluster node. Deploy your first static directory in seconds.',\n    actionText = 'Deploy New App',\n    onActionClick,\n    icon,\n    className,\n    ...props\n}: EmptyStateProps) {\n    return (\n        <div\n            className={`flex flex-col items-center justify-center text-center p-8 md:p-12 border-3 border-brutal bg-white dark:bg-gray-800 rounded-none shadow-brutal transition-colors duration-200 ${className || ''}`}\n            {...props}\n        >\n            <div className=\"relative mb-6\">\n                <div className=\"absolute inset-0 bg-brutal-accent translate-x-2 translate-y-2 border-3 border-brutal\" />\n                <div className=\"relative z-10 h-16 w-16 bg-white dark:bg-gray-700 border-3 border-brutal flex items-center justify-center text-brutal-fg\">\n                    {icon || <FolderOpen className=\"h-8 w-8 stroke-[2.5]\" />}\n                </div>\n            </div>\n\n            <h3 className=\"text-2xl font-black mb-3 tracking-tight text-brutal-fg leading-none\">\n                {title}\n            </h3>\n\n            <p className=\"max-w-[440px] text-sm font-bold text-gray-600 dark:text-gray-400 mb-6 leading-relaxed\">\n                {description}\n            </p>\n\n            <Button\n                variant=\"primary\"\n                className=\"font-black text-sm gap-2\"\n                onClick={onActionClick}\n            >\n                <Plus className=\"h-4 w-4 stroke-[3]\" />\n                <span>{actionText}</span>\n            </Button>\n        </div>\n    );\n}\n",
+      "path": "components/ui/empty-state/EmptyState.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue'\nimport { FolderOpen, Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Button from '@/components/ui/button/Button.vue'\n\ninterface EmptyStateProps {\n    title?: string\n    description?: string\n    actionText?: string\n    icon?: Component\n    class?: string\n}\n\nconst props = withDefaults(defineProps<EmptyStateProps>(), {\n    title: undefined,\n    description: '',\n    actionText: undefined,\n    icon: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('emptyState.defaultTitle'))\nconst resolvedActionText = computed(() => props.actionText ?? t('emptyState.defaultActionText'))\n\nconst emit = defineEmits<{\n    action: []\n}>()\n\nconst rootClasses = computed(() => cn('flex flex-col items-center justify-center py-16 px-4', props.class))\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"relative mb-6\">\n            <div class=\"absolute inset-0 bg-brutal-muted border-3 border-brutal translate-x-2 translate-y-2\" />\n            <div class=\"relative h-20 w-20 flex items-center justify-center bg-brutal-accent border-3 border-brutal shadow-brutal\">\n                <component :is=\"icon || FolderOpen\" class=\"h-10 w-10 stroke-[2.5]\" />\n            </div>\n        </div>\n        <h3 class=\"text-xl font-black tracking-tight\">\n{{ resolvedTitle }}\n</h3>\n        <p v-if=\"description\" class=\"mt-2 text-sm text-brutal-muted-foreground font-medium text-center max-w-md\">\n{{ description }}\n</p>\n        <Button v-if=\"resolvedActionText\" variant=\"primary\" class=\"mt-6\" @click=\"emit('action')\">\n            <Plus class=\"mr-2 h-4 w-4 stroke-[3]\" />\n            {{ resolvedActionText }}\n        </Button>\n    </div>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -39,7 +39,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -69,7 +73,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -79,16 +86,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/error-card.json b/packages/registry/registry/error-card.json
new file mode 100644
index 0000000..73433c0
--- /dev/null
+++ b/packages/registry/registry/error-card.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "error-card",
+  "type": "registry:ui",
+  "title": "Error Card",
+  "description": "A highly customizable neo-brutalist Error Card component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "button",
+    "alert"
+  ],
+  "files": [
+    {
+      "path": "components/ui/error-card/ErrorCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { AlertTriangle, RotateCw, X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport Button from '@/components/ui/button/Button.vue'\nimport Alert from '@/components/ui/alert/Alert.vue'\nimport AlertTitle from '@/components/ui/alert/AlertTitle.vue'\nimport AlertDescription from '@/components/ui/alert/AlertDescription.vue'\n\ninterface ErrorCardProps {\n    title?: string\n    description?: string\n    retryText?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ErrorCardProps>(), {\n    title: undefined,\n    description: undefined,\n    retryText: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    retry: []\n    dismiss: []\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-md', props.class))\n\nconst resolvedTitle = computed(() => props.title ?? t('errorCard.defaultTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('errorCard.defaultDescription'))\nconst resolvedRetryText = computed(() => props.retryText ?? t('errorCard.defaultRetryText'))\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <Alert variant=\"danger\" class=\"mb-4\">\n            <AlertTriangle class=\"h-5 w-5\" />\n            <AlertTitle>{{ resolvedTitle }}</AlertTitle>\n            <AlertDescription>{{ resolvedDescription }}</AlertDescription>\n        </Alert>\n        <CardContent>\n            <div class=\"flex items-center justify-end gap-3\">\n                <Button variant=\"ghost\" size=\"sm\" @click=\"emit('dismiss')\">\n                    <X class=\"mr-1 h-4 w-4 stroke-[3]\" />\n                    {{ t('errorCard.dismiss') }}\n                </Button>\n                <Button variant=\"primary\" size=\"sm\" @click=\"emit('retry')\">\n                    <RotateCw class=\"mr-1 h-4 w-4 stroke-[3]\" />\n                    {{ resolvedRetryText }}\n                </Button>\n            </div>\n            <slot name=\"actions\" />\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/faq-section.json b/packages/registry/registry/faq-section.json
new file mode 100644
index 0000000..dacc438
--- /dev/null
+++ b/packages/registry/registry/faq-section.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "faq-section",
+  "type": "registry:ui",
+  "title": "Faq Section",
+  "description": "A highly customizable neo-brutalist Faq Section component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "accordion",
+    "card",
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "components/ui/faq-section/FaqSection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Accordion from '@/components/ui/accordion/Accordion.vue'\nimport AccordionItem from '@/components/ui/accordion/AccordionItem.vue'\nimport AccordionTrigger from '@/components/ui/accordion/AccordionTrigger.vue'\nimport AccordionContent from '@/components/ui/accordion/AccordionContent.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\n\nexport interface FaqItem {\n    question: string\n    answer: string\n}\n\ninterface FaqSectionProps {\n    title?: string\n    subtitle?: string\n    items?: FaqItem[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<FaqSectionProps>(), {\n    title: undefined,\n    subtitle: undefined,\n    items: () => [],\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'item-click': [index: number]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('faqSection.defaultTitle'))\nconst resolvedSubtitle = computed(() => props.subtitle ?? t('faqSection.defaultSubtitle'))\n\nconst rootClasses = computed(() => cn('w-full max-w-3xl mx-auto', props.class))\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\">\n            <div class=\"text-center mb-8\">\n                <h2 class=\"text-3xl font-black tracking-tight\">\n                    {{ resolvedTitle }}\n                </h2>\n                <p v-if=\"resolvedSubtitle\" class=\"mt-2 text-brutal-muted-foreground font-medium\">\n                    {{ resolvedSubtitle }}\n                </p>\n            </div>\n        </slot>\n\n        <slot>\n            <Card variant=\"flat\" class=\"p-0\">\n                <Accordion type=\"single\" collapsible class=\"w-full\">\n                    <AccordionItem\n                        v-for=\"(item, index) in items\"\n                        :key=\"index\"\n                        :value=\"String(index)\"\n                        class=\"mb-0 last:mb-0\"\n                        @click=\"emit('item-click', index)\"\n                    >\n                        <AccordionTrigger>\n                            <span class=\"flex items-center gap-3 text-left\">\n                                <Badge variant=\"secondary\" class=\"shrink-0\">\n                                    {{ index + 1 }}\n                                </Badge>\n                                <span class=\"font-bold\">{{ item.question }}</span>\n                            </span>\n                        </AccordionTrigger>\n                        <AccordionContent>\n                            <p class=\"text-brutal-muted-foreground font-medium pl-10\">\n                                {{ item.answer }}\n                            </p>\n                        </AccordionContent>\n                    </AccordionItem>\n                </Accordion>\n            </Card>\n        </slot>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/feedback-form.json b/packages/registry/registry/feedback-form.json
new file mode 100644
index 0000000..5c691d2
--- /dev/null
+++ b/packages/registry/registry/feedback-form.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "feedback-form",
+  "type": "registry:ui",
+  "title": "Feedback Form",
+  "description": "A highly customizable neo-brutalist Feedback Form component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "input",
+    "textarea",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "components/ui/feedback-form/FeedbackForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Send } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport CardDescription from '@/components/ui/card/CardDescription.vue'\nimport Input from '@/components/ui/input/Input.vue'\nimport Textarea from '@/components/ui/textarea/Textarea.vue'\nimport Button from '@/components/ui/button/Button.vue'\n\ninterface FeedbackFormProps {\n    title?: string\n    description?: string\n    submitText?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<FeedbackFormProps>(), {\n    title: undefined,\n    description: undefined,\n    submitText: undefined,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    submit: [payload: { name: string; email: string; subject: string; message: string }]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('feedbackForm.defaultTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('feedbackForm.defaultDescription'))\nconst resolvedSubmitText = computed(() => props.submitText ?? t('feedbackForm.defaultSubmitText'))\nconst nameLabel = computed(() => t('feedbackForm.nameLabel'))\nconst emailLabel = computed(() => t('feedbackForm.emailLabel'))\nconst subjectLabel = computed(() => t('feedbackForm.subjectLabel'))\nconst messageLabel = computed(() => t('feedbackForm.messageLabel'))\n\nconst name = ref('')\nconst email = ref('')\nconst subject = ref('')\nconst message = ref('')\n\nconst rootClasses = computed(() => cn('w-full max-w-2xl mx-auto', props.class))\n\nfunction handleSubmit() {\n    emit('submit', {\n        name: name.value,\n        email: email.value,\n        subject: subject.value,\n        message: message.value,\n    })\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\">\n            <div class=\"text-center mb-8\">\n                <h2 class=\"text-3xl font-black tracking-tight\">\n                    {{ resolvedTitle }}\n                </h2>\n                <p v-if=\"resolvedDescription\" class=\"mt-2 text-brutal-muted-foreground font-medium\">\n                    {{ resolvedDescription }}\n                </p>\n            </div>\n        </slot>\n\n        <slot>\n            <Card variant=\"default\">\n                <CardHeader>\n                    <CardTitle class=\"text-xl\">\n                        {{ resolvedTitle }}\n                    </CardTitle>\n                    <CardDescription v-if=\"resolvedDescription\">\n                        {{ resolvedDescription }}\n                    </CardDescription>\n                </CardHeader>\n                <CardContent>\n                    <form class=\"space-y-4\" @submit.prevent=\"handleSubmit\">\n                        <div class=\"space-y-2\">\n                            <label class=\"text-sm font-bold text-brutal-fg\">\n                                {{ nameLabel }}\n                            </label>\n                            <Input v-model=\"name\" :placeholder=\"nameLabel\" />\n                        </div>\n                        <div class=\"space-y-2\">\n                            <label class=\"text-sm font-bold text-brutal-fg\">\n                                {{ emailLabel }}\n                            </label>\n                            <Input v-model=\"email\" type=\"email\" :placeholder=\"emailLabel\" />\n                        </div>\n                        <div class=\"space-y-2\">\n                            <label class=\"text-sm font-bold text-brutal-fg\">\n                                {{ subjectLabel }}\n                            </label>\n                            <Input v-model=\"subject\" :placeholder=\"subjectLabel\" />\n                        </div>\n                        <div class=\"space-y-2\">\n                            <label class=\"text-sm font-bold text-brutal-fg\">\n                                {{ messageLabel }}\n                            </label>\n                            <Textarea v-model=\"message\" :placeholder=\"messageLabel\" />\n                        </div>\n                        <Button variant=\"primary\" type=\"submit\" class=\"w-full\">\n                            <Send class=\"h-4 w-4 mr-2\" />\n                            {{ resolvedSubmitText }}\n                        </Button>\n                    </form>\n                </CardContent>\n            </Card>\n        </slot>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/file-card.json b/packages/registry/registry/file-card.json
new file mode 100644
index 0000000..0a866e4
--- /dev/null
+++ b/packages/registry/registry/file-card.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "file-card",
+  "type": "registry:ui",
+  "title": "File Card",
+  "description": "A highly customizable neo-brutalist File Card component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "badge",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "components/ui/file-card/FileCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { FileIcon, Download } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\nimport Button from '@/components/ui/button/Button.vue'\n\ninterface FileCardProps {\n    fileName?: string\n    fileSize?: string\n    fileType?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<FileCardProps>(), {\n    fileName: undefined,\n    fileSize: '',\n    fileType: '',\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    download: []\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-sm', props.class))\n\nconst resolvedFileName = computed(() => props.fileName ?? t('fileCard.defaultFileName'))\nconst resolvedDownload = computed(() => t('fileCard.download'))\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <CardContent>\n            <div class=\"flex items-start gap-4\">\n                <div class=\"shrink-0 h-12 w-12 flex items-center justify-center bg-brutal-accent border-3 border-brutal shadow-brutal-sm\">\n                    <FileIcon class=\"h-6 w-6 stroke-[2.5]\" />\n                </div>\n                <div class=\"flex-1 min-w-0\">\n                    <p class=\"font-black text-sm truncate\">\n{{ resolvedFileName }}\n</p>\n                    <div class=\"mt-1 flex items-center gap-2\">\n                        <Badge v-if=\"fileType\" variant=\"secondary\" size=\"sm\">\n                            {{ fileType }}\n                        </Badge>\n                        <span v-if=\"fileSize\" class=\"text-xs text-brutal-muted-foreground font-medium\">\n                            {{ fileSize }}\n                        </span>\n                    </div>\n                </div>\n            </div>\n            <Button variant=\"primary\" size=\"sm\" class=\"mt-4 w-full\" @click=\"emit('download')\">\n                <Download class=\"mr-2 h-4 w-4 stroke-[3]\" />\n                {{ resolvedDownload }}\n            </Button>\n            <slot name=\"actions\" />\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/footer-section.json b/packages/registry/registry/footer-section.json
new file mode 100644
index 0000000..c075cd1
--- /dev/null
+++ b/packages/registry/registry/footer-section.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "footer-section",
+  "type": "registry:ui",
+  "title": "Footer Section",
+  "description": "A highly customizable neo-brutalist Footer Section component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "button",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "components/ui/footer-section/FooterSection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Button from '@/components/ui/button/Button.vue'\nimport Separator from '@/components/ui/separator/Separator.vue'\n\nexport interface FooterLink {\n    label: string\n    href?: string\n}\n\nexport interface FooterLinkGroup {\n    title: string\n    links: FooterLink[]\n}\n\ninterface FooterSectionProps {\n    logoText?: string\n    description?: string\n    linkGroups?: FooterLinkGroup[]\n    copyright?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<FooterSectionProps>(), {\n    logoText: undefined,\n    description: undefined,\n    linkGroups: () => [],\n    copyright: undefined,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'link-click': [payload: { groupIndex: number; linkIndex: number }]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedLogoText = computed(() => props.logoText ?? t('footerSection.defaultLogoText'))\nconst resolvedDescription = computed(() => props.description ?? t('footerSection.defaultDescription'))\nconst resolvedCopyright = computed(() => props.copyright ?? t('footerSection.defaultCopyright'))\n\nconst rootClasses = computed(() =>\n    cn(\n        'w-full',\n        'bg-brutal-bg border-3 border-t border-brutal',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <footer :class=\"rootClasses\">\n        <div class=\"max-w-7xl mx-auto px-4 md:px-6 py-10\">\n            <slot name=\"header\">\n                <div class=\"mb-8\">\n                    <span class=\"text-xl font-black tracking-tight text-brutal-fg\">\n                        {{ resolvedLogoText }}\n                    </span>\n                    <p v-if=\"resolvedDescription\" class=\"mt-2 text-sm text-brutal-muted-foreground font-medium max-w-sm\">\n                        {{ resolvedDescription }}\n                    </p>\n                </div>\n            </slot>\n\n            <slot>\n                <div v-if=\"linkGroups.length > 0\" class=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-8\">\n                    <div v-for=\"(group, groupIndex) in linkGroups\" :key=\"groupIndex\">\n                        <h3 class=\"font-black text-sm tracking-wide text-brutal-fg mb-3\">\n                            {{ group.title }}\n                        </h3>\n                        <ul class=\"space-y-2\">\n                            <li v-for=\"(link, linkIndex) in group.links\" :key=\"linkIndex\">\n                                <Button\n                                    variant=\"ghost\"\n                                    size=\"sm\"\n                                    class=\"px-0 text-brutal-muted-foreground hover:text-brutal-fg\"\n                                    @click=\"emit('link-click', { groupIndex, linkIndex })\"\n                                >\n                                    {{ link.label }}\n                                </Button>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </slot>\n\n            <Separator />\n\n            <slot name=\"footer\">\n                <div class=\"pt-6 text-center\">\n                    <p class=\"text-sm text-brutal-muted-foreground font-medium\">\n                        {{ resolvedCopyright }}\n                    </p>\n                </div>\n            </slot>\n        </div>\n    </footer>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/form.json b/packages/registry/registry/form.json
index 670e5a3..706323c 100644
--- a/packages/registry/registry/form.json
+++ b/packages/registry/registry/form.json
@@ -3,20 +3,55 @@
   "name": "form",
   "type": "registry:ui",
   "title": "Form",
-  "description": "A highly customizable neo-brutalist Form component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Form component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "react-hook-form",
+    "vee-validate",
+    "@vee-validate/zod",
     "zod",
-    "@radix-ui/react-label",
-    "@radix-ui/react-slot"
+    "reka-ui"
   ],
   "registryDependencies": [
     "label"
   ],
   "files": [
     {
-      "path": "components/ui/form.tsx",
-      "content": "import * as React from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n    Controller,\n    ControllerProps,\n    FieldPath,\n    FieldValues,\n    FormProvider,\n    useFormContext,\n} from 'react-hook-form';\n\nimport { cn } from '@/lib/utils';\nimport { Label } from '@/components/ui/label';\n\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n    TFieldValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n    name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n    {} as FormFieldContextValue\n);\n\nconst FormField = <\n    TFieldValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n    ...props\n}: ControllerProps<TFieldValues, TName>) => {\n    return (\n        <FormFieldContext.Provider value={{ name: props.name }}>\n            <Controller {...props} />\n        </FormFieldContext.Provider>\n    );\n};\n\nconst useFormField = () => {\n    const fieldContext = React.useContext(FormFieldContext);\n    const itemContext = React.useContext(FormItemContext);\n    const { getFieldState, formState } = useFormContext();\n\n    const fieldState = getFieldState(fieldContext.name, formState);\n\n    if (!fieldContext) {\n        throw new Error('useFormField should be used within <FormField>');\n    }\n\n    const { id } = itemContext;\n\n    return {\n        id,\n        name: fieldContext.name,\n        formItemId: `${id}-form-item`,\n        formDescriptionId: `${id}-form-item-description`,\n        formMessageId: `${id}-form-item-message`,\n        ...fieldState,\n    };\n};\n\ntype FormItemContextValue = {\n    id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n    {} as FormItemContextValue\n);\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n    ({ className, ...props }, ref) => {\n        const id = React.useId();\n\n        return (\n            <FormItemContext.Provider value={{ id }}>\n                <div ref={ref} className={cn('space-y-1.5', className)} {...props} />\n            </FormItemContext.Provider>\n        );\n    }\n);\nFormItem.displayName = 'FormItem';\n\nconst FormLabel = React.forwardRef<\n    React.ElementRef<typeof LabelPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n    const { error, formItemId } = useFormField();\n\n    return (\n        <Label\n            ref={ref}\n            className={cn(error && 'text-[#EF476F]', className)}\n            htmlFor={formItemId}\n            {...props}\n        />\n    );\n});\nFormLabel.displayName = 'FormLabel';\n\nconst FormControl = React.forwardRef<\n    React.ElementRef<typeof Slot>,\n    React.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n    return (\n        <Slot\n            ref={ref}\n            id={formItemId}\n            aria-describedby={\n                !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\n            }\n            aria-invalid={!!error}\n            {...props}\n        />\n    );\n});\nFormControl.displayName = 'FormControl';\n\nconst FormDescription = React.forwardRef<\n    HTMLParagraphElement,\n    React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n    const { formDescriptionId } = useFormField();\n\n    return (\n        <p\n            ref={ref}\n            id={formDescriptionId}\n            className={cn('text-xs text-gray-500 dark:text-gray-400 font-bold', className)}\n            {...props}\n        />\n    );\n});\nFormDescription.displayName = 'FormDescription';\n\nconst FormMessage = React.forwardRef<\n    HTMLParagraphElement,\n    React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message) : children;\n\n    if (!body) {\n        return null;\n    }\n\n    return (\n        <p\n            ref={ref}\n            id={formMessageId}\n            className={cn('text-xs font-bold text-[#EF476F]', className)}\n            {...props}\n        >\n            {body}\n        </p>\n    );\n});\nFormMessage.displayName = 'FormMessage';\n\nexport {\n    useFormField,\n    Form,\n    FormItem,\n    FormLabel,\n    FormControl,\n    FormDescription,\n    FormMessage,\n    FormField,\n};\n",
+      "path": "components/ui/form/Form.vue",
+      "content": "<script setup lang=\"ts\">\nimport { provide } from 'vue'\nimport { useForm, type FormContext as VeeFormContext } from 'vee-validate'\nimport { formContextKey } from '@/components/ui/form/form-context'\n\ninterface FormProps {\n    class?: string\n    initialValues?: Record<string, unknown>\n    validationSchema?: unknown\n}\n\nconst props = defineProps<FormProps>()\n\nconst emit = defineEmits<{\n    submit: [values: Record<string, unknown>]\n}>()\n\nconst { handleSubmit, ...formContext } = useForm({\n    initialValues: props.initialValues,\n    validationSchema: props.validationSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n    emit('submit', values)\n})\n\nprovide(formContextKey, formContext as unknown as VeeFormContext)\n</script>\n\n<template>\n    <form :class=\"props.class\" @submit=\"onSubmit\">\n        <slot />\n    </form>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/form/FormControl.vue",
+      "content": "<script setup lang=\"ts\">\nimport { inject, ref, type Ref } from 'vue'\nimport { formFieldKey, formItemKey } from '@/components/ui/form/form-context'\n\ninterface FormControlProps {\n    class?: string\n}\n\ndefineProps<FormControlProps>()\n\nconst fieldContext = inject(formFieldKey, {\n    name: '',\n    error: ref<string | undefined>(undefined) as Ref<string | undefined>,\n    value: ref<unknown>(undefined),\n    setValue: () => {},\n})\nconst itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })\n</script>\n\n<template>\n    <slot\n        :id=\"itemContext.formItemId\"\n        :aria-describedby=\"!fieldContext.error?.value ? itemContext.formDescriptionId : `${itemContext.formDescriptionId} ${itemContext.formMessageId}`\"\n        :aria-invalid=\"!!fieldContext.error?.value\"\n    />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/form/FormDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { formItemKey } from '@/components/ui/form/form-context'\n\ninterface FormDescriptionProps {\n    class?: string\n}\n\nconst props = defineProps<FormDescriptionProps>()\n\nconst itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })\n\nconst classes = computed(() =>\n    cn('text-sm text-brutal-muted-foreground font-medium', props.class)\n)\n</script>\n\n<template>\n    <p :id=\"itemContext.formDescriptionId\" :class=\"classes\">\n        <slot />\n    </p>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/form/FormField.vue",
+      "content": "<script setup lang=\"ts\">\nimport { provide, computed } from 'vue'\nimport { useField } from 'vee-validate'\nimport { formFieldKey } from '@/components/ui/form/form-context'\n\ninterface FormFieldProps {\n    name: string\n}\n\nconst props = defineProps<FormFieldProps>()\n\nconst fieldName = computed(() => props.name)\nconst { errorMessage, value, setValue } = useField(fieldName)\n\nprovide(formFieldKey, {\n    name: props.name,\n    error: errorMessage,\n    value,\n    setValue,\n})\n</script>\n\n<template>\n    <slot />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/form/FormItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, provide, useId } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { formItemKey } from '@/components/ui/form/form-context'\n\ninterface FormItemProps {\n    class?: string\n}\n\nconst props = defineProps<FormItemProps>()\n\nconst id = useId()\n\nprovide(formItemKey, {\n    id,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n})\n\nconst classes = computed(() => cn('space-y-2', props.class))\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/form/FormLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, inject, ref } from 'vue'\nimport { cn } from '@/lib/utils'\nimport LabelRoot from '@/components/ui/label/Label.vue'\nimport { formFieldKey, formItemKey } from '@/components/ui/form/form-context'\n\ninterface FormLabelProps {\n    class?: string\n}\n\nconst props = defineProps<FormLabelProps>()\n\nconst fieldContext = inject(formFieldKey, { name: '', error: computed(() => undefined), value: ref<unknown>(undefined), setValue: () => {} })\nconst itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })\n\nconst classes = computed(() =>\n    cn(\n        fieldContext.error.value && 'text-brutal-destructive',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <LabelRoot :class=\"classes\" :for=\"itemContext.formItemId\">\n        <slot />\n    </LabelRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/form/FormMessage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, inject, ref } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { formFieldKey, formItemKey } from '@/components/ui/form/form-context'\n\ninterface FormMessageProps {\n    class?: string\n}\n\nconst props = defineProps<FormMessageProps>()\n\nconst fieldContext = inject(formFieldKey, { name: '', error: computed(() => undefined), value: ref<unknown>(undefined), setValue: () => {} })\nconst itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })\n\nconst body = computed(() => fieldContext.error.value)\n\nconst classes = computed(() =>\n    cn('text-sm font-black text-brutal-destructive', props.class)\n)\n</script>\n\n<template>\n    <p v-if=\"body\" :id=\"itemContext.formMessageId\" role=\"alert\" :class=\"classes\">\n        {{ body }}\n    </p>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/form/form-context.ts",
+      "content": "import type { InjectionKey, Ref } from 'vue'\nimport type { FormContext as VeeFormContext } from 'vee-validate'\n\nexport interface FormFieldContext {\n    name: string\n    error: Ref<string | undefined>\n    value: Ref<unknown>\n    setValue: (value: unknown) => void\n}\n\nexport interface FormItemContext {\n    id: string\n    formItemId: string\n    formDescriptionId: string\n    formMessageId: string\n}\n\nexport const formContextKey: InjectionKey<VeeFormContext> = Symbol('formContext')\nexport const formFieldKey: InjectionKey<FormFieldContext> = Symbol('formField')\nexport const formItemKey: InjectionKey<FormItemContext> = Symbol('formItem')\n",
       "type": "registry:ui"
     }
   ],
@@ -42,7 +77,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -72,7 +111,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -82,16 +124,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/gallery-section.json b/packages/registry/registry/gallery-section.json
new file mode 100644
index 0000000..ebe47b3
--- /dev/null
+++ b/packages/registry/registry/gallery-section.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "gallery-section",
+  "type": "registry:ui",
+  "title": "Gallery Section",
+  "description": "A highly customizable neo-brutalist Gallery Section component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "embla-carousel-vue",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "carousel",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "components/ui/gallery-section/GallerySection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Image as ImageIcon } from 'lucide-vue-next'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Carousel from '@/components/ui/carousel/Carousel.vue'\nimport CarouselItem from '@/components/ui/carousel/CarouselItem.vue'\nimport Card from '@/components/ui/card/Card.vue'\n\nexport interface GalleryItem {\n    src: string\n    alt: string\n    caption?: string\n}\n\ninterface GallerySectionProps {\n    title?: string\n    items?: GalleryItem[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<GallerySectionProps>(), {\n    title: undefined,\n    items: () => [],\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'item-click': [index: number]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('gallerySection.defaultTitle'))\nconst resolvedNoItems = computed(() => t('gallerySection.noItems'))\n\nfunction handleItemClick(index: number) {\n    emit('item-click', index)\n}\n\nconst rootClasses = computed(() => cn('w-full max-w-4xl mx-auto', props.class))\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\">\n            <div class=\"mb-6\">\n                <h2 class=\"text-3xl font-black tracking-tight\">\n                    {{ resolvedTitle }}\n                </h2>\n            </div>\n        </slot>\n\n        <slot>\n            <Card variant=\"flat\" class=\"p-4\">\n                <Carousel\n                    :show-arrows=\"true\"\n                    :show-dots=\"true\"\n                    size=\"full\"\n                >\n                    <CarouselItem\n                        v-for=\"(item, index) in items\"\n                        :key=\"index\"\n                    >\n                        <div\n                            class=\"flex flex-col items-center justify-center p-4 cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\"\n                            @click=\"handleItemClick(index)\"\n                        >\n                            <div class=\"w-full border-3 border-brutal shadow-brutal overflow-hidden bg-brutal-bg\">\n                                <img\n                                    :src=\"item.src\"\n                                    :alt=\"item.alt\"\n                                    class=\"w-full h-auto object-cover\"\n                                    loading=\"lazy\"\n                                >\n                            </div>\n                            <p v-if=\"item.caption\" class=\"mt-3 text-sm font-bold text-brutal-fg text-center\">\n                                {{ item.caption }}\n                            </p>\n                        </div>\n                    </CarouselItem>\n                </Carousel>\n\n                <div v-if=\"items.length === 0\" class=\"flex flex-col items-center justify-center py-12 text-brutal-muted-foreground\">\n                    <ImageIcon class=\"w-12 h-12 mb-3 stroke-[2]\" />\n                    <p class=\"font-bold\">\n                        {{ resolvedNoItems }}\n                    </p>\n                </div>\n            </Card>\n        </slot>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/glitch-text.json b/packages/registry/registry/glitch-text.json
new file mode 100644
index 0000000..ceef72a
--- /dev/null
+++ b/packages/registry/registry/glitch-text.json
@@ -0,0 +1,110 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "glitch-text",
+  "type": "registry:ui",
+  "title": "Glitch Text",
+  "description": "A highly customizable neo-brutalist Glitch Text component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/glitch-text/GlitchText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, onUpdated } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useReducedMotion } from '@/composables/useReducedMotion'\nimport { glitchTextVariants } from '@/components/ui/glitch-text/glitch-text-variants'\n\ntype GlitchTextVariantProps = VariantProps<typeof glitchTextVariants>\n\ninterface GlitchTextProps {\n    text?: string\n    trigger?: 'hover' | 'click' | 'autoplay' | 'none'\n    interval?: number\n    speed?: NonNullable<GlitchTextVariantProps['speed']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<GlitchTextProps>(), {\n    text: '',\n    trigger: 'hover',\n    interval: 3000,\n    speed: 'medium',\n    class: '',\n})\n\nconst elementRef = ref<HTMLElement | null>(null)\nconst isActive = ref(false)\nconst prefersReducedMotion = useReducedMotion()\n\nconst displayText = ref(props.text)\n\nfunction updateDisplayText() {\n    if (elementRef.value) {\n        displayText.value = elementRef.value.textContent || props.text\n    } else {\n        displayText.value = props.text\n    }\n}\n\nonMounted(updateDisplayText)\nonUpdated(updateDisplayText)\n\nlet autoplayTimer: any = null\nlet autoplayStopTimer: any = null\n\nconst startAutoplay = () => {\n    stopAutoplay()\n    autoplayTimer = setInterval(() => {\n        if (prefersReducedMotion.value) return\n        isActive.value = true\n        // 开启抖动 1 秒后自动关闭，等待下一个周期，产生节奏感\n        autoplayStopTimer = setTimeout(() => {\n            isActive.value = false\n        }, 1000)\n    }, props.interval)\n}\n\nconst stopAutoplay = () => {\n    if (autoplayTimer) {\n        clearInterval(autoplayTimer)\n        autoplayTimer = null\n    }\n    if (autoplayStopTimer) {\n        clearTimeout(autoplayStopTimer)\n        autoplayStopTimer = null\n    }\n}\n\nonMounted(() => {\n    if (props.trigger === 'autoplay') {\n        startAutoplay()\n    }\n})\n\nonUnmounted(() => {\n    stopAutoplay()\n})\n\nconst onMouseEnter = () => {\n    if (props.trigger === 'hover') {\n        isActive.value = true\n    } else if (props.trigger === 'autoplay') {\n        // Autoplay 模式下，hover 时暂停\n        isActive.value = false\n        stopAutoplay()\n    }\n}\n\nconst onMouseLeave = () => {\n    if (props.trigger === 'hover') {\n        isActive.value = false\n    } else if (props.trigger === 'autoplay') {\n        // 离开后重新开启\n        startAutoplay()\n    }\n}\n\nconst onClick = () => {\n    if (props.trigger === 'click') {\n        isActive.value = !isActive.value\n    }\n}\n\n// 暴露 API 供外部程序化控制\nconst play = () => {\n    isActive.value = true\n}\n\nconst stop = () => {\n    isActive.value = false\n}\n\ndefineExpose({\n    play,\n    stop,\n})\n\nconst classes = computed(() =>\n    cn(\n        glitchTextVariants({ speed: props.speed }),\n        isActive.value && !prefersReducedMotion.value ? 'is-glitching' : '',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <span\n        ref=\"elementRef\"\n        :class=\"classes\"\n        :data-text=\"displayText\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @click=\"onClick\"\n        role=\"status\"\n        aria-live=\"polite\"\n    >\n        <slot>{{ text }}</slot>\n    </span>\n</template>\n\n<style scoped>\n.glitch-text::before,\n.glitch-text::after {\n    display: none;\n    content: attr(data-text);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: transparent;\n    clip-path: inset(0 0 0 0);\n}\n\n.glitch-text.is-glitching::before,\n.glitch-text.is-glitching::after {\n    display: block;\n}\n\n.glitch-text.is-glitching::before {\n    left: 2px;\n    text-shadow: -2px 0 var(--brutal-destructive, #EF476F);\n    animation: glitch-anim-1 var(--glitch-duration, 300ms) infinite linear alternate-reverse;\n}\n\n.glitch-text.is-glitching::after {\n    left: -2px;\n    text-shadow: -2px 0 var(--brutal-info, #4A90D9);\n    animation: glitch-anim-2 var(--glitch-duration, 300ms) infinite linear alternate-reverse;\n}\n\n@keyframes glitch-anim-1 {\n    0% {\n        clip-path: inset(20% 0 70% 0);\n        transform: skew(-5deg);\n    }\n    20% {\n        clip-path: inset(60% 0 10% 0);\n        transform: skew(5deg);\n    }\n    40% {\n        clip-path: inset(40% 0 50% 0);\n        transform: skew(-2deg);\n    }\n    60% {\n        clip-path: inset(80% 0 5% 0);\n        transform: skew(3deg);\n    }\n    80% {\n        clip-path: inset(10% 0 85% 0);\n        transform: skew(-4deg);\n    }\n    100% {\n        clip-path: inset(50% 0 35% 0);\n        transform: skew(1deg);\n    }\n}\n\n@keyframes glitch-anim-2 {\n    0% {\n        clip-path: inset(10% 0 85% 0);\n        transform: skew(4deg);\n    }\n    25% {\n        clip-path: inset(40% 0 45% 0);\n        transform: skew(-3deg);\n    }\n    50% {\n        clip-path: inset(70% 0 15% 0);\n        transform: skew(5deg);\n    }\n    75% {\n        clip-path: inset(25% 0 60% 0);\n        transform: skew(-2deg);\n    }\n    100% {\n        clip-path: inset(90% 0 2% 0);\n        transform: skew(3deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .glitch-text::before,\n    .glitch-text::after,\n    .glitch-text.is-glitching::before,\n    .glitch-text.is-glitching::after {\n        display: none !important;\n        animation: none !important;\n    }\n}\n</style>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/glitch-text/glitch-text-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const glitchTextVariants = cva(\n    [\n        'glitch-text',\n        'relative inline-block',\n        'font-black tracking-wide',\n        'text-brutal-fg',\n    ],\n    {\n        variants: {\n            speed: {\n                slow: '[--glitch-duration:800ms]',\n                medium: '[--glitch-duration:300ms]',\n                fast: '[--glitch-duration:100ms]',\n            },\n        },\n        defaultVariants: {\n            speed: 'medium',\n        },\n    }\n)\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "composables/useReducedMotion.ts",
+      "content": "import { onMounted, onUnmounted, ref } from 'vue'\n\nexport function useReducedMotion() {\n    const prefersReduced = ref(false)\n    let mediaQuery: MediaQueryList | null = null\n\n    const onChange = (e: MediaQueryListEvent) => {\n        prefersReduced.value = e.matches\n    }\n\n    onMounted(() => {\n        if (typeof window !== 'undefined') {\n            mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n            prefersReduced.value = mediaQuery.matches\n            mediaQuery.addEventListener('change', onChange)\n        }\n    })\n\n    onUnmounted(() => {\n        mediaQuery?.removeEventListener('change', onChange)\n    })\n\n    return prefersReduced\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/hardcore-input.json b/packages/registry/registry/hardcore-input.json
new file mode 100644
index 0000000..a63c835
--- /dev/null
+++ b/packages/registry/registry/hardcore-input.json
@@ -0,0 +1,112 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hardcore-input",
+  "type": "registry:ui",
+  "title": "Hardcore Input",
+  "description": "A highly customizable neo-brutalist Hardcore Input component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [
+    "form"
+  ],
+  "files": [
+    {
+      "path": "components/ui/hardcore-input/HardcoreInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, toRef, inject, onUnmounted, useId } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useAudioEngine } from '@/composables/useAudioEngine'\nimport { useLocale } from '@/composables/useLocale'\nimport { hardcoreInputVariants, hardcoreInputFaceVariants } from '@/components/ui/hardcore-input/hardcore-input-variants'\nimport { formFieldKey, type FormFieldContext } from '@/components/ui/form/form-context'\n\ninterface HardcoreInputProps {\n    modelValue?: string\n    sound?: boolean\n    rules?: Array<(val: string) => boolean | string>\n    shakeOnError?: boolean\n    type?: string\n    placeholder?: string\n    disabled?: boolean\n    readonly?: boolean\n    validateOn?: 'input' | 'blur' | 'submit'\n    class?: string\n}\n\nconst props = withDefaults(defineProps<HardcoreInputProps>(), {\n    modelValue: '',\n    sound: true,\n    rules: () => [],\n    shakeOnError: true,\n    type: 'text',\n    placeholder: '',\n    disabled: false,\n    readonly: false,\n    validateOn: 'blur',\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string]\n    'validationChange': [state: 'default' | 'success' | 'error', message?: string]\n}>()\n\nconst getUniqueId = () => {\n    try {\n        const id = useId()\n        return id.replace(/:/g, '-')\n    } catch {\n        return Math.random().toString(36).substring(2, 9)\n    }\n}\n\nconst errorId = `input-error-${getUniqueId()}`\n\nconst validationState = ref<'default' | 'success' | 'error'>('default')\nconst errorMessage = ref<string>('')\nconst triggerShake = ref(false)\n\nconst audioEngine = useAudioEngine(toRef(props, 'sound'))\nconst { t } = useLocale()\n\nconst formField = inject<FormFieldContext | null>(formFieldKey, null)\n\nonUnmounted(() => {\n    audioEngine.dispose()\n})\n\nconst validate = (value: string) => {\n    if (props.rules.length === 0) {\n        if (validationState.value !== 'default') {\n            validationState.value = 'default'\n            errorMessage.value = ''\n            emit('validationChange', 'default')\n        }\n        return\n    }\n\n    let isOk = true\n    let errText = ''\n\n    for (const rule of props.rules) {\n        const result = rule(value)\n        if (result !== true) {\n            isOk = false\n            errText = typeof result === 'string' ? result : t('hardcoreInput.invalidInput')\n            break\n        }\n    }\n\n    const prevState = validationState.value\n\n    if (!isOk) {\n        validationState.value = 'error'\n        errorMessage.value = errText\n        \n        if (prevState !== 'error') {\n            audioEngine.playSound('fail')\n        }\n        \n        if (props.shakeOnError) {\n            triggerShake.value = false\n            setTimeout(() => {\n                triggerShake.value = true\n            }, 10)\n        }\n        emit('validationChange', 'error', errText)\n    } else {\n        validationState.value = 'success'\n        errorMessage.value = ''\n        \n        if (prevState !== 'success') {\n            audioEngine.playSound('success')\n        }\n        emit('validationChange', 'success')\n    }\n\n    if (formField) {\n        formField.error.value = !isOk ? errText : undefined\n    }\n}\n\nconst onInput = (e: Event) => {\n    const value = (e.target as HTMLInputElement).value\n    emit('update:modelValue', value)\n    \n    // 键盘打字音效\n    audioEngine.playSound('type')\n\n    if (props.validateOn === 'input') {\n        validate(value)\n    }\n}\n\nconst onBlur = () => {\n    if (props.validateOn === 'blur') {\n        validate(props.modelValue)\n    }\n}\n\nconst onAnimationEnd = () => {\n    triggerShake.value = false\n}\n\n// 暴露外部主动校验接口\nconst triggerValidate = () => {\n    validate(props.modelValue)\n}\n\ndefineExpose({\n    validate: triggerValidate,\n    validationState,\n    errorMessage,\n})\n\nconst containerClasses = computed(() =>\n    cn('relative w-full flex flex-col gap-1.5', props.class)\n)\n\nconst inputClasses = computed(() =>\n    cn(\n        hardcoreInputVariants({ validationState: validationState.value }),\n        triggerShake.value ? 'animate-shake' : ''\n    )\n)\n\nconst faceClasses = computed(() =>\n    cn(\n        hardcoreInputFaceVariants(),\n        validationState.value === 'success' ? 'bg-brutal-success' : '',\n        validationState.value === 'error' ? 'bg-brutal-destructive text-white animate-bounce-short' : ''\n    )\n)\n</script>\n\n<template>\n    <div :class=\"containerClasses\">\n        <div class=\"relative flex items-center w-full\">\n            <input\n                :type=\"type\"\n                :value=\"modelValue\"\n                :disabled=\"disabled\"\n                :readonly=\"readonly\"\n                :placeholder=\"placeholder\"\n                :class=\"inputClasses\"\n                :aria-invalid=\"validationState === 'error'\"\n                :aria-describedby=\"errorMessage ? errorId : undefined\"\n                @input=\"onInput\"\n                @blur=\"onBlur\"\n                @animationend=\"onAnimationEnd\"\n            />\n            \n            <!-- 右侧校验反馈表情 -->\n            <div class=\"absolute right-3 flex items-center z-10 pointer-events-none select-none\">\n                <slot>\n                    <div v-if=\"validationState !== 'default'\" :class=\"faceClasses\">\n                        <!-- 成功 (😎) SVG -->\n                        <svg v-if=\"validationState === 'success'\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                            <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"var(--brutal-accent, #FFE66D)\" stroke=\"currentColor\" stroke-width=\"2.5\" />\n                            <!-- 墨镜 -->\n                            <rect x=\"6\" y=\"8\" width=\"5\" height=\"4\" rx=\"1.5\" fill=\"black\" stroke=\"black\" stroke-width=\"1\" />\n                            <rect x=\"13\" y=\"8\" width=\"5\" height=\"4\" rx=\"1.5\" fill=\"black\" stroke=\"black\" stroke-width=\"1\" />\n                            <line x1=\"11\" y1=\"10\" x2=\"13\" y2=\"10\" stroke=\"black\" stroke-width=\"2\" />\n                            <!-- 微笑嘴巴 -->\n                            <path d=\"M8 15 Q12 19 16 15\" stroke=\"black\" stroke-width=\"2.5\" stroke-linecap=\"round\" fill=\"none\" />\n                        </svg>\n                        \n                        <!-- 错误 (😠) SVG -->\n                        <svg v-if=\"validationState === 'error'\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                            <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"var(--brutal-destructive, #EF476F)\" stroke=\"currentColor\" stroke-width=\"2.5\" />\n                            <!-- 倒八字愤怒眉毛 -->\n                            <line x1=\"6\" y1=\"8\" x2=\"10\" y2=\"10\" stroke=\"black\" stroke-width=\"2.5\" stroke-linecap=\"round\" />\n                            <line x1=\"18\" y1=\"8\" x2=\"14\" y2=\"10\" stroke=\"black\" stroke-width=\"2.5\" stroke-linecap=\"round\" />\n                            <!-- 怒气眼睛 -->\n                            <circle cx=\"8\" cy=\"12\" r=\"1.5\" fill=\"black\" />\n                            <circle cx=\"16\" cy=\"12\" r=\"1.5\" fill=\"black\" />\n                            <!-- 嘟起向下的嘴巴 -->\n                            <path d=\"M9 17 Q12 14 15 17\" stroke=\"black\" stroke-width=\"2.5\" stroke-linecap=\"round\" fill=\"none\" />\n                        </svg>\n                    </div>\n                </slot>\n            </div>\n        </div>\n        \n        <!-- 错误校验提示文案 -->\n        <p\n            v-if=\"validationState === 'error' && errorMessage\"\n            :id=\"errorId\"\n            class=\"text-xs font-black tracking-wide text-brutal-destructive animate-fade-in\"\n            aria-live=\"polite\"\n        >\n            {{ errorMessage }}\n        </p>\n    </div>\n</template>\n\n<style scoped>\n@keyframes input-shake {\n    0%, 100% { transform: translateX(0); }\n    15%, 45%, 75% { transform: translateX(-6px); }\n    30%, 60%, 90% { transform: translateX(6px); }\n}\n\n:deep(.animate-shake) {\n    animation: input-shake 0.35s ease-in-out;\n}\n\n@keyframes bounce-short {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-4px); }\n}\n\n:deep(.animate-bounce-short) {\n    animation: bounce-short 0.4s ease-in-out 2;\n}\n\n@keyframes fade-in {\n    from { opacity: 0; transform: translateY(-2px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n:deep(.animate-fade-in) {\n    animation: fade-in 0.2s ease-out forwards;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    :deep(.animate-shake),\n    :deep(.animate-bounce-short),\n    :deep(.animate-fade-in) {\n        animation: none !important;\n        transform: none !important;\n    }\n}\n</style>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/hardcore-input/hardcore-input-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const hardcoreInputVariants = cva(\n    [\n        'w-full',\n        'border-3 border-brutal',\n        'rounded-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'shadow-brutal',\n        'px-4 py-2',\n        'font-bold',\n        'transition-all duration-150',\n        'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'placeholder:text-brutal-placeholder placeholder:font-normal',\n    ],\n    {\n        variants: {\n            validationState: {\n                default: '',\n                success: 'border-brutal-success',\n                error: 'border-brutal-destructive',\n            },\n        },\n        defaultVariants: {\n            validationState: 'default',\n        },\n    }\n)\n\nexport const hardcoreInputFaceVariants = cva(\n    [\n        'inline-flex items-center justify-center',\n        'border-3 border-brutal',\n        'rounded-brutal',\n        'w-10 h-10',\n        'text-lg',\n        'bg-brutal-accent',\n        'transition-transform duration-300',\n    ]\n)\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "composables/useAudioEngine.ts",
+      "content": "import { ref, type Ref } from 'vue'\n\nconst TYPE_SOUND_THROTTLE_MS = 50\nconst TYPE_BASE_FREQ = 220\nconst TYPE_FREQ_RANGE = 80\nconst TYPE_GAIN = 0.08\nconst TYPE_GAIN_END = 0.001\nconst TYPE_DURATION = 0.05\n\nconst SUCCESS_START_FREQ = 300\nconst SUCCESS_END_FREQ = 600\nconst SUCCESS_GAIN = 0.1\nconst SUCCESS_GAIN_END = 0.001\nconst SUCCESS_DURATION = 0.15\n\nconst FAIL_FREQ_1 = 150\nconst FAIL_FREQ_2 = 100\nconst FAIL_FREQ_SHIFT_TIME = 0.1\nconst FAIL_GAIN = 0.1\nconst FAIL_GAIN_END = 0.001\nconst FAIL_DURATION = 0.2\n\nexport function useAudioEngine(enabled: Ref<boolean>) {\n    let audioCtx: AudioContext | null = null\n    const lastTypeSoundTime = ref(0)\n\n    const getCtx = () => {\n        if (!audioCtx && typeof window !== 'undefined') {\n            const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext\n            if (AudioContextClass) {\n                audioCtx = new AudioContextClass()\n            }\n        }\n        return audioCtx\n    }\n\n    const playSound = (type: 'type' | 'success' | 'fail') => {\n        if (!enabled.value) return\n        if (type === 'type') {\n            const now = Date.now()\n            if (now - lastTypeSoundTime.value < TYPE_SOUND_THROTTLE_MS) return\n            lastTypeSoundTime.value = now\n        }\n        \n        const ctx = getCtx()\n        if (!ctx) return\n        \n        if (ctx.state === 'suspended') {\n            ctx.resume()\n        }\n\n        const osc = ctx.createOscillator()\n        const gain = ctx.createGain()\n        osc.connect(gain)\n        gain.connect(ctx.destination)\n\n        if (type === 'type') {\n            osc.type = 'triangle'\n            osc.frequency.setValueAtTime(TYPE_BASE_FREQ + Math.random() * TYPE_FREQ_RANGE, ctx.currentTime)\n            gain.gain.setValueAtTime(TYPE_GAIN, ctx.currentTime)\n            gain.gain.exponentialRampToValueAtTime(TYPE_GAIN_END, ctx.currentTime + TYPE_DURATION)\n            osc.start()\n            osc.stop(ctx.currentTime + TYPE_DURATION)\n        } else if (type === 'success') {\n            osc.type = 'sine'\n            osc.frequency.setValueAtTime(SUCCESS_START_FREQ, ctx.currentTime)\n            osc.frequency.exponentialRampToValueAtTime(SUCCESS_END_FREQ, ctx.currentTime + SUCCESS_DURATION)\n            gain.gain.setValueAtTime(SUCCESS_GAIN, ctx.currentTime)\n            gain.gain.exponentialRampToValueAtTime(SUCCESS_GAIN_END, ctx.currentTime + SUCCESS_DURATION)\n            osc.start()\n            osc.stop(ctx.currentTime + SUCCESS_DURATION)\n        } else if (type === 'fail') {\n            osc.type = 'square'\n            osc.frequency.setValueAtTime(FAIL_FREQ_1, ctx.currentTime)\n            osc.frequency.setValueAtTime(FAIL_FREQ_2, ctx.currentTime + FAIL_FREQ_SHIFT_TIME)\n            gain.gain.setValueAtTime(FAIL_GAIN, ctx.currentTime)\n            gain.gain.exponentialRampToValueAtTime(FAIL_GAIN_END, ctx.currentTime + FAIL_DURATION)\n            osc.start()\n            osc.stop(ctx.currentTime + FAIL_DURATION)\n        }\n    }\n\n    const dispose = () => {\n        audioCtx?.close()\n        audioCtx = null\n    }\n\n    return { playSound, dispose }\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/header-section.json b/packages/registry/registry/header-section.json
new file mode 100644
index 0000000..5f52315
--- /dev/null
+++ b/packages/registry/registry/header-section.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "header-section",
+  "type": "registry:ui",
+  "title": "Header Section",
+  "description": "A highly customizable neo-brutalist Header Section component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "button",
+    "sheet",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "components/ui/header-section/HeaderSection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { DialogRoot } from 'reka-ui'\nimport { Menu } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Button from '@/components/ui/button/Button.vue'\nimport SheetContent from '@/components/ui/sheet/SheetContent.vue'\nimport SheetHeader from '@/components/ui/sheet/SheetHeader.vue'\nimport SheetTitle from '@/components/ui/sheet/SheetTitle.vue'\nimport SheetDescription from '@/components/ui/sheet/SheetDescription.vue'\nimport Separator from '@/components/ui/separator/Separator.vue'\n\nexport interface NavItem {\n    label: string\n    href?: string\n}\n\ninterface HeaderSectionProps {\n    logoText?: string\n    navItems?: NavItem[]\n    ctaText?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<HeaderSectionProps>(), {\n    logoText: undefined,\n    navItems: () => [],\n    ctaText: undefined,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'cta-click': []\n    'nav-click': [index: number]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedLogoText = computed(() => props.logoText ?? t('headerSection.defaultLogoText'))\nconst resolvedCtaText = computed(() => props.ctaText ?? t('headerSection.defaultCtaText'))\nconst menuLabel = computed(() => t('headerSection.menuLabel'))\n\nconst mobileMenuOpen = ref(false)\n\nconst rootClasses = computed(() =>\n    cn(\n        'sticky top-0 z-40 w-full',\n        'bg-brutal-bg border-3 border-b border-brutal shadow-brutal-sm',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <header :class=\"rootClasses\">\n        <div class=\"flex h-16 items-center justify-between px-4 md:px-6 max-w-7xl mx-auto\">\n            <slot name=\"header\">\n                <span class=\"text-xl font-black tracking-tight text-brutal-fg\">\n                    {{ resolvedLogoText }}\n                </span>\n            </slot>\n\n            <slot>\n                <nav class=\"hidden md:flex items-center gap-1\">\n                    <Button\n                        v-for=\"(item, index) in navItems\"\n                        :key=\"index\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        @click=\"emit('nav-click', index)\"\n                    >\n                        {{ item.label }}\n                    </Button>\n                </nav>\n            </slot>\n\n            <div class=\"flex items-center gap-3\">\n                <slot name=\"footer\">\n                    <Button\n                        variant=\"primary\"\n                        size=\"sm\"\n                        class=\"hidden md:inline-flex\"\n                        @click=\"emit('cta-click')\"\n                    >\n                        {{ resolvedCtaText }}\n                    </Button>\n                </slot>\n\n                <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    class=\"md:hidden\"\n                    @click=\"mobileMenuOpen = true\"\n                >\n                    <Menu class=\"h-5 w-5\" />\n                    <span class=\"sr-only\">{{ menuLabel }}</span>\n                </Button>\n            </div>\n        </div>\n\n        <DialogRoot v-model:open=\"mobileMenuOpen\">\n            <SheetContent side=\"right\">\n                <SheetHeader>\n                    <SheetTitle>{{ resolvedLogoText }}</SheetTitle>\n                    <SheetDescription>{{ menuLabel }}</SheetDescription>\n                </SheetHeader>\n                <nav class=\"flex flex-col gap-2 py-4\">\n                    <Button\n                        v-for=\"(item, index) in navItems\"\n                        :key=\"index\"\n                        variant=\"ghost\"\n                        class=\"justify-start\"\n                        @click=\"emit('nav-click', index); mobileMenuOpen = false\"\n                    >\n                        {{ item.label }}\n                    </Button>\n                </nav>\n                <Separator />\n                <div class=\"pt-4\">\n                    <Button\n                        variant=\"primary\"\n                        class=\"w-full\"\n                        @click=\"emit('cta-click'); mobileMenuOpen = false\"\n                    >\n                        {{ resolvedCtaText }}\n                    </Button>\n                </div>\n            </SheetContent>\n        </DialogRoot>\n    </header>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/index.json b/packages/registry/registry/index.json
index a26f489..39eafb2 100644
--- a/packages/registry/registry/index.json
+++ b/packages/registry/registry/index.json
@@ -1,19 +1,31 @@
 {
-  "name": "brutx",
-  "homepage": "https://brutxui.site",
+  "name": "brutx-vue",
+  "homepage": "https://lidaixingchen.github.io/brutxui-vue3/",
   "items": [
     {
       "name": "alert",
       "type": "registry:ui",
       "title": "Alert",
-      "description": "A highly customizable neo-brutalist Alert component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Alert component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
       ],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/alert.tsx",
+          "path": "components/ui/alert/Alert.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert/AlertDescription.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert/AlertTitle.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert/alert-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -39,7 +51,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -69,7 +85,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -79,16 +98,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
@@ -96,14 +118,26 @@
       "name": "avatar",
       "type": "registry:ui",
       "title": "Avatar",
-      "description": "A highly customizable neo-brutalist Avatar component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Avatar component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-avatar"
+        "reka-ui"
       ],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/avatar.tsx",
+          "path": "components/ui/avatar/Avatar.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/avatar/AvatarFallback.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/avatar/AvatarImage.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/avatar/avatar-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -129,7 +163,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -159,7 +197,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -169,16 +210,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
@@ -186,12 +230,16 @@
       "name": "badge",
       "type": "registry:ui",
       "title": "Badge",
-      "description": "A highly customizable neo-brutalist Badge component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Badge component built with Brutx design tokens for Vue 3.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/badge.tsx",
+          "path": "components/ui/badge/Badge.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/badge/badge-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -217,7 +265,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -247,7 +299,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -257,16 +312,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
@@ -274,14 +332,19 @@
       "name": "button",
       "type": "registry:ui",
       "title": "Button",
-      "description": "A highly customizable neo-brutalist Button component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Button component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-slot"
+        "reka-ui",
+        "lucide-vue-next"
       ],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/button.tsx",
+          "path": "components/ui/button/Button.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/button/button-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -307,7 +370,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -337,7 +404,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -347,16 +417,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
@@ -364,18 +437,15 @@
       "name": "calendar",
       "type": "registry:ui",
       "title": "Calendar",
-      "description": "A highly customizable neo-brutalist Calendar component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Calendar component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "react-day-picker",
-        "date-fns",
-        "lucide-react"
-      ],
-      "registryDependencies": [
-        "button"
+        "v-calendar",
+        "lucide-vue-next"
       ],
+      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/calendar.tsx",
+          "path": "components/ui/calendar/Calendar.vue",
           "type": "registry:ui"
         }
       ],
@@ -401,7 +471,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -431,7 +505,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -441,16 +518,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
@@ -458,12 +538,36 @@
       "name": "card",
       "type": "registry:ui",
       "title": "Card",
-      "description": "A highly customizable neo-brutalist Card component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Card component built with Brutx design tokens for Vue 3.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/card.tsx",
+          "path": "components/ui/card/Card.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/card/CardContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/card/CardDescription.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/card/CardFooter.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/card/CardHeader.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/card/CardTitle.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/card/card-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -489,7 +593,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -519,7 +627,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -529,16 +640,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
@@ -546,15 +660,15 @@
       "name": "checkbox",
       "type": "registry:ui",
       "title": "Checkbox",
-      "description": "A highly customizable neo-brutalist Checkbox component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Checkbox component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-checkbox",
-        "lucide-react"
+        "reka-ui",
+        "lucide-vue-next"
       ],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/checkbox.tsx",
+          "path": "components/ui/checkbox/Checkbox.vue",
           "type": "registry:ui"
         }
       ],
@@ -580,7 +694,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -610,7 +728,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -620,16 +741,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
@@ -637,11 +761,10 @@
       "name": "combobox",
       "type": "registry:ui",
       "title": "Combobox",
-      "description": "A highly customizable neo-brutalist Combobox component built with Brutx design tokens.",
+      "description": "A highly customizable neo-brutalist Combobox component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "cmdk",
-        "@radix-ui/react-popover",
-        "lucide-react"
+        "reka-ui",
+        "lucide-vue-next"
       ],
       "registryDependencies": [
         "button",
@@ -650,7 +773,5058 @@
       ],
       "files": [
         {
-          "path": "components/ui/combobox.tsx",
+          "path": "components/ui/combobox/Combobox.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/combobox/ComboboxMulti.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/combobox/combobox-types.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "title": "Command",
+      "description": "A highly customizable neo-brutalist Command component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/command/Command.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandDialog.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandEmpty.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandGroup.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandInput.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandList.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandSeparator.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/command/CommandShortcut.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "dialog",
+      "type": "registry:ui",
+      "title": "Dialog",
+      "description": "A highly customizable neo-brutalist Dialog component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/dialog/DialogContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dialog/DialogDescription.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dialog/DialogFooter.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dialog/DialogHeader.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dialog/DialogOverlay.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dialog/DialogTitle.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "dropdown-menu",
+      "type": "registry:ui",
+      "title": "Dropdown Menu",
+      "description": "A highly customizable neo-brutalist Dropdown Menu component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuLabel.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuRadioItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuSeparator.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuShortcut.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuSubContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/dropdown-menu/DropdownMenuSubTrigger.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "input",
+      "type": "registry:ui",
+      "title": "Input",
+      "description": "A highly customizable neo-brutalist Input component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/input/Input.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/input/input-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "label",
+      "type": "registry:ui",
+      "title": "Label",
+      "description": "A highly customizable neo-brutalist Label component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/label/Label.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/label/label-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "pagination",
+      "type": "registry:ui",
+      "title": "Pagination",
+      "description": "A highly customizable neo-brutalist Pagination component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/pagination/Pagination.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/pagination/pagination-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "title": "Popover",
+      "description": "A highly customizable neo-brutalist Popover component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/popover/PopoverContent.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "scroll-area",
+      "type": "registry:ui",
+      "title": "Scroll Area",
+      "description": "A highly customizable neo-brutalist Scroll Area component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/scroll-area/ScrollArea.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/scroll-area/ScrollBar.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "select",
+      "type": "registry:ui",
+      "title": "Select",
+      "description": "A highly customizable neo-brutalist Select component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/select/SelectContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/select/SelectItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/select/SelectLabel.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/select/SelectScrollDownButton.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/select/SelectScrollUpButton.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/select/SelectSeparator.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/select/SelectTrigger.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "separator",
+      "type": "registry:ui",
+      "title": "Separator",
+      "description": "A highly customizable neo-brutalist Separator component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/separator/Separator.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/separator/separator-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "skeleton",
+      "type": "registry:ui",
+      "title": "Skeleton",
+      "description": "A highly customizable neo-brutalist Skeleton component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/skeleton/Skeleton.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/skeleton/SkeletonAvatar.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/skeleton/SkeletonCard.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/skeleton/SkeletonTable.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/skeleton/SkeletonText.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/skeleton/skeleton-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "spinner",
+      "type": "registry:ui",
+      "title": "Spinner",
+      "description": "A highly customizable neo-brutalist Spinner component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/spinner/Spinner.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/spinner/BarsSpinner.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/spinner/BlockSpinner.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/spinner/DotsSpinner.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/spinner/spinner-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "submit-button",
+      "type": "registry:ui",
+      "title": "Submit Button",
+      "description": "A highly customizable neo-brutalist Submit Button component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/submit-button/SubmitButton.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "switch",
+      "type": "registry:ui",
+      "title": "Switch",
+      "description": "A highly customizable neo-brutalist Switch component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/switch/Switch.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "table",
+      "type": "registry:ui",
+      "title": "Table",
+      "description": "A highly customizable neo-brutalist Table component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/table/Table.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/table/TableBody.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/table/TableCaption.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/table/TableCell.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/table/TableFooter.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/table/TableHead.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/table/TableHeader.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/table/TableRow.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "title": "Tabs",
+      "description": "A highly customizable neo-brutalist Tabs component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/tabs/TabsContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tabs/TabsList.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tabs/TabsTrigger.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "textarea",
+      "type": "registry:ui",
+      "title": "Textarea",
+      "description": "A highly customizable neo-brutalist Textarea component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/textarea/Textarea.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/textarea/textarea-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "toast",
+      "type": "registry:ui",
+      "title": "Toast",
+      "description": "A highly customizable neo-brutalist Toast component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/toast/Toast.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/toast/ToastContainer.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/toast/toast-variants.ts",
+          "type": "registry:ui"
+        },
+        {
+          "path": "composables/useToast.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "tooltip",
+      "type": "registry:ui",
+      "title": "Tooltip",
+      "description": "A highly customizable neo-brutalist Tooltip component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/tooltip/TooltipContent.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "saas-pricing",
+      "type": "registry:ui",
+      "title": "Saas Pricing",
+      "description": "A highly customizable neo-brutalist Saas Pricing component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "components/ui/saas-pricing/SaaSPricing.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "dashboard-stats",
+      "type": "registry:ui",
+      "title": "Dashboard Stats",
+      "description": "A highly customizable neo-brutalist Dashboard Stats component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "card",
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "components/ui/dashboard-stats/DashboardStats.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "form",
+      "type": "registry:ui",
+      "title": "Form",
+      "description": "A highly customizable neo-brutalist Form component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "vee-validate",
+        "@vee-validate/zod",
+        "zod",
+        "reka-ui"
+      ],
+      "registryDependencies": [
+        "label"
+      ],
+      "files": [
+        {
+          "path": "components/ui/form/Form.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/form/FormControl.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/form/FormDescription.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/form/FormField.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/form/FormItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/form/FormLabel.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/form/FormMessage.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/form/form-context.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "alert-dialog",
+      "type": "registry:ui",
+      "title": "Alert Dialog",
+      "description": "A highly customizable neo-brutalist Alert Dialog component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/alert-dialog/AlertDialogAction.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert-dialog/AlertDialogCancel.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert-dialog/AlertDialogContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert-dialog/AlertDialogDescription.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert-dialog/AlertDialogFooter.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert-dialog/AlertDialogHeader.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/alert-dialog/AlertDialogTitle.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "sheet",
+      "type": "registry:ui",
+      "title": "Sheet",
+      "description": "A highly customizable neo-brutalist Sheet component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/sheet/SheetContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/sheet/SheetDescription.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/sheet/SheetFooter.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/sheet/SheetHeader.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/sheet/SheetTitle.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/sheet/sheet-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "radio-group",
+      "type": "registry:ui",
+      "title": "Radio Group",
+      "description": "A highly customizable neo-brutalist Radio Group component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/radio-group/RadioGroup.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/radio-group/RadioGroupItem.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "slider",
+      "type": "registry:ui",
+      "title": "Slider",
+      "description": "A highly customizable neo-brutalist Slider component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/slider/Slider.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "progress",
+      "type": "registry:ui",
+      "title": "Progress",
+      "description": "A highly customizable neo-brutalist Progress component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/progress/Progress.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "toggle",
+      "type": "registry:ui",
+      "title": "Toggle",
+      "description": "A highly customizable neo-brutalist Toggle component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/toggle/Toggle.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/toggle/toggle-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "toggle-group",
+      "type": "registry:ui",
+      "title": "Toggle Group",
+      "description": "A highly customizable neo-brutalist Toggle Group component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui"
+      ],
+      "registryDependencies": [
+        "toggle"
+      ],
+      "files": [
+        {
+          "path": "components/ui/toggle-group/ToggleGroup.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/toggle-group/ToggleGroupItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/toggle-group/toggle-group-key.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "brutalist-hero",
+      "type": "registry:ui",
+      "title": "Brutalist Hero",
+      "description": "A highly customizable neo-brutalist Brutalist Hero component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card"
+      ],
+      "files": [
+        {
+          "path": "components/ui/brutalist-hero/BrutalistHero.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "pricing-section",
+      "type": "registry:ui",
+      "title": "Pricing Section",
+      "description": "A highly customizable neo-brutalist Pricing Section component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "badge"
+      ],
+      "files": [
+        {
+          "path": "components/ui/pricing-section/PricingSection.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "auth-card",
+      "type": "registry:ui",
+      "title": "Auth Card",
+      "description": "A highly customizable neo-brutalist Auth Card component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "input",
+        "label"
+      ],
+      "files": [
+        {
+          "path": "components/ui/auth-card/AuthCard.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "dashboard-shell",
+      "type": "registry:ui",
+      "title": "Dashboard Shell",
+      "description": "A highly customizable neo-brutalist Dashboard Shell component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/dashboard-shell/DashboardShell.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "empty-state",
+      "type": "registry:ui",
+      "title": "Empty State",
+      "description": "A highly customizable neo-brutalist Empty State component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/empty-state/EmptyState.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "waitlist-page",
+      "type": "registry:ui",
+      "title": "Waitlist Page",
+      "description": "A highly customizable neo-brutalist Waitlist Page component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/waitlist-page/WaitlistPage.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "title": "Accordion",
+      "description": "A highly customizable neo-brutalist Accordion component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/accordion/Accordion.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/accordion/AccordionItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/accordion/AccordionTrigger.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/accordion/AccordionContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/accordion/accordion-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "tags-input",
+      "type": "registry:ui",
+      "title": "Tags Input",
+      "description": "A highly customizable neo-brutalist Tags Input component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/tags-input/TagsInput.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tags-input/TagsInputInput.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tags-input/TagsInputItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tags-input/TagsInputItemText.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tags-input/TagsInputItemDelete.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tags-input/tags-input-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "number-input",
+      "type": "registry:ui",
+      "title": "Number Input",
+      "description": "A highly customizable neo-brutalist Number Input component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/number-input/NumberInput.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "copy-to-clipboard",
+      "type": "registry:ui",
+      "title": "Copy To Clipboard",
+      "description": "A highly customizable neo-brutalist Copy To Clipboard component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/copy-to-clipboard/CopyToClipboard.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "composables/useClipboard.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "breadcrumb",
+      "type": "registry:ui",
+      "title": "Breadcrumb",
+      "description": "A highly customizable neo-brutalist Breadcrumb component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/breadcrumb/Breadcrumb.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/breadcrumb/BreadcrumbList.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/breadcrumb/BreadcrumbItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/breadcrumb/BreadcrumbLink.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/breadcrumb/BreadcrumbPage.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/breadcrumb/BreadcrumbSeparator.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/breadcrumb/BreadcrumbEllipsis.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "marquee",
+      "type": "registry:ui",
+      "title": "Marquee",
+      "description": "A highly customizable neo-brutalist Marquee component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/marquee/Marquee.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "before-after",
+      "type": "registry:ui",
+      "title": "Before After",
+      "description": "A highly customizable neo-brutalist Before After component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/before-after/BeforeAfter.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "code-block",
+      "type": "registry:ui",
+      "title": "Code Block",
+      "description": "A highly customizable neo-brutalist Code Block component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "copy-to-clipboard"
+      ],
+      "files": [
+        {
+          "path": "components/ui/code-block/CodeBlock.vue",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "timeline",
+      "type": "registry:ui",
+      "title": "Timeline",
+      "description": "A highly customizable neo-brutalist Timeline component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/timeline/Timeline.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/timeline/TimelineItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/timeline/TimelineSeparator.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/timeline/TimelineDot.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/timeline/TimelineConnector.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/timeline/TimelineContent.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/timeline/timeline-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "title": "Carousel",
+      "description": "A highly customizable neo-brutalist Carousel component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "embla-carousel-vue",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/carousel/Carousel.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/carousel/CarouselItem.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/carousel/carousel-variants.ts",
+          "type": "registry:ui"
+        }
+      ],
+      "tailwind": {
+        "config": {
+          "theme": {
+            "extend": {
+              "borderWidth": {
+                "3": "var(--brutal-border-width, 3px)"
+              },
+              "borderColor": {
+                "brutal": "var(--brutal-border-color, #000000)"
+              },
+              "borderRadius": {
+                "brutal": "var(--brutal-radius, 0px)"
+              },
+              "colors": {
+                "brutal-bg": "var(--brutal-bg, #ffffff)",
+                "brutal-fg": "var(--brutal-fg, #000000)",
+                "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+                "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+                "brutal-accent": "var(--brutal-accent, #FFE66D)",
+                "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+                "brutal-success": "var(--brutal-success, #7FB069)",
+                "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+              },
+              "boxShadow": {
+                "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+                "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+              }
+            }
+          }
+        }
+      },
+      "cssVars": {
+        "light": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#000000",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#000000",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#ffffff",
+          "brutal-fg": "#000000",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#f3f4f6",
+          "brutal-ring": "#000000",
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
+        },
+        "dark": {
+          "brutal-border-width": "3px",
+          "brutal-border-color": "#ffffff",
+          "brutal-shadow-offset-x": "4px",
+          "brutal-shadow-offset-y": "4px",
+          "brutal-shadow-color": "#ffffff",
+          "brutal-radius": "0px",
+          "brutal-pressed-offset": "2px",
+          "brutal-bg": "#141414",
+          "brutal-fg": "#ffffff",
+          "brutal-primary": "#FF6B6B",
+          "brutal-secondary": "#4ECDC4",
+          "brutal-accent": "#FFE66D",
+          "brutal-destructive": "#EF476F",
+          "brutal-success": "#7FB069",
+          "brutal-muted": "#1e1e1e",
+          "brutal-ring": "#ffffff",
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
+        }
+      }
+    },
+    {
+      "name": "tree-view",
+      "type": "registry:ui",
+      "title": "Tree View",
+      "description": "A highly customizable neo-brutalist Tree View component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/tree-view/TreeView.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tree-view/TreeViewNode.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/tree-view/tree-view-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -676,7 +5850,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -706,7 +5884,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -716,34 +5897,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "command",
+      "name": "kanban",
       "type": "registry:ui",
-      "title": "Command",
-      "description": "A highly customizable neo-brutalist Command component built with Brutx design tokens.",
+      "title": "Kanban",
+      "description": "A highly customizable neo-brutalist Kanban component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "cmdk",
-        "lucide-react"
-      ],
-      "registryDependencies": [
-        "dialog"
+        "lucide-vue-next"
       ],
+      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/command.tsx",
+          "path": "components/ui/kanban/KanbanBoard.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/kanban/kanban-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -769,7 +5954,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -799,7 +5988,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -809,32 +6001,39 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "dialog",
+      "name": "chat-bubble",
       "type": "registry:ui",
-      "title": "Dialog",
-      "description": "A highly customizable neo-brutalist Dialog component built with Brutx design tokens.",
+      "title": "Chat Bubble",
+      "description": "A highly customizable neo-brutalist Chat Bubble component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-dialog",
-        "lucide-react"
+        "reka-ui",
+        "lucide-vue-next"
       ],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/dialog.tsx",
+          "path": "components/ui/chat-bubble/ChatBubble.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/chat-bubble/chat-bubble-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -860,7 +6059,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -890,7 +6093,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -900,32 +6106,36 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "dropdown-menu",
+      "name": "kbd",
       "type": "registry:ui",
-      "title": "Dropdown Menu",
-      "description": "A highly customizable neo-brutalist Dropdown Menu component built with Brutx design tokens.",
-      "dependencies": [
-        "@radix-ui/react-dropdown-menu",
-        "lucide-react"
-      ],
+      "title": "Kbd",
+      "description": "A highly customizable neo-brutalist Kbd component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/dropdown-menu.tsx",
+          "path": "components/ui/kbd/Kbd.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/kbd/kbd-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -951,7 +6161,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -981,7 +6195,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -991,29 +6208,36 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "input",
+      "name": "counter",
       "type": "registry:ui",
-      "title": "Input",
-      "description": "A highly customizable neo-brutalist Input component built with Brutx design tokens.",
+      "title": "Counter",
+      "description": "A highly customizable neo-brutalist Counter component built with Brutx design tokens for Vue 3.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/input.tsx",
+          "path": "components/ui/counter/Counter.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/counter/counter-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -1039,7 +6263,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1069,7 +6297,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1079,31 +6310,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "label",
+      "name": "stepper",
       "type": "registry:ui",
-      "title": "Label",
-      "description": "A highly customizable neo-brutalist Label component built with Brutx design tokens.",
+      "title": "Stepper",
+      "description": "A highly customizable neo-brutalist Stepper component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-label"
+        "lucide-vue-next"
       ],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/label.tsx",
+          "path": "components/ui/stepper/Stepper.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/stepper/stepper-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -1129,7 +6367,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1159,7 +6401,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1169,31 +6414,40 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "pagination",
+      "name": "card-3d",
       "type": "registry:ui",
-      "title": "Pagination",
-      "description": "A highly customizable neo-brutalist Pagination component built with Brutx design tokens.",
-      "dependencies": [
-        "lucide-react"
-      ],
+      "title": "Card 3d",
+      "description": "A highly customizable neo-brutalist Card 3d component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/pagination.tsx",
+          "path": "components/ui/card-3d/Card3D.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/card-3d/card-3d-variants.ts",
+          "type": "registry:ui"
+        },
+        {
+          "path": "composables/useReducedMotion.ts",
           "type": "registry:ui"
         }
       ],
@@ -1219,7 +6473,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1249,7 +6507,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1259,31 +6520,40 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "popover",
+      "name": "glitch-text",
       "type": "registry:ui",
-      "title": "Popover",
-      "description": "A highly customizable neo-brutalist Popover component built with Brutx design tokens.",
-      "dependencies": [
-        "@radix-ui/react-popover"
-      ],
+      "title": "Glitch Text",
+      "description": "A highly customizable neo-brutalist Glitch Text component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/popover.tsx",
+          "path": "components/ui/glitch-text/GlitchText.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/glitch-text/glitch-text-variants.ts",
+          "type": "registry:ui"
+        },
+        {
+          "path": "composables/useReducedMotion.ts",
           "type": "registry:ui"
         }
       ],
@@ -1309,7 +6579,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1339,7 +6613,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1349,31 +6626,40 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "scroll-area",
+      "name": "scratch-card",
       "type": "registry:ui",
-      "title": "Scroll Area",
-      "description": "A highly customizable neo-brutalist Scroll Area component built with Brutx design tokens.",
-      "dependencies": [
-        "@radix-ui/react-scroll-area"
-      ],
+      "title": "Scratch Card",
+      "description": "A highly customizable neo-brutalist Scratch Card component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/scroll-area.tsx",
+          "path": "components/ui/scratch-card/ScratchCard.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/scratch-card/scratch-card-variants.ts",
+          "type": "registry:ui"
+        },
+        {
+          "path": "composables/useReducedMotion.ts",
           "type": "registry:ui"
         }
       ],
@@ -1399,7 +6685,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1429,7 +6719,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1439,32 +6732,36 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "select",
+      "name": "sketchy-chart",
       "type": "registry:ui",
-      "title": "Select",
-      "description": "A highly customizable neo-brutalist Select component built with Brutx design tokens.",
-      "dependencies": [
-        "@radix-ui/react-select",
-        "lucide-react"
-      ],
+      "title": "Sketchy Chart",
+      "description": "A highly customizable neo-brutalist Sketchy Chart component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
       "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/select.tsx",
+          "path": "components/ui/sketchy-chart/SketchyChart.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/sketchy-chart/sketchy-chart-variants.ts",
           "type": "registry:ui"
         }
       ],
@@ -1490,7 +6787,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1520,7 +6821,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1530,31 +6834,42 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "separator",
+      "name": "hardcore-input",
       "type": "registry:ui",
-      "title": "Separator",
-      "description": "A highly customizable neo-brutalist Separator component built with Brutx design tokens.",
-      "dependencies": [
-        "@radix-ui/react-separator"
+      "title": "Hardcore Input",
+      "description": "A highly customizable neo-brutalist Hardcore Input component built with Brutx design tokens for Vue 3.",
+      "dependencies": [],
+      "registryDependencies": [
+        "form"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/separator.tsx",
+          "path": "components/ui/hardcore-input/HardcoreInput.vue",
+          "type": "registry:ui"
+        },
+        {
+          "path": "components/ui/hardcore-input/hardcore-input-variants.ts",
+          "type": "registry:ui"
+        },
+        {
+          "path": "composables/useAudioEngine.ts",
           "type": "registry:ui"
         }
       ],
@@ -1580,7 +6895,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1610,7 +6929,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1620,29 +6942,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "skeleton",
+      "name": "testimonial-card",
       "type": "registry:ui",
-      "title": "Skeleton",
-      "description": "A highly customizable neo-brutalist Skeleton component built with Brutx design tokens.",
-      "dependencies": [],
-      "registryDependencies": [],
+      "title": "Testimonial Card",
+      "description": "A highly customizable neo-brutalist Testimonial Card component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "card",
+        "avatar",
+        "badge"
+      ],
       "files": [
         {
-          "path": "components/ui/skeleton.tsx",
+          "path": "components/ui/testimonial-card/TestimonialCard.vue",
           "type": "registry:ui"
         }
       ],
@@ -1668,7 +6999,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1698,7 +7033,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1708,29 +7046,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "spinner",
+      "name": "blog-card",
       "type": "registry:ui",
-      "title": "Spinner",
-      "description": "A highly customizable neo-brutalist Spinner component built with Brutx design tokens.",
-      "dependencies": [],
-      "registryDependencies": [],
+      "title": "Blog Card",
+      "description": "A highly customizable neo-brutalist Blog Card component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "card",
+        "badge",
+        "avatar"
+      ],
       "files": [
         {
-          "path": "components/ui/spinner.tsx",
+          "path": "components/ui/blog-card/BlogCard.vue",
           "type": "registry:ui"
         }
       ],
@@ -1756,7 +7103,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1786,7 +7137,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1796,31 +7150,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "submit-button",
+      "name": "file-card",
       "type": "registry:ui",
-      "title": "Submit Button",
-      "description": "A highly customizable neo-brutalist Submit Button component built with Brutx design tokens.",
-      "dependencies": [],
+      "title": "File Card",
+      "description": "A highly customizable neo-brutalist File Card component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
       "registryDependencies": [
+        "card",
+        "badge",
         "button"
       ],
       "files": [
         {
-          "path": "components/ui/submit-button.tsx",
+          "path": "components/ui/file-card/FileCard.vue",
           "type": "registry:ui"
         }
       ],
@@ -1846,7 +7207,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1876,7 +7241,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1886,31 +7254,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "switch",
+      "name": "quick-actions",
       "type": "registry:ui",
-      "title": "Switch",
-      "description": "A highly customizable neo-brutalist Switch component built with Brutx design tokens.",
+      "title": "Quick Actions",
+      "description": "A highly customizable neo-brutalist Quick Actions component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-switch"
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "card",
+        "button",
+        "badge"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/switch.tsx",
+          "path": "components/ui/quick-actions/QuickActions.vue",
           "type": "registry:ui"
         }
       ],
@@ -1936,7 +7311,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -1966,7 +7345,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -1976,29 +7358,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "table",
+      "name": "faq-section",
       "type": "registry:ui",
-      "title": "Table",
-      "description": "A highly customizable neo-brutalist Table component built with Brutx design tokens.",
-      "dependencies": [],
-      "registryDependencies": [],
+      "title": "Faq Section",
+      "description": "A highly customizable neo-brutalist Faq Section component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "accordion",
+        "card",
+        "badge"
+      ],
       "files": [
         {
-          "path": "components/ui/table.tsx",
+          "path": "components/ui/faq-section/FaqSection.vue",
           "type": "registry:ui"
         }
       ],
@@ -2024,7 +7415,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2054,7 +7449,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2064,31 +7462,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "tabs",
+      "name": "tabs-nav",
       "type": "registry:ui",
-      "title": "Tabs",
-      "description": "A highly customizable neo-brutalist Tabs component built with Brutx design tokens.",
+      "title": "Tabs Nav",
+      "description": "A highly customizable neo-brutalist Tabs Nav component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-tabs"
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "tabs",
+        "card"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/tabs.tsx",
+          "path": "components/ui/tabs-nav/TabsNav.vue",
           "type": "registry:ui"
         }
       ],
@@ -2114,7 +7519,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2144,7 +7553,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2154,29 +7566,39 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "textarea",
+      "name": "header-section",
       "type": "registry:ui",
-      "title": "Textarea",
-      "description": "A highly customizable neo-brutalist Textarea component built with Brutx design tokens.",
-      "dependencies": [],
-      "registryDependencies": [],
+      "title": "Header Section",
+      "description": "A highly customizable neo-brutalist Header Section component built with Brutx design tokens for Vue 3.",
+      "dependencies": [
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "sheet",
+        "separator"
+      ],
       "files": [
         {
-          "path": "components/ui/textarea.tsx",
+          "path": "components/ui/header-section/HeaderSection.vue",
           "type": "registry:ui"
         }
       ],
@@ -2202,7 +7624,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2232,7 +7658,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2242,31 +7671,37 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "toast",
+      "name": "footer-section",
       "type": "registry:ui",
-      "title": "Toast",
-      "description": "A highly customizable neo-brutalist Toast component built with Brutx design tokens.",
+      "title": "Footer Section",
+      "description": "A highly customizable neo-brutalist Footer Section component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "separator"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/toast.tsx",
+          "path": "components/ui/footer-section/FooterSection.vue",
           "type": "registry:ui"
         }
       ],
@@ -2292,7 +7727,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2322,7 +7761,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2332,31 +7774,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "tooltip",
+      "name": "not-found-page",
       "type": "registry:ui",
-      "title": "Tooltip",
-      "description": "A highly customizable neo-brutalist Tooltip component built with Brutx design tokens.",
+      "title": "Not Found Page",
+      "description": "A highly customizable neo-brutalist Not Found Page component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-tooltip"
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "glitch-text"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/tooltip.tsx",
+          "path": "components/ui/not-found-page/NotFoundPage.vue",
           "type": "registry:ui"
         }
       ],
@@ -2382,7 +7831,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2412,7 +7865,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2422,35 +7878,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "saas-pricing",
+      "name": "loading-page",
       "type": "registry:ui",
-      "title": "Saas Pricing",
-      "description": "A highly customizable neo-brutalist Saas Pricing component built with Brutx design tokens.",
+      "title": "Loading Page",
+      "description": "A highly customizable neo-brutalist Loading Page component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "button",
-        "card",
-        "badge"
+        "skeleton",
+        "spinner",
+        "progress"
       ],
       "files": [
         {
-          "path": "components/ui/saas-pricing.tsx",
+          "path": "components/ui/loading-page/LoadingPage.vue",
           "type": "registry:ui"
         }
       ],
@@ -2476,7 +7935,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2506,7 +7969,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2516,34 +7982,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "dashboard-stats",
+      "name": "error-card",
       "type": "registry:ui",
-      "title": "Dashboard Stats",
-      "description": "A highly customizable neo-brutalist Dashboard Stats component built with Brutx design tokens.",
+      "title": "Error Card",
+      "description": "A highly customizable neo-brutalist Error Card component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
         "card",
-        "badge"
+        "button",
+        "alert"
       ],
       "files": [
         {
-          "path": "components/ui/dashboard-stats.tsx",
+          "path": "components/ui/error-card/ErrorCard.vue",
           "type": "registry:ui"
         }
       ],
@@ -2569,7 +8039,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2599,7 +8073,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2609,36 +8086,37 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "form",
+      "name": "success-card",
       "type": "registry:ui",
-      "title": "Form",
-      "description": "A highly customizable neo-brutalist Form component built with Brutx design tokens.",
+      "title": "Success Card",
+      "description": "A highly customizable neo-brutalist Success Card component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "react-hook-form",
-        "zod",
-        "@radix-ui/react-label",
-        "@radix-ui/react-slot"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "label"
+        "card",
+        "button"
       ],
       "files": [
         {
-          "path": "components/ui/form.tsx",
+          "path": "components/ui/success-card/SuccessCard.vue",
           "type": "registry:ui"
         }
       ],
@@ -2664,7 +8142,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2694,7 +8176,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2704,33 +8189,37 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "alert-dialog",
+      "name": "search-widget",
       "type": "registry:ui",
-      "title": "Alert Dialog",
-      "description": "A highly customizable neo-brutalist Alert Dialog component built with Brutx design tokens.",
+      "title": "Search Widget",
+      "description": "A highly customizable neo-brutalist Search Widget component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-alert-dialog"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "button"
+        "card",
+        "command"
       ],
       "files": [
         {
-          "path": "components/ui/alert-dialog.tsx",
+          "path": "components/ui/search-widget/SearchWidget.vue",
           "type": "registry:ui"
         }
       ],
@@ -2756,7 +8245,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2786,7 +8279,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2796,32 +8292,39 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "sheet",
+      "name": "feedback-form",
       "type": "registry:ui",
-      "title": "Sheet",
-      "description": "A highly customizable neo-brutalist Sheet component built with Brutx design tokens.",
+      "title": "Feedback Form",
+      "description": "A highly customizable neo-brutalist Feedback Form component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-dialog",
-        "lucide-react"
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "card",
+        "input",
+        "textarea",
+        "button"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/sheet.tsx",
+          "path": "components/ui/feedback-form/FeedbackForm.vue",
           "type": "registry:ui"
         }
       ],
@@ -2847,7 +8350,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2877,7 +8384,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2887,32 +8397,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "radio-group",
+      "name": "stepper-section",
       "type": "registry:ui",
-      "title": "Radio Group",
-      "description": "A highly customizable neo-brutalist Radio Group component built with Brutx design tokens.",
+      "title": "Stepper Section",
+      "description": "A highly customizable neo-brutalist Stepper Section component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-radio-group",
-        "lucide-react"
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "stepper",
+        "button",
+        "card"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/radio-group.tsx",
+          "path": "components/ui/stepper-section/StepperSection.vue",
           "type": "registry:ui"
         }
       ],
@@ -2938,7 +8454,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -2968,7 +8488,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -2978,31 +8501,37 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "slider",
+      "name": "cookie-consent",
       "type": "registry:ui",
-      "title": "Slider",
-      "description": "A highly customizable neo-brutalist Slider component built with Brutx design tokens.",
+      "title": "Cookie Consent",
+      "description": "A highly customizable neo-brutalist Cookie Consent component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-slider"
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "card",
+        "button"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/slider.tsx",
+          "path": "components/ui/cookie-consent/CookieConsent.vue",
           "type": "registry:ui"
         }
       ],
@@ -3028,7 +8557,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3058,7 +8591,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3068,31 +8604,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "progress",
+      "name": "data-table-section",
       "type": "registry:ui",
-      "title": "Progress",
-      "description": "A highly customizable neo-brutalist Progress component built with Brutx design tokens.",
+      "title": "Data Table Section",
+      "description": "A highly customizable neo-brutalist Data Table Section component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-progress"
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "table",
+        "pagination",
+        "input"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/progress.tsx",
+          "path": "components/ui/data-table-section/DataTableSection.vue",
           "type": "registry:ui"
         }
       ],
@@ -3118,7 +8661,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3148,7 +8695,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3158,31 +8708,42 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "toggle",
+      "name": "settings-page",
       "type": "registry:ui",
-      "title": "Toggle",
-      "description": "A highly customizable neo-brutalist Toggle component built with Brutx design tokens.",
+      "title": "Settings Page",
+      "description": "A highly customizable neo-brutalist Settings Page component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-toggle"
+        "reka-ui",
+        "lucide-vue-next"
+      ],
+      "registryDependencies": [
+        "tabs",
+        "card",
+        "input",
+        "switch",
+        "button",
+        "separator"
       ],
-      "registryDependencies": [],
       "files": [
         {
-          "path": "components/ui/toggle.tsx",
+          "path": "components/ui/settings-page/SettingsPage.vue",
           "type": "registry:ui"
         }
       ],
@@ -3208,7 +8769,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3238,7 +8803,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3248,33 +8816,40 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "toggle-group",
+      "name": "blog-list-page",
       "type": "registry:ui",
-      "title": "Toggle Group",
-      "description": "A highly customizable neo-brutalist Toggle Group component built with Brutx design tokens.",
+      "title": "Blog List Page",
+      "description": "A highly customizable neo-brutalist Blog List Page component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "@radix-ui/react-toggle-group"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "toggle"
+        "card",
+        "pagination",
+        "badge",
+        "input",
+        "button"
       ],
       "files": [
         {
-          "path": "components/ui/toggle-group.tsx",
+          "path": "components/ui/blog-list-page/BlogListPage.vue",
           "type": "registry:ui"
         }
       ],
@@ -3300,7 +8875,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3330,7 +8909,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3340,34 +8922,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "brutalist-hero",
+      "name": "activity-log-page",
       "type": "registry:ui",
-      "title": "Brutalist Hero",
-      "description": "A highly customizable neo-brutalist Brutalist Hero component built with Brutx design tokens.",
+      "title": "Activity Log Page",
+      "description": "A highly customizable neo-brutalist Activity Log Page component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "button",
-        "card"
+        "table",
+        "badge",
+        "pagination"
       ],
       "files": [
         {
-          "path": "components/ui/brutalist-hero.tsx",
+          "path": "components/ui/activity-log-page/ActivityLogPage.vue",
           "type": "registry:ui"
         }
       ],
@@ -3393,7 +8979,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3423,7 +9013,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3433,35 +9026,40 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "pricing-section",
+      "name": "profile-page",
       "type": "registry:ui",
-      "title": "Pricing Section",
-      "description": "A highly customizable neo-brutalist Pricing Section component built with Brutx design tokens.",
+      "title": "Profile Page",
+      "description": "A highly customizable neo-brutalist Profile Page component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "button",
+        "avatar",
         "card",
-        "badge"
+        "input",
+        "button",
+        "textarea"
       ],
       "files": [
         {
-          "path": "components/ui/pricing-section.tsx",
+          "path": "components/ui/profile-page/ProfilePage.vue",
           "type": "registry:ui"
         }
       ],
@@ -3487,7 +9085,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3517,7 +9119,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3527,36 +9132,39 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "auth-card",
+      "name": "chart-section",
       "type": "registry:ui",
-      "title": "Auth Card",
-      "description": "A highly customizable neo-brutalist Auth Card component built with Brutx design tokens.",
+      "title": "Chart Section",
+      "description": "A highly customizable neo-brutalist Chart Section component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "reka-ui",
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "button",
+        "sketchy-chart",
         "card",
-        "input",
-        "label"
+        "tabs"
       ],
       "files": [
         {
-          "path": "components/ui/auth-card.tsx",
+          "path": "components/ui/chart-section/ChartSection.vue",
           "type": "registry:ui"
         }
       ],
@@ -3582,7 +9190,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3612,7 +9224,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3622,36 +9237,38 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "dashboard-shell",
+      "name": "gallery-section",
       "type": "registry:ui",
-      "title": "Dashboard Shell",
-      "description": "A highly customizable neo-brutalist Dashboard Shell component built with Brutx design tokens.",
+      "title": "Gallery Section",
+      "description": "A highly customizable neo-brutalist Gallery Section component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "embla-carousel-vue",
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "card",
-        "table",
-        "badge",
-        "button"
+        "carousel",
+        "card"
       ],
       "files": [
         {
-          "path": "components/ui/dashboard-shell.tsx",
+          "path": "components/ui/gallery-section/GallerySection.vue",
           "type": "registry:ui"
         }
       ],
@@ -3677,7 +9294,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3707,7 +9328,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3717,33 +9341,39 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "empty-state",
+      "name": "upload-card",
       "type": "registry:ui",
-      "title": "Empty State",
-      "description": "A highly customizable neo-brutalist Empty State component built with Brutx design tokens.",
+      "title": "Upload Card",
+      "description": "A highly customizable neo-brutalist Upload Card component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "button"
+        "card",
+        "button",
+        "progress",
+        "spinner"
       ],
       "files": [
         {
-          "path": "components/ui/empty-state.tsx",
+          "path": "components/ui/upload-card/UploadCard.vue",
           "type": "registry:ui"
         }
       ],
@@ -3769,7 +9399,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3799,7 +9433,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3809,34 +9446,37 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     },
     {
-      "name": "waitlist-page",
+      "name": "overview-page",
       "type": "registry:ui",
-      "title": "Waitlist Page",
-      "description": "A highly customizable neo-brutalist Waitlist Page component built with Brutx design tokens.",
+      "title": "Overview Page",
+      "description": "A highly customizable neo-brutalist Overview Page component built with Brutx design tokens for Vue 3.",
       "dependencies": [
-        "lucide-react"
+        "lucide-vue-next"
       ],
       "registryDependencies": [
-        "button",
-        "input"
+        "dashboard-stats",
+        "card"
       ],
       "files": [
         {
-          "path": "components/ui/waitlist-page.tsx",
+          "path": "components/ui/overview-page/OverviewPage.vue",
           "type": "registry:ui"
         }
       ],
@@ -3862,7 +9502,11 @@
                 "brutal-destructive": "var(--brutal-destructive, #EF476F)",
                 "brutal-success": "var(--brutal-success, #7FB069)",
                 "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-                "brutal-ring": "var(--brutal-ring, #000000)"
+                "brutal-ring": "var(--brutal-ring, #000000)",
+                "brutal-info": "var(--brutal-info, #4A90D9)",
+                "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+                "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+                "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
               },
               "boxShadow": {
                 "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -3892,7 +9536,10 @@
           "brutal-success": "#7FB069",
           "brutal-muted": "#f3f4f6",
           "brutal-ring": "#000000",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#4A90D9",
+          "brutal-muted-foreground": "#4B5563",
+          "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+          "brutal-placeholder": "#9CA3AF"
         },
         "dark": {
           "brutal-border-width": "3px",
@@ -3902,16 +9549,19 @@
           "brutal-shadow-color": "#ffffff",
           "brutal-radius": "0px",
           "brutal-pressed-offset": "2px",
-          "brutal-bg": "#111827",
+          "brutal-bg": "#141414",
           "brutal-fg": "#ffffff",
           "brutal-primary": "#FF6B6B",
           "brutal-secondary": "#4ECDC4",
           "brutal-accent": "#FFE66D",
           "brutal-destructive": "#EF476F",
           "brutal-success": "#7FB069",
-          "brutal-muted": "#1f2937",
+          "brutal-muted": "#1e1e1e",
           "brutal-ring": "#ffffff",
-          "brutal-info": "#4A90D9"
+          "brutal-info": "#3B82F6",
+          "brutal-muted-foreground": "#9CA3AF",
+          "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+          "brutal-placeholder": "#6B7280"
         }
       }
     }
diff --git a/packages/registry/registry/input.json b/packages/registry/registry/input.json
index 52bf38c..d09ef8b 100644
--- a/packages/registry/registry/input.json
+++ b/packages/registry/registry/input.json
@@ -3,13 +3,18 @@
   "name": "input",
   "type": "registry:ui",
   "title": "Input",
-  "description": "A highly customizable neo-brutalist Input component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Input component built with Brutx design tokens for Vue 3.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/input.tsx",
-      "content": "import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst inputVariants = cva(\n    [\n        'flex w-full',\n        'border-3 border-brutal rounded-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'font-medium',\n        'placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:font-normal',\n        'transition-all duration-150',\n        'focus:outline-none focus:shadow-brutal',\n        'focus-visible:ring-2 focus-visible:ring-[var(--brutal-ring,#000)] focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',\n    ],\n    {\n        variants: {\n            variant: {\n                default: '',\n                error: 'border-[#EF476F] focus:shadow-[4px_4px_0px_0px_#EF476F]',\n                success: 'border-[#7FB069] focus:shadow-[4px_4px_0px_0px_#7FB069]',\n            },\n            size: {\n                sm: 'h-9 px-3 py-1 text-sm',\n                default: 'h-11 px-4 py-2 text-base',\n                lg: 'h-14 px-5 py-3 text-lg',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface InputProps\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n        VariantProps<typeof inputVariants> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n    ({ className, variant, size, type, ...props }, ref) => {\n        return (\n            <input\n                type={type}\n                className={cn(inputVariants({ variant, size, className }))}\n                ref={ref}\n                {...props}\n            />\n        );\n    }\n);\nInput.displayName = 'Input';\n\nexport { Input, inputVariants };\n",
+      "path": "components/ui/input/Input.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { inputVariants } from '@/components/ui/input/input-variants'\n\ntype InputVariantProps = VariantProps<typeof inputVariants>\n\ninterface InputProps {\n    type?: string\n    modelValue?: string\n    variant?: NonNullable<InputVariantProps['variant']>\n    inputSize?: NonNullable<InputVariantProps['inputSize']>\n    disabled?: boolean\n    placeholder?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    type: 'text',\n    modelValue: undefined,\n    variant: 'default',\n    inputSize: 'default',\n    disabled: false,\n    placeholder: '',\n    class: '',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\nconst classes = computed(() =>\n    cn(inputVariants({ variant: props.variant, inputSize: props.inputSize }), props.class)\n)\n</script>\n\n<template>\n    <input\n        :type=\"type\"\n        :value=\"modelValue\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :class=\"classes\"\n        @input=\"emit('update:modelValue', ($event.target as HTMLInputElement).value)\"\n    >\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/input/input-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const inputVariants = cva(\n    [\n        'flex w-full',\n        'border-3 border-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'font-medium',\n        'placeholder:text-brutal-placeholder placeholder:font-normal',\n        'transition-all duration-150',\n        'focus:outline-none focus:shadow-brutal',\n        'focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',\n    ],\n    {\n        variants: {\n            variant: {\n                default: '',\n                error: 'border-brutal-destructive focus:shadow-brutal-primary',\n                success: 'border-brutal-success focus:shadow-brutal-secondary',\n            },\n            inputSize: {\n                sm: 'h-9 px-3 py-1 text-sm',\n                default: 'h-11 px-4 py-2 text-base',\n                lg: 'h-14 px-5 py-3 text-lg',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            inputSize: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -35,7 +40,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -65,7 +74,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -75,16 +87,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/kanban.json b/packages/registry/registry/kanban.json
new file mode 100644
index 0000000..17195eb
--- /dev/null
+++ b/packages/registry/registry/kanban.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "kanban",
+  "type": "registry:ui",
+  "title": "Kanban",
+  "description": "A highly customizable neo-brutalist Kanban component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/kanban/KanbanBoard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { cn } from '@/lib/utils';\nimport { useLocale } from '@/composables/useLocale';\nimport { kanbanColumnVariants, kanbanCardVariants } from '@/components/ui/kanban/kanban-variants';\n\nexport interface KanbanCard {\n    id: string;\n    title: string;\n    description?: string;\n    tags?: string[];\n    color?: string;\n}\n\nexport interface KanbanColumn {\n    id: string;\n    title: string;\n    color?: string;\n    cards: KanbanCard[];\n}\n\ninterface KanbanBoardProps {\n    modelValue: KanbanColumn[];\n    class?: string;\n}\n\nconst props = defineProps<KanbanBoardProps>();\n\nconst emit = defineEmits<{\n    'update:modelValue': [columns: KanbanColumn[]];\n    'card-move': [cardId: string, fromColumn: string, toColumn: string];\n}>();\n\nconst { t } = useLocale();\n\nconst draggingCard = ref<{ cardId: string; fromColumn: string } | null>(null);\nconst dragOverColumn = ref<string | null>(null);\n\nconst columns = computed({\n    get: () => props.modelValue,\n    set: (val) => emit('update:modelValue', val),\n});\n\nfunction onDragStart(cardId: string, fromColumn: string) {\n    draggingCard.value = { cardId, fromColumn };\n}\n\nfunction onDragEnd() {\n    draggingCard.value = null;\n    dragOverColumn.value = null;\n}\n\nfunction onDragOver(e: DragEvent, columnId: string) {\n    e.preventDefault();\n    dragOverColumn.value = columnId;\n}\n\nfunction onDragLeave(columnId: string) {\n    if (dragOverColumn.value === columnId) {\n        dragOverColumn.value = null;\n    }\n}\n\nfunction onDrop(toColumnId: string) {\n    if (!draggingCard.value) return;\n    const { cardId, fromColumn } = draggingCard.value;\n    if (fromColumn === toColumnId) {\n        dragOverColumn.value = null;\n        draggingCard.value = null;\n        return;\n    }\n\n    const sourceColumn = columns.value.find((col) => col.id === fromColumn);\n    const card = sourceColumn?.cards.find((c) => c.id === cardId);\n    if (!card) {\n        draggingCard.value = null;\n        dragOverColumn.value = null;\n        return;\n    }\n\n    const newColumns = columns.value.map((col) => {\n        if (col.id === fromColumn) {\n            return { ...col, cards: col.cards.filter((c) => c.id !== cardId) };\n        }\n        if (col.id === toColumnId) {\n            return { ...col, cards: [...col.cards, card] };\n        }\n        return col;\n    });\n\n    emit('update:modelValue', newColumns);\n    emit('card-move', cardId, fromColumn, toColumnId);\n    draggingCard.value = null;\n    dragOverColumn.value = null;\n}\n\nconst boardClass = computed(() => cn('flex gap-4 overflow-x-auto pb-4', props.class));\n\nconst columnClassesMap = computed(() => {\n    const map = new Map<string, string>()\n    columns.value.forEach((col) => {\n        map.set(col.id, cn(kanbanColumnVariants({ dragOver: dragOverColumn.value === col.id })))\n    })\n    return map\n})\n\nconst cardClassesMap = computed(() => {\n    const map = new Map<string, string>()\n    columns.value.forEach((col) => {\n        col.cards.forEach((card) => {\n            map.set(card.id, cn(kanbanCardVariants({ dragging: draggingCard.value?.cardId === card.id })))\n        })\n    })\n    return map\n})\n</script>\n\n<template>\n    <div :class=\"boardClass\">\n        <div\n            v-for=\"col in columns\"\n            :key=\"col.id\"\n            :class=\"columnClassesMap.get(col.id)\"\n            @dragover=\"onDragOver($event, col.id)\"\n            @dragleave=\"onDragLeave(col.id)\"\n            @drop=\"onDrop(col.id)\"\n        >\n            <!-- Column Header -->\n            <div class=\"flex items-center justify-between mb-1\">\n                <div class=\"flex items-center gap-2\">\n                    <span\n                        v-if=\"col.color\"\n                        class=\"inline-block w-3 h-3 rounded-brutal border-3 border-brutal\"\n                        :style=\"{ background: col.color }\"\n                    />\n                    <h3 class=\"font-black text-sm tracking-wide uppercase text-brutal-fg\">{{ col.title }}</h3>\n                </div>\n                <span class=\"text-xs font-bold border-3 border-brutal px-1.5 py-0.5 rounded-brutal bg-brutal-bg shadow-brutal\">\n                    {{ col.cards.length }}\n                </span>\n            </div>\n\n            <!-- Cards -->\n            <div class=\"flex flex-col gap-2 min-h-[120px]\">\n                <div\n                    v-for=\"card in col.cards\"\n                    :key=\"card.id\"\n                    :class=\"cardClassesMap.get(card.id)\"\n                    draggable=\"true\"\n                    @dragstart=\"onDragStart(card.id, col.id)\"\n                    @dragend=\"onDragEnd\"\n                >\n                    <p class=\"font-bold text-sm text-brutal-fg\">{{ card.title }}</p>\n                    <p v-if=\"card.description\" class=\"text-xs text-brutal-fg opacity-70 mt-1\">\n                        {{ card.description }}\n                    </p>\n                    <div v-if=\"card.tags && card.tags.length\" class=\"flex flex-wrap gap-1 mt-2\">\n                        <span\n                            v-for=\"tag in card.tags\"\n                            :key=\"tag\"\n                            class=\"text-xs font-bold px-1.5 py-0.5 border-3 border-brutal rounded-brutal bg-brutal-accent\"\n                        >\n                            {{ tag }}\n                        </span>\n                    </div>\n                </div>\n\n                <!-- Empty State -->\n                <div\n                    v-if=\"col.cards.length === 0\"\n                    class=\"flex items-center justify-center h-16 border-3 border-dashed border-brutal rounded-brutal text-xs font-medium opacity-40\"\n                >\n                    {{ t('kanban.dropCardsHere') }}\n                </div>\n            </div>\n\n            <!-- Add Card Slot -->\n            <slot :name=\"`add-${col.id}`\" />\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/kanban/kanban-variants.ts",
+      "content": "import { cva } from 'class-variance-authority';\n\nexport const kanbanColumnVariants = cva(\n    [\n        'flex flex-col gap-3 min-w-[260px] w-[280px]',\n        'border-3 border-brutal shadow-brutal rounded-brutal',\n        'bg-brutal-muted p-3',\n        'transition-shadow duration-200',\n    ].join(' '),\n    {\n        variants: {\n            dragOver: {\n                true: 'shadow-brutal-lg border-brutal-primary',\n                false: '',\n            },\n        },\n        defaultVariants: {\n            dragOver: false,\n        },\n    }\n);\n\nexport const kanbanCardVariants = cva(\n    [\n        'border-3 border-brutal shadow-brutal rounded-brutal',\n        'bg-brutal-bg px-3 py-2',\n        'cursor-grab active:cursor-grabbing',\n        'transition-all duration-150',\n        'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n    ].join(' '),\n    {\n        variants: {\n            dragging: {\n                true: 'opacity-40 shadow-none',\n                false: '',\n            },\n        },\n        defaultVariants: {\n            dragging: false,\n        },\n    }\n);\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/kbd.json b/packages/registry/registry/kbd.json
new file mode 100644
index 0000000..5a3fc70
--- /dev/null
+++ b/packages/registry/registry/kbd.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "kbd",
+  "type": "registry:ui",
+  "title": "Kbd",
+  "description": "A highly customizable neo-brutalist Kbd component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/kbd/Kbd.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { kbdVariants } from '@/components/ui/kbd/kbd-variants';\n\ntype KbdVariantProps = VariantProps<typeof kbdVariants>;\n\ninterface KbdProps {\n    size?: NonNullable<KbdVariantProps['size']>;\n    class?: string;\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n    size: 'md',\n});\n\nconst classes = computed(() =>\n    cn(kbdVariants({ size: props.size }), props.class)\n);\n</script>\n\n<template>\n    <kbd :class=\"classes\">\n        <slot />\n    </kbd>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/kbd/kbd-variants.ts",
+      "content": "import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n    [\n        'inline-flex items-center justify-center',\n        'font-mono font-black text-brutal-fg',\n        'border-3 border-brutal rounded-brutal',\n        'bg-brutal-muted shadow-brutal-sm',\n        'select-none whitespace-nowrap',\n    ].join(' '),\n    {\n        variants: {\n            size: {\n                sm: 'px-1.5 py-0.5 text-xs min-w-[1.25rem]',\n                md: 'px-2 py-1 text-sm min-w-[1.75rem]',\n                lg: 'px-3 py-1.5 text-base min-w-[2.25rem]',\n            },\n        },\n        defaultVariants: {\n            size: 'md',\n        },\n    }\n);\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/label.json b/packages/registry/registry/label.json
index 9e5ea13..e46cecc 100644
--- a/packages/registry/registry/label.json
+++ b/packages/registry/registry/label.json
@@ -3,15 +3,20 @@
   "name": "label",
   "type": "registry:ui",
   "title": "Label",
-  "description": "A highly customizable neo-brutalist Label component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Label component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-label"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/label.tsx",
-      "content": "import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst labelVariants = cva(\n    [\n        'text-sm font-bold tracking-wide leading-none',\n        'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'text-black dark:text-white',\n                error: 'text-[#EF476F]',\n                success: 'text-[#7FB069]',\n                muted: 'text-gray-500 dark:text-gray-400',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    }\n);\n\nexport interface LabelProps\n    extends React.LabelHTMLAttributes<HTMLLabelElement>,\n        VariantProps<typeof labelVariants> {}\n\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n    ({ className, variant, ...props }, ref) => (\n        <label ref={ref} className={cn(labelVariants({ variant, className }))} {...props} />\n    )\n);\nLabel.displayName = 'Label';\n\nexport { Label, labelVariants };\n",
+      "path": "components/ui/label/Label.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Label as LabelRoot } from 'reka-ui'\nimport { labelVariants } from '@/components/ui/label/label-variants'\n\ntype LabelVariantProps = VariantProps<typeof labelVariants>\n\ninterface LabelProps {\n    variant?: NonNullable<LabelVariantProps['variant']>\n    for?: string\n    class?: string\n}\n\nconst props = defineProps<LabelProps>()\n\nconst classes = computed(() =>\n    cn(labelVariants({ variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n    <LabelRoot :class=\"classes\" :for=\"props.for\">\n        <slot />\n    </LabelRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/label/label-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const labelVariants = cva(\n    [\n        'text-sm font-bold tracking-wide leading-none',\n        'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'text-brutal-fg',\n                error: 'text-brutal-destructive',\n                success: 'text-brutal-success',\n                muted: 'text-brutal-muted-foreground',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +42,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +76,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +89,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/loading-page.json b/packages/registry/registry/loading-page.json
new file mode 100644
index 0000000..a971710
--- /dev/null
+++ b/packages/registry/registry/loading-page.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "loading-page",
+  "type": "registry:ui",
+  "title": "Loading Page",
+  "description": "A highly customizable neo-brutalist Loading Page component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "skeleton",
+    "spinner",
+    "progress"
+  ],
+  "files": [
+    {
+      "path": "components/ui/loading-page/LoadingPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Skeleton from '@/components/ui/skeleton/Skeleton.vue'\nimport Spinner from '@/components/ui/spinner/Spinner.vue'\nimport Progress from '@/components/ui/progress/Progress.vue'\n\ninterface LoadingPageProps {\n    title?: string\n    description?: string\n    progress?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<LoadingPageProps>(), {\n    title: undefined,\n    description: undefined,\n    progress: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('loadingPage.defaultTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('loadingPage.defaultDescription'))\n\nconst hasProgress = computed(() => props.progress !== undefined)\n\nconst rootClasses = computed(() =>\n    cn('min-h-screen flex items-center justify-center bg-brutal-bg p-4', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"w-full max-w-lg text-center relative\">\n            <slot name=\"header\" />\n\n            <div class=\"relative border-3 border-brutal bg-brutal-bg shadow-brutal p-8 sm:p-12\">\n                <Skeleton variant=\"accent\" class=\"absolute -top-3 -left-3 h-6 w-24\" />\n                <Skeleton variant=\"secondary\" class=\"absolute -bottom-3 -right-3 h-6 w-32\" />\n\n                <div class=\"flex justify-center mb-6\">\n                    <Spinner size=\"lg\" />\n                </div>\n\n                <h1 class=\"text-2xl sm:text-3xl font-black tracking-tight text-brutal-fg\">\n                    {{ resolvedTitle }}\n                </h1>\n\n                <p class=\"mt-3 text-brutal-muted-foreground font-medium\">\n                    {{ resolvedDescription }}\n                </p>\n\n                <slot />\n\n                <div v-if=\"hasProgress\" class=\"mt-6\">\n                    <Progress :model-value=\"progress\" />\n                </div>\n\n                <slot name=\"footer\" />\n            </div>\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/marquee.json b/packages/registry/registry/marquee.json
new file mode 100644
index 0000000..a0c32e1
--- /dev/null
+++ b/packages/registry/registry/marquee.json
@@ -0,0 +1,100 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "marquee",
+  "type": "registry:ui",
+  "title": "Marquee",
+  "description": "A highly customizable neo-brutalist Marquee component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/marquee/Marquee.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { marqueeContainerVariants, marqueeTrackVariants } from './marquee-variants'\n\nconst DEFAULT_SPEED = 20\n\ninterface MarqueeProps {\n    direction?: 'left' | 'right'\n    speed?: number\n    pauseOnHover?: boolean\n    fade?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<MarqueeProps>(), {\n    direction: 'left',\n    speed: DEFAULT_SPEED,\n    pauseOnHover: false,\n    fade: false,\n    class: '',\n})\n\nconst containerClasses = computed(() =>\n    cn(marqueeContainerVariants({ fade: props.fade || undefined }), props.class)\n)\n\nconst trackClasses = computed(() =>\n    cn(\n        marqueeTrackVariants({ direction: props.direction, pauseOnHover: props.pauseOnHover || undefined })\n    )\n)\n\nconst containerStyle = computed(() => ({\n    '--speed': `${props.speed}s`,\n}))\n</script>\n\n<template>\n    <div :class=\"containerClasses\" :style=\"containerStyle\">\n        <div :class=\"trackClasses\">\n            <slot />\n        </div>\n        <div :class=\"trackClasses\" aria-hidden=\"true\">\n            <slot />\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/not-found-page.json b/packages/registry/registry/not-found-page.json
new file mode 100644
index 0000000..95d5596
--- /dev/null
+++ b/packages/registry/registry/not-found-page.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "not-found-page",
+  "type": "registry:ui",
+  "title": "Not Found Page",
+  "description": "A highly customizable neo-brutalist Not Found Page component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "button",
+    "card",
+    "glitch-text"
+  ],
+  "files": [
+    {
+      "path": "components/ui/not-found-page/NotFoundPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Button from '@/components/ui/button/Button.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport GlitchText from '@/components/ui/glitch-text/GlitchText.vue'\n\ninterface NotFoundPageProps {\n    title?: string\n    description?: string\n    backText?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<NotFoundPageProps>(), {\n    title: undefined,\n    description: undefined,\n    backText: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('notFoundPage.defaultTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('notFoundPage.defaultDescription'))\nconst resolvedBackText = computed(() => props.backText ?? t('notFoundPage.defaultBackText'))\n\nconst emit = defineEmits<{\n    back: []\n}>()\n\nconst rootClasses = computed(() =>\n    cn('min-h-screen flex items-center justify-center bg-brutal-bg p-4', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"w-full max-w-lg text-center relative\">\n            <slot name=\"header\" />\n\n            <Card variant=\"elevated\" class=\"relative p-8 sm:p-12\">\n                <div class=\"absolute -top-6 -left-6 h-16 w-16 bg-brutal-accent border-3 border-brutal rotate-12 shadow-brutal-sm\" />\n                <div class=\"absolute -bottom-4 -right-4 h-12 w-12 bg-brutal-secondary border-3 border-brutal -rotate-6 shadow-brutal-sm\" />\n\n                <div class=\"mb-6\">\n                    <GlitchText text=\"404\" trigger=\"autoplay\" :interval=\"4000\" speed=\"fast\" class=\"text-7xl sm:text-8xl font-black text-brutal-primary\" />\n                </div>\n\n                <h1 class=\"text-2xl sm:text-3xl font-black tracking-tight text-brutal-fg\">\n                    {{ resolvedTitle }}\n                </h1>\n\n                <p class=\"mt-3 text-brutal-muted-foreground font-medium\">\n                    {{ resolvedDescription }}\n                </p>\n\n                <slot />\n\n                <div class=\"mt-8\">\n                    <Button variant=\"primary\" @click=\"emit('back')\">\n                        <ArrowLeft class=\"h-4 w-4 stroke-[3]\" />\n                        {{ resolvedBackText }}\n                    </Button>\n                </div>\n\n                <slot name=\"footer\" />\n            </Card>\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/number-input.json b/packages/registry/registry/number-input.json
new file mode 100644
index 0000000..6fbc2ca
--- /dev/null
+++ b/packages/registry/registry/number-input.json
@@ -0,0 +1,103 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "number-input",
+  "type": "registry:ui",
+  "title": "Number Input",
+  "description": "A highly customizable neo-brutalist Number Input component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/number-input/NumberInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    NumberFieldRoot,\n    type NumberFieldRootProps,\n    type NumberFieldRootEmits,\n    NumberFieldInput,\n    NumberFieldIncrement,\n    NumberFieldDecrement,\n    useForwardPropsEmits\n} from 'reka-ui'\nimport { Plus, Minus, ChevronUp, ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { numberInputRootVariants, numberInputButtonVariants, numberInputFieldVariants } from './number-input-variants'\n\ninterface NumberInputProps extends NumberFieldRootProps {\n    layout?: 'split' | 'stacked'\n    placeholder?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n    layout: 'split',\n    placeholder: '',\n    class: '',\n})\n\nconst emits = defineEmits<NumberFieldRootEmits>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, layout: __, placeholder: ___, ...delegated } = props\n    return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst containerClasses = computed(() =>\n    cn(numberInputRootVariants({ layout: props.layout }), props.class)\n)\n\nconst decrementClasses = computed(() =>\n    cn(numberInputButtonVariants({ position: 'decrement', layout: props.layout }))\n)\n\nconst incrementClasses = computed(() =>\n    cn(numberInputButtonVariants({ position: 'increment', layout: props.layout }))\n)\n\nconst fieldClasses = computed(() =>\n    cn(numberInputFieldVariants({ layout: props.layout }))\n)\n</script>\n\n<template>\n    <NumberFieldRoot v-bind=\"forwarded\" :class=\"containerClasses\">\n        <template v-if=\"layout === 'split'\">\n            <NumberFieldDecrement :class=\"decrementClasses\">\n                <Minus class=\"h-4 w-4 stroke-[3]\" />\n            </NumberFieldDecrement>\n\n            <NumberFieldInput\n                :placeholder=\"placeholder\"\n                :class=\"fieldClasses\"\n            />\n\n            <NumberFieldIncrement :class=\"incrementClasses\">\n                <Plus class=\"h-4 w-4 stroke-[3]\" />\n            </NumberFieldIncrement>\n        </template>\n\n        <template v-else>\n            <NumberFieldInput\n                :placeholder=\"placeholder\"\n                :class=\"fieldClasses\"\n            />\n\n            <div class=\"flex flex-col border-l-3 border-brutal w-10 shrink-0\">\n                <NumberFieldIncrement :class=\"incrementClasses\">\n                    <ChevronUp class=\"h-4 w-4 stroke-[3]\" />\n                </NumberFieldIncrement>\n                <NumberFieldDecrement :class=\"decrementClasses\">\n                    <ChevronDown class=\"h-4 w-4 stroke-[3]\" />\n                </NumberFieldDecrement>\n            </div>\n        </template>\n    </NumberFieldRoot>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/overview-page.json b/packages/registry/registry/overview-page.json
new file mode 100644
index 0000000..4f32b46
--- /dev/null
+++ b/packages/registry/registry/overview-page.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "overview-page",
+  "type": "registry:ui",
+  "title": "Overview Page",
+  "description": "A highly customizable neo-brutalist Overview Page component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "dashboard-stats",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "components/ui/overview-page/OverviewPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue'\nimport { Activity } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport DashboardStats from '@/components/ui/dashboard-stats/DashboardStats.vue'\nimport type { StatItem } from '@/components/ui/dashboard-stats/DashboardStats.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\n\nexport interface OverviewStat {\n    title: string\n    value: string\n    change: string\n    trend: 'up' | 'down' | 'neutral'\n}\n\ninterface OverviewPageProps {\n    title?: string\n    stats?: OverviewStat[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<OverviewPageProps>(), {\n    title: undefined,\n    stats: () => [],\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    'stat-click': [index: number]\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-6xl mx-auto p-6', props.class))\n\nconst resolvedTitle = computed(() => props.title ?? t('overviewPage.defaultTitle'))\nconst resolvedRecentActivity = computed(() => t('overviewPage.recentActivity'))\nconst resolvedQuickStats = computed(() => t('overviewPage.quickStats'))\n\nconst dashboardStats = computed<StatItem[]>(() =>\n    props.stats.map((stat) => ({\n        title: stat.title,\n        value: stat.value,\n        description: '',\n        change: stat.change,\n        trend: stat.trend,\n        icon: Activity as Component,\n    }))\n)\n\nfunction handleStatsClick(event: MouseEvent) {\n    const target = event.target as HTMLElement\n    const grid = (event.currentTarget as HTMLElement).querySelector('.grid')\n    if (!grid) return\n    const cards = Array.from(grid.children)\n    for (let i = 0; i < cards.length; i++) {\n        if (cards[i].contains(target)) {\n            emit('stat-click', i)\n            return\n        }\n    }\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\">\n            <h1 class=\"text-3xl font-black tracking-tight mb-8\">\n{{ resolvedTitle }}\n</h1>\n        </slot>\n\n        <div @click=\"handleStatsClick\">\n            <DashboardStats :stats=\"dashboardStats\" />\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mt-8\">\n            <Card variant=\"default\">\n                <CardHeader>\n                    <CardTitle>{{ resolvedRecentActivity }}</CardTitle>\n                </CardHeader>\n                <CardContent>\n                    <slot />\n                </CardContent>\n            </Card>\n            <Card variant=\"default\">\n                <CardHeader>\n                    <CardTitle>{{ resolvedQuickStats }}</CardTitle>\n                </CardHeader>\n                <CardContent>\n                    <div class=\"space-y-3\">\n                        <div\n                            v-for=\"(stat, index) in stats\"\n                            :key=\"stat.title\"\n                            class=\"flex items-center justify-between p-3 bg-brutal-muted border-3 border-brutal shadow-brutal-sm cursor-pointer hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all\"\n                            @click=\"emit('stat-click', index)\"\n                        >\n                            <span class=\"font-bold text-sm\">{{ stat.title }}</span>\n                            <span class=\"font-black\">{{ stat.value }}</span>\n                        </div>\n                    </div>\n                </CardContent>\n            </Card>\n        </div>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/pagination.json b/packages/registry/registry/pagination.json
index 4b50956..2c9c37f 100644
--- a/packages/registry/registry/pagination.json
+++ b/packages/registry/registry/pagination.json
@@ -3,15 +3,20 @@
   "name": "pagination",
   "type": "registry:ui",
   "title": "Pagination",
-  "description": "A highly customizable neo-brutalist Pagination component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Pagination component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/pagination.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst paginationVariants = cva('flex items-center justify-center', {\n    variants: {\n        variant: {\n            default: '',\n            rounded: '[&_button]:rounded-none',\n            minimal: '[&_button]:border-0 [&_button]:shadow-none',\n        },\n        size: {\n            sm: 'gap-1',\n            default: 'gap-2',\n            lg: 'gap-3',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        size: 'default',\n    },\n});\n\nconst paginationButtonVariants = cva(\n    [\n        'inline-flex items-center justify-center font-black',\n        'border-3 border-brutal',\n        'transition-all duration-150',\n        'focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2',\n        'disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none',\n    ],\n    {\n        variants: {\n            size: {\n                sm: 'h-8 min-w-8 text-sm px-2',\n                default: 'h-10 min-w-10 text-base px-3',\n                lg: 'h-12 min-w-12 text-lg px-4',\n            },\n            isActive: {\n                true: [\n                    'bg-black text-white dark:bg-white dark:text-black',\n                    'shadow-[4px_4px_0px_0px_#FF6B6B]',\n                    'hover:shadow-[2px_2px_0px_0px_#FF6B6B]',\n                    'active:shadow-none active:translate-x-1 active:translate-y-1',\n                ],\n                false: [\n                    'bg-white dark:bg-gray-900 text-black dark:text-white',\n                    'shadow-brutal',\n                    'hover:bg-gray-100 dark:hover:bg-gray-800',\n                    'hover:shadow-brutal-sm',\n                    'active:shadow-none active:translate-x-1 active:translate-y-1',\n                ],\n            },\n        },\n        defaultVariants: {\n            size: 'default',\n            isActive: false,\n        },\n    }\n);\n\ninterface PaginationProps\n    extends React.HTMLAttributes<HTMLElement>,\n        VariantProps<typeof paginationVariants> {\n    currentPage: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    siblingCount?: number;\n    showFirstLast?: boolean;\n    showPageNumbers?: boolean;\n}\n\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n    (\n        {\n            className,\n            currentPage,\n            totalPages,\n            onPageChange,\n            siblingCount = 1,\n            showFirstLast = true,\n            showPageNumbers = true,\n            variant,\n            size,\n            ...props\n        },\n        ref\n    ) => {\n        const range = (start: number, end: number) => {\n            const length = end - start + 1;\n            return Array.from({ length }, (_, idx) => idx + start);\n        };\n\n        const paginationRange = React.useMemo(() => {\n            const totalPageNumbers = siblingCount + 5;\n\n            if (totalPageNumbers >= totalPages) {\n                return range(1, totalPages);\n            }\n\n            const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n            const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);\n\n            const shouldShowLeftDots = leftSiblingIndex > 2;\n            const shouldShowRightDots = rightSiblingIndex < totalPages - 2;\n\n            const firstPageIndex = 1;\n            const lastPageIndex = totalPages;\n\n            if (!shouldShowLeftDots && shouldShowRightDots) {\n                const leftItemCount = 3 + 2 * siblingCount;\n                const leftRange = range(1, leftItemCount);\n                return [...leftRange, 'dots', totalPages];\n            }\n\n            if (shouldShowLeftDots && !shouldShowRightDots) {\n                const rightItemCount = 3 + 2 * siblingCount;\n                const rightRange = range(totalPages - rightItemCount + 1, totalPages);\n                return [firstPageIndex, 'dots', ...rightRange];\n            }\n\n            if (shouldShowLeftDots && shouldShowRightDots) {\n                const middleRange = range(leftSiblingIndex, rightSiblingIndex);\n                return [firstPageIndex, 'dots', ...middleRange, 'dots', lastPageIndex];\n            }\n\n            return range(1, totalPages);\n        }, [totalPages, siblingCount, currentPage]);\n\n        const buttonSize = size || 'default';\n\n        return (\n            <nav\n                ref={ref}\n                role=\"navigation\"\n                aria-label=\"pagination\"\n                className={cn(paginationVariants({ variant, size, className }))}\n                {...props}\n            >\n                {showFirstLast && (\n                    <button\n                        type=\"button\"\n                        className={cn(\n                            paginationButtonVariants({ size: buttonSize, isActive: false })\n                        )}\n                        onClick={() => onPageChange(1)}\n                        disabled={currentPage === 1}\n                        aria-label=\"Go to first page\"\n                    >\n                        <ChevronsLeft className=\"h-4 w-4 stroke-[3]\" />\n                    </button>\n                )}\n\n                <button\n                    type=\"button\"\n                    className={cn(paginationButtonVariants({ size: buttonSize, isActive: false }))}\n                    onClick={() => onPageChange(currentPage - 1)}\n                    disabled={currentPage === 1}\n                    aria-label=\"Go to previous page\"\n                >\n                    <ChevronLeft className=\"h-4 w-4 stroke-[3]\" />\n                </button>\n\n                {showPageNumbers &&\n                    paginationRange.map((pageNumber, index) => {\n                        if (pageNumber === 'dots') {\n                            return (\n                                <span\n                                    key={`dots-${index}`}\n                                    className={cn(\n                                        'flex items-center justify-center font-black text-black dark:text-white',\n                                        buttonSize === 'sm' && 'h-8 w-8',\n                                        buttonSize === 'default' && 'h-10 w-10',\n                                        buttonSize === 'lg' && 'h-12 w-12'\n                                    )}\n                                >\n                                    •••\n                                </span>\n                            );\n                        }\n\n                        return (\n                            <button\n                                key={pageNumber}\n                                type=\"button\"\n                                className={cn(\n                                    paginationButtonVariants({\n                                        size: buttonSize,\n                                        isActive: currentPage === pageNumber,\n                                    })\n                                )}\n                                onClick={() => onPageChange(pageNumber as number)}\n                                aria-label={`Go to page ${pageNumber}`}\n                                aria-current={currentPage === pageNumber ? 'page' : undefined}\n                            >\n                                {pageNumber}\n                            </button>\n                        );\n                    })}\n\n                {!showPageNumbers && (\n                    <span className=\"px-4 font-black text-black dark:text-white\">\n                        {currentPage} / {totalPages}\n                    </span>\n                )}\n\n                <button\n                    type=\"button\"\n                    className={cn(paginationButtonVariants({ size: buttonSize, isActive: false }))}\n                    onClick={() => onPageChange(currentPage + 1)}\n                    disabled={currentPage === totalPages}\n                    aria-label=\"Go to next page\"\n                >\n                    <ChevronRight className=\"h-4 w-4 stroke-[3]\" />\n                </button>\n\n                {showFirstLast && (\n                    <button\n                        type=\"button\"\n                        className={cn(\n                            paginationButtonVariants({ size: buttonSize, isActive: false })\n                        )}\n                        onClick={() => onPageChange(totalPages)}\n                        disabled={currentPage === totalPages}\n                        aria-label=\"Go to last page\"\n                    >\n                        <ChevronsRight className=\"h-4 w-4 stroke-[3]\" />\n                    </button>\n                )}\n            </nav>\n        );\n    }\n);\nPagination.displayName = 'Pagination';\n\nexport { Pagination, paginationVariants, paginationButtonVariants };\nexport type { PaginationProps };\n",
+      "path": "components/ui/pagination/Pagination.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { paginationVariants, paginationButtonVariants } from '@/components/ui/pagination/pagination-variants'\nimport { useLocale } from '@/composables/useLocale'\n\nconst { t } = useLocale()\n\ntype PaginationVariantProps = VariantProps<typeof paginationVariants>\n\nconst FIRST_PAGE = 1\nconst MIN_PAGE_THRESHOLD = 2\nconst FIRST_PAGES_COUNT = 3\nconst ELLIPSIS_COUNT = 1\n\ninterface PaginationProps {\n    currentPage: number\n    totalPages: number\n    siblingCount?: number\n    showFirstLast?: boolean\n    showPageNumbers?: boolean\n    variant?: NonNullable<PaginationVariantProps['variant']>\n    size?: NonNullable<PaginationVariantProps['size']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<PaginationProps>(), {\n    siblingCount: 1,\n    showFirstLast: true,\n    showPageNumbers: true,\n    variant: 'default',\n    size: 'default',\n    class: '',\n})\n\nconst emit = defineEmits<{ 'update:currentPage': [page: number] }>()\n\nfunction range(start: number, end: number) {\n    const length = end - start + 1\n    return Array.from({ length }, (_, idx) => idx + start)\n}\n\nconst paginationRange = computed(() => {\n    const totalPageNumbers = props.siblingCount * 2 + FIRST_PAGES_COUNT + ELLIPSIS_COUNT * 2\n\n    if (totalPageNumbers >= props.totalPages) {\n        return range(FIRST_PAGE, props.totalPages)\n    }\n\n    const leftSiblingIndex = Math.max(props.currentPage - props.siblingCount, FIRST_PAGE)\n    const rightSiblingIndex = Math.min(props.currentPage + props.siblingCount, props.totalPages)\n\n    const shouldShowLeftDots = leftSiblingIndex > MIN_PAGE_THRESHOLD\n    const shouldShowRightDots = rightSiblingIndex < props.totalPages - MIN_PAGE_THRESHOLD\n\n    const lastPageIndex = props.totalPages\n\n    if (!shouldShowLeftDots && shouldShowRightDots) {\n        const leftEndIndex = FIRST_PAGES_COUNT + 2 * props.siblingCount\n        const leftRange = range(FIRST_PAGE, leftEndIndex)\n        return [...leftRange, 'dots' as const, props.totalPages]\n    }\n\n    if (shouldShowLeftDots && !shouldShowRightDots) {\n        const rightEndIndex = FIRST_PAGES_COUNT + 2 * props.siblingCount\n        const rightRange = range(props.totalPages - rightEndIndex + 1, props.totalPages)\n        return [FIRST_PAGE, 'dots' as const, ...rightRange]\n    }\n\n    if (shouldShowLeftDots && shouldShowRightDots) {\n        const middleRange = range(leftSiblingIndex, rightSiblingIndex)\n        return [FIRST_PAGE, 'dots' as const, ...middleRange, 'dots' as const, lastPageIndex]\n    }\n\n    return range(FIRST_PAGE, props.totalPages)\n})\n\nconst navClasses = computed(() =>\n    cn(paginationVariants({ variant: props.variant, size: props.size }), props.class)\n)\n\nconst buttonSize = computed(() => props.size || 'default')\n\nconst dotsSizeClasses = computed(() => {\n    if (buttonSize.value === 'sm') return 'h-8 w-8'\n    if (buttonSize.value === 'lg') return 'h-12 w-12'\n    return 'h-10 w-10'\n})\n\nconst firstButtonClasses = computed(() =>\n    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))\n)\n\nconst prevButtonClasses = computed(() =>\n    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))\n)\n\nconst nextButtonClasses = computed(() =>\n    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))\n)\n\nconst lastButtonClasses = computed(() =>\n    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))\n)\n\nconst dotsClasses = computed(() =>\n    cn('flex items-center justify-center font-black text-brutal-fg', dotsSizeClasses.value)\n)\n\nconst pageButtonActiveClasses = computed(() =>\n    cn(paginationButtonVariants({ size: buttonSize.value, isActive: true }))\n)\n\nconst pageButtonInactiveClasses = computed(() =>\n    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))\n)\n\nfunction onPageChange(page: number) {\n    if (page >= FIRST_PAGE && page <= props.totalPages) {\n        emit('update:currentPage', page)\n    }\n}\n</script>\n\n<template>\n    <nav role=\"navigation\" :aria-label=\"t('pagination.label')\" :class=\"navClasses\">\n        <button\n            v-if=\"showFirstLast\"\n            type=\"button\"\n            :class=\"firstButtonClasses\"\n            :disabled=\"currentPage === 1\"\n            :aria-label=\"t('pagination.firstPage')\"\n            @click=\"onPageChange(1)\"\n        >\n            <ChevronsLeft class=\"h-4 w-4 stroke-[3]\" />\n        </button>\n\n        <button\n            type=\"button\"\n            :class=\"prevButtonClasses\"\n            :disabled=\"currentPage === 1\"\n            :aria-label=\"t('pagination.previousPage')\"\n            @click=\"onPageChange(currentPage - 1)\"\n        >\n            <ChevronLeft class=\"h-4 w-4 stroke-[3]\" />\n        </button>\n\n        <template v-if=\"showPageNumbers\">\n            <template v-for=\"(pageNumber, index) in paginationRange\" :key=\"index\">\n                <span\n                    v-if=\"pageNumber === 'dots'\"\n                    :class=\"dotsClasses\"\n                >\n                    •••\n                </span>\n                <button\n                    v-else\n                    type=\"button\"\n                    :class=\"currentPage === pageNumber ? pageButtonActiveClasses : pageButtonInactiveClasses\"\n                    :aria-label=\"t('pagination.page', { number: pageNumber as number })\"\n                    :aria-current=\"currentPage === pageNumber ? 'page' : undefined\"\n                    @click=\"onPageChange(pageNumber as number)\"\n                >\n                    {{ pageNumber }}\n                </button>\n            </template>\n        </template>\n\n        <span v-if=\"!showPageNumbers\" class=\"px-4 font-black text-brutal-fg\">\n            {{ currentPage }} / {{ totalPages }}\n        </span>\n\n        <button\n            type=\"button\"\n            :class=\"nextButtonClasses\"\n            :disabled=\"currentPage === totalPages\"\n            :aria-label=\"t('pagination.nextPage')\"\n            @click=\"onPageChange(currentPage + 1)\"\n        >\n            <ChevronRight class=\"h-4 w-4 stroke-[3]\" />\n        </button>\n\n        <button\n            v-if=\"showFirstLast\"\n            type=\"button\"\n            :class=\"lastButtonClasses\"\n            :disabled=\"currentPage === totalPages\"\n            :aria-label=\"t('pagination.lastPage')\"\n            @click=\"onPageChange(totalPages)\"\n        >\n            <ChevronsRight class=\"h-4 w-4 stroke-[3]\" />\n        </button>\n    </nav>\n</template>",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/pagination/pagination-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const paginationVariants = cva('flex items-center justify-center', {\n    variants: {\n        variant: {\n            default: '',\n            rounded: '[&_button]:rounded-brutal',\n            minimal: '[&_button]:border-transparent [&_button]:shadow-none',\n        },\n        size: {\n            sm: 'gap-1',\n            default: 'gap-2',\n            lg: 'gap-3',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n        size: 'default',\n    },\n})\n\nexport const paginationButtonVariants = cva(\n    [\n        'inline-flex items-center justify-center font-black',\n        'border-3 border-brutal',\n        'transition-all duration-150',\n        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2',\n        'disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none',\n    ],\n    {\n        variants: {\n            size: {\n                sm: 'h-8 min-w-8 text-sm px-2',\n                default: 'h-10 min-w-10 text-base px-3',\n                lg: 'h-12 min-w-12 text-lg px-4',\n            },\n            isActive: {\n                true: [\n                    'bg-brutal-fg text-brutal-bg',\n                    'shadow-brutal-primary',\n                    'hover:shadow-brutal-sm',\n                    'active:shadow-none active:translate-y-[var(--brutal-pressed-offset,2px)]',\n                ],\n                false: [\n                    'bg-brutal-bg text-brutal-fg',\n                    'shadow-brutal',\n                    'hover:bg-brutal-muted',\n                    'hover:shadow-brutal-sm',\n                    'active:shadow-none active:translate-y-[var(--brutal-pressed-offset,2px)]',\n                ],\n            },\n        },\n        defaultVariants: {\n            size: 'default',\n            isActive: false,\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +42,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +76,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +89,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/popover.json b/packages/registry/registry/popover.json
index 69ecbf7..cd5b348 100644
--- a/packages/registry/registry/popover.json
+++ b/packages/registry/registry/popover.json
@@ -3,15 +3,15 @@
   "name": "popover",
   "type": "registry:ui",
   "title": "Popover",
-  "description": "A highly customizable neo-brutalist Popover component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Popover component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-popover"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/popover.tsx",
-      "content": "import * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn } from '@/lib/utils';\n\nconst Popover = PopoverPrimitive.Root;\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\nconst PopoverContent = React.forwardRef<\n    React.ElementRef<typeof PopoverPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 8, ...props }, ref) => (\n    <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            className={cn(\n                'z-50 w-72 p-4',\n                'bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal dark:text-white',\n                'outline-none',\n                'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n                'data-[side=bottom]:slide-in-from-top-2',\n                'data-[side=left]:slide-in-from-right-2',\n                'data-[side=right]:slide-in-from-left-2',\n                'data-[side=top]:slide-in-from-bottom-2',\n                className\n            )}\n            {...props}\n        />\n    </PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n",
+      "path": "components/ui/popover/PopoverContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    PopoverPortal as PopoverPortalPrimitive,\n    PopoverContent as PopoverContentPrimitive,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface PopoverContentProps {\n    align?: 'center' | 'start' | 'end'\n    sideOffset?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<PopoverContentProps>(), {\n    align: 'center',\n    sideOffset: 8,\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(\n        'z-50 w-72 p-4',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal rounded-brutal',\n        'outline-none',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <PopoverPortalPrimitive>\n        <PopoverContentPrimitive :align=\"align\" :side-offset=\"sideOffset\" :class=\"classes\">\n            <slot />\n        </PopoverContentPrimitive>\n    </PopoverPortalPrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +37,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +71,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +84,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/pricing-section.json b/packages/registry/registry/pricing-section.json
index 0e098d9..a0b42a0 100644
--- a/packages/registry/registry/pricing-section.json
+++ b/packages/registry/registry/pricing-section.json
@@ -3,9 +3,9 @@
   "name": "pricing-section",
   "type": "registry:ui",
   "title": "Pricing Section",
-  "description": "A highly customizable neo-brutalist Pricing Section component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Pricing Section component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "button",
@@ -14,8 +14,8 @@
   ],
   "files": [
     {
-      "path": "components/ui/pricing-section.tsx",
-      "content": "import * as React from 'react';\nimport { Check } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';\nimport { Badge } from '@/components/ui/badge';\n\nexport interface BrutalistPricingPlan {\n    name: string;\n    price: string;\n    description: string;\n    features: string[];\n    ctaText: string;\n    popular?: boolean;\n    variant: 'primary' | 'secondary' | 'accent' | 'default';\n}\n\nexport interface PricingSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n    title?: string;\n    subtitle?: string;\n    plans?: BrutalistPricingPlan[];\n}\n\nconst defaultPlans: BrutalistPricingPlan[] = [\n    {\n        name: 'Indie Creator',\n        price: '$9',\n        description: 'For solo devs and side-project hackers building clean products.',\n        features: [\n            'Access to 24+ atomic components',\n            'Full registry copying workflow',\n            'Figma design assets',\n            'Community Support Channel',\n        ],\n        ctaText: 'Start Building',\n        variant: 'default',\n    },\n    {\n        name: 'Pro Developer',\n        price: '$29',\n        description: 'For growing creators, SaaS platforms, and professional agencies.',\n        features: [\n            'Access to all 36+ components',\n            'All copy-paste premium blocks',\n            'Advanced customizable variables',\n            '1 year of regular registry updates',\n            'Priority GitHub issue support',\n        ],\n        ctaText: 'Unlock Pro Access',\n        popular: true,\n        variant: 'primary',\n    },\n    {\n        name: 'Team Studio',\n        price: '$99',\n        description: 'For collaborative development groups and startups building scaled apps.',\n        features: [\n            'Unlimited user accounts',\n            'Custom internal branding theme presets',\n            'AI-ready prompts and generation guidelines',\n            'Direct Slack developer console support',\n            'SLA uptime assurance',\n        ],\n        ctaText: 'Contact Workspace Sales',\n        variant: 'secondary',\n    },\n];\n\nexport function PricingSection({\n    title = 'Simple, Transparent Brutalist Plans',\n    subtitle = 'Choose the subscription tier that matches your current development workflow. No hidden fees, instant cancel.',\n    plans = defaultPlans,\n    className,\n    ...props\n}: PricingSectionProps) {\n    return (\n        <section\n            className={`w-full py-12 md:py-24 bg-brutal-bg text-brutal-fg transition-colors duration-200 ${className || ''}`}\n            {...props}\n        >\n            <div className=\"container px-4 md:px-6 mx-auto space-y-12\">\n                <div className=\"flex flex-col items-center justify-center space-y-4 text-center max-w-3xl mx-auto\">\n                    <div className=\"bg-brutal-secondary text-black px-3 py-1 border-3 border-brutal font-black text-xs uppercase tracking-wider rotate-[1.5deg]\">\n                        Flexible Pricing Plans\n                    </div>\n                    <h2 className=\"text-3xl font-black sm:text-4xl md:text-5xl tracking-tight leading-none\">\n                        {title}\n                    </h2>\n                    <p className=\"text-lg font-bold text-gray-700 dark:text-gray-300\">\n                        {subtitle}\n                    </p>\n                </div>\n\n                <div className=\"grid gap-8 md:grid-cols-2 lg:grid-cols-3 items-stretch max-w-6xl mx-auto pt-6\">\n                    {plans.map((plan, idx) => {\n                        return (\n                            <div key={idx} className=\"relative flex flex-col h-full\">\n                                {plan.popular && (\n                                    <div className=\"absolute top-[-16px] left-[50%] translate-x-[-50%] z-20\">\n                                        <Badge variant=\"accent\" className=\"text-xs font-black uppercase tracking-wider px-3 py-1 animate-pulse border-3 border-brutal\">\n                                            Most Popular Tier\n                                        </Badge>\n                                    </div>\n                                )}\n\n                                <Card className={`flex flex-col h-full border-3 border-brutal rounded-none shadow-brutal hover:-translate-x-1 hover:-translate-y-1 hover:shadow-brutal-lg transition-all duration-150 ${plan.popular ? 'bg-yellow-50/20' : 'bg-white dark:bg-gray-800'}`}>\n                                    <CardHeader className=\"space-y-2 pb-6 border-b-3 border-brutal\">\n                                        <CardTitle className=\"text-2xl font-black leading-none\">{plan.name}</CardTitle>\n                                        <div className=\"flex items-baseline space-x-1\">\n                                            <span className=\"text-5xl font-black tracking-tight\">{plan.price}</span>\n                                            <span className=\"text-sm font-bold text-gray-500 dark:text-gray-400\">/ lifetime</span>\n                                        </div>\n                                        <CardDescription className=\"font-bold text-sm text-gray-600 dark:text-gray-300 pt-2 min-h-[48px]\">\n                                            {plan.description}\n                                        </CardDescription>\n                                    </CardHeader>\n\n                                    <CardContent className=\"flex-grow pt-6 space-y-4\">\n                                        <p className=\"font-black text-xs uppercase tracking-wider text-gray-500\">What's included:</p>\n                                        <ul className=\"space-y-3\">\n                                            {plan.features.map((feature, fIdx) => (\n                                                <li key={fIdx} className=\"flex items-start space-x-3 text-sm font-bold\">\n                                                    <div className=\"h-5 w-5 shrink-0 rounded-full bg-brutal-success border-2 border-brutal flex items-center justify-center\">\n                                                        <Check className=\"h-3 w-3 stroke-[4] text-black\" />\n                                                    </div>\n                                                    <span className=\"text-gray-700 dark:text-gray-300 leading-tight\">{feature}</span>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                    </CardContent>\n\n                                    <CardFooter className=\"pt-6 border-t-3 border-brutal mt-auto bg-gray-50 dark:bg-gray-900/50 p-6\">\n                                        <Button\n                                            className=\"w-full font-black text-base py-6\"\n                                            variant={plan.variant}\n                                        >\n                                            {plan.ctaText}\n                                        </Button>\n                                    </CardFooter>\n                                </Card>\n                            </div>\n                        );\n                    })}\n                </div>\n            </div>\n        </section>\n    );\n}\n",
+      "path": "components/ui/pricing-section/PricingSection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport Button from '@/components/ui/button/Button.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport CardDescription from '@/components/ui/card/CardDescription.vue'\nimport CardFooter from '@/components/ui/card/CardFooter.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\n\nexport interface BrutalistPricingPlan {\n    name: string\n    price: string\n    description: string\n    features: string[]\n    ctaText: string\n    popular?: boolean\n    variant: 'primary' | 'secondary' | 'default'\n}\n\ninterface PricingSectionProps {\n    title?: string\n    subtitle?: string\n    plans?: BrutalistPricingPlan[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<PricingSectionProps>(), {\n    title: 'Simple, Transparent Brutalist Plans',\n    subtitle: '',\n    plans: () => [],\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'plan-select': [planName: string]\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))\n\nfunction getPlanCardClasses(plan: BrutalistPricingPlan) {\n    return cn(plan.popular && 'bg-brutal-accent/20')\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"text-center mb-10\">\n            <h2 class=\"text-3xl font-black tracking-tight\">\n{{ title }}\n</h2>\n            <p v-if=\"subtitle\" class=\"mt-2 text-brutal-muted-foreground font-medium\">\n{{ subtitle }}\n</p>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n            <div v-for=\"plan in plans\" :key=\"plan.name\" class=\"relative\">\n                <div v-if=\"plan.popular\" class=\"absolute -top-3 left-1/2 -translate-x-1/2 z-10 rotate-[1.5deg]\">\n                    <Badge variant=\"primary\" class=\"animate-pulse\">\nMost Popular Tier\n</Badge>\n                </div>\n                <Card :variant=\"plan.variant\" :class=\"getPlanCardClasses(plan)\">\n                    <CardHeader>\n                        <CardTitle class=\"text-xl\">\n{{ plan.name }}\n</CardTitle>\n                        <CardDescription>{{ plan.description }}</CardDescription>\n                    </CardHeader>\n                    <CardContent>\n                        <div class=\"mb-6\">\n                            <span class=\"text-4xl font-black\">{{ plan.price }}</span>\n                            <span class=\"text-sm font-bold text-brutal-muted-foreground\">/ lifetime</span>\n                        </div>\n                        <ul class=\"space-y-3\">\n                            <li v-for=\"feature in plan.features\" :key=\"feature\" class=\"flex items-center gap-2\">\n                                <div class=\"flex h-5 w-5 items-center justify-center bg-brutal-success text-brutal-fg\">\n                                    <Check class=\"h-3 w-3 stroke-[3]\" />\n                                </div>\n                                <span class=\"text-sm font-medium\">{{ feature }}</span>\n                            </li>\n                        </ul>\n                    </CardContent>\n                    <CardFooter>\n                        <Button :variant=\"plan.variant === 'default' ? 'outline' : plan.variant\" class=\"w-full\" @click=\"emit('plan-select', plan.name)\">\n{{ plan.ctaText }}\n</Button>\n                    </CardFooter>\n                </Card>\n            </div>\n        </div>\n    </div>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -41,7 +41,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -71,7 +75,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -81,16 +88,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/profile-page.json b/packages/registry/registry/profile-page.json
new file mode 100644
index 0000000..c8aa7d9
--- /dev/null
+++ b/packages/registry/registry/profile-page.json
@@ -0,0 +1,108 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "profile-page",
+  "type": "registry:ui",
+  "title": "Profile Page",
+  "description": "A highly customizable neo-brutalist Profile Page component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "avatar",
+    "card",
+    "input",
+    "button",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "components/ui/profile-page/ProfilePage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Avatar from '@/components/ui/avatar/Avatar.vue'\nimport AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport Input from '@/components/ui/input/Input.vue'\nimport Button from '@/components/ui/button/Button.vue'\nimport Textarea from '@/components/ui/textarea/Textarea.vue'\n\ninterface ProfilePageProps {\n    title?: string\n    name?: string\n    email?: string\n    bio?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ProfilePageProps>(), {\n    title: undefined,\n    name: undefined,\n    email: undefined,\n    bio: undefined,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    save: [payload: { name: string; email: string; bio: string }]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('profilePage.defaultTitle'))\nconst resolvedNameLabel = computed(() => t('profilePage.nameLabel'))\nconst resolvedEmailLabel = computed(() => t('profilePage.emailLabel'))\nconst resolvedBioLabel = computed(() => t('profilePage.bioLabel'))\nconst resolvedSaveText = computed(() => t('profilePage.saveText'))\n\nconst formName = ref(props.name ?? '')\nconst formEmail = ref(props.email ?? '')\nconst formBio = ref(props.bio ?? '')\n\nwatch(() => props.name, (val) => { formName.value = val ?? '' })\nwatch(() => props.email, (val) => { formEmail.value = val ?? '' })\nwatch(() => props.bio, (val) => { formBio.value = val ?? '' })\n\nconst avatarInitials = computed(() => {\n    if (!formName.value) return ''\n    const parts = formName.value.trim().split(/\\s+/)\n    return parts.length >= 2\n        ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()\n        : formName.value.slice(0, 2).toUpperCase()\n})\n\nfunction handleSave() {\n    emit('save', {\n        name: formName.value,\n        email: formEmail.value,\n        bio: formBio.value,\n    })\n}\n\nconst rootClasses = computed(() =>\n    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"w-full max-w-2xl mx-auto\">\n            <slot name=\"header\">\n                <div class=\"mb-8\">\n                    <h1 class=\"text-3xl font-black tracking-tight\">\n                        {{ resolvedTitle }}\n                    </h1>\n                </div>\n            </slot>\n\n            <slot>\n                <Card variant=\"elevated\">\n                    <CardHeader class=\"items-center text-center\">\n                        <Avatar size=\"lg\">\n                            <AvatarFallback>{{ avatarInitials }}</AvatarFallback>\n                        </Avatar>\n                        <CardTitle class=\"mt-4\">{{ formName || resolvedNameLabel }}</CardTitle>\n                    </CardHeader>\n                    <CardContent>\n                        <div class=\"space-y-6\">\n                            <div class=\"space-y-2\">\n                                <label class=\"font-bold text-sm\" for=\"profile-name\">{{ resolvedNameLabel }}</label>\n                                <Input\n                                    id=\"profile-name\"\n                                    v-model=\"formName\"\n                                    :placeholder=\"resolvedNameLabel\"\n                                />\n                            </div>\n                            <div class=\"space-y-2\">\n                                <label class=\"font-bold text-sm\" for=\"profile-email\">{{ resolvedEmailLabel }}</label>\n                                <Input\n                                    id=\"profile-email\"\n                                    v-model=\"formEmail\"\n                                    type=\"email\"\n                                    :placeholder=\"resolvedEmailLabel\"\n                                />\n                            </div>\n                            <div class=\"space-y-2\">\n                                <label class=\"font-bold text-sm\" for=\"profile-bio\">{{ resolvedBioLabel }}</label>\n                                <Textarea\n                                    id=\"profile-bio\"\n                                    v-model=\"formBio\"\n                                    :placeholder=\"resolvedBioLabel\"\n                                />\n                            </div>\n                            <div class=\"flex justify-end\">\n                                <Button variant=\"primary\" @click=\"handleSave\">\n                                    {{ resolvedSaveText }}\n                                </Button>\n                            </div>\n                        </div>\n                    </CardContent>\n                </Card>\n            </slot>\n\n            <slot name=\"footer\" />\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/progress.json b/packages/registry/registry/progress.json
index 0df9a27..9bd285a 100644
--- a/packages/registry/registry/progress.json
+++ b/packages/registry/registry/progress.json
@@ -3,15 +3,15 @@
   "name": "progress",
   "type": "registry:ui",
   "title": "Progress",
-  "description": "A highly customizable neo-brutalist Progress component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Progress component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-progress"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/progress.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as ProgressPrimitive from '@radix-ui/react-progress';\n\nimport { cn } from '@/lib/utils';\n\nconst Progress = React.forwardRef<\n    React.ElementRef<typeof ProgressPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n    <ProgressPrimitive.Root\n        ref={ref}\n        value={value}\n        className={cn(\n            'relative h-6 w-full overflow-hidden rounded-brutal',\n            'border-3 border-brutal bg-white dark:bg-gray-800',\n            'shadow-brutal-sm',\n            className\n        )}\n        {...props}\n    >\n        <ProgressPrimitive.Indicator\n            className=\"h-full w-full flex-1 bg-brutal-primary transition-all duration-300 ease-out\"\n            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n        />\n    </ProgressPrimitive.Root>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\n",
+      "path": "components/ui/progress/Progress.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { ProgressRoot, ProgressIndicator } from 'reka-ui'\n\ninterface ProgressProps {\n    class?: string\n    modelValue?: number\n    max?: number\n}\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n    class: '',\n    modelValue: 0,\n    max: 100,\n})\n\nconst classes = computed(() =>\n    cn(\n        'relative h-6 w-full overflow-hidden rounded-brutal',\n        'border-3 border-brutal bg-brutal-bg',\n        'shadow-brutal-sm',\n        props.class\n    )\n)\n\nconst percentage = computed(() => props.modelValue ?? 0)\n</script>\n\n<template>\n    <ProgressRoot :class=\"classes\" :model-value=\"modelValue\" :max=\"max\">\n        <ProgressIndicator\n            class=\"h-full w-full flex-1 bg-brutal-primary transition-all duration-300 ease-out\"\n            :style=\"{ transform: `translateX(-${100 - percentage}%)` }\"\n        />\n    </ProgressRoot>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +37,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +71,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +84,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/quick-actions.json b/packages/registry/registry/quick-actions.json
new file mode 100644
index 0000000..ee172de
--- /dev/null
+++ b/packages/registry/registry/quick-actions.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "quick-actions",
+  "type": "registry:ui",
+  "title": "Quick Actions",
+  "description": "A highly customizable neo-brutalist Quick Actions component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "button",
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "components/ui/quick-actions/QuickActions.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport Button from '@/components/ui/button/Button.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\n\nexport interface ActionItem {\n    label: string\n    icon: Component\n    variant?: 'primary' | 'secondary' | 'outline' | 'danger'\n}\n\ninterface QuickActionsProps {\n    title?: string\n    actions?: ActionItem[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<QuickActionsProps>(), {\n    title: undefined,\n    actions: () => [],\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    'action-click': [index: number]\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-md', props.class))\n\nconst resolvedTitle = computed(() => props.title ?? t('quickActions.defaultTitle'))\nconst resolvedBadge = computed(() => t('quickActions.badge'))\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <CardHeader>\n            <div class=\"flex items-center gap-2\">\n                <Badge variant=\"accent\" size=\"sm\">{{ resolvedBadge }}</Badge>\n                <h3 class=\"text-lg font-black tracking-tight\">\n{{ resolvedTitle }}\n</h3>\n            </div>\n        </CardHeader>\n        <CardContent>\n            <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-3\">\n                <Button\n                    v-for=\"(action, index) in actions\"\n                    :key=\"index\"\n                    :variant=\"action.variant ?? 'outline'\"\n                    class=\"flex flex-col items-center gap-2 h-auto py-3 px-2\"\n                    @click=\"emit('action-click', index)\"\n                >\n                    <component :is=\"action.icon\" class=\"h-5 w-5 stroke-[2.5]\" />\n                    <span class=\"text-xs font-bold\">{{ action.label }}</span>\n                </Button>\n            </div>\n            <slot name=\"actions\" />\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/radio-group.json b/packages/registry/registry/radio-group.json
index d17948d..d32f2e0 100644
--- a/packages/registry/registry/radio-group.json
+++ b/packages/registry/registry/radio-group.json
@@ -3,16 +3,21 @@
   "name": "radio-group",
   "type": "registry:ui",
   "title": "Radio Group",
-  "description": "A highly customizable neo-brutalist Radio Group component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Radio Group component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-radio-group",
-    "lucide-react"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/radio-group.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Circle } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nconst RadioGroup = React.forwardRef<\n    React.ElementRef<typeof RadioGroupPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n    return (\n        <RadioGroupPrimitive.Root\n            className={cn('grid gap-2', className)}\n            {...props}\n            ref={ref}\n        />\n    );\n});\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\n\nconst RadioGroupItem = React.forwardRef<\n    React.ElementRef<typeof RadioGroupPrimitive.Item>,\n    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n    return (\n        <RadioGroupPrimitive.Item\n            ref={ref}\n            className={cn(\n                'peer aspect-square h-6 w-6 rounded-full',\n                'border-3 border-brutal bg-white dark:bg-gray-800 text-brutal-fg',\n                'shadow-brutal-sm',\n                'transition-all duration-150',\n                'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                'data-[state=checked]:bg-brutal-primary',\n                className\n            )}\n            {...props}\n        >\n            <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n                <Circle className=\"h-2.5 w-2.5 fill-black dark:fill-white stroke-none\" />\n            </RadioGroupPrimitive.Indicator>\n        </RadioGroupPrimitive.Item>\n    );\n});\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\n\nexport { RadioGroup, RadioGroupItem };\n",
+      "path": "components/ui/radio-group/RadioGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { RadioGroupRoot } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface RadioGroupProps {\n    defaultValue?: string\n    modelValue?: string\n    class?: string\n}\n\nconst props = defineProps<RadioGroupProps>()\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\nconst classes = computed(() => cn('grid gap-2', props.class))\n</script>\n\n<template>\n    <RadioGroupRoot :default-value=\"defaultValue\" :model-value=\"modelValue\" :class=\"classes\" @update:model-value=\"emit('update:modelValue', $event as string)\">\n        <slot />\n    </RadioGroupRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/radio-group/RadioGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { RadioGroupItem as RadioGroupItemPrimitive, RadioGroupIndicator as RadioGroupIndicatorPrimitive } from 'reka-ui'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface RadioGroupItemProps {\n    value: string\n    disabled?: boolean\n    class?: string\n}\n\nconst props = defineProps<RadioGroupItemProps>()\n\nconst classes = computed(() =>\n    cn(\n        'peer aspect-square h-6 w-6 rounded-full',\n        'border-3 border-brutal bg-brutal-bg text-brutal-fg',\n        'shadow-brutal-sm',\n        'transition-all duration-150',\n        'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'data-[state=checked]:bg-brutal-primary',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <RadioGroupItemPrimitive :value=\"value\" :disabled=\"disabled\" :class=\"classes\">\n        <RadioGroupIndicatorPrimitive class=\"flex items-center justify-center\">\n            <Circle class=\"h-2.5 w-2.5 fill-current stroke-none\" />\n        </RadioGroupIndicatorPrimitive>\n    </RadioGroupItemPrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -38,7 +43,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -68,7 +77,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -78,16 +90,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/saas-pricing.json b/packages/registry/registry/saas-pricing.json
index 352aef1..a373530 100644
--- a/packages/registry/registry/saas-pricing.json
+++ b/packages/registry/registry/saas-pricing.json
@@ -3,9 +3,9 @@
   "name": "saas-pricing",
   "type": "registry:ui",
   "title": "Saas Pricing",
-  "description": "A highly customizable neo-brutalist Saas Pricing component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Saas Pricing component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "button",
@@ -14,8 +14,8 @@
   ],
   "files": [
     {
-      "path": "components/ui/saas-pricing.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardHeader, CardContent, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';\nimport { Badge } from '@/components/ui/badge';\nimport { Check, HelpCircle } from 'lucide-react';\n\nexport interface PricingFeature {\n    text: string;\n    included: boolean;\n}\n\nexport interface PricingPlan {\n    name: string;\n    description: string;\n    priceMonthly: number;\n    priceAnnually: number;\n    features: PricingFeature[];\n    popular?: boolean;\n    buttonText: string;\n    buttonVariant?: 'default' | 'primary' | 'secondary' | 'accent' | 'outline';\n}\n\nconst defaultPlans: PricingPlan[] = [\n    {\n        name: 'Starter',\n        description: 'For builders, side-projects, and early prototypes.',\n        priceMonthly: 19,\n        priceAnnually: 15,\n        buttonText: 'Start Free Trial',\n        buttonVariant: 'outline',\n        features: [\n            { text: '3 active projects', included: true },\n            { text: 'Basic analytics dashboard', included: true },\n            { text: '10,000 monthly active users', included: true },\n            { text: 'Community slack support', included: true },\n            { text: 'API endpoints access', included: false },\n            { text: 'Custom brand domains', included: false },\n        ],\n    },\n    {\n        name: 'Pro',\n        description: 'The sweet spot for growing companies and SaaS products.',\n        priceMonthly: 49,\n        priceAnnually: 39,\n        popular: true,\n        buttonText: 'Upgrade to Pro',\n        buttonVariant: 'primary',\n        features: [\n            { text: 'Unlimited active projects', included: true },\n            { text: 'Advanced real-time analytics', included: true },\n            { text: '100,000 monthly active users', included: true },\n            { text: 'Priority 24/7 support email', included: true },\n            { text: 'Full API access', included: true },\n            { text: 'Custom brand domains', included: true },\n        ],\n    },\n    {\n        name: 'Enterprise',\n        description: 'Bespoke security, unlimited scaling, and dedicated resources.',\n        priceMonthly: 149,\n        priceAnnually: 119,\n        buttonText: 'Contact Sales',\n        buttonVariant: 'secondary',\n        features: [\n            { text: 'Dedicated isolated server cluster', included: true },\n            { text: 'Custom SLAs and data policies', included: true },\n            { text: 'Unlimited active users', included: true },\n            { text: 'Dedicated account success manager', included: true },\n            { text: 'Full API access + custom webhooks', included: true },\n            { text: 'White-label custom portal', included: true },\n        ],\n    },\n];\n\nexport interface SaaSPricingProps extends React.HTMLAttributes<HTMLDivElement> {\n    plans?: PricingPlan[];\n    title?: string;\n    subtitle?: string;\n}\n\nexport function SaaSPricing({\n    plans = defaultPlans,\n    title = 'Simple, Unapologetic Pricing',\n    subtitle = 'Choose the tier that fuels your app. No hidden fees, cancel anytime you want.',\n    className,\n    ...props\n}: SaaSPricingProps) {\n    const [billingPeriod, setBillingPeriod] = React.useState<'monthly' | 'annually'>('monthly');\n\n    return (\n        <section\n            className={`w-full py-16 px-4 md:px-8 bg-white dark:bg-gray-950 text-black dark:text-white ${className || ''}`}\n            {...props}\n        >\n            <div className=\"max-w-6xl mx-auto flex flex-col items-center\">\n                <div className=\"text-center max-w-3xl mb-12\">\n                    <Badge variant=\"accent\" className=\"mb-4\">\n                        PRICING PLANS\n                    </Badge>\n                    <h2 className=\"text-4xl md:text-5xl font-black tracking-tight mb-4 uppercase\">\n                        {title}\n                    </h2>\n                    <p className=\"text-lg text-gray-600 dark:text-gray-400 font-medium\">\n                        {subtitle}\n                    </p>\n                </div>\n\n                <div className=\"flex items-center gap-4 mb-16 bg-gray-100 dark:bg-gray-900 p-2 border-3 border-brutal shadow-brutal-sm\">\n                    <button\n                        onClick={() => setBillingPeriod('monthly')}\n                        className={`px-4 py-2 font-black transition-all ${\n                            billingPeriod === 'monthly'\n                                ? 'bg-[#FFE66D] text-black border-2 border-black shadow-brutal-sm'\n                                : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'\n                        }`}\n                    >\n                        Monthly Billing\n                    </button>\n                    <button\n                        onClick={() => setBillingPeriod('annually')}\n                        className={`px-4 py-2 font-black transition-all flex items-center gap-2 ${\n                            billingPeriod === 'annually'\n                                ? 'bg-[#FFE66D] text-black border-2 border-black shadow-brutal-sm'\n                                : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'\n                        }`}\n                    >\n                        Annually (Save 20%)\n                        <Badge variant=\"success\" size=\"sm\" className=\"hidden sm:inline-flex\">\n                            PROMO\n                        </Badge>\n                    </button>\n                </div>\n\n                <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8 w-full items-start\">\n                    {plans.map((plan) => {\n                        const price = billingPeriod === 'monthly' ? plan.priceMonthly : plan.priceAnnually;\n\n                        return (\n                            <Card\n                                key={plan.name}\n                                variant={plan.popular ? 'interactive' : 'default'}\n                                className={`relative flex flex-col h-full bg-white dark:bg-gray-900 border-3 ${\n                                    plan.popular\n                                        ? 'border-brutal scale-100 md:scale-105 shadow-brutal-lg z-10'\n                                        : 'border-brutal'\n                                }`}\n                            >\n                                {plan.popular && (\n                                    <div className=\"absolute -top-4 left-1/2 -translate-x-1/2 z-20\">\n                                        <Badge variant=\"primary\" className=\"uppercase font-black text-xs border-2\">\n                                            MOST POPULAR\n                                        </Badge>\n                                    </div>\n                                )}\n\n                                <CardHeader className=\"p-6\">\n                                    <CardTitle className=\"text-2xl font-black uppercase tracking-tight\">\n                                        {plan.name}\n                                    </CardTitle>\n                                    <CardDescription className=\"min-h-[48px] mt-2\">\n                                        {plan.description}\n                                    </CardDescription>\n                                </CardHeader>\n\n                                <CardContent className=\"p-6 pt-0 flex-grow\">\n                                    <div className=\"flex items-baseline gap-1 mb-6 border-b-3 border-brutal pb-6\">\n                                        <span className=\"text-5xl font-black tracking-tight\">${price}</span>\n                                        <span className=\"text-gray-600 dark:text-gray-400 font-bold\">\n                                            / month\n                                        </span>\n                                    </div>\n\n                                    <ul className=\"space-y-4\">\n                                        {plan.features.map((feature, idx) => (\n                                            <li key={idx} className=\"flex items-center gap-3\">\n                                                <div\n                                                    className={`p-1 border-2 border-brutal ${\n                                                        feature.included\n                                                            ? 'bg-[#7FB069] text-black'\n                                                            : 'bg-gray-150 dark:bg-gray-800 text-gray-400 dark:text-gray-600'\n                                                    }`}\n                                                >\n                                                    <Check className=\"h-3 w-3 stroke-[3]\" />\n                                                </div>\n                                                <span\n                                                    className={`text-sm font-bold ${\n                                                        feature.included\n                                                            ? 'text-black dark:text-white'\n                                                            : 'text-gray-400 dark:text-gray-600 line-through'\n                                                    }`}\n                                                >\n                                                    {feature.text}\n                                                </span>\n                                            </li>\n                                        ))}\n                                    </ul>\n                                </CardContent>\n\n                                <CardFooter className=\"p-6 border-t-3 border-brutal\">\n                                    <Button\n                                        variant={plan.buttonVariant || 'default'}\n                                        className=\"w-full justify-center text-center font-black py-6 uppercase tracking-wider\"\n                                    >\n                                        {plan.buttonText}\n                                    </Button>\n                                </CardFooter>\n                            </Card>\n                        );\n                    })}\n                </div>\n\n                <div className=\"mt-16 text-center flex flex-col sm:flex-row items-center gap-4 p-6 bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal\">\n                    <HelpCircle className=\"h-8 w-8 text-[#FF6B6B]\" />\n                    <p className=\"font-bold text-sm text-left\">\n                        <span className=\"font-black uppercase text-[#FF6B6B] block sm:inline mr-2\">\n                            No risk guarantee:\n                        </span>\n                        Try any tier completely free for 14 days. If you are not satisfied, we will issue a full refund within 30 seconds.\n                    </p>\n                </div>\n            </div>\n        </section>\n    );\n}\nSaaSPricing.displayName = 'SaaSPricing';\n",
+      "path": "components/ui/saas-pricing/SaaSPricing.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, HelpCircle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Button from '@/components/ui/button/Button.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport CardDescription from '@/components/ui/card/CardDescription.vue'\nimport CardFooter from '@/components/ui/card/CardFooter.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\n\nexport interface PricingFeature {\n    text: string\n    included: boolean\n}\n\nexport interface PricingPlan {\n    name: string\n    description: string\n    priceMonthly: string\n    priceAnnually: string\n    features: PricingFeature[]\n    popular?: boolean\n    buttonText: string\n    buttonVariant?: 'default' | 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'outline' | 'ghost' | 'link'\n}\n\ninterface SaaSPricingProps {\n    plans?: PricingPlan[]\n    title?: string\n    subtitle?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SaaSPricingProps>(), {\n    plans: () => [\n        {\n            name: 'Starter',\n            description: 'For side projects and experiments',\n            priceMonthly: '$0',\n            priceAnnually: '$0',\n            features: [\n                { text: '5 components', included: true },\n                { text: 'Basic themes', included: true },\n                { text: 'Community support', included: true },\n                { text: 'Priority updates', included: false },\n                { text: 'Custom themes', included: false },\n            ],\n            buttonText: 'Get Started',\n            buttonVariant: 'outline' as const,\n        },\n        {\n            name: 'Pro',\n            description: 'For professional developers',\n            priceMonthly: '$19',\n            priceAnnually: '$15',\n            features: [\n                { text: 'All components', included: true },\n                { text: 'All themes', included: true },\n                { text: 'Priority support', included: true },\n                { text: 'Priority updates', included: true },\n                { text: 'Custom themes', included: false },\n            ],\n            popular: true,\n            buttonText: 'Go Pro',\n            buttonVariant: 'primary' as const,\n        },\n        {\n            name: 'Enterprise',\n            description: 'For teams and organizations',\n            priceMonthly: '$49',\n            priceAnnually: '$39',\n            features: [\n                { text: 'All components', included: true },\n                { text: 'All themes', included: true },\n                { text: 'Dedicated support', included: true },\n                { text: 'Priority updates', included: true },\n                { text: 'Custom themes', included: true },\n            ],\n            buttonText: 'Contact Sales',\n            buttonVariant: 'secondary' as const,\n        },\n    ],\n    title: undefined,\n    subtitle: '',\n    class: '',\n})\n\nconst billing = ref<'monthly' | 'annually'>('monthly')\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    'plan-select': [planName: string]\n}>()\n\nconst resolvedTitle = computed(() => props.title ?? t('saasPricing.title'))\n\nconst rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))\n\nconst monthlyBtnClasses = computed(() =>\n    cn(\n        'px-4 py-2 font-black text-sm transition-all active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        billing.value === 'monthly' ? 'bg-brutal-accent text-brutal-fg shadow-brutal-sm' : 'text-brutal-muted-foreground'\n    )\n)\n\nconst annuallyBtnClasses = computed(() =>\n    cn(\n        'px-4 py-2 font-black text-sm transition-all active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        billing.value === 'annually' ? 'bg-brutal-accent text-brutal-fg shadow-brutal-sm' : 'text-brutal-muted-foreground'\n    )\n)\n\nfunction getPlanCardClasses(plan: PricingPlan) {\n    return cn(plan.popular && 'scale-105 shadow-brutal-lg')\n}\n\nfunction getFeatureClasses(feature: PricingFeature) {\n    return cn('text-sm font-medium', !feature.included && 'line-through text-brutal-muted-foreground')\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"text-center mb-10\">\n            <h2 class=\"text-3xl font-black tracking-tight\">\n{{ resolvedTitle }}\n</h2>\n            <p v-if=\"subtitle\" class=\"mt-2 text-brutal-muted-foreground font-medium\">\n{{ subtitle }}\n</p>\n            <div class=\"mt-6 inline-flex items-center gap-3 border-3 border-brutal bg-brutal-muted p-1\" role=\"tablist\" :aria-label=\"t('saasPricing.billingPeriod')\">\n                <button\n                    role=\"tab\"\n                    :aria-selected=\"billing === 'monthly'\"\n                    :class=\"monthlyBtnClasses\"\n                    @click=\"billing = 'monthly'\"\n                >\n                    {{ t('saasPricing.monthly') }}\n                </button>\n                <button\n                    role=\"tab\"\n                    :aria-selected=\"billing === 'annually'\"\n                    :class=\"annuallyBtnClasses\"\n                    @click=\"billing = 'annually'\"\n                >\n                    {{ t('saasPricing.annually') }}\n                </button>\n            </div>\n        </div>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n            <div v-for=\"plan in plans\" :key=\"plan.name\" class=\"relative\">\n                <div v-if=\"plan.popular\" class=\"absolute -top-3 left-1/2 -translate-x-1/2 z-10\">\n                    <Badge variant=\"primary\" class=\"animate-pulse\">\n{{ t('saasPricing.mostPopular') }}\n</Badge>\n                </div>\n                <Card :variant=\"plan.popular ? 'interactive' : 'default'\" :class=\"getPlanCardClasses(plan)\">\n                    <CardHeader>\n                        <CardTitle class=\"text-xl\">\n{{ plan.name }}\n</CardTitle>\n                        <CardDescription>{{ plan.description }}</CardDescription>\n                    </CardHeader>\n                    <CardContent>\n                        <div class=\"mb-6\">\n                            <span class=\"text-4xl font-black\">{{ billing === 'monthly' ? plan.priceMonthly : plan.priceAnnually }}</span>\n                            <span class=\"text-sm font-bold text-brutal-muted-foreground\">{{ billing === 'monthly' ? t('saasPricing.perMonth') : t('saasPricing.perMonthBilledAnnually') }}</span>\n                        </div>\n                        <ul class=\"space-y-3\">\n                            <li v-for=\"feature in plan.features\" :key=\"feature.text\" class=\"flex items-center gap-2\">\n                                <div v-if=\"feature.included\" class=\"flex h-5 w-5 items-center justify-center bg-brutal-success text-brutal-fg\">\n                                    <Check class=\"h-3 w-3 stroke-[3]\" />\n                                </div>\n                                <div v-else class=\"flex h-5 w-5 items-center justify-center bg-brutal-muted text-brutal-muted-foreground\">\n                                    <HelpCircle class=\"h-3 w-3 stroke-[3]\" />\n                                </div>\n                                <span :class=\"getFeatureClasses(feature)\">{{ feature.text }}</span>\n                            </li>\n                        </ul>\n                    </CardContent>\n                    <CardFooter>\n                        <Button :variant=\"plan.buttonVariant || 'default'\" class=\"w-full\" @click=\"emit('plan-select', plan.name)\">\n{{ plan.buttonText }}\n</Button>\n                    </CardFooter>\n                </Card>\n            </div>\n        </div>\n    </div>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -41,7 +41,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -71,7 +75,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -81,16 +88,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/scratch-card.json b/packages/registry/registry/scratch-card.json
new file mode 100644
index 0000000..fd02927
--- /dev/null
+++ b/packages/registry/registry/scratch-card.json
@@ -0,0 +1,110 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "scratch-card",
+  "type": "registry:ui",
+  "title": "Scratch Card",
+  "description": "A highly customizable neo-brutalist Scratch Card component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/scratch-card/ScratchCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, toRef } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useReducedMotion } from '@/composables/useReducedMotion'\nimport { useCanvasInteraction } from '@/composables/useCanvasInteraction'\nimport { useLocale } from '@/composables/useLocale'\nimport { scratchCardVariants } from '@/components/ui/scratch-card/scratch-card-variants'\n\ninterface ScratchCardProps {\n    percentage?: number\n    brushRadius?: number\n    overlayColor?: string\n    fadeDuration?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ScratchCardProps>(), {\n    percentage: 50,\n    brushRadius: 20,\n    overlayColor: undefined,\n    fadeDuration: 300,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    progress: [percent: number]\n    completed: []\n}>()\n\nconst containerRef = ref<HTMLDivElement | null>(null)\nconst canvasRef = ref<HTMLCanvasElement | null>(null)\nconst prefersReducedMotion = useReducedMotion()\nconst { t } = useLocale()\n\nconst drawOverlay = (ctxVal: CanvasRenderingContext2D, w: number, h: number) => {\n    ctxVal.clearRect(0, 0, w, h)\n\n    if (props.overlayColor) {\n        ctxVal.fillStyle = props.overlayColor\n        ctxVal.fillRect(0, 0, w, h)\n    } else {\n        let primary = '#FF6B6B'\n        let secondary = '#4ECDC4'\n        let fg = '#000000'\n        if (typeof document !== 'undefined') {\n            const rootStyle = getComputedStyle(document.documentElement)\n            primary = rootStyle.getPropertyValue('--brutal-primary').trim() || primary\n            secondary = rootStyle.getPropertyValue('--brutal-secondary').trim() || secondary\n            fg = rootStyle.getPropertyValue('--brutal-fg').trim() || fg\n        }\n\n        ctxVal.fillStyle = secondary\n        ctxVal.fillRect(0, 0, w, h)\n\n        ctxVal.strokeStyle = primary\n        ctxVal.lineWidth = 10\n        const spacing = 20\n        for (let i = -h; i < w + h; i += spacing) {\n            ctxVal.beginPath()\n            ctxVal.moveTo(i, 0)\n            ctxVal.lineTo(i + h, h)\n            ctxVal.stroke()\n        }\n\n        ctxVal.strokeStyle = fg\n        ctxVal.lineWidth = 2\n        for (let i = -h; i < w + h; i += spacing) {\n            ctxVal.beginPath()\n            ctxVal.moveTo(i + 5, 0)\n            ctxVal.lineTo(i + 5 + h, h)\n            ctxVal.stroke()\n        }\n    }\n}\n\nconst {\n    isRevealed,\n    revealAll,\n    handlePointerDown,\n    handlePointerMove,\n    handlePointerUp,\n    handleTouchStart,\n    handleTouchMove,\n    handleTouchEnd,\n} = useCanvasInteraction({\n    containerRef,\n    canvasRef,\n    brushRadius: toRef(props, 'brushRadius'),\n    percentage: toRef(props, 'percentage'),\n    fadeDuration: toRef(props, 'fadeDuration'),\n    prefersReducedMotion,\n    onProgress: (percent) => emit('progress', percent),\n    onCompleted: () => emit('completed'),\n    drawOverlay,\n})\n\ndefineExpose({\n    isRevealed,\n    revealAll,\n})\n\nconst containerClasses = computed(() =>\n    cn(scratchCardVariants(), props.class)\n)\n\nconst canvasStyle = computed(() => ({\n    transition: `opacity ${props.fadeDuration}ms ease-out`,\n    opacity: isRevealed.value ? 0 : 1,\n}))\n</script>\n\n<template>\n    <div\n        ref=\"containerRef\"\n        :class=\"containerClasses\"\n        role=\"region\"\n        :aria-label=\"t('scratchCard.ariaLabel')\"\n        tabindex=\"0\"\n        @keydown.enter=\"revealAll\"\n        @keydown.space.prevent=\"revealAll\"\n    >\n        <div class=\"scratch-card-content w-full h-full\">\n            <slot />\n        </div>\n        <canvas\n            v-if=\"!isRevealed || !prefersReducedMotion\"\n            ref=\"canvasRef\"\n            class=\"absolute inset-0 cursor-crosshair touch-none select-none z-10\"\n            :style=\"canvasStyle\"\n            @pointerdown=\"handlePointerDown\"\n            @pointermove=\"handlePointerMove\"\n            @pointerup=\"handlePointerUp\"\n            @pointercancel=\"handlePointerUp\"\n            @touchstart=\"handleTouchStart\"\n            @touchmove=\"handleTouchMove\"\n            @touchend=\"handleTouchEnd\"\n        />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/scratch-card/scratch-card-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const scratchCardVariants = cva(\n    [\n        'relative',\n        'border-3 border-brutal',\n        'rounded-brutal',\n        'overflow-hidden',\n        'bg-brutal-bg',\n    ]\n)\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "composables/useReducedMotion.ts",
+      "content": "import { onMounted, onUnmounted, ref } from 'vue'\n\nexport function useReducedMotion() {\n    const prefersReduced = ref(false)\n    let mediaQuery: MediaQueryList | null = null\n\n    const onChange = (e: MediaQueryListEvent) => {\n        prefersReduced.value = e.matches\n    }\n\n    onMounted(() => {\n        if (typeof window !== 'undefined') {\n            mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\n            prefersReduced.value = mediaQuery.matches\n            mediaQuery.addEventListener('change', onChange)\n        }\n    })\n\n    onUnmounted(() => {\n        mediaQuery?.removeEventListener('change', onChange)\n    })\n\n    return prefersReduced\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/scroll-area.json b/packages/registry/registry/scroll-area.json
index ff10fb2..eb47a89 100644
--- a/packages/registry/registry/scroll-area.json
+++ b/packages/registry/registry/scroll-area.json
@@ -3,15 +3,20 @@
   "name": "scroll-area",
   "type": "registry:ui",
   "title": "Scroll Area",
-  "description": "A highly customizable neo-brutalist Scroll Area component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Scroll Area component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-scroll-area"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/scroll-area.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cn } from '@/lib/utils';\n\nconst ScrollArea = React.forwardRef<\n    React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n    <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn('relative overflow-hidden', className)}\n        {...props}\n    >\n        <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\">\n            {children}\n        </ScrollAreaPrimitive.Viewport>\n        <ScrollBar />\n        <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n));\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollBar = React.forwardRef<\n    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n        ref={ref}\n        orientation={orientation}\n        className={cn(\n            'flex touch-none select-none transition-colors',\n            orientation === 'vertical' &&\n                'h-full w-3 border-l-2 border-black dark:border-white p-[1px]',\n            orientation === 'horizontal' &&\n                'h-3 flex-col border-t-2 border-black dark:border-white p-[1px]',\n            className\n        )}\n        {...props}\n    >\n        <ScrollAreaPrimitive.ScrollAreaThumb className=\"relative flex-1 bg-black dark:bg-white\" />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;\n\nexport { ScrollArea, ScrollBar };\n",
+      "path": "components/ui/scroll-area/ScrollArea.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    ScrollAreaRoot as ScrollAreaRootPrimitive,\n    ScrollAreaViewport as ScrollAreaViewportPrimitive,\n    ScrollAreaCorner as ScrollAreaCornerPrimitive,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport ScrollBar from '@/components/ui/scroll-area/ScrollBar.vue'\n\ninterface ScrollAreaProps {\n    class?: string\n}\n\nconst props = defineProps<ScrollAreaProps>()\n\nconst classes = computed(() =>\n    cn('relative overflow-hidden', props.class)\n)\n</script>\n\n<template>\n    <ScrollAreaRootPrimitive :class=\"classes\">\n        <ScrollAreaViewportPrimitive class=\"h-full w-full rounded-[inherit]\">\n            <slot />\n        </ScrollAreaViewportPrimitive>\n        <ScrollBar />\n        <ScrollAreaCornerPrimitive />\n    </ScrollAreaRootPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/scroll-area/ScrollBar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    ScrollAreaScrollbar as ScrollAreaScrollbarPrimitive,\n    ScrollAreaThumb as ScrollAreaThumbPrimitive,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface ScrollBarProps {\n    orientation?: 'vertical' | 'horizontal'\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ScrollBarProps>(), {\n    orientation: 'vertical',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(\n        'flex touch-none select-none transition-colors',\n        props.orientation === 'vertical' &&\n            'h-full w-3 border-l-3 border-brutal p-[1px]',\n        props.orientation === 'horizontal' &&\n            'h-3 flex-col border-t-3 border-brutal p-[1px]',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <ScrollAreaScrollbarPrimitive :orientation=\"orientation\" :class=\"classes\">\n        <ScrollAreaThumbPrimitive class=\"relative flex-1 bg-brutal-fg\" />\n    </ScrollAreaScrollbarPrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +42,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +76,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +89,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/search-widget.json b/packages/registry/registry/search-widget.json
new file mode 100644
index 0000000..3989d34
--- /dev/null
+++ b/packages/registry/registry/search-widget.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "search-widget",
+  "type": "registry:ui",
+  "title": "Search Widget",
+  "description": "A highly customizable neo-brutalist Search Widget component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "command"
+  ],
+  "files": [
+    {
+      "path": "components/ui/search-widget/SearchWidget.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Search } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport Command from '@/components/ui/command/Command.vue'\nimport CommandInput from '@/components/ui/command/CommandInput.vue'\nimport CommandList from '@/components/ui/command/CommandList.vue'\nimport CommandGroup from '@/components/ui/command/CommandGroup.vue'\nimport CommandItem from '@/components/ui/command/CommandItem.vue'\nimport CommandEmpty from '@/components/ui/command/CommandEmpty.vue'\n\nexport interface SearchSuggestion {\n    label: string\n    value: string\n    group?: string\n}\n\ninterface SearchWidgetProps {\n    placeholder?: string\n    suggestions?: SearchSuggestion[]\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SearchWidgetProps>(), {\n    placeholder: undefined,\n    suggestions: () => [],\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    search: [value: string]\n    select: [suggestion: SearchSuggestion]\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-lg', props.class))\n\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('searchWidget.defaultPlaceholder'))\n\nconst query = ref('')\n\nconst filteredSuggestions = computed(() => {\n    if (!query.value) return []\n    const q = query.value.toLowerCase()\n    return props.suggestions.filter(s => s.label.toLowerCase().includes(q))\n})\n\nconst groupedSuggestions = computed(() => {\n    const groups: Record<string, SearchSuggestion[]> = {}\n    for (const suggestion of filteredSuggestions.value) {\n        const group = suggestion.group ?? ''\n        if (!groups[group]) groups[group] = []\n        groups[group].push(suggestion)\n    }\n    return groups\n})\n\nfunction handleSearch(value: string) {\n    query.value = value\n    emit('search', value)\n}\n\nfunction handleSelect(value: string) {\n    const suggestion = props.suggestions.find(s => s.value === value)\n    if (suggestion) {\n        emit('select', suggestion)\n    }\n}\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <CardContent class=\"p-0\">\n            <Command>\n                <CommandInput\n                    :placeholder=\"resolvedPlaceholder\"\n                    :model-value=\"query\"\n                    @update:model-value=\"handleSearch\"\n                />\n                <CommandList v-if=\"query\">\n                    <CommandEmpty />\n                    <CommandGroup\n                        v-for=\"(groupSuggestions, groupKey) in groupedSuggestions\"\n                        :key=\"groupKey\"\n                        :heading=\"groupKey || undefined\"\n                    >\n                        <CommandItem\n                            v-for=\"suggestion in groupSuggestions\"\n                            :key=\"suggestion.value\"\n                            :value=\"suggestion.value\"\n                            @select=\"handleSelect\"\n                        >\n                            <Search class=\"h-4 w-4 stroke-[3]\" />\n                            {{ suggestion.label }}\n                        </CommandItem>\n                    </CommandGroup>\n                </CommandList>\n            </Command>\n            <slot name=\"actions\" />\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/select.json b/packages/registry/registry/select.json
index bd65601..2e5b0dc 100644
--- a/packages/registry/registry/select.json
+++ b/packages/registry/registry/select.json
@@ -3,16 +3,46 @@
   "name": "select",
   "type": "registry:ui",
   "title": "Select",
-  "description": "A highly customizable neo-brutalist Select component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Select component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-select",
-    "lucide-react"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/select.tsx",
-      "content": "import * as React from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n    React.ElementRef<typeof SelectPrimitive.Trigger>,\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n    <SelectPrimitive.Trigger\n        ref={ref}\n        className={cn(\n            'flex h-11 w-full items-center justify-between px-4 py-2',\n            'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal',\n            'font-bold placeholder:text-gray-400',\n            'shadow-brutal',\n            'transition-all duration-150',\n            'focus:outline-none focus:shadow-brutal-lg focus:-translate-x-0.5 focus:-translate-y-0.5',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            '[&>span]:line-clamp-1',\n            className\n        )}\n        {...props}\n    >\n        {children}\n        <SelectPrimitive.Icon asChild>\n            <ChevronDown className=\"h-5 w-5 stroke-[3]\" />\n        </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n    <SelectPrimitive.ScrollUpButton\n        ref={ref}\n        className={cn(\n            'flex cursor-default items-center justify-center py-1 bg-brutal-bg text-brutal-fg',\n            className\n        )}\n        {...props}\n    >\n        <ChevronUp className=\"h-4 w-4 stroke-[3]\" />\n    </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n    <SelectPrimitive.ScrollDownButton\n        ref={ref}\n        className={cn(\n            'flex cursor-default items-center justify-center py-1 bg-brutal-bg text-brutal-fg',\n            className\n        )}\n        {...props}\n    >\n        <ChevronDown className=\"h-4 w-4 stroke-[3]\" />\n    </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n    React.ElementRef<typeof SelectPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n    <SelectPrimitive.Portal>\n        <SelectPrimitive.Content\n            ref={ref}\n            className={cn(\n                'relative z-50 max-h-96 min-w-[8rem] overflow-hidden',\n                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal',\n                'data-[state=open]:animate-in data-[state=closed]:animate-out',\n                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n                'data-[side=bottom]:slide-in-from-top-2',\n                'data-[side=left]:slide-in-from-right-2',\n                'data-[side=right]:slide-in-from-left-2',\n                'data-[side=top]:slide-in-from-bottom-2',\n                position === 'popper' &&\n                    'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n                className\n            )}\n            position={position}\n            {...props}\n        >\n            <SelectScrollUpButton />\n            <SelectPrimitive.Viewport\n                className={cn(\n                    'p-1',\n                    position === 'popper' &&\n                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n                )}\n            >\n                {children}\n            </SelectPrimitive.Viewport>\n            <SelectScrollDownButton />\n        </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n    React.ElementRef<typeof SelectPrimitive.Label>,\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n    <SelectPrimitive.Label\n        ref={ref}\n        className={cn('px-3 py-2 text-sm font-black tracking-wide', className)}\n        {...props}\n    />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n    React.ElementRef<typeof SelectPrimitive.Item>,\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n    <SelectPrimitive.Item\n        ref={ref}\n        className={cn(\n            'relative flex w-full cursor-pointer select-none items-center py-2 pl-8 pr-3',\n            'font-bold outline-none',\n            'focus:bg-brutal-accent focus:text-brutal-fg',\n            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n            'hover:bg-brutal-muted',\n            className\n        )}\n        {...props}\n    >\n        <span className=\"absolute left-2 flex h-4 w-4 items-center justify-center\">\n            <SelectPrimitive.ItemIndicator>\n                <Check className=\"h-4 w-4 stroke-[3]\" />\n            </SelectPrimitive.ItemIndicator>\n        </span>\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n    React.ElementRef<typeof SelectPrimitive.Separator>,\n    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n    <SelectPrimitive.Separator\n        ref={ref}\n        className={cn('-mx-1 my-1 h-[3px] bg-[var(--brutal-border-color,#000)]', className)}\n        {...props}\n    />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n    Select,\n    SelectGroup,\n    SelectValue,\n    SelectTrigger,\n    SelectContent,\n    SelectLabel,\n    SelectItem,\n    SelectSeparator,\n    SelectScrollUpButton,\n    SelectScrollDownButton,\n};\n",
+      "path": "components/ui/select/SelectContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    SelectPortal as SelectPortalPrimitive,\n    SelectContent as SelectContentPrimitive,\n    SelectViewport as SelectViewportPrimitive,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport SelectScrollUpButton from '@/components/ui/select/SelectScrollUpButton.vue'\nimport SelectScrollDownButton from '@/components/ui/select/SelectScrollDownButton.vue'\n\ninterface SelectContentProps {\n    position?: 'popper' | 'item-aligned'\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SelectContentProps>(), {\n    position: 'popper',\n    class: '',\n})\n\nconst contentClasses = computed(() =>\n    cn(\n        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        props.position === 'popper' &&\n            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class\n    )\n)\n\nconst viewportClasses = computed(() =>\n    cn(\n        'p-1',\n        props.position === 'popper' &&\n            'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)]'\n    )\n)\n</script>\n\n<template>\n    <SelectPortalPrimitive>\n        <SelectContentPrimitive :class=\"contentClasses\" :position=\"position\">\n            <SelectScrollUpButton />\n            <SelectViewportPrimitive :class=\"viewportClasses\">\n                <slot />\n            </SelectViewportPrimitive>\n            <SelectScrollDownButton />\n        </SelectContentPrimitive>\n    </SelectPortalPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/select/SelectItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { SelectItem as SelectItemPrimitive, SelectItemIndicator as SelectItemIndicatorPrimitive, SelectItemText as SelectItemTextPrimitive } from 'reka-ui'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface SelectItemProps {\n    value: string\n    disabled?: boolean\n    class?: string\n}\n\nconst props = defineProps<SelectItemProps>()\n\nconst classes = computed(() =>\n    cn(\n        'relative flex w-full cursor-pointer select-none items-center py-2 pl-8 pr-3',\n        'font-bold outline-none',\n        'focus:bg-brutal-accent focus:text-brutal-fg',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <SelectItemPrimitive :value=\"value\" :disabled=\"disabled\" :class=\"classes\">\n        <span class=\"absolute left-2 flex h-4 w-4 items-center justify-center\">\n            <SelectItemIndicatorPrimitive>\n                <Check class=\"h-4 w-4 stroke-[3]\" />\n            </SelectItemIndicatorPrimitive>\n        </span>\n        <SelectItemTextPrimitive>\n            <slot />\n        </SelectItemTextPrimitive>\n    </SelectItemPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/select/SelectLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { SelectLabel as SelectLabelPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface SelectLabelProps {\n    class?: string\n}\n\nconst props = defineProps<SelectLabelProps>()\n\nconst classes = computed(() =>\n    cn('px-3 py-2 text-sm font-black tracking-wide', props.class)\n)\n</script>\n\n<template>\n    <SelectLabelPrimitive :class=\"classes\">\n        <slot />\n    </SelectLabelPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/select/SelectScrollDownButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { SelectScrollDownButton as SelectScrollDownButtonPrimitive } from 'reka-ui'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface SelectScrollDownButtonProps {\n    class?: string\n}\n\nconst props = defineProps<SelectScrollDownButtonProps>()\n\nconst classes = computed(() =>\n    cn('flex cursor-default items-center justify-center py-1 bg-brutal-bg', props.class)\n)\n</script>\n\n<template>\n    <SelectScrollDownButtonPrimitive :class=\"classes\">\n        <ChevronDown class=\"h-4 w-4 stroke-[3]\" />\n    </SelectScrollDownButtonPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/select/SelectScrollUpButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { SelectScrollUpButton as SelectScrollUpButtonPrimitive } from 'reka-ui'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface SelectScrollUpButtonProps {\n    class?: string\n}\n\nconst props = defineProps<SelectScrollUpButtonProps>()\n\nconst classes = computed(() =>\n    cn('flex cursor-default items-center justify-center py-1 bg-brutal-bg', props.class)\n)\n</script>\n\n<template>\n    <SelectScrollUpButtonPrimitive :class=\"classes\">\n        <ChevronUp class=\"h-4 w-4 stroke-[3]\" />\n    </SelectScrollUpButtonPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/select/SelectSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { SelectSeparator as SelectSeparatorPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface SelectSeparatorProps {\n    class?: string\n}\n\nconst props = defineProps<SelectSeparatorProps>()\n\nconst classes = computed(() =>\n    cn('-mx-1 my-1 h-[3px] bg-brutal-fg', props.class)\n)\n</script>\n\n<template>\n    <SelectSeparatorPrimitive :class=\"classes\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/select/SelectTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { SelectTrigger as SelectTriggerPrimitive, SelectIcon as SelectIconPrimitive } from 'reka-ui'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\ninterface SelectTriggerProps {\n    class?: string\n}\n\nconst props = defineProps<SelectTriggerProps>()\n\nconst classes = computed(() =>\n    cn(\n        'flex h-11 w-full items-center justify-between px-4 py-2',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal',\n        'font-bold placeholder:text-brutal-placeholder',\n        'shadow-brutal',\n        'transition-all duration-150',\n        'focus:outline-none focus:shadow-brutal-lg focus:-translate-x-0.5 focus:-translate-y-0.5',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:translate-x-0 active:shadow-none',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        '[&>span]:line-clamp-1',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <SelectTriggerPrimitive :class=\"classes\" aria-haspopup=\"listbox\">\n        <slot />\n        <SelectIconPrimitive as-child>\n            <ChevronDown class=\"h-5 w-5 stroke-[3]\" />\n        </SelectIconPrimitive>\n    </SelectTriggerPrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -38,7 +68,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -68,7 +102,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -78,16 +115,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/separator.json b/packages/registry/registry/separator.json
index 4472142..5b24cc9 100644
--- a/packages/registry/registry/separator.json
+++ b/packages/registry/registry/separator.json
@@ -3,15 +3,20 @@
   "name": "separator",
   "type": "registry:ui",
   "title": "Separator",
-  "description": "A highly customizable neo-brutalist Separator component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Separator component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-separator"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/separator.tsx",
-      "content": "import * as React from 'react';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { cn } from '@/lib/utils';\n\nconst Separator = React.forwardRef<\n    React.ElementRef<typeof SeparatorPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n    ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\n        <SeparatorPrimitive.Root\n            ref={ref}\n            decorative={decorative}\n            orientation={orientation}\n            className={cn(\n                'shrink-0 bg-black dark:bg-white',\n                orientation === 'horizontal' ? 'h-[3px] w-full' : 'h-full w-[3px]',\n                className\n            )}\n            {...props}\n        />\n    )\n);\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n\nexport { Separator };\n",
+      "path": "components/ui/separator/Separator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { Separator as SeparatorPrimitive } from 'reka-ui'\nimport { separatorVariants } from '@/components/ui/separator/separator-variants'\n\ntype SeparatorVariantProps = VariantProps<typeof separatorVariants>\n\ninterface SeparatorProps {\n    orientation?: NonNullable<SeparatorVariantProps['orientation']>\n    decorative?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SeparatorProps>(), {\n    orientation: 'horizontal',\n    decorative: true,\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(separatorVariants({ orientation: props.orientation }), props.class)\n)\n</script>\n\n<template>\n    <SeparatorPrimitive\n        :orientation=\"orientation\"\n        :decorative=\"decorative\"\n        :class=\"classes\"\n    >\n        <slot />\n    </SeparatorPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/separator/separator-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const separatorVariants = cva('shrink-0 bg-brutal-fg', {\n    variants: {\n        orientation: {\n            horizontal: 'h-[3px] w-full',\n            vertical: 'h-full w-[3px]',\n        },\n    },\n    defaultVariants: {\n        orientation: 'horizontal',\n    },\n})\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +42,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +76,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +89,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/settings-page.json b/packages/registry/registry/settings-page.json
new file mode 100644
index 0000000..96a5bb8
--- /dev/null
+++ b/packages/registry/registry/settings-page.json
@@ -0,0 +1,110 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "settings-page",
+  "type": "registry:ui",
+  "title": "Settings Page",
+  "description": "A highly customizable neo-brutalist Settings Page component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "tabs",
+    "card",
+    "input",
+    "switch",
+    "button",
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "components/ui/settings-page/SettingsPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { TabsRoot } from 'reka-ui'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport TabsList from '@/components/ui/tabs/TabsList.vue'\nimport TabsTrigger from '@/components/ui/tabs/TabsTrigger.vue'\nimport TabsContent from '@/components/ui/tabs/TabsContent.vue'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardHeader from '@/components/ui/card/CardHeader.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport CardTitle from '@/components/ui/card/CardTitle.vue'\nimport Input from '@/components/ui/input/Input.vue'\nimport Switch from '@/components/ui/switch/Switch.vue'\nimport Button from '@/components/ui/button/Button.vue'\nimport Separator from '@/components/ui/separator/Separator.vue'\n\nexport interface SettingsTab {\n    label: string\n    value: string\n}\n\ninterface SettingsPageProps {\n    title?: string\n    tabs?: SettingsTab[]\n    defaultTab?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SettingsPageProps>(), {\n    title: undefined,\n    tabs: () => [],\n    defaultTab: undefined,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    save: [payload: { tab: string; values: Record<string, unknown> }]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('settingsPage.defaultTitle'))\nconst resolvedSaveText = computed(() => t('settingsPage.saveText'))\nconst resolvedNameLabel = computed(() => t('settingsPage.nameLabel'))\nconst resolvedNamePlaceholder = computed(() => t('settingsPage.namePlaceholder'))\nconst resolvedNotificationsLabel = computed(() => t('settingsPage.notificationsLabel'))\n\nconst activeTab = ref(props.defaultTab ?? (props.tabs.length > 0 ? props.tabs[0].value : ''))\n\nconst formValues = ref<Record<string, Record<string, unknown>>>({})\n\nfunction getTabValues(tabValue: string): Record<string, unknown> {\n    return formValues.value[tabValue] ?? {}\n}\n\nfunction setTabValue(tabValue: string, key: string, value: unknown) {\n    if (!formValues.value[tabValue]) {\n        formValues.value[tabValue] = {}\n    }\n    formValues.value[tabValue][key] = value\n}\n\nfunction handleSave() {\n    emit('save', {\n        tab: activeTab.value,\n        values: getTabValues(activeTab.value),\n    })\n}\n\nconst rootClasses = computed(() =>\n    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"w-full max-w-3xl mx-auto\">\n            <slot name=\"header\">\n                <div class=\"mb-8\">\n                    <h1 class=\"text-3xl font-black tracking-tight\">\n                        {{ resolvedTitle }}\n                    </h1>\n                </div>\n            </slot>\n\n            <slot>\n                <TabsRoot v-model=\"activeTab\" :default-value=\"props.defaultTab\">\n                    <TabsList class=\"w-full\">\n                        <TabsTrigger\n                            v-for=\"tab in props.tabs\"\n                            :key=\"tab.value\"\n                            :value=\"tab.value\"\n                        >\n                            {{ tab.label }}\n                        </TabsTrigger>\n                    </TabsList>\n\n                    <TabsContent\n                        v-for=\"tab in tabs\"\n                        :key=\"tab.value\"\n                        :value=\"tab.value\"\n                    >\n                        <Card variant=\"flat\">\n                            <CardHeader>\n                                <CardTitle>{{ tab.label }}</CardTitle>\n                            </CardHeader>\n                            <CardContent>\n                                <div class=\"space-y-6\">\n                                    <slot :name=\"`tab-${tab.value}`\" :values=\"getTabValues(tab.value)\" :set-value=\"(key: string, val: unknown) => setTabValue(tab.value, key, val)\">\n                                        <div class=\"space-y-4\">\n                                            <div class=\"flex items-center justify-between\">\n                                                <label class=\"font-bold text-sm\" :for=\"`setting-${tab.value}-name`\">{{ resolvedNameLabel }}</label>\n                                                <Input\n                                                    :id=\"`setting-${tab.value}-name`\"\n                                                    :model-value=\"String(getTabValues(tab.value).name ?? '')\"\n                                                    :placeholder=\"resolvedNamePlaceholder\"\n                                                    class=\"max-w-xs\"\n                                                    @update:model-value=\"setTabValue(tab.value, 'name', $event)\"\n                                                />\n                                            </div>\n                                            <Separator />\n                                            <div class=\"flex items-center justify-between\">\n                                                <label class=\"font-bold text-sm\" :for=\"`setting-${tab.value}-notifications`\">{{ resolvedNotificationsLabel }}</label>\n                                                <Switch\n                                                    :model-value=\"Boolean(getTabValues(tab.value).notifications ?? false)\"\n                                                    @update:model-value=\"setTabValue(tab.value, 'notifications', $event)\"\n                                                />\n                                            </div>\n                                        </div>\n                                    </slot>\n                                </div>\n                            </CardContent>\n                        </Card>\n                    </TabsContent>\n                </TabsRoot>\n\n                <div class=\"mt-6 flex justify-end\">\n                    <Button variant=\"primary\" @click=\"handleSave\">\n                        {{ resolvedSaveText }}\n                    </Button>\n                </div>\n            </slot>\n\n            <slot name=\"footer\" />\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/sheet.json b/packages/registry/registry/sheet.json
index 4d0c755..1dcec67 100644
--- a/packages/registry/registry/sheet.json
+++ b/packages/registry/registry/sheet.json
@@ -3,16 +3,41 @@
   "name": "sheet",
   "type": "registry:ui",
   "title": "Sheet",
-  "description": "A highly customizable neo-brutalist Sheet component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Sheet component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-dialog",
-    "lucide-react"
+    "reka-ui",
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/sheet.tsx",
-      "content": "import * as React from 'react';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nconst Sheet = SheetPrimitive.Root;\nconst SheetTrigger = SheetPrimitive.Trigger;\nconst SheetClose = SheetPrimitive.Close;\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n    React.ElementRef<typeof SheetPrimitive.Overlay>,\n    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n    <SheetPrimitive.Overlay\n        ref={ref}\n        className={cn(\n            'fixed inset-0 z-50 bg-black/50',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n            className\n        )}\n        {...props}\n    />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n    'fixed z-50 gap-4 bg-brutal-bg p-6 border-brutal border-3 text-brutal-fg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b-3 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n                bottom: 'inset-x-0 bottom-0 border-t-3 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r-3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4 border-l-3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n            },\n        },\n        defaultVariants: {\n            side: 'right',\n        },\n    }\n);\n\ninterface SheetContentProps\n    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n        VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n    React.ElementRef<typeof SheetPrimitive.Content>,\n    SheetContentProps\n>(({ side = 'right', className, children, ...props }, ref) => (\n    <SheetPortal>\n        <SheetOverlay />\n        <SheetPrimitive.Content\n            ref={ref}\n            className={cn(sheetVariants({ side }), className)}\n            {...props}\n        >\n            {children}\n            <SheetPrimitive.Close\n                className={cn(\n                    'absolute right-4 top-4',\n                    'h-8 w-8 flex items-center justify-center',\n                    'border-3 border-brutal bg-brutal-bg text-brutal-fg',\n                    'shadow-brutal-sm',\n                    'transition-all duration-150',\n                    'hover:bg-brutal-destructive hover:text-brutal-fg',\n                    'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',\n                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n                    'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'\n                )}\n            >\n                <X className=\"h-4 w-4 stroke-[3]\" />\n                <span className=\"sr-only\">Close</span>\n            </SheetPrimitive.Close>\n        </SheetPrimitive.Content>\n    </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', className)}\n        {...props}\n    />\n);\nSheetHeader.displayName = 'SheetHeader';\n\nconst SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n    <div\n        className={cn(\n            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',\n            className\n        )}\n        {...props}\n    />\n);\nSheetFooter.displayName = 'SheetFooter';\n\nconst SheetTitle = React.forwardRef<\n    React.ElementRef<typeof SheetPrimitive.Title>,\n    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n    <SheetPrimitive.Title\n        ref={ref}\n        className={cn('text-lg font-black tracking-tight text-brutal-fg', className)}\n        {...props}\n    />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n    React.ElementRef<typeof SheetPrimitive.Description>,\n    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n    <SheetPrimitive.Description\n        ref={ref}\n        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}\n        {...props}\n    />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n    Sheet,\n    SheetPortal,\n    SheetOverlay,\n    SheetTrigger,\n    SheetClose,\n    SheetContent,\n    SheetHeader,\n    SheetFooter,\n    SheetTitle,\n    SheetDescription,\n};\n",
+      "path": "components/ui/sheet/SheetContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    DialogPortal as DialogPortalPrimitive,\n    DialogOverlay as DialogOverlayPrimitive,\n    DialogContent as DialogContentPrimitive,\n    DialogClose as DialogClosePrimitive,\n} from 'reka-ui'\nimport { type VariantProps } from 'class-variance-authority'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { sheetVariants } from '@/components/ui/sheet/sheet-variants'\nimport { useLocale } from '@/composables/useLocale'\n\ntype SheetVariantProps = VariantProps<typeof sheetVariants>\n\ninterface SheetContentProps {\n    side?: NonNullable<SheetVariantProps['side']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SheetContentProps>(), {\n    side: 'right',\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst overlayClasses = computed(() =>\n    cn(\n        'fixed inset-0 z-50 bg-brutal-overlay',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'\n    )\n)\n\nconst contentClasses = computed(() =>\n    cn(sheetVariants({ side: props.side }), props.class)\n)\n\nconst closeClasses = computed(() =>\n    cn(\n        'absolute right-4 top-4',\n        'h-8 w-8 flex items-center justify-center',\n        'border-3 border-brutal bg-brutal-bg text-brutal-fg',\n        'shadow-brutal-sm',\n        'transition-all duration-150',\n        'hover:bg-brutal-destructive hover:text-brutal-fg',\n        'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'\n    )\n)\n</script>\n\n<template>\n    <DialogPortalPrimitive>\n        <DialogOverlayPrimitive :class=\"overlayClasses\" />\n        <DialogContentPrimitive :class=\"contentClasses\">\n            <slot />\n            <DialogClosePrimitive :class=\"closeClasses\">\n                <X class=\"h-4 w-4 stroke-[3]\" />\n                <span class=\"sr-only\">{{ t('sheet.close') }}</span>\n            </DialogClosePrimitive>\n        </DialogContentPrimitive>\n    </DialogPortalPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/sheet/SheetDescription.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogDescription as DialogDescriptionPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface SheetDescriptionProps {\n    class?: string\n}\n\nconst props = defineProps<SheetDescriptionProps>()\n\nconst classes = computed(() =>\n    cn('text-sm text-brutal-muted-foreground font-medium', props.class)\n)\n</script>\n\n<template>\n    <DialogDescriptionPrimitive :class=\"classes\">\n        <slot />\n    </DialogDescriptionPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/sheet/SheetFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SheetFooterProps {\n    class?: string\n}\n\nconst props = defineProps<SheetFooterProps>()\n\nconst classes = computed(() =>\n    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/sheet/SheetHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface SheetHeaderProps {\n    class?: string\n}\n\nconst props = defineProps<SheetHeaderProps>()\n\nconst classes = computed(() =>\n    cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/sheet/SheetTitle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogTitle as DialogTitlePrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface SheetTitleProps {\n    class?: string\n}\n\nconst props = defineProps<SheetTitleProps>()\n\nconst classes = computed(() =>\n    cn('text-lg font-black tracking-tight text-brutal-fg', props.class)\n)\n</script>\n\n<template>\n    <DialogTitlePrimitive :class=\"classes\">\n        <slot />\n    </DialogTitlePrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/sheet/sheet-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const sheetVariants = cva(\n    'fixed z-50 gap-4 bg-brutal-bg p-6 border-brutal border-3 rounded-brutal shadow-brutal-xl text-brutal-fg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 border-b-3 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n                bottom: 'inset-x-0 bottom-0 border-t-3 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n                left: 'inset-y-0 left-0 h-full w-3/4 border-r-3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4 border-l-3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n            },\n        },\n        defaultVariants: {\n            side: 'right',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -38,7 +63,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -68,7 +97,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -78,16 +110,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/skeleton.json b/packages/registry/registry/skeleton.json
index 77986df..dccca71 100644
--- a/packages/registry/registry/skeleton.json
+++ b/packages/registry/registry/skeleton.json
@@ -3,13 +3,38 @@
   "name": "skeleton",
   "type": "registry:ui",
   "title": "Skeleton",
-  "description": "A highly customizable neo-brutalist Skeleton component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Skeleton component built with Brutx design tokens for Vue 3.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/skeleton.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst skeletonVariants = cva(['animate-pulse', 'border-3 border-brutal'], {\n    variants: {\n        variant: {\n            default: 'bg-gray-200 dark:bg-gray-800',\n            primary: 'bg-[#FF6B6B]/30',\n            secondary: 'bg-[#4ECDC4]/30',\n            accent: 'bg-[#FFE66D]/30',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\nexport interface SkeletonProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof skeletonVariants> {}\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n    ({ className, variant, ...props }, ref) => {\n        return (\n            <div ref={ref} className={cn(skeletonVariants({ variant, className }))} {...props} />\n        );\n    }\n);\nSkeleton.displayName = 'Skeleton';\n\nconst SkeletonText = React.forwardRef<\n    HTMLDivElement,\n    SkeletonProps & { lines?: number; lastLineWidth?: string }\n>(({ className, lines = 3, lastLineWidth = '60%', variant, ...props }, ref) => {\n    return (\n        <div ref={ref} className={cn('space-y-2', className)} {...props}>\n            {Array.from({ length: lines }).map((_, index) => (\n                <Skeleton\n                    key={index}\n                    variant={variant}\n                    className=\"h-4\"\n                    style={{\n                        width: index === lines - 1 ? lastLineWidth : '100%',\n                    }}\n                />\n            ))}\n        </div>\n    );\n});\nSkeletonText.displayName = 'SkeletonText';\n\nconst SkeletonAvatar = React.forwardRef<\n    HTMLDivElement,\n    SkeletonProps & { size?: 'sm' | 'default' | 'lg' | 'xl' }\n>(({ className, size = 'default', variant, ...props }, ref) => {\n    const sizeClasses = {\n        sm: 'h-8 w-8',\n        default: 'h-10 w-10',\n        lg: 'h-12 w-12',\n        xl: 'h-16 w-16',\n    };\n\n    return (\n        <Skeleton\n            ref={ref}\n            variant={variant}\n            className={cn(sizeClasses[size], className)}\n            {...props}\n        />\n    );\n});\nSkeletonAvatar.displayName = 'SkeletonAvatar';\n\nconst SkeletonCard = React.forwardRef<HTMLDivElement, SkeletonProps>(\n    ({ className, variant, ...props }, ref) => {\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    'p-4 border-3 border-brutal shadow-brutal',\n                    'bg-white dark:bg-gray-900',\n                    className\n                )}\n                {...props}\n            >\n                <div className=\"space-y-4\">\n                    <Skeleton variant={variant} className=\"h-32 w-full\" />\n                    <Skeleton variant={variant} className=\"h-6 w-3/4\" />\n                    <SkeletonText variant={variant} lines={2} />\n                    <div className=\"flex gap-2\">\n                        <Skeleton variant={variant} className=\"h-10 w-24\" />\n                        <Skeleton variant={variant} className=\"h-10 w-24\" />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n);\nSkeletonCard.displayName = 'SkeletonCard';\n\nconst SkeletonTable = React.forwardRef<\n    HTMLDivElement,\n    SkeletonProps & { rows?: number; columns?: number }\n>(({ className, rows = 5, columns = 4, variant, ...props }, ref) => {\n    return (\n        <div\n            ref={ref}\n            className={cn('border-3 border-brutal overflow-hidden', className)}\n            {...props}\n        >\n            <div className=\"flex bg-[#FFE66D] border-b-3 border-brutal\">\n                {Array.from({ length: columns }).map((_, index) => (\n                    <div\n                        key={`header-${index}`}\n                        className={cn(\n                            'flex-1 p-3',\n                            index < columns - 1 && 'border-r-3 border-brutal'\n                        )}\n                    >\n                        <Skeleton variant={variant} className=\"h-5 w-3/4 bg-black/20\" />\n                    </div>\n                ))}\n            </div>\n            {Array.from({ length: rows }).map((_, rowIndex) => (\n                <div\n                    key={`row-${rowIndex}`}\n                    className={cn(\n                        'flex',\n                        rowIndex < rows - 1 && 'border-b-3 border-brutal',\n                        rowIndex % 2 === 1 && 'bg-gray-50 dark:bg-gray-800'\n                    )}\n                >\n                    {Array.from({ length: columns }).map((_, colIndex) => (\n                        <div\n                            key={`cell-${rowIndex}-${colIndex}`}\n                            className={cn(\n                                'flex-1 p-3',\n                                colIndex < columns - 1 &&\n                                    'border-r-3 border-brutal'\n                            )}\n                        >\n                            <Skeleton\n                                variant={variant}\n                                className=\"h-4\"\n                                style={{ width: `${60 + Math.random() * 30}%` }}\n                            />\n                        </div>\n                    ))}\n                </div>\n            ))}\n        </div>\n    );\n});\nSkeletonTable.displayName = 'SkeletonTable';\n\nexport { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonTable, skeletonVariants };\n",
+      "path": "components/ui/skeleton/Skeleton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { skeletonVariants } from '@/components/ui/skeleton/skeleton-variants'\n\ntype SkeletonVariantProps = VariantProps<typeof skeletonVariants>\n\ninterface SkeletonProps {\n    variant?: NonNullable<SkeletonVariantProps['variant']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonProps>(), {\n    variant: 'default',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(skeletonVariants({ variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/skeleton/SkeletonAvatar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { skeletonVariants } from '@/components/ui/skeleton/skeleton-variants'\nimport Skeleton from '@/components/ui/skeleton/Skeleton.vue'\n\ntype SkeletonVariantProps = VariantProps<typeof skeletonVariants>\n\ninterface SkeletonAvatarProps {\n    variant?: NonNullable<SkeletonVariantProps['variant']>\n    size?: 'sm' | 'default' | 'lg' | 'xl'\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonAvatarProps>(), {\n    variant: 'default',\n    size: 'default',\n    class: '',\n})\n\nconst sizeClasses: Record<string, string> = {\n    sm: 'h-8 w-8',\n    default: 'h-10 w-10',\n    lg: 'h-12 w-12',\n    xl: 'h-16 w-16',\n}\n\nconst classes = computed(() => cn(sizeClasses[props.size], props.class))\n</script>\n\n<template>\n    <Skeleton :variant=\"variant\" :class=\"classes\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/skeleton/SkeletonCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { skeletonVariants } from '@/components/ui/skeleton/skeleton-variants'\nimport Skeleton from '@/components/ui/skeleton/Skeleton.vue'\nimport SkeletonText from '@/components/ui/skeleton/SkeletonText.vue'\n\ntype SkeletonVariantProps = VariantProps<typeof skeletonVariants>\n\ninterface SkeletonCardProps {\n    variant?: NonNullable<SkeletonVariantProps['variant']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonCardProps>(), {\n    variant: 'default',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn('p-4 border-3 border-brutal shadow-brutal bg-brutal-bg', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <div class=\"space-y-4\">\n            <Skeleton :variant=\"variant\" class=\"h-32 w-full\" />\n            <Skeleton :variant=\"variant\" class=\"h-6 w-3/4\" />\n            <SkeletonText :variant=\"variant\" :lines=\"2\" />\n            <div class=\"flex gap-2\">\n                <Skeleton :variant=\"variant\" class=\"h-10 w-24\" />\n                <Skeleton :variant=\"variant\" class=\"h-10 w-24\" />\n            </div>\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/skeleton/SkeletonTable.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { skeletonVariants } from '@/components/ui/skeleton/skeleton-variants'\nimport Skeleton from '@/components/ui/skeleton/Skeleton.vue'\n\ntype SkeletonVariantProps = VariantProps<typeof skeletonVariants>\n\ninterface SkeletonTableProps {\n    variant?: NonNullable<SkeletonVariantProps['variant']>\n    rows?: number\n    columns?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonTableProps>(), {\n    variant: 'default',\n    rows: 5,\n    columns: 4,\n    class: '',\n})\n\nconst DEFAULT_CELL_WIDTH_RATIOS = [0.85, 0.7, 0.9, 0.65]\nconst FALLBACK_CELL_WIDTH_RATIO = 0.75\n\nconst containerClasses = computed(() =>\n    cn('border-3 border-brutal overflow-hidden', props.class)\n)\n\nconst headerCellClasses = computed(() =>\n    Array.from({ length: props.columns }, (_, i) =>\n        cn('flex-1 p-3', i < props.columns - 1 && 'border-r-3 border-brutal')\n    )\n)\n\nconst rowClasses = computed(() =>\n    Array.from({ length: props.rows }, (_, i) =>\n        cn('flex', i < props.rows - 1 && 'border-b-3 border-brutal', i % 2 === 0 && 'bg-brutal-muted')\n    )\n)\n\nconst cellClasses = computed(() =>\n    Array.from({ length: props.columns }, (_, i) =>\n        cn('flex-1 p-3', i < props.columns - 1 && 'border-r-3 border-brutal')\n    )\n)\n</script>\n\n<template>\n    <div :class=\"containerClasses\">\n        <div class=\"flex bg-brutal-accent border-b-3 border-brutal\">\n            <div\n                v-for=\"(headerClass, colIndex) in headerCellClasses\"\n                :key=\"`header-${colIndex}`\"\n                :class=\"headerClass\"\n            >\n                <Skeleton :variant=\"variant\" class=\"h-5 w-3/4 bg-brutal-fg/20\" />\n            </div>\n        </div>\n        <div\n            v-for=\"(rowClass, rowIndex) in rowClasses\"\n            :key=\"`row-${rowIndex}`\"\n            :class=\"rowClass\"\n        >\n            <div\n                v-for=\"(cellClass, colIndex) in cellClasses\"\n                :key=\"`cell-${rowIndex}-${colIndex}`\"\n                :class=\"cellClass\"\n            >\n                <Skeleton\n                    :variant=\"variant\"\n                    class=\"h-4\"\n                    :style=\"{ width: `${(DEFAULT_CELL_WIDTH_RATIOS[colIndex % DEFAULT_CELL_WIDTH_RATIOS.length] ?? FALLBACK_CELL_WIDTH_RATIO) * 100}%` }\"\n                />\n            </div>\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/skeleton/SkeletonText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { skeletonVariants } from '@/components/ui/skeleton/skeleton-variants'\nimport Skeleton from '@/components/ui/skeleton/Skeleton.vue'\n\ntype SkeletonVariantProps = VariantProps<typeof skeletonVariants>\n\ninterface SkeletonTextProps {\n    variant?: NonNullable<SkeletonVariantProps['variant']>\n    lines?: number\n    lastLineWidth?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SkeletonTextProps>(), {\n    variant: 'default',\n    lines: 3,\n    lastLineWidth: '60%',\n    class: '',\n})\n\nconst classes = computed(() => cn('space-y-2', props.class))\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <Skeleton\n            v-for=\"index in props.lines\"\n            :key=\"index\"\n            :variant=\"variant\"\n            class=\"h-4\"\n            :style=\"{ width: index === props.lines ? props.lastLineWidth : '100%' }\"\n        />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/skeleton/skeleton-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const skeletonVariants = cva(\n    ['animate-pulse', 'border-3 border-brutal'],\n    {\n        variants: {\n            variant: {\n                default: 'bg-brutal-muted',\n                primary: 'bg-brutal-primary/30',\n                secondary: 'bg-brutal-secondary/30',\n                accent: 'bg-brutal-accent/30',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -35,7 +60,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -65,7 +94,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -75,16 +107,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/sketchy-chart.json b/packages/registry/registry/sketchy-chart.json
new file mode 100644
index 0000000..5c3d958
--- /dev/null
+++ b/packages/registry/registry/sketchy-chart.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sketchy-chart",
+  "type": "registry:ui",
+  "title": "Sketchy Chart",
+  "description": "A highly customizable neo-brutalist Sketchy Chart component built with Brutx design tokens for Vue 3.",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/sketchy-chart/SketchyChart.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { sketchyChartVariants } from '@/components/ui/sketchy-chart/sketchy-chart-variants'\n\ninterface ChartDataItem {\n    label: string\n    value: number\n}\n\ninterface SketchyChartProps {\n    type?: 'line' | 'bar' | 'pie'\n    data?: ChartDataItem[]\n    sketchiness?: number\n    grid?: boolean\n    width?: number\n    height?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SketchyChartProps>(), {\n    type: 'line',\n    data: () => [],\n    sketchiness: 2,\n    grid: true,\n    width: 600,\n    height: 400,\n    class: '',\n})\n\n// 回退版唯一 ID 保证兼容性\nconst getUniqueId = () => {\n    try {\n        const id = useId()\n        return id.replace(/:/g, '-') // 去除 ID 中可能的冒号\n    } catch {\n        return Math.random().toString(36).substring(2, 9)\n    }\n}\n\nconst uid = getUniqueId()\nconst filterId = `brutal-sketch-filter-${uid}`\nconst hatchId = `hatch-pattern-${uid}`\nconst { t } = useLocale()\n\nconst chartAriaLabel = computed(() => {\n    if (props.type === 'line') return t('sketchyChart.lineAriaLabel')\n    if (props.type === 'bar') return t('sketchyChart.barAriaLabel')\n    return t('sketchyChart.pieAriaLabel')\n})\n\n// 手绘抖动强度对应的基准频率\nconst BASE_FREQUENCY_FACTOR = 0.015\nconst baseFrequency = computed(() =>\n    (props.sketchiness * BASE_FREQUENCY_FACTOR).toFixed(3)\n)\n\n// 数据预处理（空数组、大容量降采样、负数取绝对值）\nconst processedData = computed(() => {\n    if (!props.data || props.data.length === 0) return []\n    \n    // 负数取绝对值\n    let items = props.data.map(d => ({\n        label: d.label,\n        value: Math.abs(d.value)\n    }))\n\n    // 大容量降采样（超过 30 项，隔项采样以防重叠）\n    if (items.length > 30) {\n        const step = Math.ceil(items.length / 30)\n        items = items.filter((_, idx) => idx % step === 0)\n    }\n\n    return items\n})\n\nconst CHART_PADDING = { top: 30, right: 30, bottom: 40, left: 60 }\n\nconst plotWidth = computed(() => props.width - CHART_PADDING.left - CHART_PADDING.right)\nconst plotHeight = computed(() => props.height - CHART_PADDING.top - CHART_PADDING.bottom)\n\nconst maxValue = computed(() => {\n    if (processedData.value.length === 0) return 100\n    const max = Math.max(...processedData.value.map(d => d.value))\n    return max === 0 ? 100 : max\n})\n\n// 坐标映射\nconst dataToSvgX = (index: number) => {\n    if (processedData.value.length <= 1) return CHART_PADDING.left + plotWidth.value / 2\n    return CHART_PADDING.left + (index / (processedData.value.length - 1)) * plotWidth.value\n}\n\nconst dataToSvgY = (value: number) => {\n    return CHART_PADDING.top + plotHeight.value - (value / maxValue.value) * plotHeight.value\n}\n\n// 折线图 Paths\nconst linePath = computed(() => {\n    if (processedData.value.length === 0) return ''\n    return processedData.value\n        .map((d, i) => `${i === 0 ? 'M' : 'L'} ${dataToSvgX(i)} ${dataToSvgY(d.value)}`)\n        .join(' ')\n})\n\n// 折线图填充区域（Neobrutalist 阴影面效果）\nconst lineAreaPath = computed(() => {\n    if (processedData.value.length === 0) return ''\n    const startX = dataToSvgX(0)\n    const endX = dataToSvgX(processedData.value.length - 1)\n    const bottomY = CHART_PADDING.top + plotHeight.value\n    return `${linePath.value} L ${endX} ${bottomY} L ${startX} ${bottomY} Z`\n})\n\n// 柱状图各 Column 算定\nconst BAR_GAP_RATIO = 0.25\nconst barWidth = computed(() => {\n    const totalBars = processedData.value.length\n    if (totalBars === 0) return 0\n    return (plotWidth.value / totalBars) * (1 - BAR_GAP_RATIO)\n})\n\nconst getBarX = (index: number) => {\n    const totalBars = processedData.value.length\n    const slotWidth = plotWidth.value / totalBars\n    return CHART_PADDING.left + index * slotWidth + (slotWidth - barWidth.value) / 2\n}\n\n// 饼图计算\nconst PIE_COLORS = [\n    'var(--brutal-primary, #FF6B6B)',\n    'var(--brutal-secondary, #4ECDC4)',\n    'var(--brutal-accent, #FFE66D)',\n    'var(--brutal-info, #4A90D9)',\n    'var(--brutal-success, #7FB069)',\n    'var(--brutal-destructive, #EF476F)',\n]\n\nconst pieSlices = computed(() => {\n    if (processedData.value.length === 0) return []\n    const total = processedData.value.reduce((sum, d) => sum + d.value, 0)\n    if (total === 0) return []\n    const cx = props.width / 2\n    const cy = props.height / 2\n    const radius = Math.min(cx, cy) * 0.7\n    let currentAngle = -Math.PI / 2\n    return processedData.value.map((d, i) => {\n        const sliceAngle = (d.value / total) * Math.PI * 2\n        const startAngle = currentAngle\n        const endAngle = currentAngle + sliceAngle\n        const largeArc = sliceAngle > Math.PI ? 1 : 0\n        const x1 = cx + radius * Math.cos(startAngle)\n        const y1 = cy + radius * Math.sin(startAngle)\n        const x2 = cx + radius * Math.cos(endAngle)\n        const y2 = cy + radius * Math.sin(endAngle)\n        const path = [\n            `M ${cx} ${cy}`,\n            `L ${x1} ${y1}`,\n            `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`,\n            'Z',\n        ].join(' ')\n        currentAngle = endAngle\n        return {\n            path,\n            color: PIE_COLORS[i % PIE_COLORS.length],\n            label: d.label,\n            midAngle: (startAngle + endAngle) / 2,\n            cx,\n            cy,\n            labelRadius: radius * 0.55,\n        }\n    })\n})\n\n// 自动生成 Y 轴 5 等分刻度\nconst yTicks = computed(() => {\n    const ticks = []\n    const step = maxValue.value / 4\n    for (let i = 0; i <= 4; i++) {\n        const val = Math.round(step * i)\n        ticks.push({\n            value: val,\n            y: dataToSvgY(val)\n        })\n    }\n    return ticks\n})\n\nconst containerClasses = computed(() =>\n    cn(sketchyChartVariants(), props.class)\n)\n</script>\n\n<template>\n    <div :class=\"containerClasses\">\n        <svg\n            role=\"img\"\n            :aria-label=\"chartAriaLabel\"\n            :viewBox=\"`0 0 ${width} ${height}`\"\n            class=\"w-full h-auto overflow-visible select-none\"\n        >\n            <title>{{ chartAriaLabel }}</title>\n            \n            <defs>\n                <!-- 手绘波动滤镜 -->\n                <filter :id=\"filterId\">\n                    <feTurbulence\n                        type=\"fractalNoise\"\n                        :baseFrequency=\"baseFrequency\"\n                        numOctaves=\"3\"\n                        result=\"noise\"\n                    />\n                    <feDisplacementMap\n                        in=\"SourceGraphic\"\n                        in2=\"noise\"\n                        :scale=\"sketchiness\"\n                        xChannelSelector=\"R\"\n                        yChannelSelector=\"G\"\n                    />\n                </filter>\n                \n                <!-- 斜向条纹 Hatch Fill -->\n                <pattern\n                    :id=\"hatchId\"\n                    patternUnits=\"userSpaceOnUse\"\n                    width=\"10\"\n                    height=\"10\"\n                    patternTransform=\"rotate(45)\"\n                >\n                    <line\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"10\"\n                        stroke=\"var(--brutal-border-color, #000000)\"\n                        stroke-width=\"2\"\n                    />\n                </pattern>\n            </defs>\n\n            <!-- 背景网格线 -->\n            <g v-if=\"grid\" class=\"chart-grid\">\n                <line\n                    v-for=\"tick in yTicks\"\n                    :key=\"'grid-' + tick.value\"\n                    :x1=\"CHART_PADDING.left\"\n                    :y1=\"tick.y\"\n                    :x2=\"width - CHART_PADDING.right\"\n                    :y2=\"tick.y\"\n                    stroke=\"var(--brutal-muted, #f3f4f6)\"\n                    stroke-width=\"1.5\"\n                    stroke-dasharray=\"4 4\"\n                />\n            </g>\n\n            <!-- 坐标轴 -->\n            <g :filter=\"`url(#${filterId})`\" class=\"chart-axes\">\n                <!-- Y 轴 -->\n                <line\n                    :x1=\"CHART_PADDING.left\"\n                    :y1=\"CHART_PADDING.top\"\n                    :x2=\"CHART_PADDING.left\"\n                    :y2=\"height - CHART_PADDING.bottom\"\n                    stroke=\"var(--brutal-border-color, #000000)\"\n                    stroke-width=\"3\"\n                />\n                <!-- X 轴 -->\n                <line\n                    :x1=\"CHART_PADDING.left\"\n                    :y1=\"height - CHART_PADDING.bottom\"\n                    :x2=\"width - CHART_PADDING.right\"\n                    :y2=\"height - CHART_PADDING.bottom\"\n                    stroke=\"var(--brutal-border-color, #000000)\"\n                    stroke-width=\"3\"\n                />\n            </g>\n\n            <!-- 数据图形展示 -->\n            <g :filter=\"`url(#${filterId})`\" class=\"chart-data\">\n                <!-- 1. 折线图 -->\n                <template v-if=\"type === 'line' && processedData.length > 0\">\n                    <!-- 阴影填充区 -->\n                    <path\n                        :d=\"lineAreaPath\"\n                        :fill=\"`url(#${hatchId})`\"\n                        class=\"opacity-60\"\n                    />\n                    <!-- 核心折线 -->\n                    <path\n                        :d=\"linePath\"\n                        fill=\"none\"\n                        stroke=\"var(--brutal-primary, #FF6B6B)\"\n                        stroke-width=\"4\"\n                    />\n                    <!-- 折线拐点圆圈（Brutalist 粗黑边圆圈） -->\n                    <circle\n                        v-for=\"(d, i) in processedData\"\n                        :key=\"'dot-' + i\"\n                        :cx=\"dataToSvgX(i)\"\n                        :cy=\"dataToSvgY(d.value)\"\n                        r=\"6\"\n                        fill=\"var(--brutal-accent, #FFE66D)\"\n                        stroke=\"var(--brutal-border-color, #000000)\"\n                        stroke-width=\"2.5\"\n                    />\n                </template>\n\n                <!-- 2. 柱状图 -->\n                <template v-if=\"type === 'bar' && processedData.length > 0\">\n                    <g v-for=\"(d, i) in processedData\" :key=\"'bar-' + i\">\n                        <!-- 柱体硬影子（Neobrutalist 偏移底色块） -->\n                        <rect\n                            :x=\"getBarX(i) + 4\"\n                            :y=\"dataToSvgY(d.value) + 4\"\n                            :width=\"barWidth\"\n                            :height=\"height - CHART_PADDING.bottom - dataToSvgY(d.value)\"\n                            fill=\"var(--brutal-border-color, #000000)\"\n                        />\n                        <!-- 柱体本体（Hatch 填充 + 粗黑边框） -->\n                        <rect\n                            :x=\"getBarX(i)\"\n                            :y=\"dataToSvgY(d.value)\"\n                            :width=\"barWidth\"\n                            :height=\"height - CHART_PADDING.bottom - dataToSvgY(d.value)\"\n                            :fill=\"`url(#${hatchId})`\"\n                            stroke=\"var(--brutal-border-color, #000000)\"\n                            stroke-width=\"3\"\n                        />\n                    </g>\n                </template>\n\n                <!-- 3. 饼图 -->\n                <template v-if=\"type === 'pie' && pieSlices.length > 0\">\n                    <g v-for=\"(slice, i) in pieSlices\" :key=\"'pie-' + i\">\n                        <path\n                            :d=\"slice.path\"\n                            :fill=\"slice.color\"\n                            stroke=\"var(--brutal-border-color, #000000)\"\n                            stroke-width=\"3\"\n                        />\n                    </g>\n                </template>\n            </g>\n\n            <!-- 坐标轴文本与刻度标签 -->\n            <g class=\"chart-labels\" fill=\"var(--brutal-fg, #000000)\" font-size=\"12\" font-weight=\"bold\">\n                <!-- Y 轴刻度标签 -->\n                <text\n                    v-for=\"tick in yTicks\"\n                    :key=\"'lbl-y-' + tick.value\"\n                    :x=\"CHART_PADDING.left - 12\"\n                    :y=\"tick.y + 4\"\n                    text-anchor=\"end\"\n                >\n                    {{ tick.value }}\n                </text>\n\n                <!-- X 轴刻度标签 -->\n                <text\n                    v-for=\"(d, i) in processedData\"\n                    :key=\"'lbl-x-' + i\"\n                    :x=\"type === 'line' ? dataToSvgX(i) : getBarX(i) + barWidth / 2\"\n                    :y=\"height - CHART_PADDING.bottom + 20\"\n                    text-anchor=\"middle\"\n                >\n                    {{ d.label }}\n                </text>\n            </g>\n        </svg>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/sketchy-chart/sketchy-chart-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const sketchyChartVariants = cva(\n    [\n        'border-3 border-brutal',\n        'rounded-brutal',\n        'bg-brutal-bg',\n        'p-4',\n    ]\n)\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/slider.json b/packages/registry/registry/slider.json
index 5f8b0a3..7a99ecb 100644
--- a/packages/registry/registry/slider.json
+++ b/packages/registry/registry/slider.json
@@ -3,15 +3,15 @@
   "name": "slider",
   "type": "registry:ui",
   "title": "Slider",
-  "description": "A highly customizable neo-brutalist Slider component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Slider component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-slider"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/slider.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as SliderPrimitive from '@radix-ui/react-slider';\n\nimport { cn } from '@/lib/utils';\n\nconst Slider = React.forwardRef<\n    React.ElementRef<typeof SliderPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n    <SliderPrimitive.Root\n        ref={ref}\n        className={cn(\n            'relative flex w-full touch-none select-none items-center',\n            className\n        )}\n        {...props}\n    >\n        <SliderPrimitive.Track\n            className={cn(\n                'relative h-5 w-full grow overflow-hidden rounded-full',\n                'border-3 border-brutal bg-white dark:bg-gray-800',\n                'shadow-brutal-sm'\n            )}\n        >\n            <SliderPrimitive.Range className=\"absolute h-full bg-brutal-secondary\" />\n        </SliderPrimitive.Track>\n        <SliderPrimitive.Thumb\n            className={cn(\n                'block h-6 w-6 rounded-full',\n                'border-3 border-brutal bg-brutal-accent',\n                'shadow-brutal-sm',\n                'transition-all duration-150',\n                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n                'disabled:pointer-events-none disabled:opacity-50',\n                'hover:scale-110 active:scale-95',\n                'cursor-grab active:cursor-grabbing'\n            )}\n        />\n    </SliderPrimitive.Root>\n));\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n",
+      "path": "components/ui/slider/Slider.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n    SliderRoot as SliderRootPrimitive,\n    SliderTrack as SliderTrackPrimitive,\n    SliderRange as SliderRangePrimitive,\n    SliderThumb as SliderThumbPrimitive,\n} from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface SliderProps {\n    defaultValue?: number[]\n    modelValue?: number[]\n    min?: number\n    max?: number\n    step?: number\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SliderProps>(), {\n    defaultValue: undefined,\n    modelValue: undefined,\n    min: 0,\n    max: 100,\n    step: 1,\n    class: '',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: number[]] }>()\n\nconst rootClasses = computed(() =>\n    cn('relative flex w-full touch-none select-none items-center', props.class)\n)\n\nconst trackClasses = computed(() =>\n    cn(\n        'relative h-5 w-full grow overflow-hidden rounded-brutal',\n        'border-3 border-brutal bg-brutal-bg',\n        'shadow-brutal-sm'\n    )\n)\n\nconst thumbClasses = computed(() =>\n    cn(\n        'block h-6 w-6 rounded-full',\n        'border-3 border-brutal bg-brutal-accent',\n        'shadow-brutal-sm',\n        'transition-all duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'hover:scale-110 active:scale-95',\n        'cursor-grab active:cursor-grabbing'\n    )\n)\n</script>\n\n<template>\n    <SliderRootPrimitive\n        :default-value=\"defaultValue\"\n        :model-value=\"modelValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :step=\"step\"\n        :disabled=\"disabled\"\n        :class=\"rootClasses\"\n        @update:model-value=\"emit('update:modelValue', $event!)\"\n    >\n        <SliderTrackPrimitive :class=\"trackClasses\">\n            <SliderRangePrimitive class=\"absolute h-full bg-brutal-secondary\" />\n        </SliderTrackPrimitive>\n        <SliderThumbPrimitive :class=\"thumbClasses\" />\n    </SliderRootPrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +37,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +71,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +84,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/spinner.json b/packages/registry/registry/spinner.json
index 9e63bf5..a19b675 100644
--- a/packages/registry/registry/spinner.json
+++ b/packages/registry/registry/spinner.json
@@ -3,13 +3,33 @@
   "name": "spinner",
   "type": "registry:ui",
   "title": "Spinner",
-  "description": "A highly customizable neo-brutalist Spinner component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Spinner component built with Brutx design tokens for Vue 3.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/spinner.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst spinnerVariants = cva(\n    ['inline-block rounded-full', 'border-4 border-black dark:border-white', 'animate-spin'],\n    {\n        variants: {\n            size: {\n                sm: 'h-5 w-5 border-[3px]',\n                default: 'h-8 w-8 border-4',\n                lg: 'h-12 w-12 border-[5px]',\n                xl: 'h-16 w-16 border-[6px]',\n            },\n            variant: {\n                default: 'border-t-transparent border-r-transparent',\n                primary: 'border-[#FF6B6B] border-t-transparent border-r-transparent',\n                secondary: 'border-[#4ECDC4] border-t-transparent border-r-transparent',\n                accent: 'border-[#FFE66D] border-t-[#000] border-r-[#000] dark:border-t-white dark:border-r-white',\n            },\n        },\n        defaultVariants: {\n            size: 'default',\n            variant: 'default',\n        },\n    }\n);\n\nexport interface SpinnerProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof spinnerVariants> {\n    label?: string;\n}\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n    ({ className, size, variant, label = 'Loading...', ...props }, ref) => {\n        return (\n            <div\n                ref={ref}\n                role=\"status\"\n                aria-label={label}\n                className={cn(spinnerVariants({ size, variant }), className)}\n                {...props}\n            >\n                <span className=\"sr-only\">{label}</span>\n            </div>\n        );\n    }\n);\nSpinner.displayName = 'Spinner';\n\nconst blockSpinnerVariants = cva('grid grid-cols-2 gap-1', {\n    variants: {\n        size: {\n            sm: 'h-5 w-5 gap-0.5',\n            default: 'h-8 w-8 gap-1',\n            lg: 'h-12 w-12 gap-1.5',\n            xl: 'h-16 w-16 gap-2',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n});\n\nconst BlockSpinner = React.forwardRef<\n    HTMLDivElement,\n    Omit<SpinnerProps, 'variant'> & {\n        color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed';\n    }\n>(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {\n    const colorMap = {\n        default: [\n            'bg-black dark:bg-white',\n            'bg-black dark:bg-white',\n            'bg-black dark:bg-white',\n            'bg-black dark:bg-white',\n        ],\n        primary: ['bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]'],\n        secondary: ['bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]'],\n        accent: ['bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]'],\n        mixed: ['bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#FFE66D]', 'bg-[#A855F7]'],\n    };\n\n    const colors = colorMap[color];\n\n    return (\n        <div\n            ref={ref}\n            role=\"status\"\n            aria-label={label}\n            className={cn(blockSpinnerVariants({ size }), className)}\n            {...props}\n        >\n            {[0, 1, 2, 3].map((i) => (\n                <div\n                    key={i}\n                    className={cn(\n                        'border-2 border-black dark:border-white',\n                        colors[i],\n                        'animate-pulse'\n                    )}\n                    style={{\n                        animationDelay: `${i * 150}ms`,\n                        animationDuration: '600ms',\n                    }}\n                />\n            ))}\n            <span className=\"sr-only\">{label}</span>\n        </div>\n    );\n});\nBlockSpinner.displayName = 'BlockSpinner';\n\nconst DotsSpinner = React.forwardRef<\n    HTMLDivElement,\n    Omit<SpinnerProps, 'variant'> & { color?: 'default' | 'primary' | 'secondary' | 'accent' }\n>(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {\n    const sizeMap = {\n        sm: 'h-1.5 w-1.5',\n        default: 'h-2.5 w-2.5',\n        lg: 'h-3.5 w-3.5',\n        xl: 'h-5 w-5',\n    };\n\n    const gapMap = {\n        sm: 'gap-1',\n        default: 'gap-2',\n        lg: 'gap-3',\n        xl: 'gap-4',\n    };\n\n    const colorMap = {\n        default: 'bg-black dark:bg-white',\n        primary: 'bg-[#FF6B6B]',\n        secondary: 'bg-[#4ECDC4]',\n        accent: 'bg-[#FFE66D]',\n    };\n\n    return (\n        <div\n            ref={ref}\n            role=\"status\"\n            aria-label={label}\n            className={cn('flex items-center', gapMap[size || 'default'], className)}\n            {...props}\n        >\n            {[0, 1, 2].map((i) => (\n                <div\n                    key={i}\n                    className={cn(\n                        sizeMap[size || 'default'],\n                        'border-2 border-black dark:border-white',\n                        colorMap[color],\n                        'animate-bounce'\n                    )}\n                    style={{\n                        animationDelay: `${i * 100}ms`,\n                        animationDuration: '500ms',\n                    }}\n                />\n            ))}\n            <span className=\"sr-only\">{label}</span>\n        </div>\n    );\n});\nDotsSpinner.displayName = 'DotsSpinner';\n\nconst BarsSpinner = React.forwardRef<\n    HTMLDivElement,\n    Omit<SpinnerProps, 'variant'> & {\n        color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed';\n    }\n>(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {\n    const heightMap = {\n        sm: 'h-4',\n        default: 'h-6',\n        lg: 'h-8',\n        xl: 'h-12',\n    };\n\n    const barWidthMap = {\n        sm: 'w-1',\n        default: 'w-1.5',\n        lg: 'w-2',\n        xl: 'w-3',\n    };\n\n    const colorMap = {\n        default: [\n            'bg-black dark:bg-white',\n            'bg-black dark:bg-white',\n            'bg-black dark:bg-white',\n            'bg-black dark:bg-white',\n            'bg-black dark:bg-white',\n        ],\n        primary: ['bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]'],\n        secondary: ['bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]'],\n        accent: ['bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]'],\n        mixed: ['bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#FFE66D]', 'bg-[#A855F7]', 'bg-[#FF6B6B]'],\n    };\n\n    const colors = colorMap[color];\n\n    return (\n        <div\n            ref={ref}\n            role=\"status\"\n            aria-label={label}\n            className={cn('flex items-end gap-0.5', heightMap[size || 'default'], className)}\n            {...props}\n        >\n            {[0, 1, 2, 3, 4].map((i) => (\n                <div\n                    key={i}\n                    className={cn(\n                        barWidthMap[size || 'default'],\n                        'border border-black dark:border-white',\n                        colors[i],\n                        'animate-pulse origin-bottom'\n                    )}\n                    style={{\n                        height: `${40 + Math.sin(i * 0.8) * 30}%`,\n                        animationDelay: `${i * 100}ms`,\n                        animationDuration: '400ms',\n                    }}\n                />\n            ))}\n            <span className=\"sr-only\">{label}</span>\n        </div>\n    );\n});\nBarsSpinner.displayName = 'BarsSpinner';\n\nexport { Spinner, BlockSpinner, DotsSpinner, BarsSpinner, spinnerVariants, blockSpinnerVariants };\n",
+      "path": "components/ui/spinner/Spinner.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { spinnerVariants } from '@/components/ui/spinner/spinner-variants'\n\ntype SpinnerVariantProps = VariantProps<typeof spinnerVariants>\n\ninterface SpinnerProps {\n    size?: NonNullable<SpinnerVariantProps['size']>\n    variant?: NonNullable<SpinnerVariantProps['variant']>\n    label?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SpinnerProps>(), {\n    size: 'default',\n    variant: 'default',\n    label: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedLabel = computed(() => props.label ?? t('spinner.loading'))\n\nconst classes = computed(() =>\n    cn(spinnerVariants({ size: props.size, variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\" role=\"status\" :aria-label=\"resolvedLabel\">\n        <span class=\"sr-only\">{{ resolvedLabel }}</span>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/spinner/BarsSpinner.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { barsSpinnerVariants } from '@/components/ui/spinner/spinner-variants'\n\ntype BarsSpinnerSize = NonNullable<VariantProps<typeof barsSpinnerVariants>['size']>\n\ninterface BarsSpinnerProps {\n    size?: BarsSpinnerSize\n    color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed'\n    label?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BarsSpinnerProps>(), {\n    size: 'default',\n    color: 'default',\n    label: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedLabel = computed(() => props.label ?? t('spinner.loading'))\n\nconst barWidthMap: Record<string, string> = {\n    sm: 'w-1',\n    default: 'w-1.5',\n    lg: 'w-2',\n    xl: 'w-3',\n}\n\nconst colorMap: Record<string, string[]> = {\n    default: ['bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg'],\n    primary: ['bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary'],\n    secondary: ['bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary'],\n    accent: ['bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent'],\n    mixed: ['bg-brutal-primary', 'bg-brutal-secondary', 'bg-brutal-accent', 'bg-brutal-info', 'bg-brutal-primary'],\n}\n\nconst BAR_HEIGHT_RATIOS = [0.7, 0.55, 0.85, 0.6, 0.75]\nconst ANIMATION_DELAY_INCREMENT_MS = 100\nconst ANIMATION_DURATION_MS = 400\n\nconst containerClasses = computed(() =>\n    cn(barsSpinnerVariants({ size: props.size }), props.class)\n)\n\nconst barClasses = computed(() =>\n    colorMap[props.color].map(barColor =>\n        cn(barWidthMap[props.size ?? 'default'], 'border-3 border-brutal', barColor, 'animate-pulse origin-bottom')\n    )\n)\n</script>\n\n<template>\n    <div :class=\"containerClasses\" role=\"status\" :aria-label=\"resolvedLabel\">\n        <div\n            v-for=\"(barClass, i) in barClasses\"\n            :key=\"i\"\n            :class=\"barClass\"\n            :style=\"{\n                height: `${BAR_HEIGHT_RATIOS[i] * 100}%`,\n                animationDelay: `${i * ANIMATION_DELAY_INCREMENT_MS}ms`,\n                animationDuration: `${ANIMATION_DURATION_MS}ms`,\n            }\"\n        />\n        <span class=\"sr-only\">{{ resolvedLabel }}</span>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/spinner/BlockSpinner.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { blockSpinnerVariants } from '@/components/ui/spinner/spinner-variants'\n\ntype BlockSpinnerSize = NonNullable<VariantProps<typeof blockSpinnerVariants>['size']>\n\ninterface BlockSpinnerProps {\n    size?: BlockSpinnerSize\n    color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed'\n    label?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<BlockSpinnerProps>(), {\n    size: 'default',\n    color: 'default',\n    label: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedLabel = computed(() => props.label ?? t('spinner.loading'))\n\nconst colorMap: Record<string, string[]> = {\n    default: ['bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg'],\n    primary: ['bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary'],\n    secondary: ['bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary'],\n    accent: ['bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent'],\n    mixed: ['bg-brutal-primary', 'bg-brutal-secondary', 'bg-brutal-accent', 'bg-brutal-info'],\n}\n\nconst classes = computed(() =>\n    cn(blockSpinnerVariants({ size: props.size }), props.class)\n)\n\nconst blockClasses = computed(() =>\n    colorMap[props.color].map(blockColor =>\n        cn('border-3 border-brutal', blockColor, 'animate-pulse')\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\" role=\"status\" :aria-label=\"resolvedLabel\">\n        <div\n            v-for=\"(blockClass, i) in blockClasses\"\n            :key=\"i\"\n            :class=\"blockClass\"\n            :style=\"{ animationDelay: `${i * 150}ms`, animationDuration: '600ms' }\"\n        />\n        <span class=\"sr-only\">{{ resolvedLabel }}</span>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/spinner/DotsSpinner.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { dotsSpinnerVariants } from '@/components/ui/spinner/spinner-variants'\n\ntype DotsSpinnerSize = NonNullable<VariantProps<typeof dotsSpinnerVariants>['size']>\n\ninterface DotsSpinnerProps {\n    size?: DotsSpinnerSize\n    color?: 'default' | 'primary' | 'secondary' | 'accent'\n    label?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<DotsSpinnerProps>(), {\n    size: 'default',\n    color: 'default',\n    label: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedLabel = computed(() => props.label ?? t('spinner.loading'))\n\nconst sizeMap: Record<string, string> = {\n    sm: 'h-1.5 w-1.5',\n    default: 'h-2.5 w-2.5',\n    lg: 'h-3.5 w-3.5',\n    xl: 'h-5 w-5',\n}\n\nconst colorMap: Record<string, string> = {\n    default: 'bg-brutal-fg',\n    primary: 'bg-brutal-primary',\n    secondary: 'bg-brutal-secondary',\n    accent: 'bg-brutal-accent',\n}\n\nconst containerClasses = computed(() =>\n    cn(dotsSpinnerVariants({ size: props.size }), props.class)\n)\n\nconst dotClasses = computed(() =>\n    cn(sizeMap[props.size ?? 'default'], 'border-3 border-brutal', colorMap[props.color], 'animate-bounce')\n)\n</script>\n\n<template>\n    <div :class=\"containerClasses\" role=\"status\" :aria-label=\"resolvedLabel\">\n        <div\n            v-for=\"i in 3\"\n            :key=\"i\"\n            :class=\"dotClasses\"\n            :style=\"{ animationDelay: `${(i - 1) * 100}ms`, animationDuration: '500ms' }\"\n        />\n        <span class=\"sr-only\">{{ resolvedLabel }}</span>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/spinner/spinner-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const spinnerVariants = cva(\n    ['inline-block rounded-full', 'border-3 border-brutal', 'animate-spin'],\n    {\n        variants: {\n            size: {\n                sm: 'h-5 w-5',\n                default: 'h-8 w-8',\n                lg: 'h-12 w-12 border-[5px]',\n                xl: 'h-16 w-16 border-[6px]',\n            },\n            variant: {\n                default: 'border-t-transparent border-r-transparent',\n                primary: 'border-brutal-primary border-t-transparent border-r-transparent',\n                secondary: 'border-brutal-secondary border-t-transparent border-r-transparent',\n                accent: 'border-brutal-accent border-t-brutal-fg border-r-brutal-fg',\n            },\n        },\n        defaultVariants: {\n            size: 'default',\n            variant: 'default',\n        },\n    }\n)\n\nexport const blockSpinnerVariants = cva('grid grid-cols-2 gap-1', {\n    variants: {\n        size: {\n            sm: 'h-5 w-5 gap-0.5',\n            default: 'h-8 w-8 gap-1',\n            lg: 'h-12 w-12 gap-1.5',\n            xl: 'h-16 w-16 gap-2',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n})\n\nexport const barsSpinnerVariants = cva('flex items-end gap-0.5', {\n    variants: {\n        size: {\n            sm: 'h-4',\n            default: 'h-6',\n            lg: 'h-8',\n            xl: 'h-12',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n})\n\nexport const dotsSpinnerVariants = cva('flex items-center', {\n    variants: {\n        size: {\n            sm: 'gap-1',\n            default: 'gap-2',\n            lg: 'gap-3',\n            xl: 'gap-4',\n        },\n    },\n    defaultVariants: {\n        size: 'default',\n    },\n})\n",
       "type": "registry:ui"
     }
   ],
@@ -35,7 +55,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -65,7 +89,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -75,16 +102,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/stepper-section.json b/packages/registry/registry/stepper-section.json
new file mode 100644
index 0000000..0555c61
--- /dev/null
+++ b/packages/registry/registry/stepper-section.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stepper-section",
+  "type": "registry:ui",
+  "title": "Stepper Section",
+  "description": "A highly customizable neo-brutalist Stepper Section component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "stepper",
+    "button",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "components/ui/stepper-section/StepperSection.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Stepper from '@/components/ui/stepper/Stepper.vue'\nimport Button from '@/components/ui/button/Button.vue'\nimport Card from '@/components/ui/card/Card.vue'\n\nexport interface StepperStepItem {\n    title: string\n    description?: string\n}\n\ninterface StepperSectionProps {\n    title?: string\n    steps?: StepperStepItem[]\n    currentStep?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<StepperSectionProps>(), {\n    title: undefined,\n    steps: () => [],\n    currentStep: 0,\n    class: '',\n})\n\nconst emit = defineEmits<{\n    'step-click': [index: number]\n}>()\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('stepperSection.defaultTitle'))\nconst resolvedPrevious = computed(() => t('stepperSection.previous'))\nconst resolvedNext = computed(() => t('stepperSection.next'))\n\nconst stepperSteps = computed(() =>\n    props.steps.map((step, index) => ({\n        id: index,\n        title: step.title,\n        description: step.description,\n    }))\n)\n\nconst canGoPrevious = computed(() => props.currentStep > 0)\nconst canGoNext = computed(() => props.currentStep < props.steps.length - 1)\n\nconst rootClasses = computed(() => cn('w-full max-w-3xl mx-auto', props.class))\n\nfunction handleStepClick(index: number) {\n    emit('step-click', index)\n}\n\nfunction handlePrevious() {\n    if (canGoPrevious.value) {\n        emit('step-click', props.currentStep - 1)\n    }\n}\n\nfunction handleNext() {\n    if (canGoNext.value) {\n        emit('step-click', props.currentStep + 1)\n    }\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\">\n            <div class=\"text-center mb-8\">\n                <h2 class=\"text-3xl font-black tracking-tight\">\n                    {{ resolvedTitle }}\n                </h2>\n            </div>\n        </slot>\n\n        <slot>\n            <Stepper\n                :steps=\"stepperSteps\"\n                :model-value=\"currentStep\"\n                orientation=\"horizontal\"\n                @step-click=\"handleStepClick\"\n            />\n\n            <Card variant=\"default\" class=\"mt-6\">\n                <div class=\"p-6\">\n                    <slot name=\"default\" />\n                </div>\n            </Card>\n\n            <div class=\"flex items-center justify-between mt-6\">\n                <Button\n                    variant=\"outline\"\n                    :disabled=\"!canGoPrevious\"\n                    @click=\"handlePrevious\"\n                >\n                    <ChevronLeft class=\"h-4 w-4 mr-1\" />\n                    {{ resolvedPrevious }}\n                </Button>\n                <Button\n                    variant=\"primary\"\n                    :disabled=\"!canGoNext\"\n                    @click=\"handleNext\"\n                >\n                    {{ resolvedNext }}\n                    <ChevronRight class=\"h-4 w-4 ml-1\" />\n                </Button>\n            </div>\n        </slot>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/stepper.json b/packages/registry/registry/stepper.json
new file mode 100644
index 0000000..c601c95
--- /dev/null
+++ b/packages/registry/registry/stepper.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stepper",
+  "type": "registry:ui",
+  "title": "Stepper",
+  "description": "A highly customizable neo-brutalist Stepper component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/stepper/Stepper.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { Check } from 'lucide-vue-next';\nimport { cn } from '@/lib/utils';\nimport { stepperDotVariants, stepperConnectorVariants } from '@/components/ui/stepper/stepper-variants';\nimport { useLocale } from '@/composables/useLocale';\n\nexport interface StepperStep {\n    id: string | number;\n    title: string;\n    description?: string;\n}\n\nconst MIN_VERTICAL_CONNECTOR_HEIGHT = '2rem'\n\ninterface StepperProps {\n    steps: StepperStep[];\n    modelValue: number; // 0-indexed current step\n    orientation?: 'horizontal' | 'vertical';\n    class?: string;\n}\n\nconst props = withDefaults(defineProps<StepperProps>(), {\n    orientation: 'horizontal',\n});\n\nconst { t } = useLocale();\n\nconst emit = defineEmits<{\n    'update:modelValue': [step: number];\n    'step-click': [index: number];\n}>();\n\nfunction getState(index: number): 'completed' | 'active' | 'upcoming' {\n    if (index < props.modelValue) return 'completed';\n    if (index === props.modelValue) return 'active';\n    return 'upcoming';\n}\n\nfunction clickStep(index: number) {\n    emit('update:modelValue', index);\n    emit('step-click', index);\n}\n\nconst rootClass = computed(() =>\n    cn(\n        props.orientation === 'horizontal'\n            ? 'flex flex-row items-start w-full'\n            : 'flex flex-col gap-0',\n        props.class\n    )\n);\n\nconst stepWrapClasses = computed(() =>\n    cn(\n        props.orientation === 'horizontal'\n            ? 'flex flex-col items-center flex-1 min-w-0'\n            : 'flex flex-row items-start gap-3'\n    )\n)\n\nconst dotCompletedClasses = computed(() =>\n    cn(stepperDotVariants({ state: 'completed' }), 'cursor-pointer')\n)\n\nconst dotActiveClasses = computed(() =>\n    cn(stepperDotVariants({ state: 'active' }), 'cursor-pointer')\n)\n\nconst dotUpcomingClasses = computed(() =>\n    cn(stepperDotVariants({ state: 'upcoming' }), 'cursor-pointer')\n)\n\nconst connectorCompletedClasses = computed(() =>\n    cn(stepperConnectorVariants({ orientation: props.orientation, completed: true }))\n)\n\nconst connectorIncompleteClasses = computed(() =>\n    cn(stepperConnectorVariants({ orientation: props.orientation, completed: false }))\n)\n\nconst dotClassesMap = computed(() => {\n    const map = new Map<number, string>()\n    props.steps.forEach((_, index) => {\n        const state = getState(index)\n        if (state === 'completed') map.set(index, dotCompletedClasses.value)\n        else if (state === 'active') map.set(index, dotActiveClasses.value)\n        else map.set(index, dotUpcomingClasses.value)\n    })\n    return map\n})\n\nconst connectorClassesMap = computed(() => {\n    const map = new Map<number, string>()\n    props.steps.forEach((_, index) => {\n        const completed = index < props.modelValue\n        map.set(index, completed ? connectorCompletedClasses.value : connectorIncompleteClasses.value)\n    })\n    return map\n})\n</script>\n\n<template>\n    <div :class=\"rootClass\" role=\"list\" :aria-label=\"t('stepper.progressSteps')\">\n        <template v-for=\"(step, index) in steps\" :key=\"step.id\">\n            <!-- Step Item -->\n            <div\n                :class=\"stepWrapClasses\"\n                role=\"listitem\"\n                :aria-current=\"index === modelValue ? 'step' : undefined\"\n            >\n                <!-- Horizontal: dot row with connectors -->\n                <div\n                    v-if=\"orientation === 'horizontal'\"\n                    class=\"flex items-center w-full\"\n                >\n                    <!-- Left connector (not for first) -->\n                    <div\n                        v-if=\"index > 0\"\n                        :class=\"connectorClassesMap.get(index)\"\n                    />\n\n                    <!-- Dot -->\n                    <button\n                        :class=\"dotClassesMap.get(index)\"\n                        type=\"button\"\n                        :aria-label=\"t('stepper.step', { index: index + 1, title: step.title })\"\n                        @click=\"clickStep(index)\"\n                    >\n                        <Check v-if=\"getState(index) === 'completed'\" class=\"w-4 h-4\" />\n                        <span v-else>{{ index + 1 }}</span>\n                    </button>\n\n                    <!-- Right connector (not for last) -->\n                    <div\n                        v-if=\"index < steps.length - 1\"\n                        :class=\"connectorClassesMap.get(index)\"\n                    />\n                </div>\n\n                <!-- Horizontal: label below dot -->\n                <div\n                    v-if=\"orientation === 'horizontal'\"\n                    class=\"mt-2 text-center px-1\"\n                    :class=\"getState(index) === 'upcoming' ? 'opacity-50' : ''\"\n                >\n                    <p class=\"text-xs font-black tracking-wide truncate\">{{ step.title }}</p>\n                    <p v-if=\"step.description\" class=\"text-xs font-medium opacity-60 mt-0.5 truncate\">\n                        {{ step.description }}\n                    </p>\n                </div>\n\n                <!-- Vertical layout -->\n                <template v-if=\"orientation === 'vertical'\">\n                    <div class=\"flex flex-col items-center\">\n                        <!-- Dot -->\n                        <button\n                            :class=\"dotClassesMap.get(index)\"\n                            type=\"button\"\n                            :aria-label=\"t('stepper.step', { index: index + 1, title: step.title })\"\n                            @click=\"clickStep(index)\"\n                        >\n                            <Check v-if=\"getState(index) === 'completed'\" class=\"w-4 h-4\" />\n                            <span v-else>{{ index + 1 }}</span>\n                        </button>\n                        <!-- Vertical connector below dot -->\n                        <div\n                            v-if=\"index < steps.length - 1\"\n                            :class=\"connectorClassesMap.get(index)\"\n                            :style=\"{ minHeight: MIN_VERTICAL_CONNECTOR_HEIGHT }\"\n                        />\n                    </div>\n\n                    <!-- Label right of dot -->\n                    <div\n                        class=\"pb-6 min-w-0 flex-1\"\n                        :class=\"getState(index) === 'upcoming' ? 'opacity-50' : ''\"\n                    >\n                        <p class=\"text-sm font-black tracking-wide\">{{ step.title }}</p>\n                        <p v-if=\"step.description\" class=\"text-xs font-medium opacity-60 mt-0.5\">\n                            {{ step.description }}\n                        </p>\n                        <!-- Content slot for active vertical step -->\n                        <div v-if=\"index === modelValue\" class=\"mt-3\">\n                            <slot :name=\"`step-${step.id}`\" />\n                        </div>\n                    </div>\n                </template>\n            </div>\n        </template>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/stepper/stepper-variants.ts",
+      "content": "import { cva } from 'class-variance-authority';\n\nexport const stepperItemVariants = cva(\n    [\n        'flex items-center gap-3 relative',\n    ].join(' ')\n);\n\nexport const stepperDotVariants = cva(\n    [\n        'flex-shrink-0 flex items-center justify-center',\n        'border-3 border-brutal rounded-brutal font-black text-sm',\n        'transition-all duration-200',\n        'z-10 relative',\n    ].join(' '),\n    {\n        variants: {\n            state: {\n                completed: 'bg-brutal-success text-brutal-fg shadow-brutal w-8 h-8',\n                active: 'bg-brutal-primary text-brutal-fg shadow-brutal-lg w-8 h-8 -translate-x-0.5 -translate-y-0.5',\n                upcoming: 'bg-brutal-bg text-brutal-fg shadow-brutal-sm w-8 h-8 opacity-60',\n            },\n        },\n        defaultVariants: {\n            state: 'upcoming',\n        },\n    }\n);\n\nexport const stepperConnectorVariants = cva(\n    [\n        'transition-all duration-300',\n    ].join(' '),\n    {\n        variants: {\n            orientation: {\n                horizontal: 'flex-1 h-[3px] mx-2',\n                vertical: 'w-[3px] flex-1 my-2 ml-[14px]',\n            },\n            completed: {\n                true: 'bg-brutal-success',\n                false: 'bg-brutal-fg opacity-20',\n            },\n        },\n        defaultVariants: {\n            orientation: 'horizontal',\n            completed: false,\n        },\n    }\n);\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/submit-button.json b/packages/registry/registry/submit-button.json
index e51f2b7..8e8cbd6 100644
--- a/packages/registry/registry/submit-button.json
+++ b/packages/registry/registry/submit-button.json
@@ -3,15 +3,17 @@
   "name": "submit-button",
   "type": "registry:ui",
   "title": "Submit Button",
-  "description": "A highly customizable neo-brutalist Submit Button component built with Brutx design tokens.",
-  "dependencies": [],
+  "description": "A highly customizable neo-brutalist Submit Button component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
   "registryDependencies": [
     "button"
   ],
   "files": [
     {
-      "path": "components/ui/submit-button.tsx",
-      "content": "'use client';\n\nimport { useFormStatus } from 'react-dom';\nimport { Button, type ButtonProps } from '@/components/ui/button';\n\nexport interface SubmitButtonProps extends ButtonProps {\n    pendingText?: string;\n}\n\n/**\n * Renders a submit button that follows React form pending state.\n *\n * @param props - Submit button props.\n * @returns Submit button with pending state.\n */\nfunction SubmitButton({ children, pendingText, disabled, ...props }: SubmitButtonProps) {\n    const { pending } = useFormStatus();\n\n    return (\n        <Button type=\"submit\" disabled={disabled || pending} loading={pending} {...props}>\n            {pending && pendingText ? pendingText : children}\n        </Button>\n    );\n}\n\nSubmitButton.displayName = 'SubmitButton';\n\nexport { SubmitButton };\n",
+      "path": "components/ui/submit-button/SubmitButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Loader2 } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport { buttonVariants } from '@/components/ui/button/button-variants'\nimport { type VariantProps } from 'class-variance-authority'\n\ntype ButtonVariantProps = VariantProps<typeof buttonVariants>\n\ninterface SubmitButtonProps {\n    variant?: NonNullable<ButtonVariantProps['variant']>\n    size?: NonNullable<ButtonVariantProps['size']>\n    pendingText?: string\n    loading?: boolean\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SubmitButtonProps>(), {\n    variant: 'default',\n    size: 'default',\n    pendingText: undefined,\n    loading: false,\n    disabled: false,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedPendingText = computed(() => props.pendingText ?? t('submitButton.submitting'))\n\nconst isDisabled = computed(() => props.disabled || props.loading)\n\nconst classes = computed(() =>\n    cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)\n)\n</script>\n\n<template>\n    <button type=\"submit\" :class=\"classes\" :disabled=\"isDisabled\">\n        <Loader2 v-if=\"loading\" class=\"h-4 w-4 animate-spin\" />\n        <template v-if=\"loading && resolvedPendingText\">\n{{ resolvedPendingText }}\n</template>\n        <slot v-else />\n    </button>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +39,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +73,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +86,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/success-card.json b/packages/registry/registry/success-card.json
new file mode 100644
index 0000000..3f763f1
--- /dev/null
+++ b/packages/registry/registry/success-card.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "success-card",
+  "type": "registry:ui",
+  "title": "Success Card",
+  "description": "A highly customizable neo-brutalist Success Card component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "button"
+  ],
+  "files": [
+    {
+      "path": "components/ui/success-card/SuccessCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport Button from '@/components/ui/button/Button.vue'\n\ninterface SuccessCardProps {\n    title?: string\n    description?: string\n    confirmText?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<SuccessCardProps>(), {\n    title: undefined,\n    description: undefined,\n    confirmText: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    confirm: []\n}>()\n\nconst rootClasses = computed(() => cn('w-full max-w-md', props.class))\n\nconst resolvedTitle = computed(() => props.title ?? t('successCard.defaultTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('successCard.defaultDescription'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('successCard.defaultConfirmText'))\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <div class=\"h-2 bg-brutal-success border-b-3 border-brutal\" />\n        <CardContent class=\"pt-6\">\n            <div class=\"flex flex-col items-center text-center\">\n                <div class=\"relative mb-4\">\n                    <div class=\"absolute inset-0 bg-brutal-muted border-3 border-brutal translate-x-2 translate-y-2\" />\n                    <div class=\"relative h-16 w-16 flex items-center justify-center bg-brutal-success border-3 border-brutal shadow-brutal\">\n                        <Check class=\"h-8 w-8 stroke-[3]\" />\n                    </div>\n                </div>\n                <h3 class=\"text-xl font-black tracking-tight\">\n{{ resolvedTitle }}\n</h3>\n                <p v-if=\"resolvedDescription\" class=\"mt-2 text-sm text-brutal-muted-foreground font-medium\">\n{{ resolvedDescription }}\n</p>\n                <Button variant=\"primary\" class=\"mt-6\" @click=\"emit('confirm')\">\n                    {{ resolvedConfirmText }}\n                </Button>\n                <slot name=\"actions\" />\n            </div>\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/switch.json b/packages/registry/registry/switch.json
index 5e6e64a..c3fd926 100644
--- a/packages/registry/registry/switch.json
+++ b/packages/registry/registry/switch.json
@@ -3,15 +3,15 @@
   "name": "switch",
   "type": "registry:ui",
   "title": "Switch",
-  "description": "A highly customizable neo-brutalist Switch component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Switch component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-switch"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/switch.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\nimport { cn } from '@/lib/utils';\n\nconst Switch = React.forwardRef<\n    React.ElementRef<typeof SwitchPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>\n>(({ className, ...props }, ref) => (\n    <SwitchPrimitive.Root\n        className={cn(\n            'peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center',\n            'border-3 border-brutal',\n            'transition-colors duration-150',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            'data-[state=checked]:bg-[#7FB069] data-[state=unchecked]:bg-white dark:data-[state=unchecked]:bg-gray-900',\n            className\n        )}\n        {...props}\n        ref={ref}\n    >\n        <SwitchPrimitive.Thumb\n            className={cn(\n                'pointer-events-none block h-5 w-5',\n                'bg-black dark:bg-white',\n                'shadow-brutal-sm',\n                'transition-transform duration-150',\n                'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5'\n            )}\n        />\n    </SwitchPrimitive.Root>\n));\nSwitch.displayName = SwitchPrimitive.Root.displayName;\n\nexport { Switch };\n",
+      "path": "components/ui/switch/Switch.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { SwitchRoot, SwitchThumb } from 'reka-ui'\n\ninterface SwitchProps {\n    class?: string\n    modelValue?: boolean\n    defaultValue?: boolean\n    disabled?: boolean\n}\n\nconst props = defineProps<SwitchProps>()\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean]\n}>()\n\nconst classes = computed(() =>\n    cn(\n        'peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center',\n        'border-3 border-brutal',\n        'transition-colors duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'data-[state=checked]:bg-brutal-success data-[state=unchecked]:bg-brutal-bg',\n        props.class\n    )\n)\n\nconst thumbClasses = computed(() =>\n    cn(\n        'pointer-events-none block h-5 w-5 bg-brutal-fg shadow-brutal-sm transition-transform duration-150',\n        'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5'\n    )\n)\n</script>\n\n<template>\n    <SwitchRoot\n        :class=\"classes\"\n        :checked=\"modelValue\"\n        :default-checked=\"defaultValue\"\n        :disabled=\"disabled\"\n        @update:checked=\"emit('update:modelValue', $event)\"\n    >\n        <SwitchThumb :class=\"thumbClasses\" />\n    </SwitchRoot>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +37,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +71,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +84,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/table.json b/packages/registry/registry/table.json
index 2735fe3..fb70f94 100644
--- a/packages/registry/registry/table.json
+++ b/packages/registry/registry/table.json
@@ -3,13 +3,48 @@
   "name": "table",
   "type": "registry:ui",
   "title": "Table",
-  "description": "A highly customizable neo-brutalist Table component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Table component built with Brutx design tokens for Vue 3.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/table.tsx",
-      "content": "import * as React from 'react';\nimport { cn } from '@/lib/utils';\n\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n    ({ className, ...props }, ref) => (\n        <div className=\"relative w-full overflow-auto\">\n            <table\n                ref={ref}\n                className={cn(\n                    'w-full caption-bottom text-sm',\n                    'border-3 border-brutal',\n                    className\n                )}\n                {...props}\n            />\n        </div>\n    )\n);\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n    HTMLTableSectionElement,\n    React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n    <thead\n        ref={ref}\n        className={cn(\n            'bg-[#FFE66D] dark:bg-gray-800 text-black dark:text-white',\n            '[&_tr]:border-b-3 [&_tr]:border-brutal',\n            className\n        )}\n        {...props}\n    />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n    HTMLTableSectionElement,\n    React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n    <tbody\n        ref={ref}\n        className={cn(\n            '[&_tr:last-child]:border-0',\n            '[&_tr:nth-child(even)]:bg-gray-50 dark:[&_tr:nth-child(even)]:bg-gray-800',\n            'dark:text-white',\n            className\n        )}\n        {...props}\n    />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n    HTMLTableSectionElement,\n    React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n    <tfoot\n        ref={ref}\n        className={cn(\n            'border-t-3 border-brutal',\n            'bg-[#4ECDC4] dark:bg-gray-700',\n            'font-bold dark:text-white',\n            '[&>tr]:last:border-b-0',\n            className\n        )}\n        {...props}\n    />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n    ({ className, ...props }, ref) => (\n        <tr\n            ref={ref}\n            className={cn(\n                'border-b-3 border-brutal transition-colors',\n                'hover:bg-[#FFE66D]/30',\n                'data-[state=selected]:bg-[#FFE66D]',\n                className\n            )}\n            {...props}\n        />\n    )\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = React.forwardRef<\n    HTMLTableCellElement,\n    React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n    <th\n        ref={ref}\n        className={cn(\n            'h-12 px-4 text-left align-middle font-black tracking-wide text-black',\n            '[&:_has([role=checkbox])]:pr-0',\n            'border-r-3 border-[var(--brutal-border-color,#000)] last:border-r-0',\n            className\n        )}\n        {...props}\n    />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n    HTMLTableCellElement,\n    React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n    <td\n        ref={ref}\n        className={cn(\n            'p-4 align-middle font-medium',\n            '[&:_has([role=checkbox])]:pr-0',\n            'border-r-3 border-brutal last:border-r-0',\n            className\n        )}\n        {...props}\n    />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n    HTMLTableCaptionElement,\n    React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n    <caption\n        ref={ref}\n        className={cn('mt-4 text-sm font-bold text-gray-600 dark:text-gray-400', className)}\n        {...props}\n    />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n",
+      "path": "components/ui/table/Table.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableProps {\n    class?: string\n}\n\nconst props = defineProps<TableProps>()\n\nconst classes = computed(() =>\n    cn('w-full caption-bottom text-sm', 'border-3 border-brutal', props.class)\n)\n</script>\n\n<template>\n    <div class=\"relative w-full overflow-x-auto\">\n        <table :class=\"classes\">\n            <slot />\n        </table>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/table/TableBody.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableBodyProps {\n    class?: string\n}\n\nconst props = defineProps<TableBodyProps>()\n\nconst classes = computed(() =>\n    cn(\n        '[&_tr:last-child]:border-0',\n        '[&_tr:nth-child(even)]:bg-brutal-muted',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <tbody :class=\"classes\">\n        <slot />\n    </tbody>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/table/TableCaption.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableCaptionProps {\n    class?: string\n}\n\nconst props = defineProps<TableCaptionProps>()\n\nconst classes = computed(() =>\n    cn('mt-4 text-sm font-bold text-brutal-muted-foreground', props.class)\n)\n</script>\n\n<template>\n    <caption :class=\"classes\">\n        <slot />\n    </caption>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/table/TableCell.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableCellProps {\n    class?: string\n}\n\nconst props = defineProps<TableCellProps>()\n\nconst classes = computed(() =>\n    cn(\n        'p-4 align-middle font-medium',\n        '[&:has([role=checkbox])]:pr-0',\n        'border-r-3 border-brutal last:border-r-0',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <td :class=\"classes\">\n        <slot />\n    </td>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/table/TableFooter.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableFooterProps {\n    class?: string\n}\n\nconst props = defineProps<TableFooterProps>()\n\nconst classes = computed(() =>\n    cn('border-t-3 border-brutal bg-brutal-secondary font-bold [&>tr]:last:border-b-0', props.class)\n)\n</script>\n\n<template>\n    <tfoot :class=\"classes\">\n        <slot />\n    </tfoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/table/TableHead.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableHeadProps {\n    class?: string\n}\n\nconst props = defineProps<TableHeadProps>()\n\nconst classes = computed(() =>\n    cn(\n        'h-12 px-4 text-left align-middle font-black tracking-wide text-brutal-fg bg-brutal-accent',\n        '[&:has([role=checkbox])]:pr-0',\n        'border-r-3 border-brutal last:border-r-0',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <th :class=\"classes\">\n        <slot />\n    </th>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/table/TableHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableHeaderProps {\n    class?: string\n}\n\nconst props = defineProps<TableHeaderProps>()\n\nconst classes = computed(() =>\n    cn('bg-brutal-accent text-brutal-fg [&_tr]:border-b-3 [&_tr]:border-brutal', props.class)\n)\n</script>\n\n<template>\n    <thead :class=\"classes\">\n        <slot />\n    </thead>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/table/TableRow.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TableRowProps {\n    class?: string\n}\n\nconst props = defineProps<TableRowProps>()\n\nconst classes = computed(() =>\n    cn(\n        'border-b-3 border-brutal transition-colors',\n        'hover:bg-brutal-accent/30',\n        'data-[state=selected]:bg-brutal-accent',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <tr :class=\"classes\">\n        <slot />\n    </tr>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -35,7 +70,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -65,7 +104,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -75,16 +117,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/tabs-nav.json b/packages/registry/registry/tabs-nav.json
new file mode 100644
index 0000000..f87a041
--- /dev/null
+++ b/packages/registry/registry/tabs-nav.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs-nav",
+  "type": "registry:ui",
+  "title": "Tabs Nav",
+  "description": "A highly customizable neo-brutalist Tabs Nav component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "tabs",
+    "card"
+  ],
+  "files": [
+    {
+      "path": "components/ui/tabs-nav/TabsNav.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { TabsRoot } from 'reka-ui'\nimport { cn } from '@/lib/utils'\nimport TabsList from '@/components/ui/tabs/TabsList.vue'\nimport TabsTrigger from '@/components/ui/tabs/TabsTrigger.vue'\nimport TabsContent from '@/components/ui/tabs/TabsContent.vue'\nimport Card from '@/components/ui/card/Card.vue'\n\nexport interface TabItem {\n    label: string\n    value: string\n}\n\ninterface TabsNavProps {\n    tabs?: TabItem[]\n    defaultValue?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TabsNavProps>(), {\n    tabs: () => [],\n    defaultValue: undefined,\n    class: '',\n})\n\nconst rootClasses = computed(() => cn('w-full max-w-4xl mx-auto', props.class))\n\nconst activeDefaultValue = computed(() => {\n    if (props.defaultValue) return props.defaultValue\n    if (props.tabs.length > 0) return props.tabs[0].value\n    return ''\n})\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <slot name=\"header\" />\n\n        <TabsRoot :default-value=\"activeDefaultValue\" class=\"w-full\">\n            <TabsList class=\"w-full flex\">\n                <TabsTrigger\n                    v-for=\"tab in tabs\"\n                    :key=\"tab.value\"\n                    :value=\"tab.value\"\n                    class=\"flex-1\"\n                >\n                    {{ tab.label }}\n                </TabsTrigger>\n            </TabsList>\n\n            <slot>\n                <TabsContent\n                    v-for=\"tab in tabs\"\n                    :key=\"tab.value\"\n                    :value=\"tab.value\"\n                >\n                    <Card variant=\"flat\">\n                        <p class=\"text-brutal-muted-foreground font-medium\">{{ tab.label }}</p>\n                    </Card>\n                </TabsContent>\n            </slot>\n        </TabsRoot>\n\n        <slot name=\"footer\" />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/tabs.json b/packages/registry/registry/tabs.json
index 769df85..497ba1a 100644
--- a/packages/registry/registry/tabs.json
+++ b/packages/registry/registry/tabs.json
@@ -3,15 +3,25 @@
   "name": "tabs",
   "type": "registry:ui",
   "title": "Tabs",
-  "description": "A highly customizable neo-brutalist Tabs component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Tabs component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-tabs"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/tabs.tsx",
-      "content": "import * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cn } from '@/lib/utils';\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n    React.ElementRef<typeof TabsPrimitive.List>,\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n    <TabsPrimitive.List\n        ref={ref}\n        className={cn(\n            'inline-flex h-12 items-center justify-center p-1 gap-1',\n            'bg-white dark:bg-gray-900 border-3 border-brutal',\n            className\n        )}\n        {...props}\n    />\n));\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = React.forwardRef<\n    React.ElementRef<typeof TabsPrimitive.Trigger>,\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n    <TabsPrimitive.Trigger\n        ref={ref}\n        className={cn(\n            'inline-flex items-center justify-center whitespace-nowrap px-4 py-2',\n            'font-bold text-sm tracking-wide dark:text-white',\n            'border-3 border-transparent',\n            'transition-all duration-150',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',\n            'disabled:pointer-events-none disabled:opacity-50',\n            'data-[state=active]:bg-[#FFE66D] data-[state=active]:text-black data-[state=active]:border-brutal data-[state=active]:shadow-brutal-sm',\n            'data-[state=inactive]:hover:bg-gray-100 dark:data-[state=inactive]:hover:bg-gray-800',\n            className\n        )}\n        {...props}\n    />\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n    React.ElementRef<typeof TabsPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n    <TabsPrimitive.Content\n        ref={ref}\n        className={cn(\n            'mt-3 p-4',\n            'bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal dark:text-white',\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',\n            className\n        )}\n        {...props}\n    />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n",
+      "path": "components/ui/tabs/TabsContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { TabsContent as TabsContentPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface TabsContentProps {\n    value: string\n    class?: string\n}\n\nconst props = defineProps<TabsContentProps>()\n\nconst classes = computed(() =>\n    cn(\n        'mt-3 p-4',\n        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <TabsContentPrimitive :value=\"value\" :class=\"classes\">\n        <slot />\n    </TabsContentPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tabs/TabsList.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { TabsList as TabsListPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface TabsListProps {\n    class?: string\n}\n\nconst props = defineProps<TabsListProps>()\n\nconst classes = computed(() =>\n    cn(\n        'inline-flex h-12 items-center justify-center p-1 gap-1',\n        'bg-brutal-bg border-3 border-brutal shadow-brutal',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <TabsListPrimitive :class=\"classes\">\n        <slot />\n    </TabsListPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tabs/TabsTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { TabsTrigger as TabsTriggerPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface TabsTriggerProps {\n    value: string\n    disabled?: boolean\n    class?: string\n}\n\nconst props = defineProps<TabsTriggerProps>()\n\nconst classes = computed(() =>\n    cn(\n        'inline-flex items-center justify-center whitespace-nowrap px-4 py-2',\n        'font-bold text-sm tracking-wide',\n        'border-3 border-transparent',\n        'transition-all duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'data-[state=active]:bg-brutal-accent data-[state=active]:text-brutal-fg data-[state=active]:border-brutal data-[state=active]:shadow-brutal-sm',\n        'data-[state=inactive]:hover:bg-brutal-muted',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <TabsTriggerPrimitive :value=\"value\" :disabled=\"disabled\" :class=\"classes\">\n        <slot />\n    </TabsTriggerPrimitive>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +47,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +81,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +94,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/tags-input.json b/packages/registry/registry/tags-input.json
new file mode 100644
index 0000000..8d6e6c9
--- /dev/null
+++ b/packages/registry/registry/tags-input.json
@@ -0,0 +1,128 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tags-input",
+  "type": "registry:ui",
+  "title": "Tags Input",
+  "description": "A highly customizable neo-brutalist Tags Input component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/tags-input/TagsInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputRoot, type TagsInputRootProps, type TagsInputRootEmits, useForwardPropsEmits } from 'reka-ui'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputRootProps & { class?: string }>()\nconst emits = defineEmits<TagsInputRootEmits>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, ...delegated } = props\n    return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst classes = computed(() =>\n    cn(\n        'flex flex-wrap gap-2 items-center p-2 min-h-11 border-3 border-brutal bg-brutal-bg rounded-brutal shadow-brutal focus-within:ring-2 focus-within:ring-brutal-ring focus-within:ring-offset-2 transition-all duration-150',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <TagsInputRoot v-bind=\"forwarded\" :class=\"classes\">\n        <slot />\n    </TagsInputRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tags-input/TagsInputInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputInput, type TagsInputInputProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputInputProps & { class?: string }>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, ...delegated } = props\n    return delegated\n})\n\nconst classes = computed(() =>\n    cn(\n        'flex-1 bg-transparent px-2 text-sm font-bold placeholder:text-brutal-placeholder placeholder:font-normal focus:outline-none disabled:cursor-not-allowed',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <TagsInputInput v-bind=\"delegatedProps\" :class=\"classes\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tags-input/TagsInputItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputItem, type TagsInputItemProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { tagsInputItemVariants } from '@/components/ui/tags-input/tags-input-variants'\n\ntype TagsInputItemVariantProps = VariantProps<typeof tagsInputItemVariants>\n\ninterface Props extends TagsInputItemProps {\n    variant?: NonNullable<TagsInputItemVariantProps['variant']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    variant: 'primary',\n    class: '',\n})\n\nconst delegatedProps = computed(() => {\n    const { class: _, variant: __, ...delegated } = props\n    return delegated\n})\n\nconst classes = computed(() =>\n    cn(tagsInputItemVariants({ variant: props.variant }), props.class)\n)\n</script>\n\n<template>\n    <TagsInputItem v-bind=\"delegatedProps\" :class=\"classes\">\n        <slot />\n    </TagsInputItem>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tags-input/TagsInputItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputItemText, type TagsInputItemTextProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemTextProps & { class?: string }>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, ...delegated } = props\n    return delegated\n})\n\nconst classes = computed(() =>\n    cn('text-xs font-black uppercase tracking-wide', props.class)\n)\n</script>\n\n<template>\n    <TagsInputItemText v-bind=\"delegatedProps\" :class=\"classes\">\n        <slot />\n    </TagsInputItemText>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tags-input/TagsInputItemDelete.vue",
+      "content": "<script setup lang=\"ts\">\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps } from 'reka-ui'\nimport { computed } from 'vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<TagsInputItemDeleteProps & { class?: string }>()\n\nconst delegatedProps = computed(() => {\n    const { class: _, ...delegated } = props\n    return delegated\n})\n\nconst classes = computed(() =>\n    cn(\n        'h-4 w-4 flex items-center justify-center border-3 border-brutal bg-brutal-bg text-brutal-fg shadow-brutal-sm transition-all hover:bg-brutal-destructive hover:text-brutal-fg rounded-brutal active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <TagsInputItemDelete v-bind=\"delegatedProps\" :class=\"classes\">\n        <slot>\n            <X class=\"h-3.5 w-3.5 stroke-[3]\" />\n        </slot>\n    </TagsInputItemDelete>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tags-input/tags-input-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const tagsInputItemVariants = cva(\n    [\n        'flex items-center gap-1.5 px-2.5 py-1',\n        'border-3 border-brutal font-black text-sm rounded-brutal shadow-brutal-sm transition-all',\n        'data-[state=active]:ring-2 data-[state=active]:ring-brutal-ring data-[state=active]:ring-offset-1',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'bg-brutal-bg text-brutal-fg',\n                primary: 'bg-brutal-primary text-brutal-fg',\n                secondary: 'bg-brutal-secondary text-brutal-fg',\n                accent: 'bg-brutal-accent text-brutal-fg',\n                danger: 'bg-brutal-destructive text-brutal-fg',\n                success: 'bg-brutal-success text-brutal-fg',\n            },\n        },\n        defaultVariants: {\n            variant: 'primary',\n        },\n    }\n)\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/testimonial-card.json b/packages/registry/registry/testimonial-card.json
new file mode 100644
index 0000000..971512c
--- /dev/null
+++ b/packages/registry/registry/testimonial-card.json
@@ -0,0 +1,106 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "testimonial-card",
+  "type": "registry:ui",
+  "title": "Testimonial Card",
+  "description": "A highly customizable neo-brutalist Testimonial Card component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "avatar",
+    "badge"
+  ],
+  "files": [
+    {
+      "path": "components/ui/testimonial-card/TestimonialCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Quote } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport Avatar from '@/components/ui/avatar/Avatar.vue'\nimport AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'\nimport Badge from '@/components/ui/badge/Badge.vue'\n\ninterface TestimonialCardProps {\n    quote?: string\n    author?: string\n    role?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TestimonialCardProps>(), {\n    quote: undefined,\n    author: undefined,\n    role: undefined,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst rootClasses = computed(() => cn('w-full max-w-lg', props.class))\n\nconst resolvedQuote = computed(() => props.quote ?? t('testimonialCard.defaultQuote'))\nconst resolvedAuthor = computed(() => props.author ?? t('testimonialCard.defaultAuthor'))\nconst resolvedRole = computed(() => props.role ?? t('testimonialCard.defaultRole'))\n\nconst resolvedVerified = computed(() => t('testimonialCard.verified'))\n\nconst initials = computed(() => {\n    return resolvedAuthor.value\n        .split(' ')\n        .map(w => w[0])\n        .join('')\n        .slice(0, 2)\n        .toUpperCase()\n})\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <CardContent>\n            <div class=\"flex items-start gap-4\">\n                <div class=\"shrink-0\">\n                    <Avatar size=\"lg\" shape=\"square\">\n                        <AvatarFallback>{{ initials }}</AvatarFallback>\n                    </Avatar>\n                </div>\n                <div class=\"flex-1 min-w-0\">\n                    <Quote class=\"h-8 w-8 stroke-[2.5] text-brutal-primary mb-2\" />\n                    <p class=\"text-base font-bold leading-relaxed\">\n{{ resolvedQuote }}\n</p>\n                    <div class=\"mt-4 flex items-center gap-3\">\n                        <div>\n                            <p class=\"font-black text-sm\">\n{{ resolvedAuthor }}\n</p>\n                            <p class=\"text-xs text-brutal-muted-foreground font-medium\">\n{{ resolvedRole }}\n</p>\n                        </div>\n                        <Badge variant=\"secondary\" size=\"sm\">\n                            {{ resolvedVerified }}\n                        </Badge>\n                    </div>\n                </div>\n            </div>\n            <slot name=\"actions\" />\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/textarea.json b/packages/registry/registry/textarea.json
index 6c0e489..50a2905 100644
--- a/packages/registry/registry/textarea.json
+++ b/packages/registry/registry/textarea.json
@@ -3,13 +3,18 @@
   "name": "textarea",
   "type": "registry:ui",
   "title": "Textarea",
-  "description": "A highly customizable neo-brutalist Textarea component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Textarea component built with Brutx design tokens for Vue 3.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/textarea.tsx",
-      "content": "import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\n\nconst textareaVariants = cva(\n    [\n        'flex min-h-[100px] w-full',\n        'border-3 border-brutal rounded-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'font-medium',\n        'placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:font-normal',\n        'transition-all duration-150',\n        'focus:outline-none focus:shadow-brutal',\n        'focus-visible:ring-2 focus-visible:ring-[var(--brutal-ring,#000)] focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',\n        'resize-none',\n    ],\n    {\n        variants: {\n            variant: {\n                default: '',\n                error: 'border-[#EF476F] focus:shadow-[4px_4px_0px_0px_#EF476F]',\n                success: 'border-[#7FB069] focus:shadow-[4px_4px_0px_0px_#7FB069]',\n            },\n            size: {\n                sm: 'px-3 py-2 text-sm',\n                default: 'px-4 py-3 text-base',\n                lg: 'px-5 py-4 text-lg',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface TextareaProps\n    extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n        VariantProps<typeof textareaVariants> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n    ({ className, variant, size, ...props }, ref) => {\n        return (\n            <textarea\n                className={cn(textareaVariants({ variant, size, className }))}\n                ref={ref}\n                {...props}\n            />\n        );\n    }\n);\nTextarea.displayName = 'Textarea';\n\nexport { Textarea, textareaVariants };\n",
+      "path": "components/ui/textarea/Textarea.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { textareaVariants } from '@/components/ui/textarea/textarea-variants'\n\ntype TextareaVariantProps = VariantProps<typeof textareaVariants>\n\ninterface TextareaProps {\n    modelValue?: string\n    variant?: NonNullable<TextareaVariantProps['variant']>\n    textareaSize?: NonNullable<TextareaVariantProps['textareaSize']>\n    disabled?: boolean\n    placeholder?: string\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    modelValue: undefined,\n    variant: 'default',\n    textareaSize: 'default',\n    disabled: false,\n    placeholder: '',\n    class: '',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string] }>()\n\nconst classes = computed(() =>\n    cn(textareaVariants({ variant: props.variant, textareaSize: props.textareaSize }), props.class)\n)\n</script>\n\n<template>\n    <textarea\n        :value=\"modelValue\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :class=\"classes\"\n        @input=\"emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)\"\n    />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/textarea/textarea-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const textareaVariants = cva(\n    [\n        'flex min-h-[100px] w-full',\n        'border-3 border-brutal',\n        'bg-brutal-bg text-brutal-fg',\n        'font-medium',\n        'placeholder:text-brutal-placeholder placeholder:font-normal',\n        'transition-all duration-150',\n        'focus:outline-none focus:shadow-brutal',\n        'focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',\n        'resize-none',\n    ],\n    {\n        variants: {\n            variant: {\n                default: '',\n                error: 'border-brutal-destructive focus:shadow-brutal-primary',\n                success: 'border-brutal-success focus:shadow-brutal-secondary',\n            },\n            textareaSize: {\n                sm: 'px-3 py-2 text-sm',\n                default: 'px-4 py-3 text-base',\n                lg: 'px-5 py-4 text-lg',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            textareaSize: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -35,7 +40,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -65,7 +74,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -75,16 +87,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/timeline.json b/packages/registry/registry/timeline.json
new file mode 100644
index 0000000..3b84390
--- /dev/null
+++ b/packages/registry/registry/timeline.json
@@ -0,0 +1,133 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "timeline",
+  "type": "registry:ui",
+  "title": "Timeline",
+  "description": "A highly customizable neo-brutalist Timeline component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/timeline/Timeline.vue",
+      "content": "<script setup lang=\"ts\">\nimport { provide, computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TimelineProps {\n    orientation?: 'vertical' | 'horizontal'\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TimelineProps>(), {\n    orientation: 'vertical',\n    class: '',\n})\n\nprovide('timeline-orientation', computed(() => props.orientation))\n\nconst classes = computed(() =>\n    cn(\n        'flex w-full',\n        props.orientation === 'vertical' ? 'flex-col gap-6' : 'flex-row gap-6 items-start overflow-x-auto',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/timeline/TimelineItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { inject, computed, type ComputedRef } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TimelineItemProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TimelineItemProps>(), {\n    class: '',\n})\n\nconst orientation = inject<ComputedRef<'vertical' | 'horizontal'>>('timeline-orientation', computed(() => 'vertical'))\n\nconst classes = computed(() =>\n    cn(\n        'relative flex',\n        orientation.value === 'vertical' ? 'flex-row gap-4 items-stretch' : 'flex-col gap-4 items-center min-w-48 flex-1',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/timeline/TimelineSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { inject, computed, type ComputedRef } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TimelineSeparatorProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TimelineSeparatorProps>(), {\n    class: '',\n})\n\nconst orientation = inject<ComputedRef<'vertical' | 'horizontal'>>('timeline-orientation', computed(() => 'vertical'))\n\nconst classes = computed(() =>\n    cn(\n        'flex items-center shrink-0',\n        orientation.value === 'vertical' ? 'flex-col' : 'flex-row w-full',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/timeline/TimelineDot.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { timelineDotVariants } from '@/components/ui/timeline/timeline-variants'\n\ntype TimelineDotVariantProps = VariantProps<typeof timelineDotVariants>\n\ninterface Props {\n    variant?: NonNullable<TimelineDotVariantProps['variant']>\n    shape?: NonNullable<TimelineDotVariantProps['shape']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    variant: 'accent',\n    shape: 'circle',\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(timelineDotVariants({ variant: props.variant, shape: props.shape }), props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <span class=\"inline-flex items-center justify-center font-black\">\n            <slot />\n        </span>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/timeline/TimelineConnector.vue",
+      "content": "<script setup lang=\"ts\">\nimport { inject, computed, type ComputedRef } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TimelineConnectorProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TimelineConnectorProps>(), {\n    class: '',\n})\n\nconst orientation = inject<ComputedRef<'vertical' | 'horizontal'>>('timeline-orientation', computed(() => 'vertical'))\n\nconst classes = computed(() =>\n    cn(\n        'bg-brutal-fg transition-all shrink-0',\n        orientation.value === 'vertical' ? 'w-[3px] flex-1 min-h-8' : 'h-[3px] flex-1 min-w-8',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\" />\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/timeline/TimelineContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\n\ninterface TimelineContentProps {\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TimelineContentProps>(), {\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn('flex-1 pb-4 text-sm font-bold text-brutal-fg', props.class)\n)\n</script>\n\n<template>\n    <div :class=\"classes\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/timeline/timeline-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const timelineDotVariants = cva(\n    [\n        'flex items-center justify-center border-3 border-brutal transition-all duration-150 shrink-0 z-10 font-black text-xs',\n    ],\n    {\n        variants: {\n            variant: {\n                default: 'bg-brutal-bg text-brutal-fg shadow-brutal-sm',\n                primary: 'bg-brutal-primary text-brutal-fg shadow-brutal-sm',\n                secondary: 'bg-brutal-secondary text-brutal-fg shadow-brutal-sm',\n                accent: 'bg-brutal-accent text-brutal-fg shadow-brutal-sm',\n                success: 'bg-brutal-success text-brutal-fg shadow-brutal-sm',\n                danger: 'bg-brutal-destructive text-brutal-fg shadow-brutal-sm',\n            },\n            shape: {\n                circle: 'rounded-full h-8 w-8',\n                square: 'rounded-none h-8 w-8',\n                diamond: 'rotate-45 h-7 w-7 [&>*]:-rotate-45',\n            },\n        },\n        defaultVariants: {\n            variant: 'accent',\n            shape: 'circle',\n        },\n    }\n)\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/toast.json b/packages/registry/registry/toast.json
index 3b26b40..91f0a1e 100644
--- a/packages/registry/registry/toast.json
+++ b/packages/registry/registry/toast.json
@@ -3,15 +3,30 @@
   "name": "toast",
   "type": "registry:ui",
   "title": "Toast",
-  "description": "A highly customizable neo-brutalist Toast component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Toast component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/toast.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X, CheckCircle, AlertCircle, AlertTriangle, Info, Zap } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst toastVariants = cva(\n    [\n        'pointer-events-auto relative w-full overflow-hidden',\n        'border-3 border-brutal',\n        'transition-all duration-300 ease-out',\n        'animate-in slide-in-from-right-full fade-in-0',\n    ],\n    {\n        variants: {\n            variant: {\n                default: [\n                    'bg-white dark:bg-gray-900 text-black dark:text-white',\n                    'shadow-brutal-lg',\n                ],\n                success: [\n                    'bg-[#7FB069] text-black dark:bg-[#2d4a28] dark:text-white',\n                    'shadow-brutal-lg',\n                ],\n                error: [\n                    'bg-[#FF6B6B] text-black dark:bg-[#7a2d2d] dark:text-white',\n                    'shadow-brutal-lg',\n                ],\n                warning: [\n                    'bg-[#FFE66D] text-black dark:bg-[#6b5a1f] dark:text-white',\n                    'shadow-brutal-lg',\n                ],\n                info: [\n                    'bg-[#4ECDC4] text-black dark:bg-[#1f5450] dark:text-white',\n                    'shadow-brutal-lg',\n                ],\n            },\n            size: {\n                sm: 'max-w-xs',\n                default: 'max-w-sm',\n                lg: 'max-w-md',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface ToastProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof toastVariants> {\n    title?: string;\n    description?: string;\n    onClose?: () => void;\n    icon?: React.ReactNode;\n    action?: React.ReactNode;\n    duration?: number;\n}\n\nconst Toast = React.forwardRef<HTMLDivElement, ToastProps>(\n    (\n        {\n            className,\n            variant,\n            size,\n            title,\n            description,\n            onClose,\n            icon,\n            action,\n            duration = 5000,\n            children,\n            ...props\n        },\n        ref\n    ) => {\n        const [isLeaving, setIsLeaving] = React.useState(false);\n\n        React.useEffect(() => {\n            if (duration && onClose) {\n                const timer = setTimeout(() => {\n                    setIsLeaving(true);\n                    setTimeout(() => onClose(), 200);\n                }, duration);\n                return () => clearTimeout(timer);\n            }\n            return undefined;\n        }, [duration, onClose]);\n\n        const getDefaultIcon = (): React.ReactNode | null => {\n            const iconClass = 'h-6 w-6 stroke-[2.5] flex-shrink-0';\n            switch (variant) {\n                case 'success':\n                    return <CheckCircle className={iconClass} />;\n                case 'error':\n                    return <AlertCircle className={iconClass} />;\n                case 'warning':\n                    return <AlertTriangle className={iconClass} />;\n                case 'info':\n                    return <Info className={iconClass} />;\n                default:\n                    return <Zap className={iconClass} />;\n            }\n        };\n\n        const defaultIcon = getDefaultIcon();\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    toastVariants({ variant, size }),\n                    isLeaving && 'animate-out slide-out-to-right-full fade-out-0',\n                    className\n                )}\n                role=\"alert\"\n                {...props}\n            >\n                {duration && onClose && (\n                    <div className=\"absolute top-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden\">\n                        <div\n                            className=\"h-full bg-black/30 dark:bg-white/30 animate-nb-shrink\"\n                            style={{ animationDuration: `${duration}ms` }}\n                        />\n                    </div>\n                )}\n\n                <div className=\"flex items-start gap-4 p-4 pt-5\">\n                    {(icon || defaultIcon) && (\n                        <div className=\"flex-shrink-0 mt-0.5\">{icon || defaultIcon}</div>\n                    )}\n\n                    <div className=\"flex-1 min-w-0\">\n                        {title && <p className=\"font-black text-base leading-tight\">{title}</p>}\n                        {description && (\n                            <p className=\"font-medium text-sm mt-1 opacity-80 leading-snug\">\n                                {description}\n                            </p>\n                        )}\n                        {children}\n\n                        {action && <div className=\"mt-3\">{action}</div>}\n                    </div>\n\n                    {onClose && (\n                        <button\n                            type=\"button\"\n                            onClick={() => {\n                                setIsLeaving(true);\n                                setTimeout(() => onClose(), 200);\n                            }}\n                            className={cn(\n                                'flex-shrink-0 h-8 w-8 flex items-center justify-center',\n                                'border-2 border-brutal',\n                                'bg-white dark:bg-gray-900',\n                                'text-black dark:text-white',\n                                'shadow-brutal-sm',\n                                'transition-all duration-150',\n                                'hover:shadow-brutal-sm hover:translate-x-0.5 hover:translate-y-0.5',\n                                'active:shadow-none active:translate-x-1 active:translate-y-1',\n                                'focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2'\n                            )}\n                            aria-label=\"Close\"\n                        >\n                            <X className=\"h-4 w-4 stroke-[3]\" />\n                        </button>\n                    )}\n                </div>\n            </div>\n        );\n    }\n);\nToast.displayName = 'Toast';\n\ninterface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n    position?:\n        | 'top-left'\n        | 'top-center'\n        | 'top-right'\n        | 'bottom-left'\n        | 'bottom-center'\n        | 'bottom-right';\n}\n\nconst ToastContainer = React.forwardRef<HTMLDivElement, ToastContainerProps>(\n    ({ className, position = 'bottom-right', children, ...props }, ref) => {\n        const positionClasses = {\n            'top-left': 'top-4 left-4 items-start',\n            'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',\n            'top-right': 'top-4 right-4 items-end',\n            'bottom-left': 'bottom-4 left-4 items-start',\n            'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',\n            'bottom-right': 'bottom-4 right-4 items-end',\n        };\n\n        return (\n            <div\n                ref={ref}\n                className={cn(\n                    'fixed z-50 flex flex-col gap-3 pointer-events-none p-4',\n                    positionClasses[position],\n                    className\n                )}\n                {...props}\n            >\n                {children}\n            </div>\n        );\n    }\n);\nToastContainer.displayName = 'ToastContainer';\n\ninterface ToastItem {\n    id: string;\n    variant?: ToastProps['variant'];\n    title?: string;\n    description?: string;\n    duration?: number;\n    action?: React.ReactNode;\n}\n\nfunction useToast() {\n    const [toasts, setToasts] = React.useState<ToastItem[]>([]);\n\n    const addToast = React.useCallback((toast: Omit<ToastItem, 'id'>) => {\n        const id = Math.random().toString(36).substring(2, 11);\n        setToasts((prev) => [...prev, { ...toast, id }]);\n        return id;\n    }, []);\n\n    const removeToast = React.useCallback((id: string) => {\n        setToasts((prev) => prev.filter((toast) => toast.id !== id));\n    }, []);\n\n    const clearToasts = React.useCallback(() => {\n        setToasts([]);\n    }, []);\n\n    const success = React.useCallback(\n        (title: string, description?: string) => {\n            return addToast({ variant: 'success', title, description });\n        },\n        [addToast]\n    );\n\n    const error = React.useCallback(\n        (title: string, description?: string) => {\n            return addToast({ variant: 'error', title, description });\n        },\n        [addToast]\n    );\n\n    const warning = React.useCallback(\n        (title: string, description?: string) => {\n            return addToast({ variant: 'warning', title, description });\n        },\n        [addToast]\n    );\n\n    const info = React.useCallback(\n        (title: string, description?: string) => {\n            return addToast({ variant: 'info', title, description });\n        },\n        [addToast]\n    );\n\n    return {\n        toasts,\n        addToast,\n        removeToast,\n        clearToasts,\n        success,\n        error,\n        warning,\n        info,\n    };\n}\n\nexport { Toast, ToastContainer, useToast, toastVariants };\nexport type { ToastContainerProps, ToastItem };\n",
+      "path": "components/ui/toast/Toast.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref, onMounted, onUnmounted } from 'vue'\nimport { X, CheckCircle, AlertCircle, AlertTriangle, Info, Zap } from 'lucide-vue-next'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toastVariants } from '@/components/ui/toast/toast-variants'\nimport { useLocale } from '@/composables/useLocale'\n\ntype ToastVariantProps = VariantProps<typeof toastVariants>\n\nconst DEFAULT_DURATION = 5000\nconst LEAVE_ANIMATION_DELAY = 300\n\ninterface ToastProps {\n    variant?: NonNullable<ToastVariantProps['variant']>\n    size?: NonNullable<ToastVariantProps['size']>\n    title?: string\n    description?: string\n    duration?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ToastProps>(), {\n    variant: 'default',\n    size: 'default',\n    title: '',\n    description: '',\n    duration: DEFAULT_DURATION,\n    class: '',\n})\n\nconst emit = defineEmits<{ close: [] }>()\n\nconst { t } = useLocale()\n\nconst isLeaving = ref(false)\nconst timer = ref<number | undefined>(undefined)\nconst leaveTimer = ref<number | undefined>(undefined)\n\nfunction startLeave() {\n    isLeaving.value = true\n    leaveTimer.value = window.setTimeout(() => {\n        emit('close')\n    }, LEAVE_ANIMATION_DELAY)\n}\n\nonMounted(() => {\n    if (props.duration) {\n        timer.value = window.setTimeout(() => {\n            startLeave()\n        }, props.duration)\n    }\n})\n\nonUnmounted(() => {\n    if (timer.value) window.clearTimeout(timer.value)\n    if (leaveTimer.value) window.clearTimeout(leaveTimer.value)\n})\n\nconst classes = computed(() =>\n    cn(\n        toastVariants({ variant: props.variant, size: props.size }),\n        isLeaving.value && 'animate-out slide-out-to-right-full fade-out-0',\n        props.class\n    )\n)\n\nconst iconComponent = computed(() => {\n    switch (props.variant) {\n        case 'success': return CheckCircle\n        case 'error': return AlertCircle\n        case 'warning': return AlertTriangle\n        case 'info': return Info\n        default: return Zap\n    }\n})\n\nconst closeClasses = computed(() =>\n    cn(\n        'flex-shrink-0 h-8 w-8 flex items-center justify-center',\n        'border-3 border-brutal bg-brutal-bg',\n        'shadow-brutal-sm',\n        'transition-all duration-150',\n        'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all',\n        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\" role=\"alert\">\n        <div v-if=\"duration\" class=\"absolute top-0 left-0 right-0 h-1 bg-brutal-fg/10 overflow-hidden\">\n            <div\n                class=\"h-full bg-brutal-fg/30 animate-nb-shrink\"\n                :style=\"{ animationDuration: `${duration}ms` }\"\n            />\n        </div>\n\n        <div class=\"flex items-start gap-4 p-4 pt-5\">\n            <div class=\"flex-shrink-0 mt-0.5\">\n                <component :is=\"iconComponent\" class=\"h-6 w-6 stroke-[2.5]\" />\n            </div>\n\n            <div class=\"flex-1 min-w-0\">\n                <p v-if=\"title\" class=\"font-black text-base leading-tight\">\n{{ title }}\n</p>\n                <p v-if=\"description\" class=\"font-medium text-sm mt-1 opacity-80 leading-snug\">\n{{ description }}\n</p>\n                <slot />\n            </div>\n\n            <button :class=\"closeClasses\" :aria-label=\"t('toast.close')\" @click=\"startLeave\">\n                <X class=\"h-4 w-4 stroke-[3]\" />\n            </button>\n        </div>\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/toast/ToastContainer.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\n\nconst { t } = useLocale()\n\ninterface ToastContainerProps {\n    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ToastContainerProps>(), {\n    position: 'bottom-right',\n    class: '',\n})\n\nconst positionMap: Record<string, string> = {\n    'top-left': 'top-4 left-4 items-start',\n    'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',\n    'top-right': 'top-4 right-4 items-end',\n    'bottom-left': 'bottom-4 left-4 items-start',\n    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',\n    'bottom-right': 'bottom-4 right-4 items-end',\n}\n\nconst classes = computed(() =>\n    cn(\n        'fixed z-50 flex flex-col gap-3 pointer-events-none p-4',\n        positionMap[props.position],\n        props.class\n    )\n)\n</script>\n\n<template>\n    <div :class=\"classes\" aria-live=\"polite\" :aria-label=\"t('toast.container')\">\n        <slot />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/toast/toast-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const toastVariants = cva(\n    [\n        'pointer-events-auto relative w-full overflow-hidden',\n        'border-3 border-brutal',\n        'transition-all duration-300 ease-out',\n        'animate-in slide-in-from-right-full fade-in-0',\n    ],\n    {\n        variants: {\n            variant: {\n                default: [\n                    'bg-brutal-bg text-brutal-fg',\n                    'shadow-brutal-lg',\n                ],\n                success: [\n                    'bg-brutal-success text-brutal-fg',\n                    'shadow-brutal-lg',\n                ],\n                error: [\n                    'bg-brutal-destructive text-brutal-fg',\n                    'shadow-brutal-lg',\n                ],\n                warning: [\n                    'bg-brutal-accent text-brutal-fg',\n                    'shadow-brutal-lg',\n                ],\n                info: [\n                    'bg-brutal-secondary text-brutal-fg',\n                    'shadow-brutal-lg',\n                ],\n            },\n            size: {\n                sm: 'max-w-xs',\n                default: 'max-w-sm',\n                lg: 'max-w-md',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n)\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "composables/useToast.ts",
+      "content": "import { ref, inject, provide, type InjectionKey } from 'vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { toastVariants } from '@/components/ui/toast/toast-variants'\n\ntype ToastVariantProps = VariantProps<typeof toastVariants>\n\nexport interface ToastItem {\n    id: string\n    variant?: NonNullable<ToastVariantProps['variant']>\n    title?: string\n    description?: string\n    duration?: number\n}\n\nconst TOAST_KEY: InjectionKey<ReturnType<typeof createToast>> = Symbol('brutx-toast')\n\nexport function createToast() {\n    const toasts = ref<ToastItem[]>([])\n    const MAX_TOASTS = 10\n\n    function addToast(toast: Omit<ToastItem, 'id'>) {\n        const id = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`\n        if (toasts.value.length >= MAX_TOASTS) {\n            toasts.value = toasts.value.slice(1)\n        }\n        toasts.value = [...toasts.value, { ...toast, id }]\n        const duration = toast.duration ?? 5000\n        if (duration > 0 && typeof window !== 'undefined') {\n            setTimeout(() => removeToast(id), duration)\n        }\n        return id\n    }\n\n    function removeToast(id: string) {\n        toasts.value = toasts.value.filter((t) => t.id !== id)\n    }\n\n    function clearToasts() {\n        toasts.value = []\n    }\n\n    function success(title: string, description?: string) {\n        return addToast({ variant: 'success', title, description })\n    }\n\n    function error(title: string, description?: string) {\n        return addToast({ variant: 'error', title, description })\n    }\n\n    function warning(title: string, description?: string) {\n        return addToast({ variant: 'warning', title, description })\n    }\n\n    function info(title: string, description?: string) {\n        return addToast({ variant: 'info', title, description })\n    }\n\n    return {\n        toasts,\n        addToast,\n        removeToast,\n        clearToasts,\n        success,\n        error,\n        warning,\n        info,\n    }\n}\n\nexport function provideToast() {\n    const toast = createToast()\n    provide(TOAST_KEY, toast)\n    return toast\n}\n\nexport function useToast() {\n    const toast = inject(TOAST_KEY)\n    if (toast) return toast\n    return createToast()\n}\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +52,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +86,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +99,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/toggle-group.json b/packages/registry/registry/toggle-group.json
index 35c4555..005d863 100644
--- a/packages/registry/registry/toggle-group.json
+++ b/packages/registry/registry/toggle-group.json
@@ -3,17 +3,27 @@
   "name": "toggle-group",
   "type": "registry:ui",
   "title": "Toggle Group",
-  "description": "A highly customizable neo-brutalist Toggle Group component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Toggle Group component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-toggle-group"
+    "reka-ui"
   ],
   "registryDependencies": [
     "toggle"
   ],
   "files": [
     {
-      "path": "components/ui/toggle-group.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { toggleVariants } from '@/components/ui/toggle';\n\nconst ToggleGroupContext = React.createContext<\n    VariantProps<typeof toggleVariants>\n>({\n    size: 'default',\n    variant: 'default',\n});\n\nconst ToggleGroup = React.forwardRef<\n    React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n        VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n    <ToggleGroupPrimitive.Root\n        ref={ref}\n        className={cn('flex items-center justify-center gap-1.5', className)}\n        {...props}\n    >\n        <ToggleGroupContext.Provider value={{ variant, size }}>\n            {children}\n        </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n));\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\n\nconst ToggleGroupItem = React.forwardRef<\n    React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n        VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n    const context = React.useContext(ToggleGroupContext);\n\n    return (\n        <ToggleGroupPrimitive.Item\n            ref={ref}\n            className={cn(\n                toggleVariants({\n                    variant: context.variant || variant,\n                    size: context.size || size,\n                }),\n                className\n            )}\n            {...props}\n        >\n            {children}\n        </ToggleGroupPrimitive.Item>\n    );\n});\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\n\nexport { ToggleGroup, ToggleGroupItem };\n",
+      "path": "components/ui/toggle-group/ToggleGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\nimport { ToggleGroupRoot } from 'reka-ui'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/components/ui/toggle/toggle-variants'\nimport { toggleGroupKey } from '@/components/ui/toggle-group/toggle-group-key'\n\ntype ToggleVariantProps = VariantProps<typeof toggleVariants>\n\ninterface ToggleGroupProps {\n    type?: 'single' | 'multiple'\n    defaultValue?: string | string[]\n    modelValue?: string | string[]\n    variant?: NonNullable<ToggleVariantProps['variant']>\n    size?: NonNullable<ToggleVariantProps['size']>\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ToggleGroupProps>(), {\n    type: 'single',\n    defaultValue: undefined,\n    modelValue: undefined,\n    variant: 'default',\n    size: 'default',\n    class: '',\n})\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[]] }>()\n\nconst classes = computed(() =>\n    cn('flex items-center justify-center gap-1.5', props.class)\n)\n\nprovide(toggleGroupKey, {\n    variant: computed(() => props.variant),\n    size: computed(() => props.size),\n})\n</script>\n\n<template>\n    <ToggleGroupRoot\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        :model-value=\"modelValue\"\n        :class=\"classes\"\n        @update:model-value=\"emit('update:modelValue', $event as string | string[])\"\n    >\n        <slot />\n    </ToggleGroupRoot>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/toggle-group/ToggleGroupItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { ToggleGroupItem as ToggleGroupItemPrimitive } from 'reka-ui'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/components/ui/toggle/toggle-variants'\nimport { toggleGroupKey } from '@/components/ui/toggle-group/toggle-group-key'\n\ntype ToggleVariantProps = VariantProps<typeof toggleVariants>\n\ninterface ToggleGroupItemProps {\n    value: string\n    variant?: NonNullable<ToggleVariantProps['variant']>\n    size?: NonNullable<ToggleVariantProps['size']>\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n    variant: 'default',\n    size: 'default',\n    disabled: false,\n    class: '',\n})\n\nconst context = inject(toggleGroupKey, { variant: computed<NonNullable<ToggleVariantProps['variant']> | undefined>(() => undefined), size: computed<NonNullable<ToggleVariantProps['size']> | undefined>(() => undefined) })\n\nconst classes = computed(() =>\n    cn(\n        toggleVariants({\n            variant: context.variant.value || props.variant,\n            size: context.size.value || props.size,\n        }),\n        props.class\n    )\n)\n</script>\n\n<template>\n    <ToggleGroupItemPrimitive :value=\"value\" :disabled=\"disabled\" :class=\"classes\">\n        <slot />\n    </ToggleGroupItemPrimitive>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/toggle-group/toggle-group-key.ts",
+      "content": "import type { InjectionKey, Ref } from 'vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { toggleVariants } from '@/components/ui/toggle/toggle-variants'\n\ntype ToggleVariantProps = VariantProps<typeof toggleVariants>\n\nexport const toggleGroupKey: InjectionKey<{\n    variant: Ref<NonNullable<ToggleVariantProps['variant']> | undefined>\n    size: Ref<NonNullable<ToggleVariantProps['size']> | undefined>\n}> = Symbol('toggleGroup')\n",
       "type": "registry:ui"
     }
   ],
@@ -39,7 +49,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -69,7 +83,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -79,16 +96,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/toggle.json b/packages/registry/registry/toggle.json
index c6b20fa..9123b66 100644
--- a/packages/registry/registry/toggle.json
+++ b/packages/registry/registry/toggle.json
@@ -3,15 +3,20 @@
   "name": "toggle",
   "type": "registry:ui",
   "title": "Toggle",
-  "description": "A highly customizable neo-brutalist Toggle component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Toggle component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-toggle"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/toggle.tsx",
-      "content": "'use client';\n\nimport * as React from 'react';\nimport * as TogglePrimitive from '@radix-ui/react-toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst toggleVariants = cva(\n    [\n        'inline-flex items-center justify-center gap-2 text-sm font-black tracking-wide',\n        'border-3 border-brutal rounded-brutal transition-all duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n    ],\n    {\n        variants: {\n            variant: {\n                default: [\n                    'bg-white dark:bg-gray-800 text-brutal-fg shadow-brutal-sm',\n                    'hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal',\n                    'data-[state=on]:bg-brutal-primary data-[state=on]:text-brutal-fg data-[state=on]:shadow-none data-[state=on]:translate-y-[var(--brutal-pressed-offset,2px)]',\n                ],\n                outline: [\n                    'bg-transparent text-brutal-fg border-3 border-brutal shadow-brutal-sm',\n                    'hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal',\n                    'data-[state=on]:bg-brutal-secondary data-[state=on]:shadow-none data-[state=on]:translate-y-[var(--brutal-pressed-offset,2px)]',\n                ],\n            },\n            size: {\n                default: 'h-10 px-3 min-w-10',\n                sm: 'h-8 px-2 min-w-8 text-xs',\n                lg: 'h-12 px-4 min-w-12',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nconst Toggle = React.forwardRef<\n    React.ElementRef<typeof TogglePrimitive.Root>,\n    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n        VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n    <TogglePrimitive.Root\n        ref={ref}\n        className={cn(toggleVariants({ variant, size }), className)}\n        {...props}\n    />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\nexport { Toggle, toggleVariants };\n",
+      "path": "components/ui/toggle/Toggle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Toggle } from 'reka-ui'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { toggleVariants } from '@/components/ui/toggle/toggle-variants'\n\ntype ToggleVariantProps = VariantProps<typeof toggleVariants>\n\ninterface ToggleProps {\n    defaultValue?: boolean\n    pressed?: boolean\n    variant?: NonNullable<ToggleVariantProps['variant']>\n    size?: NonNullable<ToggleVariantProps['size']>\n    disabled?: boolean\n    class?: string\n}\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n    variant: 'default',\n    size: 'default',\n    disabled: false,\n    class: '',\n})\n\nconst emit = defineEmits<{ 'update:pressed': [value: boolean] }>()\n\nconst classes = computed(() =>\n    cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)\n)\n</script>\n\n<template>\n    <Toggle\n        :default-value=\"defaultValue\"\n        :pressed=\"pressed\"\n        :disabled=\"disabled\"\n        :class=\"classes\"\n        @update:pressed=\"emit('update:pressed', $event)\"\n    >\n        <slot />\n    </Toggle>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/toggle/toggle-variants.ts",
+      "content": "import { cva } from 'class-variance-authority'\n\nexport const toggleVariants = cva(\n    [\n        'inline-flex items-center justify-center gap-2 text-sm font-black tracking-wide',\n        'border-3 border-brutal rounded-brutal transition-all duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n    ],\n    {\n        variants: {\n            variant: {\n                default: [\n                    'bg-brutal-bg text-brutal-fg shadow-brutal-sm',\n                    'hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal',\n                    'data-[state=on]:bg-brutal-primary data-[state=on]:text-brutal-fg data-[state=on]:shadow-none data-[state=on]:translate-y-[var(--brutal-pressed-offset,2px)]',\n                ],\n                outline: [\n                    'bg-transparent text-brutal-fg border-3 border-brutal shadow-brutal-sm',\n                    'hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal',\n                    'data-[state=on]:bg-brutal-secondary data-[state=on]:shadow-none data-[state=on]:translate-y-[var(--brutal-pressed-offset,2px)]',\n                ],\n            },\n            size: {\n                default: 'h-10 px-3 min-w-10',\n                sm: 'h-8 px-2 min-w-8 text-xs',\n                lg: 'h-12 px-4 min-w-12',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n)\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +42,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +76,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +89,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/tooltip.json b/packages/registry/registry/tooltip.json
index 78efaa6..dc74111 100644
--- a/packages/registry/registry/tooltip.json
+++ b/packages/registry/registry/tooltip.json
@@ -3,15 +3,15 @@
   "name": "tooltip",
   "type": "registry:ui",
   "title": "Tooltip",
-  "description": "A highly customizable neo-brutalist Tooltip component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Tooltip component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "@radix-ui/react-tooltip"
+    "reka-ui"
   ],
   "registryDependencies": [],
   "files": [
     {
-      "path": "components/ui/tooltip.tsx",
-      "content": "import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\nimport { cn } from '@/lib/utils';\n\nconst TooltipProvider = TooltipPrimitive.Provider;\nconst Tooltip = TooltipPrimitive.Root;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n    React.ElementRef<typeof TooltipPrimitive.Content>,\n    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 6, ...props }, ref) => (\n    <TooltipPrimitive.Content\n        ref={ref}\n        sideOffset={sideOffset}\n        className={cn(\n            'z-50 overflow-hidden px-3 py-1.5',\n            'bg-black dark:bg-white text-white dark:text-black text-sm font-bold',\n            'border-2 border-black dark:border-white',\n            'animate-in fade-in-0 zoom-in-95',\n            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2',\n            'data-[side=left]:slide-in-from-right-2',\n            'data-[side=right]:slide-in-from-left-2',\n            'data-[side=top]:slide-in-from-bottom-2',\n            className\n        )}\n        {...props}\n    />\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n",
+      "path": "components/ui/tooltip/TooltipContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { TooltipPortal, TooltipContent as TooltipContentPrimitive } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\ninterface TooltipContentProps {\n    sideOffset?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<TooltipContentProps>(), {\n    sideOffset: 6,\n    class: '',\n})\n\nconst classes = computed(() =>\n    cn(\n        'z-50 overflow-hidden px-3 py-1.5',\n        'bg-brutal-fg text-brutal-bg text-sm font-bold',\n        'border-3 border-brutal rounded-brutal shadow-brutal',\n        'animate-in fade-in-0 zoom-in-95',\n        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n        'data-[side=bottom]:slide-in-from-top-2',\n        'data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2',\n        'data-[side=top]:slide-in-from-bottom-2',\n        props.class\n    )\n)\n</script>\n\n<template>\n    <TooltipPortal>\n        <TooltipContentPrimitive :side-offset=\"sideOffset\" :class=\"classes\">\n            <slot />\n        </TooltipContentPrimitive>\n    </TooltipPortal>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -37,7 +37,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -67,7 +71,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -77,16 +84,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/registry/tree-view.json b/packages/registry/registry/tree-view.json
new file mode 100644
index 0000000..fcbf413
--- /dev/null
+++ b/packages/registry/registry/tree-view.json
@@ -0,0 +1,113 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tree-view",
+  "type": "registry:ui",
+  "title": "Tree View",
+  "description": "A highly customizable neo-brutalist Tree View component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "reka-ui",
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/tree-view/TreeView.vue",
+      "content": "<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue';\nimport { cn } from '@/lib/utils';\nimport TreeViewNode from '@/components/ui/tree-view/TreeViewNode.vue';\nimport { useLocale } from '@/composables/useLocale';\n\nexport interface TreeNode {\n    id: string;\n    label: string;\n    icon?: string;\n    children?: TreeNode[];\n    data?: unknown;\n}\n\ninterface TreeViewProps {\n    nodes: TreeNode[];\n    modelValue?: string | null;\n    defaultExpanded?: string[];\n    class?: string;\n}\n\nconst props = withDefaults(defineProps<TreeViewProps>(), {\n    modelValue: null,\n    defaultExpanded: () => [],\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [id: string | null];\n    'select': [node: TreeNode];\n    'expand': [id: string, expanded: boolean];\n}>();\n\nconst { t } = useLocale();\n\nconst expandedIds = ref<Set<string>>(new Set(props.defaultExpanded));\n\nwatch(() => props.defaultExpanded, (newVal) => {\n    expandedIds.value = new Set(newVal);\n});\n\nfunction toggleExpand(id: string) {\n    const next = !expandedIds.value.has(id);\n    if (next) {\n        expandedIds.value.add(id);\n    } else {\n        expandedIds.value.delete(id);\n    }\n    emit('expand', id, next);\n}\n\nfunction selectNode(node: TreeNode) {\n    emit('update:modelValue', node.id);\n    emit('select', node);\n}\n\nconst rootClass = computed(() => cn('flex flex-col gap-0.5', props.class));\n</script>\n\n<template>\n    <div :class=\"rootClass\" role=\"tree\" :aria-label=\"t('treeView.fileTree')\">\n        <TreeViewNode\n            v-for=\"node in nodes\"\n            :key=\"node.id\"\n            :node=\"node\"\n            :selected-id=\"modelValue\"\n            :expanded-ids=\"expandedIds\"\n            :depth=\"0\"\n            @toggle=\"toggleExpand\"\n            @select=\"selectNode\"\n        />\n    </div>\n</template>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tree-view/TreeViewNode.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { ChevronRight, File, Folder, FolderOpen } from 'lucide-vue-next';\nimport { cn } from '@/lib/utils';\nimport { treeItemVariants } from '@/components/ui/tree-view/tree-view-variants';\nimport type { TreeNode } from '@/components/ui/tree-view/TreeView.vue';\n\nconst INDENT_PER_DEPTH = 20\nconst BASE_INDENT = 4\n\ninterface TreeViewNodeProps {\n    node: TreeNode;\n    selectedId?: string | null;\n    expandedIds: Set<string>;\n    depth?: number;\n}\n\nconst props = withDefaults(defineProps<TreeViewNodeProps>(), {\n    selectedId: null,\n    depth: 0,\n});\n\nconst emit = defineEmits<{\n    'toggle': [id: string];\n    'select': [node: TreeNode];\n}>();\n\nconst isLeaf = computed(() => !props.node.children || props.node.children.length === 0);\nconst isExpanded = computed(() => props.expandedIds.has(props.node.id));\nconst isSelected = computed(() => props.selectedId === props.node.id);\n\nconst itemClass = computed(() =>\n    cn(treeItemVariants({ selected: isSelected.value }))\n);\n\nconst indentStyle = computed(() => ({\n    paddingLeft: `${props.depth * INDENT_PER_DEPTH + BASE_INDENT}px`,\n}));\n</script>\n\n<template>\n    <div role=\"treeitem\" :aria-expanded=\"!isLeaf ? isExpanded : undefined\" :aria-selected=\"isSelected\">\n        <div\n            :class=\"itemClass\"\n            :style=\"indentStyle\"\n            @click=\"isLeaf ? emit('select', node) : (emit('toggle', node.id), emit('select', node))\"\n        >\n            <ChevronRight\n                v-if=\"!isLeaf\"\n                :class=\"cn('w-4 h-4 flex-shrink-0 transition-transform duration-150', isExpanded && 'rotate-90')\"\n            />\n            <span v-else class=\"w-4 flex-shrink-0\" />\n\n            <FolderOpen v-if=\"!isLeaf && isExpanded\" class=\"w-4 h-4 flex-shrink-0 text-brutal-primary\" />\n            <Folder v-else-if=\"!isLeaf\" class=\"w-4 h-4 flex-shrink-0\" />\n            <File v-else class=\"w-4 h-4 flex-shrink-0 opacity-60\" />\n\n            <span class=\"truncate\">{{ node.label }}</span>\n        </div>\n\n        <Transition name=\"tree-expand\">\n            <div v-if=\"!isLeaf && isExpanded\" role=\"group\">\n                <TreeViewNode\n                    v-for=\"child in node.children\"\n                    :key=\"child.id\"\n                    :node=\"child\"\n                    :selected-id=\"selectedId\"\n                    :expanded-ids=\"expandedIds\"\n                    :depth=\"depth + 1\"\n                    @toggle=\"emit('toggle', $event)\"\n                    @select=\"emit('select', $event)\"\n                />\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<style scoped>\n.tree-expand-enter-active,\n.tree-expand-leave-active {\n    transition: opacity 0.15s ease, grid-template-rows 0.2s ease;\n    overflow: hidden;\n    display: grid;\n    grid-template-rows: 1fr;\n}\n.tree-expand-enter-from,\n.tree-expand-leave-to {\n    opacity: 0;\n    grid-template-rows: 0fr;\n}\n</style>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "components/ui/tree-view/tree-view-variants.ts",
+      "content": "import { cva } from 'class-variance-authority';\n\nexport const treeItemVariants = cva(\n    [\n        'flex items-center gap-2 px-2 py-1.5 cursor-pointer select-none',\n        'border-3 border-transparent rounded-brutal',\n        'text-sm text-brutal-fg font-medium',\n        'transition-all duration-150',\n        'hover:border-brutal hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',\n        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',\n    ].join(' '),\n    {\n        variants: {\n            selected: {\n                true: 'bg-brutal-primary border-brutal shadow-brutal',\n                false: '',\n            },\n        },\n        defaultVariants: {\n            selected: false,\n        },\n    }\n);\n\nexport const treeBranchLineVariants = cva(\n    'absolute left-0 top-0 bottom-0 border-l-3 border-brutal'\n);\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/upload-card.json b/packages/registry/registry/upload-card.json
new file mode 100644
index 0000000..6d3b1cd
--- /dev/null
+++ b/packages/registry/registry/upload-card.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "upload-card",
+  "type": "registry:ui",
+  "title": "Upload Card",
+  "description": "A highly customizable neo-brutalist Upload Card component built with Brutx design tokens for Vue 3.",
+  "dependencies": [
+    "lucide-vue-next"
+  ],
+  "registryDependencies": [
+    "card",
+    "button",
+    "progress",
+    "spinner"
+  ],
+  "files": [
+    {
+      "path": "components/ui/upload-card/UploadCard.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Upload } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { useLocale } from '@/composables/useLocale'\nimport Card from '@/components/ui/card/Card.vue'\nimport CardContent from '@/components/ui/card/CardContent.vue'\nimport Button from '@/components/ui/button/Button.vue'\nimport Progress from '@/components/ui/progress/Progress.vue'\nimport Spinner from '@/components/ui/spinner/Spinner.vue'\n\ninterface UploadCardProps {\n    title?: string\n    description?: string\n    accept?: string\n    maxSize?: number\n    uploading?: boolean\n    progress?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<UploadCardProps>(), {\n    title: undefined,\n    description: undefined,\n    accept: undefined,\n    maxSize: undefined,\n    uploading: false,\n    progress: 0,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst emit = defineEmits<{\n    upload: [files: File[]]\n    drop: [files: File[]]\n}>()\n\nconst isDragging = ref(false)\nconst fileInput = ref<HTMLInputElement | null>(null)\n\nconst rootClasses = computed(() => cn('w-full max-w-lg mx-auto', props.class))\n\nconst resolvedTitle = computed(() => props.title ?? t('uploadCard.defaultTitle'))\nconst resolvedDescription = computed(() => props.description ?? t('uploadCard.defaultDescription'))\nconst resolvedBrowseText = computed(() => t('uploadCard.browseText'))\nconst resolvedDropText = computed(() => t('uploadCard.dropText'))\n\nconst dropZoneClasses = computed(() =>\n    cn(\n        'flex flex-col items-center justify-center p-8 border-3 border-dashed border-brutal rounded-brutal transition-all cursor-pointer',\n        isDragging.value ? 'bg-brutal-muted shadow-brutal' : 'bg-brutal-bg',\n        props.uploading && 'pointer-events-none'\n    )\n)\n\nfunction handleDragEnter(event: DragEvent) {\n    event.preventDefault()\n    isDragging.value = true\n}\n\nfunction handleDragOver(event: DragEvent) {\n    event.preventDefault()\n}\n\nfunction handleDragLeave(event: DragEvent) {\n    event.preventDefault()\n    isDragging.value = false\n}\n\nfunction handleDrop(event: DragEvent) {\n    event.preventDefault()\n    isDragging.value = false\n    const files = Array.from(event.dataTransfer?.files ?? [])\n    if (files.length > 0) {\n        emit('drop', files)\n    }\n}\n\nfunction handleBrowse() {\n    fileInput.value?.click()\n}\n\nfunction handleFileChange(event: Event) {\n    const target = event.target as HTMLInputElement\n    const files = Array.from(target.files ?? [])\n    if (files.length > 0) {\n        emit('upload', files)\n    }\n    target.value = ''\n}\n</script>\n\n<template>\n    <Card :class=\"rootClasses\" variant=\"default\">\n        <CardContent class=\"pt-6\">\n            <div\n                :class=\"dropZoneClasses\"\n                @dragenter=\"handleDragEnter\"\n                @dragover=\"handleDragOver\"\n                @dragleave=\"handleDragLeave\"\n                @drop=\"handleDrop\"\n                @click=\"handleBrowse\"\n            >\n                <input\n                    ref=\"fileInput\"\n                    type=\"file\"\n                    multiple\n                    :accept=\"accept\"\n                    class=\"hidden\"\n                    @change=\"handleFileChange\"\n                >\n                <template v-if=\"uploading\">\n                    <Spinner size=\"default\" class=\"mb-4\" />\n                    <Progress :model-value=\"progress\" class=\"w-full max-w-xs mb-2\" />\n                </template>\n                <template v-else>\n                    <Upload class=\"h-10 w-10 stroke-[3] text-brutal-muted-foreground mb-4\" />\n                    <h3 class=\"text-lg font-black tracking-tight\">\n{{ resolvedTitle }}\n</h3>\n                    <p class=\"mt-1 text-sm text-brutal-muted-foreground font-medium\">\n{{ resolvedDescription }}\n</p>\n                    <Button variant=\"primary\" size=\"sm\" class=\"mt-4\" @click.stop=\"handleBrowse\">\n                        {{ resolvedBrowseText }}\n                    </Button>\n                    <p class=\"mt-2 text-xs text-brutal-muted-foreground font-medium\">\n{{ resolvedDropText }}\n</p>\n                </template>\n            </div>\n            <slot name=\"actions\" />\n        </CardContent>\n    </Card>\n</template>\n",
+      "type": "registry:ui"
+    }
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "borderWidth": {
+            "3": "var(--brutal-border-width, 3px)"
+          },
+          "borderColor": {
+            "brutal": "var(--brutal-border-color, #000000)"
+          },
+          "borderRadius": {
+            "brutal": "var(--brutal-radius, 0px)"
+          },
+          "colors": {
+            "brutal-bg": "var(--brutal-bg, #ffffff)",
+            "brutal-fg": "var(--brutal-fg, #000000)",
+            "brutal-primary": "var(--brutal-primary, #FF6B6B)",
+            "brutal-secondary": "var(--brutal-secondary, #4ECDC4)",
+            "brutal-accent": "var(--brutal-accent, #FFE66D)",
+            "brutal-destructive": "var(--brutal-destructive, #EF476F)",
+            "brutal-success": "var(--brutal-success, #7FB069)",
+            "brutal-muted": "var(--brutal-muted, #f3f4f6)",
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
+          },
+          "boxShadow": {
+            "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-sm": "calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-lg": "calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)",
+            "brutal-xl": "calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)"
+          }
+        }
+      }
+    }
+  },
+  "cssVars": {
+    "light": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#000000",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#000000",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#ffffff",
+      "brutal-fg": "#000000",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#f3f4f6",
+      "brutal-ring": "#000000",
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
+    },
+    "dark": {
+      "brutal-border-width": "3px",
+      "brutal-border-color": "#ffffff",
+      "brutal-shadow-offset-x": "4px",
+      "brutal-shadow-offset-y": "4px",
+      "brutal-shadow-color": "#ffffff",
+      "brutal-radius": "0px",
+      "brutal-pressed-offset": "2px",
+      "brutal-bg": "#141414",
+      "brutal-fg": "#ffffff",
+      "brutal-primary": "#FF6B6B",
+      "brutal-secondary": "#4ECDC4",
+      "brutal-accent": "#FFE66D",
+      "brutal-destructive": "#EF476F",
+      "brutal-success": "#7FB069",
+      "brutal-muted": "#1e1e1e",
+      "brutal-ring": "#ffffff",
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/registry/registry/waitlist-page.json b/packages/registry/registry/waitlist-page.json
index 4ef25de..c738d55 100644
--- a/packages/registry/registry/waitlist-page.json
+++ b/packages/registry/registry/waitlist-page.json
@@ -3,9 +3,9 @@
   "name": "waitlist-page",
   "type": "registry:ui",
   "title": "Waitlist Page",
-  "description": "A highly customizable neo-brutalist Waitlist Page component built with Brutx design tokens.",
+  "description": "A highly customizable neo-brutalist Waitlist Page component built with Brutx design tokens for Vue 3.",
   "dependencies": [
-    "lucide-react"
+    "lucide-vue-next"
   ],
   "registryDependencies": [
     "button",
@@ -13,8 +13,8 @@
   ],
   "files": [
     {
-      "path": "components/ui/waitlist-page.tsx",
-      "content": "import * as React from 'react';\nimport { Sparkles, Users, Star } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\n\nexport interface WaitlistPageProps extends React.HTMLAttributes<HTMLDivElement> {\n    title?: string;\n    description?: string;\n    ctaText?: string;\n    onWaitlistSubmit?: (e: React.FormEvent<HTMLFormElement>, email: string) => void;\n}\n\nexport function WaitlistPage({\n    title = 'Join the BrutxUI Waitlist Club',\n    description = 'Get early developer keys to copy premium blocks, customized theme presets, and unlock deep registry CLI integrations before everyone else.',\n    ctaText = 'Secure Priority Access',\n    onWaitlistSubmit,\n    className,\n    ...props\n}: WaitlistPageProps) {\n    const [email, setEmail] = React.useState('');\n\n    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n        if (onWaitlistSubmit) onWaitlistSubmit(e, email);\n    };\n\n    return (\n        <section\n            className={`w-full py-16 md:py-24 bg-brutal-bg text-brutal-fg border-3 border-brutal transition-colors duration-200 ${className || ''}`}\n            {...props}\n        >\n            <div className=\"container px-4 md:px-6 mx-auto max-w-4xl\">\n                <div className=\"flex flex-col items-center justify-center text-center space-y-8\">\n                    <div className=\"inline-flex items-center space-x-2 bg-brutal-accent text-black px-4 py-1.5 border-3 border-brutal font-black text-xs uppercase tracking-wider rotate-[-1.5deg]\">\n                        <Sparkles className=\"h-4 w-4 stroke-[3] animate-spin\" />\n                        <span>Private Beta Access Open</span>\n                    </div>\n\n                    <div className=\"space-y-4\">\n                        <h1 className=\"text-4xl font-black tracking-tight sm:text-5xl md:text-6xl leading-[1.05]\">\n                            {title}\n                        </h1>\n                        <p className=\"max-w-[640px] text-lg font-bold text-gray-700 dark:text-gray-300 mx-auto leading-relaxed\">\n                            {description}\n                        </p>\n                    </div>\n\n                    <form\n                        onSubmit={handleSubmit}\n                        className=\"w-full max-w-md flex flex-col sm:flex-row gap-3 pt-2\"\n                    >\n                        <Input\n                            type=\"email\"\n                            placeholder=\"Enter your personal email...\"\n                            required\n                            value={email}\n                            onChange={(e) => setEmail(e.target.value)}\n                            className=\"flex-grow text-base py-6 bg-white dark:bg-gray-800\"\n                        />\n                        <Button\n                            type=\"submit\"\n                            variant=\"primary\"\n                            className=\"font-black text-sm py-6 px-6 shrink-0\"\n                        >\n                            {ctaText}\n                        </Button>\n                    </form>\n\n                    <div className=\"w-full border-t-3 border-brutal pt-8 mt-6\">\n                        <div className=\"grid gap-6 sm:grid-cols-2 md:grid-cols-3 items-center justify-center max-w-2xl mx-auto\">\n                            <div className=\"flex items-center justify-center space-x-2 font-black text-sm\">\n                                <Users className=\"h-5 w-5 text-brutal-secondary stroke-[2.5]\" />\n                                <span>1,840+ Developers on waitlist</span>\n                            </div>\n                            <div className=\"flex items-center justify-center space-x-1 font-black text-sm\">\n                                {[...Array(5)].map((_, i) => (\n                                    <Star key={i} className=\"h-4 w-4 fill-brutal-accent text-black stroke-[2.5]\" />\n                                ))}\n                                <span className=\"pl-1\">4.9/5 stars rating</span>\n                            </div>\n                            <div className=\"flex items-center justify-center space-x-2 font-black text-sm sm:col-span-2 md:col-span-1\">\n                                <span className=\"h-2 w-2 rounded-full bg-brutal-success animate-ping\" />\n                                <span>Beta Invites sent daily</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    );\n}\n",
+      "path": "components/ui/waitlist-page/WaitlistPage.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Sparkles, Users, Star } from 'lucide-vue-next'\nimport { useLocale } from '@/composables/useLocale'\nimport { cn } from '@/lib/utils'\nimport Button from '@/components/ui/button/Button.vue'\nimport Input from '@/components/ui/input/Input.vue'\n\ninterface WaitlistPageProps {\n    title?: string\n    description?: string\n    ctaText?: string\n    waitlistCount?: number\n    class?: string\n}\n\nconst props = withDefaults(defineProps<WaitlistPageProps>(), {\n    title: undefined,\n    description: '',\n    ctaText: undefined,\n    waitlistCount: 0,\n    class: '',\n})\n\nconst { t } = useLocale()\n\nconst resolvedTitle = computed(() => props.title ?? t('waitlistPage.title'))\nconst resolvedCtaText = computed(() => props.ctaText ?? t('waitlistPage.ctaText'))\n\nconst emit = defineEmits<{\n    submit: [email: string]\n}>()\n\nconst email = ref('')\n\nconst EMAIL_REGEX = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nconst rootClasses = computed(() => cn('w-full max-w-lg mx-auto text-center', props.class))\n\nfunction handleSubmit() {\n    if (email.value && EMAIL_REGEX.test(email.value)) {\n        emit('submit', email.value)\n    }\n}\n</script>\n\n<template>\n    <div :class=\"rootClasses\">\n        <div class=\"inline-flex items-center gap-2 mb-6 bg-brutal-accent px-3 py-1 border-3 border-brutal rotate-[-1deg]\">\n            <Sparkles class=\"h-4 w-4 stroke-[3] animate-spin\" />\n            <span class=\"font-black text-sm\">{{ t('waitlistPage.earlyAccess') }}</span>\n        </div>\n\n        <h1 class=\"text-3xl font-black tracking-tight\">\n{{ resolvedTitle }}\n</h1>\n        <p v-if=\"description\" class=\"mt-3 text-brutal-muted-foreground font-medium\">\n{{ description }}\n</p>\n\n        <form class=\"mt-8 flex flex-col sm:flex-row gap-3\" @submit.prevent=\"handleSubmit\">\n            <Input v-model=\"email\" type=\"email\" placeholder=\"you@example.com\" class=\"flex-1\" />\n            <Button type=\"submit\" variant=\"primary\">\n{{ resolvedCtaText }}\n</Button>\n        </form>\n\n        <div class=\"mt-8 flex items-center justify-center gap-6 text-sm font-bold text-brutal-muted-foreground\">\n            <div v-if=\"waitlistCount > 0\" class=\"flex items-center gap-1\">\n                <Users class=\"h-4 w-4 stroke-[3]\" />\n                <span>{{ t('waitlistPage.onWaitlist', { count: waitlistCount.toLocaleString() }) }}</span>\n            </div>\n            <div class=\"flex items-center gap-1\">\n                <Star v-for=\"i in 5\" :key=\"i\" class=\"h-3 w-3 fill-brutal-accent text-brutal-accent\" />\n            </div>\n            <div class=\"flex items-center gap-1\">\n                <div class=\"h-2 w-2 rounded-full bg-brutal-success animate-pulse\" />\n                <span>{{ t('waitlistPage.live') }}</span>\n            </div>\n        </div>\n    </div>\n</template>\n",
       "type": "registry:ui"
     }
   ],
@@ -40,7 +40,11 @@
             "brutal-destructive": "var(--brutal-destructive, #EF476F)",
             "brutal-success": "var(--brutal-success, #7FB069)",
             "brutal-muted": "var(--brutal-muted, #f3f4f6)",
-            "brutal-ring": "var(--brutal-ring, #000000)"
+            "brutal-ring": "var(--brutal-ring, #000000)",
+            "brutal-info": "var(--brutal-info, #4A90D9)",
+            "brutal-muted-foreground": "var(--brutal-muted-foreground, #4B5563)",
+            "brutal-overlay": "var(--brutal-overlay, rgba(0, 0, 0, 0.5))",
+            "brutal-placeholder": "var(--brutal-placeholder, #9CA3AF)"
           },
           "boxShadow": {
             "brutal": "var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)",
@@ -70,7 +74,10 @@
       "brutal-success": "#7FB069",
       "brutal-muted": "#f3f4f6",
       "brutal-ring": "#000000",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#4A90D9",
+      "brutal-muted-foreground": "#4B5563",
+      "brutal-overlay": "rgba(0, 0, 0, 0.5)",
+      "brutal-placeholder": "#9CA3AF"
     },
     "dark": {
       "brutal-border-width": "3px",
@@ -80,16 +87,19 @@
       "brutal-shadow-color": "#ffffff",
       "brutal-radius": "0px",
       "brutal-pressed-offset": "2px",
-      "brutal-bg": "#111827",
+      "brutal-bg": "#141414",
       "brutal-fg": "#ffffff",
       "brutal-primary": "#FF6B6B",
       "brutal-secondary": "#4ECDC4",
       "brutal-accent": "#FFE66D",
       "brutal-destructive": "#EF476F",
       "brutal-success": "#7FB069",
-      "brutal-muted": "#1f2937",
+      "brutal-muted": "#1e1e1e",
       "brutal-ring": "#ffffff",
-      "brutal-info": "#4A90D9"
+      "brutal-info": "#3B82F6",
+      "brutal-muted-foreground": "#9CA3AF",
+      "brutal-overlay": "rgba(0, 0, 0, 0.7)",
+      "brutal-placeholder": "#6B7280"
     }
   }
 }
\ No newline at end of file
diff --git a/packages/registry/scripts/build-registry.ts b/packages/registry/scripts/build-registry.ts
index 2d93e12..ed51de2 100644
--- a/packages/registry/scripts/build-registry.ts
+++ b/packages/registry/scripts/build-registry.ts
@@ -1,24 +1,281 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { COMPONENTS } from 'brutx-shared';
+import { COMPONENTS } from 'brutx-shared-vue';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const UI_COMPONENTS_DIR = path.resolve(__dirname, '../../ui/src/components');
+const UI_COMPOSABLES_DIR = path.resolve(__dirname, '../../ui/src/composables');
 const OUTPUT_DIR = path.resolve(__dirname, '../registry');
 
-/**
- * Reads component source with canonical LF newlines for registry payloads.
- *
- * @param filePath - Component source file path.
- * @returns Source code normalized for JSON registry content.
- */
+interface ComponentFileMapping {
+    files: string[];
+    composables?: string[];
+}
+
+const COMPONENT_FILES: Record<string, ComponentFileMapping> = {
+    alert: { files: ['Alert.vue', 'AlertDescription.vue', 'AlertTitle.vue', 'alert-variants.ts'] },
+    avatar: { files: ['Avatar.vue', 'AvatarFallback.vue', 'AvatarImage.vue', 'avatar-variants.ts'] },
+    badge: { files: ['Badge.vue', 'badge-variants.ts'] },
+    button: { files: ['Button.vue', 'button-variants.ts'] },
+    calendar: { files: ['Calendar.vue'] },
+    card: { files: ['Card.vue', 'CardContent.vue', 'CardDescription.vue', 'CardFooter.vue', 'CardHeader.vue', 'CardTitle.vue', 'card-variants.ts'] },
+    checkbox: { files: ['Checkbox.vue'] },
+    combobox: { files: ['Combobox.vue', 'ComboboxMulti.vue', 'combobox-types.ts'] },
+    command: { files: ['Command.vue', 'CommandDialog.vue', 'CommandEmpty.vue', 'CommandGroup.vue', 'CommandInput.vue', 'CommandItem.vue', 'CommandList.vue', 'CommandSeparator.vue', 'CommandShortcut.vue'] },
+    dialog: { files: ['DialogContent.vue', 'DialogDescription.vue', 'DialogFooter.vue', 'DialogHeader.vue', 'DialogOverlay.vue', 'DialogTitle.vue'] },
+    'dropdown-menu': { files: ['DropdownMenuCheckboxItem.vue', 'DropdownMenuContent.vue', 'DropdownMenuItem.vue', 'DropdownMenuLabel.vue', 'DropdownMenuRadioItem.vue', 'DropdownMenuSeparator.vue', 'DropdownMenuShortcut.vue', 'DropdownMenuSubContent.vue', 'DropdownMenuSubTrigger.vue'] },
+    input: { files: ['Input.vue', 'input-variants.ts'] },
+    label: { files: ['Label.vue', 'label-variants.ts'] },
+    pagination: { files: ['Pagination.vue', 'pagination-variants.ts'] },
+    popover: { files: ['PopoverContent.vue'] },
+    'scroll-area': { files: ['ScrollArea.vue', 'ScrollBar.vue'] },
+    select: { files: ['SelectContent.vue', 'SelectItem.vue', 'SelectLabel.vue', 'SelectScrollDownButton.vue', 'SelectScrollUpButton.vue', 'SelectSeparator.vue', 'SelectTrigger.vue'] },
+    separator: { files: ['Separator.vue', 'separator-variants.ts'] },
+    skeleton: { files: ['Skeleton.vue', 'SkeletonAvatar.vue', 'SkeletonCard.vue', 'SkeletonTable.vue', 'SkeletonText.vue', 'skeleton-variants.ts'] },
+    spinner: { files: ['Spinner.vue', 'BarsSpinner.vue', 'BlockSpinner.vue', 'DotsSpinner.vue', 'spinner-variants.ts'] },
+    'submit-button': { files: ['SubmitButton.vue'] },
+    switch: { files: ['Switch.vue'] },
+    table: { files: ['Table.vue', 'TableBody.vue', 'TableCaption.vue', 'TableCell.vue', 'TableFooter.vue', 'TableHead.vue', 'TableHeader.vue', 'TableRow.vue'] },
+    tabs: { files: ['TabsContent.vue', 'TabsList.vue', 'TabsTrigger.vue'] },
+    textarea: { files: ['Textarea.vue', 'textarea-variants.ts'] },
+    toast: { files: ['Toast.vue', 'ToastContainer.vue', 'toast-variants.ts'], composables: ['useToast.ts'] },
+    tooltip: { files: ['TooltipContent.vue'] },
+    'saas-pricing': { files: ['SaaSPricing.vue'] },
+    'dashboard-stats': { files: ['DashboardStats.vue'] },
+    form: { files: ['Form.vue', 'FormControl.vue', 'FormDescription.vue', 'FormField.vue', 'FormItem.vue', 'FormLabel.vue', 'FormMessage.vue', 'form-context.ts'] },
+    'alert-dialog': { files: ['AlertDialogAction.vue', 'AlertDialogCancel.vue', 'AlertDialogContent.vue', 'AlertDialogDescription.vue', 'AlertDialogFooter.vue', 'AlertDialogHeader.vue', 'AlertDialogTitle.vue'] },
+    sheet: { files: ['SheetContent.vue', 'SheetDescription.vue', 'SheetFooter.vue', 'SheetHeader.vue', 'SheetTitle.vue', 'sheet-variants.ts'] },
+    'radio-group': { files: ['RadioGroup.vue', 'RadioGroupItem.vue'] },
+    slider: { files: ['Slider.vue'] },
+    progress: { files: ['Progress.vue'] },
+    toggle: { files: ['Toggle.vue', 'toggle-variants.ts'] },
+    'toggle-group': { files: ['ToggleGroup.vue', 'ToggleGroupItem.vue', 'toggle-group-key.ts'] },
+    'brutalist-hero': { files: ['BrutalistHero.vue'] },
+    'pricing-section': { files: ['PricingSection.vue'] },
+    'auth-card': { files: ['AuthCard.vue'] },
+    'dashboard-shell': { files: ['DashboardShell.vue'] },
+    'empty-state': { files: ['EmptyState.vue'] },
+    'waitlist-page': { files: ['WaitlistPage.vue'] },
+    accordion: { files: ['Accordion.vue', 'AccordionItem.vue', 'AccordionTrigger.vue', 'AccordionContent.vue', 'accordion-variants.ts'] },
+    'tags-input': { files: ['TagsInput.vue', 'TagsInputInput.vue', 'TagsInputItem.vue', 'TagsInputItemText.vue', 'TagsInputItemDelete.vue', 'tags-input-variants.ts'] },
+    'number-input': { files: ['NumberInput.vue'] },
+    'copy-to-clipboard': { files: ['CopyToClipboard.vue'], composables: ['useClipboard.ts'] },
+    breadcrumb: { files: ['Breadcrumb.vue', 'BreadcrumbList.vue', 'BreadcrumbItem.vue', 'BreadcrumbLink.vue', 'BreadcrumbPage.vue', 'BreadcrumbSeparator.vue', 'BreadcrumbEllipsis.vue'] },
+    marquee: { files: ['Marquee.vue'] },
+    'before-after': { files: ['BeforeAfter.vue'] },
+    'code-block': { files: ['CodeBlock.vue'] },
+    timeline: { files: ['Timeline.vue', 'TimelineItem.vue', 'TimelineSeparator.vue', 'TimelineDot.vue', 'TimelineConnector.vue', 'TimelineContent.vue', 'timeline-variants.ts'] },
+    carousel: { files: ['Carousel.vue', 'CarouselItem.vue', 'carousel-variants.ts'] },
+    'tree-view': { files: ['TreeView.vue', 'TreeViewNode.vue', 'tree-view-variants.ts'] },
+    kanban: { files: ['KanbanBoard.vue', 'kanban-variants.ts'] },
+    'chat-bubble': { files: ['ChatBubble.vue', 'chat-bubble-variants.ts'] },
+    kbd: { files: ['Kbd.vue', 'kbd-variants.ts'] },
+    counter: { files: ['Counter.vue', 'counter-variants.ts'] },
+    stepper: { files: ['Stepper.vue', 'stepper-variants.ts'] },
+    'card-3d': { files: ['Card3D.vue', 'card-3d-variants.ts'], composables: ['useReducedMotion.ts'] },
+    'glitch-text': { files: ['GlitchText.vue', 'glitch-text-variants.ts'], composables: ['useReducedMotion.ts'] },
+    'scratch-card': { files: ['ScratchCard.vue', 'scratch-card-variants.ts'], composables: ['useReducedMotion.ts'] },
+    'sketchy-chart': { files: ['SketchyChart.vue', 'sketchy-chart-variants.ts'] },
+    'hardcore-input': { files: ['HardcoreInput.vue', 'hardcore-input-variants.ts'], composables: ['useAudioEngine.ts'] },
+    'testimonial-card': { files: ['TestimonialCard.vue'] },
+    'blog-card': { files: ['BlogCard.vue'] },
+    'file-card': { files: ['FileCard.vue'] },
+    'quick-actions': { files: ['QuickActions.vue'] },
+    'faq-section': { files: ['FaqSection.vue'] },
+    'tabs-nav': { files: ['TabsNav.vue'] },
+    'header-section': { files: ['HeaderSection.vue'] },
+    'footer-section': { files: ['FooterSection.vue'] },
+    'not-found-page': { files: ['NotFoundPage.vue'] },
+    'loading-page': { files: ['LoadingPage.vue'] },
+    'error-card': { files: ['ErrorCard.vue'] },
+    'success-card': { files: ['SuccessCard.vue'] },
+    'search-widget': { files: ['SearchWidget.vue'] },
+    'feedback-form': { files: ['FeedbackForm.vue'] },
+    'stepper-section': { files: ['StepperSection.vue'] },
+    'cookie-consent': { files: ['CookieConsent.vue'] },
+    'data-table-section': { files: ['DataTableSection.vue'] },
+    'settings-page': { files: ['SettingsPage.vue'] },
+    'blog-list-page': { files: ['BlogListPage.vue'] },
+    'activity-log-page': { files: ['ActivityLogPage.vue'] },
+    'profile-page': { files: ['ProfilePage.vue'] },
+    'chart-section': { files: ['ChartSection.vue'] },
+    'gallery-section': { files: ['GallerySection.vue'] },
+    'upload-card': { files: ['UploadCard.vue'] },
+    'overview-page': { files: ['OverviewPage.vue'] },
+};
+
+const FILE_TO_COMPONENT: Record<string, string> = {};
+for (const [compName, mapping] of Object.entries(COMPONENT_FILES)) {
+    for (const file of mapping.files) {
+        FILE_TO_COMPONENT[file] = compName;
+    }
+}
+
 function readComponentSource(filePath: string): string {
     return fs.readFileSync(filePath, 'utf-8').replace(/\r\n/g, '\n');
 }
 
+function rewriteImports(code: string, _componentName: string): string {
+    code = code.replace(/['"]\.\.\/lib\/utils['"]/g, "'@/lib/utils'");
+    code = code.replace(/['"]\.\.\/\.\.\/lib\/utils['"]/g, "'@/lib/utils'");
+    code = code.replace(/['"]\.\.\/composables\/([^'"]+)['"]/g, "'@/composables/$1'");
+    code = code.replace(/['"]\.\.\/\.\.\/composables\/([^'"]+)['"]/g, "'@/composables/$1'");
+    code = code.replace(
+        /['"]\.\.\/components\/([a-zA-Z0-9-]+)\/([^'"]+)['"]/g,
+        (m, comp, rest) => (COMPONENT_FILES[comp] ? `'@/components/ui/${comp}/${rest}'` : m)
+    );
+
+    const allFiles = Object.keys(FILE_TO_COMPONENT);
+
+    for (const file of allFiles) {
+        const targetComponent = FILE_TO_COMPONENT[file];
+        const baseName = file.replace(/\.(vue|ts)$/, '');
+
+        // Match ./baseName (same-directory sibling imports)
+        const relativeImportWithExt = new RegExp(
+            `(['"])\\.\\/${baseName}\\.vue(['"])`,
+            'g'
+        );
+        code = code.replace(
+            relativeImportWithExt,
+            `$1@/components/ui/${targetComponent}/${baseName}.vue$2`
+        );
+
+        const relativeImportWithoutExt = new RegExp(
+            `(['"])\\.\\/${baseName}(['"])`,
+            'g'
+        );
+        code = code.replace(
+            relativeImportWithoutExt,
+            `$1@/components/ui/${targetComponent}/${baseName}$2`
+        );
+
+        // Match ../component/baseName (cross-component imports)
+        const crossComponentWithExt = new RegExp(
+            `(['"])\\.\\.\\/[a-zA-Z0-9-]+\\/${baseName}\\.vue(['"])`,
+            'g'
+        );
+        code = code.replace(
+            crossComponentWithExt,
+            `$1@/components/ui/${targetComponent}/${baseName}.vue$2`
+        );
+
+        const crossComponentWithoutExt = new RegExp(
+            `(['"])\\.\\.\\/[a-zA-Z0-9-]+\\/${baseName}(['"])`,
+            'g'
+        );
+        code = code.replace(
+            crossComponentWithoutExt,
+            `$1@/components/ui/${targetComponent}/${baseName}$2`
+        );
+    }
+
+    return code;
+}
+
+function extractRegistryDeps(code: string, componentName: string): string[] {
+    const deps = new Set<string>();
+    const matches = code.match(/@\/components\/ui\/([a-zA-Z0-9-]+)/g);
+    if (matches) {
+        for (const match of matches) {
+            const depName = match.replace('@/components/ui/', '');
+            if (depName !== componentName && COMPONENT_FILES[depName]) {
+                deps.add(depName);
+            }
+        }
+    }
+    return Array.from(deps);
+}
+
+const TAILWIND_CONFIG = {
+    config: {
+        theme: {
+            extend: {
+                borderWidth: {
+                    '3': 'var(--brutal-border-width, 3px)'
+                },
+                borderColor: {
+                    brutal: 'var(--brutal-border-color, #000000)'
+                },
+                borderRadius: {
+                    brutal: 'var(--brutal-radius, 0px)'
+                },
+                colors: {
+                    'brutal-bg': 'var(--brutal-bg, #ffffff)',
+                    'brutal-fg': 'var(--brutal-fg, #000000)',
+                    'brutal-primary': 'var(--brutal-primary, #FF6B6B)',
+                    'brutal-secondary': 'var(--brutal-secondary, #4ECDC4)',
+                    'brutal-accent': 'var(--brutal-accent, #FFE66D)',
+                    'brutal-destructive': 'var(--brutal-destructive, #EF476F)',
+                    'brutal-success': 'var(--brutal-success, #7FB069)',
+                    'brutal-muted': 'var(--brutal-muted, #f3f4f6)',
+                    'brutal-ring': 'var(--brutal-ring, #000000)',
+                    'brutal-info': 'var(--brutal-info, #4A90D9)',
+                    'brutal-muted-foreground': 'var(--brutal-muted-foreground, #4B5563)',
+                    'brutal-overlay': 'var(--brutal-overlay, rgba(0, 0, 0, 0.5))',
+                    'brutal-placeholder': 'var(--brutal-placeholder, #9CA3AF)'
+                },
+                boxShadow: {
+                    brutal: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
+                    'brutal-sm': 'calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)',
+                    'brutal-lg': 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
+                    'brutal-xl': 'calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)'
+                }
+            }
+        }
+    }
+};
+
+const CSS_VARS = {
+    light: {
+        'brutal-border-width': '3px',
+        'brutal-border-color': '#000000',
+        'brutal-shadow-offset-x': '4px',
+        'brutal-shadow-offset-y': '4px',
+        'brutal-shadow-color': '#000000',
+        'brutal-radius': '0px',
+        'brutal-pressed-offset': '2px',
+        'brutal-bg': '#ffffff',
+        'brutal-fg': '#000000',
+        'brutal-primary': '#FF6B6B',
+        'brutal-secondary': '#4ECDC4',
+        'brutal-accent': '#FFE66D',
+        'brutal-destructive': '#EF476F',
+        'brutal-success': '#7FB069',
+        'brutal-muted': '#f3f4f6',
+        'brutal-ring': '#000000',
+        'brutal-info': '#4A90D9',
+        'brutal-muted-foreground': '#4B5563',
+        'brutal-overlay': 'rgba(0, 0, 0, 0.5)',
+        'brutal-placeholder': '#9CA3AF'
+    },
+    dark: {
+        'brutal-border-width': '3px',
+        'brutal-border-color': '#ffffff',
+        'brutal-shadow-offset-x': '4px',
+        'brutal-shadow-offset-y': '4px',
+        'brutal-shadow-color': '#ffffff',
+        'brutal-radius': '0px',
+        'brutal-pressed-offset': '2px',
+        'brutal-bg': '#141414',
+        'brutal-fg': '#ffffff',
+        'brutal-primary': '#FF6B6B',
+        'brutal-secondary': '#4ECDC4',
+        'brutal-accent': '#FFE66D',
+        'brutal-destructive': '#EF476F',
+        'brutal-success': '#7FB069',
+        'brutal-muted': '#1e1e1e',
+        'brutal-ring': '#ffffff',
+        'brutal-info': '#3B82F6',
+        'brutal-muted-foreground': '#9CA3AF',
+        'brutal-overlay': 'rgba(0, 0, 0, 0.7)',
+        'brutal-placeholder': '#6B7280'
+    }
+};
+
 async function run() {
     console.log('🚀 Starting registry build...');
 
@@ -26,42 +283,63 @@ async function run() {
         fs.mkdirSync(OUTPUT_DIR, { recursive: true });
     }
 
-    const componentNames = Object.keys(COMPONENTS);
+    const componentNames = Object.keys(COMPONENT_FILES);
     console.log(`📦 Found ${componentNames.length} components to process.`);
 
     const registryIndex: Record<string, any> = {
-        name: 'brutx',
-        homepage: 'https://brutxui.site',
+        name: 'brutx-vue',
+        homepage: 'https://lidaixingchen.github.io/brutxui-vue3/',
         items: []
     };
 
     for (const name of componentNames) {
         try {
             const componentInfo = COMPONENTS[name];
-            const componentFilePath = path.join(UI_COMPONENTS_DIR, `${name}.tsx`);
+            const fileMapping = COMPONENT_FILES[name];
 
-            if (!fs.existsSync(componentFilePath)) {
-                throw new Error(`Source file not found at ${componentFilePath}`);
+            if (!fileMapping) {
+                throw new Error(`No file mapping found for component "${name}"`);
             }
 
-            let code = readComponentSource(componentFilePath);
+            const allRegistryDeps = new Set<string>();
+            const files: { path: string; content: string; type: string }[] = [];
+
+            for (const fileName of fileMapping.files) {
+                const filePath = path.join(UI_COMPONENTS_DIR, name, fileName);
 
-            code = code.replace(/['"]\.\.\/lib\/utils['"]/g, "'@/lib/utils'");
-            code = code.replace(/['"]\.\.\/\.\.\/lib\/utils['"]/g, "'@/lib/utils'");
+                if (!fs.existsSync(filePath)) {
+                    throw new Error(`Source file not found at ${filePath}`);
+                }
 
-            for (const otherName of componentNames) {
-                const relativeImportRegex = new RegExp(`(['"])\\.\\/${otherName}(['"])`, 'g');
-                code = code.replace(relativeImportRegex, `$1@/components/ui/${otherName}$2`);
+                let code = readComponentSource(filePath);
+                code = rewriteImports(code, name);
+
+                const deps = extractRegistryDeps(code, name);
+                deps.forEach(d => allRegistryDeps.add(d));
+
+                files.push({
+                    path: `components/ui/${name}/${fileName}`,
+                    content: code,
+                    type: 'registry:ui'
+                });
             }
 
-            const registryDeps = new Set<string>();
-            const matches = code.match(/@\/components\/ui\/([a-zA-Z0-9-]+)/g);
-            if (matches) {
-                for (const match of matches) {
-                    const depName = match.replace('@/components/ui/', '');
-                    if (depName !== name && componentNames.includes(depName)) {
-                        registryDeps.add(depName);
+            if (fileMapping.composables) {
+                for (const composableName of fileMapping.composables) {
+                    const composablePath = path.join(UI_COMPOSABLES_DIR, composableName);
+
+                    if (!fs.existsSync(composablePath)) {
+                        throw new Error(`Composable file not found at ${composablePath}`);
                     }
+
+                    let code = readComponentSource(composablePath);
+                    code = rewriteImports(code, name);
+
+                    files.push({
+                        path: `composables/${composableName}`,
+                        content: code,
+                        type: 'registry:ui'
+                    });
                 }
             }
 
@@ -70,83 +348,7 @@ async function run() {
                 .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                 .join(' ');
 
-            const description = `A highly customizable neo-brutalist ${title} component built with Brutx design tokens.`;
-
-            const tailwind = {
-                config: {
-                    theme: {
-                        extend: {
-                            borderWidth: {
-                                '3': 'var(--brutal-border-width, 3px)'
-                            },
-                            borderColor: {
-                                brutal: 'var(--brutal-border-color, #000000)'
-                            },
-                            borderRadius: {
-                                brutal: 'var(--brutal-radius, 0px)'
-                            },
-                            colors: {
-                                'brutal-bg': 'var(--brutal-bg, #ffffff)',
-                                'brutal-fg': 'var(--brutal-fg, #000000)',
-                                'brutal-primary': 'var(--brutal-primary, #FF6B6B)',
-                                'brutal-secondary': 'var(--brutal-secondary, #4ECDC4)',
-                                'brutal-accent': 'var(--brutal-accent, #FFE66D)',
-                                'brutal-destructive': 'var(--brutal-destructive, #EF476F)',
-                                'brutal-success': 'var(--brutal-success, #7FB069)',
-                                'brutal-muted': 'var(--brutal-muted, #f3f4f6)',
-                                'brutal-ring': 'var(--brutal-ring, #000000)'
-                            },
-                            boxShadow: {
-                                brutal: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
-                                'brutal-sm': 'calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)',
-                                'brutal-lg': 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
-                                'brutal-xl': 'calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)'
-                            }
-                        }
-                    }
-                }
-            };
-
-            const cssVars = {
-                light: {
-                    'brutal-border-width': '3px',
-                    'brutal-border-color': '#000000',
-                    'brutal-shadow-offset-x': '4px',
-                    'brutal-shadow-offset-y': '4px',
-                    'brutal-shadow-color': '#000000',
-                    'brutal-radius': '0px',
-                    'brutal-pressed-offset': '2px',
-                    'brutal-bg': '#ffffff',
-                    'brutal-fg': '#000000',
-                    'brutal-primary': '#FF6B6B',
-                    'brutal-secondary': '#4ECDC4',
-                    'brutal-accent': '#FFE66D',
-                    'brutal-destructive': '#EF476F',
-                    'brutal-success': '#7FB069',
-                    'brutal-muted': '#f3f4f6',
-                    'brutal-ring': '#000000',
-                    'brutal-info': '#4A90D9'
-                },
-                dark: {
-                    'brutal-border-width': '3px',
-                    'brutal-border-color': '#ffffff',
-                    'brutal-shadow-offset-x': '4px',
-                    'brutal-shadow-offset-y': '4px',
-                    'brutal-shadow-color': '#ffffff',
-                    'brutal-radius': '0px',
-                    'brutal-pressed-offset': '2px',
-                    'brutal-bg': '#111827',
-                    'brutal-fg': '#ffffff',
-                    'brutal-primary': '#FF6B6B',
-                    'brutal-secondary': '#4ECDC4',
-                    'brutal-accent': '#FFE66D',
-                    'brutal-destructive': '#EF476F',
-                    'brutal-success': '#7FB069',
-                    'brutal-muted': '#1f2937',
-                    'brutal-ring': '#ffffff',
-                    'brutal-info': '#4A90D9'
-                }
-            };
+            const description = `A highly customizable neo-brutalist ${title} component built with Brutx design tokens for Vue 3.`;
 
             const registryItem = {
                 $schema: 'https://ui.shadcn.com/schema/registry-item.json',
@@ -154,38 +356,30 @@ async function run() {
                 type: 'registry:ui',
                 title: title,
                 description: description,
-                dependencies: componentInfo.dependencies || [],
-                registryDependencies: Array.from(registryDeps),
-                files: [
-                    {
-                        path: `components/ui/${name}.tsx`,
-                        content: code,
-                        type: 'registry:ui'
-                    }
-                ],
-                tailwind,
-                cssVars
+                dependencies: componentInfo?.dependencies || [],
+                registryDependencies: Array.from(allRegistryDeps),
+                files,
+                tailwind: TAILWIND_CONFIG,
+                cssVars: CSS_VARS
             };
 
             const outputPath = path.join(OUTPUT_DIR, `${name}.json`);
             fs.writeFileSync(outputPath, JSON.stringify(registryItem, null, 2), 'utf-8');
-            console.log(`✓ Generated ${name}.json (Registry dependencies: [${Array.from(registryDeps).join(', ')}])`);
+            console.log(`✓ Generated ${name}.json (${files.length} files, Registry dependencies: [${Array.from(allRegistryDeps).join(', ')}])`);
 
             registryIndex.items.push({
                 name: name,
                 type: 'registry:ui',
                 title: title,
                 description: description,
-                dependencies: componentInfo.dependencies || [],
-                registryDependencies: Array.from(registryDeps),
-                files: [
-                    {
-                        path: `components/ui/${name}.tsx`,
-                        type: 'registry:ui'
-                    }
-                ],
-                tailwind,
-                cssVars
+                dependencies: componentInfo?.dependencies || [],
+                registryDependencies: Array.from(allRegistryDeps),
+                files: files.map(f => ({
+                    path: f.path,
+                    type: f.type
+                })),
+                tailwind: TAILWIND_CONFIG,
+                cssVars: CSS_VARS
             });
         } catch (err: any) {
             console.error(`✗ Failed to process component ${name}:`, err.message || err);
diff --git a/packages/registry/scripts/validate-registry.ts b/packages/registry/scripts/validate-registry.ts
index 2141e83..3d0fa9a 100644
--- a/packages/registry/scripts/validate-registry.ts
+++ b/packages/registry/scripts/validate-registry.ts
@@ -19,6 +19,7 @@ function validate() {
     console.log(`📋 Found ${files.length} registry items to validate.`);
 
     let errorCount = 0;
+    let totalFiles = 0;
 
     for (const file of files) {
         const filePath = path.join(REGISTRY_DIR, file);
@@ -56,9 +57,15 @@ function validate() {
                 console.error(`✗ [${file}] files array is missing or empty.`);
                 errorCount++;
             } else {
+                totalFiles += data.files.length;
                 for (const fileObj of data.files) {
                     if (!fileObj.path || !fileObj.content) {
-                        console.error(`✗ [${file}] Invalid file object in files array.`);
+                        console.error(`✗ [${file}] Invalid file object in files array (missing path or content).`);
+                        errorCount++;
+                    }
+
+                    if (!fileObj.path.startsWith(`components/ui/${data.name}/`) && !fileObj.path.startsWith('composables/')) {
+                        console.error(`✗ [${file}] File path "${fileObj.path}" does not match expected pattern "components/ui/${data.name}/" or "composables/".`);
                         errorCount++;
                     }
                 }
@@ -67,6 +74,13 @@ function validate() {
             if (!Array.isArray(data.dependencies)) {
                 console.error(`✗ [${file}] dependencies must be an array.`);
                 errorCount++;
+            } else {
+                for (const dep of data.dependencies) {
+                    if (dep.includes('@radix-ui') || dep.includes('lucide-react') || dep.includes('react-hook-form') || dep.includes('cmdk') || dep.includes('react-day-picker')) {
+                        console.error(`✗ [${file}] Found React dependency "${dep}" — should be Vue equivalent.`);
+                        errorCount++;
+                    }
+                }
             }
             if (!Array.isArray(data.registryDependencies)) {
                 console.error(`✗ [${file}] registryDependencies must be an array.`);
@@ -88,6 +102,8 @@ function validate() {
         }
     }
 
+    console.log(`\n📊 Total files across all registry items: ${totalFiles}`);
+
     if (errorCount > 0) {
         console.error(`\n❌ Validation failed with ${errorCount} errors.`);
         process.exit(1);
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 162be93..f27ad75 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,5 +1,5 @@
 {
-    "name": "brutx-shared",
+    "name": "brutx-shared-vue",
     "version": "0.1.0",
     "private": true,
     "type": "module",
diff --git a/packages/shared/src/components.ts b/packages/shared/src/components.ts
index c2cc1ea..d698742 100644
--- a/packages/shared/src/components.ts
+++ b/packages/shared/src/components.ts
@@ -1,55 +1,101 @@
 import type { ComponentMeta } from './types.js';
 
 export const COMPONENTS: Record<string, ComponentMeta> = {
-    alert: { name: 'alert', dependencies: ['lucide-react'] },
-    avatar: { name: 'avatar', dependencies: ['@radix-ui/react-avatar'] },
+    alert: { name: 'alert', dependencies: ['lucide-vue-next'] },
+    avatar: { name: 'avatar', dependencies: ['reka-ui'] },
     badge: { name: 'badge', dependencies: [] },
-    button: { name: 'button', dependencies: ['@radix-ui/react-slot'] },
-    calendar: { name: 'calendar', dependencies: ['react-day-picker', 'date-fns', 'lucide-react'] },
+    button: { name: 'button', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    calendar: { name: 'calendar', dependencies: ['v-calendar', 'lucide-vue-next'] },
     card: { name: 'card', dependencies: [] },
-    checkbox: { name: 'checkbox', dependencies: ['@radix-ui/react-checkbox', 'lucide-react'] },
+    checkbox: { name: 'checkbox', dependencies: ['reka-ui', 'lucide-vue-next'] },
     combobox: {
         name: 'combobox',
-        dependencies: ['cmdk', '@radix-ui/react-popover', 'lucide-react'],
+        dependencies: ['reka-ui', 'lucide-vue-next'],
     },
-    command: { name: 'command', dependencies: ['cmdk', 'lucide-react'] },
-    dialog: { name: 'dialog', dependencies: ['@radix-ui/react-dialog', 'lucide-react'] },
+    command: { name: 'command', dependencies: ['reka-ui'] },
+    dialog: { name: 'dialog', dependencies: ['reka-ui', 'lucide-vue-next'] },
     'dropdown-menu': {
         name: 'dropdown-menu',
-        dependencies: ['@radix-ui/react-dropdown-menu', 'lucide-react'],
+        dependencies: ['reka-ui', 'lucide-vue-next'],
     },
     input: { name: 'input', dependencies: [] },
-    label: { name: 'label', dependencies: ['@radix-ui/react-label'] },
-    pagination: { name: 'pagination', dependencies: ['lucide-react'] },
-    popover: { name: 'popover', dependencies: ['@radix-ui/react-popover'] },
-    'scroll-area': { name: 'scroll-area', dependencies: ['@radix-ui/react-scroll-area'] },
-    select: { name: 'select', dependencies: ['@radix-ui/react-select', 'lucide-react'] },
-    separator: { name: 'separator', dependencies: ['@radix-ui/react-separator'] },
+    label: { name: 'label', dependencies: ['reka-ui'] },
+    pagination: { name: 'pagination', dependencies: ['lucide-vue-next'] },
+    popover: { name: 'popover', dependencies: ['reka-ui'] },
+    'scroll-area': { name: 'scroll-area', dependencies: ['reka-ui'] },
+    select: { name: 'select', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    separator: { name: 'separator', dependencies: ['reka-ui'] },
     skeleton: { name: 'skeleton', dependencies: [] },
     spinner: { name: 'spinner', dependencies: [] },
-    'submit-button': { name: 'submit-button', dependencies: [] },
-    switch: { name: 'switch', dependencies: ['@radix-ui/react-switch'] },
+    'submit-button': { name: 'submit-button', dependencies: ['lucide-vue-next'] },
+    switch: { name: 'switch', dependencies: ['reka-ui'] },
     table: { name: 'table', dependencies: [] },
-    tabs: { name: 'tabs', dependencies: ['@radix-ui/react-tabs'] },
+    tabs: { name: 'tabs', dependencies: ['reka-ui'] },
     textarea: { name: 'textarea', dependencies: [] },
-    toast: { name: 'toast', dependencies: ['lucide-react'] },
-    tooltip: { name: 'tooltip', dependencies: ['@radix-ui/react-tooltip'] },
-    'saas-pricing': { name: 'saas-pricing', dependencies: ['lucide-react'] },
-    'dashboard-stats': { name: 'dashboard-stats', dependencies: ['lucide-react'] },
-    form: { name: 'form', dependencies: ['react-hook-form', 'zod', '@radix-ui/react-label', '@radix-ui/react-slot'] },
-    'alert-dialog': { name: 'alert-dialog', dependencies: ['@radix-ui/react-alert-dialog'] },
-    sheet: { name: 'sheet', dependencies: ['@radix-ui/react-dialog', 'lucide-react'] },
-    'radio-group': { name: 'radio-group', dependencies: ['@radix-ui/react-radio-group', 'lucide-react'] },
-    slider: { name: 'slider', dependencies: ['@radix-ui/react-slider'] },
-    progress: { name: 'progress', dependencies: ['@radix-ui/react-progress'] },
-    toggle: { name: 'toggle', dependencies: ['@radix-ui/react-toggle'] },
-    'toggle-group': { name: 'toggle-group', dependencies: ['@radix-ui/react-toggle-group'] },
-    'brutalist-hero': { name: 'brutalist-hero', dependencies: ['lucide-react'] },
-    'pricing-section': { name: 'pricing-section', dependencies: ['lucide-react'] },
-    'auth-card': { name: 'auth-card', dependencies: ['lucide-react'] },
-    'dashboard-shell': { name: 'dashboard-shell', dependencies: ['lucide-react'] },
-    'empty-state': { name: 'empty-state', dependencies: ['lucide-react'] },
-    'waitlist-page': { name: 'waitlist-page', dependencies: ['lucide-react'] },
+    toast: { name: 'toast', dependencies: ['lucide-vue-next'] },
+    tooltip: { name: 'tooltip', dependencies: ['reka-ui'] },
+    'saas-pricing': { name: 'saas-pricing', dependencies: ['lucide-vue-next'] },
+    'dashboard-stats': { name: 'dashboard-stats', dependencies: ['lucide-vue-next'] },
+    form: { name: 'form', dependencies: ['vee-validate', '@vee-validate/zod', 'zod', 'reka-ui'] },
+    'alert-dialog': { name: 'alert-dialog', dependencies: ['reka-ui'] },
+    sheet: { name: 'sheet', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'radio-group': { name: 'radio-group', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    slider: { name: 'slider', dependencies: ['reka-ui'] },
+    progress: { name: 'progress', dependencies: ['reka-ui'] },
+    toggle: { name: 'toggle', dependencies: ['reka-ui'] },
+    'toggle-group': { name: 'toggle-group', dependencies: ['reka-ui'] },
+    'brutalist-hero': { name: 'brutalist-hero', dependencies: ['lucide-vue-next'] },
+    'pricing-section': { name: 'pricing-section', dependencies: ['lucide-vue-next'] },
+    'auth-card': { name: 'auth-card', dependencies: ['lucide-vue-next'] },
+    'dashboard-shell': { name: 'dashboard-shell', dependencies: ['lucide-vue-next'] },
+    'empty-state': { name: 'empty-state', dependencies: ['lucide-vue-next'] },
+    'waitlist-page': { name: 'waitlist-page', dependencies: ['lucide-vue-next'] },
+    accordion: { name: 'accordion', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'tags-input': { name: 'tags-input', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'number-input': { name: 'number-input', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'copy-to-clipboard': { name: 'copy-to-clipboard', dependencies: ['lucide-vue-next'] },
+    breadcrumb: { name: 'breadcrumb', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    marquee: { name: 'marquee', dependencies: [] },
+    'before-after': { name: 'before-after', dependencies: [] },
+    'code-block': { name: 'code-block', dependencies: ['lucide-vue-next'] },
+    timeline: { name: 'timeline', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    carousel: { name: 'carousel', dependencies: ['embla-carousel-vue', 'lucide-vue-next'] },
+    'tree-view': { name: 'tree-view', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    kanban: { name: 'kanban', dependencies: ['lucide-vue-next'] },
+    'chat-bubble': { name: 'chat-bubble', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    kbd: { name: 'kbd', dependencies: [] },
+    counter: { name: 'counter', dependencies: [] },
+    stepper: { name: 'stepper', dependencies: ['lucide-vue-next'] },
+    'card-3d': { name: 'card-3d', dependencies: [] },
+    'glitch-text': { name: 'glitch-text', dependencies: [] },
+    'scratch-card': { name: 'scratch-card', dependencies: [] },
+    'sketchy-chart': { name: 'sketchy-chart', dependencies: [] },
+    'hardcore-input': { name: 'hardcore-input', dependencies: [] },
+    'testimonial-card': { name: 'testimonial-card', dependencies: ['lucide-vue-next'] },
+    'blog-card': { name: 'blog-card', dependencies: ['lucide-vue-next'] },
+    'file-card': { name: 'file-card', dependencies: ['lucide-vue-next'] },
+    'quick-actions': { name: 'quick-actions', dependencies: ['lucide-vue-next'] },
+    'faq-section': { name: 'faq-section', dependencies: ['lucide-vue-next'] },
+    'tabs-nav': { name: 'tabs-nav', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'header-section': { name: 'header-section', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'footer-section': { name: 'footer-section', dependencies: ['lucide-vue-next'] },
+    'not-found-page': { name: 'not-found-page', dependencies: ['lucide-vue-next'] },
+    'loading-page': { name: 'loading-page', dependencies: ['lucide-vue-next'] },
+    'error-card': { name: 'error-card', dependencies: ['lucide-vue-next'] },
+    'success-card': { name: 'success-card', dependencies: ['lucide-vue-next'] },
+    'search-widget': { name: 'search-widget', dependencies: ['lucide-vue-next'] },
+    'feedback-form': { name: 'feedback-form', dependencies: ['lucide-vue-next'] },
+    'stepper-section': { name: 'stepper-section', dependencies: ['lucide-vue-next'] },
+    'cookie-consent': { name: 'cookie-consent', dependencies: ['lucide-vue-next'] },
+    'data-table-section': { name: 'data-table-section', dependencies: ['lucide-vue-next'] },
+    'settings-page': { name: 'settings-page', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'blog-list-page': { name: 'blog-list-page', dependencies: ['lucide-vue-next'] },
+    'activity-log-page': { name: 'activity-log-page', dependencies: ['lucide-vue-next'] },
+    'profile-page': { name: 'profile-page', dependencies: ['lucide-vue-next'] },
+    'chart-section': { name: 'chart-section', dependencies: ['reka-ui', 'lucide-vue-next'] },
+    'gallery-section': { name: 'gallery-section', dependencies: ['embla-carousel-vue', 'lucide-vue-next'] },
+    'upload-card': { name: 'upload-card', dependencies: ['lucide-vue-next'] },
+    'overview-page': { name: 'overview-page', dependencies: ['lucide-vue-next'] },
 } as const;
 
 export const AVAILABLE_COMPONENTS = Object.keys(COMPONENTS);
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 775c604..ad85f82 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -1,72 +1,72 @@
 # Brutx UI
 
-Neo-brutalism React component library with CLI support. Copy components into your codebase for full customization control.
+新粗野主义 Vue 3 组件库，支持 CLI 工具。将组件复制到你的代码库中，获得完全的自定义控制权。
 
-[![npm version](https://img.shields.io/npm/v/brutx-ui.svg?style=flat-square&color=FF6B6B)](https://www.npmjs.com/package/brutx-ui)
-[![npm downloads](https://img.shields.io/npm/dm/brutx-ui.svg?style=flat-square)](https://www.npmjs.com/package/brutx-ui)
+[![npm version](https://img.shields.io/npm/v/brutx-ui-vue.svg?style=flat-square&color=FF6B6B)](https://www.npmjs.com/package/brutx-ui-vue)
+[![npm downloads](https://img.shields.io/npm/dm/brutx-ui-vue.svg?style=flat-square)](https://www.npmjs.com/package/brutx-ui-vue)
 [![License: MIT](https://img.shields.io/badge/License-MIT-4ECDC4.svg?style=flat-square)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-FFE66D.svg?style=flat-square)](https://www.typescriptlang.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.7+-FFE66D.svg?style=flat-square)](https://www.typescriptlang.org/)
 
-## Features
+## 特性
 
--   **CLI Tool**: Copy components into your codebase with `npx brutx@latest`
--   **Full Control**: Own and customize every component
--   Brutalist wrappers: bold borders, offset shadows, vibrant colors
--   Tailwind-ready tokens: background/foreground/primary/secondary/destructive, ring, input, card, etc. Dark mode via `.dark`
--   Radix-based primitives, CVA variants, and tailwind-merge `cn`
+-   **CLI 工具**：通过 `npx brutx@latest` 将组件复制到你的代码库
+-   **完全控制**：拥有并自定义每一个组件
+-   粗野主义包装器：粗边框、偏移阴影、鲜艳色彩
+-   Tailwind 就绪令牌：background/foreground/primary/secondary/destructive、ring、input、card 等。通过 `.dark` 支持暗色模式
+-   基于 reka-ui 的无头原语、CVA 变体、tailwind-merge `cn()`
 
-## Installation
+## 安装
 
-Use the CLI to add components to your project:
+使用 CLI 将组件添加到你的项目：
 
 ```bash
-# Initialize your project
+# 初始化你的项目
 npx brutx@latest init
 
-# Add components
+# 添加组件
 npx brutx@latest add button card badge
 
-# Or add all components
+# 或添加全部组件
 npx brutx@latest add --all
 ```
 
-## Usage
-
-After adding components, import them from your project:
-
-```tsx
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
-
-export function Example() {
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Welcome to Brutx</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-                <Input placeholder="Email" />
-                <Button variant="primary">Get Started</Button>
-                <Button variant="outline" size="sm">
-                    Learn More
-                </Button>
-            </CardContent>
-        </Card>
-    );
-}
+## 用法
+
+添加组件后，从你的项目中导入它们：
+
+```vue
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>欢迎使用 Brutx</CardTitle>
+    </CardHeader>
+    <CardContent class="space-y-3">
+      <Input placeholder="邮箱" />
+      <Button variant="primary">开始使用</Button>
+      <Button variant="outline" size="sm">
+        了解更多
+      </Button>
+    </CardContent>
+  </Card>
+</template>
 ```
 
-## CLI Commands
+## CLI 命令
 
-| Command                            | Description                             |
-| ---------------------------------- | --------------------------------------- |
-| `npx brutx@latest init`            | Initialize project with components.json |
-| `npx brutx@latest add <component>` | Add specific component(s)               |
-| `npx brutx@latest add --all`       | Add all components                      |
+| 命令                               | 说明                           |
+| ---------------------------------- | ------------------------------ |
+| `npx brutx@latest init`            | 使用 components.json 初始化项目 |
+| `npx brutx@latest add <component>` | 添加指定组件                   |
+| `npx brutx@latest add --all`       | 添加全部组件                   |
 
-## Notes
+## 备注
 
--   Dark mode: add/remove `.dark` on `html` or `body` to switch themes.
--   Components are copied to your project, giving you full ownership and customization control.
--   Tokens can be overridden by setting CSS variables (`--background`, `--primary`, etc.).
+-   暗色模式：在 `html` 或 `body` 上添加/移除 `.dark` 以切换主题。
+-   组件会复制到你的项目中，让你拥有完全的所有权和自定义控制权。
+-   令牌可通过设置 CSS 变量（`--background`、`--primary` 等）进行覆盖。
diff --git a/packages/ui/eslint.config.js b/packages/ui/eslint.config.js
new file mode 100644
index 0000000..7f019ec
--- /dev/null
+++ b/packages/ui/eslint.config.js
@@ -0,0 +1,41 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+export default tseslint.config(
+    {
+        ignores: ['**/dist/**', '**/node_modules/**', '**/*.d.ts', '**/brutalism-plugin.js'],
+    },
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    ...pluginVue.configs['flat/recommended'],
+    {
+        files: ['*.vue', '**/*.vue'],
+        languageOptions: {
+            parserOptions: {
+                parser: tseslint.parser,
+            },
+        },
+    },
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+            },
+        },
+        rules: {
+            'vue/multi-word-component-names': 'off',
+            'vue/max-attributes-per-line': 'off',
+            'vue/html-indent': 'off',
+            '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+            '@typescript-eslint/no-explicit-any': 'warn',
+        },
+    },
+    {
+        files: ['**/*.test.ts', '**/*.spec.ts'],
+        rules: {
+            'vue/one-component-per-file': 'off',
+        },
+    }
+)
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 90d1d54..d0d302f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,49 +1,39 @@
 {
-    "name": "brutx-ui",
-    "version": "0.3.0",
-    "description": "A Neo-Brutalism styled React UI component library",
-    "main": "./dist/index.js",
+    "name": "brutx-ui-vue",
+    "version": "0.5.2",
+    "description": "A Neo-Brutalism styled Vue 3 UI component library",
+    "main": "./dist/index.cjs",
     "module": "./dist/index.mjs",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
             "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
+            "require": "./dist/index.cjs"
         },
         "./calendar": {
             "types": "./dist/calendar.d.ts",
             "import": "./dist/calendar.mjs",
-            "require": "./dist/calendar.js"
+            "require": "./dist/calendar.cjs"
         },
         "./submit-button": {
             "types": "./dist/submit-button.d.ts",
             "import": "./dist/submit-button.mjs",
-            "require": "./dist/submit-button.js"
-        },
-        "./button": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        },
-        "./input": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
-        },
-        "./card": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.mjs",
-            "require": "./dist/index.js"
+            "require": "./dist/submit-button.cjs"
         },
         "./hooks": {
             "types": "./dist/hooks.d.ts",
             "import": "./dist/hooks.mjs",
-            "require": "./dist/hooks.js"
+            "require": "./dist/hooks.cjs"
         },
         "./brutalism-plugin": {
             "import": "./dist/brutalism-plugin.mjs",
-            "require": "./dist/brutalism-plugin.js"
+            "require": "./dist/brutalism-plugin.cjs"
+        },
+        "./locales": {
+            "types": "./dist/locales/index.d.ts",
+            "import": "./dist/locales/index.mjs",
+            "require": "./dist/locales/index.cjs"
         },
         "./styles.css": "./dist/styles.css"
     },
@@ -55,73 +45,58 @@
         "*.css"
     ],
     "scripts": {
-        "build": "tsup",
-        "dev": "tsup --watch",
+        "build": "vite build",
+        "dev": "vite build --watch",
         "clean": "rimraf dist",
-        "typecheck": "tsc --noEmit",
-        "lint": "eslint src --ext .ts,.tsx",
+        "typecheck": "vue-tsc --noEmit",
+        "lint": "eslint src",
         "test": "vitest run",
         "test:watch": "vitest",
         "test:coverage": "vitest run --coverage"
     },
     "peerDependencies": {
-        "lucide-react": ">=0.300.0",
-        "react": ">=18.0.0",
-        "react-dom": ">=18.0.0",
-        "tailwindcss": ">=3.0.0"
+        "lucide-vue-next": ">=0.300.0",
+        "tailwindcss": ">=3.0.0",
+        "vue": ">=3.5.0"
     },
     "dependencies": {
-        "@radix-ui/react-alert-dialog": "^1.1.15",
-        "@radix-ui/react-avatar": "^1.1.0",
-        "@radix-ui/react-checkbox": "^1.1.0",
-        "@radix-ui/react-dialog": "^1.1.0",
-        "@radix-ui/react-dropdown-menu": "^2.1.0",
-        "@radix-ui/react-label": "^2.1.8",
-        "@radix-ui/react-popover": "^1.1.0",
-        "@radix-ui/react-progress": "^1.1.8",
-        "@radix-ui/react-radio-group": "^1.3.8",
-        "@radix-ui/react-scroll-area": "^1.2.0",
-        "@radix-ui/react-select": "^2.1.0",
-        "@radix-ui/react-separator": "^1.1.0",
-        "@radix-ui/react-slider": "^1.3.6",
-        "@radix-ui/react-slot": "^1.1.0",
-        "@radix-ui/react-switch": "^1.1.0",
-        "@radix-ui/react-tabs": "^1.1.0",
-        "@radix-ui/react-toggle": "^1.1.10",
-        "@radix-ui/react-toggle-group": "^1.1.11",
-        "@radix-ui/react-tooltip": "^1.1.0",
+        "@vee-validate/zod": "^4.15.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
-        "cmdk": "^1.0.0",
-        "react-day-picker": "^9.4.4",
-        "react-hook-form": "^7.76.1",
+        "embla-carousel-vue": "^8.6.0",
+        "reka-ui": "^2.9.0",
         "tailwind-merge": "^2.2.0",
-        "zod": "^4.4.3"
+        "v-calendar": "^3.1.0",
+        "vee-validate": "^4.15.0",
+        "zod": "^3.25.0"
     },
     "devDependencies": {
-        "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/react": "^16.3.0",
-        "@testing-library/user-event": "^14.6.1",
+        "@eslint/js": "^10.0.1",
         "@types/node": "^20.17.15",
-        "@types/react": "^19.0.8",
-        "@types/react-dom": "^19.0.3",
-        "@vitejs/plugin-react": "^4.2.1",
-        "@vitest/coverage-v8": "^1.3.1",
+        "@vitejs/plugin-vue": "^5.2.0",
+        "@vitest/coverage-v8": "^3.0.0",
+        "@vue/test-utils": "^2.4.0",
         "autoprefixer": "^10.4.16",
-        "jsdom": "^24.0.0",
-        "lucide-react": "^0.555.0",
+        "eslint": "^10.4.1",
+        "eslint-plugin-vue": "^10.9.1",
+        "globals": "^16.0.0",
+        "jsdom": "^25.0.0",
+        "lucide-vue-next": "^0.510.0",
         "postcss": "^8.4.33",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
         "rimraf": "^5.0.5",
         "tailwindcss": "^3.4.0",
-        "tsup": "^8.0.1",
+        "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.7.2",
-        "vitest": "^1.3.1"
+        "typescript-eslint": "^8.60.0",
+        "vite": "^6.0.0",
+        "vite-plugin-dts": "^4.0.0",
+        "vitest": "^3.0.0",
+        "vue": "^3.5.0",
+        "vue-tsc": "^2.2.0"
     },
     "keywords": [
-        "react",
-        "react-components",
+        "vue",
+        "vue3",
         "ui",
         "ui-library",
         "ui-components",
@@ -132,20 +107,20 @@
         "design-system",
         "tailwindcss",
         "tailwind",
-        "radix-ui",
+        "reka-ui",
         "typescript",
         "frontend",
         "accessible",
         "dark-mode"
     ],
-    "author": "dev-snake",
+    "author": "lidaixingchen",
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/dev-snake/brutxui"
+        "url": "https://github.com/lidaixingchen/brutxui-vue3"
     },
     "bugs": {
-        "url": "https://github.com/dev-snake/brutxui/issues"
+        "url": "https://github.com/lidaixingchen/brutxui-vue3/issues"
     },
-    "homepage": "https://brutxui.site"
+    "homepage": "https://lidaixingchen.github.io/brutxui-vue3/"
 }
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
index 67cdf1a..fef1b22 100644
--- a/packages/ui/postcss.config.js
+++ b/packages/ui/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
         tailwindcss: {},
         autoprefixer: {},
     },
-};
+}
diff --git a/packages/ui/src/__tests__/components/alert-dialog.test.tsx b/packages/ui/src/__tests__/components/alert-dialog.test.tsx
deleted file mode 100644
index 4d4de07..0000000
--- a/packages/ui/src/__tests__/components/alert-dialog.test.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-    AlertDialog,
-    AlertDialogTrigger,
-    AlertDialogContent,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogAction,
-    AlertDialogCancel,
-} from '../../components/alert-dialog';
-import { Button } from '../../components/button';
-
-function TestAlertDialog({
-    defaultOpen = false,
-    onOpenChange,
-}: {
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}) {
-    return (
-        <AlertDialog defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-            <AlertDialogTrigger asChild>
-                <Button>Open Alert</Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-                <AlertDialogHeader>
-                    <AlertDialogTitle>Test Alert</AlertDialogTitle>
-                    <AlertDialogDescription>Alert description context</AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                    <AlertDialogCancel asChild>
-                        <Button variant="outline">Discard</Button>
-                    </AlertDialogCancel>
-                    <AlertDialogAction asChild variant="destructive">
-                        <Button variant="danger">Confirm Action</Button>
-                    </AlertDialogAction>
-                </AlertDialogFooter>
-            </AlertDialogContent>
-        </AlertDialog>
-    );
-}
-
-describe('AlertDialog', () => {
-    it('is closed by default', () => {
-        render(<TestAlertDialog />);
-        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
-    });
-
-    it('opens when trigger is clicked', async () => {
-        render(<TestAlertDialog />);
-        await userEvent.click(screen.getByRole('button', { name: 'Open Alert' }));
-        expect(screen.getByRole('alertdialog')).toBeInTheDocument();
-        expect(screen.getByText('Test Alert')).toBeInTheDocument();
-    });
-
-    it('closes when Cancel is clicked', async () => {
-        render(<TestAlertDialog defaultOpen />);
-        expect(screen.getByRole('alertdialog')).toBeInTheDocument();
-
-        await userEvent.click(screen.getByRole('button', { name: 'Discard' }));
-        await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
-    });
-
-    it('closes when Action is clicked', async () => {
-        render(<TestAlertDialog defaultOpen />);
-        expect(screen.getByRole('alertdialog')).toBeInTheDocument();
-
-        await userEvent.click(screen.getByRole('button', { name: 'Confirm Action' }));
-        await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
-    });
-});
diff --git a/packages/ui/src/__tests__/components/auth-card.test.tsx b/packages/ui/src/__tests__/components/auth-card.test.tsx
deleted file mode 100644
index e70beb6..0000000
--- a/packages/ui/src/__tests__/components/auth-card.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { AuthCard } from '../../components/auth-card';
-
-describe('AuthCard', () => {
-    it('renders login components, inputs and OAuth button rows', () => {
-        render(<AuthCard title="Login Gateway" description="Demo description" />);
-        expect(screen.getByText('Login Gateway')).toBeInTheDocument();
-        expect(screen.getByText('Demo description')).toBeInTheDocument();
-
-        expect(screen.getByLabelText('Email Address')).toBeInTheDocument();
-        expect(screen.getByLabelText('Password')).toBeInTheDocument();
-
-        expect(screen.getByRole('button', { name: 'Google' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'GitHub' })).toBeInTheDocument();
-    });
-
-    it('submits email/password credential input values correctly', async () => {
-        const onSubmit = vi.fn();
-        render(<AuthCard onLoginSubmit={onSubmit} />);
-
-        const emailInput = screen.getByLabelText('Email Address');
-        const passwordInput = screen.getByLabelText('Password');
-        const submitBtn = screen.getByRole('button', { name: 'Access Account console' });
-
-        await userEvent.type(emailInput, 'creator@brutxui.site');
-        await userEvent.type(passwordInput, 'admin123');
-        await userEvent.click(submitBtn);
-
-        expect(onSubmit).toHaveBeenCalledOnce();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/badge.test.tsx b/packages/ui/src/__tests__/components/badge.test.tsx
deleted file mode 100644
index b4b6cd2..0000000
--- a/packages/ui/src/__tests__/components/badge.test.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Badge } from '../../components/badge';
-
-describe('Badge', () => {
-    it('renders correctly', () => {
-        render(<Badge>New</Badge>);
-        expect(screen.getByText('New')).toBeInTheDocument();
-    });
-
-    it('renders with default variant', () => {
-        render(<Badge data-testid="badge">Default</Badge>);
-        const badge = screen.getByTestId('badge');
-        expect(badge).toHaveClass('bg-brutal-bg');
-    });
-
-    it('renders with primary variant', () => {
-        render(
-            <Badge variant="primary" data-testid="badge">
-                Primary
-            </Badge>
-        );
-        expect(screen.getByTestId('badge')).toHaveClass('bg-brutal-primary');
-    });
-
-    it('renders with secondary variant', () => {
-        render(
-            <Badge variant="secondary" data-testid="badge">
-                Secondary
-            </Badge>
-        );
-        expect(screen.getByTestId('badge')).toHaveClass('bg-brutal-secondary');
-    });
-
-    it('renders with accent variant', () => {
-        render(
-            <Badge variant="accent" data-testid="badge">
-                Accent
-            </Badge>
-        );
-        expect(screen.getByTestId('badge')).toHaveClass('bg-brutal-accent');
-    });
-
-    it('renders with outline variant', () => {
-        render(
-            <Badge variant="outline" data-testid="badge">
-                Outline
-            </Badge>
-        );
-        expect(screen.getByTestId('badge')).toHaveClass('bg-transparent');
-    });
-
-    it('applies custom className', () => {
-        render(
-            <Badge className="custom-badge" data-testid="badge">
-                Custom
-            </Badge>
-        );
-        expect(screen.getByTestId('badge')).toHaveClass('custom-badge');
-    });
-
-    it('has neo-brutalism border styles', () => {
-        render(<Badge data-testid="badge">Styled</Badge>);
-        const badge = screen.getByTestId('badge');
-        expect(badge).toHaveClass('border-2');
-        expect(badge).toHaveClass('border-brutal');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/brutalist-hero.test.tsx b/packages/ui/src/__tests__/components/brutalist-hero.test.tsx
deleted file mode 100644
index 8ff26c3..0000000
--- a/packages/ui/src/__tests__/components/brutalist-hero.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { BrutalistHero } from '../../components/brutalist-hero';
-
-describe('BrutalistHero', () => {
-    it('renders heading, description text, and mock visual component', () => {
-        render(
-            <BrutalistHero
-                title="Bold Hero Title"
-                subtitle="Neon brutalist card subheadings."
-            />
-        );
-        expect(screen.getByText('Bold Hero Title')).toBeInTheDocument();
-        expect(screen.getByText('Neon brutalist card subheadings.')).toBeInTheDocument();
-        expect(screen.getByText('brutx-terminal')).toBeInTheDocument();
-    });
-
-    it('fires primary and secondary button click callbacks correctly', async () => {
-        const onPrimary = vi.fn();
-        const onSecondary = vi.fn();
-
-        render(
-            <BrutalistHero
-                primaryCtaText="Join Priority"
-                secondaryCtaText="Learn More"
-                onPrimaryCtaClick={onPrimary}
-                onSecondaryCtaClick={onSecondary}
-            />
-        );
-
-        const primaryBtn = screen.getByRole('button', { name: 'Join Priority' });
-        const secondaryBtn = screen.getByRole('button', { name: 'Learn More' });
-
-        await userEvent.click(primaryBtn);
-        expect(onPrimary).toHaveBeenCalledOnce();
-
-        await userEvent.click(secondaryBtn);
-        expect(onSecondary).toHaveBeenCalledOnce();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/button.test.tsx b/packages/ui/src/__tests__/components/button.test.tsx
deleted file mode 100644
index 0f2e80f..0000000
--- a/packages/ui/src/__tests__/components/button.test.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Button } from '../../components/button';
-
-describe('Button', () => {
-    it('renders correctly', () => {
-        render(<Button>Click me</Button>);
-        expect(screen.getByRole('button')).toHaveTextContent('Click me');
-    });
-
-    it('handles click events', () => {
-        const handleClick = vi.fn();
-        render(<Button onClick={handleClick}>Click me</Button>);
-
-        fireEvent.click(screen.getByRole('button'));
-        expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders with default variant', () => {
-        render(<Button>Default</Button>);
-        const button = screen.getByRole('button');
-        expect(button).toHaveClass('bg-brutal-bg');
-    });
-
-    it('renders with primary variant', () => {
-        render(<Button variant="primary">Primary</Button>);
-        const button = screen.getByRole('button');
-        expect(button).toHaveClass('bg-brutal-primary');
-    });
-
-    it('renders with secondary variant', () => {
-        render(<Button variant="secondary">Secondary</Button>);
-        const button = screen.getByRole('button');
-        expect(button).toHaveClass('bg-brutal-secondary');
-    });
-
-    it('renders with accent variant', () => {
-        render(<Button variant="accent">Accent</Button>);
-        const button = screen.getByRole('button');
-        expect(button).toHaveClass('bg-brutal-accent');
-    });
-
-    it('renders with different sizes', () => {
-        const { rerender } = render(<Button size="sm">Small</Button>);
-        expect(screen.getByRole('button')).toHaveClass('h-9');
-
-        rerender(<Button size="lg">Large</Button>);
-        expect(screen.getByRole('button')).toHaveClass('h-12');
-
-        rerender(<Button size="xl">Extra Large</Button>);
-        expect(screen.getByRole('button')).toHaveClass('h-16');
-    });
-
-    it('renders as disabled', () => {
-        render(<Button disabled>Disabled</Button>);
-        expect(screen.getByRole('button')).toBeDisabled();
-    });
-
-    it('renders with custom className', () => {
-        render(<Button className="custom-class">Custom</Button>);
-        expect(screen.getByRole('button')).toHaveClass('custom-class');
-    });
-
-    it('renders as child component with asChild prop', () => {
-        render(
-            <Button asChild>
-                <a href="/test">Link Button</a>
-            </Button>
-        );
-        expect(screen.getByRole('link')).toHaveTextContent('Link Button');
-    });
-
-    it('shows loading spinner and disables when loading=true', () => {
-        render(<Button loading>Submit</Button>);
-        const button = screen.getByRole('button');
-        expect(button).toBeDisabled();
-        expect(button.querySelector('svg')).toBeInTheDocument();
-    });
-
-    it('does not fire click when disabled', () => {
-        const handleClick = vi.fn();
-        render(<Button disabled onClick={handleClick}>Click</Button>);
-        fireEvent.click(screen.getByRole('button'));
-        expect(handleClick).not.toHaveBeenCalled();
-    });
-
-    it('ghost and link variants have no shadow or border', () => {
-        const { rerender } = render(<Button variant="ghost">Ghost</Button>);
-        expect(screen.getByRole('button')).toHaveClass('border-transparent');
-
-        rerender(<Button variant="link">Link</Button>);
-        expect(screen.getByRole('button')).toHaveClass('border-transparent');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/card.test.tsx b/packages/ui/src/__tests__/components/card.test.tsx
deleted file mode 100644
index cdcd246..0000000
--- a/packages/ui/src/__tests__/components/card.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import {
-    Card,
-    CardHeader,
-    CardTitle,
-    CardDescription,
-    CardContent,
-    CardFooter,
-} from '../../components/card';
-
-describe('Card', () => {
-    it('renders Card correctly', () => {
-        render(<Card data-testid="card">Card Content</Card>);
-        expect(screen.getByTestId('card')).toHaveTextContent('Card Content');
-    });
-
-    it('renders with neo-brutalism styles', () => {
-        render(<Card data-testid="card">Card</Card>);
-        const card = screen.getByTestId('card');
-        expect(card).toHaveClass('border-3');
-        expect(card).toHaveClass('border-brutal');
-    });
-
-    it('renders full card structure', () => {
-        render(
-            <Card>
-                <CardHeader>
-                    <CardTitle>Title</CardTitle>
-                    <CardDescription>Description</CardDescription>
-                </CardHeader>
-                <CardContent>Content</CardContent>
-                <CardFooter>Footer</CardFooter>
-            </Card>
-        );
-
-        expect(screen.getByText('Title')).toBeInTheDocument();
-        expect(screen.getByText('Description')).toBeInTheDocument();
-        expect(screen.getByText('Content')).toBeInTheDocument();
-        expect(screen.getByText('Footer')).toBeInTheDocument();
-    });
-
-    it('applies custom className to Card', () => {
-        render(
-            <Card data-testid="card" className="custom-card">
-                Content
-            </Card>
-        );
-        expect(screen.getByTestId('card')).toHaveClass('custom-card');
-    });
-
-    it('renders CardTitle with correct styles', () => {
-        render(<CardTitle data-testid="title">Title</CardTitle>);
-        const title = screen.getByTestId('title');
-        expect(title).toHaveClass('font-black');
-        expect(title).toHaveClass('text-2xl');
-    });
-
-    it('renders CardDescription with correct styles', () => {
-        render(<CardDescription data-testid="desc">Description</CardDescription>);
-        const desc = screen.getByTestId('desc');
-        expect(desc).toHaveClass('text-gray-600');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/checkbox.test.tsx b/packages/ui/src/__tests__/components/checkbox.test.tsx
deleted file mode 100644
index 68802f3..0000000
--- a/packages/ui/src/__tests__/components/checkbox.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Checkbox } from '../../components/checkbox';
-
-describe('Checkbox', () => {
-    it('renders correctly', () => {
-        render(<Checkbox aria-label="test checkbox" />);
-        expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-
-    it('handles check/uncheck', () => {
-        const onCheckedChange = vi.fn();
-        render(<Checkbox aria-label="test checkbox" onCheckedChange={onCheckedChange} />);
-
-        const checkbox = screen.getByRole('checkbox');
-        fireEvent.click(checkbox);
-
-        expect(onCheckedChange).toHaveBeenCalledWith(true);
-    });
-
-    it('renders as checked', () => {
-        render(<Checkbox aria-label="test checkbox" checked />);
-        expect(screen.getByRole('checkbox')).toHaveAttribute('data-state', 'checked');
-    });
-
-    it('renders as unchecked', () => {
-        render(<Checkbox aria-label="test checkbox" checked={false} />);
-        expect(screen.getByRole('checkbox')).toHaveAttribute('data-state', 'unchecked');
-    });
-
-    it('renders as disabled', () => {
-        render(<Checkbox aria-label="test checkbox" disabled />);
-        expect(screen.getByRole('checkbox')).toBeDisabled();
-    });
-
-    it('applies custom className', () => {
-        render(<Checkbox aria-label="test checkbox" className="custom-checkbox" />);
-        expect(screen.getByRole('checkbox')).toHaveClass('custom-checkbox');
-    });
-
-    it('has neo-brutalism styles', () => {
-        render(<Checkbox aria-label="test checkbox" />);
-        const checkbox = screen.getByRole('checkbox');
-        expect(checkbox).toHaveClass('border-3');
-        expect(checkbox).toHaveClass('border-brutal');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/combobox.test.tsx b/packages/ui/src/__tests__/components/combobox.test.tsx
deleted file mode 100644
index 7f46af3..0000000
--- a/packages/ui/src/__tests__/components/combobox.test.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Combobox, ComboboxMulti } from '../../components/combobox';
-
-const fruits = [
-    { value: 'apple', label: 'Apple' },
-    { value: 'banana', label: 'Banana' },
-    { value: 'cherry', label: 'Cherry' },
-    { value: 'disabled-item', label: 'Disabled Fruit', disabled: true },
-];
-
-describe('Combobox', () => {
-    it('renders trigger with placeholder', () => {
-        render(<Combobox options={fruits} placeholder="Pick a fruit" />);
-        expect(screen.getByText('Pick a fruit')).toBeInTheDocument();
-    });
-
-    it('opens dropdown when trigger is clicked', async () => {
-        render(<Combobox options={fruits} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => {
-            expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
-        });
-    });
-
-    it('shows all options when opened', async () => {
-        render(<Combobox options={fruits} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => {
-            expect(screen.getByText('Apple')).toBeInTheDocument();
-            expect(screen.getByText('Banana')).toBeInTheDocument();
-            expect(screen.getByText('Cherry')).toBeInTheDocument();
-        });
-    });
-
-    it('calls onValueChange when an option is selected', async () => {
-        const onValueChange = vi.fn();
-        render(<Combobox options={fruits} onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByText('Apple'));
-        await userEvent.click(screen.getByText('Apple'));
-        expect(onValueChange).toHaveBeenCalledWith('apple');
-    });
-
-    it('displays selected value label in trigger', () => {
-        render(<Combobox options={fruits} value="banana" onValueChange={vi.fn()} />);
-        expect(screen.getByRole('combobox')).toHaveTextContent('Banana');
-    });
-
-    it('deselects value when selected option is clicked again', async () => {
-        const onValueChange = vi.fn();
-        render(<Combobox options={fruits} value="apple" onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByRole('option', { name: 'Apple' }));
-        await userEvent.click(screen.getByRole('option', { name: 'Apple' }));
-        expect(onValueChange).toHaveBeenCalledWith('');
-    });
-
-    it('filters options by search input', async () => {
-        render(<Combobox options={fruits} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByPlaceholderText('Search...'));
-        await userEvent.type(screen.getByPlaceholderText('Search...'), 'ban');
-        await waitFor(() => {
-            expect(screen.getByText('Banana')).toBeInTheDocument();
-            expect(screen.queryByText('Apple')).not.toBeInTheDocument();
-        });
-    });
-
-    it('shows empty text when no results match', async () => {
-        render(<Combobox options={fruits} emptyText="Nothing found" />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByPlaceholderText('Search...'));
-        await userEvent.type(screen.getByPlaceholderText('Search...'), 'zzz');
-        await waitFor(() => expect(screen.getByText('Nothing found')).toBeInTheDocument());
-    });
-
-    it('is disabled when disabled prop is true', () => {
-        render(<Combobox options={fruits} disabled />);
-        expect(screen.getByRole('combobox')).toBeDisabled();
-    });
-
-    it('shows check icon next to selected option', async () => {
-        render(<Combobox options={fruits} value="apple" onValueChange={vi.fn()} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByRole('option', { name: 'Apple' }));
-        expect(screen.getByRole('option', { name: 'Apple' })).toHaveAttribute('aria-selected', 'true');
-        const checkIcon = screen.getByRole('option', { name: 'Apple' }).querySelector('svg');
-        expect(checkIcon).toHaveClass('opacity-100');
-    });
-});
-
-describe('ComboboxMulti', () => {
-    it('renders trigger with placeholder', () => {
-        render(<ComboboxMulti options={fruits} placeholder="Pick fruits" />);
-        expect(screen.getByText('Pick fruits')).toBeInTheDocument();
-    });
-
-    it('adds a value when an option is clicked', async () => {
-        const onValueChange = vi.fn();
-        render(<ComboboxMulti options={fruits} value={[]} onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByText('Apple'));
-        await userEvent.click(screen.getByText('Apple'));
-        expect(onValueChange).toHaveBeenCalledWith(['apple']);
-    });
-
-    it('removes a value when an already-selected option is clicked', async () => {
-        const onValueChange = vi.fn();
-        render(
-            <ComboboxMulti options={fruits} value={['apple', 'banana']} onValueChange={onValueChange} />
-        );
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByText('Apple'));
-        await userEvent.click(screen.getByText('Apple'));
-        expect(onValueChange).toHaveBeenCalledWith(['banana']);
-    });
-
-    it('displays selected labels in trigger', () => {
-        render(<ComboboxMulti options={fruits} value={['apple', 'cherry']} onValueChange={vi.fn()} />);
-        expect(screen.getByRole('combobox')).toHaveTextContent('Apple, Cherry');
-    });
-
-    it('shows count when selections exceed maxDisplay', () => {
-        render(
-            <ComboboxMulti
-                options={fruits}
-                value={['apple', 'banana', 'cherry']}
-                onValueChange={vi.fn()}
-                maxDisplay={2}
-            />
-        );
-        expect(screen.getByRole('combobox')).toHaveTextContent('3 selected');
-    });
-
-    it('is disabled when disabled prop is true', () => {
-        render(<ComboboxMulti options={fruits} disabled />);
-        expect(screen.getByRole('combobox')).toBeDisabled();
-    });
-
-    it('can select multiple items', async () => {
-        const selected: string[] = [];
-        const onValueChange = vi.fn((v: string[]) => selected.push(...v));
-
-        const { rerender } = render(
-            <ComboboxMulti options={fruits} value={[]} onValueChange={onValueChange} />
-        );
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByText('Apple'));
-        await userEvent.click(screen.getByText('Apple'));
-        expect(onValueChange).toHaveBeenLastCalledWith(['apple']);
-
-        rerender(<ComboboxMulti options={fruits} value={['apple']} onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByText('Banana'));
-        expect(onValueChange).toHaveBeenLastCalledWith(['apple', 'banana']);
-    });
-});
diff --git a/packages/ui/src/__tests__/components/command.test.tsx b/packages/ui/src/__tests__/components/command.test.tsx
deleted file mode 100644
index 1fc2277..0000000
--- a/packages/ui/src/__tests__/components/command.test.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-    Command,
-    CommandInput,
-    CommandList,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandSeparator,
-    CommandShortcut,
-    CommandDialog,
-} from '../../components/command';
-
-function TestCommand({
-    onSelect,
-}: {
-    onSelect?: (value: string) => void;
-}) {
-    return (
-        <Command>
-            <CommandInput placeholder="Type a command..." />
-            <CommandList>
-                <CommandEmpty>No results found.</CommandEmpty>
-                <CommandGroup heading="Actions">
-                    <CommandItem value="copy" onSelect={() => onSelect?.('copy')}>
-                        Copy
-                    </CommandItem>
-                    <CommandItem value="paste" onSelect={() => onSelect?.('paste')}>
-                        Paste
-                    </CommandItem>
-                    <CommandItem value="disabled-item" disabled onSelect={() => onSelect?.('disabled-item')}>
-                        Disabled Action
-                    </CommandItem>
-                </CommandGroup>
-                <CommandSeparator />
-                <CommandGroup heading="Navigation">
-                    <CommandItem value="home" onSelect={() => onSelect?.('home')}>
-                        Home
-                        <CommandShortcut>⌘H</CommandShortcut>
-                    </CommandItem>
-                </CommandGroup>
-            </CommandList>
-        </Command>
-    );
-}
-
-describe('Command', () => {
-    it('renders search input', () => {
-        render(<TestCommand />);
-        expect(screen.getByPlaceholderText('Type a command...')).toBeInTheDocument();
-    });
-
-    it('renders all items', () => {
-        render(<TestCommand />);
-        expect(screen.getByText('Copy')).toBeInTheDocument();
-        expect(screen.getByText('Paste')).toBeInTheDocument();
-        expect(screen.getByText('Home')).toBeInTheDocument();
-    });
-
-    it('renders group headings', () => {
-        render(<TestCommand />);
-        expect(screen.getByText('Actions')).toBeInTheDocument();
-        expect(screen.getByText('Navigation')).toBeInTheDocument();
-    });
-
-    it('filters items as user types', async () => {
-        render(<TestCommand />);
-        await userEvent.type(screen.getByPlaceholderText('Type a command...'), 'copy');
-        await waitFor(() => {
-            expect(screen.getByText('Copy')).toBeInTheDocument();
-            expect(screen.queryByText('Paste')).not.toBeInTheDocument();
-            expect(screen.queryByText('Home')).not.toBeInTheDocument();
-        });
-    });
-
-    it('shows empty state when no results match', async () => {
-        render(<TestCommand />);
-        await userEvent.type(screen.getByPlaceholderText('Type a command...'), 'zzz');
-        await waitFor(() => expect(screen.getByText('No results found.')).toBeInTheDocument());
-    });
-
-    it('calls onSelect with correct value when item is clicked', async () => {
-        const onSelect = vi.fn();
-        render(<TestCommand onSelect={onSelect} />);
-        await userEvent.click(screen.getByText('Copy'));
-        expect(onSelect).toHaveBeenCalledWith('copy');
-    });
-
-    it('calls onSelect for paste item', async () => {
-        const onSelect = vi.fn();
-        render(<TestCommand onSelect={onSelect} />);
-        await userEvent.click(screen.getByText('Paste'));
-        expect(onSelect).toHaveBeenCalledWith('paste');
-    });
-
-    it('disabled item does not fire onSelect when clicked', async () => {
-        const onSelect = vi.fn();
-        render(<TestCommand onSelect={onSelect} />);
-        await userEvent.click(screen.getByText('Disabled Action'));
-        expect(onSelect).not.toHaveBeenCalled();
-    });
-
-    it('disabled item has data-disabled attribute', () => {
-        render(<TestCommand />);
-        const disabledItem = screen.getByText('Disabled Action').closest('[data-slot="command-item"]');
-        expect(disabledItem).toHaveAttribute('data-disabled', 'true');
-    });
-
-    it('renders keyboard shortcut', () => {
-        render(<TestCommand />);
-        expect(screen.getByText('⌘H')).toBeInTheDocument();
-    });
-});
-
-describe('CommandDialog', () => {
-    it('is closed by default', () => {
-        render(
-            <CommandDialog>
-                <CommandInput placeholder="Search..." />
-                <CommandList>
-                    <CommandItem value="new">New File</CommandItem>
-                </CommandList>
-            </CommandDialog>
-        );
-        expect(screen.queryByPlaceholderText('Search...')).not.toBeInTheDocument();
-    });
-
-    it('shows content when open=true', () => {
-        render(
-            <CommandDialog open>
-                <CommandInput placeholder="Search..." />
-                <CommandList>
-                    <CommandItem value="new">New File</CommandItem>
-                </CommandList>
-            </CommandDialog>
-        );
-        expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
-        expect(screen.getByText('New File')).toBeInTheDocument();
-    });
-
-    it('renders default accessible title (screen-reader only)', () => {
-        render(<CommandDialog open title="My Palette" />);
-        expect(screen.getByText('My Palette')).toBeInTheDocument();
-    });
-
-    it('calls onOpenChange when Escape is pressed', async () => {
-        const onOpenChange = vi.fn();
-        render(
-            <CommandDialog open onOpenChange={onOpenChange}>
-                <CommandInput placeholder="Search..." />
-                <CommandList>
-                    <CommandItem value="new">New File</CommandItem>
-                </CommandList>
-            </CommandDialog>
-        );
-        await userEvent.keyboard('{Escape}');
-        await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false));
-    });
-
-    it('filters items inside dialog', async () => {
-        render(
-            <CommandDialog open>
-                <CommandInput placeholder="Search commands" />
-                <CommandList>
-                    <CommandEmpty>Nothing.</CommandEmpty>
-                    <CommandItem value="open-file">Open File</CommandItem>
-                    <CommandItem value="settings">Settings</CommandItem>
-                </CommandList>
-            </CommandDialog>
-        );
-        await userEvent.type(screen.getByPlaceholderText('Search commands'), 'open');
-        await waitFor(() => {
-            expect(screen.getByText('Open File')).toBeInTheDocument();
-            expect(screen.queryByText('Settings')).not.toBeInTheDocument();
-        });
-    });
-});
diff --git a/packages/ui/src/__tests__/components/dashboard-shell.test.tsx b/packages/ui/src/__tests__/components/dashboard-shell.test.tsx
deleted file mode 100644
index aab86c7..0000000
--- a/packages/ui/src/__tests__/components/dashboard-shell.test.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DashboardShell } from '../../components/dashboard-shell';
-
-describe('DashboardShell', () => {
-    it('renders sidebar, topbar, statistics cards, and receipts logs table', () => {
-        render(<DashboardShell userEmail="developer@my-saas.com" />);
-
-        expect(screen.getByText('BrutxConsole')).toBeInTheDocument();
-        expect(screen.getByText('developer@my-saas.com')).toBeInTheDocument();
-
-        expect(screen.getByText('Overview')).toBeInTheDocument();
-        expect(screen.getByText('Deployments')).toBeInTheDocument();
-
-        expect(screen.getByText('Monthly Revenue')).toBeInTheDocument();
-        expect(screen.getByText('Active Licenses')).toBeInTheDocument();
-
-        expect(screen.getByText('Recent Transaction Ledgers')).toBeInTheDocument();
-        expect(screen.getByText('Alpha Agency')).toBeInTheDocument();
-        expect(screen.getByText('Delta Studio')).toBeInTheDocument();
-    });
-
-    it('triggers signout callback triggers correctly', async () => {
-        const onSignOut = vi.fn();
-        render(<DashboardShell onSignOutClick={onSignOut} />);
-
-        const signOutBtn = screen.getByRole('button', { name: 'Sign Out' });
-        await userEvent.click(signOutBtn);
-
-        expect(onSignOut).toHaveBeenCalledOnce();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/dialog.test.tsx b/packages/ui/src/__tests__/components/dialog.test.tsx
deleted file mode 100644
index ad7d457..0000000
--- a/packages/ui/src/__tests__/components/dialog.test.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-    Dialog,
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogDescription,
-    DialogFooter,
-    DialogClose,
-} from '../../components/dialog';
-import { Button } from '../../components/button';
-
-function TestDialog({
-    defaultOpen = false,
-    showCloseButton = true,
-    onOpenChange,
-}: {
-    defaultOpen?: boolean;
-    showCloseButton?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}) {
-    return (
-        <Dialog defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-            <DialogTrigger asChild>
-                <Button>Open Dialog</Button>
-            </DialogTrigger>
-            <DialogContent showCloseButton={showCloseButton}>
-                <DialogHeader>
-                    <DialogTitle>Test Dialog</DialogTitle>
-                    <DialogDescription>Dialog description</DialogDescription>
-                </DialogHeader>
-                <p>Dialog body content</p>
-                <DialogFooter>
-                    <DialogClose asChild>
-                        <Button variant="outline">Cancel</Button>
-                    </DialogClose>
-                    <Button>Confirm</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}
-
-describe('Dialog', () => {
-    it('is closed by default', () => {
-        render(<TestDialog />);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('opens when trigger is clicked', async () => {
-        render(<TestDialog />);
-        await userEvent.click(screen.getByRole('button', { name: 'Open Dialog' }));
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        expect(screen.getByText('Test Dialog')).toBeInTheDocument();
-    });
-
-    it('renders title and description for accessibility', async () => {
-        render(<TestDialog defaultOpen />);
-        expect(screen.getByText('Test Dialog')).toBeInTheDocument();
-        expect(screen.getByText('Dialog description')).toBeInTheDocument();
-    });
-
-    it('closes when close button is clicked', async () => {
-        render(<TestDialog />);
-        await userEvent.click(screen.getByRole('button', { name: 'Open Dialog' }));
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-        const closeBtn = screen.getByRole('button', { name: 'Close' });
-        await userEvent.click(closeBtn);
-        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
-    });
-
-    it('closes when DialogClose button is clicked', async () => {
-        render(<TestDialog />);
-        await userEvent.click(screen.getByRole('button', { name: 'Open Dialog' }));
-
-        await userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
-    });
-
-    it('closes on Escape key press', async () => {
-        render(<TestDialog />);
-        await userEvent.click(screen.getByRole('button', { name: 'Open Dialog' }));
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-        await userEvent.keyboard('{Escape}');
-        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
-    });
-
-    it('calls onOpenChange when opening and closing', async () => {
-        const onOpenChange = vi.fn();
-        render(<TestDialog onOpenChange={onOpenChange} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Open Dialog' }));
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-
-        await userEvent.keyboard('{Escape}');
-        await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false));
-    });
-
-    it('can be rendered open by default with defaultOpen', () => {
-        render(<TestDialog defaultOpen />);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-    });
-
-    it('hides close button when showCloseButton=false', async () => {
-        render(<TestDialog defaultOpen showCloseButton={false} />);
-        expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
-    });
-
-    it('has aria-labelledby pointing to the title', async () => {
-        render(<TestDialog defaultOpen />);
-        const dialog = screen.getByRole('dialog');
-        const titleId = screen.getByText('Test Dialog').id;
-        expect(dialog).toHaveAttribute('aria-labelledby', titleId);
-    });
-});
diff --git a/packages/ui/src/__tests__/components/dropdown-menu.test.tsx b/packages/ui/src/__tests__/components/dropdown-menu.test.tsx
deleted file mode 100644
index 5e40c6d..0000000
--- a/packages/ui/src/__tests__/components/dropdown-menu.test.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-    DropdownMenuCheckboxItem,
-    DropdownMenuRadioItem,
-    DropdownMenuRadioGroup,
-    DropdownMenuSeparator,
-    DropdownMenuLabel,
-} from '../../components/dropdown-menu';
-
-describe('DropdownMenu', () => {
-    it('is closed by default', () => {
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuItem>Item 1</DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
-    });
-
-    it('opens when trigger is clicked', async () => {
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuItem>Item 1</DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => expect(screen.getByText('Item 1')).toBeInTheDocument());
-    });
-
-    it('calls onClick handler when item is clicked', async () => {
-        const onClick = vi.fn();
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuItem onSelect={onClick}>Item 1</DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => screen.getByText('Item 1'));
-        await userEvent.click(screen.getByText('Item 1'));
-        expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('closes after item is selected', async () => {
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuItem>Item 1</DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => screen.getByText('Item 1'));
-        await userEvent.click(screen.getByText('Item 1'));
-        await waitFor(() => expect(screen.queryByText('Item 1')).not.toBeInTheDocument());
-    });
-
-    it('closes on Escape key', async () => {
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuItem>Item 1</DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => screen.getByText('Item 1'));
-        await userEvent.keyboard('{Escape}');
-        await waitFor(() => expect(screen.queryByText('Item 1')).not.toBeInTheDocument());
-    });
-
-    it('disabled item does not trigger onSelect', async () => {
-        const onSelect = vi.fn();
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuItem disabled onSelect={onSelect}>
-                        Disabled Item
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => screen.getByText('Disabled Item'));
-        await userEvent.click(screen.getByText('Disabled Item'));
-        expect(onSelect).not.toHaveBeenCalled();
-    });
-
-    it('renders label and separator', async () => {
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuLabel>Group A</DropdownMenuLabel>
-                    <DropdownMenuItem>Item A</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Item B</DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => {
-            expect(screen.getByText('Group A')).toBeInTheDocument();
-            expect(screen.getByText('Item A')).toBeInTheDocument();
-            expect(screen.getByText('Item B')).toBeInTheDocument();
-        });
-    });
-
-    it('checkbox item toggles checked state', async () => {
-        let checked = false;
-        const onCheckedChange = vi.fn((v: boolean) => {
-            checked = v;
-        });
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuCheckboxItem checked={checked} onCheckedChange={onCheckedChange}>
-                        Checkbox Option
-                    </DropdownMenuCheckboxItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => screen.getByText('Checkbox Option'));
-        await userEvent.click(screen.getByText('Checkbox Option'));
-        expect(onCheckedChange).toHaveBeenCalledWith(true);
-    });
-
-    it('radio group selects a single item', async () => {
-        const onValueChange = vi.fn();
-        render(
-            <DropdownMenu>
-                <DropdownMenuTrigger>Open</DropdownMenuTrigger>
-                <DropdownMenuContent>
-                    <DropdownMenuRadioGroup value="a" onValueChange={onValueChange}>
-                        <DropdownMenuRadioItem value="a">Option A</DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="b">Option B</DropdownMenuRadioItem>
-                    </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-        await userEvent.click(screen.getByText('Open'));
-        await waitFor(() => screen.getByText('Option B'));
-        await userEvent.click(screen.getByText('Option B'));
-        expect(onValueChange).toHaveBeenCalledWith('b');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/empty-state.test.tsx b/packages/ui/src/__tests__/components/empty-state.test.tsx
deleted file mode 100644
index 5a02490..0000000
--- a/packages/ui/src/__tests__/components/empty-state.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { EmptyState } from '../../components/empty-state';
-
-describe('EmptyState', () => {
-    it('renders state titles, desc tags, and icons', () => {
-        render(
-            <EmptyState
-                title="Workspace Empty"
-                description="Please initialize a cluster."
-                actionText="Propose Deploy"
-            />
-        );
-
-        expect(screen.getByText('Workspace Empty')).toBeInTheDocument();
-        expect(screen.getByText('Please initialize a cluster.')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Propose Deploy' })).toBeInTheDocument();
-    });
-
-    it('triggers action click callback correctly', async () => {
-        const onClick = vi.fn();
-        render(<EmptyState onActionClick={onClick} actionText="New Deployment" />);
-
-        const btn = screen.getByRole('button', { name: 'New Deployment' });
-        await userEvent.click(btn);
-
-        expect(onClick).toHaveBeenCalledOnce();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/form.test.tsx b/packages/ui/src/__tests__/components/form.test.tsx
deleted file mode 100644
index bf42b5b..0000000
--- a/packages/ui/src/__tests__/components/form.test.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-
-import {
-    Form,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormControl,
-    FormDescription,
-    FormMessage,
-} from '../../components/form';
-import { Input } from '../../components/input';
-import { Button } from '../../components/button';
-
-const testSchema = z.object({
-    username: z.string().min(3, { message: 'Username too short' }),
-});
-
-function TestForm({ onSubmit }: { onSubmit: (values: any) => void }) {
-    const form = useForm<z.infer<typeof testSchema>>({
-        resolver: zodResolver(testSchema),
-        defaultValues: {
-            username: '',
-        },
-    });
-
-    return (
-        <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-                <FormField
-                    control={form.control}
-                    name="username"
-                    render={({ field }) => (
-                        <FormItem>
-                            <FormLabel>Username</FormLabel>
-                            <FormControl>
-                                <Input placeholder="Type here" {...field} />
-                            </FormControl>
-                            <FormDescription>Must be 3+ chars</FormDescription>
-                            <FormMessage />
-                        </FormItem>
-                    )}
-                />
-                <Button type="submit">Submit</Button>
-            </form>
-        </Form>
-    );
-}
-
-describe('Form', () => {
-    it('renders form inputs, labels and descriptions correctly', () => {
-        const onSubmit = vi.fn();
-        render(<TestForm onSubmit={onSubmit} />);
-
-        expect(screen.getByText('Username')).toBeInTheDocument();
-        expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument();
-        expect(screen.getByText('Must be 3+ chars')).toBeInTheDocument();
-    });
-
-    it('triggers validation errors on invalid submit', async () => {
-        const onSubmit = vi.fn();
-        render(<TestForm onSubmit={onSubmit} />);
-
-        await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
-
-        await waitFor(() => {
-            expect(screen.getByText('Username too short')).toBeInTheDocument();
-        });
-        expect(onSubmit).not.toHaveBeenCalled();
-    });
-
-    it('submits successfully when form input is valid', async () => {
-        const onSubmit = vi.fn();
-        render(<TestForm onSubmit={onSubmit} />);
-
-        const input = screen.getByPlaceholderText('Type here');
-        await userEvent.type(input, 'johndoe');
-        await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
-
-        await waitFor(() => {
-            expect(onSubmit).toHaveBeenCalledWith(
-                expect.objectContaining({ username: 'johndoe' }),
-                expect.any(Object)
-            );
-        });
-    });
-});
diff --git a/packages/ui/src/__tests__/components/input.test.tsx b/packages/ui/src/__tests__/components/input.test.tsx
deleted file mode 100644
index ad8a3c7..0000000
--- a/packages/ui/src/__tests__/components/input.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Input } from '../../components/input';
-
-describe('Input', () => {
-    it('renders correctly', () => {
-        render(<Input placeholder="Enter text" />);
-        expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
-    });
-
-    it('handles value changes', () => {
-        const handleChange = vi.fn();
-        render(<Input onChange={handleChange} />);
-
-        const input = screen.getByRole('textbox');
-        fireEvent.change(input, { target: { value: 'test' } });
-
-        expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('renders with neo-brutalism styles', () => {
-        render(<Input data-testid="input" />);
-        const input = screen.getByTestId('input');
-        expect(input).toHaveClass('border-3');
-        expect(input).toHaveClass('border-brutal');
-    });
-
-    it('renders as disabled', () => {
-        render(<Input disabled />);
-        expect(screen.getByRole('textbox')).toBeDisabled();
-    });
-
-    it('applies custom className', () => {
-        render(<Input className="custom-input" data-testid="input" />);
-        expect(screen.getByTestId('input')).toHaveClass('custom-input');
-    });
-
-    it('renders different input types', () => {
-        const { rerender } = render(<Input type="email" />);
-        expect(screen.getByRole('textbox')).toHaveAttribute('type', 'email');
-
-        rerender(<Input type="password" />);
-        expect(document.querySelector('input[type="password"]')).toBeInTheDocument();
-    });
-
-    it('forwards ref correctly', () => {
-        const ref = vi.fn();
-        render(<Input ref={ref} />);
-        expect(ref).toHaveBeenCalled();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/pricing-section.test.tsx b/packages/ui/src/__tests__/components/pricing-section.test.tsx
deleted file mode 100644
index 24a2e5b..0000000
--- a/packages/ui/src/__tests__/components/pricing-section.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { PricingSection } from '../../components/pricing-section';
-
-describe('PricingSection', () => {
-    it('renders plans correctly', () => {
-        render(<PricingSection title="Custom Plans Title" />);
-        expect(screen.getByText('Custom Plans Title')).toBeInTheDocument();
-
-        expect(screen.getByText('Indie Creator')).toBeInTheDocument();
-        expect(screen.getByText('Pro Developer')).toBeInTheDocument();
-        expect(screen.getByText('Team Studio')).toBeInTheDocument();
-
-        expect(screen.getByText('$9')).toBeInTheDocument();
-        expect(screen.getByText('$29')).toBeInTheDocument();
-        expect(screen.getByText('$99')).toBeInTheDocument();
-    });
-
-    it('renders the popular plan badge badge layout', () => {
-        render(<PricingSection />);
-        expect(screen.getByText('Most Popular Tier')).toBeInTheDocument();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/progress.test.tsx b/packages/ui/src/__tests__/components/progress.test.tsx
deleted file mode 100644
index ab06f8e..0000000
--- a/packages/ui/src/__tests__/components/progress.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Progress } from '../../components/progress';
-
-describe('Progress', () => {
-    it('renders with correct aria attributes', () => {
-        render(<Progress value={45} />);
-        const progressbar = screen.getByRole('progressbar');
-        expect(progressbar).toBeInTheDocument();
-        expect(progressbar).toHaveAttribute('aria-valuenow', '45');
-        expect(progressbar).toHaveAttribute('aria-valuemin', '0');
-        expect(progressbar).toHaveAttribute('aria-valuemax', '100');
-    });
-
-    it('handles custom max values or null/undefined correctly', () => {
-        render(<Progress value={undefined} />);
-        const progressbar = screen.getByRole('progressbar');
-        expect(progressbar).not.toHaveAttribute('aria-valuenow');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/radio-group.test.tsx b/packages/ui/src/__tests__/components/radio-group.test.tsx
deleted file mode 100644
index 3e36baf..0000000
--- a/packages/ui/src/__tests__/components/radio-group.test.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { RadioGroup, RadioGroupItem } from '../../components/radio-group';
-import { Label } from '../../components/label';
-
-function TestRadioGroup({ onValueChange }: { onValueChange?: (val: string) => void }) {
-    return (
-        <RadioGroup defaultValue="apple" onValueChange={onValueChange}>
-            <div className="flex items-center space-x-2">
-                <RadioGroupItem value="apple" id="apple" />
-                <Label htmlFor="apple">Apple</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-                <RadioGroupItem value="orange" id="orange" />
-                <Label htmlFor="orange">Orange</Label>
-            </div>
-            <div className="flex items-center space-x-2">
-                <RadioGroupItem value="banana" id="banana" disabled />
-                <Label htmlFor="banana">Banana</Label>
-            </div>
-        </RadioGroup>
-    );
-}
-
-describe('RadioGroup', () => {
-    it('renders radio options correctly', () => {
-        render(<TestRadioGroup />);
-        expect(screen.getByLabelText('Apple')).toBeInTheDocument();
-        expect(screen.getByLabelText('Orange')).toBeInTheDocument();
-        expect(screen.getByLabelText('Banana')).toBeInTheDocument();
-    });
-
-    it('sets default checked state correctly', () => {
-        render(<TestRadioGroup />);
-        expect(screen.getByLabelText('Apple')).toBeChecked();
-        expect(screen.getByLabelText('Orange')).not.toBeChecked();
-    });
-
-    it('changes value on clicking other enabled option', async () => {
-        const onValueChange = vi.fn();
-        render(<TestRadioGroup onValueChange={onValueChange} />);
-
-        await userEvent.click(screen.getByLabelText('Orange'));
-        expect(onValueChange).toHaveBeenCalledWith('orange');
-        expect(screen.getByLabelText('Orange')).toBeChecked();
-    });
-
-    it('does not select disabled radio option on click', async () => {
-        const onValueChange = vi.fn();
-        render(<TestRadioGroup onValueChange={onValueChange} />);
-
-        await userEvent.click(screen.getByLabelText('Banana'));
-        expect(onValueChange).not.toHaveBeenCalled();
-        expect(screen.getByLabelText('Banana')).not.toBeChecked();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/select.test.tsx b/packages/ui/src/__tests__/components/select.test.tsx
deleted file mode 100644
index ed66d81..0000000
--- a/packages/ui/src/__tests__/components/select.test.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-    SelectGroup,
-    SelectLabel,
-    SelectSeparator,
-} from '../../components/select';
-
-function TestSelect({
-    value,
-    onValueChange,
-    defaultValue,
-    disabled = false,
-}: {
-    value?: string;
-    onValueChange?: (v: string) => void;
-    defaultValue?: string;
-    disabled?: boolean;
-}) {
-    return (
-        <Select value={value} onValueChange={onValueChange} defaultValue={defaultValue} disabled={disabled}>
-            <SelectTrigger aria-label="Pick a fruit">
-                <SelectValue placeholder="Select a fruit" />
-            </SelectTrigger>
-            <SelectContent>
-                <SelectGroup>
-                    <SelectLabel>Fruits</SelectLabel>
-                    <SelectItem value="apple">Apple</SelectItem>
-                    <SelectItem value="banana">Banana</SelectItem>
-                    <SelectItem value="cherry">Cherry</SelectItem>
-                    <SelectSeparator />
-                    <SelectItem value="disabled-item" disabled>
-                        Disabled Item
-                    </SelectItem>
-                </SelectGroup>
-            </SelectContent>
-        </Select>
-    );
-}
-
-describe('Select', () => {
-    it('renders trigger with placeholder', () => {
-        render(<TestSelect />);
-        expect(screen.getByRole('combobox')).toBeInTheDocument();
-        expect(screen.getByText('Select a fruit')).toBeInTheDocument();
-    });
-
-    it('opens dropdown when trigger is clicked', async () => {
-        render(<TestSelect />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => expect(screen.getByRole('listbox')).toBeInTheDocument());
-    });
-
-    it('shows options when open', async () => {
-        render(<TestSelect />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => {
-            expect(screen.getByText('Apple')).toBeInTheDocument();
-            expect(screen.getByText('Banana')).toBeInTheDocument();
-            expect(screen.getByText('Cherry')).toBeInTheDocument();
-        });
-    });
-
-    it('calls onValueChange when an option is selected', async () => {
-        const onValueChange = vi.fn();
-        render(<TestSelect onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByText('Apple'));
-        await userEvent.click(screen.getByText('Apple'));
-        expect(onValueChange).toHaveBeenCalledWith('apple');
-    });
-
-    it('displays selected value in trigger', async () => {
-        render(<TestSelect defaultValue="banana" />);
-        expect(screen.getByRole('combobox')).toHaveTextContent('Banana');
-    });
-
-    it('works as controlled component', async () => {
-        const { rerender } = render(<TestSelect value="apple" onValueChange={vi.fn()} />);
-        expect(screen.getByRole('combobox')).toHaveTextContent('Apple');
-
-        rerender(<TestSelect value="cherry" onValueChange={vi.fn()} />);
-        expect(screen.getByRole('combobox')).toHaveTextContent('Cherry');
-    });
-
-    it('is disabled when disabled prop is true', () => {
-        render(<TestSelect disabled />);
-        expect(screen.getByRole('combobox')).toBeDisabled();
-    });
-
-    it('disabled item cannot be selected', async () => {
-        const onValueChange = vi.fn();
-        render(<TestSelect onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByText('Disabled Item'));
-
-        const disabledOption = screen.getByText('Disabled Item').closest('[data-disabled]');
-        expect(disabledOption).toBeInTheDocument();
-        expect(onValueChange).not.toHaveBeenCalled();
-    });
-
-    it('closes on Escape key', async () => {
-        render(<TestSelect />);
-        await userEvent.click(screen.getByRole('combobox'));
-        await waitFor(() => screen.getByRole('listbox'));
-
-        await userEvent.keyboard('{Escape}');
-        await waitFor(() => expect(screen.queryByRole('listbox')).not.toBeInTheDocument());
-    });
-
-    it('has proper ARIA attributes on trigger', () => {
-        render(<TestSelect />);
-        const trigger = screen.getByRole('combobox');
-        expect(trigger).toHaveAttribute('aria-label', 'Pick a fruit');
-        expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('updates aria-expanded when open', async () => {
-        render(<TestSelect />);
-        const trigger = screen.getByRole('combobox');
-        await userEvent.click(trigger);
-        await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'true'));
-    });
-});
diff --git a/packages/ui/src/__tests__/components/sheet.test.tsx b/packages/ui/src/__tests__/components/sheet.test.tsx
deleted file mode 100644
index 3206119..0000000
--- a/packages/ui/src/__tests__/components/sheet.test.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {
-    Sheet,
-    SheetTrigger,
-    SheetContent,
-    SheetHeader,
-    SheetTitle,
-    SheetDescription,
-    SheetFooter,
-    SheetClose,
-} from '../../components/sheet';
-import { Button } from '../../components/button';
-
-function TestSheet({
-    side = 'right' as const,
-    defaultOpen = false,
-}) {
-    return (
-        <Sheet defaultOpen={defaultOpen}>
-            <SheetTrigger asChild>
-                <Button>Open Drawer</Button>
-            </SheetTrigger>
-            <SheetContent side={side}>
-                <SheetHeader>
-                    <SheetTitle>Test Sheet</SheetTitle>
-                    <SheetDescription>Sheet description context</SheetDescription>
-                </SheetHeader>
-                <p>Sheet body</p>
-                <SheetFooter>
-                    <SheetClose asChild>
-                        <Button variant="outline">Done</Button>
-                    </SheetClose>
-                </SheetFooter>
-            </SheetContent>
-        </Sheet>
-    );
-}
-
-describe('Sheet', () => {
-    it('is closed by default', () => {
-        render(<TestSheet />);
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('opens when trigger is clicked', async () => {
-        render(<TestSheet />);
-        await userEvent.click(screen.getByRole('button', { name: 'Open Drawer' }));
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-        expect(screen.getByText('Test Sheet')).toBeInTheDocument();
-    });
-
-    it('closes when close is clicked', async () => {
-        render(<TestSheet defaultOpen />);
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-        await userEvent.click(screen.getByRole('button', { name: 'Close' }));
-        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
-    });
-});
diff --git a/packages/ui/src/__tests__/components/slider.test.tsx b/packages/ui/src/__tests__/components/slider.test.tsx
deleted file mode 100644
index fb6e66d..0000000
--- a/packages/ui/src/__tests__/components/slider.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Slider } from '../../components/slider';
-
-describe('Slider', () => {
-    it('renders with standard range slider accessibility role', () => {
-        render(<Slider defaultValue={[50]} max={100} step={1} />);
-        const thumb = screen.getByRole('slider');
-        expect(thumb).toBeInTheDocument();
-        expect(thumb).toHaveAttribute('aria-valuenow', '50');
-    });
-
-    it('applies custom max and min attributes correctly', () => {
-        render(<Slider defaultValue={[20]} min={10} max={90} step={5} />);
-        const thumb = screen.getByRole('slider');
-        expect(thumb).toHaveAttribute('aria-valuemin', '10');
-        expect(thumb).toHaveAttribute('aria-valuemax', '90');
-    });
-
-    it('respects disabled state properties', () => {
-        render(<Slider defaultValue={[50]} disabled />);
-        const thumb = screen.getByRole('slider');
-        expect(thumb).toHaveAttribute('data-disabled');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/switch.test.tsx b/packages/ui/src/__tests__/components/switch.test.tsx
deleted file mode 100644
index 5a0a65e..0000000
--- a/packages/ui/src/__tests__/components/switch.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Switch } from '../../components/switch';
-
-describe('Switch', () => {
-    it('renders correctly', () => {
-        render(<Switch aria-label="test switch" />);
-        expect(screen.getByRole('switch')).toBeInTheDocument();
-    });
-
-    it('handles toggle', () => {
-        const onCheckedChange = vi.fn();
-        render(<Switch aria-label="test switch" onCheckedChange={onCheckedChange} />);
-
-        const switchEl = screen.getByRole('switch');
-        fireEvent.click(switchEl);
-
-        expect(onCheckedChange).toHaveBeenCalledWith(true);
-    });
-
-    it('renders as checked', () => {
-        render(<Switch aria-label="test switch" checked />);
-        expect(screen.getByRole('switch')).toHaveAttribute('data-state', 'checked');
-    });
-
-    it('renders as unchecked', () => {
-        render(<Switch aria-label="test switch" checked={false} />);
-        expect(screen.getByRole('switch')).toHaveAttribute('data-state', 'unchecked');
-    });
-
-    it('renders as disabled', () => {
-        render(<Switch aria-label="test switch" disabled />);
-        expect(screen.getByRole('switch')).toBeDisabled();
-    });
-
-    it('applies custom className', () => {
-        render(<Switch aria-label="test switch" className="custom-switch" />);
-        expect(screen.getByRole('switch')).toHaveClass('custom-switch');
-    });
-
-    it('has neo-brutalism styles', () => {
-        render(<Switch aria-label="test switch" />);
-        const switchEl = screen.getByRole('switch');
-        expect(switchEl).toHaveClass('border-3');
-        expect(switchEl).toHaveClass('border-brutal');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/tabs.test.tsx b/packages/ui/src/__tests__/components/tabs.test.tsx
deleted file mode 100644
index e84b074..0000000
--- a/packages/ui/src/__tests__/components/tabs.test.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs';
-
-function TestTabs({
-    value,
-    onValueChange,
-    defaultValue = 'tab1',
-}: {
-    value?: string;
-    onValueChange?: (v: string) => void;
-    defaultValue?: string;
-}) {
-    return (
-        <Tabs value={value} onValueChange={onValueChange} defaultValue={defaultValue}>
-            <TabsList>
-                <TabsTrigger value="tab1">Tab 1</TabsTrigger>
-                <TabsTrigger value="tab2">Tab 2</TabsTrigger>
-                <TabsTrigger value="tab3" disabled>
-                    Tab 3
-                </TabsTrigger>
-            </TabsList>
-            <TabsContent value="tab1">Content 1</TabsContent>
-            <TabsContent value="tab2">Content 2</TabsContent>
-            <TabsContent value="tab3">Content 3</TabsContent>
-        </Tabs>
-    );
-}
-
-describe('Tabs', () => {
-    it('renders all tabs', () => {
-        render(<TestTabs />);
-        expect(screen.getByRole('tab', { name: 'Tab 1' })).toBeInTheDocument();
-        expect(screen.getByRole('tab', { name: 'Tab 2' })).toBeInTheDocument();
-        expect(screen.getByRole('tab', { name: 'Tab 3' })).toBeInTheDocument();
-    });
-
-    it('shows active tab content by default', () => {
-        render(<TestTabs defaultValue="tab1" />);
-        expect(screen.getByText('Content 1')).toBeVisible();
-    });
-
-    it('switches content when a tab is clicked', async () => {
-        render(<TestTabs />);
-        await userEvent.click(screen.getByRole('tab', { name: 'Tab 2' }));
-        expect(screen.getByText('Content 2')).toBeVisible();
-    });
-
-    it('calls onValueChange when a tab is clicked', async () => {
-        const onValueChange = vi.fn();
-        render(<TestTabs onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByRole('tab', { name: 'Tab 2' }));
-        expect(onValueChange).toHaveBeenCalledWith('tab2');
-    });
-
-    it('active tab has aria-selected=true', () => {
-        render(<TestTabs defaultValue="tab2" />);
-        expect(screen.getByRole('tab', { name: 'Tab 2' })).toHaveAttribute('aria-selected', 'true');
-        expect(screen.getByRole('tab', { name: 'Tab 1' })).toHaveAttribute('aria-selected', 'false');
-    });
-
-    it('disabled tab is not selectable', async () => {
-        const onValueChange = vi.fn();
-        render(<TestTabs onValueChange={onValueChange} />);
-        await userEvent.click(screen.getByRole('tab', { name: 'Tab 3' }));
-        expect(onValueChange).not.toHaveBeenCalled();
-        expect(screen.getByRole('tab', { name: 'Tab 1' })).toHaveAttribute('aria-selected', 'true');
-    });
-
-    it('disabled tab has disabled attribute', () => {
-        render(<TestTabs />);
-        expect(screen.getByRole('tab', { name: 'Tab 3' })).toBeDisabled();
-    });
-
-    it('navigates with arrow keys', async () => {
-        render(<TestTabs />);
-        const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
-        tab1.focus();
-
-        await userEvent.keyboard('{ArrowRight}');
-        expect(screen.getByRole('tab', { name: 'Tab 2' })).toHaveFocus();
-    });
-
-    it('works as controlled component', async () => {
-        const { rerender } = render(<TestTabs value="tab1" onValueChange={vi.fn()} />);
-        expect(screen.getByRole('tab', { name: 'Tab 1' })).toHaveAttribute('aria-selected', 'true');
-
-        rerender(<TestTabs value="tab2" onValueChange={vi.fn()} />);
-        expect(screen.getByRole('tab', { name: 'Tab 2' })).toHaveAttribute('aria-selected', 'true');
-    });
-
-    it('each tab has correct aria-controls linking to panel', () => {
-        render(<TestTabs />);
-        const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
-        const panelId = tab1.getAttribute('aria-controls');
-        expect(panelId).toBeTruthy();
-        expect(document.getElementById(panelId!)).toBeInTheDocument();
-    });
-
-    it('tabpanel has correct role', () => {
-        render(<TestTabs />);
-        const panels = screen.getAllByRole('tabpanel');
-        expect(panels.length).toBeGreaterThanOrEqual(1);
-    });
-});
diff --git a/packages/ui/src/__tests__/components/textarea.test.tsx b/packages/ui/src/__tests__/components/textarea.test.tsx
deleted file mode 100644
index a8e69f7..0000000
--- a/packages/ui/src/__tests__/components/textarea.test.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Textarea } from '../../components/textarea';
-
-describe('Textarea', () => {
-    it('renders correctly', () => {
-        render(<Textarea placeholder="Enter text" />);
-        expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
-    });
-
-    it('handles value changes', () => {
-        const handleChange = vi.fn();
-        render(<Textarea onChange={handleChange} />);
-
-        const textarea = screen.getByRole('textbox');
-        fireEvent.change(textarea, { target: { value: 'test content' } });
-
-        expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('renders with neo-brutalism styles', () => {
-        render(<Textarea data-testid="textarea" />);
-        const textarea = screen.getByTestId('textarea');
-        expect(textarea).toHaveClass('border-3');
-        expect(textarea).toHaveClass('border-brutal');
-    });
-
-    it('renders as disabled', () => {
-        render(<Textarea disabled />);
-        expect(screen.getByRole('textbox')).toBeDisabled();
-    });
-
-    it('applies custom className', () => {
-        render(<Textarea className="custom-textarea" data-testid="textarea" />);
-        expect(screen.getByTestId('textarea')).toHaveClass('custom-textarea');
-    });
-
-    it('forwards ref correctly', () => {
-        const ref = vi.fn();
-        render(<Textarea ref={ref} />);
-        expect(ref).toHaveBeenCalled();
-    });
-
-    it('supports rows attribute', () => {
-        render(<Textarea rows={5} data-testid="textarea" />);
-        expect(screen.getByTestId('textarea')).toHaveAttribute('rows', '5');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/toast.test.tsx b/packages/ui/src/__tests__/components/toast.test.tsx
deleted file mode 100644
index 0010032..0000000
--- a/packages/ui/src/__tests__/components/toast.test.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, act, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { renderHook } from '@testing-library/react';
-import { Toast, ToastContainer, useToast } from '../../components/toast';
-
-describe('Toast', () => {
-    it('renders with title', () => {
-        render(<Toast title="Hello" />);
-        expect(screen.getByText('Hello')).toBeInTheDocument();
-    });
-
-    it('renders with description', () => {
-        render(<Toast title="Title" description="Some details here" />);
-        expect(screen.getByText('Some details here')).toBeInTheDocument();
-    });
-
-    it('has role=alert for screen readers', () => {
-        render(<Toast title="Alert" />);
-        expect(screen.getByRole('alert')).toBeInTheDocument();
-    });
-
-    it('calls onClose when close button is clicked', async () => {
-        const onClose = vi.fn();
-        render(<Toast title="Toast" onClose={onClose} />);
-        await userEvent.click(screen.getByRole('button', { name: /close/i }));
-        await waitFor(() => expect(onClose).toHaveBeenCalledTimes(1), { timeout: 500 });
-    });
-
-    it('shows close button only when onClose is provided', () => {
-        const { rerender } = render(<Toast title="No close" />);
-        expect(screen.queryByRole('button', { name: /close/i })).not.toBeInTheDocument();
-
-        rerender(<Toast title="With close" onClose={vi.fn()} />);
-        expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
-    });
-
-    it('renders progress bar when duration and onClose are provided', () => {
-        const { container } = render(<Toast title="Progress" onClose={vi.fn()} duration={3000} />);
-        const progressBar = container.querySelector('.animate-nb-shrink');
-        expect(progressBar).toBeInTheDocument();
-    });
-
-    it('does not render progress bar without onClose', () => {
-        const { container } = render(<Toast title="No Progress" duration={3000} />);
-        expect(container.querySelector('.animate-nb-shrink')).not.toBeInTheDocument();
-    });
-
-    it('renders children when provided', () => {
-        render(<Toast><span>Custom child</span></Toast>);
-        expect(screen.getByText('Custom child')).toBeInTheDocument();
-    });
-
-    it('renders action slot', () => {
-        render(<Toast title="Action toast" action={<button>Undo</button>} />);
-        expect(screen.getByRole('button', { name: 'Undo' })).toBeInTheDocument();
-    });
-
-    it.each([
-        ['default', 'bg-white'],
-        ['success', 'bg-[#7FB069]'],
-        ['error', 'bg-[#FF6B6B]'],
-        ['warning', 'bg-[#FFE66D]'],
-        ['info', 'bg-[#4ECDC4]'],
-    ] as const)('applies correct background class for variant=%s', (variant, expectedClass) => {
-        const { container } = render(<Toast variant={variant} title="Test" />);
-        expect(container.firstChild).toHaveClass(expectedClass);
-    });
-});
-
-describe('ToastContainer', () => {
-    it('renders children', () => {
-        render(
-            <ToastContainer>
-                <Toast title="Toast 1" />
-                <Toast title="Toast 2" />
-            </ToastContainer>
-        );
-        expect(screen.getByText('Toast 1')).toBeInTheDocument();
-        expect(screen.getByText('Toast 2')).toBeInTheDocument();
-    });
-
-    it('applies bottom-right position by default', () => {
-        const { container } = render(<ToastContainer><Toast title="T" /></ToastContainer>);
-        expect(container.firstChild).toHaveClass('bottom-4', 'right-4');
-    });
-
-    it('applies top-left position when specified', () => {
-        const { container } = render(<ToastContainer position="top-left"><Toast title="T" /></ToastContainer>);
-        expect(container.firstChild).toHaveClass('top-4', 'left-4');
-    });
-});
-
-describe('useToast', () => {
-    it('starts with no toasts', () => {
-        const { result } = renderHook(() => useToast());
-        expect(result.current.toasts).toEqual([]);
-    });
-
-    it('adds a toast with addToast', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.addToast({ title: 'Hello', variant: 'default' });
-        });
-        expect(result.current.toasts).toHaveLength(1);
-        expect(result.current.toasts[0].title).toBe('Hello');
-        expect(result.current.toasts[0].variant).toBe('default');
-    });
-
-    it('addToast returns an id string', () => {
-        const { result } = renderHook(() => useToast());
-        let id!: string;
-        act(() => {
-            id = result.current.addToast({ title: 'Test' });
-        });
-        expect(typeof id).toBe('string');
-        expect(id.length).toBeGreaterThan(0);
-    });
-
-    it('removeToast removes the correct toast', () => {
-        const { result } = renderHook(() => useToast());
-        let id!: string;
-        act(() => {
-            id = result.current.addToast({ title: 'Removable' });
-            result.current.addToast({ title: 'Keep me' });
-        });
-        act(() => {
-            result.current.removeToast(id);
-        });
-        expect(result.current.toasts).toHaveLength(1);
-        expect(result.current.toasts[0].title).toBe('Keep me');
-    });
-
-    it('clearToasts removes all toasts', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.addToast({ title: 'A' });
-            result.current.addToast({ title: 'B' });
-            result.current.addToast({ title: 'C' });
-        });
-        act(() => {
-            result.current.clearToasts();
-        });
-        expect(result.current.toasts).toHaveLength(0);
-    });
-
-    it('success shorthand sets variant=success', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.success('Done!', 'All good');
-        });
-        expect(result.current.toasts[0].variant).toBe('success');
-        expect(result.current.toasts[0].title).toBe('Done!');
-        expect(result.current.toasts[0].description).toBe('All good');
-    });
-
-    it('error shorthand sets variant=error', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.error('Oops');
-        });
-        expect(result.current.toasts[0].variant).toBe('error');
-    });
-
-    it('warning shorthand sets variant=warning', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.warning('Careful');
-        });
-        expect(result.current.toasts[0].variant).toBe('warning');
-    });
-
-    it('info shorthand sets variant=info', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.info('FYI');
-        });
-        expect(result.current.toasts[0].variant).toBe('info');
-    });
-
-    it('accumulates multiple toasts', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.addToast({ title: 'First' });
-            result.current.addToast({ title: 'Second' });
-            result.current.addToast({ title: 'Third' });
-        });
-        expect(result.current.toasts).toHaveLength(3);
-    });
-
-    it('each toast has a unique id', () => {
-        const { result } = renderHook(() => useToast());
-        act(() => {
-            result.current.addToast({ title: 'A' });
-            result.current.addToast({ title: 'B' });
-        });
-        const ids = result.current.toasts.map((t) => t.id);
-        expect(new Set(ids).size).toBe(ids.length);
-    });
-});
diff --git a/packages/ui/src/__tests__/components/toggle-group.test.tsx b/packages/ui/src/__tests__/components/toggle-group.test.tsx
deleted file mode 100644
index a0415d7..0000000
--- a/packages/ui/src/__tests__/components/toggle-group.test.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ToggleGroup, ToggleGroupItem } from '../../components/toggle-group';
-
-describe('ToggleGroup', () => {
-    it('renders single-select toggle items correctly', async () => {
-        const onValueChange = vi.fn();
-        render(
-            <ToggleGroup type="single" onValueChange={onValueChange}>
-                <ToggleGroupItem value="left" aria-label="left">Left</ToggleGroupItem>
-                <ToggleGroupItem value="center" aria-label="center">Center</ToggleGroupItem>
-                <ToggleGroupItem value="right" aria-label="right">Right</ToggleGroupItem>
-            </ToggleGroup>
-        );
-
-        const leftBtn = screen.getByRole('radio', { name: 'left' });
-        const centerBtn = screen.getByRole('radio', { name: 'center' });
-
-        expect(leftBtn).toHaveAttribute('aria-checked', 'false');
-        expect(centerBtn).toHaveAttribute('aria-checked', 'false');
-
-        await userEvent.click(leftBtn);
-        expect(onValueChange).toHaveBeenCalledWith('left');
-        expect(leftBtn).toHaveAttribute('aria-checked', 'true');
-
-        await userEvent.click(centerBtn);
-        expect(onValueChange).toHaveBeenCalledWith('center');
-        expect(leftBtn).toHaveAttribute('aria-checked', 'false');
-        expect(centerBtn).toHaveAttribute('aria-checked', 'true');
-    });
-
-    it('renders multi-select toggle items correctly', async () => {
-        const onValueChange = vi.fn();
-        render(
-            <ToggleGroup type="multiple" onValueChange={onValueChange}>
-                <ToggleGroupItem value="bold" aria-label="bold">Bold</ToggleGroupItem>
-                <ToggleGroupItem value="italic" aria-label="italic">Italic</ToggleGroupItem>
-            </ToggleGroup>
-        );
-
-        const boldBtn = screen.getByRole('button', { name: 'bold' });
-        const italicBtn = screen.getByRole('button', { name: 'italic' });
-
-        await userEvent.click(boldBtn);
-        expect(onValueChange).toHaveBeenCalledWith(['bold']);
-        expect(boldBtn).toHaveAttribute('aria-pressed', 'true');
-
-        await userEvent.click(italicBtn);
-        expect(onValueChange).toHaveBeenCalledWith(['bold', 'italic']);
-        expect(boldBtn).toHaveAttribute('aria-pressed', 'true');
-        expect(italicBtn).toHaveAttribute('aria-pressed', 'true');
-    });
-});
diff --git a/packages/ui/src/__tests__/components/toggle.test.tsx b/packages/ui/src/__tests__/components/toggle.test.tsx
deleted file mode 100644
index 936aac9..0000000
--- a/packages/ui/src/__tests__/components/toggle.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Toggle } from '../../components/toggle';
-
-describe('Toggle', () => {
-    it('renders with button role', () => {
-        render(<Toggle aria-label="bold">Bold</Toggle>);
-        const btn = screen.getByRole('button', { name: 'bold' });
-        expect(btn).toBeInTheDocument();
-        expect(btn).toHaveAttribute('aria-pressed', 'false');
-    });
-
-    it('changes state when clicked', async () => {
-        const onPressedChange = vi.fn();
-        render(<Toggle aria-label="bold" onPressedChange={onPressedChange}>Bold</Toggle>);
-
-        const btn = screen.getByRole('button', { name: 'bold' });
-        await userEvent.click(btn);
-
-        expect(onPressedChange).toHaveBeenCalledWith(true);
-        expect(btn).toHaveAttribute('aria-pressed', 'true');
-    });
-
-    it('remains unclickable when disabled', async () => {
-        const onPressedChange = vi.fn();
-        render(<Toggle aria-label="bold" disabled onPressedChange={onPressedChange}>Bold</Toggle>);
-
-        const btn = screen.getByRole('button', { name: 'bold' });
-        await userEvent.click(btn);
-
-        expect(onPressedChange).not.toHaveBeenCalled();
-        expect(btn).toBeDisabled();
-    });
-});
diff --git a/packages/ui/src/__tests__/components/tooltip.test.tsx b/packages/ui/src/__tests__/components/tooltip.test.tsx
deleted file mode 100644
index 64ab71f..0000000
--- a/packages/ui/src/__tests__/components/tooltip.test.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, act, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
-
-function TestTooltip({
-    content = 'Tooltip text',
-    delayDuration = 0,
-    open,
-    defaultOpen,
-    onOpenChange,
-}: {
-    content?: string;
-    delayDuration?: number;
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (v: boolean) => void;
-}) {
-    return (
-        <TooltipProvider delayDuration={delayDuration}>
-            <Tooltip open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-                <TooltipTrigger>Hover me</TooltipTrigger>
-                <TooltipContent>{content}</TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
-    );
-}
-
-describe('Tooltip', () => {
-    it('renders the trigger', () => {
-        render(<TestTooltip />);
-        expect(screen.getByText('Hover me')).toBeInTheDocument();
-    });
-
-    it('tooltip content is not visible by default', () => {
-        render(<TestTooltip />);
-        expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-    });
-
-    it('shows content when open=true (controlled)', () => {
-        render(<TestTooltip open />);
-        expect(screen.getByRole('tooltip')).toBeInTheDocument();
-        expect(screen.getByRole('tooltip')).toHaveTextContent('Tooltip text');
-    });
-
-    it('shows content on mouse hover (delayDuration=0)', async () => {
-        render(<TestTooltip delayDuration={0} />);
-        await userEvent.hover(screen.getByText('Hover me'));
-        await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument());
-    });
-
-    it('hides content when trigger loses focus', async () => {
-        render(<TestTooltip delayDuration={0} />);
-        await act(async () => screen.getByText('Hover me').focus());
-        await waitFor(() => screen.getByRole('tooltip'));
-        await act(async () => screen.getByText('Hover me').blur());
-        await waitFor(() =>
-            expect(screen.getByText('Hover me')).toHaveAttribute('data-state', 'closed')
-        );
-    });
-
-    it('shows content on focus', async () => {
-        render(<TestTooltip delayDuration={0} />);
-        await act(async () => screen.getByText('Hover me').focus());
-        await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument());
-    });
-
-    it('hides content on blur', async () => {
-        render(<TestTooltip delayDuration={0} />);
-        await act(async () => screen.getByText('Hover me').focus());
-        await waitFor(() => screen.getByRole('tooltip'));
-        await act(async () => screen.getByText('Hover me').blur());
-        await waitFor(() =>
-            expect(screen.getByText('Hover me')).toHaveAttribute('data-state', 'closed')
-        );
-    });
-
-    it('shows content when defaultOpen=true', () => {
-        render(<TestTooltip defaultOpen />);
-        expect(screen.getByRole('tooltip')).toBeInTheDocument();
-    });
-
-    it('calls onOpenChange when tooltip opens on hover', async () => {
-        const onOpenChange = vi.fn();
-        render(<TestTooltip delayDuration={0} onOpenChange={onOpenChange} />);
-        await userEvent.hover(screen.getByText('Hover me'));
-        await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(true));
-    });
-
-    it('calls onOpenChange(false) when trigger loses focus', async () => {
-        const onOpenChange = vi.fn();
-        render(<TestTooltip delayDuration={0} onOpenChange={onOpenChange} />);
-        await act(async () => screen.getByText('Hover me').focus());
-        await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(true));
-        await act(async () => screen.getByText('Hover me').blur());
-        await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false));
-    });
-
-    it('renders custom content', () => {
-        render(
-            <TooltipProvider>
-                <Tooltip open>
-                    <TooltipTrigger>Trigger</TooltipTrigger>
-                    <TooltipContent>
-                        <strong>Bold tip</strong>
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
-        );
-        expect(screen.getByRole('tooltip')).toHaveTextContent('Bold tip');
-    });
-
-    it('applies brutalist styling classes to content', () => {
-        render(<TestTooltip open content="Styled tip" />);
-        const tooltipSpan = screen.getByRole('tooltip');
-        const visibleContent = tooltipSpan.parentElement!;
-        expect(visibleContent).toHaveClass('bg-black', 'text-white', 'font-bold', 'border-2');
-    });
-
-    it('TooltipProvider is required — Radix throws without it', () => {
-        expect(() =>
-            render(
-                <Tooltip>
-                    <TooltipTrigger>Btn</TooltipTrigger>
-                    <TooltipContent>Tip</TooltipContent>
-                </Tooltip>
-            )
-        ).toThrow();
-    });
-});
-
diff --git a/packages/ui/src/__tests__/components/waitlist-page.test.tsx b/packages/ui/src/__tests__/components/waitlist-page.test.tsx
deleted file mode 100644
index 737ea80..0000000
--- a/packages/ui/src/__tests__/components/waitlist-page.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { WaitlistPage } from '../../components/waitlist-page';
-
-describe('WaitlistPage', () => {
-    it('renders titles, social proof elements, and submit button', () => {
-        render(<WaitlistPage title="Join private beta waitlist" description="Beta keys daily" />);
-
-        expect(screen.getByText('Join private beta waitlist')).toBeInTheDocument();
-        expect(screen.getByText('Beta keys daily')).toBeInTheDocument();
-        expect(screen.getByText('1,840+ Developers on waitlist')).toBeInTheDocument();
-        expect(screen.getByText('4.9/5 stars rating')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Secure Priority Access' })).toBeInTheDocument();
-    });
-
-    it('triggers waitlist form submission callback with email string', async () => {
-        const onSubmit = vi.fn((e, val) => e.preventDefault());
-        render(<WaitlistPage onWaitlistSubmit={onSubmit} ctaText="Submit Waitlist" />);
-
-        const emailInput = screen.getByPlaceholderText('Enter your personal email...');
-        const submitBtn = screen.getByRole('button', { name: 'Submit Waitlist' });
-
-        await userEvent.type(emailInput, 'hacker@brutx.io');
-        await userEvent.click(submitBtn);
-
-        expect(onSubmit).toHaveBeenCalledOnce();
-    });
-});
diff --git a/packages/ui/src/__tests__/exports.test.tsx b/packages/ui/src/__tests__/exports.test.tsx
deleted file mode 100644
index 78094a6..0000000
--- a/packages/ui/src/__tests__/exports.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { Button } from '../../dist/index.js';
-import { Card } from '../../dist/index.js';
-import { Calendar } from '../../dist/calendar.js';
-import { SubmitButton } from '../../dist/submit-button.js';
-
-describe('Built Library Exports Smoke Tests', () => {
-    it('should successfully render Button imported from built index bundle', () => {
-        render(<Button>Smoke Test Button</Button>);
-        expect(screen.getByRole('button')).toHaveTextContent('Smoke Test Button');
-    });
-
-    it('should successfully render Card components', () => {
-        render(<Card>Smoke Test Card</Card>);
-        expect(screen.getByText('Smoke Test Card')).toBeInTheDocument();
-    });
-
-    it('should successfully render Calendar imported from separate built calendar bundle', () => {
-        const { container } = render(<Calendar />);
-        expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('should successfully render SubmitButton from separate submit-button bundle', () => {
-        render(<SubmitButton>Submit</SubmitButton>);
-        expect(screen.getByRole('button')).toHaveTextContent('Submit');
-    });
-});
diff --git a/packages/ui/src/__tests__/lib/utils.test.ts b/packages/ui/src/__tests__/lib/utils.test.ts
deleted file mode 100644
index 1189d66..0000000
--- a/packages/ui/src/__tests__/lib/utils.test.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { cn } from '../../lib/utils';
-
-describe('cn utility function', () => {
-    it('merges class names correctly', () => {
-        const result = cn('class1', 'class2');
-        expect(result).toBe('class1 class2');
-    });
-
-    it('handles conditional classes', () => {
-        const result = cn('base', true && 'included', false && 'excluded');
-        expect(result).toBe('base included');
-    });
-
-    it('handles undefined and null values', () => {
-        const result = cn('base', undefined, null, 'end');
-        expect(result).toBe('base end');
-    });
-
-    it('merges Tailwind classes correctly', () => {
-        const result = cn('px-4 py-2', 'px-6');
-        expect(result).toBe('py-2 px-6');
-    });
-
-    it('handles array of classes', () => {
-        const result = cn(['class1', 'class2']);
-        expect(result).toBe('class1 class2');
-    });
-
-    it('handles object syntax', () => {
-        const result = cn({
-            class1: true,
-            class2: false,
-            class3: true,
-        });
-        expect(result).toBe('class1 class3');
-    });
-
-    it('handles empty input', () => {
-        const result = cn();
-        expect(result).toBe('');
-    });
-
-    it('handles complex Tailwind merging', () => {
-        const result = cn('bg-red-500 text-white', 'bg-blue-500', 'hover:bg-green-500');
-        expect(result).toBe('text-white bg-blue-500 hover:bg-green-500');
-    });
-
-    it('preserves non-conflicting classes', () => {
-        const result = cn('border-2 rounded-lg shadow-md', 'p-4 m-2');
-        expect(result).toBe('border-2 rounded-lg shadow-md p-4 m-2');
-    });
-});
diff --git a/packages/ui/src/__tests__/setup.ts b/packages/ui/src/__tests__/setup.ts
deleted file mode 100644
index 07226e7..0000000
--- a/packages/ui/src/__tests__/setup.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import '@testing-library/jest-dom';
-import { cleanup } from '@testing-library/react';
-import { afterEach, vi } from 'vitest';
-
-afterEach(() => {
-    cleanup();
-});
-
-Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: vi.fn().mockImplementation((query) => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-    })),
-});
-
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-}));
-
-window.HTMLElement.prototype.hasPointerCapture = vi.fn().mockReturnValue(false);
-window.HTMLElement.prototype.setPointerCapture = vi.fn();
-window.HTMLElement.prototype.releasePointerCapture = vi.fn();
-
-window.HTMLElement.prototype.scrollIntoView = vi.fn();
-
-global.IntersectionObserver = vi.fn().mockImplementation(() => ({
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-}));
diff --git a/packages/ui/src/calendar.ts b/packages/ui/src/calendar.ts
index b2177cd..0fc1a3b 100644
--- a/packages/ui/src/calendar.ts
+++ b/packages/ui/src/calendar.ts
@@ -1,3 +1 @@
-'use client';
-
-export * from './components/calendar';
+export { default as Calendar } from './components/calendar/Calendar.vue'
diff --git a/packages/ui/src/components/accessibility.test.ts b/packages/ui/src/components/accessibility.test.ts
new file mode 100644
index 0000000..e4bd216
--- /dev/null
+++ b/packages/ui/src/components/accessibility.test.ts
@@ -0,0 +1,389 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent, ref, nextTick } from 'vue'
+import {
+    DialogRoot,
+    AlertDialogRoot,
+    TabsRoot,
+    SelectRoot,
+    SelectValue,
+    DropdownMenuRoot,
+    DropdownMenuTrigger,
+} from 'reka-ui'
+import DialogContent from './dialog/DialogContent.vue'
+import DialogTitle from './dialog/DialogTitle.vue'
+import DialogDescription from './dialog/DialogDescription.vue'
+import AlertDialogContent from './alert-dialog/AlertDialogContent.vue'
+import AlertDialogTitle from './alert-dialog/AlertDialogTitle.vue'
+import AlertDialogDescription from './alert-dialog/AlertDialogDescription.vue'
+import TabsList from './tabs/TabsList.vue'
+import TabsTrigger from './tabs/TabsTrigger.vue'
+import TabsContent from './tabs/TabsContent.vue'
+import SelectTrigger from './select/SelectTrigger.vue'
+import DropdownMenuContent from './dropdown-menu/DropdownMenuContent.vue'
+import DropdownMenuItem from './dropdown-menu/DropdownMenuItem.vue'
+import Label from './label/Label.vue'
+import Input from './input/Input.vue'
+import Button from './button/Button.vue'
+import FormLabel from './form/FormLabel.vue'
+import FormMessage from './form/FormMessage.vue'
+import { formFieldKey, formItemKey } from './form/form-context'
+
+afterEach(() => {
+    document.body.innerHTML = ''
+})
+
+describe('Dialog accessibility', () => {
+    const DialogWrapper = defineComponent({
+        components: { DialogRoot, DialogContent, DialogTitle, DialogDescription },
+        template: `
+            <DialogRoot :default-open="true">
+                <DialogContent>
+                    <DialogTitle>Dialog Title</DialogTitle>
+                    <DialogDescription>Dialog Description</DialogDescription>
+                </DialogContent>
+            </DialogRoot>
+        `,
+    })
+
+    it('DialogContent should have role="dialog"', async () => {
+        const wrapper = mount(DialogWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const dialog = document.querySelector('[role="dialog"]')
+        expect(dialog).not.toBeNull()
+        wrapper.unmount()
+    })
+
+    it('DialogContent should have aria-labelledby pointing to DialogTitle', async () => {
+        const wrapper = mount(DialogWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const dialog = document.querySelector('[role="dialog"]')
+        expect(dialog).not.toBeNull()
+        const labelledBy = dialog!.getAttribute('aria-labelledby')
+        expect(labelledBy).toBeTruthy()
+        const title = document.getElementById(labelledBy!)
+        expect(title).not.toBeNull()
+        expect(title!.textContent).toContain('Dialog Title')
+        wrapper.unmount()
+    })
+
+    it('DialogContent should have aria-describedby pointing to DialogDescription', async () => {
+        const wrapper = mount(DialogWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const dialog = document.querySelector('[role="dialog"]')
+        expect(dialog).not.toBeNull()
+        const describedBy = dialog!.getAttribute('aria-describedby')
+        expect(describedBy).toBeTruthy()
+        const description = document.getElementById(describedBy!)
+        expect(description).not.toBeNull()
+        expect(description!.textContent).toContain('Dialog Description')
+        wrapper.unmount()
+    })
+
+    it('DialogOverlay should render when dialog is open', async () => {
+        const wrapper = mount(DialogWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const overlay = document.querySelector('[data-state="open"]')
+        expect(overlay).not.toBeNull()
+        wrapper.unmount()
+    })
+})
+
+describe('AlertDialog accessibility', () => {
+    const AlertDialogWrapper = defineComponent({
+        components: {
+            AlertDialogRoot,
+            AlertDialogContent,
+            AlertDialogTitle,
+            AlertDialogDescription,
+        },
+        template: `
+            <AlertDialogRoot :default-open="true">
+                <AlertDialogContent>
+                    <AlertDialogTitle>Alert Title</AlertDialogTitle>
+                    <AlertDialogDescription>Alert Description</AlertDialogDescription>
+                </AlertDialogContent>
+            </AlertDialogRoot>
+        `,
+    })
+
+    it('AlertDialogContent should have role="alertdialog"', async () => {
+        const wrapper = mount(AlertDialogWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const dialog = document.querySelector('[role="alertdialog"]')
+        expect(dialog).not.toBeNull()
+        wrapper.unmount()
+    })
+
+    it('AlertDialogContent should have aria-labelledby pointing to AlertDialogTitle', async () => {
+        const wrapper = mount(AlertDialogWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const dialog = document.querySelector('[role="alertdialog"]')
+        expect(dialog).not.toBeNull()
+        const labelledBy = dialog!.getAttribute('aria-labelledby')
+        expect(labelledBy).toBeTruthy()
+        const title = document.getElementById(labelledBy!)
+        expect(title).not.toBeNull()
+        expect(title!.textContent).toContain('Alert Title')
+        wrapper.unmount()
+    })
+
+    it('AlertDialogContent should have aria-describedby pointing to AlertDialogDescription', async () => {
+        const wrapper = mount(AlertDialogWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const dialog = document.querySelector('[role="alertdialog"]')
+        expect(dialog).not.toBeNull()
+        const describedBy = dialog!.getAttribute('aria-describedby')
+        expect(describedBy).toBeTruthy()
+        const description = document.getElementById(describedBy!)
+        expect(description).not.toBeNull()
+        expect(description!.textContent).toContain('Alert Description')
+        wrapper.unmount()
+    })
+})
+
+describe('Tabs accessibility', () => {
+    const TabsWrapper = defineComponent({
+        components: { TabsRoot, TabsList, TabsTrigger, TabsContent },
+        template: `
+            <TabsRoot default-value="tab1">
+                <TabsList>
+                    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+                    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+                </TabsList>
+                <TabsContent value="tab1">Content 1</TabsContent>
+                <TabsContent value="tab2">Content 2</TabsContent>
+            </TabsRoot>
+        `,
+    })
+
+    it('TabsList should have role="tablist"', async () => {
+        const wrapper = mount(TabsWrapper, { attachTo: document.body })
+        await nextTick()
+        const tablist = wrapper.find('[role="tablist"]')
+        expect(tablist.exists()).toBe(true)
+        wrapper.unmount()
+    })
+
+    it('TabsTrigger should have role="tab"', async () => {
+        const wrapper = mount(TabsWrapper, { attachTo: document.body })
+        await nextTick()
+        const tabs = wrapper.findAll('[role="tab"]')
+        expect(tabs.length).toBe(2)
+        wrapper.unmount()
+    })
+
+    it('TabsContent should have role="tabpanel"', async () => {
+        const wrapper = mount(TabsWrapper, { attachTo: document.body })
+        await nextTick()
+        const tabpanel = wrapper.find('[role="tabpanel"]')
+        expect(tabpanel.exists()).toBe(true)
+        wrapper.unmount()
+    })
+
+    it('TabsTrigger should have aria-selected attribute', async () => {
+        const wrapper = mount(TabsWrapper, { attachTo: document.body })
+        await nextTick()
+        const activeTab = wrapper.find('[role="tab"][aria-selected="true"]')
+        expect(activeTab.exists()).toBe(true)
+        expect(activeTab.text()).toBe('Tab 1')
+        wrapper.unmount()
+    })
+
+    it('TabsContent should have aria-labelledby pointing to corresponding tab', async () => {
+        const wrapper = mount(TabsWrapper, { attachTo: document.body })
+        await nextTick()
+        const tabpanel = wrapper.find('[role="tabpanel"]')
+        expect(tabpanel.exists()).toBe(true)
+        const labelledBy = tabpanel.attributes('aria-labelledby')
+        expect(labelledBy).toBeTruthy()
+        const trigger = document.getElementById(labelledBy!)
+        expect(trigger).not.toBeNull()
+        expect(trigger!.getAttribute('role')).toBe('tab')
+        wrapper.unmount()
+    })
+})
+
+describe('Select accessibility', () => {
+    const SelectWrapper = defineComponent({
+        components: { SelectRoot, SelectTrigger, SelectValue },
+        template: `
+            <SelectRoot default-value="opt1">
+                <SelectTrigger>
+                    <SelectValue />
+                </SelectTrigger>
+            </SelectRoot>
+        `,
+    })
+
+    it('SelectTrigger should have role="combobox"', async () => {
+        const wrapper = mount(SelectWrapper, { attachTo: document.body })
+        await nextTick()
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.exists()).toBe(true)
+        wrapper.unmount()
+    })
+
+    it('SelectTrigger should have aria-expanded attribute', async () => {
+        const wrapper = mount(SelectWrapper, { attachTo: document.body })
+        await nextTick()
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.exists()).toBe(true)
+        expect(trigger.attributes('aria-expanded')).toBeDefined()
+        wrapper.unmount()
+    })
+
+    it('SelectTrigger should have aria-haspopup="listbox"', async () => {
+        const wrapper = mount(SelectWrapper, { attachTo: document.body })
+        await nextTick()
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.exists()).toBe(true)
+        expect(trigger.attributes('aria-haspopup')).toBe('listbox')
+        wrapper.unmount()
+    })
+})
+
+describe('DropdownMenu accessibility', () => {
+    const DropdownMenuWrapper = defineComponent({
+        components: {
+            DropdownMenuRoot,
+            DropdownMenuTrigger,
+            DropdownMenuContent,
+            DropdownMenuItem,
+        },
+        template: `
+            <DropdownMenuRoot :default-open="true">
+                <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem>Item 1</DropdownMenuItem>
+                    <DropdownMenuItem>Item 2</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenuRoot>
+        `,
+    })
+
+    it('DropdownMenuContent should have role="menu"', async () => {
+        const wrapper = mount(DropdownMenuWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const menu = document.querySelector('[role="menu"]')
+        expect(menu).not.toBeNull()
+        wrapper.unmount()
+    })
+
+    it('DropdownMenuItem should have role="menuitem"', async () => {
+        const wrapper = mount(DropdownMenuWrapper, { attachTo: document.body })
+        await nextTick()
+        await nextTick()
+        const menuItems = document.querySelectorAll('[role="menuitem"]')
+        expect(menuItems.length).toBe(2)
+        wrapper.unmount()
+    })
+})
+
+describe('Label accessibility', () => {
+    it('Label should render as a <label> element', () => {
+        const wrapper = mount(Label, { attachTo: document.body })
+        expect(wrapper.element.tagName).toBe('LABEL')
+        wrapper.unmount()
+    })
+
+    it('Label should associate with form control via for attribute', () => {
+        const wrapper = mount(
+            defineComponent({
+                components: { BrutxLabel: Label, BrutxInput: Input },
+                template: `
+                    <div>
+                        <BrutxLabel for="test-input">Username</BrutxLabel>
+                        <BrutxInput id="test-input" />
+                    </div>
+                `,
+            }),
+            { attachTo: document.body }
+        )
+        const label = wrapper.find('label')
+        expect(label.exists()).toBe(true)
+        expect(label.attributes('for')).toBe('test-input')
+        const input = wrapper.find('#test-input')
+        expect(input.exists()).toBe(true)
+        wrapper.unmount()
+    })
+})
+
+describe('Input accessibility', () => {
+    it('Input should have proper type attribute', () => {
+        const wrapper = mount(Input)
+        expect(wrapper.attributes('type')).toBe('text')
+    })
+
+    it('Input should have disabled attribute when disabled prop is true', () => {
+        const wrapper = mount(Input, { props: { disabled: true } })
+        expect(wrapper.attributes('disabled')).toBeDefined()
+    })
+})
+
+describe('Button accessibility', () => {
+    it('Button should have proper button role', () => {
+        const wrapper = mount(Button)
+        expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('Button should have disabled attribute when disabled', () => {
+        const wrapper = mount(Button, { props: { disabled: true } })
+        expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+})
+
+describe('Form accessibility', () => {
+    it('FormLabel should have for attribute linking to form item', () => {
+        const wrapper = mount(FormLabel, {
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'email',
+                        error: ref(undefined),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'form-id',
+                        formItemId: 'form-item-id',
+                        formDescriptionId: 'form-desc-id',
+                        formMessageId: 'form-msg-id',
+                    },
+                },
+            },
+            attachTo: document.body,
+        })
+        expect(wrapper.attributes('for')).toBe('form-item-id')
+        wrapper.unmount()
+    })
+
+    it('FormMessage should have role="alert" for error messages', () => {
+        const wrapper = mount(FormMessage, {
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'email',
+                        error: ref('Required field'),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'form-id',
+                        formItemId: 'form-item-id',
+                        formDescriptionId: 'form-desc-id',
+                        formMessageId: 'form-msg-id',
+                    },
+                },
+            },
+            attachTo: document.body,
+        })
+        const message = wrapper.find('p')
+        expect(message.exists()).toBe(true)
+        expect(message.attributes('role')).toBe('alert')
+        wrapper.unmount()
+    })
+})
diff --git a/packages/ui/src/components/accordion/Accordion.vue b/packages/ui/src/components/accordion/Accordion.vue
new file mode 100644
index 0000000..0d32c7d
--- /dev/null
+++ b/packages/ui/src/components/accordion/Accordion.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AccordionRoot, type AccordionRootProps, type AccordionRootEmits, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps<AccordionRootProps & { class?: string }>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <AccordionRoot v-bind="forwarded" :class="props.class">
+        <slot />
+    </AccordionRoot>
+</template>
diff --git a/packages/ui/src/components/accordion/AccordionContent.vue b/packages/ui/src/components/accordion/AccordionContent.vue
new file mode 100644
index 0000000..6c7e51d
--- /dev/null
+++ b/packages/ui/src/components/accordion/AccordionContent.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { accordionContentVariants } from './accordion-variants'
+
+const props = defineProps<AccordionContentProps & { class?: string }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const classes = computed(() =>
+    cn(accordionContentVariants(), props.class)
+)
+</script>
+
+<template>
+    <AccordionContent
+        v-bind="delegatedProps"
+        class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    >
+        <div :class="classes">
+            <slot />
+        </div>
+    </AccordionContent>
+</template>
diff --git a/packages/ui/src/components/accordion/AccordionItem.vue b/packages/ui/src/components/accordion/AccordionItem.vue
new file mode 100644
index 0000000..888d3b6
--- /dev/null
+++ b/packages/ui/src/components/accordion/AccordionItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { accordionItemVariants } from './accordion-variants'
+
+type AccordionItemVariantProps = VariantProps<typeof accordionItemVariants>
+
+interface Props extends AccordionItemProps {
+    variant?: NonNullable<AccordionItemVariantProps['variant']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: 'default',
+    class: '',
+})
+
+const delegatedProps = computed(() => {
+    const { class: _, variant: __, ...delegated } = props
+    return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const classes = computed(() =>
+    cn(accordionItemVariants({ variant: props.variant }), props.class)
+)
+</script>
+
+<template>
+    <AccordionItem v-bind="forwardedProps" :class="classes">
+        <slot />
+    </AccordionItem>
+</template>
diff --git a/packages/ui/src/components/accordion/AccordionTrigger.vue b/packages/ui/src/components/accordion/AccordionTrigger.vue
new file mode 100644
index 0000000..9871a8c
--- /dev/null
+++ b/packages/ui/src/components/accordion/AccordionTrigger.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { accordionTriggerVariants } from './accordion-variants'
+
+const props = defineProps<AccordionTriggerProps & { class?: string }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+
+const classes = computed(() =>
+    cn(
+        accordionTriggerVariants(),
+        '[&[data-state=open]>svg]:rotate-180',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <AccordionHeader class="flex">
+        <AccordionTrigger v-bind="forwarded" :class="classes">
+            <slot />
+            <slot name="icon">
+                <ChevronDown
+                    class="h-5 w-5 shrink-0 transition-transform duration-200 border-3 border-brutal rounded-brutal bg-brutal-bg p-0.5 shadow-brutal-sm"
+                />
+            </slot>
+        </AccordionTrigger>
+    </AccordionHeader>
+</template>
diff --git a/packages/ui/src/components/accordion/accordion-variants.ts b/packages/ui/src/components/accordion/accordion-variants.ts
new file mode 100644
index 0000000..5e2c5f4
--- /dev/null
+++ b/packages/ui/src/components/accordion/accordion-variants.ts
@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority'
+
+export const accordionItemVariants = cva(
+    [
+        'border-3 border-brutal bg-brutal-bg text-brutal-fg',
+        'transition-all duration-150',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'shadow-brutal mb-4',
+                flat: 'shadow-none mb-4',
+                ghost: 'border-transparent shadow-none mb-2',
+                interactive: [
+                    'shadow-brutal mb-4',
+                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
+                ],
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
+
+export const accordionTriggerVariants = cva(
+    [
+        'flex flex-1 items-center justify-between py-4 px-6',
+        'text-left font-black tracking-wide transition-all',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'hover:bg-brutal-muted',
+                flat: 'hover:bg-brutal-muted',
+                ghost: 'hover:bg-brutal-muted',
+                interactive: 'hover:bg-brutal-muted',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
+
+export const accordionContentVariants = cva(
+    'border-t-3 border-brutal p-6 bg-brutal-bg text-brutal-fg'
+)
diff --git a/packages/ui/src/components/accordion/accordion.test.ts b/packages/ui/src/components/accordion/accordion.test.ts
new file mode 100644
index 0000000..81281ad
--- /dev/null
+++ b/packages/ui/src/components/accordion/accordion.test.ts
@@ -0,0 +1,145 @@
+import { mount } from '@vue/test-utils'
+import Accordion from './Accordion.vue'
+import AccordionItem from './AccordionItem.vue'
+import AccordionTrigger from './AccordionTrigger.vue'
+import AccordionContent from './AccordionContent.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('Accordion', () => {
+    it('renders with default slot content', () => {
+        const wrapper = mount(Accordion, {
+            props: { type: 'single' },
+            slots: { default: '<div>Accordion content</div>' },
+            global: { stubs: { AccordionRoot: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Accordion content')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Accordion, {
+            props: { type: 'single', class: 'custom-accordion' },
+            global: { stubs: { AccordionRoot: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-accordion')
+    })
+})
+
+describe('AccordionItem', () => {
+    it('renders with default variant classes', () => {
+        const wrapper = mount(AccordionItem, {
+            props: { value: 'item-1' },
+            global: { stubs: { AccordionItem: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('bg-brutal-bg')
+        expect(classes).toContain('text-brutal-fg')
+        expect(classes).toContain('shadow-brutal')
+        expect(classes).toContain('mb-4')
+    })
+
+    it('applies flat variant classes', () => {
+        const wrapper = mount(AccordionItem, {
+            props: { value: 'item-1', variant: 'flat' },
+            global: { stubs: { AccordionItem: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('shadow-none')
+        expect(classes).toContain('mb-4')
+    })
+
+    it('applies ghost variant classes', () => {
+        const wrapper = mount(AccordionItem, {
+            props: { value: 'item-1', variant: 'ghost' },
+            global: { stubs: { AccordionItem: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('border-transparent')
+        expect(classes).toContain('shadow-none')
+        expect(classes).toContain('mb-2')
+    })
+
+    it('applies interactive variant classes', () => {
+        const wrapper = mount(AccordionItem, {
+            props: { value: 'item-1', variant: 'interactive' },
+            global: { stubs: { AccordionItem: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('shadow-brutal')
+        expect(classes).toContain('mb-4')
+        expect(classes).toContain('hover:shadow-brutal-lg')
+        expect(classes).toContain('hover:-translate-x-0.5')
+        expect(classes).toContain('hover:-translate-y-0.5')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AccordionItem, {
+            props: { value: 'item-1', class: 'custom-item' },
+            global: { stubs: { AccordionItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+    })
+})
+
+describe('AccordionTrigger', () => {
+    const triggerStubs = {
+        AccordionHeader: primitiveStub,
+        AccordionTrigger: {
+            template: '<div data-testid="accordion-trigger"><slot /><slot name="icon" /></div>',
+        },
+    }
+
+    it('renders with slot content', () => {
+        const wrapper = mount(AccordionTrigger, {
+            slots: { default: 'Section Title' },
+            global: { stubs: triggerStubs },
+        })
+        expect(wrapper.text()).toContain('Section Title')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AccordionTrigger, {
+            props: { class: 'custom-trigger' },
+            global: { stubs: triggerStubs },
+        })
+        const trigger = wrapper.find('[data-testid="accordion-trigger"]')
+        expect(trigger.classes()).toContain('custom-trigger')
+    })
+
+    it('has ChevronDown icon', () => {
+        const wrapper = mount(AccordionTrigger, {
+            global: { stubs: triggerStubs },
+        })
+        const svg = wrapper.find('svg')
+        expect(svg.exists()).toBe(true)
+        expect(svg.classes()).toContain('h-5')
+        expect(svg.classes()).toContain('w-5')
+        expect(svg.classes()).toContain('shrink-0')
+        expect(svg.classes()).toContain('border-3')
+        expect(svg.classes()).toContain('border-brutal')
+        expect(svg.classes()).toContain('shadow-brutal-sm')
+    })
+})
+
+describe('AccordionContent', () => {
+    it('renders with slot content', () => {
+        const wrapper = mount(AccordionContent, {
+            slots: { default: 'Content text here' },
+            global: { stubs: { AccordionContent: primitiveStub } },
+        })
+        expect(wrapper.text()).toContain('Content text here')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AccordionContent, {
+            props: { class: 'custom-content' },
+            global: { stubs: { AccordionContent: primitiveStub } },
+        })
+        const innerDiv = wrapper.find('[class*="custom-content"]')
+        expect(innerDiv.exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/activity-log-page/ActivityLogPage.vue b/packages/ui/src/components/activity-log-page/ActivityLogPage.vue
new file mode 100644
index 0000000..3436842
--- /dev/null
+++ b/packages/ui/src/components/activity-log-page/ActivityLogPage.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Table from '../table/Table.vue'
+import TableHeader from '../table/TableHeader.vue'
+import TableBody from '../table/TableBody.vue'
+import TableRow from '../table/TableRow.vue'
+import TableHead from '../table/TableHead.vue'
+import TableCell from '../table/TableCell.vue'
+import Badge from '../badge/Badge.vue'
+import Pagination from '../pagination/Pagination.vue'
+
+export interface ActivityEntry {
+    id: string
+    action: string
+    user: string
+    timestamp: string
+    details?: string
+    type?: 'info' | 'warning' | 'error' | 'success'
+}
+
+interface ActivityLogPageProps {
+    title?: string
+    activities?: ActivityEntry[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<ActivityLogPageProps>(), {
+    title: undefined,
+    activities: () => [],
+    class: '',
+})
+
+const emit = defineEmits<{
+    'entry-click': [id: string]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('activityLogPage.defaultTitle'))
+const resolvedAction = computed(() => t('activityLogPage.action'))
+const resolvedUser = computed(() => t('activityLogPage.user'))
+const resolvedTimestamp = computed(() => t('activityLogPage.timestamp'))
+const resolvedDetails = computed(() => t('activityLogPage.details'))
+const resolvedNoActivityFound = computed(() => t('activityLogPage.noActivityFound'))
+
+const PAGE_SIZE = 10
+
+const currentPage = ref(1)
+const totalPages = computed(() => Math.max(1, Math.ceil(props.activities.length / PAGE_SIZE)))
+
+const paginatedActivities = computed(() => {
+    const start = (currentPage.value - 1) * PAGE_SIZE
+    return props.activities.slice(start, start + PAGE_SIZE)
+})
+
+const typeVariantMap: Record<string, 'default' | 'accent' | 'danger' | 'success'> = {
+    info: 'default',
+    warning: 'accent',
+    error: 'danger',
+    success: 'success',
+}
+
+function getTypeBadgeVariant(type?: string): 'default' | 'accent' | 'danger' | 'success' {
+    return typeVariantMap[type ?? 'info'] ?? 'default'
+}
+
+function handleEntryClick(id: string) {
+    emit('entry-click', id)
+}
+
+function handlePageChange(page: number) {
+    currentPage.value = page
+}
+
+const rootClasses = computed(() =>
+    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="w-full max-w-4xl mx-auto">
+            <slot name="header">
+                <div class="mb-8">
+                    <h1 class="text-3xl font-black tracking-tight">
+                        {{ resolvedTitle }}
+                    </h1>
+                </div>
+            </slot>
+
+            <slot>
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>{{ resolvedAction }}</TableHead>
+                            <TableHead>{{ resolvedUser }}</TableHead>
+                            <TableHead>{{ resolvedTimestamp }}</TableHead>
+                            <TableHead>{{ resolvedDetails }}</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow
+                            v-for="entry in paginatedActivities"
+                            :key="entry.id"
+                            class="cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all"
+                            @click="handleEntryClick(entry.id)"
+                        >
+                            <TableCell>
+                                <div class="flex items-center gap-2">
+                                    <Badge :variant="getTypeBadgeVariant(entry.type)" size="sm">
+                                        {{ entry.type ?? 'info' }}
+                                    </Badge>
+                                    <span class="font-bold">{{ entry.action }}</span>
+                                </div>
+                            </TableCell>
+                            <TableCell>
+                                <span class="font-medium">{{ entry.user }}</span>
+                            </TableCell>
+                            <TableCell>
+                                <span class="font-medium">{{ entry.timestamp }}</span>
+                            </TableCell>
+                            <TableCell>
+                                <span v-if="entry.details" class="font-medium">{{ entry.details }}</span>
+                                <span v-else class="text-brutal-fg">—</span>
+                            </TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+
+                <div v-if="activities.length === 0" class="text-center py-12">
+                    <p class="text-lg font-bold text-brutal-fg">{{ resolvedNoActivityFound }}</p>
+                </div>
+
+                <div v-if="totalPages > 1" class="mt-8 flex justify-center">
+                    <Pagination
+                        :current-page="currentPage"
+                        :total-pages="totalPages"
+                        @update:current-page="handlePageChange"
+                    />
+                </div>
+            </slot>
+
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/activity-log-page/activity-log-page.test.ts b/packages/ui/src/components/activity-log-page/activity-log-page.test.ts
new file mode 100644
index 0000000..8de3fd1
--- /dev/null
+++ b/packages/ui/src/components/activity-log-page/activity-log-page.test.ts
@@ -0,0 +1,158 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import ActivityLogPage from './ActivityLogPage.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockActivities = [
+    { id: '1', action: 'User logged in', user: 'Alice', timestamp: '2026-01-01 10:00', details: 'Via SSO', type: 'info' as const },
+    { id: '2', action: 'File deleted', user: 'Bob', timestamp: '2026-01-01 11:00', details: 'report.pdf', type: 'warning' as const },
+    { id: '3', action: 'Deploy failed', user: 'Charlie', timestamp: '2026-01-01 12:00', details: 'Build error', type: 'error' as const },
+    { id: '4', action: 'Payment received', user: 'Diana', timestamp: '2026-01-01 13:00', type: 'success' as const },
+]
+
+describe('ActivityLogPage', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(ActivityLogPage, { ...localeProvide })
+        expect(wrapper.find('h1').exists()).toBe(true)
+    })
+
+    it('renders default title from i18n', () => {
+        const wrapper = mount(ActivityLogPage, { ...localeProvide })
+        expect(wrapper.find('h1').text()).toBe('Activity Log')
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { title: 'System Log' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h1').text()).toBe('System Log')
+    })
+
+    it('renders table headers', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: mockActivities },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Action')
+        expect(wrapper.text()).toContain('User')
+        expect(wrapper.text()).toContain('Timestamp')
+        expect(wrapper.text()).toContain('Details')
+    })
+
+    it('renders activity entries', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: mockActivities },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('User logged in')
+        expect(wrapper.text()).toContain('File deleted')
+        expect(wrapper.text()).toContain('Deploy failed')
+        expect(wrapper.text()).toContain('Payment received')
+    })
+
+    it('renders user column', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: mockActivities },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Alice')
+        expect(wrapper.text()).toContain('Bob')
+    })
+
+    it('renders timestamp column', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: mockActivities },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('2026-01-01 10:00')
+    })
+
+    it('renders type badges', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: mockActivities },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('info')
+        expect(wrapper.text()).toContain('warning')
+        expect(wrapper.text()).toContain('error')
+        expect(wrapper.text()).toContain('success')
+    })
+
+    it('shows dash for entries without details', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: mockActivities },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('—')
+    })
+
+    it('emits entry-click when a row is clicked', async () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: mockActivities },
+            ...localeProvide,
+        })
+        const rows = wrapper.findAll('tr')
+        const dataRow = rows.find(row => row.text().includes('User logged in'))
+        await dataRow!.trigger('click')
+        expect(wrapper.emitted('entry-click')).toBeTruthy()
+        expect(wrapper.emitted('entry-click')![0]).toEqual(['1'])
+    })
+
+    it('renders pagination when activities exceed page size', () => {
+        const manyActivities = Array.from({ length: 15 }, (_, i) => ({
+            id: String(i + 1),
+            action: `Action ${i + 1}`,
+            user: 'User',
+            timestamp: '2026-01-01',
+            type: 'info' as const,
+        }))
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: manyActivities },
+            ...localeProvide,
+        })
+        expect(wrapper.find('nav').exists()).toBe(true)
+    })
+
+    it('shows empty state when no activities', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { activities: [] },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('No activity found')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(ActivityLogPage, {
+            props: { class: 'my-log' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-log')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(ActivityLogPage, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(ActivityLogPage, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(ActivityLogPage, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
deleted file mode 100644
index 444b0ae..0000000
--- a/packages/ui/src/components/alert-dialog.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import * as React from 'react';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-
-import { cn } from '../lib/utils';
-import { buttonVariants } from './button';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-const AlertDialogCancel = AlertDialogPrimitive.Cancel;
-
-const AlertDialogOverlay = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Overlay
-        ref={ref}
-        className={cn(
-            'fixed inset-0 z-50 bg-black/50',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            className
-        )}
-        {...props}
-    />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-    <AlertDialogPortal>
-        <AlertDialogOverlay />
-        <AlertDialogPrimitive.Content
-            ref={ref}
-            className={cn(
-                'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
-                'w-full max-w-lg p-6',
-                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal-xl',
-                'duration-200',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
-                'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-                className
-            )}
-            {...props}
-        />
-    </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', className)}
-        {...props}
-    />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',
-            className
-        )}
-        {...props}
-    />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Title
-        ref={ref}
-        className={cn('text-xl font-black tracking-tight', className)}
-        {...props}
-    />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Description
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Action>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
-        variant?: 'primary' | 'secondary' | 'accent' | 'danger' | 'outline';
-    }
->(({ className, variant = 'primary', ...props }, ref) => (
-    <AlertDialogPrimitive.Action
-        ref={ref}
-        className={cn(buttonVariants({ variant }), className)}
-        {...props}
-    />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-export {
-    AlertDialog,
-    AlertDialogPortal,
-    AlertDialogOverlay,
-    AlertDialogTrigger,
-    AlertDialogContent,
-    AlertDialogHeader,
-    AlertDialogFooter,
-    AlertDialogTitle,
-    AlertDialogDescription,
-    AlertDialogAction,
-    AlertDialogCancel,
-};
diff --git a/packages/ui/src/components/alert-dialog/AlertDialogAction.vue b/packages/ui/src/components/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 0000000..3856101
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AlertDialogAction as AlertDialogActionPrimitive } from 'reka-ui'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from '../button/button-variants'
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>
+
+interface AlertDialogActionProps {
+    variant?: NonNullable<ButtonVariantProps['variant']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<AlertDialogActionProps>(), {
+    variant: 'primary',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(buttonVariants({ variant: props.variant }), props.class)
+)
+</script>
+
+<template>
+    <AlertDialogActionPrimitive :class="classes">
+        <slot />
+    </AlertDialogActionPrimitive>
+</template>
diff --git a/packages/ui/src/components/alert-dialog/AlertDialogCancel.vue b/packages/ui/src/components/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 0000000..2910377
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AlertDialogCancel as AlertDialogCancelPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from '../button/button-variants'
+
+interface AlertDialogCancelProps {
+    class?: string
+}
+
+const props = defineProps<AlertDialogCancelProps>()
+
+const classes = computed(() =>
+    cn(buttonVariants({ variant: 'outline' }), props.class)
+)
+</script>
+
+<template>
+    <AlertDialogCancelPrimitive :class="classes">
+        <slot />
+    </AlertDialogCancelPrimitive>
+</template>
diff --git a/packages/ui/src/components/alert-dialog/AlertDialogContent.vue b/packages/ui/src/components/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 0000000..204f672
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    AlertDialogPortal as AlertDialogPortalPrimitive,
+    AlertDialogOverlay as AlertDialogOverlayPrimitive,
+    AlertDialogContent as AlertDialogContentPrimitive,
+} from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface AlertDialogContentProps {
+    class?: string
+}
+
+const props = defineProps<AlertDialogContentProps>()
+
+const overlayClasses = computed(() =>
+    cn(
+        'fixed inset-0 z-50 bg-brutal-overlay',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+    )
+)
+
+const contentClasses = computed(() =>
+    cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4',
+        'bg-brutal-bg p-6 text-brutal-fg border-brutal border-3 shadow-brutal-xl rounded-brutal',
+        'duration-200',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2',
+        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <AlertDialogPortalPrimitive>
+        <AlertDialogOverlayPrimitive :class="overlayClasses" />
+        <AlertDialogContentPrimitive :class="contentClasses">
+            <slot />
+        </AlertDialogContentPrimitive>
+    </AlertDialogPortalPrimitive>
+</template>
diff --git a/packages/ui/src/components/alert-dialog/AlertDialogDescription.vue b/packages/ui/src/components/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 0000000..0812f6b
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AlertDialogDescription as AlertDialogDescriptionPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface AlertDialogDescriptionProps {
+    class?: string
+}
+
+const props = defineProps<AlertDialogDescriptionProps>()
+
+const classes = computed(() =>
+    cn('text-sm text-brutal-muted-foreground font-medium', props.class)
+)
+</script>
+
+<template>
+    <AlertDialogDescriptionPrimitive :class="classes">
+        <slot />
+    </AlertDialogDescriptionPrimitive>
+</template>
diff --git a/packages/ui/src/components/alert-dialog/AlertDialogFooter.vue b/packages/ui/src/components/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 0000000..c1e09a0
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface AlertDialogFooterProps {
+    class?: string
+}
+
+const props = defineProps<AlertDialogFooterProps>()
+
+const classes = computed(() =>
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/alert-dialog/AlertDialogHeader.vue b/packages/ui/src/components/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 0000000..f6b8abc
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface AlertDialogHeaderProps {
+    class?: string
+}
+
+const props = defineProps<AlertDialogHeaderProps>()
+
+const classes = computed(() =>
+    cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/alert-dialog/AlertDialogTitle.vue b/packages/ui/src/components/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 0000000..6074e7d
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AlertDialogTitle as AlertDialogTitlePrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface AlertDialogTitleProps {
+    class?: string
+}
+
+const props = defineProps<AlertDialogTitleProps>()
+
+const classes = computed(() =>
+    cn('text-lg font-black tracking-tight text-brutal-fg', props.class)
+)
+</script>
+
+<template>
+    <AlertDialogTitlePrimitive :class="classes">
+        <slot />
+    </AlertDialogTitlePrimitive>
+</template>
diff --git a/packages/ui/src/components/alert-dialog/alert-dialog.test.ts b/packages/ui/src/components/alert-dialog/alert-dialog.test.ts
new file mode 100644
index 0000000..4987158
--- /dev/null
+++ b/packages/ui/src/components/alert-dialog/alert-dialog.test.ts
@@ -0,0 +1,162 @@
+import { mount } from '@vue/test-utils'
+import AlertDialogContent from './AlertDialogContent.vue'
+import AlertDialogHeader from './AlertDialogHeader.vue'
+import AlertDialogFooter from './AlertDialogFooter.vue'
+import AlertDialogTitle from './AlertDialogTitle.vue'
+import AlertDialogDescription from './AlertDialogDescription.vue'
+import AlertDialogAction from './AlertDialogAction.vue'
+import AlertDialogCancel from './AlertDialogCancel.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('AlertDialogContent', () => {
+    const contentStubs = {
+        AlertDialogPortal: primitiveStub,
+        AlertDialogOverlay: primitiveStub,
+        AlertDialogContent: {
+            template: '<div data-testid="alert-dialog-content"><slot /></div>',
+        },
+    }
+
+    it('renders with brutal styling classes', () => {
+        const wrapper = mount(AlertDialogContent, {
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="alert-dialog-content"]')
+        expect(content.classes()).toContain('border-3')
+        expect(content.classes()).toContain('border-brutal')
+        expect(content.classes()).toContain('shadow-brutal-xl')
+        expect(content.classes()).toContain('bg-brutal-bg')
+        expect(content.classes()).toContain('text-brutal-fg')
+        expect(content.classes()).toContain('rounded-brutal')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDialogContent, {
+            props: { class: 'custom-content' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="alert-dialog-content"]')
+        expect(content.classes()).toContain('custom-content')
+    })
+})
+
+describe('AlertDialogHeader', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertDialogHeader, {
+            slots: { default: 'Header text' },
+        })
+        expect(wrapper.text()).toBe('Header text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDialogHeader, {
+            props: { class: 'custom-header' },
+        })
+        expect(wrapper.classes()).toContain('custom-header')
+    })
+})
+
+describe('AlertDialogFooter', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertDialogFooter, {
+            slots: { default: 'Footer text' },
+        })
+        expect(wrapper.text()).toBe('Footer text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDialogFooter, {
+            props: { class: 'custom-footer' },
+        })
+        expect(wrapper.classes()).toContain('custom-footer')
+    })
+})
+
+describe('AlertDialogTitle', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertDialogTitle, {
+            slots: { default: 'Title text' },
+            global: { stubs: { AlertDialogTitle: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Title text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDialogTitle, {
+            props: { class: 'custom-title' },
+            global: { stubs: { AlertDialogTitle: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-title')
+    })
+})
+
+describe('AlertDialogDescription', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertDialogDescription, {
+            slots: { default: 'Description text' },
+            global: { stubs: { AlertDialogDescription: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Description text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDialogDescription, {
+            props: { class: 'custom-desc' },
+            global: { stubs: { AlertDialogDescription: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-desc')
+    })
+})
+
+describe('AlertDialogAction', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertDialogAction, {
+            slots: { default: 'Confirm' },
+            global: { stubs: { AlertDialogAction: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Confirm')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDialogAction, {
+            props: { class: 'custom-action' },
+            global: { stubs: { AlertDialogAction: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-action')
+    })
+
+    it('renders with primary variant by default', () => {
+        const wrapper = mount(AlertDialogAction, {
+            global: { stubs: { AlertDialogAction: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-primary')
+    })
+})
+
+describe('AlertDialogCancel', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertDialogCancel, {
+            slots: { default: 'Cancel' },
+            global: { stubs: { AlertDialogCancel: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Cancel')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDialogCancel, {
+            props: { class: 'custom-cancel' },
+            global: { stubs: { AlertDialogCancel: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-cancel')
+    })
+
+    it('renders with outline variant', () => {
+        const wrapper = mount(AlertDialogCancel, {
+            global: { stubs: { AlertDialogCancel: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('bg-transparent')
+    })
+})
diff --git a/packages/ui/src/components/alert.tsx b/packages/ui/src/components/alert.tsx
deleted file mode 100644
index f4da00b..0000000
--- a/packages/ui/src/components/alert.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const alertVariants = cva(
-    [
-        'relative w-full p-4 rounded-brutal',
-        'border-3 border-brutal dark:border-gray-600',
-        'shadow-brutal',
-        '[&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
-        '[&>svg]:h-5 [&>svg]:w-5 [&>svg]:stroke-[2.5]',
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'bg-brutal-bg text-brutal-fg dark:bg-gray-900 dark:text-gray-100',
-                primary: 'bg-brutal-primary text-black',
-                secondary: 'bg-brutal-secondary text-black',
-                success: 'bg-brutal-success text-black',
-                warning: 'bg-brutal-accent text-black',
-                danger: 'bg-brutal-destructive text-white',
-                info: 'bg-[var(--brutal-info,#4A90D9)] text-white',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-        },
-    }
-);
-
-export interface AlertProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof alertVariants> {}
-
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-    ({ className, variant, ...props }, ref) => (
-        <div
-            ref={ref}
-            role="alert"
-            className={cn(alertVariants({ variant }), className)}
-            {...props}
-        />
-    )
-);
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-    ({ className, ...props }, ref) => (
-        <h5
-            ref={ref}
-            className={cn('mb-1 font-black tracking-tight leading-none', className)}
-            {...props}
-        />
-    )
-);
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-    <div
-        ref={ref}
-        className={cn('text-sm font-medium [&_p]:leading-relaxed', className)}
-        {...props}
-    />
-));
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertTitle, AlertDescription, alertVariants };
diff --git a/packages/ui/src/components/alert/Alert.vue b/packages/ui/src/components/alert/Alert.vue
new file mode 100644
index 0000000..71f2767
--- /dev/null
+++ b/packages/ui/src/components/alert/Alert.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { alertVariants } from './alert-variants'
+
+type AlertVariantProps = VariantProps<typeof alertVariants>
+
+interface AlertProps {
+    variant?: NonNullable<AlertVariantProps['variant']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<AlertProps>(), {
+    variant: 'default',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(alertVariants({ variant: props.variant }), props.class)
+)
+</script>
+
+<template>
+    <div role="alert" :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/alert/AlertDescription.vue b/packages/ui/src/components/alert/AlertDescription.vue
new file mode 100644
index 0000000..75fe50c
--- /dev/null
+++ b/packages/ui/src/components/alert/AlertDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface AlertDescriptionProps {
+    class?: string
+}
+
+const props = defineProps<AlertDescriptionProps>()
+
+const classes = computed(() =>
+    cn('text-sm font-medium [&_p]:leading-relaxed', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/alert/AlertTitle.vue b/packages/ui/src/components/alert/AlertTitle.vue
new file mode 100644
index 0000000..6b0bca2
--- /dev/null
+++ b/packages/ui/src/components/alert/AlertTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface AlertTitleProps {
+    class?: string
+}
+
+const props = defineProps<AlertTitleProps>()
+
+const classes = computed(() =>
+    cn('mb-1 font-black tracking-tight leading-none', props.class)
+)
+</script>
+
+<template>
+    <h5 :class="classes">
+        <slot />
+    </h5>
+</template>
diff --git a/packages/ui/src/components/alert/alert-variants.ts b/packages/ui/src/components/alert/alert-variants.ts
new file mode 100644
index 0000000..bb44872
--- /dev/null
+++ b/packages/ui/src/components/alert/alert-variants.ts
@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority'
+
+export const alertVariants = cva(
+    [
+        'relative w-full p-4',
+        'border-3 border-brutal',
+        'shadow-brutal',
+        '[&>svg~*]:pl-8 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
+        '[&>svg]:h-5 [&>svg]:w-5 [&>svg]:stroke-[2.5]',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'bg-brutal-bg text-brutal-fg',
+                primary: 'bg-brutal-primary text-brutal-fg',
+                secondary: 'bg-brutal-secondary text-brutal-fg',
+                success: 'bg-brutal-success text-brutal-fg',
+                warning: 'bg-brutal-accent text-brutal-fg',
+                danger: 'bg-brutal-destructive text-brutal-fg',
+                info: 'bg-brutal-info text-brutal-fg',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/alert/alert.test.ts b/packages/ui/src/components/alert/alert.test.ts
new file mode 100644
index 0000000..8d1b0a6
--- /dev/null
+++ b/packages/ui/src/components/alert/alert.test.ts
@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils'
+import Alert from './Alert.vue'
+import AlertTitle from './AlertTitle.vue'
+import AlertDescription from './AlertDescription.vue'
+
+describe('Alert', () => {
+    it('renders with default variant', () => {
+        const wrapper = mount(Alert)
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('shadow-brutal')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+        expect(wrapper.classes()).toContain('text-brutal-fg')
+    })
+
+    it('applies variant classes', () => {
+        const variantMap: Record<string, string[]> = {
+            default: ['bg-brutal-bg', 'text-brutal-fg'],
+            primary: ['bg-brutal-primary', 'text-brutal-fg'],
+            secondary: ['bg-brutal-secondary', 'text-brutal-fg'],
+            success: ['bg-brutal-success', 'text-brutal-fg'],
+            warning: ['bg-brutal-accent', 'text-brutal-fg'],
+            danger: ['bg-brutal-destructive', 'text-brutal-fg'],
+            info: ['bg-brutal-info', 'text-brutal-fg'],
+        }
+
+        Object.entries(variantMap).forEach(([variant, expectedClasses]) => {
+            const wrapper = mount(Alert, { props: { variant: variant as 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' } })
+            expectedClasses.forEach((cls) => {
+                expect(wrapper.classes()).toContain(cls)
+            })
+        })
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Alert, {
+            slots: { default: '<p>Alert message</p>' },
+        })
+        expect(wrapper.text()).toBe('Alert message')
+    })
+
+    it('has role="alert"', () => {
+        const wrapper = mount(Alert)
+        expect(wrapper.attributes('role')).toBe('alert')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Alert, { props: { class: 'my-alert' } })
+        expect(wrapper.classes()).toContain('my-alert')
+    })
+})
+
+describe('AlertTitle', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertTitle, {
+            slots: { default: 'Alert Title' },
+        })
+        expect(wrapper.text()).toBe('Alert Title')
+    })
+
+    it('renders h5 element', () => {
+        const wrapper = mount(AlertTitle, {
+            slots: { default: 'Title' },
+        })
+        expect(wrapper.element.tagName).toBe('H5')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertTitle, { props: { class: 'my-title' } })
+        expect(wrapper.classes()).toContain('my-title')
+    })
+})
+
+describe('AlertDescription', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(AlertDescription, {
+            slots: { default: 'Alert description text' },
+        })
+        expect(wrapper.text()).toBe('Alert description text')
+    })
+
+    it('renders div element', () => {
+        const wrapper = mount(AlertDescription)
+        expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AlertDescription, { props: { class: 'my-desc' } })
+        expect(wrapper.classes()).toContain('my-desc')
+    })
+})
diff --git a/packages/ui/src/components/auth-card.tsx b/packages/ui/src/components/auth-card.tsx
deleted file mode 100644
index a9f1986..0000000
--- a/packages/ui/src/components/auth-card.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { Mail, Lock, Github, Chrome } from 'lucide-react';
-import { Button } from './button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
-import { Input } from './input';
-import { Label } from './label';
-
-export interface AuthCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    description?: string;
-    onLoginSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
-    onForgotPasswordClick?: () => void;
-    onGoogleClick?: () => void;
-    onGithubClick?: () => void;
-}
-
-export function AuthCard({
-    title = 'Welcome back',
-    description = 'Enter your credential tags to access your custom developer workspace console.',
-    onLoginSubmit,
-    onForgotPasswordClick,
-    onGoogleClick,
-    onGithubClick,
-    className,
-    ...props
-}: AuthCardProps) {
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (onLoginSubmit) onLoginSubmit(e);
-    };
-
-    return (
-        <div className={`w-full max-w-[420px] mx-auto ${className || ''}`} {...props}>
-            <Card className="border-3 border-brutal rounded-none shadow-brutal bg-white dark:bg-gray-800 p-2">
-                <CardHeader className="space-y-2 pb-6 border-b-3 border-brutal bg-gray-50 dark:bg-gray-900/50 p-4">
-                    <CardTitle className="text-3xl font-black tracking-tight leading-none text-brutal-fg">
-                        {title}
-                    </CardTitle>
-                    <CardDescription className="text-sm font-bold text-gray-600 dark:text-gray-400">
-                        {description}
-                    </CardDescription>
-                </CardHeader>
-
-                <CardContent className="space-y-6 pt-6">
-                    <div className="grid grid-cols-2 gap-3">
-                        <Button
-                            variant="outline"
-                            className="w-full font-black text-sm flex items-center justify-center gap-2"
-                            onClick={onGoogleClick}
-                            type="button"
-                        >
-                            <Chrome className="h-4 w-4 stroke-[3] text-red-500" />
-                            <span>Google</span>
-                        </Button>
-                        <Button
-                            variant="outline"
-                            className="w-full font-black text-sm flex items-center justify-center gap-2"
-                            onClick={onGithubClick}
-                            type="button"
-                        >
-                            <Github className="h-4 w-4 stroke-[3]" />
-                            <span>GitHub</span>
-                        </Button>
-                    </div>
-
-                    <div className="relative flex items-center justify-center">
-                        <div className="absolute inset-0 flex items-center">
-                            <span className="w-full border-t-3 border-brutal" />
-                        </div>
-                        <span className="relative z-10 px-3 bg-white dark:bg-gray-800 font-black text-xs uppercase tracking-wider text-gray-500">
-                            or email login
-                        </span>
-                    </div>
-
-                    <form onSubmit={handleSubmit} className="space-y-4">
-                        <div className="space-y-2">
-                            <Label htmlFor="auth-email" className="font-black text-sm text-brutal-fg flex items-center gap-2">
-                                <Mail className="h-4 w-4 stroke-[2.5]" />
-                                <span>Email Address</span>
-                            </Label>
-                            <Input
-                                id="auth-email"
-                                type="email"
-                                placeholder="name@domain.com"
-                                required
-                                className="w-full"
-                            />
-                        </div>
-
-                        <div className="space-y-2">
-                            <div className="flex items-center justify-between">
-                                <Label htmlFor="auth-password" className="font-black text-sm text-brutal-fg flex items-center gap-2">
-                                    <Lock className="h-4 w-4 stroke-[2.5]" />
-                                    <span>Password</span>
-                                </Label>
-                                <button
-                                    onClick={onForgotPasswordClick}
-                                    type="button"
-                                    className="text-xs font-black underline hover:text-brutal-primary focus:outline-none"
-                                >
-                                    Forgot password?
-                                </button>
-                            </div>
-                            <Input
-                                id="auth-password"
-                                type="password"
-                                placeholder="••••••••"
-                                required
-                                className="w-full"
-                            />
-                        </div>
-
-                        <Button type="submit" variant="primary" className="w-full py-6 font-black text-base mt-2">
-                            Access Account console
-                        </Button>
-                    </form>
-                </CardContent>
-
-                <CardFooter className="pt-4 border-t-3 border-brutal bg-gray-50 dark:bg-gray-900/50 p-4 justify-center">
-                    <p className="text-xs font-bold text-gray-600 dark:text-gray-400">
-                        Don't have an account?{' '}
-                        <button type="button" className="font-black underline hover:text-brutal-primary">
-                            Register workspace
-                        </button>
-                    </p>
-                </CardFooter>
-            </Card>
-        </div>
-    );
-}
diff --git a/packages/ui/src/components/auth-card/AuthCard.vue b/packages/ui/src/components/auth-card/AuthCard.vue
new file mode 100644
index 0000000..59616e4
--- /dev/null
+++ b/packages/ui/src/components/auth-card/AuthCard.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Mail, Lock } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { useId } from 'vue'
+import Button from '../button/Button.vue'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardContent from '../card/CardContent.vue'
+import CardTitle from '../card/CardTitle.vue'
+import CardDescription from '../card/CardDescription.vue'
+import CardFooter from '../card/CardFooter.vue'
+import Input from '../input/Input.vue'
+import LabelRoot from '../label/Label.vue'
+
+interface AuthCardTexts {
+    welcomeBack?: string
+    signInToContinue?: string
+    google?: string
+    github?: string
+    orEmailLogin?: string
+    email?: string
+    password?: string
+    forgotPassword?: string
+    signIn?: string
+    noAccount?: string
+    register?: string
+}
+
+interface AuthCardProps {
+    title?: string
+    description?: string
+    texts?: AuthCardTexts
+    class?: string
+}
+
+const props = withDefaults(defineProps<AuthCardProps>(), {
+    title: undefined,
+    description: undefined,
+    texts: () => ({}),
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    loginSubmit: [payload: { email: string; password: string }]
+    forgotPassword: []
+    googleClick: []
+    githubClick: []
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-md mx-auto', props.class))
+
+const emailId = useId()
+const passwordId = useId()
+
+const email = ref('')
+const password = ref('')
+
+const resolvedTitle = computed(() => props.title ?? props.texts.welcomeBack ?? t('authCard.welcomeBack'))
+const resolvedDescription = computed(() => props.description ?? props.texts.signInToContinue ?? t('authCard.signInToContinue'))
+const resolvedGoogle = computed(() => props.texts.google ?? t('authCard.google'))
+const resolvedGithub = computed(() => props.texts.github ?? t('authCard.github'))
+const resolvedOrEmailLogin = computed(() => props.texts.orEmailLogin ?? t('authCard.orEmailLogin'))
+const resolvedEmail = computed(() => props.texts.email ?? t('authCard.email'))
+const resolvedPassword = computed(() => props.texts.password ?? t('authCard.password'))
+const resolvedForgotPassword = computed(() => props.texts.forgotPassword ?? t('authCard.forgotPassword'))
+const resolvedSignIn = computed(() => props.texts.signIn ?? t('authCard.signIn'))
+const resolvedNoAccount = computed(() => props.texts.noAccount ?? t('authCard.noAccount'))
+const resolvedRegister = computed(() => props.texts.register ?? t('authCard.register'))
+
+function handleSubmit() {
+    emit('loginSubmit', { email: email.value, password: password.value })
+}
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <CardHeader>
+            <CardTitle class="text-2xl">
+{{ resolvedTitle }}
+</CardTitle>
+            <CardDescription>{{ resolvedDescription }}</CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div class="grid grid-cols-2 gap-3 mb-6">
+                <Button variant="outline" class="w-full" @click="emit('googleClick')">
+                    <svg class="mr-2 h-4 w-4" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="var(--brutal-info)" /><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="var(--brutal-success)" /><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="var(--brutal-accent)" /><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="var(--brutal-destructive)" /></svg>
+                    {{ resolvedGoogle }}
+                </Button>
+                <Button variant="outline" class="w-full" @click="emit('githubClick')">
+                    <svg class="mr-2 h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
+                    {{ resolvedGithub }}
+                </Button>
+            </div>
+
+            <div class="relative mb-6">
+                <div class="absolute inset-0 flex items-center">
+<div class="w-full border-t-3 border-brutal" />
+</div>
+                <div class="relative flex justify-center text-xs">
+<span class="bg-brutal-bg px-2 font-bold text-brutal-muted-foreground">{{ resolvedOrEmailLogin }}</span>
+</div>
+            </div>
+
+            <form class="space-y-4" @submit.prevent="handleSubmit">
+                <div class="space-y-2">
+                    <LabelRoot :for="emailId">
+{{ resolvedEmail }}
+</LabelRoot>
+                    <div class="relative">
+                        <Mail class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 stroke-[3] text-brutal-muted-foreground" />
+                        <Input :id="emailId" v-model="email" type="email" :placeholder="t('authCard.emailPlaceholder')" input-size="default" class="pl-10" />
+                    </div>
+                </div>
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between">
+                        <LabelRoot :for="passwordId">
+{{ resolvedPassword }}
+</LabelRoot>
+                        <button type="button" class="text-sm font-bold text-brutal-primary active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all" @click="emit('forgotPassword')">
+{{ resolvedForgotPassword }}
+</button>
+                    </div>
+                    <div class="relative">
+                        <Lock class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 stroke-[3] text-brutal-muted-foreground" />
+                        <Input :id="passwordId" v-model="password" type="password" :placeholder="t('authCard.passwordPlaceholder')" input-size="default" class="pl-10" />
+                    </div>
+                </div>
+                <Button type="submit" variant="primary" class="w-full">
+{{ resolvedSignIn }}
+</Button>
+            </form>
+        </CardContent>
+        <CardFooter class="justify-center">
+            <p class="text-sm font-medium text-brutal-muted-foreground">
+                {{ resolvedNoAccount }} <button type="button" class="font-bold text-brutal-primary cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all">{{ resolvedRegister }}</button>
+            </p>
+        </CardFooter>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/auth-card/auth-card.test.ts b/packages/ui/src/components/auth-card/auth-card.test.ts
new file mode 100644
index 0000000..b2ef5c4
--- /dev/null
+++ b/packages/ui/src/components/auth-card/auth-card.test.ts
@@ -0,0 +1,100 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import AuthCard from './AuthCard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('AuthCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Welcome back')
+        expect(wrapper.text()).toContain('Sign in to your account to continue')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(AuthCard, {
+            props: { title: 'Create Account' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Create Account')
+    })
+
+    it('shows custom description', () => {
+        const wrapper = mount(AuthCard, {
+            props: { description: 'Sign up for a new account' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Sign up for a new account')
+    })
+
+    it('renders email and password inputs', () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        const inputs = wrapper.findAll('input')
+        expect(inputs.length).toBe(2)
+        expect(inputs[0].attributes('type')).toBe('email')
+        expect(inputs[1].attributes('type')).toBe('password')
+    })
+
+    it('renders Google and GitHub buttons', () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Google')
+        expect(wrapper.text()).toContain('GitHub')
+    })
+
+    it('emits googleClick when Google button is clicked', async () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const googleButton = buttons.find(b => b.text().includes('Google'))
+        expect(googleButton).toBeTruthy()
+        await googleButton!.trigger('click')
+        expect(wrapper.emitted('googleClick')).toBeTruthy()
+        expect(wrapper.emitted('googleClick')!.length).toBe(1)
+    })
+
+    it('emits githubClick when GitHub button is clicked', async () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const githubButton = buttons.find(b => b.text().includes('GitHub'))
+        expect(githubButton).toBeTruthy()
+        await githubButton!.trigger('click')
+        expect(wrapper.emitted('githubClick')).toBeTruthy()
+        expect(wrapper.emitted('githubClick')!.length).toBe(1)
+    })
+
+    it('emits forgotPassword when forgot password button is clicked', async () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const forgotButton = buttons.find(b => b.text().includes('Forgot password?'))
+        expect(forgotButton).toBeTruthy()
+        await forgotButton!.trigger('click')
+        expect(wrapper.emitted('forgotPassword')).toBeTruthy()
+        expect(wrapper.emitted('forgotPassword')!.length).toBe(1)
+    })
+
+    it('emits loginSubmit when form is submitted', async () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        const form = wrapper.find('form')
+        await form.trigger('submit')
+        expect(wrapper.emitted('loginSubmit')).toBeTruthy()
+        expect(wrapper.emitted('loginSubmit')!.length).toBe(1)
+    })
+
+    it('renders Sign In submit button', () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Sign In')
+    })
+
+    it('renders Register link', () => {
+        const wrapper = mount(AuthCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Register')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(AuthCard, {
+            props: { class: 'my-auth' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-auth"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
deleted file mode 100644
index 5fdb8c1..0000000
--- a/packages/ui/src/components/avatar.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const avatarVariants = cva(
-    [
-        'relative flex shrink-0 overflow-hidden',
-        'border-3 border-black dark:border-white',
-    ],
-    {
-        variants: {
-            size: {
-                sm: 'h-8 w-8',
-                default: 'h-10 w-10',
-                lg: 'h-14 w-14',
-                xl: 'h-20 w-20',
-            },
-            shape: {
-                square: '',
-                rounded: 'rounded-lg',
-            },
-        },
-        defaultVariants: {
-            size: 'default',
-            shape: 'square',
-        },
-    }
-);
-
-export interface AvatarProps
-    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-        VariantProps<typeof avatarVariants> {}
-
-const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
-    ({ className, size, shape, ...props }, ref) => (
-        <AvatarPrimitive.Root
-            ref={ref}
-            className={cn(avatarVariants({ size, shape }), className)}
-            {...props}
-        />
-    )
-);
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Image>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Image
-        ref={ref}
-        className={cn('aspect-square h-full w-full object-cover', className)}
-        {...props}
-    />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-    React.ElementRef<typeof AvatarPrimitive.Fallback>,
-    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-    <AvatarPrimitive.Fallback
-        ref={ref}
-        className={cn(
-            'flex h-full w-full items-center justify-center',
-            'bg-gray-200 dark:bg-gray-700',
-            'font-bold text-black dark:text-white',
-            className
-        )}
-        {...props}
-    />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
diff --git a/packages/ui/src/components/avatar/Avatar.vue b/packages/ui/src/components/avatar/Avatar.vue
new file mode 100644
index 0000000..100d8e8
--- /dev/null
+++ b/packages/ui/src/components/avatar/Avatar.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AvatarRoot } from 'reka-ui'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { avatarVariants } from './avatar-variants'
+
+type AvatarVariantProps = VariantProps<typeof avatarVariants>
+
+interface AvatarProps {
+    size?: NonNullable<AvatarVariantProps['size']>
+    shape?: NonNullable<AvatarVariantProps['shape']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+    size: 'default',
+    shape: 'square',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(avatarVariants({ size: props.size, shape: props.shape }), props.class)
+)
+</script>
+
+<template>
+    <AvatarRoot :class="classes">
+        <slot />
+    </AvatarRoot>
+</template>
diff --git a/packages/ui/src/components/avatar/AvatarFallback.vue b/packages/ui/src/components/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..5cc5349
--- /dev/null
+++ b/packages/ui/src/components/avatar/AvatarFallback.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AvatarFallback as AvatarFallbackPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface AvatarFallbackProps {
+    class?: string
+}
+
+const props = defineProps<AvatarFallbackProps>()
+
+const classes = computed(() =>
+    cn('flex h-full w-full items-center justify-center bg-brutal-primary text-brutal-fg font-bold', props.class)
+)
+</script>
+
+<template>
+    <AvatarFallbackPrimitive :class="classes">
+        <slot />
+    </AvatarFallbackPrimitive>
+</template>
diff --git a/packages/ui/src/components/avatar/AvatarImage.vue b/packages/ui/src/components/avatar/AvatarImage.vue
new file mode 100644
index 0000000..1ac0c1b
--- /dev/null
+++ b/packages/ui/src/components/avatar/AvatarImage.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AvatarImage as AvatarImagePrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface AvatarImageProps {
+    src?: string
+    alt?: string
+    class?: string
+}
+
+const props = defineProps<AvatarImageProps>()
+
+const classes = computed(() =>
+    cn('aspect-square h-full w-full object-cover', props.class)
+)
+</script>
+
+<template>
+    <AvatarImagePrimitive v-if="src" :src="src" :alt="alt" :class="classes" />
+</template>
diff --git a/packages/ui/src/components/avatar/avatar-variants.ts b/packages/ui/src/components/avatar/avatar-variants.ts
new file mode 100644
index 0000000..58e2fdc
--- /dev/null
+++ b/packages/ui/src/components/avatar/avatar-variants.ts
@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority'
+
+export const avatarVariants = cva(
+    ['relative flex shrink-0 overflow-hidden', 'border-3 border-brutal', 'bg-brutal-muted'],
+    {
+        variants: {
+            size: {
+                sm: 'h-8 w-8',
+                default: 'h-10 w-10',
+                lg: 'h-14 w-14',
+                xl: 'h-20 w-20',
+            },
+            shape: {
+                square: '',
+                rounded: 'rounded-brutal',
+            },
+        },
+        defaultVariants: {
+            size: 'default',
+            shape: 'square',
+        },
+    }
+)
diff --git a/packages/ui/src/components/avatar/avatar.test.ts b/packages/ui/src/components/avatar/avatar.test.ts
new file mode 100644
index 0000000..8243b4d
--- /dev/null
+++ b/packages/ui/src/components/avatar/avatar.test.ts
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import Avatar from './Avatar.vue'
+import AvatarImage from './AvatarImage.vue'
+import AvatarFallback from './AvatarFallback.vue'
+
+const AvatarWithImage = defineComponent({
+    components: { Avatar, AvatarImage },
+    props: { src: { type: String, default: '' }, alt: { type: String, default: '' }, imageClass: { type: String, default: '' } },
+    template: `
+        <Avatar>
+            <AvatarImage :src="src" :alt="alt" :class="imageClass" />
+        </Avatar>
+    `,
+})
+
+const AvatarWithFallback = defineComponent({
+    components: { Avatar, AvatarFallback },
+    props: { fallbackClass: { type: String, default: '' } },
+    template: `
+        <Avatar>
+            <AvatarFallback :class="fallbackClass">JD</AvatarFallback>
+        </Avatar>
+    `,
+})
+
+describe('Avatar', () => {
+    it('renders with default size and shape', () => {
+        const wrapper = mount(Avatar)
+        expect(wrapper.classes()).toContain('h-10')
+        expect(wrapper.classes()).toContain('w-10')
+    })
+
+    it('applies size classes', () => {
+        const sizes = ['sm', 'default', 'lg', 'xl'] as const
+        const expected = ['h-8 w-8', 'h-10 w-10', 'h-14 w-14', 'h-20 w-20']
+
+        sizes.forEach((size, i) => {
+            const wrapper = mount(Avatar, { props: { size } })
+            const classes = wrapper.classes()
+            expected[i].split(' ').forEach((cls) => {
+                expect(classes).toContain(cls)
+            })
+        })
+    })
+
+    it('applies shape classes', () => {
+        const squareWrapper = mount(Avatar, { props: { shape: 'square' } })
+        expect(squareWrapper.classes()).not.toContain('rounded-brutal')
+
+        const roundedWrapper = mount(Avatar, { props: { shape: 'rounded' } })
+        expect(roundedWrapper.classes()).toContain('rounded-brutal')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Avatar, {
+            slots: { default: '<span>AB</span>' },
+        })
+        expect(wrapper.text()).toBe('AB')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Avatar, { props: { class: 'my-avatar' } })
+        expect(wrapper.classes()).toContain('my-avatar')
+    })
+})
+
+describe('AvatarImage', () => {
+    it('renders within Avatar context with src and alt props', () => {
+        const wrapper = mount(AvatarWithImage, {
+            props: { src: '/photo.jpg', alt: 'User photo' },
+        })
+        const img = wrapper.find('img')
+        expect(img.exists()).toBe(true)
+        expect(img.attributes('src')).toBe('/photo.jpg')
+        expect(img.attributes('alt')).toBe('User photo')
+    })
+
+    it('applies custom class within Avatar context', () => {
+        const wrapper = mount(AvatarWithImage, {
+            props: { src: '/photo.jpg', imageClass: 'my-image' },
+        })
+        const img = wrapper.find('img')
+        expect(img.classes()).toContain('my-image')
+    })
+})
+
+describe('AvatarFallback', () => {
+    it('renders slot content within Avatar context', () => {
+        const wrapper = mount(AvatarWithFallback)
+        expect(wrapper.text()).toBe('JD')
+    })
+
+    it('applies custom class within Avatar context', () => {
+        const wrapper = mount(AvatarWithFallback, {
+            props: { fallbackClass: 'my-fallback' },
+        })
+        const fallback = wrapper.find('.font-bold')
+        expect(fallback.classes()).toContain('my-fallback')
+    })
+})
diff --git a/packages/ui/src/components/badge.tsx b/packages/ui/src/components/badge.tsx
deleted file mode 100644
index c5b21fe..0000000
--- a/packages/ui/src/components/badge.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const badgeVariants = cva(
-    [
-        'inline-flex items-center',
-        'border-2 border-brutal rounded-brutal',
-        'font-bold tracking-wide',
-        'transition-colors',
-    ],
-    {
-        variants: {
-            variant: {
-                default: [
-                    'bg-brutal-bg text-brutal-fg',
-                    'shadow-brutal-sm',
-                ],
-                primary: [
-                    'bg-brutal-primary text-brutal-fg',
-                    'shadow-brutal-sm',
-                ],
-                secondary: [
-                    'bg-brutal-secondary text-brutal-fg',
-                    'shadow-brutal-sm',
-                ],
-                accent: [
-                    'bg-brutal-accent text-brutal-fg',
-                    'shadow-brutal-sm',
-                ],
-                danger: [
-                    'bg-brutal-destructive text-brutal-fg',
-                    'shadow-brutal-sm',
-                ],
-                success: [
-                    'bg-brutal-success text-brutal-fg',
-                    'shadow-brutal-sm',
-                ],
-                outline: 'bg-transparent text-brutal-fg',
-            },
-            size: {
-                sm: 'px-2 py-0.5 text-xs',
-                default: 'px-3 py-1 text-sm',
-                lg: 'px-4 py-1.5 text-base',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-export interface BadgeProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof badgeVariants> {}
-
-const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-    ({ className, variant, size, ...props }, ref) => (
-        <div ref={ref} className={cn(badgeVariants({ variant, size, className }))} {...props} />
-    )
-);
-Badge.displayName = 'Badge';
-
-export { Badge, badgeVariants };
diff --git a/packages/ui/src/components/badge/Badge.vue b/packages/ui/src/components/badge/Badge.vue
new file mode 100644
index 0000000..423517a
--- /dev/null
+++ b/packages/ui/src/components/badge/Badge.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { badgeVariants } from './badge-variants'
+
+type BadgeVariantProps = VariantProps<typeof badgeVariants>
+
+interface BadgeProps {
+    variant?: NonNullable<BadgeVariantProps['variant']>
+    size?: NonNullable<BadgeVariantProps['size']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+    variant: 'default',
+    size: 'default',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(badgeVariants({ variant: props.variant, size: props.size }), props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/badge/badge-variants.ts b/packages/ui/src/components/badge/badge-variants.ts
new file mode 100644
index 0000000..8be89cc
--- /dev/null
+++ b/packages/ui/src/components/badge/badge-variants.ts
@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority'
+
+export const badgeVariants = cva(
+    [
+        'inline-flex items-center',
+        'border-3 border-brutal',
+        'font-bold tracking-wide',
+        'transition-colors',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'bg-brutal-bg text-brutal-fg shadow-brutal-sm',
+                primary: 'bg-brutal-primary text-brutal-fg shadow-brutal-sm',
+                secondary: 'bg-brutal-secondary text-brutal-fg shadow-brutal-sm',
+                accent: 'bg-brutal-accent text-brutal-fg shadow-brutal-sm',
+                danger: 'bg-brutal-destructive text-brutal-fg shadow-brutal-sm',
+                success: 'bg-brutal-success text-brutal-fg shadow-brutal-sm',
+                outline: 'bg-transparent text-brutal-fg',
+            },
+            size: {
+                sm: 'px-2 py-0.5 text-xs',
+                default: 'px-3 py-1 text-sm',
+                lg: 'px-4 py-1.5 text-base',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/badge/badge.test.ts b/packages/ui/src/components/badge/badge.test.ts
new file mode 100644
index 0000000..257af91
--- /dev/null
+++ b/packages/ui/src/components/badge/badge.test.ts
@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils'
+import Badge from './Badge.vue'
+
+describe('Badge', () => {
+    it('renders with default variant and size', () => {
+        const wrapper = mount(Badge)
+        const classes = wrapper.classes()
+        expect(classes).toContain('inline-flex')
+        expect(classes).toContain('items-center')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('font-bold')
+        expect(classes).toContain('tracking-wide')
+        expect(classes).toContain('transition-colors')
+        expect(classes).toContain('bg-brutal-bg')
+        expect(classes).toContain('text-brutal-fg')
+        expect(classes).toContain('shadow-brutal-sm')
+        expect(classes).toContain('px-3')
+        expect(classes).toContain('py-1')
+        expect(classes).toContain('text-sm')
+    })
+
+    describe('variant classes', () => {
+        it('applies primary variant classes', () => {
+            const wrapper = mount(Badge, { props: { variant: 'primary' } })
+            expect(wrapper.classes()).toContain('bg-brutal-primary')
+        })
+
+        it('applies secondary variant classes', () => {
+            const wrapper = mount(Badge, { props: { variant: 'secondary' } })
+            expect(wrapper.classes()).toContain('bg-brutal-secondary')
+        })
+
+        it('applies accent variant classes', () => {
+            const wrapper = mount(Badge, { props: { variant: 'accent' } })
+            expect(wrapper.classes()).toContain('bg-brutal-accent')
+        })
+
+        it('applies danger variant classes', () => {
+            const wrapper = mount(Badge, { props: { variant: 'danger' } })
+            expect(wrapper.classes()).toContain('bg-brutal-destructive')
+        })
+
+        it('applies success variant classes', () => {
+            const wrapper = mount(Badge, { props: { variant: 'success' } })
+            expect(wrapper.classes()).toContain('bg-brutal-success')
+        })
+
+        it('applies outline variant classes', () => {
+            const wrapper = mount(Badge, { props: { variant: 'outline' } })
+            const classes = wrapper.classes()
+            expect(classes).toContain('bg-transparent')
+            expect(classes).toContain('text-brutal-fg')
+        })
+    })
+
+    describe('size classes', () => {
+        it('applies sm size classes', () => {
+            const wrapper = mount(Badge, { props: { size: 'sm' } })
+            const classes = wrapper.classes()
+            expect(classes).toContain('px-2')
+            expect(classes).toContain('py-0.5')
+            expect(classes).toContain('text-xs')
+        })
+
+        it('applies default size classes', () => {
+            const wrapper = mount(Badge, { props: { size: 'default' } })
+            const classes = wrapper.classes()
+            expect(classes).toContain('px-3')
+            expect(classes).toContain('py-1')
+            expect(classes).toContain('text-sm')
+        })
+
+        it('applies lg size classes', () => {
+            const wrapper = mount(Badge, { props: { size: 'lg' } })
+            const classes = wrapper.classes()
+            expect(classes).toContain('px-4')
+            expect(classes).toContain('py-1.5')
+            expect(classes).toContain('text-base')
+        })
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Badge, {
+            slots: { default: 'Hello Badge' },
+        })
+        expect(wrapper.text()).toBe('Hello Badge')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(Badge, {
+            props: { class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/before-after/BeforeAfter.vue b/packages/ui/src/components/before-after/BeforeAfter.vue
new file mode 100644
index 0000000..ac80e8b
--- /dev/null
+++ b/packages/ui/src/components/before-after/BeforeAfter.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { MoveHorizontal } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { beforeAfterRootVariants, beforeAfterHandleVariants } from './before-after-variants'
+
+const DEFAULT_SLIDER_POSITION = 50
+
+interface BeforeAfterProps {
+    before: string
+    after: string
+    beforeAlt?: string
+    afterAlt?: string
+    defaultValue?: number
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<BeforeAfterProps>(), {
+    beforeAlt: undefined,
+    afterAlt: undefined,
+    defaultValue: DEFAULT_SLIDER_POSITION,
+    disabled: false,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedBeforeAlt = computed(() => props.beforeAlt ?? t('beforeAfter.before'))
+const resolvedAfterAlt = computed(() => props.afterAlt ?? t('beforeAfter.after'))
+
+const sliderVal = ref(props.defaultValue)
+
+watch(() => props.defaultValue, (val) => {
+    if (val !== undefined) sliderVal.value = val
+})
+
+const clipStyle = computed(() => {
+    return {
+        clipPath: `inset(0 0 0 ${sliderVal.value}%)`,
+    }
+})
+
+const sliderStyle = computed(() => {
+    return {
+        left: `${sliderVal.value}%`,
+    }
+})
+
+const rootClasses = computed(() =>
+    cn(beforeAfterRootVariants(), props.class)
+)
+
+const handleClasses = computed(() =>
+    cn(beforeAfterHandleVariants())
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <img
+            :src="before"
+            :alt="resolvedBeforeAlt"
+            class="absolute inset-0 w-full h-full object-cover pointer-events-none"
+        />
+
+        <div
+            class="absolute inset-0 w-full h-full pointer-events-none"
+            :style="clipStyle"
+        >
+            <img
+                :src="after"
+                :alt="resolvedAfterAlt"
+                class="absolute inset-0 w-full h-full object-cover pointer-events-none"
+            />
+        </div>
+
+        <div
+            class="absolute top-0 bottom-0 w-[4px] bg-brutal-fg -translate-x-1/2 pointer-events-none z-10"
+            :style="sliderStyle"
+        />
+
+        <div
+            :class="handleClasses"
+            :style="sliderStyle"
+        >
+            <MoveHorizontal class="h-4 w-4 stroke-[3] text-brutal-fg" />
+        </div>
+
+        <input
+            type="range"
+            min="0"
+            max="100"
+            v-model="sliderVal"
+            :disabled="disabled"
+            class="absolute inset-0 w-full h-full opacity-0 cursor-ew-resize z-30 disabled:cursor-not-allowed"
+        />
+    </div>
+</template>
diff --git a/packages/ui/src/components/before-after/before-after-variants.ts b/packages/ui/src/components/before-after/before-after-variants.ts
new file mode 100644
index 0000000..b0bd089
--- /dev/null
+++ b/packages/ui/src/components/before-after/before-after-variants.ts
@@ -0,0 +1,9 @@
+import { cva } from 'class-variance-authority'
+
+export const beforeAfterRootVariants = cva(
+    'relative overflow-hidden w-full aspect-video border-3 border-brutal bg-brutal-bg rounded-brutal shadow-brutal select-none'
+)
+
+export const beforeAfterHandleVariants = cva(
+    'absolute top-1/2 -translate-y-1/2 -translate-x-1/2 h-10 w-10 border-3 border-brutal bg-brutal-primary rounded-brutal shadow-brutal-sm flex items-center justify-center pointer-events-none z-20 select-none'
+)
diff --git a/packages/ui/src/components/before-after/before-after.test.ts b/packages/ui/src/components/before-after/before-after.test.ts
new file mode 100644
index 0000000..6acbe82
--- /dev/null
+++ b/packages/ui/src/components/before-after/before-after.test.ts
@@ -0,0 +1,143 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import BeforeAfter from './BeforeAfter.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('BeforeAfter', () => {
+    it('renders before and after images', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+            },
+            ...localeProvide,
+        })
+        const imgs = wrapper.findAll('img')
+        expect(imgs).toHaveLength(2)
+        expect(imgs[0].attributes('src')).toBe('/before.jpg')
+        expect(imgs[1].attributes('src')).toBe('/after.jpg')
+    })
+
+    it('applies default root classes', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+            },
+            ...localeProvide,
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('relative')
+        expect(classes).toContain('overflow-hidden')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('shadow-brutal')
+        expect(classes).toContain('rounded-brutal')
+    })
+
+    it('renders range input', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+            },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input[type="range"]')
+        expect(input.exists()).toBe(true)
+        expect(input.attributes('min')).toBe('0')
+        expect(input.attributes('max')).toBe('100')
+    })
+
+    it('images have correct default alt text', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+            },
+            ...localeProvide,
+        })
+        const imgs = wrapper.findAll('img')
+        expect(imgs[0].attributes('alt')).toBe('Before')
+        expect(imgs[1].attributes('alt')).toBe('After')
+    })
+
+    it('images use custom alt text when provided', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+                beforeAlt: 'Original',
+                afterAlt: 'Modified',
+            },
+            ...localeProvide,
+        })
+        const imgs = wrapper.findAll('img')
+        expect(imgs[0].attributes('alt')).toBe('Original')
+        expect(imgs[1].attributes('alt')).toBe('Modified')
+    })
+
+    it('range input uses default value of 50', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+            },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input[type="range"]')
+        expect((input.element as HTMLInputElement).value).toBe('50')
+    })
+
+    it('range input uses custom defaultValue', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+                defaultValue: 75,
+            },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input[type="range"]')
+        expect((input.element as HTMLInputElement).value).toBe('75')
+    })
+
+    it('disables range input when disabled prop is true', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+                disabled: true,
+            },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input[type="range"]')
+        expect((input.element as HTMLInputElement).disabled).toBe(true)
+    })
+
+    it('renders handle with MoveHorizontal icon', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+            },
+            ...localeProvide,
+        })
+        const handle = wrapper.find('.absolute.top-1\\/2')
+        expect(handle.exists()).toBe(true)
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(BeforeAfter, {
+            props: {
+                before: '/before.jpg',
+                after: '/after.jpg',
+                class: 'custom-class',
+            },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/blog-card/BlogCard.vue b/packages/ui/src/components/blog-card/BlogCard.vue
new file mode 100644
index 0000000..52133fd
--- /dev/null
+++ b/packages/ui/src/components/blog-card/BlogCard.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import CardHeader from '../card/CardHeader.vue'
+import Badge from '../badge/Badge.vue'
+import Avatar from '../avatar/Avatar.vue'
+import AvatarFallback from '../avatar/AvatarFallback.vue'
+
+interface BlogCardProps {
+    title?: string
+    excerpt?: string
+    author?: string
+    date?: string
+    category?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<BlogCardProps>(), {
+    title: undefined,
+    excerpt: undefined,
+    author: '',
+    date: '',
+    category: '',
+    class: '',
+})
+
+const emit = defineEmits<{
+    'read-more': []
+}>()
+
+const { t } = useLocale()
+
+const rootClasses = computed(() => cn('w-full max-w-lg', props.class))
+
+const resolvedTitle = computed(() => props.title ?? t('blogCard.defaultTitle'))
+const resolvedExcerpt = computed(() => props.excerpt ?? t('blogCard.defaultExcerpt'))
+const resolvedReadMore = computed(() => t('blogCard.readMore'))
+
+const initials = computed(() => {
+    if (!props.author) return ''
+    return props.author
+        .split(' ')
+        .map(w => w[0])
+        .join('')
+        .slice(0, 2)
+        .toUpperCase()
+})
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <CardHeader>
+            <Badge v-if="category" variant="primary" size="sm" class="w-fit mb-2">
+                {{ category }}
+            </Badge>
+            <h3 class="text-lg font-black tracking-tight leading-snug">
+{{ resolvedTitle }}
+</h3>
+        </CardHeader>
+        <CardContent>
+            <p class="text-sm text-brutal-muted-foreground font-medium leading-relaxed">
+{{ resolvedExcerpt }}
+</p>
+            <div class="mt-4 flex items-center justify-between">
+                <div v-if="author" class="flex items-center gap-2">
+                    <Avatar size="sm" shape="square">
+                        <AvatarFallback>{{ initials }}</AvatarFallback>
+                    </Avatar>
+                    <span class="text-sm font-bold">{{ author }}</span>
+                </div>
+                <span v-if="date" class="text-xs text-brutal-muted-foreground font-medium">{{ date }}</span>
+            </div>
+            <button class="mt-3 text-sm font-bold text-brutal-primary cursor-pointer hover:underline active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all" @click="emit('read-more')">
+                {{ resolvedReadMore }}
+            </button>
+            <slot name="actions" />
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/blog-card/blog-card.test.ts b/packages/ui/src/components/blog-card/blog-card.test.ts
new file mode 100644
index 0000000..35bde0d
--- /dev/null
+++ b/packages/ui/src/components/blog-card/blog-card.test.ts
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import BlogCard from './BlogCard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('BlogCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(BlogCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Getting Started with BrutxUI')
+        expect(wrapper.text()).toContain('Learn how to build bold interfaces with our component library.')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(BlogCard, {
+            props: { title: 'Custom Blog Title' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Blog Title')
+    })
+
+    it('shows custom excerpt', () => {
+        const wrapper = mount(BlogCard, {
+            props: { excerpt: 'A short preview of the article.' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('A short preview of the article.')
+    })
+
+    it('shows category badge when provided', () => {
+        const wrapper = mount(BlogCard, {
+            props: { category: 'Vue 3' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Vue 3')
+    })
+
+    it('does not show category badge when not provided', () => {
+        const wrapper = mount(BlogCard, { ...localeProvide })
+        expect(wrapper.text()).not.toContain('Vue 3')
+    })
+
+    it('shows author and date when provided', () => {
+        const wrapper = mount(BlogCard, {
+            props: { author: 'Jane Doe', date: '2024-01-15' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Jane Doe')
+        expect(wrapper.text()).toContain('2024-01-15')
+    })
+
+    it('renders Read More link', () => {
+        const wrapper = mount(BlogCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Read more')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BlogCard, {
+            props: { class: 'my-blog' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-blog"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/blog-list-page/BlogListPage.vue b/packages/ui/src/components/blog-list-page/BlogListPage.vue
new file mode 100644
index 0000000..a3d3abf
--- /dev/null
+++ b/packages/ui/src/components/blog-list-page/BlogListPage.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { Search } from 'lucide-vue-next'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardTitle from '../card/CardTitle.vue'
+import Pagination from '../pagination/Pagination.vue'
+import Badge from '../badge/Badge.vue'
+import Input from '../input/Input.vue'
+import Button from '../button/Button.vue'
+
+export interface BlogPost {
+    title: string
+    excerpt: string
+    author: string
+    date: string
+    category: string
+    slug: string
+}
+
+interface BlogListPageProps {
+    title?: string
+    posts?: BlogPost[]
+    categories?: string[]
+    pageSize?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<BlogListPageProps>(), {
+    title: undefined,
+    posts: () => [],
+    categories: () => [],
+    pageSize: 6,
+    class: '',
+})
+
+const emit = defineEmits<{
+    'post-click': [slug: string]
+    'category-filter': [category: string]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('blogListPage.defaultTitle'))
+const resolvedSearchPlaceholder = computed(() => t('blogListPage.searchPlaceholder'))
+const resolvedAllCategories = computed(() => t('blogListPage.allCategories'))
+const resolvedNoPostsFound = computed(() => t('blogListPage.noPostsFound'))
+
+const searchQuery = ref('')
+const activeCategory = ref('')
+
+watch(searchQuery, () => {
+    currentPage.value = 1
+})
+
+const filteredPosts = computed(() => {
+    let result = props.posts
+    if (activeCategory.value) {
+        result = result.filter(post => post.category === activeCategory.value)
+    }
+    if (searchQuery.value) {
+        const query = searchQuery.value.toLowerCase()
+        result = result.filter(post =>
+            post.title.toLowerCase().includes(query) ||
+            post.excerpt.toLowerCase().includes(query) ||
+            post.author.toLowerCase().includes(query)
+        )
+    }
+    return result
+})
+
+const currentPage = ref(1)
+const totalPages = computed(() => Math.max(1, Math.ceil(filteredPosts.value.length / props.pageSize)))
+
+const paginatedPosts = computed(() => {
+    const start = (currentPage.value - 1) * props.pageSize
+    return filteredPosts.value.slice(start, start + props.pageSize)
+})
+
+function handleCategoryFilter(category: string) {
+    activeCategory.value = category
+    currentPage.value = 1
+    emit('category-filter', category)
+}
+
+function handlePostClick(slug: string) {
+    emit('post-click', slug)
+}
+
+function handlePageChange(page: number) {
+    currentPage.value = page
+}
+
+const rootClasses = computed(() =>
+    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="w-full max-w-4xl mx-auto">
+            <slot name="header">
+                <div class="mb-8">
+                    <h1 class="text-3xl font-black tracking-tight">
+                        {{ resolvedTitle }}
+                    </h1>
+                </div>
+            </slot>
+
+            <slot>
+                <div class="mb-6 flex flex-col sm:flex-row gap-4">
+                    <div class="relative flex-1">
+                        <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 stroke-[3] text-brutal-fg" />
+                        <Input
+                            v-model="searchQuery"
+                            :placeholder="resolvedSearchPlaceholder"
+                            class="pl-10"
+                        />
+                    </div>
+                    <div class="flex flex-wrap gap-2">
+                        <Button
+                            :variant="activeCategory === '' ? 'primary' : 'outline'"
+                            size="sm"
+                            @click="handleCategoryFilter('')"
+                        >
+                            {{ resolvedAllCategories }}
+                        </Button>
+                        <Badge
+                            v-for="category in categories"
+                            :key="category"
+                            :variant="activeCategory === category ? 'primary' : 'default'"
+                            size="sm"
+                            class="cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all"
+                            @click="handleCategoryFilter(category)"
+                        >
+                            {{ category }}
+                        </Badge>
+                    </div>
+                </div>
+
+                <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                    <Card
+                        v-for="post in paginatedPosts"
+                        :key="post.slug"
+                        variant="elevated"
+                        class="cursor-pointer hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all"
+                        @click="handlePostClick(post.slug)"
+                    >
+                        <CardHeader>
+                            <div class="flex items-center justify-between">
+                                <Badge variant="accent" size="sm">{{ post.category }}</Badge>
+                                <span class="text-xs font-bold text-brutal-fg">{{ post.date }}</span>
+                            </div>
+                            <CardTitle class="text-lg">{{ post.title }}</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <p class="text-sm font-medium text-brutal-fg line-clamp-3">{{ post.excerpt }}</p>
+                            <div class="mt-3 text-xs font-bold text-brutal-fg">
+                                {{ post.author }}
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
+                <div v-if="filteredPosts.length === 0" class="text-center py-12">
+                    <p class="text-lg font-bold text-brutal-fg">{{ resolvedNoPostsFound }}</p>
+                </div>
+
+                <div v-if="totalPages > 1" class="mt-8 flex justify-center">
+                    <Pagination
+                        :current-page="currentPage"
+                        :total-pages="totalPages"
+                        @update:current-page="handlePageChange"
+                    />
+                </div>
+            </slot>
+
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/blog-list-page/blog-list-page.test.ts b/packages/ui/src/components/blog-list-page/blog-list-page.test.ts
new file mode 100644
index 0000000..d5f4770
--- /dev/null
+++ b/packages/ui/src/components/blog-list-page/blog-list-page.test.ts
@@ -0,0 +1,159 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import BlogListPage from './BlogListPage.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockPosts = [
+    { title: 'Getting Started', excerpt: 'Learn the basics', author: 'Alice', date: '2026-01-01', category: 'Tutorial', slug: 'getting-started' },
+    { title: 'Advanced Tips', excerpt: 'Go deeper', author: 'Bob', date: '2026-01-02', category: 'Guide', slug: 'advanced-tips' },
+    { title: 'Release Notes', excerpt: 'What is new', author: 'Charlie', date: '2026-01-03', category: 'News', slug: 'release-notes' },
+]
+
+const mockCategories = ['Tutorial', 'Guide', 'News']
+
+describe('BlogListPage', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(BlogListPage, { ...localeProvide })
+        expect(wrapper.find('h1').exists()).toBe(true)
+    })
+
+    it('renders default title from i18n', () => {
+        const wrapper = mount(BlogListPage, { ...localeProvide })
+        expect(wrapper.find('h1').text()).toBe('Blog')
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(BlogListPage, {
+            props: { title: 'My Blog' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h1').text()).toBe('My Blog')
+    })
+
+    it('renders blog post cards', () => {
+        const wrapper = mount(BlogListPage, {
+            props: { posts: mockPosts },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Getting Started')
+        expect(wrapper.text()).toContain('Advanced Tips')
+        expect(wrapper.text()).toContain('Release Notes')
+    })
+
+    it('renders category badges', () => {
+        const wrapper = mount(BlogListPage, {
+            props: { posts: mockPosts, categories: mockCategories },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Tutorial')
+        expect(wrapper.text()).toContain('Guide')
+        expect(wrapper.text()).toContain('News')
+    })
+
+    it('renders search input', () => {
+        const wrapper = mount(BlogListPage, { ...localeProvide })
+        expect(wrapper.find('input').exists()).toBe(true)
+    })
+
+    it('renders "All" category button', () => {
+        const wrapper = mount(BlogListPage, {
+            props: { categories: mockCategories },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('All')
+    })
+
+    it('emits post-click when a card is clicked', async () => {
+        const wrapper = mount(BlogListPage, {
+            props: { posts: mockPosts },
+            ...localeProvide,
+        })
+        const cards = wrapper.findAllComponents({ name: 'Card' })
+        await cards[0].trigger('click')
+        expect(wrapper.emitted('post-click')).toBeTruthy()
+        expect(wrapper.emitted('post-click')![0]).toEqual(['getting-started'])
+    })
+
+    it('emits category-filter when a category badge is clicked', async () => {
+        const wrapper = mount(BlogListPage, {
+            props: { posts: mockPosts, categories: mockCategories },
+            ...localeProvide,
+        })
+        const badges = wrapper.findAllComponents({ name: 'Badge' })
+        const categoryBadge = badges.find(b => b.text() === 'Tutorial')
+        await categoryBadge!.trigger('click')
+        expect(wrapper.emitted('category-filter')).toBeTruthy()
+        expect(wrapper.emitted('category-filter')![0]).toEqual(['Tutorial'])
+    })
+
+    it('filters posts by search query', async () => {
+        const wrapper = mount(BlogListPage, {
+            props: { posts: mockPosts },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input')
+        await input.setValue('Advanced')
+        expect(wrapper.text()).toContain('Advanced Tips')
+        expect(wrapper.text()).not.toContain('Getting Started')
+    })
+
+    it('shows empty state when no posts match', async () => {
+        const wrapper = mount(BlogListPage, {
+            props: { posts: mockPosts },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input')
+        await input.setValue('nonexistent')
+        expect(wrapper.text()).toContain('No posts found')
+    })
+
+    it('renders pagination when posts exceed page size', () => {
+        const manyPosts = Array.from({ length: 10 }, (_, i) => ({
+            title: `Post ${i + 1}`,
+            excerpt: `Excerpt ${i + 1}`,
+            author: 'Author',
+            date: '2026-01-01',
+            category: 'Blog',
+            slug: `post-${i + 1}`,
+        }))
+        const wrapper = mount(BlogListPage, {
+            props: { posts: manyPosts, pageSize: 6 },
+            ...localeProvide,
+        })
+        expect(wrapper.find('nav').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BlogListPage, {
+            props: { class: 'my-blog' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-blog')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(BlogListPage, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(BlogListPage, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(BlogListPage, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/breadcrumb/Breadcrumb.vue b/packages/ui/src/components/breadcrumb/Breadcrumb.vue
new file mode 100644
index 0000000..db1b4da
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useLocale } from '@/composables/useLocale'
+
+interface BreadcrumbProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbProps>(), {
+    class: '',
+})
+
+const { t } = useLocale()
+</script>
+
+<template>
+    <nav :aria-label="t('breadcrumb.label')" :class="props.class">
+        <slot />
+    </nav>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 0000000..d8b598d
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { breadcrumbEllipsisVariants } from './breadcrumb-variants'
+import { useLocale } from '@/composables/useLocale'
+
+interface BreadcrumbEllipsisProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbEllipsisProps>(), {
+    class: '',
+})
+
+const { t } = useLocale()
+
+const classes = computed(() =>
+    cn(breadcrumbEllipsisVariants(), props.class)
+)
+</script>
+
+<template>
+    <span
+        role="presentation"
+        aria-hidden="true"
+        :class="classes"
+    >
+        <slot>
+            <MoreHorizontal class="h-4 w-4 stroke-[3]" />
+        </slot>
+        <span class="sr-only">{{ t('breadcrumb.more') }}</span>
+    </span>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 0000000..02ab70d
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { breadcrumbItemVariants } from './breadcrumb-variants'
+
+interface BreadcrumbItemProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbItemProps>(), {
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(breadcrumbItemVariants(), props.class)
+)
+</script>
+
+<template>
+    <li :class="classes">
+        <slot />
+    </li>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 0000000..cdbb226
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { breadcrumbLinkVariants } from './breadcrumb-variants'
+
+interface BreadcrumbLinkProps extends PrimitiveProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbLinkProps>(), {
+    as: 'a',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(breadcrumbLinkVariants(), props.class)
+)
+</script>
+
+<template>
+    <Primitive
+        :as="props.as"
+        :as-child="props.asChild"
+        :class="classes"
+    >
+        <slot />
+    </Primitive>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbList.vue b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 0000000..fbda8b9
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { breadcrumbListVariants } from './breadcrumb-variants'
+
+interface BreadcrumbListProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbListProps>(), {
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(breadcrumbListVariants(), props.class)
+)
+</script>
+
+<template>
+    <ol :class="classes">
+        <slot />
+    </ol>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 0000000..4207ae2
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { breadcrumbPageVariants } from './breadcrumb-variants'
+
+interface BreadcrumbPageProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbPageProps>(), {
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(breadcrumbPageVariants(), props.class)
+)
+</script>
+
+<template>
+    <span
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        :class="classes"
+    >
+        <slot />
+    </span>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 0000000..e477c7f
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { breadcrumbSeparatorVariants } from './breadcrumb-variants'
+
+interface BreadcrumbSeparatorProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbSeparatorProps>(), {
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(breadcrumbSeparatorVariants(), props.class)
+)
+</script>
+
+<template>
+    <li
+        role="presentation"
+        aria-hidden="true"
+        :class="classes"
+    >
+        <slot>
+            <span>/</span>
+        </slot>
+    </li>
+</template>
diff --git a/packages/ui/src/components/breadcrumb/breadcrumb-variants.ts b/packages/ui/src/components/breadcrumb/breadcrumb-variants.ts
new file mode 100644
index 0000000..366c271
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/breadcrumb-variants.ts
@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority'
+
+export const breadcrumbListVariants = cva(
+    'list-none flex flex-wrap items-center gap-2.5 break-words text-sm font-medium text-brutal-fg sm:gap-4'
+)
+
+export const breadcrumbItemVariants = cva(
+    'list-none inline-flex items-center gap-1.5'
+)
+
+export const breadcrumbLinkVariants = cva(
+    'font-semibold transition-colors hover:text-brutal-primary hover:underline cursor-pointer'
+)
+
+export const breadcrumbPageVariants = cva(
+    'font-black text-brutal-fg bg-brutal-accent px-2 py-0.5 border-3 border-brutal rounded-brutal shadow-brutal-sm select-none'
+)
+
+export const breadcrumbSeparatorVariants = cva(
+    'list-none [&>svg]:w-3.5 [&>svg]:h-3.5 font-bold text-brutal-fg/60'
+)
+
+export const breadcrumbEllipsisVariants = cva(
+    'flex h-7 w-7 items-center justify-center border-3 border-brutal bg-brutal-bg text-brutal-fg shadow-brutal-sm rounded-brutal transition-all hover:bg-brutal-muted active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none select-none cursor-pointer'
+)
diff --git a/packages/ui/src/components/breadcrumb/breadcrumb.test.ts b/packages/ui/src/components/breadcrumb/breadcrumb.test.ts
new file mode 100644
index 0000000..ecbe424
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb/breadcrumb.test.ts
@@ -0,0 +1,243 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import Breadcrumb from './Breadcrumb.vue'
+import BreadcrumbList from './BreadcrumbList.vue'
+import BreadcrumbItem from './BreadcrumbItem.vue'
+import BreadcrumbLink from './BreadcrumbLink.vue'
+import BreadcrumbPage from './BreadcrumbPage.vue'
+import BreadcrumbSeparator from './BreadcrumbSeparator.vue'
+import BreadcrumbEllipsis from './BreadcrumbEllipsis.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('Breadcrumb', () => {
+    it('renders nav element with aria-label', () => {
+        const wrapper = mount(Breadcrumb, { ...localeProvide })
+        expect(wrapper.element.tagName).toBe('NAV')
+        expect(wrapper.attributes('aria-label')).toBe('breadcrumb')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Breadcrumb, {
+            slots: { default: '<ol>Items</ol>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toBe('Items')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Breadcrumb, { props: { class: 'my-nav' }, ...localeProvide })
+        expect(wrapper.classes()).toContain('my-nav')
+    })
+})
+
+describe('BreadcrumbList', () => {
+    it('renders ol element', () => {
+        const wrapper = mount(BreadcrumbList, { ...localeProvide })
+        expect(wrapper.element.tagName).toBe('OL')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(BreadcrumbList, { ...localeProvide })
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('items-center')
+        expect(wrapper.classes()).toContain('text-sm')
+        expect(wrapper.classes()).toContain('font-medium')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(BreadcrumbList, {
+            slots: { default: '<li>Item</li>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toBe('Item')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BreadcrumbList, { props: { class: 'my-list' }, ...localeProvide })
+        expect(wrapper.classes()).toContain('my-list')
+    })
+})
+
+describe('BreadcrumbItem', () => {
+    it('renders li element', () => {
+        const wrapper = mount(BreadcrumbItem, { ...localeProvide })
+        expect(wrapper.element.tagName).toBe('LI')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(BreadcrumbItem, { ...localeProvide })
+        expect(wrapper.classes()).toContain('inline-flex')
+        expect(wrapper.classes()).toContain('items-center')
+        expect(wrapper.classes()).toContain('gap-1.5')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(BreadcrumbItem, {
+            slots: { default: '<a>Link</a>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toBe('Link')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BreadcrumbItem, { props: { class: 'my-item' }, ...localeProvide })
+        expect(wrapper.classes()).toContain('my-item')
+    })
+})
+
+describe('BreadcrumbLink', () => {
+    it('renders default as anchor element', () => {
+        const wrapper = mount(BreadcrumbLink, {
+            slots: { default: 'Home' },
+            ...localeProvide,
+        })
+        expect(wrapper.element.tagName).toBe('A')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(BreadcrumbLink, { ...localeProvide })
+        expect(wrapper.classes()).toContain('transition-colors')
+        expect(wrapper.classes()).toContain('cursor-pointer')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(BreadcrumbLink, {
+            slots: { default: 'Home' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toBe('Home')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BreadcrumbLink, { props: { class: 'my-link' }, ...localeProvide })
+        expect(wrapper.classes()).toContain('my-link')
+    })
+
+    it('renders as custom element via as prop', () => {
+        const wrapper = mount(BreadcrumbLink, {
+            props: { as: 'span' },
+            slots: { default: 'Home' },
+            ...localeProvide,
+        })
+        expect(wrapper.element.tagName).toBe('SPAN')
+    })
+})
+
+describe('BreadcrumbPage', () => {
+    it('renders span element', () => {
+        const wrapper = mount(BreadcrumbPage, { ...localeProvide })
+        expect(wrapper.element.tagName).toBe('SPAN')
+    })
+
+    it('applies aria attributes', () => {
+        const wrapper = mount(BreadcrumbPage, { ...localeProvide })
+        expect(wrapper.attributes('role')).toBe('link')
+        expect(wrapper.attributes('aria-disabled')).toBe('true')
+        expect(wrapper.attributes('aria-current')).toBe('page')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(BreadcrumbPage, { ...localeProvide })
+        expect(wrapper.classes()).toContain('font-black')
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('rounded-brutal')
+        expect(wrapper.classes()).toContain('shadow-brutal-sm')
+        expect(wrapper.classes()).toContain('select-none')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(BreadcrumbPage, {
+            slots: { default: 'Current Page' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toBe('Current Page')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BreadcrumbPage, { props: { class: 'my-page' }, ...localeProvide })
+        expect(wrapper.classes()).toContain('my-page')
+    })
+})
+
+describe('BreadcrumbSeparator', () => {
+    it('renders li element', () => {
+        const wrapper = mount(BreadcrumbSeparator, { ...localeProvide })
+        expect(wrapper.element.tagName).toBe('LI')
+    })
+
+    it('applies aria attributes', () => {
+        const wrapper = mount(BreadcrumbSeparator, { ...localeProvide })
+        expect(wrapper.attributes('role')).toBe('presentation')
+        expect(wrapper.attributes('aria-hidden')).toBe('true')
+    })
+
+    it('renders default separator text', () => {
+        const wrapper = mount(BreadcrumbSeparator, { ...localeProvide })
+        expect(wrapper.text()).toBe('/')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(BreadcrumbSeparator, { ...localeProvide })
+        expect(wrapper.classes()).toContain('font-bold')
+    })
+
+    it('renders custom slot content', () => {
+        const wrapper = mount(BreadcrumbSeparator, {
+            slots: { default: '<span>→</span>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toBe('→')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BreadcrumbSeparator, { props: { class: 'my-sep' }, ...localeProvide })
+        expect(wrapper.classes()).toContain('my-sep')
+    })
+})
+
+describe('BreadcrumbEllipsis', () => {
+    it('renders span element', () => {
+        const wrapper = mount(BreadcrumbEllipsis, { ...localeProvide })
+        expect(wrapper.element.tagName).toBe('SPAN')
+    })
+
+    it('applies aria attributes', () => {
+        const wrapper = mount(BreadcrumbEllipsis, { ...localeProvide })
+        expect(wrapper.attributes('role')).toBe('presentation')
+        expect(wrapper.attributes('aria-hidden')).toBe('true')
+    })
+
+    it('renders sr-only text', () => {
+        const wrapper = mount(BreadcrumbEllipsis, { ...localeProvide })
+        const srOnly = wrapper.find('.sr-only')
+        expect(srOnly.exists()).toBe(true)
+        expect(srOnly.text()).toBe('More')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(BreadcrumbEllipsis, { ...localeProvide })
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('rounded-brutal')
+        expect(wrapper.classes()).toContain('shadow-brutal-sm')
+        expect(wrapper.classes()).toContain('select-none')
+        expect(wrapper.classes()).toContain('cursor-pointer')
+    })
+
+    it('renders custom slot content', () => {
+        const wrapper = mount(BreadcrumbEllipsis, {
+            slots: { default: '<span>…</span>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('…')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BreadcrumbEllipsis, { props: { class: 'my-ellipsis' }, ...localeProvide })
+        expect(wrapper.classes()).toContain('my-ellipsis')
+    })
+})
diff --git a/packages/ui/src/components/brutalist-hero.tsx b/packages/ui/src/components/brutalist-hero.tsx
deleted file mode 100644
index a5513ab..0000000
--- a/packages/ui/src/components/brutalist-hero.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-import { ArrowRight, Sparkles } from 'lucide-react';
-import { Button } from './button';
-import { Card, CardContent } from './card';
-
-export interface BrutalistHeroProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    subtitle?: string;
-    primaryCtaText?: string;
-    secondaryCtaText?: string;
-    onPrimaryCtaClick?: () => void;
-    onSecondaryCtaClick?: () => void;
-}
-
-export function BrutalistHero({
-    title = 'Build Bold Interfaces Faster with BrutxUI',
-    subtitle = 'A hyper-responsive, neo-brutalist component registry built with Radix UI and Tailwind CSS. Designed for devs who dare to be different.',
-    primaryCtaText = 'Get Started Now',
-    secondaryCtaText = 'View Component Registry',
-    onPrimaryCtaClick,
-    onSecondaryCtaClick,
-    className,
-    ...props
-}: BrutalistHeroProps) {
-    return (
-        <section
-            className={`w-full py-12 md:py-24 lg:py-32 bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-none transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="container px-4 md:px-6 mx-auto">
-                <div className="grid gap-12 lg:grid-cols-2 lg:gap-16 items-center">
-                    <div className="flex flex-col justify-center space-y-6 text-left">
-                        <div className="inline-flex items-center space-x-2 bg-brutal-accent text-black px-3 py-1 border-3 border-brutal w-fit font-black text-sm uppercase tracking-wider rotate-[-1deg]">
-                            <Sparkles className="h-4 w-4 stroke-[3]" />
-                            <span>V0.2.1 Release</span>
-                        </div>
-
-                        <h1 className="text-4xl font-black tracking-tight sm:text-5xl md:text-6xl lg:text-7xl leading-[1.05]">
-                            {title}
-                        </h1>
-
-                        <p className="max-w-[600px] text-lg md:text-xl font-bold text-gray-700 dark:text-gray-300 leading-relaxed">
-                            {subtitle}
-                        </p>
-
-                        <div className="flex flex-col sm:flex-row gap-4 pt-4">
-                            <Button
-                                size="lg"
-                                variant="primary"
-                                className="font-black text-lg gap-2"
-                                onClick={onPrimaryCtaClick}
-                            >
-                                <span>{primaryCtaText}</span>
-                                <ArrowRight className="h-5 w-5 stroke-[3]" />
-                            </Button>
-                            <Button
-                                size="lg"
-                                variant="outline"
-                                className="font-black text-lg"
-                                onClick={onSecondaryCtaClick}
-                            >
-                                {secondaryCtaText}
-                            </Button>
-                        </div>
-                    </div>
-
-                    <div className="relative mx-auto w-full max-w-[500px] lg:max-w-none">
-                        <div className="absolute inset-0 bg-brutal-secondary translate-x-3 translate-y-3 border-3 border-brutal rounded-none" />
-                        <Card className="relative z-10 border-3 border-brutal bg-white dark:bg-gray-800 rounded-none shadow-none p-2">
-                            <div className="flex items-center justify-between border-b-3 border-brutal pb-2 mb-4 bg-gray-100 dark:bg-gray-700 p-2">
-                                <div className="flex space-x-2">
-                                    <div className="w-3.5 h-3.5 rounded-full bg-brutal-destructive border-2 border-brutal" />
-                                    <div className="w-3.5 h-3.5 rounded-full bg-brutal-accent border-2 border-brutal" />
-                                    <div className="w-3.5 h-3.5 rounded-full bg-brutal-success border-2 border-brutal" />
-                                </div>
-                                <span className="text-xs font-black uppercase tracking-wider opacity-60">brutx-terminal</span>
-                            </div>
-                            <CardContent className="font-mono text-sm space-y-3 text-black dark:text-white pt-2">
-                                <p className="text-brutal-destructive font-black">~/projects/my-bold-saas</p>
-                                <p className="flex items-center gap-2">
-                                    <span className="text-brutal-secondary font-black">$</span>
-                                    <span>npx brutx init</span>
-                                </p>
-                                <p className="text-gray-500 font-medium">✓ Custom Tailwind design tokens configured</p>
-                                <p className="text-gray-500 font-medium">✓ Global CSS token layer synchronized</p>
-                                <p className="flex items-center gap-2">
-                                    <span className="text-brutal-secondary font-black">$</span>
-                                    <span>npx brutx add hero pricing auth-card</span>
-                                </p>
-                                <p className="text-brutal-success font-black">✓ Successfully added 3 blocks into /components/ui!</p>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/packages/ui/src/components/brutalist-hero/BrutalistHero.vue b/packages/ui/src/components/brutalist-hero/BrutalistHero.vue
new file mode 100644
index 0000000..d5c9f9f
--- /dev/null
+++ b/packages/ui/src/components/brutalist-hero/BrutalistHero.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrowRight, Sparkles } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Button from '../button/Button.vue'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+
+interface BrutalistHeroProps {
+    title?: string
+    subtitle?: string
+    primaryCtaText?: string
+    secondaryCtaText?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<BrutalistHeroProps>(), {
+    title: undefined,
+    subtitle: '',
+    primaryCtaText: undefined,
+    secondaryCtaText: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('brutalistHero.title'))
+const resolvedPrimaryCtaText = computed(() => props.primaryCtaText ?? t('brutalistHero.primaryCtaText'))
+const resolvedSecondaryCtaText = computed(() => props.secondaryCtaText ?? t('brutalistHero.secondaryCtaText'))
+
+const emit = defineEmits<{
+    primaryCta: []
+    secondaryCta: []
+}>()
+
+const rootClasses = computed(() => cn('w-full', props.class))
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <div>
+                <div class="inline-flex items-center gap-2 mb-6 bg-brutal-accent px-3 py-1 border-3 border-brutal rotate-[-1deg]">
+                    <Sparkles class="h-4 w-4 stroke-[3]" />
+                    <span class="font-black text-sm">{{ t('brutalistHero.neoBrutalismUI') }}</span>
+                </div>
+                <h1 class="text-4xl lg:text-5xl font-black tracking-tight leading-tight">
+{{ resolvedTitle }}
+</h1>
+                <p v-if="subtitle" class="mt-4 text-lg text-brutal-muted-foreground font-medium">
+{{ subtitle }}
+</p>
+                <div class="mt-8 flex flex-wrap gap-4">
+                    <Button variant="primary" size="lg" @click="emit('primaryCta')">
+                        {{ resolvedPrimaryCtaText }}
+                        <ArrowRight class="ml-2 h-5 w-5 stroke-[3]" />
+                    </Button>
+                    <Button variant="outline" size="lg" @click="emit('secondaryCta')">
+{{ resolvedSecondaryCtaText }}
+</Button>
+                </div>
+            </div>
+
+            <div class="relative">
+                <div class="absolute inset-0 bg-brutal-primary border-3 border-brutal translate-x-3 translate-y-3" />
+                <Card variant="default" padding="default" class="relative bg-brutal-bg font-mono text-sm">
+                    <CardContent>
+                        <div class="space-y-1">
+                            <p class="text-brutal-muted-foreground">
+$ npx brutxui init
+</p>
+                            <p class="text-brutal-success font-bold">
+✓ Project initialized
+</p>
+                            <p class="text-brutal-muted-foreground">
+$ npx brutxui add button
+</p>
+                            <p class="text-brutal-success font-bold">
+✓ Button component added
+</p>
+                            <p class="text-brutal-muted-foreground">
+$ npx brutxui add card dialog
+</p>
+                            <p class="text-brutal-success font-bold">
+✓ 2 components added
+</p>
+                            <p class="text-brutal-accent font-bold animate-pulse">
+█
+</p>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/brutalist-hero/brutalist-hero.test.ts b/packages/ui/src/components/brutalist-hero/brutalist-hero.test.ts
new file mode 100644
index 0000000..92cb1bd
--- /dev/null
+++ b/packages/ui/src/components/brutalist-hero/brutalist-hero.test.ts
@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import BrutalistHero from './BrutalistHero.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('BrutalistHero', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        expect(wrapper.find('h1').text()).toBe('Build Bold Interfaces Faster with BrutxUI')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(BrutalistHero, {
+            props: { title: 'Custom Hero Title' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h1').text()).toBe('Custom Hero Title')
+    })
+
+    it('shows subtitle when provided', () => {
+        const wrapper = mount(BrutalistHero, {
+            props: { subtitle: 'A custom subtitle' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('A custom subtitle')
+    })
+
+    it('does not render subtitle when not provided', () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        const subtitleEl = wrapper.find('p.text-lg')
+        expect(subtitleEl.exists()).toBe(false)
+    })
+
+    it('shows default primary CTA text', () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        expect(wrapper.text()).toContain('Get Started Now')
+    })
+
+    it('shows default secondary CTA text', () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        expect(wrapper.text()).toContain('View Component Registry')
+    })
+
+    it('shows custom primary CTA text', () => {
+        const wrapper = mount(BrutalistHero, {
+            props: { primaryCtaText: 'Start Free' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Start Free')
+    })
+
+    it('shows custom secondary CTA text', () => {
+        const wrapper = mount(BrutalistHero, {
+            props: { secondaryCtaText: 'See Docs' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('See Docs')
+    })
+
+    it('emits primaryCta when primary button is clicked', async () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const primaryButton = buttons.find(b => b.text().includes('Get Started Now'))
+        expect(primaryButton).toBeTruthy()
+        await primaryButton!.trigger('click')
+        expect(wrapper.emitted('primaryCta')).toBeTruthy()
+        expect(wrapper.emitted('primaryCta')!.length).toBe(1)
+    })
+
+    it('emits secondaryCta when secondary button is clicked', async () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const secondaryButton = buttons.find(b => b.text().includes('View Component Registry'))
+        expect(secondaryButton).toBeTruthy()
+        await secondaryButton!.trigger('click')
+        expect(wrapper.emitted('secondaryCta')).toBeTruthy()
+        expect(wrapper.emitted('secondaryCta')!.length).toBe(1)
+    })
+
+    it('renders Neo-Brutalism UI badge', () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        expect(wrapper.text()).toContain('Neo-Brutalism UI')
+    })
+
+    it('renders terminal code block', () => {
+        const wrapper = mount(BrutalistHero, { ...localeProvide })
+        expect(wrapper.text()).toContain('npx brutxui init')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(BrutalistHero, {
+            props: { class: 'my-hero' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-hero')
+    })
+})
diff --git a/packages/ui/src/components/button/Button.vue b/packages/ui/src/components/button/Button.vue
new file mode 100644
index 0000000..44dbfe7
--- /dev/null
+++ b/packages/ui/src/components/button/Button.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { Loader2 } from 'lucide-vue-next'
+import { Primitive } from 'reka-ui'
+import { buttonVariants } from './button-variants'
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>
+
+interface ButtonProps {
+    variant?: NonNullable<ButtonVariantProps['variant']>
+    size?: NonNullable<ButtonVariantProps['size']>
+    asChild?: boolean
+    loading?: boolean
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+    variant: 'default',
+    size: 'default',
+    asChild: false,
+    loading: false,
+    disabled: false,
+    class: '',
+})
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+const classes = computed(() =>
+    cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)
+)
+</script>
+
+<template>
+    <Primitive
+        :as="asChild ? undefined : 'button'"
+        :as-child="asChild"
+        :class="classes"
+        :disabled="!asChild && isDisabled"
+        :aria-disabled="asChild && isDisabled ? true : undefined"
+    >
+        <Loader2 v-if="loading" class="h-4 w-4 animate-spin" />
+        <slot />
+    </Primitive>
+</template>
diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button/button-variants.ts
similarity index 54%
rename from packages/ui/src/components/button.tsx
rename to packages/ui/src/components/button/button-variants.ts
index 18c7a9b..c73aa6c 100644
--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button/button-variants.ts
@@ -1,19 +1,14 @@
-'use client';
+import { cva } from 'class-variance-authority'
 
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-import { Loader2 } from 'lucide-react';
-
-const buttonVariants = cva(
+export const buttonVariants = cva(
     [
         'inline-flex items-center justify-center gap-2',
-        'border-3 border-brutal rounded-brutal',
+        'border-3 border-brutal',
         'font-black tracking-wide',
         'transition-all duration-150',
-        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2',
+        'focus:outline focus:outline-[3px] focus:outline-brutal-ring focus:outline-offset-2',
         'disabled:opacity-50 disabled:pointer-events-none',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
     ],
     {
         variants: {
@@ -22,44 +17,37 @@ const buttonVariants = cva(
                     'bg-brutal-bg text-brutal-fg',
                     'shadow-brutal',
                     'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
                 ],
                 primary: [
                     'bg-brutal-primary text-brutal-fg',
                     'shadow-brutal',
                     'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
                 ],
                 secondary: [
                     'bg-brutal-secondary text-brutal-fg',
                     'shadow-brutal',
                     'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
                 ],
                 accent: [
                     'bg-brutal-accent text-brutal-fg',
                     'shadow-brutal',
                     'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
                 ],
                 danger: [
                     'bg-brutal-destructive text-brutal-fg',
                     'shadow-brutal',
                     'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
                 ],
                 success: [
                     'bg-brutal-success text-brutal-fg',
                     'shadow-brutal',
                     'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
                 ],
                 outline: [
                     'bg-transparent text-brutal-fg',
                     'shadow-brutal',
                     'hover:bg-brutal-fg hover:text-brutal-bg',
                     'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
                 ],
                 ghost: [
                     'bg-transparent text-brutal-fg border-transparent',
@@ -75,7 +63,7 @@ const buttonVariants = cva(
             size: {
                 sm: 'h-9 px-3 py-1 text-sm',
                 default: 'h-11 px-5 py-2 text-base',
-                lg: 'h-12 px-8 py-3 text-lg',
+                lg: 'h-14 px-8 py-3 text-lg',
                 xl: 'h-16 px-10 py-4 text-xl',
                 icon: 'h-11 w-11 p-0',
             },
@@ -85,51 +73,4 @@ const buttonVariants = cva(
             size: 'default',
         },
     }
-);
-
-export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-    loading?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    (
-        {
-            className,
-            variant,
-            size,
-            asChild = false,
-            loading = false,
-            disabled,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        const Comp = asChild ? Slot : 'button';
-        const isDisabled = disabled || loading;
-
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                disabled={isDisabled}
-                {...props}
-            >
-                {loading ? (
-                    <>
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                        {children}
-                    </>
-                ) : (
-                    children
-                )}
-            </Comp>
-        );
-    }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
+)
diff --git a/packages/ui/src/components/button/button.test.ts b/packages/ui/src/components/button/button.test.ts
new file mode 100644
index 0000000..a2e0629
--- /dev/null
+++ b/packages/ui/src/components/button/button.test.ts
@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils'
+import Button from './Button.vue'
+
+describe('Button', () => {
+    it('renders with default variant and size', () => {
+        const wrapper = mount(Button)
+        expect(wrapper.find('button').exists()).toBe(true)
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+        expect(wrapper.classes()).toContain('h-11')
+    })
+
+    it('applies variant classes', async () => {
+        const variants = [
+            { variant: 'default' as const, expectedClass: 'bg-brutal-bg' },
+            { variant: 'primary' as const, expectedClass: 'bg-brutal-primary' },
+            { variant: 'secondary' as const, expectedClass: 'bg-brutal-secondary' },
+            { variant: 'accent' as const, expectedClass: 'bg-brutal-accent' },
+            { variant: 'danger' as const, expectedClass: 'bg-brutal-destructive' },
+            { variant: 'success' as const, expectedClass: 'bg-brutal-success' },
+            { variant: 'outline' as const, expectedClass: 'bg-transparent' },
+            { variant: 'ghost' as const, expectedClass: 'border-transparent' },
+            { variant: 'link' as const, expectedClass: 'underline-offset-4' },
+        ]
+
+        const wrapper = mount(Button)
+        for (const { variant, expectedClass } of variants) {
+            await wrapper.setProps({ variant })
+            expect(wrapper.classes()).toContain(expectedClass)
+        }
+    })
+
+    it('applies size classes', async () => {
+        const sizes = [
+            { size: 'sm' as const, expectedClass: 'h-9' },
+            { size: 'default' as const, expectedClass: 'h-11' },
+            { size: 'lg' as const, expectedClass: 'h-14' },
+            { size: 'xl' as const, expectedClass: 'h-16' },
+            { size: 'icon' as const, expectedClass: 'w-11' },
+        ]
+
+        const wrapper = mount(Button)
+        for (const { size, expectedClass } of sizes) {
+            await wrapper.setProps({ size })
+            expect(wrapper.classes()).toContain(expectedClass)
+        }
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Button, {
+            slots: { default: 'Click me' },
+        })
+        expect(wrapper.text()).toBe('Click me')
+    })
+
+    it('shows loading spinner when loading=true', () => {
+        const wrapper = mount(Button, {
+            props: { loading: true },
+        })
+        const svg = wrapper.find('svg')
+        expect(svg.exists()).toBe(true)
+        expect(svg.classes()).toContain('animate-spin')
+    })
+
+    it('is disabled when disabled=true', () => {
+        const wrapper = mount(Button, {
+            props: { disabled: true },
+        })
+        expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('is disabled when loading=true', () => {
+        const wrapper = mount(Button, {
+            props: { loading: true },
+        })
+        expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(Button, {
+            props: { class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+
+    it('emits click event when clicked', async () => {
+        const onClick = vi.fn()
+        const wrapper = mount(Button, {
+            attrs: { onClick },
+        })
+        await wrapper.trigger('click')
+        expect(onClick).toHaveBeenCalled()
+    })
+})
diff --git a/packages/ui/src/components/calendar.tsx b/packages/ui/src/components/calendar.tsx
deleted file mode 100644
index 8a865c2..0000000
--- a/packages/ui/src/components/calendar.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
-
-import { cn } from '../lib/utils';
-import { Button, buttonVariants } from './button';
-
-function Calendar({
-    className,
-    classNames,
-    showOutsideDays = true,
-    captionLayout = 'label',
-    buttonVariant = 'outline',
-    formatters,
-    components,
-    ...props
-}: React.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
-}) {
-    const defaultClassNames = getDefaultClassNames();
-
-    return (
-        <DayPicker
-            showOutsideDays={showOutsideDays}
-            className={cn(
-                'p-2 sm:p-3 bg-[#FFFEF0] text-black dark:bg-gray-900 dark:text-gray-100',
-                'border-2 sm:border-3 border-brutal',
-                'shadow-brutal',
-                'w-fit max-w-full overflow-x-auto',
-                className
-            )}
-            captionLayout={captionLayout}
-            formatters={{
-                formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
-                ...formatters,
-            }}
-            classNames={{
-                root: cn('w-fit select-none', defaultClassNames.root),
-                months: cn('flex gap-2 sm:gap-4 flex-col', defaultClassNames.months),
-                month: cn('flex flex-col gap-1 sm:gap-2', defaultClassNames.month),
-                nav: cn(
-                    'flex items-center gap-1 absolute top-0 inset-x-0 justify-between z-10',
-                    defaultClassNames.nav
-                ),
-                button_previous: cn(
-                    buttonVariants({ variant: buttonVariant, size: 'icon' }),
-                    'h-6 w-6 sm:h-7 sm:w-7 p-0 select-none',
-                    'border-2 border-brutal',
-                    'shadow-brutal-sm',
-                    'hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[1px_1px_0px_0px_#000000]',
-                    'transition-all duration-100',
-                    'aria-disabled:opacity-50',
-                    defaultClassNames.button_previous
-                ),
-                button_next: cn(
-                    buttonVariants({ variant: buttonVariant, size: 'icon' }),
-                    'h-6 w-6 sm:h-7 sm:w-7 p-0 select-none',
-                    'border-2 border-brutal',
-                    'shadow-brutal-sm',
-                    'hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[1px_1px_0px_0px_#000000]',
-                    'transition-all duration-100',
-                    'aria-disabled:opacity-50',
-                    defaultClassNames.button_next
-                ),
-                month_caption: cn(
-                    'flex items-center justify-center h-6 sm:h-7 relative',
-                    'font-black text-xs sm:text-sm tracking-tight uppercase text-black dark:text-gray-100',
-                    defaultClassNames.month_caption
-                ),
-                dropdowns: cn(
-                    'flex items-center text-[10px] sm:text-xs font-bold justify-center gap-1',
-                    defaultClassNames.dropdowns
-                ),
-                dropdown_root: cn(
-                    'relative border-2 border-brutal bg-white text-black dark:bg-gray-800 dark:text-gray-100',
-                    'shadow-brutal-sm',
-                    'focus-within:ring-2 focus-within:ring-offset-1 focus-within:ring-black',
-                    defaultClassNames.dropdown_root
-                ),
-                dropdown: cn(
-                    'absolute inset-0 opacity-0 cursor-pointer',
-                    defaultClassNames.dropdown
-                ),
-                caption_label: cn(
-                    'select-none font-black tracking-tight text-black dark:text-gray-100',
-                    captionLayout === 'label'
-                        ? 'text-xs sm:text-sm'
-                        : 'pl-1 sm:pl-1.5 pr-0.5 flex items-center gap-0.5 sm:gap-1 text-[10px] sm:text-xs h-6 sm:h-7 [&>svg]:size-2.5 sm:[&>svg]:size-3',
-                    defaultClassNames.caption_label
-                ),
-                table: 'w-full border-collapse border-spacing-0',
-                weekdays: cn('', defaultClassNames.weekdays),
-                weekday: cn(
-                    'text-black dark:text-white font-black text-[8px] sm:text-[10px] select-none uppercase tracking-wide',
-                    'h-6 w-6 sm:h-8 sm:w-8 text-center',
-                    'bg-[#FFE66D] dark:bg-[#FFE66D] dark:text-black',
-                    'border sm:border-2 border-black dark:border-black',
-                    defaultClassNames.weekday
-                ),
-                week: cn('', defaultClassNames.week),
-                week_number_header: cn(
-                    'select-none h-6 w-6 sm:h-8 sm:w-8 text-center font-black text-[8px] sm:text-[10px]',
-                    'bg-[#A8E6CF] border sm:border-2 border-black',
-                    defaultClassNames.week_number_header
-                ),
-                week_number: cn(
-                    'text-[8px] sm:text-[10px] select-none font-black text-black',
-                    'h-6 w-6 sm:h-8 sm:w-8 text-center align-middle',
-                    'bg-[#A8E6CF] border sm:border-2 border-black',
-                    defaultClassNames.week_number
-                ),
-                day: cn(
-                    'relative h-6 w-6 sm:h-8 sm:w-8 p-0 text-center select-none',
-                    'text-black dark:text-gray-100 border border-black/10 dark:border-white/10',
-                    defaultClassNames.day
-                ),
-                range_start: cn(
-                    '[&>button]:bg-[#FF6B6B] [&>button]:border-2 [&>button]:border-black [&>button]:font-black',
-                    defaultClassNames.range_start
-                ),
-                range_middle: cn(
-                    '[&>button]:bg-[#FFE66D] [&>button]:text-black',
-                    defaultClassNames.range_middle
-                ),
-                range_end: cn(
-                    '[&>button]:bg-[#FF6B6B] [&>button]:border-2 [&>button]:border-black [&>button]:font-black',
-                    defaultClassNames.range_end
-                ),
-                today: cn(
-                    '[&>button]:bg-[#4ECDC4] [&>button]:text-black [&>button]:font-black',
-                    '[&>button]:border-2 [&>button]:border-black',
-                    defaultClassNames.today
-                ),
-                outside: cn(
-                    'text-gray-400 dark:text-gray-600 opacity-40',
-                    defaultClassNames.outside
-                ),
-                disabled: cn(
-                    'text-gray-400 dark:text-gray-600 opacity-40 cursor-not-allowed',
-                    'bg-gray-100 dark:bg-gray-800',
-                    defaultClassNames.disabled
-                ),
-                hidden: cn('invisible', defaultClassNames.hidden),
-                ...classNames,
-            }}
-            components={{
-                Root: ({ className, rootRef, ...props }) => {
-                    return (
-                        <div
-                            data-slot="calendar"
-                            ref={rootRef}
-                            className={cn(className)}
-                            {...props}
-                        />
-                    );
-                },
-                Chevron: ({ className, orientation, ...props }) => {
-                    if (orientation === 'left') {
-                        return (
-                            <ChevronLeftIcon
-                                className={cn('size-4 stroke-[3]', className)}
-                                {...props}
-                            />
-                        );
-                    }
-
-                    if (orientation === 'right') {
-                        return (
-                            <ChevronRightIcon
-                                className={cn('size-4 stroke-[3]', className)}
-                                {...props}
-                            />
-                        );
-                    }
-
-                    return (
-                        <ChevronDownIcon
-                            className={cn('size-3 stroke-[3]', className)}
-                            {...props}
-                        />
-                    );
-                },
-                DayButton: CalendarDayButton,
-                WeekNumber: ({ children, ...props }) => {
-                    return (
-                        <td {...props}>
-                            <div className="flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center text-center font-black">
-                                {children}
-                            </div>
-                        </td>
-                    );
-                },
-                ...components,
-            }}
-            {...props}
-        />
-    );
-}
-
-function CalendarDayButton({
-    className,
-    day,
-    modifiers,
-    ...props
-}: React.ComponentProps<typeof DayButton>) {
-    const defaultClassNames = getDefaultClassNames();
-
-    const ref = React.useRef<HTMLButtonElement>(null);
-    React.useEffect(() => {
-        if (modifiers.focused) ref.current?.focus();
-    }, [modifiers.focused]);
-
-    return (
-        <button
-            ref={ref}
-            type="button"
-            data-day={day.date.toLocaleDateString()}
-            data-selected-single={
-                modifiers.selected &&
-                !modifiers.range_start &&
-                !modifiers.range_end &&
-                !modifiers.range_middle
-            }
-            data-range-start={modifiers.range_start}
-            data-range-end={modifiers.range_end}
-            data-range-middle={modifiers.range_middle}
-            className={cn(
-                'flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center',
-                'text-[10px] sm:text-xs font-semibold transition-all duration-100',
-                'hover:bg-[#DDA0DD] hover:text-black hover:font-bold',
-                'focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-1',
-                'data-[selected-single=true]:bg-[#FF6B6B] data-[selected-single=true]:text-black',
-                'data-[selected-single=true]:border sm:data-[selected-single=true]:border-2 data-[selected-single=true]:border-brutal',
-                'data-[selected-single=true]:shadow-brutal-sm',
-                'data-[selected-single=true]:font-black',
-                'data-[range-start=true]:bg-[#FF6B6B] data-[range-start=true]:text-black data-[range-start=true]:font-black',
-                'data-[range-end=true]:bg-[#FF6B6B] data-[range-end=true]:text-black data-[range-end=true]:font-black',
-                'data-[range-middle=true]:bg-[#FFE66D] data-[range-middle=true]:text-black',
-                'disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent',
-                defaultClassNames.day,
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-export { Calendar, CalendarDayButton };
diff --git a/packages/ui/src/components/calendar/Calendar.vue b/packages/ui/src/components/calendar/Calendar.vue
new file mode 100644
index 0000000..e5fc0ed
--- /dev/null
+++ b/packages/ui/src/components/calendar/Calendar.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Calendar as VCalendar } from 'v-calendar'
+import { cn } from '../../lib/utils'
+
+interface CalendarProps {
+    modelValue?: Date | Date[] | null
+    isRange?: boolean
+    disabled?: boolean
+    class?: string
+}
+
+interface DateRangeValue {
+    start: Date
+    end: Date
+}
+
+const props = withDefaults(defineProps<CalendarProps>(), {
+    modelValue: undefined,
+    isRange: false,
+    disabled: false,
+    class: '',
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: Date | Date[] | null]
+}>()
+
+const rootClasses = computed(() =>
+    cn(
+        'p-2 sm:p-3',
+        'bg-brutal-bg text-brutal-fg',
+        'border-3 border-brutal',
+        'shadow-brutal',
+        'w-fit max-w-full overflow-x-auto',
+        props.class
+    )
+)
+
+const vCalendarModelValue = computed<Date | DateRangeValue | null>(() => {
+    if (props.isRange && Array.isArray(props.modelValue) && props.modelValue.length === 2) {
+        return { start: props.modelValue[0], end: props.modelValue[1] }
+    }
+    if (props.isRange) return null
+    if (props.modelValue instanceof Date) return props.modelValue
+    return null
+})
+
+function handleUpdate(value: Date | DateRangeValue | null) {
+    if (props.disabled) return
+    if (props.isRange) {
+        if (value && typeof value === 'object' && 'start' in value && 'end' in value) {
+            emit('update:modelValue', [value.start, value.end])
+        } else {
+            emit('update:modelValue', null)
+        }
+    } else {
+        if (value instanceof Date || value === null) {
+            emit('update:modelValue', value)
+        } else {
+            emit('update:modelValue', null)
+        }
+    }
+}
+
+const dayBaseClasses = cn(
+    'flex h-6 w-6 sm:h-8 sm:w-8 items-center justify-center text-[10px] sm:text-xs font-semibold transition-all duration-100 hover:bg-brutal-secondary hover:text-brutal-fg hover:font-bold cursor-pointer border-3 border-brutal/10',
+    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all'
+)
+
+const daySelectedClasses = 'bg-brutal-primary text-brutal-fg font-black border-3 border-brutal shadow-brutal-sm'
+const dayInRangeClasses = 'bg-brutal-accent text-brutal-fg'
+const dayRangeEndpointClasses = 'bg-brutal-secondary text-brutal-fg font-black border-3 border-brutal shadow-brutal-sm'
+const dayTodayClasses = 'bg-brutal-secondary text-brutal-fg font-black border-3 border-brutal'
+const dayOutsideClasses = 'text-brutal-muted-foreground opacity-40'
+const dayDisabledClasses = 'opacity-40 cursor-not-allowed'
+</script>
+
+<template>
+    <VCalendar
+        :model-value="vCalendarModelValue"
+        :mode="isRange ? 'range' : 'date'"
+        :disabled="disabled"
+        :class="rootClasses"
+        :attributes="[]"
+        trim-weeks
+        :first-day-of-week="1"
+        @update:model-value="handleUpdate"
+    >
+        <template #default="{ page }">
+            <div class="vc-header flex items-center justify-between mb-2">
+                <div class="vc-title font-black text-xs sm:text-sm tracking-tight uppercase text-brutal-fg">
+                    {{ page.monthLabel }} {{ page.yearLabel }}
+                </div>
+            </div>
+        </template>
+        <template #day-content="{ day }">
+            <div
+                :class="[
+                    dayBaseClasses,
+                    day.isSelected && !day.isInRange ? daySelectedClasses : '',
+                    day.isInRange && !day.isStart && !day.isEnd ? dayInRangeClasses : '',
+                    (day.isStart || day.isEnd) ? dayRangeEndpointClasses : '',
+                    day.isToday ? dayTodayClasses : '',
+                    day.isOutside ? dayOutsideClasses : '',
+                    day.isDisabled ? dayDisabledClasses : '',
+                ]"
+            >
+                {{ day.label }}
+            </div>
+        </template>
+    </VCalendar>
+</template>
diff --git a/packages/ui/src/components/calendar/calendar.test.ts b/packages/ui/src/components/calendar/calendar.test.ts
new file mode 100644
index 0000000..11e100c
--- /dev/null
+++ b/packages/ui/src/components/calendar/calendar.test.ts
@@ -0,0 +1,251 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { vi } from 'vitest'
+import Calendar from './Calendar.vue'
+
+const { dayRef } = vi.hoisted(() => ({
+    dayRef: {
+        label: '1',
+        isSelected: false,
+        isInRange: false,
+        isStart: false,
+        isEnd: false,
+        isToday: false,
+        isOutside: false,
+        isDisabled: false,
+    },
+}))
+
+vi.mock('v-calendar', () => ({
+    Calendar: {
+        name: 'VCalendar',
+        props: ['modelValue', 'isRange', 'mode', 'disabled', 'class', 'attributes', 'trimWeeks', 'firstDayOfWeek'],
+        emits: ['update:model-value'],
+        data() {
+            return { day: { ...dayRef } }
+        },
+        template: `
+            <div class="v-calendar-stub">
+                <slot :page="{ monthLabel: 'June', yearLabel: '2026' }"></slot>
+                <slot name="day-content" :day="day"></slot>
+            </div>
+        `,
+    },
+}))
+
+const defaultDay = {
+    label: '1',
+    isSelected: false,
+    isInRange: false,
+    isStart: false,
+    isEnd: false,
+    isToday: false,
+    isOutside: false,
+    isDisabled: false,
+}
+
+function resetDay() {
+    Object.assign(dayRef, defaultDay)
+}
+
+function mountCalendar(props = {}) {
+    return mount(Calendar, { props })
+}
+
+function findVCalendar(wrapper: ReturnType<typeof mountCalendar>) {
+    return wrapper.findComponent({ name: 'VCalendar' })
+}
+
+describe('Calendar', () => {
+    afterEach(() => {
+        resetDay()
+    })
+
+    describe('rootClasses computed', () => {
+        it('applies default brutal styling classes', () => {
+            const wrapper = mountCalendar()
+            const vm = wrapper.vm as unknown as { rootClasses: string }
+            expect(vm.rootClasses).toContain('border-3')
+            expect(vm.rootClasses).toContain('border-brutal')
+            expect(vm.rootClasses).toContain('shadow-brutal')
+            expect(vm.rootClasses).toContain('bg-brutal-bg')
+            expect(vm.rootClasses).toContain('text-brutal-fg')
+        })
+
+        it('merges custom class into rootClasses', () => {
+            const wrapper = mountCalendar({ class: 'custom-calendar' })
+            const vm = wrapper.vm as unknown as { rootClasses: string }
+            expect(vm.rootClasses).toContain('custom-calendar')
+        })
+    })
+
+    describe('vCalendarModelValue computed', () => {
+        it('returns DateRangeValue when isRange and modelValue is Date[] of length 2', () => {
+            const start = new Date(2026, 0, 1)
+            const end = new Date(2026, 0, 31)
+            const wrapper = mountCalendar({ isRange: true, modelValue: [start, end] })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('modelValue')).toEqual({ start, end })
+        })
+
+        it('returns null when isRange and modelValue is not an array', () => {
+            const wrapper = mountCalendar({ isRange: true, modelValue: new Date(2026, 0, 1) })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('modelValue')).toBeNull()
+        })
+
+        it('returns null when isRange and modelValue is an empty array', () => {
+            const wrapper = mountCalendar({ isRange: true, modelValue: [] as Date[] })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('modelValue')).toBeNull()
+        })
+
+        it('returns Date when modelValue is a Date instance and not isRange', () => {
+            const date = new Date(2026, 5, 15)
+            const wrapper = mountCalendar({ modelValue: date })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('modelValue')).toBe(date)
+        })
+
+        it('returns null when modelValue is null', () => {
+            const wrapper = mountCalendar({ modelValue: null })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('modelValue')).toBeNull()
+        })
+
+        it('returns null when modelValue is undefined', () => {
+            const wrapper = mountCalendar({ modelValue: undefined })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('modelValue')).toBeNull()
+        })
+    })
+
+    describe('handleUpdate', () => {
+        it('does not emit when disabled', async () => {
+            const wrapper = mountCalendar({ disabled: true })
+            const stub = findVCalendar(wrapper)
+            stub.vm.$emit('update:model-value', new Date(2026, 5, 15))
+            await nextTick()
+            expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+        })
+
+        it('emits [start, end] when isRange and value is DateRangeValue', async () => {
+            const start = new Date(2026, 0, 1)
+            const end = new Date(2026, 0, 31)
+            const wrapper = mountCalendar({ isRange: true })
+            const stub = findVCalendar(wrapper)
+            stub.vm.$emit('update:model-value', { start, end })
+            await nextTick()
+            expect(wrapper.emitted('update:modelValue')![0]).toEqual([[start, end]])
+        })
+
+        it('emits null when isRange and value is null', async () => {
+            const wrapper = mountCalendar({ isRange: true })
+            const stub = findVCalendar(wrapper)
+            stub.vm.$emit('update:model-value', null)
+            await nextTick()
+            expect(wrapper.emitted('update:modelValue')![0]).toEqual([null])
+        })
+
+        it('emits Date when not isRange and value is a Date', async () => {
+            const date = new Date(2026, 5, 15)
+            const wrapper = mountCalendar()
+            const stub = findVCalendar(wrapper)
+            stub.vm.$emit('update:model-value', date)
+            await nextTick()
+            expect(wrapper.emitted('update:modelValue')![0]).toEqual([date])
+        })
+
+        it('emits null when not isRange and value is null', async () => {
+            const wrapper = mountCalendar()
+            const stub = findVCalendar(wrapper)
+            stub.vm.$emit('update:model-value', null)
+            await nextTick()
+            expect(wrapper.emitted('update:modelValue')![0]).toEqual([null])
+        })
+    })
+
+    describe('template rendering', () => {
+        it('renders the VCalendar stub', () => {
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.v-calendar-stub').exists()).toBe(true)
+        })
+
+        it('renders header slot with month and year labels', () => {
+            const wrapper = mountCalendar()
+            expect(wrapper.text()).toContain('June')
+            expect(wrapper.text()).toContain('2026')
+        })
+
+        it('renders day-content slot with day label', () => {
+            const wrapper = mountCalendar()
+            expect(wrapper.text()).toContain('1')
+        })
+
+        it('applies primary style for selected day not in range', () => {
+            dayRef.isSelected = true
+            dayRef.isInRange = false
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.bg-brutal-primary').exists()).toBe(true)
+        })
+
+        it('applies accent style for in-range day', () => {
+            dayRef.isInRange = true
+            dayRef.isStart = false
+            dayRef.isEnd = false
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.bg-brutal-accent').exists()).toBe(true)
+        })
+
+        it('applies secondary style with shadow for start day', () => {
+            dayRef.isStart = true
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.bg-brutal-secondary.shadow-brutal-sm').exists()).toBe(true)
+        })
+
+        it('applies secondary style with shadow for end day', () => {
+            dayRef.isEnd = true
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.bg-brutal-secondary.shadow-brutal-sm').exists()).toBe(true)
+        })
+
+        it('applies secondary style for today', () => {
+            dayRef.isToday = true
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.bg-brutal-secondary').exists()).toBe(true)
+        })
+
+        it('applies muted style for outside day', () => {
+            dayRef.isOutside = true
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.opacity-40').exists()).toBe(true)
+        })
+
+        it('applies disabled style for disabled day', () => {
+            dayRef.isDisabled = true
+            const wrapper = mountCalendar()
+            expect(wrapper.find('.cursor-not-allowed').exists()).toBe(true)
+        })
+
+        it('passes mode prop to VCalendar based on isRange', () => {
+            const wrapper = mountCalendar({ isRange: true })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('mode')).toBe('range')
+        })
+
+        it('passes disabled prop to VCalendar', () => {
+            const wrapper = mountCalendar({ disabled: true })
+            const stub = findVCalendar(wrapper)
+            expect(stub.props('disabled')).toBe(true)
+        })
+
+        it('applies rootClasses to the VCalendar class prop', () => {
+            const wrapper = mountCalendar()
+            const stub = findVCalendar(wrapper)
+            const classProp = stub.props('class') as string
+            expect(classProp).toContain('border-3')
+            expect(classProp).toContain('border-brutal')
+            expect(classProp).toContain('shadow-brutal')
+        })
+    })
+})
diff --git a/packages/ui/src/components/card-3d/Card3D.vue b/packages/ui/src/components/card-3d/Card3D.vue
new file mode 100644
index 0000000..18900a8
--- /dev/null
+++ b/packages/ui/src/components/card-3d/Card3D.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { useReducedMotion } from '../../composables/useReducedMotion'
+import { useLocale } from '@/composables/useLocale'
+import { card3dVariants, card3dShadowVariants } from './card-3d-variants'
+
+type Card3DVariantProps = VariantProps<typeof card3dVariants>
+
+interface Card3DProps {
+    maxRotation?: number
+    perspective?: number
+    scale?: number
+    shadowOffset?: number
+    shadow?: NonNullable<Card3DVariantProps['shadow']>
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<Card3DProps>(), {
+    maxRotation: 15,
+    perspective: 1000,
+    scale: 1.02,
+    shadowOffset: 10,
+    shadow: 'default',
+    disabled: false,
+    class: '',
+})
+
+const cardRef = ref<HTMLDivElement | null>(null)
+const rx = ref(0)
+const ry = ref(0)
+const isHovered = ref(false)
+
+const prefersReducedMotion = useReducedMotion()
+const { t } = useLocale()
+
+// 静态/初始阴影偏移量
+const initialOffset = computed(() => {
+    switch (props.shadow) {
+        case 'lg':
+            return 6
+        case 'xl':
+            return 8
+        default:
+            return 4
+    }
+})
+
+// 动态阴影偏移量
+const sx = ref(0)
+const sy = ref(0)
+
+const CENTER_OFFSET = 0.5
+
+const handlePointerMove = (e: PointerEvent) => {
+    if (props.disabled || prefersReducedMotion.value) return
+    const rect = cardRef.value?.getBoundingClientRect()
+    if (!rect) return
+
+    isHovered.value = true
+    const x = (e.clientX - rect.left) / rect.width - CENTER_OFFSET // [-0.5, 0.5]
+    const y = (e.clientY - rect.top) / rect.height - CENTER_OFFSET // [-0.5, 0.5]
+
+    rx.value = -y * props.maxRotation
+    ry.value = x * props.maxRotation
+
+    // 阴影向反方向位移，加上初始阴影值作为偏移基数
+    sx.value = -x * props.shadowOffset + initialOffset.value
+    sy.value = -y * props.shadowOffset + initialOffset.value
+}
+
+const handlePointerLeave = () => {
+    isHovered.value = false
+    rx.value = 0
+    ry.value = 0
+    sx.value = initialOffset.value
+    sy.value = initialOffset.value
+}
+
+// 初始化时设定阴影位置
+sx.value = initialOffset.value
+sy.value = initialOffset.value
+
+const cardStyles = computed(() => {
+    if (props.disabled || prefersReducedMotion.value) {
+        return {}
+    }
+    return {
+        transform: isHovered.value
+            ? `perspective(${props.perspective}px) rotateX(${rx.value}deg) rotateY(${ry.value}deg) scale(${props.scale})`
+            : `perspective(${props.perspective}px) rotateX(0deg) rotateY(0deg) scale(1)`,
+    }
+})
+
+const shadowStyles = computed(() => {
+    if (props.disabled || prefersReducedMotion.value) {
+        return {
+            transform: `translate(${initialOffset.value}px, ${initialOffset.value}px)`,
+        }
+    }
+    return {
+        transform: `translate(${sx.value}px, ${sy.value}px)`,
+    }
+})
+
+const containerClasses = computed(() =>
+    cn('relative inline-block w-full', props.class)
+)
+
+const cardClasses = computed(() =>
+    cn(card3dVariants({ shadow: props.shadow }))
+)
+
+const shadowClasses = computed(() =>
+    cn(card3dShadowVariants())
+)
+</script>
+
+<template>
+    <div :class="containerClasses" role="region" :aria-label="t('card3d.ariaLabel')">
+        <div
+            ref="cardRef"
+            :class="cardClasses"
+            :style="cardStyles"
+            @pointermove="handlePointerMove"
+            @pointerleave="handlePointerLeave"
+        >
+            <slot />
+        </div>
+        <!-- 绝对定位的底色 div 模拟物理阴影 -->
+        <div :class="shadowClasses" :style="shadowStyles" aria-hidden="true" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/card-3d/card-3d-variants.ts b/packages/ui/src/components/card-3d/card-3d-variants.ts
new file mode 100644
index 0000000..e97b927
--- /dev/null
+++ b/packages/ui/src/components/card-3d/card-3d-variants.ts
@@ -0,0 +1,34 @@
+import { cva } from 'class-variance-authority'
+
+export const card3dVariants = cva(
+    [
+        'relative',
+        'border-3 border-brutal',
+        'rounded-brutal',
+        'bg-brutal-bg text-brutal-fg',
+        'transition-transform duration-200 ease-out',
+    ],
+    {
+        variants: {
+            shadow: {
+                default: 'shadow-brutal',
+                lg: 'shadow-brutal-lg',
+                xl: 'shadow-brutal-xl',
+            },
+        },
+        defaultVariants: {
+            shadow: 'default',
+        },
+    }
+)
+
+export const card3dShadowVariants = cva(
+    [
+        'absolute inset-0',
+        'border-3 border-brutal',
+        'rounded-brutal',
+        'bg-brutal-fg',
+        'transition-transform duration-200 ease-out',
+        '-z-10',
+    ]
+)
diff --git a/packages/ui/src/components/card-3d/card-3d.test.ts b/packages/ui/src/components/card-3d/card-3d.test.ts
new file mode 100644
index 0000000..a507b40
--- /dev/null
+++ b/packages/ui/src/components/card-3d/card-3d.test.ts
@@ -0,0 +1,87 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import { ref } from 'vue'
+import Card3D from './Card3D.vue'
+
+vi.mock('../../composables/useReducedMotion', () => ({
+    useReducedMotion: () => ref(false)
+}))
+
+describe('Card3D', () => {
+    it('renders with default variant classes', () => {
+        const wrapper = mount(Card3D)
+        const card = wrapper.find('[role="region"]').find('div')
+        expect(card.classes()).toContain('border-3')
+        expect(card.classes()).toContain('border-brutal')
+        expect(card.classes()).toContain('rounded-brutal')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Card3D, {
+            slots: { default: 'Hello 3D' },
+        })
+        expect(wrapper.text()).toContain('Hello 3D')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(Card3D, {
+            props: { class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+
+    it('resets rotation on pointer leave', async () => {
+        const wrapper = mount(Card3D)
+        const card = wrapper.find('[role="region"] > div:first-child')
+
+        await card.trigger('pointermove', {
+            clientX: 100,
+            clientY: 100,
+        })
+
+        await card.trigger('pointerleave')
+
+        const style = card.attributes('style') || ''
+        expect(style).toContain('rotateX(0deg)')
+        expect(style).toContain('rotateY(0deg)')
+    })
+
+    it('disables 3D effect when disabled prop is true', async () => {
+        const wrapper = mount(Card3D, {
+            props: { disabled: true },
+        })
+        const card = wrapper.find('[role="region"] > div:first-child')
+
+        await card.trigger('pointermove', {
+            clientX: 100,
+            clientY: 100,
+        })
+
+        const style = card.attributes('style') || ''
+        expect(style).toBe('')
+    })
+
+    it('respects prefers-reduced-motion', async () => {
+        const wrapper = mount(Card3D, {
+            props: { disabled: true },
+        })
+        const card = wrapper.find('[role="region"] > div:first-child')
+
+        await card.trigger('pointermove', {
+            clientX: 100,
+            clientY: 100,
+        })
+
+        const style = card.attributes('style') || ''
+        expect(style).not.toContain('rotateX')
+        expect(style).not.toContain('rotateY')
+    })
+
+    it('applies shadow variant classes', () => {
+        const wrapper = mount(Card3D, {
+            props: { shadow: 'lg' },
+        })
+        const card = wrapper.find('[role="region"] > div:first-child')
+        expect(card.classes()).toContain('shadow-brutal-lg')
+    })
+})
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
deleted file mode 100644
index 1c4417c..0000000
--- a/packages/ui/src/components/card.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const cardVariants = cva(
-    [
-        'border-3 border-brutal rounded-brutal',
-        'bg-brutal-bg text-brutal-fg',
-        'transition-all duration-150',
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'shadow-brutal',
-                elevated: 'shadow-brutal-lg',
-                flat: 'shadow-none',
-                interactive: [
-                    'shadow-brutal',
-                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'cursor-pointer',
-                ],
-                primary: 'shadow-[var(--brutal-shadow-offset-x,4px)_var(--brutal-shadow-offset-y,4px)_0px_0px_var(--brutal-primary,#FF6B6B)] border-[var(--brutal-primary,#FF6B6B)]',
-                secondary: 'shadow-[var(--brutal-shadow-offset-x,4px)_var(--brutal-shadow-offset-y,4px)_0px_0px_var(--brutal-secondary,#4ECDC4)] border-[var(--brutal-secondary,#4ECDC4)]',
-            },
-            padding: {
-                none: 'p-0',
-                sm: 'p-3',
-                default: 'p-5',
-                lg: 'p-8',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            padding: 'default',
-        },
-    }
-);
-
-export interface CardProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof cardVariants> {}
-
-const Card = React.forwardRef<HTMLDivElement, CardProps>(
-    ({ className, variant, padding, ...props }, ref) => (
-        <div ref={ref} className={cn(cardVariants({ variant, padding, className }))} {...props} />
-    )
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={cn('flex flex-col space-y-1.5 pb-4', className)} {...props} />
-    )
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-    ({ className, ...props }, ref) => (
-        <h3
-            ref={ref}
-            className={cn('text-2xl font-black tracking-tight leading-none', className)}
-            {...props}
-        />
-    )
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-    <p
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => <div ref={ref} className={cn('', className)} {...props} />
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => (
-        <div
-            ref={ref}
-            className={cn(
-                'flex items-center pt-4 border-t-3 border-brutal',
-                className
-            )}
-            {...props}
-        />
-    )
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants };
diff --git a/packages/ui/src/components/card/Card.vue b/packages/ui/src/components/card/Card.vue
new file mode 100644
index 0000000..61bd076
--- /dev/null
+++ b/packages/ui/src/components/card/Card.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { cardVariants } from './card-variants'
+
+type CardVariantProps = VariantProps<typeof cardVariants>
+
+interface CardProps {
+    variant?: NonNullable<CardVariantProps['variant']>
+    padding?: NonNullable<CardVariantProps['padding']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<CardProps>(), {
+    variant: 'default',
+    padding: 'default',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(cardVariants({ variant: props.variant, padding: props.padding }), props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/card/CardContent.vue b/packages/ui/src/components/card/CardContent.vue
new file mode 100644
index 0000000..fe0a6f4
--- /dev/null
+++ b/packages/ui/src/components/card/CardContent.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CardContentProps {
+    class?: string
+}
+
+const props = defineProps<CardContentProps>()
+
+const classes = computed(() => cn(props.class))
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/card/CardDescription.vue b/packages/ui/src/components/card/CardDescription.vue
new file mode 100644
index 0000000..e134b2e
--- /dev/null
+++ b/packages/ui/src/components/card/CardDescription.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CardDescriptionProps {
+    class?: string
+}
+
+const props = defineProps<CardDescriptionProps>()
+
+const classes = computed(() =>
+    cn('text-sm text-brutal-muted-foreground font-medium', props.class)
+)
+</script>
+
+<template>
+    <p :class="classes">
+        <slot />
+    </p>
+</template>
diff --git a/packages/ui/src/components/card/CardFooter.vue b/packages/ui/src/components/card/CardFooter.vue
new file mode 100644
index 0000000..6061ad4
--- /dev/null
+++ b/packages/ui/src/components/card/CardFooter.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CardFooterProps {
+    class?: string
+}
+
+const props = defineProps<CardFooterProps>()
+
+const classes = computed(() =>
+    cn('flex items-center pt-4 border-t-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/card/CardHeader.vue b/packages/ui/src/components/card/CardHeader.vue
new file mode 100644
index 0000000..f80a981
--- /dev/null
+++ b/packages/ui/src/components/card/CardHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CardHeaderProps {
+    class?: string
+}
+
+const props = defineProps<CardHeaderProps>()
+
+const classes = computed(() =>
+    cn('flex flex-col space-y-1.5 pb-4', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/card/CardTitle.vue b/packages/ui/src/components/card/CardTitle.vue
new file mode 100644
index 0000000..3eae7f1
--- /dev/null
+++ b/packages/ui/src/components/card/CardTitle.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CardTitleProps {
+    class?: string
+}
+
+const props = defineProps<CardTitleProps>()
+
+const classes = computed(() =>
+    cn('text-2xl font-black tracking-tight leading-none', props.class)
+)
+</script>
+
+<template>
+    <h3 :class="classes">
+        <slot />
+    </h3>
+</template>
diff --git a/packages/ui/src/components/card/card-variants.ts b/packages/ui/src/components/card/card-variants.ts
new file mode 100644
index 0000000..164e739
--- /dev/null
+++ b/packages/ui/src/components/card/card-variants.ts
@@ -0,0 +1,35 @@
+import { cva } from 'class-variance-authority'
+
+export const cardVariants = cva(
+    [
+        'border-3 border-brutal',
+        'bg-brutal-bg text-brutal-fg',
+        'transition-all duration-150',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'shadow-brutal',
+                elevated: 'shadow-brutal-lg',
+                flat: 'shadow-none',
+                interactive: [
+                    'shadow-brutal',
+                    'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
+                    'cursor-pointer',
+                ],
+                primary: 'shadow-brutal-primary border-[var(--brutal-primary)]',
+                secondary: 'shadow-brutal-secondary border-[var(--brutal-secondary)]',
+            },
+            padding: {
+                none: 'p-0',
+                sm: 'p-3',
+                default: 'p-5',
+                lg: 'p-8',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            padding: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/card/card.test.ts b/packages/ui/src/components/card/card.test.ts
new file mode 100644
index 0000000..fdb034f
--- /dev/null
+++ b/packages/ui/src/components/card/card.test.ts
@@ -0,0 +1,153 @@
+import { mount } from '@vue/test-utils'
+import Card from './Card.vue'
+import CardHeader from './CardHeader.vue'
+import CardTitle from './CardTitle.vue'
+import CardDescription from './CardDescription.vue'
+import CardContent from './CardContent.vue'
+import CardFooter from './CardFooter.vue'
+
+describe('Card', () => {
+    it('renders with default variant and padding', () => {
+        const wrapper = mount(Card)
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('shadow-brutal')
+        expect(wrapper.classes()).toContain('p-5')
+    })
+
+    it('applies variant classes', async () => {
+        const variants = ['default', 'elevated', 'flat', 'interactive', 'primary', 'secondary'] as const
+
+        for (const variant of variants) {
+            const wrapper = mount(Card, { props: { variant } })
+
+            if (variant === 'default') {
+                expect(wrapper.classes()).toContain('shadow-brutal')
+            }
+            if (variant === 'elevated') {
+                expect(wrapper.classes()).toContain('shadow-brutal-lg')
+            }
+            if (variant === 'flat') {
+                expect(wrapper.classes()).toContain('shadow-none')
+            }
+            if (variant === 'interactive') {
+                expect(wrapper.classes()).toContain('shadow-brutal')
+                expect(wrapper.classes()).toContain('cursor-pointer')
+            }
+            if (variant === 'primary') {
+                expect(wrapper.classes()).toContain('shadow-brutal-primary')
+                expect(wrapper.classes()).toContain('border-[var(--brutal-primary)]')
+            }
+            if (variant === 'secondary') {
+                expect(wrapper.classes()).toContain('shadow-brutal-secondary')
+                expect(wrapper.classes()).toContain('border-[var(--brutal-secondary)]')
+            }
+        }
+    })
+
+    it('applies padding classes', () => {
+        const paddings = ['none', 'sm', 'default', 'lg'] as const
+        const expected = ['p-0', 'p-3', 'p-5', 'p-8']
+
+        paddings.forEach((padding, i) => {
+            const wrapper = mount(Card, { props: { padding } })
+            expect(wrapper.classes()).toContain(expected[i])
+        })
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Card, {
+            slots: { default: '<p>Card content</p>' },
+        })
+        expect(wrapper.text()).toBe('Card content')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Card, { props: { class: 'my-custom' } })
+        expect(wrapper.classes()).toContain('my-custom')
+    })
+})
+
+describe('CardHeader', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(CardHeader, {
+            slots: { default: '<span>Header</span>' },
+        })
+        expect(wrapper.text()).toBe('Header')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CardHeader, { props: { class: 'my-header' } })
+        expect(wrapper.classes()).toContain('my-header')
+    })
+})
+
+describe('CardTitle', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(CardTitle, {
+            slots: { default: 'Title' },
+        })
+        expect(wrapper.text()).toBe('Title')
+    })
+
+    it('renders h3 element', () => {
+        const wrapper = mount(CardTitle, {
+            slots: { default: 'Title' },
+        })
+        expect(wrapper.element.tagName).toBe('H3')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CardTitle, { props: { class: 'my-title' } })
+        expect(wrapper.classes()).toContain('my-title')
+    })
+})
+
+describe('CardDescription', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(CardDescription, {
+            slots: { default: 'Description text' },
+        })
+        expect(wrapper.text()).toBe('Description text')
+    })
+
+    it('renders p element', () => {
+        const wrapper = mount(CardDescription, {
+            slots: { default: 'Desc' },
+        })
+        expect(wrapper.element.tagName).toBe('P')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CardDescription, { props: { class: 'my-desc' } })
+        expect(wrapper.classes()).toContain('my-desc')
+    })
+})
+
+describe('CardContent', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(CardContent, {
+            slots: { default: '<p>Body</p>' },
+        })
+        expect(wrapper.text()).toBe('Body')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CardContent, { props: { class: 'my-content' } })
+        expect(wrapper.classes()).toContain('my-content')
+    })
+})
+
+describe('CardFooter', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(CardFooter, {
+            slots: { default: '<button>Action</button>' },
+        })
+        expect(wrapper.text()).toBe('Action')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CardFooter, { props: { class: 'my-footer' } })
+        expect(wrapper.classes()).toContain('my-footer')
+    })
+})
diff --git a/packages/ui/src/components/carousel/Carousel.vue b/packages/ui/src/components/carousel/Carousel.vue
new file mode 100644
index 0000000..5f1f817
--- /dev/null
+++ b/packages/ui/src/components/carousel/Carousel.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import useEmblaCarousel from 'embla-carousel-vue';
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next';
+import { cn } from '../../lib/utils';
+import { carouselRootVariants, carouselButtonVariants } from './carousel-variants';
+import { useLocale } from '@/composables/useLocale';
+
+const { t } = useLocale();
+
+const DEFAULT_AUTOPLAY_DELAY = 3000
+
+interface CarouselProps {
+    loop?: boolean;
+    autoplay?: boolean;
+    autoplayDelay?: number;
+    showArrows?: boolean;
+    showDots?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'full' | 'auto';
+    class?: string;
+}
+
+const props = withDefaults(defineProps<CarouselProps>(), {
+    loop: false,
+    autoplay: false,
+    autoplayDelay: DEFAULT_AUTOPLAY_DELAY,
+    showArrows: true,
+    showDots: true,
+    size: 'auto',
+});
+
+const [emblaRef, emblaApi] = useEmblaCarousel({ loop: props.loop });
+
+const selectedIndex = ref(0);
+const scrollSnaps = ref<number[]>([]);
+let autoplayTimer: ReturnType<typeof setInterval> | null = null;
+
+const canScrollPrev = computed(() => props.loop || selectedIndex.value > 0);
+const canScrollNext = computed(() => props.loop || selectedIndex.value < scrollSnaps.value.length - 1);
+
+function onInit() {
+    if (!emblaApi.value) return;
+    scrollSnaps.value = emblaApi.value.scrollSnapList();
+    selectedIndex.value = emblaApi.value.selectedScrollSnap();
+}
+
+function onSelect() {
+    if (!emblaApi.value) return;
+    selectedIndex.value = emblaApi.value.selectedScrollSnap();
+}
+
+function scrollPrev() {
+    emblaApi.value?.scrollPrev();
+}
+
+function scrollNext() {
+    emblaApi.value?.scrollNext();
+}
+
+function scrollTo(index: number) {
+    emblaApi.value?.scrollTo(index);
+}
+
+function startAutoplay() {
+    stopAutoplay();
+    if (!props.autoplay) return;
+    autoplayTimer = setInterval(() => {
+        if (emblaApi.value) {
+            if (!props.loop && selectedIndex.value === scrollSnaps.value.length - 1) {
+                emblaApi.value.scrollTo(0);
+            } else {
+                emblaApi.value.scrollNext();
+            }
+        }
+    }, props.autoplayDelay);
+}
+
+function stopAutoplay() {
+    if (autoplayTimer) {
+        clearInterval(autoplayTimer);
+        autoplayTimer = null;
+    }
+}
+
+onMounted(() => {
+    if (!emblaApi.value) return;
+    emblaApi.value.on('init', onInit);
+    emblaApi.value.on('select', onSelect);
+    emblaApi.value.on('reInit', onInit);
+    onInit();
+    startAutoplay();
+});
+
+watch(() => props.autoplay, (val) => {
+    if (val) startAutoplay();
+    else stopAutoplay();
+});
+
+watch(() => props.loop, () => {
+    if (emblaApi.value) emblaApi.value.reInit({ loop: props.loop });
+});
+
+watch(() => props.autoplayDelay, () => {
+    if (props.autoplay) startAutoplay();
+});
+
+onUnmounted(() => {
+    stopAutoplay();
+});
+
+const rootClass = computed(() =>
+    cn(carouselRootVariants({ size: props.size }), props.class)
+);
+
+const prevButtonClass = computed(() =>
+    cn(carouselButtonVariants({ direction: 'prev' }))
+);
+
+const nextButtonClass = computed(() =>
+    cn(carouselButtonVariants({ direction: 'next' }))
+);
+
+const dotActiveClasses = cn(
+    'w-3 h-3 border-3 border-brutal rounded-brutal cursor-pointer transition-all duration-150',
+    'bg-brutal-primary shadow-brutal'
+)
+
+const dotInactiveClasses = cn(
+    'w-3 h-3 border-3 border-brutal rounded-brutal cursor-pointer transition-all duration-150',
+    'bg-brutal-bg hover:bg-brutal-muted'
+);
+</script>
+
+<template>
+    <div :class="rootClass" @mouseenter="stopAutoplay" @mouseleave="startAutoplay">
+        <div ref="emblaRef" class="overflow-hidden h-full">
+            <div class="flex h-full">
+                <slot />
+            </div>
+        </div>
+
+        <button
+            v-if="showArrows"
+            type="button"
+            :class="prevButtonClass"
+            :disabled="!canScrollPrev"
+            :aria-label="t('carousel.previousSlide')"
+            @click="scrollPrev"
+        >
+            <ChevronLeft class="w-5 h-5" />
+        </button>
+
+        <button
+            v-if="showArrows"
+            type="button"
+            :class="nextButtonClass"
+            :disabled="!canScrollNext"
+            :aria-label="t('carousel.nextSlide')"
+            @click="scrollNext"
+        >
+            <ChevronRight class="w-5 h-5" />
+        </button>
+
+        <div
+            v-if="showDots && scrollSnaps.length > 1"
+            class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2 z-10"
+        >
+            <button
+                v-for="(_, i) in scrollSnaps"
+                :key="i"
+                type="button"
+                :aria-label="t('carousel.goToSlide', { index: i + 1 })"
+                :class="i === selectedIndex ? dotActiveClasses : dotInactiveClasses"
+                @click="scrollTo(i)"
+            />
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/carousel/CarouselItem.vue b/packages/ui/src/components/carousel/CarouselItem.vue
new file mode 100644
index 0000000..71b1456
--- /dev/null
+++ b/packages/ui/src/components/carousel/CarouselItem.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../lib/utils';
+
+interface CarouselItemProps {
+    class?: string;
+}
+
+const props = withDefaults(defineProps<CarouselItemProps>(), {});
+
+const itemClass = computed(() =>
+    cn('flex-none w-full h-full', props.class)
+);
+</script>
+
+<template>
+    <div :class="itemClass">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/carousel/carousel-variants.ts b/packages/ui/src/components/carousel/carousel-variants.ts
new file mode 100644
index 0000000..c85001f
--- /dev/null
+++ b/packages/ui/src/components/carousel/carousel-variants.ts
@@ -0,0 +1,43 @@
+import { cva } from 'class-variance-authority';
+
+export const carouselRootVariants = cva(
+    'relative overflow-hidden border-3 border-brutal shadow-brutal rounded-brutal',
+    {
+        variants: {
+            size: {
+                sm: 'h-48',
+                md: 'h-64',
+                lg: 'h-96',
+                full: 'h-full',
+                auto: '',
+            },
+        },
+        defaultVariants: {
+            size: 'auto',
+        },
+    }
+);
+
+export const carouselButtonVariants = cva(
+    [
+        'absolute z-10 top-1/2 -translate-y-1/2',
+        'flex items-center justify-center',
+        'bg-brutal-bg border-3 border-brutal shadow-brutal rounded-brutal',
+        'w-10 h-10 cursor-pointer',
+        'transition-all duration-150',
+        'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-[calc(50%+2px)]',
+        'active:translate-y-[calc(-50%+var(--brutal-pressed-offset,2px))] active:shadow-none',
+        'disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-brutal',
+    ].join(' '),
+    {
+        variants: {
+            direction: {
+                prev: 'left-2',
+                next: 'right-2',
+            },
+        },
+        defaultVariants: {
+            direction: 'prev',
+        },
+    }
+);
diff --git a/packages/ui/src/components/carousel/carousel.test.ts b/packages/ui/src/components/carousel/carousel.test.ts
new file mode 100644
index 0000000..6a19fcd
--- /dev/null
+++ b/packages/ui/src/components/carousel/carousel.test.ts
@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import Carousel from './Carousel.vue'
+import CarouselItem from './CarouselItem.vue'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+vi.mock('embla-carousel-vue', () => ({
+    default: () => [ref(null), ref(null)],
+}))
+
+describe('Carousel', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(Carousel, { ...localeProvide })
+        expect(wrapper.find('[ref="emblaRef"]').exists() || wrapper.find('.overflow-hidden').exists()).toBe(true)
+        expect(wrapper.classes()).toContain('relative')
+        expect(wrapper.classes()).toContain('overflow-hidden')
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('shadow-brutal')
+        expect(wrapper.classes()).toContain('rounded-brutal')
+    })
+
+    it('applies size variant classes', async () => {
+        const sizes = [
+            { size: 'sm' as const, expectedClass: 'h-48' },
+            { size: 'md' as const, expectedClass: 'h-64' },
+            { size: 'lg' as const, expectedClass: 'h-96' },
+            { size: 'full' as const, expectedClass: 'h-full' },
+        ]
+
+        const wrapper = mount(Carousel, { ...localeProvide })
+        for (const { size, expectedClass } of sizes) {
+            await wrapper.setProps({ size })
+            expect(wrapper.classes()).toContain(expectedClass)
+        }
+    })
+
+    it('renders arrow buttons by default', () => {
+        const wrapper = mount(Carousel, { ...localeProvide })
+        const buttons = wrapper.findAll('button[aria-label]')
+        const arrowButtons = buttons.filter(b =>
+            b.attributes('aria-label') === 'Previous slide' ||
+            b.attributes('aria-label') === 'Next slide'
+        )
+        expect(arrowButtons.length).toBe(2)
+    })
+
+    it('hides arrows when showArrows=false', () => {
+        const wrapper = mount(Carousel, {
+            ...localeProvide,
+            props: { showArrows: false },
+        })
+        const buttons = wrapper.findAll('button[aria-label]')
+        const arrowButtons = buttons.filter(b =>
+            b.attributes('aria-label') === 'Previous slide' ||
+            b.attributes('aria-label') === 'Next slide'
+        )
+        expect(arrowButtons.length).toBe(0)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Carousel, {
+            ...localeProvide,
+            props: { class: 'custom-carousel' },
+        })
+        expect(wrapper.classes()).toContain('custom-carousel')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Carousel, {
+            ...localeProvide,
+            slots: {
+                default: '<div class="slide-content">Slide 1</div>',
+            },
+        })
+        expect(wrapper.find('.slide-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Slide 1')
+    })
+})
+
+describe('CarouselItem', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(CarouselItem)
+        expect(wrapper.classes()).toContain('flex-none')
+        expect(wrapper.classes()).toContain('w-full')
+        expect(wrapper.classes()).toContain('h-full')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CarouselItem, {
+            props: { class: 'custom-item' },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+        expect(wrapper.classes()).toContain('flex-none')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(CarouselItem, {
+            slots: { default: 'Item content' },
+        })
+        expect(wrapper.text()).toBe('Item content')
+    })
+})
diff --git a/packages/ui/src/components/carousel/index.ts b/packages/ui/src/components/carousel/index.ts
new file mode 100644
index 0000000..ba94e73
--- /dev/null
+++ b/packages/ui/src/components/carousel/index.ts
@@ -0,0 +1,2 @@
+export { default as Carousel } from './Carousel.vue';
+export { default as CarouselItem } from './CarouselItem.vue';
diff --git a/packages/ui/src/components/chart-section/ChartSection.vue b/packages/ui/src/components/chart-section/ChartSection.vue
new file mode 100644
index 0000000..ff53c27
--- /dev/null
+++ b/packages/ui/src/components/chart-section/ChartSection.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TabsRoot } from 'reka-ui'
+import { BarChart3, TrendingUp, PieChart } from 'lucide-vue-next'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import SketchyChart from '../sketchy-chart/SketchyChart.vue'
+import Card from '../card/Card.vue'
+import TabsList from '../tabs/TabsList.vue'
+import TabsTrigger from '../tabs/TabsTrigger.vue'
+import TabsContent from '../tabs/TabsContent.vue'
+
+export interface ChartDataPoint {
+    label: string
+    value: number
+}
+
+interface ChartSectionProps {
+    title?: string
+    subtitle?: string
+    chartType?: 'bar' | 'line' | 'pie'
+    data?: ChartDataPoint[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<ChartSectionProps>(), {
+    title: undefined,
+    subtitle: undefined,
+    chartType: 'bar',
+    data: () => [],
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('chartSection.defaultTitle'))
+const resolvedSubtitle = computed(() => props.subtitle ?? t('chartSection.defaultSubtitle'))
+const resolvedBar = computed(() => t('chartSection.bar'))
+const resolvedLine = computed(() => t('chartSection.line'))
+const resolvedPie = computed(() => t('chartSection.pie'))
+
+const activeTab = ref<string>(props.chartType === 'pie' ? 'bar' : props.chartType)
+
+const rootClasses = computed(() => cn('w-full max-w-4xl mx-auto', props.class))
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header">
+            <div class="mb-6">
+                <h2 class="text-3xl font-black tracking-tight">
+                    {{ resolvedTitle }}
+                </h2>
+                <p v-if="resolvedSubtitle" class="mt-2 text-brutal-muted-foreground font-medium">
+                    {{ resolvedSubtitle }}
+                </p>
+            </div>
+        </slot>
+
+        <slot>
+            <TabsRoot v-model="activeTab" :default-value="chartType">
+                <TabsList class="w-full">
+                    <TabsTrigger value="bar">
+                        <BarChart3 class="w-4 h-4 mr-2" />
+                        {{ resolvedBar }}
+                    </TabsTrigger>
+                    <TabsTrigger value="line">
+                        <TrendingUp class="w-4 h-4 mr-2" />
+                        {{ resolvedLine }}
+                    </TabsTrigger>
+                    <TabsTrigger value="pie">
+                        <PieChart class="w-4 h-4 mr-2" />
+                        {{ resolvedPie }}
+                    </TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="bar">
+                    <Card variant="flat" class="p-4">
+                        <SketchyChart
+                            type="bar"
+                            :data="data"
+                        />
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="line">
+                    <Card variant="flat" class="p-4">
+                        <SketchyChart
+                            type="line"
+                            :data="data"
+                        />
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="pie">
+                    <Card variant="flat" class="p-4">
+                        <SketchyChart
+                            type="pie"
+                            :data="data"
+                        />
+                    </Card>
+                </TabsContent>
+            </TabsRoot>
+        </slot>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/chart-section/chart-section.test.ts b/packages/ui/src/components/chart-section/chart-section.test.ts
new file mode 100644
index 0000000..167417e
--- /dev/null
+++ b/packages/ui/src/components/chart-section/chart-section.test.ts
@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import ChartSection from './ChartSection.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockData = [
+    { label: 'Jan', value: 40 },
+    { label: 'Feb', value: 65 },
+    { label: 'Mar', value: 30 },
+    { label: 'Apr', value: 85 },
+    { label: 'May', value: 55 },
+]
+
+describe('ChartSection', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(ChartSection, { ...localeProvide })
+        expect(wrapper.find('h2').exists()).toBe(true)
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(ChartSection, {
+            props: { title: 'Revenue Overview' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').text()).toBe('Revenue Overview')
+    })
+
+    it('renders subtitle when provided', () => {
+        const wrapper = mount(ChartSection, {
+            props: { subtitle: 'Monthly revenue breakdown' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Monthly revenue breakdown')
+    })
+
+    it('renders chart type tabs', () => {
+        const wrapper = mount(ChartSection, { ...localeProvide })
+        expect(wrapper.text()).toContain('Bar')
+        expect(wrapper.text()).toContain('Line')
+        expect(wrapper.text()).toContain('Pie')
+    })
+
+    it('renders SketchyChart with data', () => {
+        const wrapper = mount(ChartSection, {
+            props: { data: mockData },
+            ...localeProvide,
+        })
+        const svg = wrapper.find('svg')
+        expect(svg.exists()).toBe(true)
+    })
+
+    it('renders with empty data array', () => {
+        const wrapper = mount(ChartSection, {
+            props: { data: [] },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(ChartSection, {
+            props: { class: 'my-chart' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-chart')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(ChartSection, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(ChartSection, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(ChartSection, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+
+    it('renders chart inside a Card', () => {
+        const wrapper = mount(ChartSection, {
+            props: { data: mockData },
+            ...localeProvide,
+        })
+        const card = wrapper.findComponent({ name: 'Card' })
+        expect(card.exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/chat-bubble/ChatBubble.vue b/packages/ui/src/components/chat-bubble/ChatBubble.vue
new file mode 100644
index 0000000..02b088b
--- /dev/null
+++ b/packages/ui/src/components/chat-bubble/ChatBubble.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '../../lib/utils';
+import { chatBubbleVariants, chatAvatarVariants } from './chat-bubble-variants';
+
+interface ChatMessage {
+    id: string;
+    content: string;
+    variant?: 'sent' | 'received' | 'system';
+    avatar?: string;
+    name?: string;
+    timestamp?: string;
+}
+
+interface ChatBubbleProps {
+    message: ChatMessage;
+    showAvatar?: boolean;
+    class?: string;
+}
+
+const props = withDefaults(defineProps<ChatBubbleProps>(), {
+    showAvatar: true,
+});
+
+const isSent = computed(() => props.message.variant === 'sent');
+const isSystem = computed(() => props.message.variant === 'system');
+
+const wrapperClass = computed(() =>
+    cn(
+        'flex gap-2 w-full',
+        isSent.value ? 'flex-row-reverse' : 'flex-row',
+        isSystem.value ? 'justify-center' : '',
+    )
+);
+
+const bubbleClass = computed(() =>
+    cn(chatBubbleVariants({ variant: props.message.variant ?? 'received' }), props.class)
+);
+
+const avatarClass = computed(() => cn(chatAvatarVariants()));
+
+const initials = computed(() => {
+    const name = props.message.name ?? '?';
+    return name.slice(0, 2).toUpperCase();
+});
+</script>
+
+<template>
+    <div :class="wrapperClass">
+        <!-- Avatar -->
+        <div
+            v-if="showAvatar && !isSystem"
+            :class="avatarClass"
+            :title="message.name"
+        >
+            <img
+                v-if="message.avatar"
+                :src="message.avatar"
+                :alt="message.name"
+                class="w-full h-full object-cover rounded-brutal"
+            />
+            <span v-else>{{ initials }}</span>
+        </div>
+
+        <!-- Content -->
+        <div :class="cn('flex flex-col gap-1', isSent ? 'items-end' : 'items-start')">
+            <span v-if="message.name && !isSystem" class="text-xs font-bold text-brutal-fg opacity-60 px-1">
+                {{ message.name }}
+            </span>
+            <div :class="bubbleClass">
+                <slot>{{ message.content }}</slot>
+            </div>
+            <span v-if="message.timestamp" class="text-xs opacity-40 font-medium px-1">
+                {{ message.timestamp }}
+            </span>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/chat-bubble/chat-bubble-variants.ts b/packages/ui/src/components/chat-bubble/chat-bubble-variants.ts
new file mode 100644
index 0000000..988a68a
--- /dev/null
+++ b/packages/ui/src/components/chat-bubble/chat-bubble-variants.ts
@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority';
+
+export const chatBubbleVariants = cva(
+    [
+        'relative max-w-[75%] px-4 py-2.5',
+        'border-3 border-brutal rounded-brutal',
+        'text-sm font-medium leading-relaxed',
+        'shadow-brutal',
+    ].join(' '),
+    {
+        variants: {
+            variant: {
+                sent: 'bg-brutal-primary text-brutal-fg ml-auto',
+                received: 'bg-brutal-bg text-brutal-fg mr-auto',
+                system: 'bg-brutal-muted text-brutal-fg mx-auto text-center text-xs italic border-dashed shadow-none',
+            },
+        },
+        defaultVariants: {
+            variant: 'received',
+        },
+    }
+);
+
+export const chatAvatarVariants = cva(
+    [
+        'flex-shrink-0 w-8 h-8 rounded-brutal border-3 border-brutal',
+        'flex items-center justify-center font-bold text-xs',
+        'bg-brutal-secondary text-brutal-fg',
+    ].join(' ')
+);
diff --git a/packages/ui/src/components/chat-bubble/chat-bubble.test.ts b/packages/ui/src/components/chat-bubble/chat-bubble.test.ts
new file mode 100644
index 0000000..05b4597
--- /dev/null
+++ b/packages/ui/src/components/chat-bubble/chat-bubble.test.ts
@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+import ChatBubble from './ChatBubble.vue'
+
+describe('ChatBubble', () => {
+    it('renders received message by default', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '1', content: 'Hello there' },
+            },
+        })
+        expect(wrapper.text()).toContain('Hello there')
+        const bubble = wrapper.find('.px-4')
+        expect(bubble.classes()).toContain('bg-brutal-bg')
+    })
+
+    it('renders sent message with primary bg', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '2', content: 'Hi back', variant: 'sent' },
+            },
+        })
+        const bubble = wrapper.find('.px-4')
+        expect(bubble.classes()).toContain('bg-brutal-primary')
+    })
+
+    it('renders system message', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '3', content: 'User joined', variant: 'system' },
+            },
+        })
+        const bubble = wrapper.find('.px-4')
+        expect(bubble.classes()).toContain('bg-brutal-muted')
+        expect(bubble.classes()).toContain('border-dashed')
+        expect(bubble.classes()).toContain('shadow-none')
+    })
+
+    it('shows avatar when showAvatar is true', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '4', content: 'Hey', name: 'Alice' },
+                showAvatar: true,
+            },
+        })
+        const avatar = wrapper.find('[title="Alice"]')
+        expect(avatar.exists()).toBe(true)
+    })
+
+    it('hides avatar when showAvatar is false', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '5', content: 'Hey', name: 'Alice' },
+                showAvatar: false,
+            },
+        })
+        const avatar = wrapper.find('[title="Alice"]')
+        expect(avatar.exists()).toBe(false)
+    })
+
+    it('shows name when provided', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '6', content: 'Hello', name: 'Bob' },
+            },
+        })
+        expect(wrapper.text()).toContain('Bob')
+    })
+
+    it('shows timestamp when provided', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '7', content: 'Hello', timestamp: '10:30 AM' },
+            },
+        })
+        expect(wrapper.text()).toContain('10:30 AM')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '8', content: 'Hello' },
+                class: 'my-bubble',
+            },
+        })
+        const bubble = wrapper.find('.px-4')
+        expect(bubble.classes()).toContain('my-bubble')
+    })
+
+    it('avatar shows initials when no image', () => {
+        const wrapper = mount(ChatBubble, {
+            props: {
+                message: { id: '9', content: 'Hello', name: 'Alice' },
+            },
+        })
+        const avatar = wrapper.find('[title="Alice"]')
+        expect(avatar.text()).toBe('AL')
+    })
+})
diff --git a/packages/ui/src/components/chat-bubble/index.ts b/packages/ui/src/components/chat-bubble/index.ts
new file mode 100644
index 0000000..d2e2037
--- /dev/null
+++ b/packages/ui/src/components/chat-bubble/index.ts
@@ -0,0 +1 @@
+export { default as ChatBubble } from './ChatBubble.vue';
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
deleted file mode 100644
index 87f7239..0000000
--- a/packages/ui/src/components/checkbox.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-const Checkbox = React.forwardRef<
-    React.ElementRef<typeof CheckboxPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <CheckboxPrimitive.Root
-        ref={ref}
-        className={cn(
-            'peer h-6 w-6 shrink-0',
-            'border-3 border-brutal',
-            'bg-white dark:bg-gray-800',
-            'flex items-center justify-center',
-            'transition-all duration-150',
-            'shadow-brutal-sm',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            'data-[state=checked]:bg-[#7FB069]',
-            className
-        )}
-        {...props}
-    >
-        <CheckboxPrimitive.Indicator
-            className={cn('flex items-center justify-center text-current')}
-        >
-            <Check className="h-4 w-4 stroke-[3] text-black dark:text-white" />
-        </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/packages/ui/src/components/checkbox/Checkbox.vue b/packages/ui/src/components/checkbox/Checkbox.vue
new file mode 100644
index 0000000..3bb0ec4
--- /dev/null
+++ b/packages/ui/src/components/checkbox/Checkbox.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { CheckboxRoot, CheckboxIndicator } from 'reka-ui'
+import { Check } from 'lucide-vue-next'
+
+interface CheckboxProps {
+    class?: string
+    checked?: boolean
+    defaultChecked?: boolean
+    disabled?: boolean
+}
+
+const props = defineProps<CheckboxProps>()
+
+const emit = defineEmits<{
+    'update:checked': [value: boolean]
+}>()
+
+const classes = computed(() =>
+    cn(
+        'peer h-6 w-6 shrink-0',
+        'border-3 border-brutal',
+        'bg-brutal-bg',
+        'flex items-center justify-center',
+        'transition-all duration-150',
+        'shadow-brutal-sm',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:bg-brutal-success',
+        props.class
+    )
+)
+
+const checkClasses = computed(() =>
+    cn('h-4 w-4 stroke-[3] text-brutal-fg')
+)
+</script>
+
+<template>
+    <CheckboxRoot
+        :class="classes"
+        :checked="checked"
+        :default-checked="defaultChecked"
+        :disabled="disabled"
+        @update:checked="emit('update:checked', $event)"
+    >
+        <CheckboxIndicator class="flex items-center justify-center text-current">
+            <Check :class="checkClasses" />
+        </CheckboxIndicator>
+    </CheckboxRoot>
+</template>
diff --git a/packages/ui/src/components/checkbox/checkbox.test.ts b/packages/ui/src/components/checkbox/checkbox.test.ts
new file mode 100644
index 0000000..27e8437
--- /dev/null
+++ b/packages/ui/src/components/checkbox/checkbox.test.ts
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import Checkbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Checkbox, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="checkbox"]').exists()).toBe(true)
+    })
+
+    it('has checkbox role', () => {
+        const wrapper = mount(Checkbox, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="checkbox"]').exists()).toBe(true)
+    })
+
+    it('is disabled when disabled=true', () => {
+        const wrapper = mount(Checkbox, {
+            props: { disabled: true },
+            attachTo: document.body,
+        })
+        const el = wrapper.find('[role="checkbox"]')
+        expect(el.attributes('disabled')).toBeDefined()
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Checkbox, {
+            props: { class: 'custom-class' },
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="checkbox"]').classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/code-block/CodeBlock.vue b/packages/ui/src/components/code-block/CodeBlock.vue
new file mode 100644
index 0000000..ea3bd07
--- /dev/null
+++ b/packages/ui/src/components/code-block/CodeBlock.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import CopyToClipboard from '../copy-to-clipboard/CopyToClipboard.vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { codeBlockRootVariants, codeBlockHeaderVariants, codeBlockLanguageVariants, codeBlockBodyVariants, codeBlockLineNumbersVariants, codeBlockCopyButtonVariants } from './code-block-variants'
+
+interface CodeBlockProps {
+    code: string
+    language?: string
+    filename?: string
+    showLineNumbers?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<CodeBlockProps>(), {
+    language: 'plaintext',
+    filename: '',
+    showLineNumbers: false,
+    class: '',
+})
+
+const lines = computed(() => {
+    return props.code.split('\n')
+})
+
+const { t } = useLocale()
+
+const rootClasses = computed(() =>
+    cn(codeBlockRootVariants(), props.class)
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div :class="codeBlockHeaderVariants()">
+            <div class="flex items-center gap-2">
+                <span :class="codeBlockLanguageVariants()">
+                    {{ language }}
+                </span>
+                <span v-if="filename" class="text-brutal-fg/80 font-black">
+                    {{ filename }}
+                </span>
+            </div>
+            <CopyToClipboard
+                :text="code"
+                :class="codeBlockCopyButtonVariants()"
+            >
+                <template #default="{ copied }">
+                    <span>{{ copied ? t('codeBlock.copied') : t('codeBlock.copy') }}</span>
+                </template>
+            </CopyToClipboard>
+        </div>
+
+        <div :class="codeBlockBodyVariants()">
+            <div
+                v-if="showLineNumbers"
+                :class="codeBlockLineNumbersVariants()"
+            >
+                <span v-for="(_, i) in lines" :key="i">{{ i + 1 }}</span>
+            </div>
+
+            <pre class="flex-1 min-w-0 m-0"><code class="block whitespace-pre font-bold"><slot v-if="$slots.default"></slot><template v-else>{{ code }}</template></code></pre>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/code-block/code-block-variants.ts b/packages/ui/src/components/code-block/code-block-variants.ts
new file mode 100644
index 0000000..6bdcf6e
--- /dev/null
+++ b/packages/ui/src/components/code-block/code-block-variants.ts
@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority'
+
+export const codeBlockRootVariants = cva(
+    'border-3 border-brutal bg-brutal-bg text-brutal-fg rounded-brutal shadow-brutal overflow-hidden'
+)
+
+export const codeBlockHeaderVariants = cva(
+    'bg-brutal-muted border-b-3 border-brutal flex justify-between items-center px-4 py-2 text-xs font-black select-none'
+)
+
+export const codeBlockLanguageVariants = cva(
+    'bg-brutal-accent text-brutal-fg border-3 border-brutal rounded-brutal px-1.5 py-0.5 text-[10px] uppercase font-black tracking-wider'
+)
+
+export const codeBlockBodyVariants = cva(
+    'relative flex items-stretch p-4 overflow-x-auto text-sm font-mono bg-brutal-bg'
+)
+
+export const codeBlockLineNumbersVariants = cva(
+    'flex flex-col text-right text-brutal-fg/40 select-none pr-4 mr-4 border-r-3 border-brutal font-bold'
+)
+
+export const codeBlockCopyButtonVariants = cva(
+    'h-7 px-3 text-xs border-2 shadow-brutal-sm active:translate-y-[1px] bg-brutal-bg hover:bg-brutal-muted'
+)
diff --git a/packages/ui/src/components/code-block/code-block.test.ts b/packages/ui/src/components/code-block/code-block.test.ts
new file mode 100644
index 0000000..c6056bd
--- /dev/null
+++ b/packages/ui/src/components/code-block/code-block.test.ts
@@ -0,0 +1,108 @@
+import { mount } from '@vue/test-utils'
+import CodeBlock from './CodeBlock.vue'
+
+describe('CodeBlock', () => {
+    it('renders code content', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'console.log("hello")' },
+        })
+        expect(wrapper.find('pre').exists()).toBe(true)
+        expect(wrapper.find('code').exists()).toBe(true)
+        expect(wrapper.find('code').text()).toBe('console.log("hello")')
+    })
+
+    it('renders multiline code content', () => {
+        const code = 'line1\nline2\nline3'
+        const wrapper = mount(CodeBlock, {
+            props: { code },
+        })
+        expect(wrapper.find('code').text()).toBe(code)
+    })
+
+    it('applies default root classes', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'test' },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('shadow-brutal')
+        expect(classes).toContain('rounded-brutal')
+    })
+
+    it('shows language badge with default plaintext', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'test' },
+        })
+        const badge = wrapper.find('[class*="bg-brutal-accent"]')
+        expect(badge.exists()).toBe(true)
+        expect(badge.text()).toBe('plaintext')
+    })
+
+    it('shows language badge with custom language', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'test', language: 'typescript' },
+        })
+        const badge = wrapper.find('[class*="bg-brutal-accent"]')
+        expect(badge.text()).toBe('typescript')
+    })
+
+    it('does not show filename by default', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'test' },
+        })
+        expect(wrapper.text()).not.toContain('index.ts')
+    })
+
+    it('shows filename when provided', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'test', filename: 'index.ts' },
+        })
+        expect(wrapper.text()).toContain('index.ts')
+    })
+
+    it('does not show line numbers by default', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'line1\nline2\nline3' },
+        })
+        const lineNumbersCol = wrapper.find('[class*="border-r-3"]')
+        expect(lineNumbersCol.exists()).toBe(false)
+    })
+
+    it('shows line numbers when enabled', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'line1\nline2\nline3', showLineNumbers: true },
+        })
+        const lineNumbersCol = wrapper.find('[class*="border-r-3"]')
+        expect(lineNumbersCol.exists()).toBe(true)
+        const lineSpans = lineNumbersCol.findAll('span')
+        expect(lineSpans).toHaveLength(3)
+        expect(lineSpans[0].text()).toBe('1')
+        expect(lineSpans[1].text()).toBe('2')
+        expect(lineSpans[2].text()).toBe('3')
+    })
+
+    it('renders copy button', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'test' },
+        })
+        const button = wrapper.find('button')
+        expect(button.exists()).toBe(true)
+    })
+
+    it('renders slot content when provided', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'fallback' },
+            slots: { default: '<span class="slot-content">Custom Code</span>' },
+        })
+        expect(wrapper.find('.slot-content').exists()).toBe(true)
+        expect(wrapper.find('.slot-content').text()).toBe('Custom Code')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(CodeBlock, {
+            props: { code: 'test', class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx
deleted file mode 100644
index d744d02..0000000
--- a/packages/ui/src/components/combobox.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
-
-import { cn } from '../lib/utils';
-import { Button } from './button';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from './command';
-
-export interface ComboboxOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-
-export interface ComboboxProps {
-    options: ComboboxOption[];
-    value?: string;
-    onValueChange?: (value: string) => void;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyText?: string;
-    className?: string;
-    disabled?: boolean;
-}
-
-function Combobox({
-    options,
-    value,
-    onValueChange,
-    placeholder = 'Select option...',
-    searchPlaceholder = 'Search...',
-    emptyText = 'No results found.',
-    className,
-    disabled = false,
-}: ComboboxProps) {
-    const [open, setOpen] = React.useState(false);
-
-    const selectedOption = options.find((option) => option.value === value);
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={open}
-                    disabled={disabled}
-                    className={cn(
-                        'w-full justify-between font-semibold',
-                        !value && 'text-gray-500',
-                        className
-                    )}
-                >
-                    {selectedOption ? selectedOption.label : placeholder}
-                    <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
-                <Command>
-                    <CommandInput placeholder={searchPlaceholder} />
-                    <CommandList>
-                        <CommandEmpty>{emptyText}</CommandEmpty>
-                        <CommandGroup>
-                            {options.map((option) => (
-                                <CommandItem
-                                    key={option.value}
-                                    value={option.value}
-                                    disabled={option.disabled}
-                                    onSelect={(currentValue) => {
-                                        onValueChange?.(currentValue === value ? '' : currentValue);
-                                        setOpen(false);
-                                    }}
-                                >
-                                    <CheckIcon
-                                        className={cn(
-                                            'mr-2 h-4 w-4 stroke-[3]',
-                                            value === option.value ? 'opacity-100' : 'opacity-0'
-                                        )}
-                                    />
-                                    {option.label}
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
-Combobox.displayName = 'Combobox';
-
-export interface ComboboxMultiProps {
-    options: ComboboxOption[];
-    value?: string[];
-    onValueChange?: (value: string[]) => void;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyText?: string;
-    className?: string;
-    disabled?: boolean;
-    maxDisplay?: number;
-}
-
-function ComboboxMulti({
-    options,
-    value = [],
-    onValueChange,
-    placeholder = 'Select options...',
-    searchPlaceholder = 'Search...',
-    emptyText = 'No results found.',
-    className,
-    disabled = false,
-    maxDisplay = 3,
-}: ComboboxMultiProps) {
-    const [open, setOpen] = React.useState(false);
-
-    const selectedOptions = options.filter((option) => value.includes(option.value));
-
-    const displayText = React.useMemo(() => {
-        if (selectedOptions.length === 0) return placeholder;
-        if (selectedOptions.length <= maxDisplay) {
-            return selectedOptions.map((o) => o.label).join(', ');
-        }
-        return `${selectedOptions.length} selected`;
-    }, [selectedOptions, placeholder, maxDisplay]);
-
-    const handleSelect = (optionValue: string) => {
-        const newValue = value.includes(optionValue)
-            ? value.filter((v) => v !== optionValue)
-            : [...value, optionValue];
-        onValueChange?.(newValue);
-    };
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={open}
-                    disabled={disabled}
-                    className={cn(
-                        'w-full justify-between font-semibold',
-                        selectedOptions.length === 0 && 'text-gray-500',
-                        className
-                    )}
-                >
-                    <span className="truncate">{displayText}</span>
-                    <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
-                <Command>
-                    <CommandInput placeholder={searchPlaceholder} />
-                    <CommandList>
-                        <CommandEmpty>{emptyText}</CommandEmpty>
-                        <CommandGroup>
-                            {options.map((option) => (
-                                <CommandItem
-                                    key={option.value}
-                                    value={option.value}
-                                    disabled={option.disabled}
-                                    onSelect={() => handleSelect(option.value)}
-                                >
-                                    <div
-                                        className={cn(
-                                            'mr-2 flex h-4 w-4 items-center justify-center',
-                                            'border-2 border-brutal',
-                                            value.includes(option.value)
-                                                ? 'bg-[#4ECDC4]'
-                                                : 'bg-white dark:bg-gray-900'
-                                        )}
-                                    >
-                                        {value.includes(option.value) && (
-                                            <CheckIcon className="h-3 w-3 stroke-[3] text-black" />
-                                        )}
-                                    </div>
-                                    {option.label}
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}
-ComboboxMulti.displayName = 'ComboboxMulti';
-
-export { Combobox, ComboboxMulti };
diff --git a/packages/ui/src/components/combobox/Combobox.vue b/packages/ui/src/components/combobox/Combobox.vue
new file mode 100644
index 0000000..aad233a
--- /dev/null
+++ b/packages/ui/src/components/combobox/Combobox.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from '../button/button-variants'
+import { PopoverRoot, PopoverTrigger } from 'reka-ui'
+import PopoverContent from '../popover/PopoverContent.vue'
+import Command from '../command/Command.vue'
+import CommandInput from '../command/CommandInput.vue'
+import CommandList from '../command/CommandList.vue'
+import CommandEmpty from '../command/CommandEmpty.vue'
+import CommandGroup from '../command/CommandGroup.vue'
+import CommandItem from '../command/CommandItem.vue'
+import { useLocale } from '@/composables/useLocale'
+
+import { type ComboboxOption } from './combobox-types'
+
+interface ComboboxProps {
+    options: ComboboxOption[]
+    modelValue?: string
+    placeholder?: string
+    searchPlaceholder?: string
+    emptyText?: string
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<ComboboxProps>(), {
+    modelValue: undefined,
+    placeholder: undefined,
+    searchPlaceholder: undefined,
+    emptyText: undefined,
+    disabled: false,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('combobox.placeholder'))
+const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t('combobox.searchPlaceholder'))
+const resolvedEmptyText = computed(() => props.emptyText ?? t('combobox.emptyText'))
+
+const emit = defineEmits<{ 'update:modelValue': [value: string | undefined] }>()
+
+const open = ref(false)
+const searchQuery = ref('')
+
+const selectedOption = computed(() =>
+    props.options.find((option) => option.value === props.modelValue)
+)
+
+const filteredOptions = computed(() => {
+    if (!searchQuery.value) return props.options
+    const query = searchQuery.value.toLowerCase()
+    return props.options.filter((option) =>
+        option.label.toLowerCase().includes(query)
+    )
+})
+
+const triggerClasses = computed(() =>
+    cn(
+        buttonVariants({ variant: 'outline' }),
+        'w-full justify-between font-semibold',
+        !props.modelValue && 'text-brutal-muted-foreground',
+        props.class
+    )
+)
+
+function handleSelect(value: string) {
+    emit('update:modelValue', value === props.modelValue ? undefined : value)
+    open.value = false
+    searchQuery.value = ''
+}
+
+const checkSelectedClasses = cn('mr-2 h-4 w-4 stroke-[3]', 'opacity-100')
+const checkUnselectedClasses = cn('mr-2 h-4 w-4 stroke-[3]', 'opacity-0')
+</script>
+
+<template>
+    <PopoverRoot v-model:open="open">
+        <PopoverTrigger as-child :disabled="disabled">
+            <button
+                type="button"
+                role="combobox"
+                :aria-expanded="open"
+                aria-haspopup="listbox"
+                :class="triggerClasses"
+            >
+                <span>{{ selectedOption ? selectedOption.label : resolvedPlaceholder }}</span>
+                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]" />
+            </button>
+        </PopoverTrigger>
+        <PopoverContent class="w-[var(--reka-popover-trigger-width)] p-0" align="start">
+            <Command>
+                <CommandInput v-model="searchQuery" :placeholder="resolvedSearchPlaceholder" />
+                <CommandList>
+                    <CommandEmpty>{{ resolvedEmptyText }}</CommandEmpty>
+                    <CommandGroup>
+                        <CommandItem
+                            v-for="option in filteredOptions"
+                            :key="option.value"
+                            :value="option.value"
+                            :disabled="option.disabled"
+                            @select="handleSelect"
+                        >
+                            <Check
+                                :class="props.modelValue === option.value ? checkSelectedClasses : checkUnselectedClasses"
+                            />
+                            {{ option.label }}
+                        </CommandItem>
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </PopoverRoot>
+</template>
diff --git a/packages/ui/src/components/combobox/ComboboxMulti.vue b/packages/ui/src/components/combobox/ComboboxMulti.vue
new file mode 100644
index 0000000..31cec87
--- /dev/null
+++ b/packages/ui/src/components/combobox/ComboboxMulti.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from '../button/button-variants'
+import { PopoverRoot, PopoverTrigger } from 'reka-ui'
+import PopoverContent from '../popover/PopoverContent.vue'
+import Command from '../command/Command.vue'
+import CommandInput from '../command/CommandInput.vue'
+import CommandList from '../command/CommandList.vue'
+import CommandEmpty from '../command/CommandEmpty.vue'
+import CommandGroup from '../command/CommandGroup.vue'
+import CommandItem from '../command/CommandItem.vue'
+import { useLocale } from '@/composables/useLocale'
+import { type ComboboxOption } from './combobox-types'
+
+interface ComboboxMultiProps {
+    options: ComboboxOption[]
+    modelValue?: string[]
+    placeholder?: string
+    searchPlaceholder?: string
+    emptyText?: string
+    disabled?: boolean
+    maxDisplay?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<ComboboxMultiProps>(), {
+    modelValue: () => [],
+    placeholder: undefined,
+    searchPlaceholder: undefined,
+    emptyText: undefined,
+    disabled: false,
+    maxDisplay: 3,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('combobox.multiPlaceholder'))
+const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t('combobox.searchPlaceholder'))
+const resolvedEmptyText = computed(() => props.emptyText ?? t('combobox.emptyText'))
+
+const emit = defineEmits<{ 'update:modelValue': [value: string[]] }>()
+
+const open = ref(false)
+const searchQuery = ref('')
+
+const selectedOptions = computed(() =>
+    props.options.filter((option) => props.modelValue.includes(option.value))
+)
+
+const displayText = computed(() => {
+    if (selectedOptions.value.length === 0) return resolvedPlaceholder.value
+    if (selectedOptions.value.length <= props.maxDisplay) {
+        return selectedOptions.value.map((o) => o.label).join(', ')
+    }
+    return t('combobox.selectedCount', { count: selectedOptions.value.length })
+})
+
+const filteredOptions = computed(() => {
+    if (!searchQuery.value) return props.options
+    const query = searchQuery.value.toLowerCase()
+    return props.options.filter((option) =>
+        option.label.toLowerCase().includes(query)
+    )
+})
+
+const triggerClasses = computed(() =>
+    cn(
+        buttonVariants({ variant: 'outline' }),
+        'w-full justify-between font-semibold',
+        selectedOptions.value.length === 0 && 'text-brutal-muted-foreground',
+        props.class
+    )
+)
+
+function handleSelect(optionValue: string) {
+    const newValue = props.modelValue.includes(optionValue)
+        ? props.modelValue.filter((v) => v !== optionValue)
+        : [...props.modelValue, optionValue]
+    emit('update:modelValue', newValue)
+}
+
+const checkboxBaseClasses = cn('mr-2 flex h-4 w-4 items-center justify-center', 'border-3 border-brutal')
+const checkboxSelectedClasses = cn(checkboxBaseClasses, 'bg-brutal-secondary')
+const checkboxUnselectedClasses = cn(checkboxBaseClasses, 'bg-brutal-bg')
+</script>
+
+<template>
+    <PopoverRoot v-model:open="open">
+        <PopoverTrigger as-child :disabled="disabled">
+            <button
+                type="button"
+                role="combobox"
+                :aria-expanded="open"
+                :class="triggerClasses"
+            >
+                <span class="truncate">{{ displayText }}</span>
+                <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50 stroke-[3]" />
+            </button>
+        </PopoverTrigger>
+        <PopoverContent class="w-[var(--reka-popover-trigger-width)] p-0" align="start">
+            <Command>
+                <CommandInput v-model="searchQuery" :placeholder="resolvedSearchPlaceholder" />
+                <CommandList>
+                    <CommandEmpty>{{ resolvedEmptyText }}</CommandEmpty>
+                    <CommandGroup>
+                        <CommandItem
+                            v-for="option in filteredOptions"
+                            :key="option.value"
+                            :value="option.value"
+                            :disabled="option.disabled"
+                            @select="handleSelect"
+                        >
+                            <div
+                                :class="props.modelValue.includes(option.value) ? checkboxSelectedClasses : checkboxUnselectedClasses"
+                            >
+                                <Check v-if="props.modelValue.includes(option.value)" class="h-3 w-3 stroke-[3] text-brutal-fg" />
+                            </div>
+                            {{ option.label }}
+                        </CommandItem>
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </PopoverRoot>
+</template>
diff --git a/packages/ui/src/components/combobox/combobox-types.ts b/packages/ui/src/components/combobox/combobox-types.ts
new file mode 100644
index 0000000..20087b8
--- /dev/null
+++ b/packages/ui/src/components/combobox/combobox-types.ts
@@ -0,0 +1,5 @@
+export interface ComboboxOption {
+    value: string
+    label: string
+    disabled?: boolean
+}
diff --git a/packages/ui/src/components/combobox/combobox.test.ts b/packages/ui/src/components/combobox/combobox.test.ts
new file mode 100644
index 0000000..1b2bee6
--- /dev/null
+++ b/packages/ui/src/components/combobox/combobox.test.ts
@@ -0,0 +1,388 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Combobox from './Combobox.vue'
+import ComboboxMulti from './ComboboxMulti.vue'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+]
+
+let wrapper: ReturnType<typeof mount> | null = null
+
+afterEach(() => {
+    if (wrapper) {
+        wrapper.unmount()
+        wrapper = null
+    }
+    document.body.innerHTML = ''
+})
+
+async function openCombobox(w: ReturnType<typeof mount>) {
+    const trigger = w.find('[role="combobox"]')
+    await trigger.trigger('click')
+    await nextTick()
+    await nextTick()
+}
+
+describe('Combobox', () => {
+    it('renders with options prop', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options, class: 'custom-combobox' },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.classes()).toContain('custom-combobox')
+    })
+
+    it('shows placeholder text', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options, placeholder: 'Pick a fruit...' },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.text()).toContain('Pick a fruit...')
+    })
+
+    it('shows default placeholder text', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.text()).toContain('Select option...')
+    })
+
+    it('shows selected option label', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options, modelValue: 'banana' },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.text()).toContain('Banana')
+    })
+
+    it('emits update:modelValue when option selected', async () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        expect(items.length).toBe(options.length)
+        const firstItem = items[0] as HTMLElement
+        firstItem.click()
+        await nextTick()
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual(['apple'])
+    })
+
+    it('emits undefined when selecting same option again', async () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options, modelValue: 'apple' },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        const firstItem = items[0] as HTMLElement
+        firstItem.click()
+        await nextTick()
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual([undefined])
+    })
+
+    it('has aria-expanded attribute', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.attributes('aria-expanded')).toBeDefined()
+    })
+
+    it('is disabled when disabled prop is true', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options, disabled: true },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.attributes('disabled')).toBeDefined()
+    })
+
+    it('filters options by search query', async () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const input = document.body.querySelector('[data-slot="command-input"] input') as HTMLInputElement
+        expect(input).toBeTruthy()
+        input.value = 'ban'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        expect(items.length).toBe(1)
+        expect(items[0].textContent).toContain('Banana')
+    })
+
+    it('shows all options when search query is cleared', async () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const input = document.body.querySelector('[data-slot="command-input"] input') as HTMLInputElement
+        input.value = 'ban'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        input.value = ''
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        expect(items.length).toBe(options.length)
+    })
+
+    it('shows empty text when no options match search', async () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options, emptyText: 'Nothing found!' },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const input = document.body.querySelector('[data-slot="command-input"] input') as HTMLInputElement
+        input.value = 'xyz'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        expect(document.body.textContent).toContain('Nothing found!')
+    })
+
+    it('clears search query after selection', async () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const input = document.body.querySelector('[data-slot="command-input"] input') as HTMLInputElement
+        input.value = 'ban'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        const bananaItem = items[0] as HTMLElement
+        bananaItem.click()
+        await nextTick()
+        expect(input.value).toBe('')
+    })
+
+    it('applies muted foreground class when no value selected', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.classes()).toContain('text-brutal-muted-foreground')
+    })
+
+    it('does not apply muted foreground class when value is selected', () => {
+        wrapper = mount(Combobox, {
+            ...localeProvide,
+            props: { options, modelValue: 'apple' },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.classes()).not.toContain('text-brutal-muted-foreground')
+    })
+})
+
+describe('ComboboxMulti', () => {
+    it('renders with options prop', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, class: 'custom-multi' },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.classes()).toContain('custom-multi')
+    })
+
+    it('shows placeholder text when no selection', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, placeholder: 'Pick fruits...' },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.text()).toContain('Pick fruits...')
+    })
+
+    it('shows default placeholder text', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.text()).toContain('Select options...')
+    })
+
+    it('shows selected option labels', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, modelValue: ['apple', 'banana'] },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.text()).toContain('Apple')
+        expect(trigger.text()).toContain('Banana')
+    })
+
+    it('shows count when selections exceed maxDisplay', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, modelValue: ['apple', 'banana', 'cherry'], maxDisplay: 2 },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.text()).toContain('3 selected')
+    })
+
+    it('emits update:modelValue when options selected', async () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+
+    it('is disabled when disabled prop is true', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, disabled: true },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.attributes('disabled')).toBeDefined()
+    })
+
+    it('adds option to selection when unselected item is clicked', async () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, modelValue: [] },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        const firstItem = items[0] as HTMLElement
+        firstItem.click()
+        await nextTick()
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual([['apple']])
+    })
+
+    it('removes option from selection when selected item is clicked', async () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, modelValue: ['apple', 'banana'] },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        const firstItem = items[0] as HTMLElement
+        firstItem.click()
+        await nextTick()
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual([['banana']])
+    })
+
+    it('filters options by search query', async () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const input = document.body.querySelector('[data-slot="command-input"] input') as HTMLInputElement
+        expect(input).toBeTruthy()
+        input.value = 'cher'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        expect(items.length).toBe(1)
+        expect(items[0].textContent).toContain('Cherry')
+    })
+
+    it('shows all options when search query is cleared', async () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        await openCombobox(wrapper)
+        const input = document.body.querySelector('[data-slot="command-input"] input') as HTMLInputElement
+        input.value = 'cher'
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        input.value = ''
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+        const items = document.body.querySelectorAll('[data-slot="command-item"]')
+        expect(items.length).toBe(options.length)
+    })
+
+    it('applies muted foreground class when no value selected', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.classes()).toContain('text-brutal-muted-foreground')
+    })
+
+    it('does not apply muted foreground class when values are selected', () => {
+        wrapper = mount(ComboboxMulti, {
+            ...localeProvide,
+            props: { options, modelValue: ['apple'] },
+            attachTo: document.body,
+        })
+        const trigger = wrapper.find('[role="combobox"]')
+        expect(trigger.classes()).not.toContain('text-brutal-muted-foreground')
+    })
+})
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
deleted file mode 100644
index 006e4b5..0000000
--- a/packages/ui/src/components/command.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-import { SearchIcon } from 'lucide-react';
-
-import { cn } from '../lib/utils';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';
-
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-    return (
-        <CommandPrimitive
-            data-slot="command"
-            className={cn(
-                'flex h-full w-full flex-col overflow-hidden',
-                'bg-white dark:bg-gray-900',
-                'text-black dark:text-white',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandDialog({
-    title = 'Command Palette',
-    description = 'Search for a command to run...',
-    children,
-    className,
-    showCloseButton = true,
-    ...props
-}: React.ComponentProps<typeof Dialog> & {
-    title?: string;
-    description?: string;
-    className?: string;
-    showCloseButton?: boolean;
-}) {
-    return (
-        <Dialog {...props}>
-            <DialogContent
-                className={cn('overflow-hidden p-0', className)}
-                showCloseButton={showCloseButton}
-            >
-                <DialogHeader className="sr-only">
-                    <DialogTitle>{title}</DialogTitle>
-                    <DialogDescription>{description}</DialogDescription>
-                </DialogHeader>
-                <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-black [&_[cmdk-group-heading]]:text-gray-600 dark:[&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-                    {children}
-                </Command>
-            </DialogContent>
-        </Dialog>
-    );
-}
-
-function CommandInput({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-    return (
-        <div
-            data-slot="command-input-wrapper"
-            className={cn(
-                'flex h-12 items-center gap-3 px-4',
-                'border-b-3 border-brutal',
-                'bg-[#FFE66D]'
-            )}
-        >
-            <SearchIcon className="size-5 shrink-0 stroke-[3] text-black" />
-            <CommandPrimitive.Input
-                data-slot="command-input"
-                className={cn(
-                    'flex h-full w-full bg-transparent py-3',
-                    'text-sm font-bold text-black placeholder:text-black/60',
-                    'outline-none',
-                    'disabled:cursor-not-allowed disabled:opacity-50',
-                    className
-                )}
-                {...props}
-            />
-        </div>
-    );
-}
-
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-    return (
-        <CommandPrimitive.List
-            data-slot="command-list"
-            className={cn(
-                'max-h-[300px] overflow-x-hidden overflow-y-auto scroll-py-1',
-                'p-2',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandEmpty({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-    return (
-        <CommandPrimitive.Empty
-            data-slot="command-empty"
-            className={cn(
-                'py-8 text-center text-sm font-bold',
-                'text-gray-500 dark:text-gray-400',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandGroup({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-    return (
-        <CommandPrimitive.Group
-            data-slot="command-group"
-            className={cn(
-                'overflow-hidden p-1',
-                '[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2',
-                '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-black [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider',
-                '[&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandSeparator({
-    className,
-    ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-    return (
-        <CommandPrimitive.Separator
-            data-slot="command-separator"
-            className={cn('-mx-1 my-2 h-[3px]', 'bg-[var(--brutal-border-color,#000)]', className)}
-            {...props}
-        />
-    );
-}
-
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-    return (
-        <CommandPrimitive.Item
-            data-slot="command-item"
-            className={cn(
-                'relative flex cursor-pointer items-center gap-3 px-3 py-2',
-                'text-sm font-semibold',
-                'select-none outline-none',
-                'border-2 border-transparent',
-                'data-[selected=true]:bg-[#4ECDC4] data-[selected=true]:text-black',
-                'data-[selected=true]:border-brutal data-[selected=true]:font-black',
-                'data-[selected=true]:shadow-brutal-sm',
-                'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-                '[&_svg]:pointer-events-none [&_svg]:shrink-0',
-                "[&_svg:not([class*='size-'])]:size-5",
-                "[&_svg:not([class*='text-'])]:text-current",
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-    return (
-        <span
-            data-slot="command-shortcut"
-            className={cn(
-                'ml-auto text-xs font-black tracking-wider',
-                'px-2 py-1',
-                'bg-gray-100 dark:bg-gray-800',
-                'border-2 border-brutal',
-                'text-gray-600 dark:text-gray-300',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-export {
-    Command,
-    CommandDialog,
-    CommandInput,
-    CommandList,
-    CommandEmpty,
-    CommandGroup,
-    CommandItem,
-    CommandShortcut,
-    CommandSeparator,
-};
diff --git a/packages/ui/src/components/command/Command.vue b/packages/ui/src/components/command/Command.vue
new file mode 100644
index 0000000..fa7f095
--- /dev/null
+++ b/packages/ui/src/components/command/Command.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CommandProps {
+    class?: string
+}
+
+const props = defineProps<CommandProps>()
+
+const classes = computed(() =>
+    cn(
+        'flex h-full w-full flex-col overflow-hidden',
+        'bg-brutal-bg text-brutal-fg',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="classes" role="combobox">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/command/CommandDialog.vue b/packages/ui/src/components/command/CommandDialog.vue
new file mode 100644
index 0000000..735117b
--- /dev/null
+++ b/packages/ui/src/components/command/CommandDialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from 'reka-ui'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Command from './Command.vue'
+
+interface CommandDialogProps {
+    open?: boolean
+    title?: string
+    description?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<CommandDialogProps>(), {
+    open: false,
+    title: undefined,
+    description: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('command.dialogTitle'))
+const resolvedDescription = computed(() => props.description ?? t('command.dialogDescription'))
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+const overlayClasses = computed(() =>
+    cn(
+        'fixed inset-0 z-50 bg-brutal-overlay',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+    )
+)
+
+const contentClasses = computed(() =>
+    cn(
+        'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
+        'w-full max-w-lg overflow-hidden p-0',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal-xl rounded-brutal',
+        'duration-200',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DialogRoot :open="props.open" @update:open="emit('update:open', $event)">
+        <DialogPortal>
+            <DialogOverlay :class="overlayClasses" />
+            <DialogContent :class="contentClasses">
+                <div class="sr-only">
+                    <DialogTitle>{{ resolvedTitle }}</DialogTitle>
+                    <DialogDescription>{{ resolvedDescription }}</DialogDescription>
+                </div>
+                <Command class="[&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:font-black [&_[data-slot=command-group-heading]]:text-brutal-muted-foreground [&_[data-slot=command-group]]:px-2 [&_[data-slot=command-input]]:h-12 [&_[data-slot=command-item]]:px-3 [&_[data-slot=command-item]]:py-3">
+                    <slot />
+                </Command>
+            </DialogContent>
+        </DialogPortal>
+    </DialogRoot>
+</template>
diff --git a/packages/ui/src/components/command/CommandEmpty.vue b/packages/ui/src/components/command/CommandEmpty.vue
new file mode 100644
index 0000000..176644b
--- /dev/null
+++ b/packages/ui/src/components/command/CommandEmpty.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+
+interface CommandEmptyProps {
+    class?: string
+}
+
+const props = defineProps<CommandEmptyProps>()
+
+const { t } = useLocale()
+
+const classes = computed(() =>
+    cn(
+        'py-8 text-center text-sm font-bold',
+        'text-brutal-muted-foreground',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <p :class="classes" data-slot="command-empty">
+        <slot>{{ t('command.emptyText') }}</slot>
+    </p>
+</template>
diff --git a/packages/ui/src/components/command/CommandGroup.vue b/packages/ui/src/components/command/CommandGroup.vue
new file mode 100644
index 0000000..b247df9
--- /dev/null
+++ b/packages/ui/src/components/command/CommandGroup.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CommandGroupProps {
+    heading?: string
+    class?: string
+}
+
+const props = defineProps<CommandGroupProps>()
+
+const classes = computed(() =>
+    cn(
+        'overflow-hidden p-1',
+        props.class
+    )
+)
+
+const headingClasses = computed(() =>
+    cn(
+        'px-3 py-2 text-xs font-black uppercase tracking-wider',
+        'text-brutal-muted-foreground'
+    )
+)
+</script>
+
+<template>
+    <div :class="classes" data-slot="command-group" role="group">
+        <div v-if="heading" :class="headingClasses" data-slot="command-group-heading">
+            {{ heading }}
+        </div>
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/command/CommandInput.vue b/packages/ui/src/components/command/CommandInput.vue
new file mode 100644
index 0000000..5f9ecdb
--- /dev/null
+++ b/packages/ui/src/components/command/CommandInput.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+
+interface CommandInputProps {
+    modelValue?: string
+    placeholder?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<CommandInputProps>(), {
+    modelValue: undefined,
+    placeholder: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('command.placeholder'))
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const wrapperClasses = computed(() =>
+    cn(
+        'flex h-12 items-center gap-3 px-4',
+        'border-b-3 border-brutal',
+        'bg-brutal-accent'
+    )
+)
+
+const inputClasses = computed(() =>
+    cn(
+        'flex h-full w-full bg-transparent py-3',
+        'text-sm font-bold text-brutal-fg placeholder:text-brutal-placeholder',
+        'outline-none',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="wrapperClasses" data-slot="command-input">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0 stroke-[3] text-brutal-fg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+        </svg>
+        <input
+            type="text"
+            :value="modelValue"
+            :placeholder="resolvedPlaceholder"
+            :class="inputClasses"
+            @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+        >
+    </div>
+</template>
diff --git a/packages/ui/src/components/command/CommandItem.vue b/packages/ui/src/components/command/CommandItem.vue
new file mode 100644
index 0000000..06d06a9
--- /dev/null
+++ b/packages/ui/src/components/command/CommandItem.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CommandItemProps {
+    value: string
+    disabled?: boolean
+    class?: string
+}
+
+const props = defineProps<CommandItemProps>()
+
+const emit = defineEmits<{ select: [value: string] }>()
+
+const isSelected = ref(false)
+
+const classes = computed(() =>
+    cn(
+        'relative flex cursor-pointer items-center gap-3 px-3 py-2',
+        'text-sm font-semibold',
+        'select-none outline-none',
+        'border-3 border-transparent',
+        'data-[selected=true]:bg-brutal-secondary data-[selected=true]:text-brutal-fg',
+        'data-[selected=true]:border-brutal data-[selected=true]:font-black',
+        'data-[selected=true]:shadow-brutal-sm',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+        props.class
+    )
+)
+
+function handleMouseEnter() {
+    isSelected.value = true
+}
+
+function handleMouseLeave() {
+    isSelected.value = false
+}
+
+function handleClick() {
+    if (!props.disabled) {
+        emit('select', props.value)
+    }
+}
+</script>
+
+<template>
+    <div
+        :class="classes"
+        role="option"
+        :aria-selected="isSelected"
+        :aria-disabled="disabled || undefined"
+        data-slot="command-item"
+        :data-selected="isSelected"
+        :data-disabled="disabled"
+        tabindex="-1"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        @click="handleClick"
+        @keydown.enter="handleClick"
+    >
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/command/CommandList.vue b/packages/ui/src/components/command/CommandList.vue
new file mode 100644
index 0000000..eabac9e
--- /dev/null
+++ b/packages/ui/src/components/command/CommandList.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CommandListProps {
+    class?: string
+}
+
+const props = defineProps<CommandListProps>()
+
+const classes = computed(() =>
+    cn(
+        'max-h-80 overflow-x-hidden overflow-y-auto scroll-py-1',
+        'p-2',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="classes" role="listbox" data-slot="command-list">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/command/CommandSeparator.vue b/packages/ui/src/components/command/CommandSeparator.vue
new file mode 100644
index 0000000..af7edaf
--- /dev/null
+++ b/packages/ui/src/components/command/CommandSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CommandSeparatorProps {
+    class?: string
+}
+
+const props = defineProps<CommandSeparatorProps>()
+
+const classes = computed(() =>
+    cn('-mx-1 my-2 h-[3px] bg-brutal-fg', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes" role="separator" />
+</template>
diff --git a/packages/ui/src/components/command/CommandShortcut.vue b/packages/ui/src/components/command/CommandShortcut.vue
new file mode 100644
index 0000000..20875af
--- /dev/null
+++ b/packages/ui/src/components/command/CommandShortcut.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface CommandShortcutProps {
+    class?: string
+}
+
+const props = defineProps<CommandShortcutProps>()
+
+const classes = computed(() =>
+    cn(
+        'ml-auto text-xs font-black tracking-wider',
+        'px-2 py-1',
+        'bg-brutal-muted',
+        'border-3 border-brutal',
+        'text-brutal-muted-foreground',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <span :class="classes" data-slot="command-shortcut">
+        <slot />
+    </span>
+</template>
diff --git a/packages/ui/src/components/command/command.test.ts b/packages/ui/src/components/command/command.test.ts
new file mode 100644
index 0000000..47b1982
--- /dev/null
+++ b/packages/ui/src/components/command/command.test.ts
@@ -0,0 +1,335 @@
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Command from './Command.vue'
+import CommandDialog from './CommandDialog.vue'
+import CommandInput from './CommandInput.vue'
+import CommandList from './CommandList.vue'
+import CommandEmpty from './CommandEmpty.vue'
+import CommandGroup from './CommandGroup.vue'
+import CommandItem from './CommandItem.vue'
+import CommandSeparator from './CommandSeparator.vue'
+import CommandShortcut from './CommandShortcut.vue'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('Command', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(Command)
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('h-full')
+        expect(wrapper.classes()).toContain('w-full')
+        expect(wrapper.classes()).toContain('flex-col')
+        expect(wrapper.classes()).toContain('overflow-hidden')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+        expect(wrapper.classes()).toContain('text-brutal-fg')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Command, {
+            slots: { default: '<div class="inner">Inner content</div>' },
+        })
+        expect(wrapper.find('.inner').exists()).toBe(true)
+        expect(wrapper.find('.inner').text()).toBe('Inner content')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Command, {
+            props: { class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
+
+describe('CommandInput', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(CommandInput, { ...localeProvide })
+        const wrapperDiv = wrapper.find('[data-slot="command-input"]')
+        expect(wrapperDiv.exists()).toBe(true)
+        expect(wrapperDiv.classes()).toContain('flex')
+        expect(wrapperDiv.classes()).toContain('items-center')
+        expect(wrapperDiv.classes()).toContain('border-b-3')
+        expect(wrapperDiv.classes()).toContain('border-brutal')
+        expect(wrapperDiv.classes()).toContain('bg-brutal-accent')
+    })
+
+    it('has search input placeholder', () => {
+        const wrapper = mount(CommandInput, { ...localeProvide })
+        const input = wrapper.find('input')
+        expect(input.exists()).toBe(true)
+        expect(input.attributes('placeholder')).toBe('Type a command or search...')
+    })
+
+    it('applies custom class to input', () => {
+        const wrapper = mount(CommandInput, {
+            ...localeProvide,
+            props: { class: 'custom-input-class' },
+        })
+        const input = wrapper.find('input')
+        expect(input.classes()).toContain('custom-input-class')
+    })
+
+    it('emits update:modelValue on input', async () => {
+        const wrapper = mount(CommandInput, { ...localeProvide })
+        const input = wrapper.find('input')
+        await input.setValue('test query')
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test query'])
+    })
+
+    it('uses custom placeholder', () => {
+        const wrapper = mount(CommandInput, {
+            ...localeProvide,
+            props: { placeholder: 'Search items...' },
+        })
+        const input = wrapper.find('input')
+        expect(input.attributes('placeholder')).toBe('Search items...')
+    })
+})
+
+describe('CommandList', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(CommandList, { ...localeProvide })
+        expect(wrapper.classes()).toContain('max-h-80')
+        expect(wrapper.classes()).toContain('overflow-y-auto')
+        expect(wrapper.classes()).toContain('overflow-x-hidden')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CommandList, {
+            ...localeProvide,
+            props: { class: 'custom-list' },
+        })
+        expect(wrapper.classes()).toContain('custom-list')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(CommandList, {
+            ...localeProvide,
+            slots: { default: '<div class="list-item">Item</div>' },
+        })
+        expect(wrapper.find('.list-item').exists()).toBe(true)
+    })
+})
+
+describe('CommandEmpty', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(CommandEmpty, { ...localeProvide })
+        expect(wrapper.classes()).toContain('py-8')
+        expect(wrapper.classes()).toContain('text-center')
+        expect(wrapper.classes()).toContain('text-sm')
+        expect(wrapper.classes()).toContain('font-bold')
+    })
+
+    it('shows default empty message', () => {
+        const wrapper = mount(CommandEmpty, { ...localeProvide })
+        expect(wrapper.text()).toBe('No results found.')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CommandEmpty, {
+            ...localeProvide,
+            props: { class: 'custom-empty' },
+        })
+        expect(wrapper.classes()).toContain('custom-empty')
+    })
+
+    it('renders custom slot content', () => {
+        const wrapper = mount(CommandEmpty, {
+            ...localeProvide,
+            slots: { default: 'Nothing here!' },
+        })
+        expect(wrapper.text()).toBe('Nothing here!')
+    })
+})
+
+describe('CommandGroup', () => {
+    it('renders with heading', () => {
+        const wrapper = mount(CommandGroup, {
+            ...localeProvide,
+            props: { heading: 'Suggestions' },
+        })
+        const heading = wrapper.find('[data-slot="command-group-heading"]')
+        expect(heading.exists()).toBe(true)
+        expect(heading.text()).toBe('Suggestions')
+    })
+
+    it('renders without heading', () => {
+        const wrapper = mount(CommandGroup, { ...localeProvide })
+        const heading = wrapper.find('[data-slot="command-group-heading"]')
+        expect(heading.exists()).toBe(false)
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(CommandGroup, {
+            ...localeProvide,
+            slots: { default: '<div class="group-item">Item</div>' },
+        })
+        expect(wrapper.find('.group-item').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CommandGroup, {
+            ...localeProvide,
+            props: { class: 'custom-group' },
+        })
+        expect(wrapper.classes()).toContain('custom-group')
+    })
+
+    it('has group role', () => {
+        const wrapper = mount(CommandGroup, { ...localeProvide })
+        expect(wrapper.attributes('role')).toBe('group')
+    })
+})
+
+describe('CommandItem', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(CommandItem, {
+            ...localeProvide,
+            props: { value: 'test' },
+            slots: { default: 'Item text' },
+        })
+        expect(wrapper.text()).toBe('Item text')
+    })
+
+    it('has cursor-pointer class', () => {
+        const wrapper = mount(CommandItem, {
+            ...localeProvide,
+            props: { value: 'test' },
+        })
+        expect(wrapper.classes()).toContain('cursor-pointer')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CommandItem, {
+            ...localeProvide,
+            props: { value: 'test', class: 'custom-item' },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+    })
+
+    it('emits select event on click', async () => {
+        const wrapper = mount(CommandItem, {
+            ...localeProvide,
+            props: { value: 'test-value' },
+        })
+        await wrapper.trigger('click')
+        expect(wrapper.emitted('select')).toBeTruthy()
+        expect(wrapper.emitted('select')![0]).toEqual(['test-value'])
+    })
+
+    it('does not emit select when disabled', async () => {
+        const wrapper = mount(CommandItem, {
+            ...localeProvide,
+            props: { value: 'test-value', disabled: true },
+        })
+        await wrapper.trigger('click')
+        expect(wrapper.emitted('select')).toBeFalsy()
+    })
+
+    it('sets data-disabled attribute when disabled', () => {
+        const wrapper = mount(CommandItem, {
+            ...localeProvide,
+            props: { value: 'test', disabled: true },
+        })
+        expect(wrapper.attributes('data-disabled')).toBe('true')
+    })
+})
+
+describe('CommandSeparator', () => {
+    it('renders with separator styling', () => {
+        const wrapper = mount(CommandSeparator)
+        expect(wrapper.classes()).toContain('h-[3px]')
+        expect(wrapper.classes()).toContain('bg-brutal-fg')
+        expect(wrapper.attributes('role')).toBe('separator')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CommandSeparator, {
+            props: { class: 'custom-sep' },
+        })
+        expect(wrapper.classes()).toContain('custom-sep')
+    })
+})
+
+describe('CommandShortcut', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(CommandShortcut, {
+            slots: { default: '⌘K' },
+        })
+        expect(wrapper.text()).toBe('⌘K')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CommandShortcut, {
+            props: { class: 'custom-shortcut' },
+        })
+        expect(wrapper.classes()).toContain('custom-shortcut')
+    })
+
+    it('has default styling classes', () => {
+        const wrapper = mount(CommandShortcut)
+        expect(wrapper.classes()).toContain('ml-auto')
+        expect(wrapper.classes()).toContain('text-xs')
+        expect(wrapper.classes()).toContain('font-black')
+        expect(wrapper.classes()).toContain('bg-brutal-muted')
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+    })
+})
+
+describe('CommandDialog', () => {
+    it('renders within Dialog context', () => {
+        const wrapper = mount(CommandDialog, {
+            ...localeProvide,
+            props: { open: true },
+            attachTo: document.body,
+        })
+        expect(wrapper.findComponent(CommandDialog).exists()).toBe(true)
+    })
+
+    it('uses default title and description', async () => {
+        const wrapper = mount(CommandDialog, {
+            ...localeProvide,
+            props: { open: true },
+            attachTo: document.body,
+        })
+        await nextTick()
+        const dialogTitle = document.querySelector('[id^="reka-dialog-title"]')
+        const dialogDesc = document.querySelector('[id^="reka-dialog-description"]')
+        expect(dialogTitle?.textContent).toBe('Command Palette')
+        expect(dialogDesc?.textContent).toBe('Search for a command to run...')
+        wrapper.unmount()
+    })
+
+    it('uses custom title and description', async () => {
+        const wrapper = mount(CommandDialog, {
+            ...localeProvide,
+            props: {
+                open: true,
+                title: 'Custom Title',
+                description: 'Custom Description',
+            },
+            attachTo: document.body,
+        })
+        await nextTick()
+        const allTitles = document.querySelectorAll('[id^="reka-dialog-title"]')
+        const allDescs = document.querySelectorAll('[id^="reka-dialog-description"]')
+        const lastTitle = allTitles[allTitles.length - 1]
+        const lastDesc = allDescs[allDescs.length - 1]
+        expect(lastTitle?.textContent).toBe('Custom Title')
+        expect(lastDesc?.textContent).toBe('Custom Description')
+        wrapper.unmount()
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CommandDialog, {
+            ...localeProvide,
+            props: { open: true, class: 'custom-dialog' },
+            attachTo: document.body,
+        })
+        const content = wrapper.find('[role="dialog"]')
+        expect(content.exists() ? content.classes() : wrapper.classes()).toBeDefined()
+    })
+})
diff --git a/packages/ui/src/components/cookie-consent/CookieConsent.vue b/packages/ui/src/components/cookie-consent/CookieConsent.vue
new file mode 100644
index 0000000..c132b4c
--- /dev/null
+++ b/packages/ui/src/components/cookie-consent/CookieConsent.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Cookie } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import Button from '../button/Button.vue'
+
+interface CookieConsentProps {
+    title?: string
+    description?: string
+    acceptText?: string
+    declineText?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<CookieConsentProps>(), {
+    title: undefined,
+    description: undefined,
+    acceptText: undefined,
+    declineText: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    accept: []
+    decline: []
+}>()
+
+const rootClasses = computed(() =>
+    cn(
+        'fixed bottom-0 left-0 right-0 z-50 p-4',
+        props.class
+    )
+)
+
+const cardClasses = computed(() =>
+    cn(
+        'mx-auto w-full max-w-4xl',
+        'border-3 border-brutal shadow-brutal-lg',
+    )
+)
+
+const resolvedTitle = computed(() => props.title ?? t('cookieConsent.defaultTitle'))
+const resolvedDescription = computed(() => props.description ?? t('cookieConsent.defaultDescription'))
+const resolvedAcceptText = computed(() => props.acceptText ?? t('cookieConsent.defaultAcceptText'))
+const resolvedDeclineText = computed(() => props.declineText ?? t('cookieConsent.defaultDeclineText'))
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <Card :class="cardClasses" variant="default">
+            <CardContent class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                <div class="flex items-start gap-3">
+                    <Cookie class="h-6 w-6 shrink-0 stroke-[2.5] mt-0.5" />
+                    <div>
+                        <h3 class="text-base font-black tracking-tight">
+{{ resolvedTitle }}
+</h3>
+                        <p class="mt-1 text-sm text-brutal-muted-foreground font-medium">
+{{ resolvedDescription }}
+</p>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-2 sm:flex-row sm:shrink-0">
+                    <Button variant="outline" size="sm" @click="emit('decline')">
+                        {{ resolvedDeclineText }}
+                    </Button>
+                    <Button variant="primary" size="sm" @click="emit('accept')">
+                        {{ resolvedAcceptText }}
+                    </Button>
+                </div>
+                <slot name="actions" />
+            </CardContent>
+        </Card>
+    </div>
+</template>
diff --git a/packages/ui/src/components/cookie-consent/cookie-consent.test.ts b/packages/ui/src/components/cookie-consent/cookie-consent.test.ts
new file mode 100644
index 0000000..49b721c
--- /dev/null
+++ b/packages/ui/src/components/cookie-consent/cookie-consent.test.ts
@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import CookieConsent from './CookieConsent.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('CookieConsent', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(CookieConsent, { ...localeProvide })
+        expect(wrapper.text()).toContain('We use cookies')
+        expect(wrapper.text()).toContain('This website uses cookies to enhance your browsing experience.')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(CookieConsent, {
+            props: { title: 'Cookie Policy' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Cookie Policy')
+    })
+
+    it('shows custom description', () => {
+        const wrapper = mount(CookieConsent, {
+            props: { description: 'We use cookies for analytics.' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('We use cookies for analytics.')
+    })
+
+    it('shows custom accept text', () => {
+        const wrapper = mount(CookieConsent, {
+            props: { acceptText: 'I Agree' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('I Agree')
+    })
+
+    it('shows custom decline text', () => {
+        const wrapper = mount(CookieConsent, {
+            props: { declineText: 'No Thanks' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('No Thanks')
+    })
+
+    it('shows default accept text from i18n', () => {
+        const wrapper = mount(CookieConsent, { ...localeProvide })
+        expect(wrapper.text()).toContain('Accept')
+    })
+
+    it('shows default decline text from i18n', () => {
+        const wrapper = mount(CookieConsent, { ...localeProvide })
+        expect(wrapper.text()).toContain('Decline')
+    })
+
+    it('emits accept when accept button is clicked', async () => {
+        const wrapper = mount(CookieConsent, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const acceptButton = buttons.find(b => b.text().includes('Accept'))
+        expect(acceptButton).toBeTruthy()
+        await acceptButton!.trigger('click')
+        expect(wrapper.emitted('accept')).toBeTruthy()
+        expect(wrapper.emitted('accept')!.length).toBe(1)
+    })
+
+    it('emits decline when decline button is clicked', async () => {
+        const wrapper = mount(CookieConsent, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const declineButton = buttons.find(b => b.text().includes('Decline'))
+        expect(declineButton).toBeTruthy()
+        await declineButton!.trigger('click')
+        expect(wrapper.emitted('decline')).toBeTruthy()
+        expect(wrapper.emitted('decline')!.length).toBe(1)
+    })
+
+    it('renders cookie icon', () => {
+        const wrapper = mount(CookieConsent, { ...localeProvide })
+        expect(wrapper.find('svg').exists()).toBe(true)
+    })
+
+    it('has fixed positioning', () => {
+        const wrapper = mount(CookieConsent, { ...localeProvide })
+        const root = wrapper.find('div')
+        expect(root.classes()).toContain('fixed')
+        expect(root.classes()).toContain('bottom-0')
+    })
+
+    it('renders actions slot', () => {
+        const wrapper = mount(CookieConsent, {
+            slots: { actions: '<div class="custom-action">Custom Action</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Action')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CookieConsent, {
+            props: { class: 'my-consent' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-consent"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue b/packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue
new file mode 100644
index 0000000..ba1a01c
--- /dev/null
+++ b/packages/ui/src/components/copy-to-clipboard/CopyToClipboard.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Check, Copy } from 'lucide-vue-next'
+import { useClipboard } from '../../composables/useClipboard'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import { copyToClipboardVariants } from './copy-to-clipboard-variants'
+
+const DEFAULT_COPY_DURATION = 2000
+
+interface CopyToClipboardProps {
+    text: string
+    duration?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<CopyToClipboardProps>(), {
+    duration: DEFAULT_COPY_DURATION,
+    class: '',
+})
+
+const { t } = useLocale()
+const { copy, copied, isSupported } = useClipboard({ duration: props.duration })
+
+const handleCopy = () => {
+    if (isSupported) {
+        copy(props.text)
+    }
+}
+
+const classes = computed(() =>
+    cn(
+        copyToClipboardVariants({ state: copied.value ? 'copied' : 'idle' }),
+        props.class
+    )
+)
+</script>
+
+<template>
+    <button
+        type="button"
+        :disabled="!isSupported"
+        @click="handleCopy"
+        :class="classes"
+    >
+        <slot :copied="copied">
+            <template v-if="copied">
+                <Check class="h-4 w-4 stroke-[3]" />
+                <span>{{ t('copyToClipboard.copied') }}</span>
+            </template>
+            <template v-else>
+                <Copy class="h-4 w-4 stroke-[3]" />
+                <span>{{ t('copyToClipboard.copy') }}</span>
+            </template>
+        </slot>
+    </button>
+</template>
diff --git a/packages/ui/src/components/copy-to-clipboard/copy-to-clipboard-variants.ts b/packages/ui/src/components/copy-to-clipboard/copy-to-clipboard-variants.ts
new file mode 100644
index 0000000..1810ec1
--- /dev/null
+++ b/packages/ui/src/components/copy-to-clipboard/copy-to-clipboard-variants.ts
@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority'
+
+export const copyToClipboardVariants = cva(
+    [
+        'inline-flex items-center justify-center gap-2 font-black tracking-wide',
+        'border-3 border-brutal transition-all duration-150',
+        'h-11 px-5 rounded-brutal shadow-brutal select-none cursor-pointer',
+        'disabled:opacity-50 disabled:pointer-events-none',
+    ].join(' '),
+    {
+        variants: {
+            state: {
+                idle: 'bg-brutal-bg text-brutal-fg hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+                copied: 'bg-brutal-success text-brutal-fg translate-y-[var(--brutal-pressed-offset,2px)] shadow-none',
+            },
+        },
+        defaultVariants: {
+            state: 'idle',
+        },
+    }
+)
diff --git a/packages/ui/src/components/copy-to-clipboard/copy-to-clipboard.test.ts b/packages/ui/src/components/copy-to-clipboard/copy-to-clipboard.test.ts
new file mode 100644
index 0000000..3385d08
--- /dev/null
+++ b/packages/ui/src/components/copy-to-clipboard/copy-to-clipboard.test.ts
@@ -0,0 +1,86 @@
+import { ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { vi } from 'vitest'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import CopyToClipboard from './CopyToClipboard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockCopy = vi.fn()
+const mockCopied = ref(false)
+const mockIsSupported = ref(true)
+
+vi.mock('../../composables/useClipboard', () => ({
+    useClipboard: () => ({
+        copy: mockCopy,
+        copied: mockCopied,
+        isSupported: mockIsSupported,
+    }),
+}))
+
+describe('CopyToClipboard', () => {
+    beforeEach(() => {
+        mockCopied.value = false
+        mockIsSupported.value = true
+        mockCopy.mockReset()
+    })
+
+    it('renders a button element', () => {
+        const wrapper = mount(CopyToClipboard, {
+            props: { text: 'hello' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('button').exists()).toBe(true)
+        expect(wrapper.find('button').attributes('type')).toBe('button')
+    })
+
+    it('shows Copy text by default', () => {
+        const wrapper = mount(CopyToClipboard, {
+            props: { text: 'hello' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Copy')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(CopyToClipboard, {
+            props: { text: 'hello', class: 'custom-class' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('button').classes()).toContain('custom-class')
+    })
+
+    it('applies idle variant classes by default', () => {
+        const wrapper = mount(CopyToClipboard, {
+            props: { text: 'hello' },
+            ...localeProvide,
+        })
+        const button = wrapper.find('button')
+        expect(button.classes()).toContain('bg-brutal-bg')
+        expect(button.classes()).toContain('border-3')
+        expect(button.classes()).toContain('border-brutal')
+        expect(button.classes()).toContain('shadow-brutal')
+    })
+
+    it('has disabled attribute when clipboard not supported', () => {
+        mockIsSupported.value = false
+        const wrapper = mount(CopyToClipboard, {
+            props: { text: 'hello' },
+            ...localeProvide,
+        })
+        const button = wrapper.find('button')
+        expect(button.attributes('disabled')).toBeDefined()
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(CopyToClipboard, {
+            props: { text: 'hello' },
+            slots: {
+                default: '<span>Custom slot</span>',
+            },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom slot')
+    })
+})
diff --git a/packages/ui/src/components/counter/Counter.vue b/packages/ui/src/components/counter/Counter.vue
new file mode 100644
index 0000000..3c14dac
--- /dev/null
+++ b/packages/ui/src/components/counter/Counter.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { counterVariants } from './counter-variants';
+
+const DEFAULT_COUNTER_DURATION = 2000
+
+type CounterVariantProps = VariantProps<typeof counterVariants>;
+
+interface CounterProps {
+    to: number;
+    from?: number;
+    duration?: number;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    separator?: string;
+    easing?: 'linear' | 'ease-out' | 'ease-in-out';
+    autoStart?: boolean;
+    size?: NonNullable<CounterVariantProps['size']>;
+    class?: string;
+}
+
+const props = withDefaults(defineProps<CounterProps>(), {
+    from: 0,
+    duration: DEFAULT_COUNTER_DURATION,
+    decimals: 0,
+    prefix: '',
+    suffix: '',
+    separator: ',',
+    easing: 'ease-out',
+    autoStart: true,
+    size: 'md',
+});
+
+const emit = defineEmits<{
+    complete: [];
+}>();
+
+const current = ref(props.from);
+const rootRef = ref<HTMLElement | null>(null);
+const measureRef = ref<HTMLElement | null>(null);
+const scaleFactor = ref(1);
+let resizeObserver: ResizeObserver | null = null;
+let rafId: number | null = null;
+let startTime: number | null = null;
+let scaleRafId: number | null = null;
+
+function easingFn(t: number): number {
+    if (props.easing === 'linear') return t;
+    if (props.easing === 'ease-out') return 1 - Math.pow(1 - t, 3);
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+
+function formatNumber(val: number): string {
+    const fixed = val.toFixed(props.decimals);
+    if (!props.separator) return fixed;
+    const [int, dec] = fixed.split('.');
+    const formatted = int.replace(/\B(?=(\d{3})+(?!\d))/g, props.separator);
+    return dec !== undefined ? `${formatted}.${dec}` : formatted;
+}
+
+function animate(ts: number) {
+    if (startTime === null) startTime = ts;
+    const elapsed = ts - startTime;
+    const progress = Math.min(elapsed / props.duration, 1);
+    const eased = easingFn(progress);
+    current.value = props.from + (props.to - props.from) * eased;
+
+    if (progress < 1) {
+        rafId = requestAnimationFrame(animate);
+    } else {
+        current.value = props.to;
+        emit('complete');
+    }
+}
+
+function start() {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    startTime = null;
+    current.value = props.from;
+    rafId = requestAnimationFrame(animate);
+}
+
+function stop() {
+    if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+    }
+}
+
+defineExpose({ start, stop });
+
+function scheduleUpdateScale() {
+    if (scaleRafId !== null) return;
+    scaleRafId = requestAnimationFrame(() => {
+        scaleRafId = null;
+        updateScale();
+    });
+}
+
+function updateScale() {
+    const measure = measureRef.value;
+    const root = rootRef.value;
+    if (!measure || !root) return;
+    const naturalWidth = measure.scrollWidth;
+    const constrainedWidth = root.clientWidth;
+    if (naturalWidth > constrainedWidth) {
+        scaleFactor.value = constrainedWidth / naturalWidth;
+    } else {
+        scaleFactor.value = 1;
+    }
+}
+
+onMounted(() => {
+    if (props.autoStart) start();
+    nextTick(() => {
+        const root = rootRef.value;
+        if (!root) return;
+        updateScale();
+        resizeObserver = new ResizeObserver(updateScale);
+        resizeObserver.observe(root);
+    });
+});
+
+onUnmounted(() => {
+    stop();
+    if (scaleRafId !== null) {
+        cancelAnimationFrame(scaleRafId);
+        scaleRafId = null;
+    }
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+        resizeObserver = null;
+    }
+});
+
+watch(() => [props.to, props.from] as const, () => {
+    if (props.autoStart) start();
+});
+
+watch(() => [props.to, props.prefix, props.suffix, props.separator, props.decimals, props.size] as const, () => {
+    scheduleUpdateScale();
+});
+
+const displayValue = computed(() =>
+    `${props.prefix}${formatNumber(current.value)}${props.suffix}`
+);
+
+const finalDisplayValue = computed(() =>
+    `${props.prefix}${formatNumber(props.to)}${props.suffix}`
+);
+
+const scaleStyle = computed(() => {
+    if (scaleFactor.value >= 1) return undefined;
+    return {
+        transform: `scale(${scaleFactor.value})`,
+        transformOrigin: 'left center' as const,
+    };
+});
+
+const classes = computed(() =>
+    cn(counterVariants({ size: props.size }), props.class)
+);
+
+const measureClasses = computed(() =>
+    cn(counterVariants({ size: props.size }), props.class, 'absolute invisible whitespace-nowrap !max-w-none')
+);
+</script>
+
+<template>
+    <span class="relative inline-flex max-w-full min-w-0">
+        <span ref="measureRef" :class="measureClasses" aria-hidden="true">
+            {{ finalDisplayValue }}
+        </span>
+        <span ref="rootRef" :class="classes" :style="scaleStyle" aria-live="polite" :aria-label="displayValue">
+            {{ displayValue }}
+        </span>
+    </span>
+</template>
diff --git a/packages/ui/src/components/counter/counter-variants.ts b/packages/ui/src/components/counter/counter-variants.ts
new file mode 100644
index 0000000..4b3b485
--- /dev/null
+++ b/packages/ui/src/components/counter/counter-variants.ts
@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export const counterVariants = cva(
+    [
+        'inline-flex items-baseline tabular-nums whitespace-nowrap',
+        'font-black text-brutal-fg',
+        'max-w-full min-w-0',
+    ].join(' '),
+    {
+        variants: {
+            size: {
+                sm: 'text-2xl',
+                md: 'text-4xl',
+                lg: 'text-6xl',
+                xl: 'text-8xl',
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+        },
+    }
+);
diff --git a/packages/ui/src/components/counter/counter.test.ts b/packages/ui/src/components/counter/counter.test.ts
new file mode 100644
index 0000000..9e2d0e8
--- /dev/null
+++ b/packages/ui/src/components/counter/counter.test.ts
@@ -0,0 +1,109 @@
+import { mount } from '@vue/test-utils'
+import Counter from './Counter.vue'
+
+function getDisplaySpan(wrapper: ReturnType<typeof mount>) {
+    return wrapper.find('[aria-live="polite"]')
+}
+
+describe('Counter', () => {
+    let rafCallCount: number
+
+    beforeEach(() => {
+        rafCallCount = 0
+        vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+            rafCallCount++
+            cb(rafCallCount === 1 ? 0 : 3000)
+            return rafCallCount
+        })
+        vi.stubGlobal('cancelAnimationFrame', () => {})
+    })
+
+    afterEach(() => {
+        vi.unstubAllGlobals()
+    })
+
+    it('renders with default size classes', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100 },
+        })
+        const display = getDisplaySpan(wrapper)
+        const classes = display.classes()
+        expect(classes).toContain('inline-flex')
+        expect(classes).toContain('items-baseline')
+        expect(classes).toContain('tabular-nums')
+        expect(classes).toContain('font-black')
+        expect(classes).toContain('text-brutal-fg')
+        expect(classes).toContain('text-4xl')
+    })
+
+    it('applies sm size variant classes', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 50, size: 'sm' },
+        })
+        expect(getDisplaySpan(wrapper).classes()).toContain('text-2xl')
+    })
+
+    it('applies lg size variant classes', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 50, size: 'lg' },
+        })
+        expect(getDisplaySpan(wrapper).classes()).toContain('text-6xl')
+    })
+
+    it('applies xl size variant classes', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 50, size: 'xl' },
+        })
+        expect(getDisplaySpan(wrapper).classes()).toContain('text-8xl')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100, class: 'my-counter' },
+        })
+        expect(getDisplaySpan(wrapper).classes()).toContain('my-counter')
+    })
+
+    it('shows prefix in display', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100, prefix: '$' },
+        })
+        expect(wrapper.text()).toContain('$')
+    })
+
+    it('shows suffix in display', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100, suffix: '%' },
+        })
+        expect(wrapper.text()).toContain('%')
+    })
+
+    it('has aria-live="polite"', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100 },
+        })
+        expect(getDisplaySpan(wrapper).attributes('aria-live')).toBe('polite')
+    })
+
+    it('has aria-label attribute', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100 },
+        })
+        expect(getDisplaySpan(wrapper).attributes('aria-label')).toBeTruthy()
+    })
+
+    it('renders as span element', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100 },
+        })
+        expect(wrapper.element.tagName).toBe('SPAN')
+    })
+
+    it('exposes start and stop methods', () => {
+        const wrapper = mount(Counter, {
+            props: { to: 100 },
+        })
+        expect(typeof (wrapper.vm as any).start).toBe('function')
+        expect(typeof (wrapper.vm as any).stop).toBe('function')
+    })
+})
diff --git a/packages/ui/src/components/counter/index.ts b/packages/ui/src/components/counter/index.ts
new file mode 100644
index 0000000..8578d71
--- /dev/null
+++ b/packages/ui/src/components/counter/index.ts
@@ -0,0 +1,2 @@
+export { default as Counter } from './Counter.vue';
+export { counterVariants } from './counter-variants';
diff --git a/packages/ui/src/components/dashboard-shell.tsx b/packages/ui/src/components/dashboard-shell.tsx
deleted file mode 100644
index c99ec0f..0000000
--- a/packages/ui/src/components/dashboard-shell.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import * as React from 'react';
-import {
-    LayoutDashboard,
-    Settings,
-    Users,
-    Layers,
-    Bell,
-    Search,
-    Menu,
-    LogOut,
-    TrendingUp,
-    ShieldAlert,
-    CheckCircle2
-} from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from './card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';
-import { Badge } from './badge';
-import { Button } from './button';
-
-export interface DashboardShellProps extends React.HTMLAttributes<HTMLDivElement> {
-    userEmail?: string;
-    onSignOutClick?: () => void;
-}
-
-const mockTransactions = [
-    { id: 'TX-901', name: 'Alpha Agency', status: 'completed', amount: '$1,299.00', date: 'May 24, 2026' },
-    { id: 'TX-902', name: 'Beta Labs', status: 'pending', amount: '$499.00', date: 'May 23, 2026' },
-    { id: 'TX-903', name: 'Delta Studio', status: 'completed', amount: '$2,800.00', date: 'May 22, 2026' },
-    { id: 'TX-904', name: 'Gamma Corp', status: 'failed', amount: '$99.00', date: 'May 20, 2026' },
-];
-
-export function DashboardShell({
-    userEmail = 'creator@brutxui.site',
-    onSignOutClick,
-    className,
-    ...props
-}: DashboardShellProps) {
-    const [sidebarOpen, setSidebarOpen] = React.useState(true);
-
-    return (
-        <div
-            className={`min-h-[600px] flex bg-brutal-bg text-brutal-fg border-3 border-brutal transition-colors duration-200 overflow-hidden ${className || ''}`}
-            {...props}
-        >
-            <aside
-                className={`w-64 border-r-3 border-brutal bg-gray-50 dark:bg-gray-900 transition-all duration-200 flex flex-col shrink-0 ${sidebarOpen ? 'block' : 'hidden md:flex'}`}
-            >
-                <div className="p-4 border-b-3 border-brutal flex items-center justify-between bg-brutal-accent/20">
-                    <div className="flex items-center space-x-2 font-black text-xl">
-                        <div className="w-6 h-6 border-2 border-brutal bg-brutal-primary rounded-none rotate-[-2deg]" />
-                        <span>BrutxConsole</span>
-                    </div>
-                </div>
-
-                <nav className="flex-grow p-4 space-y-2">
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 bg-brutal-primary text-black border-3 border-brutal font-black text-sm text-left shadow-none transition-all">
-                        <LayoutDashboard className="h-4 w-4 stroke-[3]" />
-                        <span>Overview</span>
-                    </button>
-
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all">
-                        <Layers className="h-4 w-4 stroke-[2.5]" />
-                        <span>Deployments</span>
-                    </button>
-
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all">
-                        <Users className="h-4 w-4 stroke-[2.5]" />
-                        <span>Team Access</span>
-                    </button>
-
-                    <button className="w-full flex items-center space-x-3 px-3 py-2.5 hover:bg-brutal-muted text-brutal-fg font-bold text-sm text-left border-3 border-transparent transition-all">
-                        <Settings className="h-4 w-4 stroke-[2.5]" />
-                        <span>System Settings</span>
-                    </button>
-                </nav>
-
-                <div className="p-4 border-t-3 border-brutal bg-gray-100 dark:bg-gray-800">
-                    <div className="flex items-center justify-between mb-3">
-                        <div className="flex flex-col min-w-0">
-                            <span className="text-xs font-black truncate">{userEmail}</span>
-                            <span className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">Owner Account</span>
-                        </div>
-                    </div>
-                    <Button
-                        variant="danger"
-                        size="sm"
-                        className="w-full gap-2 py-4 font-black"
-                        onClick={onSignOutClick}
-                    >
-                        <LogOut className="h-3.5 w-3.5 stroke-[3]" />
-                        <span>Sign Out</span>
-                    </Button>
-                </div>
-            </aside>
-
-            <div className="flex-grow flex flex-col min-w-0 bg-white dark:bg-gray-800/20">
-                <header className="h-16 border-b-3 border-brutal flex items-center justify-between px-6 bg-white dark:bg-gray-800 z-10">
-                    <div className="flex items-center space-x-4">
-                        <button
-                            onClick={() => setSidebarOpen(!sidebarOpen)}
-                            className="p-1.5 border-3 border-brutal bg-white text-black shadow-brutal-sm active:translate-y-[2px] active:shadow-none transition-all"
-                        >
-                            <Menu className="h-4 w-4 stroke-[3]" />
-                        </button>
-                        <div className="relative hidden sm:block">
-                            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400 stroke-[2.5]" />
-                            <input
-                                placeholder="Global workspace search..."
-                                className="pl-9 pr-4 py-1.5 border-3 border-brutal bg-gray-50 text-sm font-bold text-black focus:outline-none w-64"
-                            />
-                        </div>
-                    </div>
-
-                    <div className="flex items-center space-x-4">
-                        <button className="relative p-1.5 border-3 border-brutal bg-white text-black shadow-brutal-sm active:translate-y-[2px] active:shadow-none transition-all">
-                            <Bell className="h-4 w-4 stroke-[3]" />
-                            <span className="absolute top-[-4px] right-[-4px] h-3.5 w-3.5 bg-brutal-destructive rounded-full border-2 border-brutal" />
-                        </button>
-                        <div className="w-8 h-8 rounded-full border-3 border-brutal bg-brutal-accent flex items-center justify-center font-black text-sm text-black">
-                            C
-                        </div>
-                    </div>
-                </header>
-
-                <main className="flex-grow p-6 space-y-6 overflow-y-auto max-w-[1200px] w-full mx-auto">
-                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-                        <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4">
-                            <CardHeader className="flex flex-row items-center justify-between pb-2">
-                                <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500">Monthly Revenue</CardTitle>
-                                <TrendingUp className="h-4 w-4 text-brutal-success stroke-[3]" />
-                            </CardHeader>
-                            <CardContent className="space-y-1">
-                                <div className="text-3xl font-black">$12,492.00</div>
-                                <p className="text-xs font-bold text-brutal-success flex items-center gap-1">
-                                    <span>+18.2% from previous billing cycle</span>
-                                </p>
-                            </CardContent>
-                        </Card>
-
-                        <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4">
-                            <CardHeader className="flex flex-row items-center justify-between pb-2">
-                                <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500">Active Licenses</CardTitle>
-                                <CheckCircle2 className="h-4 w-4 text-brutal-primary stroke-[3]" />
-                            </CardHeader>
-                            <CardContent className="space-y-1">
-                                <div className="text-3xl font-black">+428</div>
-                                <p className="text-xs font-bold text-brutal-primary">+4.1% monthly net active users</p>
-                            </CardContent>
-                        </Card>
-
-                        <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none p-4">
-                            <CardHeader className="flex flex-row items-center justify-between pb-2">
-                                <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500">System Warnings</CardTitle>
-                                <ShieldAlert className="h-4 w-4 text-brutal-accent stroke-[3]" />
-                            </CardHeader>
-                            <CardContent className="space-y-1">
-                                <div className="text-3xl font-black">2 Warnings</div>
-                                <p className="text-xs font-bold text-brutal-accent">SSL domain renewals pending config</p>
-                            </CardContent>
-                        </Card>
-                    </div>
-
-                    <Card className="border-3 border-brutal bg-white dark:bg-gray-800 shadow-brutal rounded-none">
-                        <CardHeader className="border-b-3 border-brutal p-4 bg-gray-50 dark:bg-gray-900/50">
-                            <CardTitle className="text-lg font-black leading-none">Recent Transaction Ledgers</CardTitle>
-                        </CardHeader>
-                        <CardContent className="p-0">
-                            <Table>
-                                <TableHeader className="border-b-3 border-brutal">
-                                    <TableRow className="hover:bg-transparent">
-                                        <TableHead className="font-black text-black dark:text-white p-3">Receipt ID</TableHead>
-                                        <TableHead className="font-black text-black dark:text-white">Account</TableHead>
-                                        <TableHead className="font-black text-black dark:text-white">Status</TableHead>
-                                        <TableHead className="font-black text-black dark:text-white">date</TableHead>
-                                        <TableHead className="text-right font-black text-black dark:text-white p-3">Amount</TableHead>
-                                    </TableRow>
-                                </TableHeader>
-                                <TableBody>
-                                    {mockTransactions.map((tx) => (
-                                        <TableRow key={tx.id} className="border-b border-gray-200 hover:bg-gray-50/50 dark:hover:bg-gray-700/20">
-                                            <TableCell className="font-black text-sm p-3">{tx.id}</TableCell>
-                                            <TableCell className="font-bold text-sm text-gray-700 dark:text-gray-300">{tx.name}</TableCell>
-                                            <TableCell>
-                                                <Badge
-                                                    variant={
-                                                        tx.status === 'completed'
-                                                            ? 'success'
-                                                            : tx.status === 'pending'
-                                                            ? 'accent'
-                                                            : 'danger'
-                                                    }
-                                                    className="font-black text-xs px-2 py-0.5 border-2 border-brutal rounded-none"
-                                                >
-                                                    {tx.status}
-                                                </Badge>
-                                            </TableCell>
-                                            <TableCell className="font-bold text-sm text-gray-500">{tx.date}</TableCell>
-                                            <TableCell className="text-right font-black text-sm p-3">{tx.amount}</TableCell>
-                                        </TableRow>
-                                    ))}
-                                </TableBody>
-                            </Table>
-                        </CardContent>
-                    </Card>
-                </main>
-            </div>
-        </div>
-    );
-}
diff --git a/packages/ui/src/components/dashboard-shell/DashboardShell.vue b/packages/ui/src/components/dashboard-shell/DashboardShell.vue
new file mode 100644
index 0000000..376292f
--- /dev/null
+++ b/packages/ui/src/components/dashboard-shell/DashboardShell.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Menu } from 'lucide-vue-next'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+
+interface DashboardShellProps {
+    userEmail?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<DashboardShellProps>(), {
+    userEmail: undefined,
+    class: '',
+})
+
+const emit = defineEmits<{
+    signOut: []
+}>()
+
+const { t } = useLocale()
+
+const sidebarOpen = ref(true)
+
+const displayEmail = computed(() => props.userEmail ?? t('dashboardShell.defaultEmail'))
+
+const rootClasses = computed(() => cn('flex h-screen bg-brutal-bg', props.class))
+
+const sidebarClasses = computed(() =>
+    cn(
+        'border-r-3 border-brutal bg-brutal-bg p-4 flex flex-col',
+        sidebarOpen.value ? 'w-64' : 'w-0 overflow-hidden md:w-64'
+    )
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <aside :class="sidebarClasses" :aria-label="t('dashboardShell.sidebarNavigation')">
+            <div class="font-black text-lg tracking-tight mb-8">
+BrutxUI
+</div>
+            <nav class="flex-1 space-y-1">
+                <slot name="sidebar" />
+            </nav>
+            <div class="border-t-3 border-brutal pt-4 mt-4">
+                <div class="text-sm font-bold truncate">
+{{ displayEmail }}
+</div>
+                <button class="text-sm font-bold text-brutal-destructive mt-1 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all" @click="emit('signOut')">
+{{ t('dashboardShell.signOut') }}
+</button>
+            </div>
+        </aside>
+
+        <div class="flex-1 flex flex-col overflow-hidden">
+            <header class="border-b-3 border-brutal bg-brutal-bg px-6 py-3 flex items-center justify-between">
+                <button class="md:hidden h-8 w-8 flex items-center justify-center border-3 border-brutal shadow-brutal-sm active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5" @click="sidebarOpen = !sidebarOpen">
+                    <Menu class="h-4 w-4 stroke-[3]" />
+                </button>
+                <slot name="header" />
+            </header>
+
+            <main class="flex-1 overflow-y-auto p-6">
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/dashboard-shell/dashboard-shell.test.ts b/packages/ui/src/components/dashboard-shell/dashboard-shell.test.ts
new file mode 100644
index 0000000..32f1374
--- /dev/null
+++ b/packages/ui/src/components/dashboard-shell/dashboard-shell.test.ts
@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import DashboardShell from './DashboardShell.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('DashboardShell', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(DashboardShell, { ...localeProvide })
+        expect(wrapper.find('aside').exists()).toBe(true)
+        expect(wrapper.find('header').exists()).toBe(true)
+        expect(wrapper.find('main').exists()).toBe(true)
+    })
+
+    it('shows default user email', () => {
+        const wrapper = mount(DashboardShell, { ...localeProvide })
+        expect(wrapper.text()).toContain('user@example.com')
+    })
+
+    it('shows custom user email', () => {
+        const wrapper = mount(DashboardShell, {
+            props: { userEmail: 'test@example.com' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('test@example.com')
+    })
+
+    it('renders default slot content', () => {
+        const wrapper = mount(DashboardShell, {
+            slots: { default: '<p>Main content</p>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('main').text()).toBe('Main content')
+    })
+
+    it('renders sidebar slot content', () => {
+        const wrapper = mount(DashboardShell, {
+            slots: { sidebar: '<a href="#">Dashboard</a>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('nav').text()).toBe('Dashboard')
+    })
+
+    it('renders header slot content', () => {
+        const wrapper = mount(DashboardShell, {
+            slots: { header: '<span>Header content</span>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('header').text()).toContain('Header content')
+    })
+
+    it('emits signOut when sign out button is clicked', async () => {
+        const wrapper = mount(DashboardShell, { ...localeProvide })
+        const signOutButton = wrapper.findAll('button').find(b => b.text() === 'Sign out')
+        expect(signOutButton).toBeTruthy()
+        await signOutButton!.trigger('click')
+        expect(wrapper.emitted('signOut')).toBeTruthy()
+        expect(wrapper.emitted('signOut')!.length).toBe(1)
+    })
+
+    it('renders BrutxUI brand text in sidebar', () => {
+        const wrapper = mount(DashboardShell, { ...localeProvide })
+        expect(wrapper.find('aside').text()).toContain('BrutxUI')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DashboardShell, {
+            props: { class: 'my-shell' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-shell')
+    })
+})
diff --git a/packages/ui/src/components/dashboard-stats.tsx b/packages/ui/src/components/dashboard-stats.tsx
deleted file mode 100644
index a65b6d2..0000000
--- a/packages/ui/src/components/dashboard-stats.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Card, CardHeader, CardContent, CardTitle, CardDescription } from './card';
-import { Badge } from './badge';
-import { ArrowUpRight, ArrowDownRight, TrendingUp, Users, Zap, Wallet, MoreHorizontal } from 'lucide-react';
-
-export interface StatItem {
-    title: string;
-    value: string;
-    description: string;
-    change: string;
-    trend: 'up' | 'down' | 'neutral';
-    icon: React.ComponentType<{ className?: string }>;
-    accentColor: string;
-    progress?: number;
-}
-
-const defaultStats: StatItem[] = [
-    {
-        title: 'Monthly Recurring Revenue',
-        value: '$24,890',
-        description: 'Total subscription earnings',
-        change: '+14.2%',
-        trend: 'up',
-        icon: Wallet,
-        accentColor: '#FF6B6B',
-        progress: 78,
-    },
-    {
-        title: 'Active Subscribers',
-        value: '1,429',
-        description: 'Subscribed active users',
-        change: '+8.3%',
-        trend: 'up',
-        icon: Users,
-        accentColor: '#4ECDC4',
-        progress: 62,
-    },
-    {
-        title: 'API Request Load',
-        value: '4.8M',
-        description: 'Requests in the last 24h',
-        change: '-2.1%',
-        trend: 'down',
-        icon: Zap,
-        accentColor: '#FFE66D',
-        progress: 45,
-    },
-];
-
-export interface DashboardStatsProps extends React.HTMLAttributes<HTMLDivElement> {
-    stats?: StatItem[];
-    title?: string;
-    subtitle?: string;
-}
-
-export function DashboardStats({
-    stats = defaultStats,
-    title = 'Overview Performance',
-    subtitle = 'Real-time telemetry and operational growth metrics.',
-    className,
-    ...props
-}: DashboardStatsProps) {
-    return (
-        <div
-            className={`w-full py-8 px-4 md:px-8 bg-gray-50 dark:bg-gray-950 text-black dark:text-white ${
-                className || ''
-            }`}
-            {...props}
-        >
-            <div className="max-w-6xl mx-auto">
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
-                    <div>
-                        <h2 className="text-3xl font-black uppercase tracking-tight flex items-center gap-2">
-                            <TrendingUp className="h-8 w-8 text-[#FF6B6B] stroke-[3]" />
-                            {title}
-                        </h2>
-                        <p className="text-sm font-semibold text-gray-500 dark:text-gray-400 mt-1">
-                            {subtitle}
-                        </p>
-                    </div>
-
-                    <div className="flex items-center gap-3">
-                        <Badge variant="outline" className="cursor-pointer hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black">
-                            Last 30 Days
-                        </Badge>
-                        <Badge variant="primary" className="cursor-pointer hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 transition-all">
-                            Export PDF
-                        </Badge>
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    {stats.map((stat, idx) => {
-                        const Icon = stat.icon;
-
-                        return (
-                            <Card
-                                key={idx}
-                                variant="interactive"
-                                className="bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal hover:shadow-brutal-lg flex flex-col justify-between"
-                            >
-                                <CardHeader className="p-6 pb-2 flex flex-row items-center justify-between space-y-0">
-                                    <div className="flex flex-col">
-                                        <CardTitle className="text-sm font-black uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                                            {stat.title}
-                                        </CardTitle>
-                                        <CardDescription className="mt-1 text-xs font-semibold">
-                                            {stat.description}
-                                        </CardDescription>
-                                    </div>
-                                    <div
-                                        className="p-3 border-3 border-brutal shadow-brutal-sm flex items-center justify-center"
-                                        style={{ backgroundColor: stat.accentColor }}
-                                    >
-                                        <Icon className="h-5 w-5 text-black stroke-[3]" />
-                                    </div>
-                                </CardHeader>
-
-                                <CardContent className="p-6 pt-2">
-                                    <div className="flex items-baseline justify-between mb-4">
-                                        <span className="text-4xl font-black tracking-tight">{stat.value}</span>
-                                        <Badge
-                                            variant={stat.trend === 'up' ? 'success' : stat.trend === 'down' ? 'danger' : 'default'}
-                                            className="font-black text-xs border-2 gap-1"
-                                        >
-                                            {stat.trend === 'up' ? (
-                                                <ArrowUpRight className="h-3.5 w-3.5 stroke-[3]" />
-                                            ) : (
-                                                <ArrowDownRight className="h-3.5 w-3.5 stroke-[3]" />
-                                            )}
-                                            {stat.change}
-                                        </Badge>
-                                    </div>
-
-                                    {stat.progress !== undefined && (
-                                        <div className="mt-4 pt-4 border-t-2 border-dashed border-gray-200 dark:border-gray-800">
-                                            <div className="flex justify-between text-xs font-bold mb-1.5">
-                                                <span className="text-gray-500 dark:text-gray-400">TARGET LIMIT</span>
-                                                <span>{stat.progress}%</span>
-                                            </div>
-                                            <div className="w-full h-3 border-2 border-brutal bg-gray-100 dark:bg-gray-800 overflow-hidden">
-                                                <div
-                                                    className="h-full border-r-2 border-brutal transition-all duration-500"
-                                                    style={{
-                                                        width: `${stat.progress}%`,
-                                                        backgroundColor: stat.accentColor,
-                                                    }}
-                                                />
-                                            </div>
-                                        </div>
-                                    )}
-                                </CardContent>
-                            </Card>
-                        );
-                    })}
-                </div>
-
-                <div className="mt-8 p-5 bg-[#4ECDC4] text-black border-3 border-black shadow-brutal flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                    <div>
-                        <span className="font-black uppercase mr-2 text-xs border-2 border-black px-2 py-0.5 bg-white">
-                            INSIGHT
-                        </span>
-                        <span className="font-black text-sm">
-                            Operational status is outstanding. Request volume is running 12% below cluster threshold limit.
-                        </span>
-                    </div>
-                    <button className="flex items-center gap-1 font-black text-xs uppercase border-3 border-black px-3 py-1.5 bg-white shadow-brutal-sm active:translate-y-0.5 active:shadow-none transition-all">
-                        Details <MoreHorizontal className="h-4 w-4 stroke-[3]" />
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-}
-DashboardStats.displayName = 'DashboardStats';
diff --git a/packages/ui/src/components/dashboard-stats/DashboardStats.vue b/packages/ui/src/components/dashboard-stats/DashboardStats.vue
new file mode 100644
index 0000000..109b61d
--- /dev/null
+++ b/packages/ui/src/components/dashboard-stats/DashboardStats.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { ArrowUpRight, ArrowDownRight } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardContent from '../card/CardContent.vue'
+import CardDescription from '../card/CardDescription.vue'
+import Badge from '../badge/Badge.vue'
+
+type AccentColorKey = 'primary' | 'secondary' | 'accent' | 'destructive' | 'success' | 'info'
+
+const ACCENT_COLOR_MAP: Record<AccentColorKey, string> = {
+    primary: 'bg-brutal-primary',
+    secondary: 'bg-brutal-secondary',
+    accent: 'bg-brutal-accent',
+    destructive: 'bg-brutal-destructive',
+    success: 'bg-brutal-success',
+    info: 'bg-brutal-info',
+}
+
+export interface StatItem {
+    title: string
+    value: string
+    description: string
+    change: string
+    trend: 'up' | 'down' | 'neutral'
+    icon: Component
+    accentColor?: AccentColorKey
+    progress?: number
+}
+
+interface DashboardStatsProps {
+    stats?: StatItem[]
+    title?: string
+    subtitle?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<DashboardStatsProps>(), {
+    title: 'Overview Performance',
+    subtitle: '',
+    stats: () => [],
+    class: '',
+})
+
+const emit = defineEmits<{
+    'stat-click': [index: number]
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))
+
+function getIconClasses(stat: StatItem) {
+    return cn(
+        'h-8 w-8 flex items-center justify-center border-3 border-brutal',
+        stat.accentColor ? ACCENT_COLOR_MAP[stat.accentColor] : 'bg-brutal-primary'
+    )
+}
+
+function getTrendIconClasses(stat: StatItem) {
+    return cn(
+        'h-4 w-4 stroke-[3]',
+        stat.trend === 'up' ? 'text-brutal-success' : 'text-brutal-destructive'
+    )
+}
+
+function getProgressClasses(stat: StatItem) {
+    return cn(
+        'h-full transition-all',
+        stat.accentColor ? ACCENT_COLOR_MAP[stat.accentColor] : 'bg-brutal-primary'
+    )
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="mb-8">
+            <h2 class="text-2xl font-black tracking-tight">
+{{ title }}
+</h2>
+            <p v-if="subtitle" class="mt-1 text-brutal-muted-foreground font-medium">
+{{ subtitle }}
+</p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <Card v-for="(stat, index) in stats" :key="stat.title" variant="default" class="cursor-pointer" @click="emit('stat-click', index)">
+                <CardHeader class="pb-2">
+                    <div class="flex items-center justify-between">
+                        <CardDescription>{{ stat.title }}</CardDescription>
+                        <div :class="getIconClasses(stat)">
+                            <component :is="stat.icon" class="h-4 w-4 stroke-[3]" />
+                        </div>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <div class="text-2xl font-black">
+{{ stat.value }}
+</div>
+                    <div class="flex items-center gap-2 mt-1">
+                        <component :is="stat.trend === 'up' ? ArrowUpRight : ArrowDownRight" :class="getTrendIconClasses(stat)" />
+                        <Badge :variant="stat.trend === 'up' ? 'success' : stat.trend === 'down' ? 'danger' : 'default'" size="sm">
+{{ stat.change }}
+</Badge>
+                    </div>
+                    <p class="text-xs text-brutal-muted-foreground mt-1 font-medium">
+{{ stat.description }}
+</p>
+                    <div v-if="stat.progress !== undefined" class="mt-3 h-2 bg-brutal-muted border-3 border-brutal overflow-hidden">
+                        <div :class="getProgressClasses(stat)" :style="{ width: `${stat.progress}%` }" />
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/dashboard-stats/dashboard-stats.test.ts b/packages/ui/src/components/dashboard-stats/dashboard-stats.test.ts
new file mode 100644
index 0000000..97e9cb0
--- /dev/null
+++ b/packages/ui/src/components/dashboard-stats/dashboard-stats.test.ts
@@ -0,0 +1,124 @@
+import { mount } from '@vue/test-utils'
+import { Activity } from 'lucide-vue-next'
+import DashboardStats from './DashboardStats.vue'
+
+describe('DashboardStats', () => {
+    const mockStats = [
+        {
+            title: 'Revenue',
+            value: '$12,345',
+            description: 'Total revenue this month',
+            change: '+12%',
+            trend: 'up' as const,
+            icon: Activity,
+        },
+        {
+            title: 'Users',
+            value: '1,234',
+            description: 'Active users',
+            change: '-5%',
+            trend: 'down' as const,
+            icon: Activity,
+        },
+        {
+            title: 'Orders',
+            value: '567',
+            description: 'Total orders',
+            change: '0%',
+            trend: 'neutral' as const,
+            icon: Activity,
+            accentColor: 'secondary' as const,
+            progress: 75,
+        },
+    ]
+
+    it('renders with default props', () => {
+        const wrapper = mount(DashboardStats)
+        expect(wrapper.find('h2').text()).toBe('Overview Performance')
+    })
+
+    it('renders with stats prop', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { stats: mockStats },
+        })
+        const cards = wrapper.findAll('.grid > div')
+        expect(cards.length).toBe(3)
+    })
+
+    it('shows stat labels', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { stats: mockStats },
+        })
+        expect(wrapper.text()).toContain('Revenue')
+        expect(wrapper.text()).toContain('Users')
+        expect(wrapper.text()).toContain('Orders')
+    })
+
+    it('shows stat values', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { stats: mockStats },
+        })
+        expect(wrapper.text()).toContain('$12,345')
+        expect(wrapper.text()).toContain('1,234')
+        expect(wrapper.text()).toContain('567')
+    })
+
+    it('shows stat change values', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { stats: mockStats },
+        })
+        expect(wrapper.text()).toContain('+12%')
+        expect(wrapper.text()).toContain('-5%')
+    })
+
+    it('shows stat descriptions', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { stats: mockStats },
+        })
+        expect(wrapper.text()).toContain('Total revenue this month')
+        expect(wrapper.text()).toContain('Active users')
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { title: 'My Dashboard' },
+        })
+        expect(wrapper.find('h2').text()).toBe('My Dashboard')
+    })
+
+    it('renders subtitle when provided', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { subtitle: 'Monthly overview' },
+        })
+        expect(wrapper.text()).toContain('Monthly overview')
+    })
+
+    it('does not render subtitle when not provided', () => {
+        const wrapper = mount(DashboardStats)
+        const subtitleEl = wrapper.find('p.text-brutal-muted-foreground')
+        expect(subtitleEl.exists()).toBe(false)
+    })
+
+    it('renders progress bar when progress is defined', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { stats: mockStats },
+        })
+        const progressBar = wrapper.find('[style]')
+        expect(progressBar.exists()).toBe(true)
+    })
+
+    it('renders with empty stats array', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { stats: [] },
+        })
+        const cards = wrapper.findAll('.grid > div')
+        expect(cards.length).toBe(0)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DashboardStats, {
+            props: { class: 'my-stats' },
+        })
+        expect(wrapper.classes()).toContain('my-stats')
+    })
+})
diff --git a/packages/ui/src/components/data-table-section/DataTableSection.vue b/packages/ui/src/components/data-table-section/DataTableSection.vue
new file mode 100644
index 0000000..5b4c532
--- /dev/null
+++ b/packages/ui/src/components/data-table-section/DataTableSection.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-vue-next'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Table from '../table/Table.vue'
+import TableHeader from '../table/TableHeader.vue'
+import TableBody from '../table/TableBody.vue'
+import TableRow from '../table/TableRow.vue'
+import TableHead from '../table/TableHead.vue'
+import TableCell from '../table/TableCell.vue'
+import Pagination from '../pagination/Pagination.vue'
+import Input from '../input/Input.vue'
+
+export interface ColumnDef {
+    key: string
+    label: string
+    sortable?: boolean
+}
+
+interface DataTableSectionProps {
+    title?: string
+    columns?: ColumnDef[]
+    rows?: Record<string, unknown>[]
+    searchable?: boolean
+    pageSize?: number
+    class?: string
+}
+
+const DEFAULT_PAGE_SIZE = 10
+
+const props = withDefaults(defineProps<DataTableSectionProps>(), {
+    title: undefined,
+    columns: () => [],
+    rows: () => [],
+    searchable: true,
+    pageSize: DEFAULT_PAGE_SIZE,
+    class: '',
+})
+
+const emit = defineEmits<{
+    'row-click': [row: Record<string, unknown>]
+    'sort': [payload: { key: string; direction: 'asc' | 'desc' }]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('dataTableSection.defaultTitle'))
+const resolvedSearchPlaceholder = computed(() => t('dataTableSection.searchPlaceholder'))
+const resolvedNoResults = computed(() => t('dataTableSection.noResults'))
+
+const searchQuery = ref('')
+const sortKey = ref('')
+const sortDirection = ref<'asc' | 'desc'>('asc')
+const currentPage = ref(1)
+
+const filteredRows = computed(() => {
+    if (!searchQuery.value) return props.rows
+    const query = searchQuery.value.toLowerCase()
+    return props.rows.filter(row =>
+        Object.values(row).some(val =>
+            String(val).toLowerCase().includes(query)
+        )
+    )
+})
+
+const sortedRows = computed(() => {
+    if (!sortKey.value) return filteredRows.value
+    const key = sortKey.value
+    const dir = sortDirection.value
+    return [...filteredRows.value].sort((a, b) => {
+        const aVal = a[key]
+        const bVal = b[key]
+        if (aVal == null && bVal == null) return 0
+        if (aVal == null) return dir === 'asc' ? -1 : 1
+        if (bVal == null) return dir === 'asc' ? 1 : -1
+        const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true })
+        return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(sortedRows.value.length / props.pageSize)))
+
+const paginatedRows = computed(() => {
+    const start = (currentPage.value - 1) * props.pageSize
+    return sortedRows.value.slice(start, start + props.pageSize)
+})
+
+function handleSort(key: string) {
+    if (sortKey.value === key) {
+        sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+    } else {
+        sortKey.value = key
+        sortDirection.value = 'asc'
+    }
+    currentPage.value = 1
+    emit('sort', { key, direction: sortDirection.value })
+}
+
+function handleRowClick(row: Record<string, unknown>) {
+    emit('row-click', row)
+}
+
+function handleSearch() {
+    currentPage.value = 1
+}
+
+const rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))
+
+const columnClasses = computed(() =>
+    props.columns.map(col =>
+        cn(col.sortable && 'cursor-pointer select-none active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all')
+    )
+)
+
+function sortIcon(key: string) {
+    if (sortKey.value !== key) return ArrowUpDown
+    return sortDirection.value === 'asc' ? ArrowUp : ArrowDown
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header">
+            <div class="mb-6">
+                <h2 class="text-3xl font-black tracking-tight">
+                    {{ resolvedTitle }}
+                </h2>
+            </div>
+        </slot>
+
+        <slot>
+            <div v-if="searchable" class="mb-4">
+                <Input
+                    v-model="searchQuery"
+                    :placeholder="resolvedSearchPlaceholder"
+                    @update:model-value="handleSearch"
+                />
+            </div>
+
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        <TableHead
+                            v-for="(col, index) in columns"
+                            :key="col.key"
+                            :class="columnClasses[index]"
+                            @click="col.sortable && handleSort(col.key)"
+                        >
+                            <span class="inline-flex items-center gap-1">
+                                {{ col.label }}
+                                <component
+                                    :is="sortIcon(col.key)"
+                                    v-if="col.sortable"
+                                    class="h-4 w-4 stroke-[3]"
+                                />
+                            </span>
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    <template v-if="paginatedRows.length > 0">
+                        <TableRow
+                            v-for="(row, rowIndex) in paginatedRows"
+                            :key="rowIndex"
+                            class="cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all"
+                            @click="handleRowClick(row)"
+                        >
+                            <TableCell v-for="col in columns" :key="col.key">
+                                {{ row[col.key] }}
+                            </TableCell>
+                        </TableRow>
+                    </template>
+                    <TableRow v-else>
+                        <TableCell :colspan="columns.length || 1" class="text-center text-brutal-muted-foreground font-bold py-8">
+                            {{ resolvedNoResults }}
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+
+            <div v-if="totalPages > 1" class="mt-4 flex justify-center">
+                <Pagination
+                    :current-page="currentPage"
+                    :total-pages="totalPages"
+                    @update:current-page="currentPage = $event"
+                />
+            </div>
+        </slot>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/data-table-section/data-table-section.test.ts b/packages/ui/src/components/data-table-section/data-table-section.test.ts
new file mode 100644
index 0000000..15efadd
--- /dev/null
+++ b/packages/ui/src/components/data-table-section/data-table-section.test.ts
@@ -0,0 +1,155 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import DataTableSection from './DataTableSection.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockColumns = [
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'email', label: 'Email' },
+    { key: 'role', label: 'Role', sortable: true },
+]
+
+const mockRows = [
+    { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
+    { name: 'Bob', email: 'bob@example.com', role: 'User' },
+    { name: 'Charlie', email: 'charlie@example.com', role: 'Editor' },
+]
+
+describe('DataTableSection', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(DataTableSection, { ...localeProvide })
+        expect(wrapper.find('h2').exists()).toBe(true)
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(DataTableSection, {
+            props: { title: 'User List' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').text()).toBe('User List')
+    })
+
+    it('renders column headers', () => {
+        const wrapper = mount(DataTableSection, {
+            props: { columns: mockColumns },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Name')
+        expect(wrapper.text()).toContain('Email')
+        expect(wrapper.text()).toContain('Role')
+    })
+
+    it('renders rows', () => {
+        const wrapper = mount(DataTableSection, {
+            props: { columns: mockColumns, rows: mockRows },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Alice')
+        expect(wrapper.text()).toContain('bob@example.com')
+        expect(wrapper.text()).toContain('Editor')
+    })
+
+    it('shows search input when searchable is true', () => {
+        const wrapper = mount(DataTableSection, {
+            props: { searchable: true },
+            ...localeProvide,
+        })
+        expect(wrapper.find('input').exists()).toBe(true)
+    })
+
+    it('hides search input when searchable is false', () => {
+        const wrapper = mount(DataTableSection, {
+            props: { searchable: false },
+            ...localeProvide,
+        })
+        expect(wrapper.find('input').exists()).toBe(false)
+    })
+
+    it('emits sort event when sortable column header is clicked', async () => {
+        const wrapper = mount(DataTableSection, {
+            props: { columns: mockColumns, rows: mockRows },
+            ...localeProvide,
+        })
+        const headers = wrapper.findAll('th')
+        await headers[0].trigger('click')
+        expect(wrapper.emitted('sort')).toBeTruthy()
+        expect(wrapper.emitted('sort')![0]).toEqual([{ key: 'name', direction: 'asc' }])
+    })
+
+    it('emits row-click event when a row is clicked', async () => {
+        const wrapper = mount(DataTableSection, {
+            props: { columns: mockColumns, rows: mockRows },
+            ...localeProvide,
+        })
+        const rows = wrapper.findAll('tbody tr')
+        await rows[0].trigger('click')
+        expect(wrapper.emitted('row-click')).toBeTruthy()
+        expect(wrapper.emitted('row-click')![0]).toEqual([mockRows[0]])
+    })
+
+    it('shows no results message when rows are empty', () => {
+        const wrapper = mount(DataTableSection, {
+            props: { columns: mockColumns, rows: [] },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('No matching results found')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DataTableSection, {
+            props: { class: 'my-table' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-table')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(DataTableSection, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(DataTableSection, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(DataTableSection, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+
+    it('filters rows by search query', async () => {
+        const wrapper = mount(DataTableSection, {
+            props: { columns: mockColumns, rows: mockRows, searchable: true },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input')
+        await input.setValue('Alice')
+        expect(wrapper.text()).toContain('Alice')
+        expect(wrapper.text()).not.toContain('Bob')
+    })
+
+    it('shows pagination when total pages exceed 1', () => {
+        const manyRows = Array.from({ length: 15 }, (_, i) => ({
+            name: `User ${i + 1}`,
+            email: `user${i + 1}@example.com`,
+            role: 'User',
+        }))
+        const wrapper = mount(DataTableSection, {
+            props: { columns: mockColumns, rows: manyRows, pageSize: 10 },
+            ...localeProvide,
+        })
+        expect(wrapper.find('nav').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
deleted file mode 100644
index b8b2cb1..0000000
--- a/packages/ui/src/components/dialog.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-        ref={ref}
-        className={cn(
-            'fixed inset-0 z-50 bg-black/50',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            className
-        )}
-        {...props}
-    />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-        showCloseButton?: boolean;
-    }
->(({ className, children, showCloseButton = true, ...props }, ref) => (
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogPrimitive.Content
-            ref={ref}
-            className={cn(
-                'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
-                'w-full max-w-lg p-6',
-                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal-xl',
-                'duration-200',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
-                'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-                className
-            )}
-            {...props}
-        >
-            {children}
-            {showCloseButton && (
-                <DialogPrimitive.Close
-                    className={cn(
-                        'absolute right-4 top-4',
-                        'h-8 w-8 flex items-center justify-center',
-                        'border-3 border-brutal rounded-brutal bg-brutal-bg text-brutal-fg',
-                        'shadow-brutal-sm',
-                        'transition-all duration-150',
-                        'hover:bg-brutal-destructive hover:text-brutal-fg',
-                        'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',
-                        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
-                        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'
-                    )}
-                >
-                     <X className="h-4 w-4 stroke-[3]" />
-                     <span className="sr-only">Close</span>
-                </DialogPrimitive.Close>
-            )}
-        </DialogPrimitive.Content>
-    </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col space-y-2 pb-4 border-b-3 border-brutal',
-            className
-        )}
-        {...props}
-    />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',
-            className
-        )}
-        {...props}
-    />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-        ref={ref}
-        className={cn('text-xl font-black tracking-tight', className)}
-        {...props}
-    />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Description
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-    Dialog,
-    DialogPortal,
-    DialogOverlay,
-    DialogTrigger,
-    DialogClose,
-    DialogContent,
-    DialogHeader,
-    DialogFooter,
-    DialogTitle,
-    DialogDescription,
-};
diff --git a/packages/ui/src/components/dialog/DialogContent.vue b/packages/ui/src/components/dialog/DialogContent.vue
new file mode 100644
index 0000000..aa3bf27
--- /dev/null
+++ b/packages/ui/src/components/dialog/DialogContent.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    DialogPortal as DialogPortalPrimitive,
+    DialogContent as DialogContentPrimitive,
+    DialogClose as DialogClosePrimitive,
+} from 'reka-ui'
+import { X } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import DialogOverlay from './DialogOverlay.vue'
+import { useLocale } from '@/composables/useLocale'
+
+interface DialogContentProps {
+    showCloseButton?: boolean
+    forceMount?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<DialogContentProps>(), {
+    showCloseButton: true,
+    forceMount: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const contentClasses = computed(() =>
+    cn(
+        'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
+        'w-full max-w-lg p-6',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal-xl rounded-brutal',
+        'duration-200',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        props.class
+    )
+)
+
+const closeClasses = computed(() =>
+    cn(
+        'absolute right-4 top-4',
+        'h-8 w-8 flex items-center justify-center',
+        'border-3 border-brutal bg-brutal-bg text-brutal-fg',
+        'shadow-brutal-sm',
+        'transition-all duration-150',
+        'hover:bg-brutal-destructive hover:text-brutal-fg',
+        'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'
+    )
+)
+</script>
+
+<template>
+    <DialogPortalPrimitive>
+        <DialogOverlay />
+        <DialogContentPrimitive :class="contentClasses" :force-mount="props.forceMount">
+            <slot />
+            <DialogClosePrimitive v-if="showCloseButton" :class="closeClasses">
+                <X class="h-4 w-4 stroke-[3]" />
+                <span class="sr-only">{{ t('dialog.close') }}</span>
+            </DialogClosePrimitive>
+        </DialogContentPrimitive>
+    </DialogPortalPrimitive>
+</template>
diff --git a/packages/ui/src/components/dialog/DialogDescription.vue b/packages/ui/src/components/dialog/DialogDescription.vue
new file mode 100644
index 0000000..bc5d469
--- /dev/null
+++ b/packages/ui/src/components/dialog/DialogDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogDescription as DialogDescriptionPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DialogDescriptionProps {
+    class?: string
+}
+
+const props = defineProps<DialogDescriptionProps>()
+
+const classes = computed(() =>
+    cn('text-sm text-brutal-muted-foreground font-medium', props.class)
+)
+</script>
+
+<template>
+    <DialogDescriptionPrimitive :class="classes">
+        <slot />
+    </DialogDescriptionPrimitive>
+</template>
diff --git a/packages/ui/src/components/dialog/DialogFooter.vue b/packages/ui/src/components/dialog/DialogFooter.vue
new file mode 100644
index 0000000..749516f
--- /dev/null
+++ b/packages/ui/src/components/dialog/DialogFooter.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface DialogFooterProps {
+    class?: string
+}
+
+const props = defineProps<DialogFooterProps>()
+
+const classes = computed(() =>
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/dialog/DialogHeader.vue b/packages/ui/src/components/dialog/DialogHeader.vue
new file mode 100644
index 0000000..56f6884
--- /dev/null
+++ b/packages/ui/src/components/dialog/DialogHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface DialogHeaderProps {
+    class?: string
+}
+
+const props = defineProps<DialogHeaderProps>()
+
+const classes = computed(() =>
+    cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/dialog/DialogOverlay.vue b/packages/ui/src/components/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..a892b9d
--- /dev/null
+++ b/packages/ui/src/components/dialog/DialogOverlay.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogOverlay as DialogOverlayPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DialogOverlayProps {
+    class?: string
+}
+
+const props = defineProps<DialogOverlayProps>()
+
+const classes = computed(() =>
+    cn(
+        'fixed inset-0 z-50 bg-brutal-overlay',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DialogOverlayPrimitive :class="classes" />
+</template>
diff --git a/packages/ui/src/components/dialog/DialogTitle.vue b/packages/ui/src/components/dialog/DialogTitle.vue
new file mode 100644
index 0000000..e165ea7
--- /dev/null
+++ b/packages/ui/src/components/dialog/DialogTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogTitle as DialogTitlePrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DialogTitleProps {
+    class?: string
+}
+
+const props = defineProps<DialogTitleProps>()
+
+const classes = computed(() =>
+    cn('text-xl font-black tracking-tight', props.class)
+)
+</script>
+
+<template>
+    <DialogTitlePrimitive :class="classes">
+        <slot />
+    </DialogTitlePrimitive>
+</template>
diff --git a/packages/ui/src/components/dialog/dialog.test.ts b/packages/ui/src/components/dialog/dialog.test.ts
new file mode 100644
index 0000000..c158791
--- /dev/null
+++ b/packages/ui/src/components/dialog/dialog.test.ts
@@ -0,0 +1,131 @@
+import { mount } from '@vue/test-utils'
+import DialogOverlay from './DialogOverlay.vue'
+import DialogContent from './DialogContent.vue'
+import DialogHeader from './DialogHeader.vue'
+import DialogFooter from './DialogFooter.vue'
+import DialogTitle from './DialogTitle.vue'
+import DialogDescription from './DialogDescription.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('DialogOverlay', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(DialogOverlay, {
+            global: { stubs: { DialogOverlay: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('fixed')
+        expect(wrapper.classes()).toContain('inset-0')
+        expect(wrapper.classes()).toContain('z-50')
+        expect(wrapper.classes()).toContain('bg-brutal-overlay')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DialogOverlay, {
+            props: { class: 'custom-overlay' },
+            global: { stubs: { DialogOverlay: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-overlay')
+    })
+})
+
+describe('DialogContent', () => {
+    const contentStubs = {
+        DialogPortal: primitiveStub,
+        DialogOverlay: primitiveStub,
+        DialogContent: {
+            template: '<div data-testid="dialog-content"><slot /></div>',
+        },
+        DialogClose: primitiveStub,
+    }
+
+    it('renders with brutal styling classes', () => {
+        const wrapper = mount(DialogContent, {
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="dialog-content"]')
+        expect(content.classes()).toContain('border-3')
+        expect(content.classes()).toContain('border-brutal')
+        expect(content.classes()).toContain('shadow-brutal-xl')
+        expect(content.classes()).toContain('bg-brutal-bg')
+        expect(content.classes()).toContain('text-brutal-fg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DialogContent, {
+            props: { class: 'custom-content' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="dialog-content"]')
+        expect(content.classes()).toContain('custom-content')
+    })
+})
+
+describe('DialogHeader', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DialogHeader, {
+            slots: { default: 'Header text' },
+        })
+        expect(wrapper.text()).toBe('Header text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DialogHeader, {
+            props: { class: 'custom-header' },
+        })
+        expect(wrapper.classes()).toContain('custom-header')
+    })
+})
+
+describe('DialogFooter', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DialogFooter, {
+            slots: { default: 'Footer text' },
+        })
+        expect(wrapper.text()).toBe('Footer text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DialogFooter, {
+            props: { class: 'custom-footer' },
+        })
+        expect(wrapper.classes()).toContain('custom-footer')
+    })
+})
+
+describe('DialogTitle', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DialogTitle, {
+            slots: { default: 'Title text' },
+            global: { stubs: { DialogTitle: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Title text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DialogTitle, {
+            props: { class: 'custom-title' },
+            global: { stubs: { DialogTitle: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-title')
+    })
+})
+
+describe('DialogDescription', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DialogDescription, {
+            slots: { default: 'Description text' },
+            global: { stubs: { DialogDescription: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Description text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DialogDescription, {
+            props: { class: 'custom-desc' },
+            global: { stubs: { DialogDescription: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-desc')
+    })
+})
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
deleted file mode 100644
index ffcfa6d..0000000
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-        inset?: boolean;
-    }
->(({ className, inset, children, ...props }, ref) => (
-    <DropdownMenuPrimitive.SubTrigger
-        ref={ref}
-        className={cn(
-            'flex cursor-pointer select-none items-center px-3 py-2',
-            'font-bold outline-none',
-            'focus:bg-brutal-accent focus:text-brutal-fg data-[state=open]:bg-brutal-accent data-[state=open]:text-brutal-fg',
-            inset && 'pl-8',
-            className
-        )}
-        {...props}
-    >
-        {children}
-        <ChevronRight className="ml-auto h-4 w-4 stroke-[3]" />
-    </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.SubContent
-        ref={ref}
-        className={cn(
-            'z-50 min-w-[8rem] overflow-hidden p-1',
-            'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-            'data-[side=bottom]:slide-in-from-top-2',
-            'data-[side=left]:slide-in-from-right-2',
-            'data-[side=right]:slide-in-from-left-2',
-            'data-[side=top]:slide-in-from-bottom-2',
-            className
-        )}
-        {...props}
-    />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 6, ...props }, ref) => (
-    <DropdownMenuPrimitive.Portal>
-        <DropdownMenuPrimitive.Content
-            ref={ref}
-            sideOffset={sideOffset}
-            className={cn(
-                'z-50 min-w-[8rem] overflow-hidden p-1',
-                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[side=bottom]:slide-in-from-top-2',
-                'data-[side=left]:slide-in-from-right-2',
-                'data-[side=right]:slide-in-from-left-2',
-                'data-[side=top]:slide-in-from-bottom-2',
-                className
-            )}
-            {...props}
-        />
-    </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-        inset?: boolean;
-    }
->(({ className, inset, ...props }, ref) => (
-    <DropdownMenuPrimitive.Item
-        ref={ref}
-        className={cn(
-            'relative flex cursor-pointer select-none items-center px-3 py-2',
-            'font-bold outline-none transition-colors',
-            'focus:bg-brutal-accent focus:text-brutal-fg',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            'hover:bg-brutal-muted',
-            inset && 'pl-8',
-            className
-        )}
-        {...props}
-    />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-    <DropdownMenuPrimitive.CheckboxItem
-        ref={ref}
-        className={cn(
-            'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',
-            'font-bold outline-none transition-colors',
-            'focus:bg-brutal-accent focus:text-brutal-fg',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            className
-        )}
-        checked={checked}
-        {...props}
-    >
-        <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-            <DropdownMenuPrimitive.ItemIndicator>
-                <Check className="h-4 w-4 stroke-[3]" />
-            </DropdownMenuPrimitive.ItemIndicator>
-        </span>
-        {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-    <DropdownMenuPrimitive.RadioItem
-        ref={ref}
-        className={cn(
-            'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',
-            'font-bold outline-none transition-colors',
-            'focus:bg-brutal-accent focus:text-brutal-fg',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            className
-        )}
-        {...props}
-    >
-        <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-            <DropdownMenuPrimitive.ItemIndicator>
-                <Circle className="h-2 w-2 fill-current" />
-            </DropdownMenuPrimitive.ItemIndicator>
-        </span>
-        {children}
-    </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-        inset?: boolean;
-    }
->(({ className, inset, ...props }, ref) => (
-    <DropdownMenuPrimitive.Label
-        ref={ref}
-        className={cn('px-3 py-2 text-sm font-black tracking-wide', inset && 'pl-8', className)}
-        {...props}
-    />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-    React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.Separator
-        ref={ref}
-        className={cn('-mx-1 my-1 h-[3px] bg-[var(--brutal-border-color,#000)]', className)}
-        {...props}
-    />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-    return (
-        <span
-            className={cn('ml-auto text-xs tracking-widest opacity-60 font-bold', className)}
-            {...props}
-        />
-    );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuCheckboxItem,
-    DropdownMenuRadioItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuGroup,
-    DropdownMenuPortal,
-    DropdownMenuSub,
-    DropdownMenuSubContent,
-    DropdownMenuSubTrigger,
-    DropdownMenuRadioGroup,
-};
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..9c83b5d
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,
+    DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
+} from 'reka-ui'
+import { Check } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuCheckboxItemProps {
+    modelValue?: boolean | 'indeterminate'
+    class?: string
+}
+
+const props = defineProps<DropdownMenuCheckboxItemProps>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean | 'indeterminate']
+}>()
+
+const classes = computed(() =>
+    cn(
+        'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',
+        'font-bold outline-none transition-colors',
+        'focus:bg-brutal-accent focus:text-brutal-fg',
+        'focus-visible:ring-2 focus-visible:ring-brutal-ring',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DropdownMenuCheckboxItemPrimitive :model-value="modelValue" :class="classes" @update:model-value="emit('update:modelValue', $event)">
+        <span class="absolute left-2 flex h-4 w-4 items-center justify-center">
+            <DropdownMenuItemIndicatorPrimitive>
+                <Check class="h-4 w-4 stroke-[3]" />
+            </DropdownMenuItemIndicatorPrimitive>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItemPrimitive>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..9cbe11b
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    DropdownMenuPortal as DropdownMenuPortalPrimitive,
+    DropdownMenuContent as DropdownMenuContentPrimitive,
+} from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuContentProps {
+    sideOffset?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<DropdownMenuContentProps>(), {
+    sideOffset: 6,
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(
+        'z-50 min-w-[8rem] overflow-hidden p-1',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal rounded-brutal',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2',
+        'data-[side=top]:slide-in-from-bottom-2',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DropdownMenuPortalPrimitive>
+        <DropdownMenuContentPrimitive :side-offset="sideOffset" :class="classes">
+            <slot />
+        </DropdownMenuContentPrimitive>
+    </DropdownMenuPortalPrimitive>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..009ea6a
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DropdownMenuItem as DropdownMenuItemPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuItemProps {
+    inset?: boolean
+    class?: string
+}
+
+const props = defineProps<DropdownMenuItemProps>()
+
+const classes = computed(() =>
+    cn(
+        'relative flex cursor-pointer select-none items-center px-3 py-2',
+        'font-bold outline-none transition-colors',
+        'focus:bg-brutal-accent focus:text-brutal-fg',
+        'focus-visible:ring-2 focus-visible:ring-brutal-ring',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.inset && 'pl-8',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DropdownMenuItemPrimitive :class="classes">
+        <slot />
+    </DropdownMenuItemPrimitive>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..2982ef6
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DropdownMenuLabel as DropdownMenuLabelPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuLabelProps {
+    inset?: boolean
+    class?: string
+}
+
+const props = defineProps<DropdownMenuLabelProps>()
+
+const classes = computed(() =>
+    cn(
+        'px-3 py-2 text-sm font-black tracking-wide',
+        props.inset && 'pl-8',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DropdownMenuLabelPrimitive :class="classes">
+        <slot />
+    </DropdownMenuLabelPrimitive>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..2d60515
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    DropdownMenuRadioItem as DropdownMenuRadioItemPrimitive,
+    DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
+} from 'reka-ui'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuRadioItemProps {
+    value: string
+    class?: string
+}
+
+const props = defineProps<DropdownMenuRadioItemProps>()
+
+const classes = computed(() =>
+    cn(
+        'relative flex cursor-pointer select-none items-center py-2 pl-8 pr-3',
+        'font-bold outline-none transition-colors',
+        'focus:bg-brutal-accent focus:text-brutal-fg',
+        'focus-visible:ring-2 focus-visible:ring-brutal-ring',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DropdownMenuRadioItemPrimitive :value="value" :class="classes">
+        <span class="absolute left-2 flex h-4 w-4 items-center justify-center">
+            <DropdownMenuItemIndicatorPrimitive>
+                <Circle class="h-2 w-2 fill-current" />
+            </DropdownMenuItemIndicatorPrimitive>
+        </span>
+        <slot />
+    </DropdownMenuRadioItemPrimitive>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuSeparator.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..74807df
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DropdownMenuSeparator as DropdownMenuSeparatorPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuSeparatorProps {
+    class?: string
+}
+
+const props = defineProps<DropdownMenuSeparatorProps>()
+
+const classes = computed(() =>
+    cn('-mx-1 my-1 h-[3px] bg-brutal-fg', props.class)
+)
+</script>
+
+<template>
+    <DropdownMenuSeparatorPrimitive :class="classes" />
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuShortcut.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..177d2a5
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuShortcutProps {
+    class?: string
+}
+
+const props = defineProps<DropdownMenuShortcutProps>()
+
+const classes = computed(() =>
+    cn('ml-auto text-xs tracking-widest opacity-60 font-bold', props.class)
+)
+</script>
+
+<template>
+    <span :class="classes">
+        <slot />
+    </span>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..f8d255d
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DropdownMenuSubContent as DropdownMenuSubContentPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuSubContentProps {
+    class?: string
+}
+
+const props = defineProps<DropdownMenuSubContentProps>()
+
+const classes = computed(() =>
+    cn(
+        'z-50 min-w-[8rem] overflow-hidden p-1',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal rounded-brutal',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2',
+        'data-[side=top]:slide-in-from-bottom-2',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DropdownMenuSubContentPrimitive :class="classes">
+        <slot />
+    </DropdownMenuSubContentPrimitive>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..a77c406
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DropdownMenuSubTrigger as DropdownMenuSubTriggerPrimitive } from 'reka-ui'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface DropdownMenuSubTriggerProps {
+    inset?: boolean
+    class?: string
+}
+
+const props = defineProps<DropdownMenuSubTriggerProps>()
+
+const classes = computed(() =>
+    cn(
+        'flex cursor-pointer select-none items-center px-3 py-2',
+        'font-bold outline-none',
+        'focus:bg-brutal-accent focus:text-brutal-fg data-[state=open]:bg-brutal-accent data-[state=open]:text-brutal-fg',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'focus-visible:ring-2 focus-visible:ring-brutal-ring',
+        props.inset && 'pl-8',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <DropdownMenuSubTriggerPrimitive :class="classes">
+        <slot />
+        <ChevronRight class="ml-auto h-4 w-4 stroke-[3]" />
+    </DropdownMenuSubTriggerPrimitive>
+</template>
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.test.ts b/packages/ui/src/components/dropdown-menu/dropdown-menu.test.ts
new file mode 100644
index 0000000..2ee9407
--- /dev/null
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.test.ts
@@ -0,0 +1,200 @@
+import { mount } from '@vue/test-utils'
+import DropdownMenuContent from './DropdownMenuContent.vue'
+import DropdownMenuItem from './DropdownMenuItem.vue'
+import DropdownMenuCheckboxItem from './DropdownMenuCheckboxItem.vue'
+import DropdownMenuRadioItem from './DropdownMenuRadioItem.vue'
+import DropdownMenuLabel from './DropdownMenuLabel.vue'
+import DropdownMenuSeparator from './DropdownMenuSeparator.vue'
+import DropdownMenuShortcut from './DropdownMenuShortcut.vue'
+import DropdownMenuSubTrigger from './DropdownMenuSubTrigger.vue'
+import DropdownMenuSubContent from './DropdownMenuSubContent.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('DropdownMenuContent', () => {
+    const contentStubs = {
+        DropdownMenuPortal: primitiveStub,
+        DropdownMenuContent: {
+            template: '<div data-testid="dropdown-content"><slot /></div>',
+        },
+    }
+
+    it('renders with brutal styling classes', () => {
+        const wrapper = mount(DropdownMenuContent, {
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="dropdown-content"]')
+        expect(content.classes()).toContain('border-3')
+        expect(content.classes()).toContain('border-brutal')
+        expect(content.classes()).toContain('shadow-brutal')
+        expect(content.classes()).toContain('bg-brutal-bg')
+        expect(content.classes()).toContain('text-brutal-fg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuContent, {
+            props: { class: 'custom-content' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="dropdown-content"]')
+        expect(content.classes()).toContain('custom-content')
+    })
+})
+
+describe('DropdownMenuItem', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DropdownMenuItem, {
+            slots: { default: 'Menu item' },
+            global: { stubs: { DropdownMenuItem: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Menu item')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuItem, {
+            props: { class: 'custom-item' },
+            global: { stubs: { DropdownMenuItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+    })
+})
+
+describe('DropdownMenuCheckboxItem', () => {
+    const checkboxStubs = {
+        DropdownMenuCheckboxItem: primitiveStub,
+        DropdownMenuItemIndicator: primitiveStub,
+    }
+
+    it('renders slot content', () => {
+        const wrapper = mount(DropdownMenuCheckboxItem, {
+            slots: { default: 'Checkbox item' },
+            global: { stubs: checkboxStubs },
+        })
+        expect(wrapper.text()).toBe('Checkbox item')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuCheckboxItem, {
+            props: { class: 'custom-checkbox' },
+            global: { stubs: checkboxStubs },
+        })
+        expect(wrapper.classes()).toContain('custom-checkbox')
+    })
+})
+
+describe('DropdownMenuRadioItem', () => {
+    const radioStubs = {
+        DropdownMenuRadioItem: primitiveStub,
+        DropdownMenuItemIndicator: primitiveStub,
+    }
+
+    it('renders slot content', () => {
+        const wrapper = mount(DropdownMenuRadioItem, {
+            props: { value: 'option1' },
+            slots: { default: 'Radio item' },
+            global: { stubs: radioStubs },
+        })
+        expect(wrapper.text()).toBe('Radio item')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuRadioItem, {
+            props: { value: 'option1', class: 'custom-radio' },
+            global: { stubs: radioStubs },
+        })
+        expect(wrapper.classes()).toContain('custom-radio')
+    })
+})
+
+describe('DropdownMenuLabel', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DropdownMenuLabel, {
+            slots: { default: 'Label text' },
+            global: { stubs: { DropdownMenuLabel: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Label text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuLabel, {
+            props: { class: 'custom-label' },
+            global: { stubs: { DropdownMenuLabel: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-label')
+    })
+})
+
+describe('DropdownMenuSeparator', () => {
+    it('renders with separator styling', () => {
+        const wrapper = mount(DropdownMenuSeparator, {
+            global: { stubs: { DropdownMenuSeparator: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('h-[3px]')
+        expect(wrapper.classes()).toContain('bg-brutal-fg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuSeparator, {
+            props: { class: 'custom-sep' },
+            global: { stubs: { DropdownMenuSeparator: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-sep')
+    })
+})
+
+describe('DropdownMenuShortcut', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DropdownMenuShortcut, {
+            slots: { default: '⌘K' },
+        })
+        expect(wrapper.text()).toBe('⌘K')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuShortcut, {
+            props: { class: 'custom-shortcut' },
+        })
+        expect(wrapper.classes()).toContain('custom-shortcut')
+    })
+})
+
+describe('DropdownMenuSubTrigger', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(DropdownMenuSubTrigger, {
+            slots: { default: 'Sub menu' },
+            global: { stubs: { DropdownMenuSubTrigger: primitiveStub } },
+        })
+        expect(wrapper.text()).toContain('Sub menu')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuSubTrigger, {
+            props: { class: 'custom-sub-trigger' },
+            global: { stubs: { DropdownMenuSubTrigger: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-sub-trigger')
+    })
+})
+
+describe('DropdownMenuSubContent', () => {
+    it('renders with brutal styling classes', () => {
+        const wrapper = mount(DropdownMenuSubContent, {
+            global: { stubs: { DropdownMenuSubContent: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('shadow-brutal')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+        expect(wrapper.classes()).toContain('text-brutal-fg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(DropdownMenuSubContent, {
+            props: { class: 'custom-sub-content' },
+            global: { stubs: { DropdownMenuSubContent: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-sub-content')
+    })
+})
diff --git a/packages/ui/src/components/empty-state.tsx b/packages/ui/src/components/empty-state.tsx
deleted file mode 100644
index 5f4e402..0000000
--- a/packages/ui/src/components/empty-state.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { Plus, FolderOpen } from 'lucide-react';
-import { Button } from './button';
-
-export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    description?: string;
-    actionText?: string;
-    onActionClick?: () => void;
-    icon?: React.ReactNode;
-}
-
-export function EmptyState({
-    title = 'No active deployments found',
-    description = 'You haven\'t launched any brutalist web projects on this cluster node. Deploy your first static directory in seconds.',
-    actionText = 'Deploy New App',
-    onActionClick,
-    icon,
-    className,
-    ...props
-}: EmptyStateProps) {
-    return (
-        <div
-            className={`flex flex-col items-center justify-center text-center p-8 md:p-12 border-3 border-brutal bg-white dark:bg-gray-800 rounded-none shadow-brutal transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="relative mb-6">
-                <div className="absolute inset-0 bg-brutal-accent translate-x-2 translate-y-2 border-3 border-brutal" />
-                <div className="relative z-10 h-16 w-16 bg-white dark:bg-gray-700 border-3 border-brutal flex items-center justify-center text-brutal-fg">
-                    {icon || <FolderOpen className="h-8 w-8 stroke-[2.5]" />}
-                </div>
-            </div>
-
-            <h3 className="text-2xl font-black mb-3 tracking-tight text-brutal-fg leading-none">
-                {title}
-            </h3>
-
-            <p className="max-w-[440px] text-sm font-bold text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
-                {description}
-            </p>
-
-            <Button
-                variant="primary"
-                className="font-black text-sm gap-2"
-                onClick={onActionClick}
-            >
-                <Plus className="h-4 w-4 stroke-[3]" />
-                <span>{actionText}</span>
-            </Button>
-        </div>
-    );
-}
diff --git a/packages/ui/src/components/empty-state/EmptyState.vue b/packages/ui/src/components/empty-state/EmptyState.vue
new file mode 100644
index 0000000..d416ac0
--- /dev/null
+++ b/packages/ui/src/components/empty-state/EmptyState.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { FolderOpen, Plus } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Button from '../button/Button.vue'
+
+interface EmptyStateProps {
+    title?: string
+    description?: string
+    actionText?: string
+    icon?: Component
+    class?: string
+}
+
+const props = withDefaults(defineProps<EmptyStateProps>(), {
+    title: undefined,
+    description: '',
+    actionText: undefined,
+    icon: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('emptyState.defaultTitle'))
+const resolvedActionText = computed(() => props.actionText ?? t('emptyState.defaultActionText'))
+
+const emit = defineEmits<{
+    action: []
+}>()
+
+const rootClasses = computed(() => cn('flex flex-col items-center justify-center py-16 px-4', props.class))
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="relative mb-6">
+            <div class="absolute inset-0 bg-brutal-muted border-3 border-brutal translate-x-2 translate-y-2" />
+            <div class="relative h-20 w-20 flex items-center justify-center bg-brutal-accent border-3 border-brutal shadow-brutal">
+                <component :is="icon || FolderOpen" class="h-10 w-10 stroke-[2.5]" />
+            </div>
+        </div>
+        <h3 class="text-xl font-black tracking-tight">
+{{ resolvedTitle }}
+</h3>
+        <p v-if="description" class="mt-2 text-sm text-brutal-muted-foreground font-medium text-center max-w-md">
+{{ description }}
+</p>
+        <Button v-if="resolvedActionText" variant="primary" class="mt-6" @click="emit('action')">
+            <Plus class="mr-2 h-4 w-4 stroke-[3]" />
+            {{ resolvedActionText }}
+        </Button>
+    </div>
+</template>
diff --git a/packages/ui/src/components/empty-state/empty-state.test.ts b/packages/ui/src/components/empty-state/empty-state.test.ts
new file mode 100644
index 0000000..4db2c4f
--- /dev/null
+++ b/packages/ui/src/components/empty-state/empty-state.test.ts
@@ -0,0 +1,88 @@
+import { mount } from '@vue/test-utils'
+import { FolderOpen } from 'lucide-vue-next'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import EmptyState from './EmptyState.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('EmptyState', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(EmptyState, { ...localeProvide })
+        expect(wrapper.find('h3').text()).toBe('No active deployments found')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(EmptyState, {
+            props: { title: 'No items found' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h3').text()).toBe('No items found')
+    })
+
+    it('shows description when provided', () => {
+        const wrapper = mount(EmptyState, {
+            props: { description: 'Try creating a new item' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Try creating a new item')
+    })
+
+    it('does not render description when not provided', () => {
+        const wrapper = mount(EmptyState, { ...localeProvide })
+        const descEl = wrapper.find('p')
+        expect(descEl.exists()).toBe(false)
+    })
+
+    it('shows default action text', () => {
+        const wrapper = mount(EmptyState, { ...localeProvide })
+        expect(wrapper.text()).toContain('Deploy New App')
+    })
+
+    it('shows custom action text', () => {
+        const wrapper = mount(EmptyState, {
+            props: { actionText: 'Create New' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Create New')
+    })
+
+    it('does not render action button when actionText is empty', () => {
+        const wrapper = mount(EmptyState, {
+            props: { actionText: '' },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        expect(buttons.length).toBe(0)
+    })
+
+    it('emits action when action button is clicked', async () => {
+        const wrapper = mount(EmptyState, { ...localeProvide })
+        const button = wrapper.find('button')
+        await button.trigger('click')
+        expect(wrapper.emitted('action')).toBeTruthy()
+        expect(wrapper.emitted('action')!.length).toBe(1)
+    })
+
+    it('renders default icon when icon prop is not provided', () => {
+        const wrapper = mount(EmptyState, { ...localeProvide })
+        expect(wrapper.findComponent(FolderOpen).exists()).toBe(true)
+    })
+
+    it('renders custom icon when icon prop is provided', () => {
+        const CustomIcon = FolderOpen
+        const wrapper = mount(EmptyState, {
+            props: { icon: CustomIcon },
+            ...localeProvide,
+        })
+        expect(wrapper.findComponent(CustomIcon).exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(EmptyState, {
+            props: { class: 'my-empty' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-empty')
+    })
+})
diff --git a/packages/ui/src/components/error-card/ErrorCard.vue b/packages/ui/src/components/error-card/ErrorCard.vue
new file mode 100644
index 0000000..df0ba40
--- /dev/null
+++ b/packages/ui/src/components/error-card/ErrorCard.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { AlertTriangle, RotateCw, X } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import Button from '../button/Button.vue'
+import Alert from '../alert/Alert.vue'
+import AlertTitle from '../alert/AlertTitle.vue'
+import AlertDescription from '../alert/AlertDescription.vue'
+
+interface ErrorCardProps {
+    title?: string
+    description?: string
+    retryText?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<ErrorCardProps>(), {
+    title: undefined,
+    description: undefined,
+    retryText: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    retry: []
+    dismiss: []
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-md', props.class))
+
+const resolvedTitle = computed(() => props.title ?? t('errorCard.defaultTitle'))
+const resolvedDescription = computed(() => props.description ?? t('errorCard.defaultDescription'))
+const resolvedRetryText = computed(() => props.retryText ?? t('errorCard.defaultRetryText'))
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <Alert variant="danger" class="mb-4">
+            <AlertTriangle class="h-5 w-5" />
+            <AlertTitle>{{ resolvedTitle }}</AlertTitle>
+            <AlertDescription>{{ resolvedDescription }}</AlertDescription>
+        </Alert>
+        <CardContent>
+            <div class="flex items-center justify-end gap-3">
+                <Button variant="ghost" size="sm" @click="emit('dismiss')">
+                    <X class="mr-1 h-4 w-4 stroke-[3]" />
+                    {{ t('errorCard.dismiss') }}
+                </Button>
+                <Button variant="primary" size="sm" @click="emit('retry')">
+                    <RotateCw class="mr-1 h-4 w-4 stroke-[3]" />
+                    {{ resolvedRetryText }}
+                </Button>
+            </div>
+            <slot name="actions" />
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/error-card/error-card.test.ts b/packages/ui/src/components/error-card/error-card.test.ts
new file mode 100644
index 0000000..9e2a207
--- /dev/null
+++ b/packages/ui/src/components/error-card/error-card.test.ts
@@ -0,0 +1,79 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import ErrorCard from './ErrorCard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('ErrorCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(ErrorCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Something went wrong')
+        expect(wrapper.text()).toContain('The operation could not be completed. Please try again.')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(ErrorCard, {
+            props: { title: 'Connection Failed' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Connection Failed')
+    })
+
+    it('shows custom description', () => {
+        const wrapper = mount(ErrorCard, {
+            props: { description: 'Unable to reach the server.' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Unable to reach the server.')
+    })
+
+    it('shows custom retry text', () => {
+        const wrapper = mount(ErrorCard, {
+            props: { retryText: 'Try Again' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Try Again')
+    })
+
+    it('shows default retry text from i18n', () => {
+        const wrapper = mount(ErrorCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Retry')
+    })
+
+    it('emits retry when retry button is clicked', async () => {
+        const wrapper = mount(ErrorCard, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const retryButton = buttons.find(b => b.text().includes('Retry'))
+        expect(retryButton).toBeTruthy()
+        await retryButton!.trigger('click')
+        expect(wrapper.emitted('retry')).toBeTruthy()
+        expect(wrapper.emitted('retry')!.length).toBe(1)
+    })
+
+    it('emits dismiss when dismiss button is clicked', async () => {
+        const wrapper = mount(ErrorCard, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const dismissButton = buttons.find(b => b.text().includes('Dismiss'))
+        expect(dismissButton).toBeTruthy()
+        await dismissButton!.trigger('click')
+        expect(wrapper.emitted('dismiss')).toBeTruthy()
+        expect(wrapper.emitted('dismiss')!.length).toBe(1)
+    })
+
+    it('renders actions slot', () => {
+        const wrapper = mount(ErrorCard, {
+            slots: { actions: '<div class="custom-action">Custom Action</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Action')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(ErrorCard, {
+            props: { class: 'my-error' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-error"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/faq-section/FaqSection.vue b/packages/ui/src/components/faq-section/FaqSection.vue
new file mode 100644
index 0000000..c71e939
--- /dev/null
+++ b/packages/ui/src/components/faq-section/FaqSection.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Accordion from '../accordion/Accordion.vue'
+import AccordionItem from '../accordion/AccordionItem.vue'
+import AccordionTrigger from '../accordion/AccordionTrigger.vue'
+import AccordionContent from '../accordion/AccordionContent.vue'
+import Card from '../card/Card.vue'
+import Badge from '../badge/Badge.vue'
+
+export interface FaqItem {
+    question: string
+    answer: string
+}
+
+interface FaqSectionProps {
+    title?: string
+    subtitle?: string
+    items?: FaqItem[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<FaqSectionProps>(), {
+    title: undefined,
+    subtitle: undefined,
+    items: () => [],
+    class: '',
+})
+
+const emit = defineEmits<{
+    'item-click': [index: number]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('faqSection.defaultTitle'))
+const resolvedSubtitle = computed(() => props.subtitle ?? t('faqSection.defaultSubtitle'))
+
+const rootClasses = computed(() => cn('w-full max-w-3xl mx-auto', props.class))
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl font-black tracking-tight">
+                    {{ resolvedTitle }}
+                </h2>
+                <p v-if="resolvedSubtitle" class="mt-2 text-brutal-muted-foreground font-medium">
+                    {{ resolvedSubtitle }}
+                </p>
+            </div>
+        </slot>
+
+        <slot>
+            <Card variant="flat" class="p-0">
+                <Accordion type="single" collapsible class="w-full">
+                    <AccordionItem
+                        v-for="(item, index) in items"
+                        :key="index"
+                        :value="String(index)"
+                        class="mb-0 last:mb-0"
+                        @click="emit('item-click', index)"
+                    >
+                        <AccordionTrigger>
+                            <span class="flex items-center gap-3 text-left">
+                                <Badge variant="secondary" class="shrink-0">
+                                    {{ index + 1 }}
+                                </Badge>
+                                <span class="font-bold">{{ item.question }}</span>
+                            </span>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                            <p class="text-brutal-muted-foreground font-medium pl-10">
+                                {{ item.answer }}
+                            </p>
+                        </AccordionContent>
+                    </AccordionItem>
+                </Accordion>
+            </Card>
+        </slot>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/faq-section/faq-section.test.ts b/packages/ui/src/components/faq-section/faq-section.test.ts
new file mode 100644
index 0000000..ebec4d2
--- /dev/null
+++ b/packages/ui/src/components/faq-section/faq-section.test.ts
@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import FaqSection from './FaqSection.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockItems = [
+    { question: 'What is BrutxUI?', answer: 'A Neo-Brutalist UI component library.' },
+    { question: 'Is it open source?', answer: 'Yes, it is open source and free to use.' },
+    { question: 'Which framework?', answer: 'Vue 3 with TypeScript support.' },
+]
+
+describe('FaqSection', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(FaqSection, { ...localeProvide })
+        expect(wrapper.find('h2').exists()).toBe(true)
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(FaqSection, {
+            props: { title: 'Custom FAQ Title' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').text()).toBe('Custom FAQ Title')
+    })
+
+    it('renders subtitle when provided', () => {
+        const wrapper = mount(FaqSection, {
+            props: { subtitle: 'Find answers to common questions' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Find answers to common questions')
+    })
+
+    it('renders FAQ items with questions', () => {
+        const wrapper = mount(FaqSection, {
+            props: { items: mockItems },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('What is BrutxUI?')
+        expect(wrapper.text()).toContain('Is it open source?')
+        expect(wrapper.text()).toContain('Which framework?')
+    })
+
+    it('renders FAQ answer elements', () => {
+        const wrapper = mount(FaqSection, {
+            props: { items: mockItems },
+            ...localeProvide,
+        })
+        const triggers = wrapper.findAll('button[aria-expanded]')
+        expect(triggers.length).toBe(3)
+        expect(triggers[0].text()).toContain('What is BrutxUI?')
+        expect(triggers[1].text()).toContain('Is it open source?')
+        expect(triggers[2].text()).toContain('Which framework?')
+    })
+
+    it('renders with empty items array', () => {
+        const wrapper = mount(FaqSection, {
+            props: { items: [] },
+            ...localeProvide,
+        })
+        const items = wrapper.findAllComponents({ name: 'AccordionItem' })
+        expect(items.length).toBe(0)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FaqSection, {
+            props: { class: 'my-faq' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-faq')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(FaqSection, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Custom Header')
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(FaqSection, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(FaqSection, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/feedback-form/FeedbackForm.vue b/packages/ui/src/components/feedback-form/FeedbackForm.vue
new file mode 100644
index 0000000..69b2be6
--- /dev/null
+++ b/packages/ui/src/components/feedback-form/FeedbackForm.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Send } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardContent from '../card/CardContent.vue'
+import CardTitle from '../card/CardTitle.vue'
+import CardDescription from '../card/CardDescription.vue'
+import Input from '../input/Input.vue'
+import Textarea from '../textarea/Textarea.vue'
+import Button from '../button/Button.vue'
+
+interface FeedbackFormProps {
+    title?: string
+    description?: string
+    submitText?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<FeedbackFormProps>(), {
+    title: undefined,
+    description: undefined,
+    submitText: undefined,
+    class: '',
+})
+
+const emit = defineEmits<{
+    submit: [payload: { name: string; email: string; subject: string; message: string }]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('feedbackForm.defaultTitle'))
+const resolvedDescription = computed(() => props.description ?? t('feedbackForm.defaultDescription'))
+const resolvedSubmitText = computed(() => props.submitText ?? t('feedbackForm.defaultSubmitText'))
+const nameLabel = computed(() => t('feedbackForm.nameLabel'))
+const emailLabel = computed(() => t('feedbackForm.emailLabel'))
+const subjectLabel = computed(() => t('feedbackForm.subjectLabel'))
+const messageLabel = computed(() => t('feedbackForm.messageLabel'))
+
+const name = ref('')
+const email = ref('')
+const subject = ref('')
+const message = ref('')
+
+const rootClasses = computed(() => cn('w-full max-w-2xl mx-auto', props.class))
+
+function handleSubmit() {
+    emit('submit', {
+        name: name.value,
+        email: email.value,
+        subject: subject.value,
+        message: message.value,
+    })
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl font-black tracking-tight">
+                    {{ resolvedTitle }}
+                </h2>
+                <p v-if="resolvedDescription" class="mt-2 text-brutal-muted-foreground font-medium">
+                    {{ resolvedDescription }}
+                </p>
+            </div>
+        </slot>
+
+        <slot>
+            <Card variant="default">
+                <CardHeader>
+                    <CardTitle class="text-xl">
+                        {{ resolvedTitle }}
+                    </CardTitle>
+                    <CardDescription v-if="resolvedDescription">
+                        {{ resolvedDescription }}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <form class="space-y-4" @submit.prevent="handleSubmit">
+                        <div class="space-y-2">
+                            <label class="text-sm font-bold text-brutal-fg">
+                                {{ nameLabel }}
+                            </label>
+                            <Input v-model="name" :placeholder="nameLabel" />
+                        </div>
+                        <div class="space-y-2">
+                            <label class="text-sm font-bold text-brutal-fg">
+                                {{ emailLabel }}
+                            </label>
+                            <Input v-model="email" type="email" :placeholder="emailLabel" />
+                        </div>
+                        <div class="space-y-2">
+                            <label class="text-sm font-bold text-brutal-fg">
+                                {{ subjectLabel }}
+                            </label>
+                            <Input v-model="subject" :placeholder="subjectLabel" />
+                        </div>
+                        <div class="space-y-2">
+                            <label class="text-sm font-bold text-brutal-fg">
+                                {{ messageLabel }}
+                            </label>
+                            <Textarea v-model="message" :placeholder="messageLabel" />
+                        </div>
+                        <Button variant="primary" type="submit" class="w-full">
+                            <Send class="h-4 w-4 mr-2" />
+                            {{ resolvedSubmitText }}
+                        </Button>
+                    </form>
+                </CardContent>
+            </Card>
+        </slot>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/feedback-form/feedback-form.test.ts b/packages/ui/src/components/feedback-form/feedback-form.test.ts
new file mode 100644
index 0000000..b366dd9
--- /dev/null
+++ b/packages/ui/src/components/feedback-form/feedback-form.test.ts
@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import FeedbackForm from './FeedbackForm.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('FeedbackForm', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(FeedbackForm, { ...localeProvide })
+        expect(wrapper.find('h2').exists()).toBe(true)
+        expect(wrapper.find('form').exists()).toBe(true)
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(FeedbackForm, {
+            props: { title: 'Contact Us' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').text()).toBe('Contact Us')
+    })
+
+    it('renders custom description', () => {
+        const wrapper = mount(FeedbackForm, {
+            props: { description: 'We would love to hear from you' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('We would love to hear from you')
+    })
+
+    it('renders custom submit text', () => {
+        const wrapper = mount(FeedbackForm, {
+            props: { submitText: 'Send Feedback' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Send Feedback')
+    })
+
+    it('renders form fields', () => {
+        const wrapper = mount(FeedbackForm, { ...localeProvide })
+        const inputs = wrapper.findAll('input')
+        const textareas = wrapper.findAll('textarea')
+        expect(inputs.length).toBe(3)
+        expect(textareas.length).toBe(1)
+    })
+
+    it('renders submit button', () => {
+        const wrapper = mount(FeedbackForm, { ...localeProvide })
+        const button = wrapper.find('button[type="submit"]')
+        expect(button.exists()).toBe(true)
+    })
+
+    it('emits submit event with form data', async () => {
+        const wrapper = mount(FeedbackForm, { ...localeProvide })
+        const inputs = wrapper.findAll('input')
+        const textarea = wrapper.find('textarea')
+
+        await inputs[0].setValue('John Doe')
+        await inputs[1].setValue('john@example.com')
+        await inputs[2].setValue('Bug Report')
+        await textarea.setValue('Something went wrong')
+
+        await wrapper.find('form').trigger('submit')
+
+        expect(wrapper.emitted('submit')).toBeTruthy()
+        expect(wrapper.emitted('submit')![0]).toEqual([{
+            name: 'John Doe',
+            email: 'john@example.com',
+            subject: 'Bug Report',
+            message: 'Something went wrong',
+        }])
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FeedbackForm, {
+            props: { class: 'my-form' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-form')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(FeedbackForm, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Custom Header')
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(FeedbackForm, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(FeedbackForm, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/file-card/FileCard.vue b/packages/ui/src/components/file-card/FileCard.vue
new file mode 100644
index 0000000..2ff0811
--- /dev/null
+++ b/packages/ui/src/components/file-card/FileCard.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FileIcon, Download } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import Badge from '../badge/Badge.vue'
+import Button from '../button/Button.vue'
+
+interface FileCardProps {
+    fileName?: string
+    fileSize?: string
+    fileType?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<FileCardProps>(), {
+    fileName: undefined,
+    fileSize: '',
+    fileType: '',
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    download: []
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-sm', props.class))
+
+const resolvedFileName = computed(() => props.fileName ?? t('fileCard.defaultFileName'))
+const resolvedDownload = computed(() => t('fileCard.download'))
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <CardContent>
+            <div class="flex items-start gap-4">
+                <div class="shrink-0 h-12 w-12 flex items-center justify-center bg-brutal-accent border-3 border-brutal shadow-brutal-sm">
+                    <FileIcon class="h-6 w-6 stroke-[2.5]" />
+                </div>
+                <div class="flex-1 min-w-0">
+                    <p class="font-black text-sm truncate">
+{{ resolvedFileName }}
+</p>
+                    <div class="mt-1 flex items-center gap-2">
+                        <Badge v-if="fileType" variant="secondary" size="sm">
+                            {{ fileType }}
+                        </Badge>
+                        <span v-if="fileSize" class="text-xs text-brutal-muted-foreground font-medium">
+                            {{ fileSize }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <Button variant="primary" size="sm" class="mt-4 w-full" @click="emit('download')">
+                <Download class="mr-2 h-4 w-4 stroke-[3]" />
+                {{ resolvedDownload }}
+            </Button>
+            <slot name="actions" />
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/file-card/file-card.test.ts b/packages/ui/src/components/file-card/file-card.test.ts
new file mode 100644
index 0000000..324ccc1
--- /dev/null
+++ b/packages/ui/src/components/file-card/file-card.test.ts
@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import FileCard from './FileCard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('FileCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(FileCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('document.pdf')
+    })
+
+    it('shows custom file name', () => {
+        const wrapper = mount(FileCard, {
+            props: { fileName: 'report.xlsx' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('report.xlsx')
+    })
+
+    it('shows file size when provided', () => {
+        const wrapper = mount(FileCard, {
+            props: { fileSize: '2.4 MB' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('2.4 MB')
+    })
+
+    it('shows file type badge when provided', () => {
+        const wrapper = mount(FileCard, {
+            props: { fileType: 'PDF' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('PDF')
+    })
+
+    it('does not show file type badge when not provided', () => {
+        const wrapper = mount(FileCard, { ...localeProvide })
+        expect(wrapper.text()).not.toContain('PDF')
+    })
+
+    it('renders download button', () => {
+        const wrapper = mount(FileCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Download')
+    })
+
+    it('emits download when download button is clicked', async () => {
+        const wrapper = mount(FileCard, { ...localeProvide })
+        const button = wrapper.find('button')
+        await button.trigger('click')
+        expect(wrapper.emitted('download')).toBeTruthy()
+        expect(wrapper.emitted('download')!.length).toBe(1)
+    })
+
+    it('renders file icon', () => {
+        const wrapper = mount(FileCard, { ...localeProvide })
+        const svgs = wrapper.findAll('svg')
+        expect(svgs.length).toBeGreaterThanOrEqual(1)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FileCard, {
+            props: { class: 'my-file' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-file"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/footer-section/FooterSection.vue b/packages/ui/src/components/footer-section/FooterSection.vue
new file mode 100644
index 0000000..8be721e
--- /dev/null
+++ b/packages/ui/src/components/footer-section/FooterSection.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Button from '../button/Button.vue'
+import Separator from '../separator/Separator.vue'
+
+export interface FooterLink {
+    label: string
+    href?: string
+}
+
+export interface FooterLinkGroup {
+    title: string
+    links: FooterLink[]
+}
+
+interface FooterSectionProps {
+    logoText?: string
+    description?: string
+    linkGroups?: FooterLinkGroup[]
+    copyright?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<FooterSectionProps>(), {
+    logoText: undefined,
+    description: undefined,
+    linkGroups: () => [],
+    copyright: undefined,
+    class: '',
+})
+
+const emit = defineEmits<{
+    'link-click': [payload: { groupIndex: number; linkIndex: number }]
+}>()
+
+const { t } = useLocale()
+
+const resolvedLogoText = computed(() => props.logoText ?? t('footerSection.defaultLogoText'))
+const resolvedDescription = computed(() => props.description ?? t('footerSection.defaultDescription'))
+const resolvedCopyright = computed(() => props.copyright ?? t('footerSection.defaultCopyright'))
+
+const rootClasses = computed(() =>
+    cn(
+        'w-full',
+        'bg-brutal-bg border-3 border-t border-brutal',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <footer :class="rootClasses">
+        <div class="max-w-7xl mx-auto px-4 md:px-6 py-10">
+            <slot name="header">
+                <div class="mb-8">
+                    <span class="text-xl font-black tracking-tight text-brutal-fg">
+                        {{ resolvedLogoText }}
+                    </span>
+                    <p v-if="resolvedDescription" class="mt-2 text-sm text-brutal-muted-foreground font-medium max-w-sm">
+                        {{ resolvedDescription }}
+                    </p>
+                </div>
+            </slot>
+
+            <slot>
+                <div v-if="linkGroups.length > 0" class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+                    <div v-for="(group, groupIndex) in linkGroups" :key="groupIndex">
+                        <h3 class="font-black text-sm tracking-wide text-brutal-fg mb-3">
+                            {{ group.title }}
+                        </h3>
+                        <ul class="space-y-2">
+                            <li v-for="(link, linkIndex) in group.links" :key="linkIndex">
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    class="px-0 text-brutal-muted-foreground hover:text-brutal-fg"
+                                    @click="emit('link-click', { groupIndex, linkIndex })"
+                                >
+                                    {{ link.label }}
+                                </Button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </slot>
+
+            <Separator />
+
+            <slot name="footer">
+                <div class="pt-6 text-center">
+                    <p class="text-sm text-brutal-muted-foreground font-medium">
+                        {{ resolvedCopyright }}
+                    </p>
+                </div>
+            </slot>
+        </div>
+    </footer>
+</template>
diff --git a/packages/ui/src/components/footer-section/footer-section.test.ts b/packages/ui/src/components/footer-section/footer-section.test.ts
new file mode 100644
index 0000000..b53d9b8
--- /dev/null
+++ b/packages/ui/src/components/footer-section/footer-section.test.ts
@@ -0,0 +1,129 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import FooterSection from './FooterSection.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockLinkGroups = [
+    {
+        title: 'Product',
+        links: [
+            { label: 'Features', href: '/features' },
+            { label: 'Pricing', href: '/pricing' },
+        ],
+    },
+    {
+        title: 'Company',
+        links: [
+            { label: 'About', href: '/about' },
+            { label: 'Blog', href: '/blog' },
+        ],
+    },
+    {
+        title: 'Support',
+        links: [
+            { label: 'Help Center', href: '/help' },
+            { label: 'Contact', href: '/contact' },
+        ],
+    },
+]
+
+describe('FooterSection', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(FooterSection, { ...localeProvide })
+        expect(wrapper.find('footer').exists()).toBe(true)
+    })
+
+    it('renders custom logo text', () => {
+        const wrapper = mount(FooterSection, {
+            props: { logoText: 'MyBrand' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('MyBrand')
+    })
+
+    it('renders custom description', () => {
+        const wrapper = mount(FooterSection, {
+            props: { description: 'Building bold interfaces.' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Building bold interfaces.')
+    })
+
+    it('renders link groups', () => {
+        const wrapper = mount(FooterSection, {
+            props: { linkGroups: mockLinkGroups },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Product')
+        expect(wrapper.text()).toContain('Company')
+        expect(wrapper.text()).toContain('Support')
+    })
+
+    it('renders link labels', () => {
+        const wrapper = mount(FooterSection, {
+            props: { linkGroups: mockLinkGroups },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Features')
+        expect(wrapper.text()).toContain('Pricing')
+        expect(wrapper.text()).toContain('About')
+        expect(wrapper.text()).toContain('Blog')
+    })
+
+    it('renders custom copyright', () => {
+        const wrapper = mount(FooterSection, {
+            props: { copyright: '© 2026 MyBrand. All rights reserved.' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('© 2026 MyBrand. All rights reserved.')
+    })
+
+    it('renders with empty link groups', () => {
+        const wrapper = mount(FooterSection, {
+            props: { linkGroups: [] },
+            ...localeProvide,
+        })
+        expect(wrapper.find('footer').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FooterSection, {
+            props: { class: 'my-footer' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('footer').classes()).toContain('my-footer')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(FooterSection, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(FooterSection, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(FooterSection, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+
+    it('has border styling', () => {
+        const wrapper = mount(FooterSection, { ...localeProvide })
+        const footer = wrapper.find('footer')
+        expect(footer.classes()).toContain('border-3')
+        expect(footer.classes()).toContain('border-brutal')
+    })
+})
diff --git a/packages/ui/src/components/form.tsx b/packages/ui/src/components/form.tsx
deleted file mode 100644
index bd79162..0000000
--- a/packages/ui/src/components/form.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { Slot } from '@radix-ui/react-slot';
-import {
-    Controller,
-    ControllerProps,
-    FieldPath,
-    FieldValues,
-    FormProvider,
-    useFormContext,
-} from 'react-hook-form';
-
-import { cn } from '../lib/utils';
-import { Label } from './label';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-    name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-    {} as FormFieldContextValue
-);
-
-const FormField = <
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-    ...props
-}: ControllerProps<TFieldValues, TName>) => {
-    return (
-        <FormFieldContext.Provider value={{ name: props.name }}>
-            <Controller {...props} />
-        </FormFieldContext.Provider>
-    );
-};
-
-const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext);
-    const itemContext = React.useContext(FormItemContext);
-    const { getFieldState, formState } = useFormContext();
-
-    const fieldState = getFieldState(fieldContext.name, formState);
-
-    if (!fieldContext) {
-        throw new Error('useFormField should be used within <FormField>');
-    }
-
-    const { id } = itemContext;
-
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState,
-    };
-};
-
-type FormItemContextValue = {
-    id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-    {} as FormItemContextValue
-);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-    ({ className, ...props }, ref) => {
-        const id = React.useId();
-
-        return (
-            <FormItemContext.Provider value={{ id }}>
-                <div ref={ref} className={cn('space-y-1.5', className)} {...props} />
-            </FormItemContext.Provider>
-        );
-    }
-);
-FormItem.displayName = 'FormItem';
-
-const FormLabel = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-    const { error, formItemId } = useFormField();
-
-    return (
-        <Label
-            ref={ref}
-            className={cn(error && 'text-[#EF476F]', className)}
-            htmlFor={formItemId}
-            {...props}
-        />
-    );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
-    React.ElementRef<typeof Slot>,
-    React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-    return (
-        <Slot
-            ref={ref}
-            id={formItemId}
-            aria-describedby={
-                !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-            }
-            aria-invalid={!!error}
-            {...props}
-        />
-    );
-});
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
-
-    return (
-        <p
-            ref={ref}
-            id={formDescriptionId}
-            className={cn('text-xs text-gray-500 dark:text-gray-400 font-bold', className)}
-            {...props}
-        />
-    );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField();
-    const body = error ? String(error?.message) : children;
-
-    if (!body) {
-        return null;
-    }
-
-    return (
-        <p
-            ref={ref}
-            id={formMessageId}
-            className={cn('text-xs font-bold text-[#EF476F]', className)}
-            {...props}
-        >
-            {body}
-        </p>
-    );
-});
-FormMessage.displayName = 'FormMessage';
-
-export {
-    useFormField,
-    Form,
-    FormItem,
-    FormLabel,
-    FormControl,
-    FormDescription,
-    FormMessage,
-    FormField,
-};
diff --git a/packages/ui/src/components/form/Form.vue b/packages/ui/src/components/form/Form.vue
new file mode 100644
index 0000000..afa04e2
--- /dev/null
+++ b/packages/ui/src/components/form/Form.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+import { useForm, type FormContext as VeeFormContext } from 'vee-validate'
+import { formContextKey } from './form-context'
+
+interface FormProps {
+    class?: string
+    initialValues?: Record<string, unknown>
+    validationSchema?: unknown
+}
+
+const props = defineProps<FormProps>()
+
+const emit = defineEmits<{
+    submit: [values: Record<string, unknown>]
+}>()
+
+const { handleSubmit, ...formContext } = useForm({
+    initialValues: props.initialValues,
+    validationSchema: props.validationSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+    emit('submit', values)
+})
+
+provide(formContextKey, formContext as unknown as VeeFormContext)
+</script>
+
+<template>
+    <form :class="props.class" @submit="onSubmit">
+        <slot />
+    </form>
+</template>
diff --git a/packages/ui/src/components/form/FormControl.vue b/packages/ui/src/components/form/FormControl.vue
new file mode 100644
index 0000000..c328aec
--- /dev/null
+++ b/packages/ui/src/components/form/FormControl.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { inject, ref, type Ref } from 'vue'
+import { formFieldKey, formItemKey } from './form-context'
+
+interface FormControlProps {
+    class?: string
+}
+
+defineProps<FormControlProps>()
+
+const fieldContext = inject(formFieldKey, {
+    name: '',
+    error: ref<string | undefined>(undefined) as Ref<string | undefined>,
+    value: ref<unknown>(undefined),
+    setValue: () => {},
+})
+const itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })
+</script>
+
+<template>
+    <slot
+        :id="itemContext.formItemId"
+        :aria-describedby="!fieldContext.error?.value ? itemContext.formDescriptionId : `${itemContext.formDescriptionId} ${itemContext.formMessageId}`"
+        :aria-invalid="!!fieldContext.error?.value"
+    />
+</template>
diff --git a/packages/ui/src/components/form/FormDescription.vue b/packages/ui/src/components/form/FormDescription.vue
new file mode 100644
index 0000000..99d76d8
--- /dev/null
+++ b/packages/ui/src/components/form/FormDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { cn } from '../../lib/utils'
+import { formItemKey } from './form-context'
+
+interface FormDescriptionProps {
+    class?: string
+}
+
+const props = defineProps<FormDescriptionProps>()
+
+const itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })
+
+const classes = computed(() =>
+    cn('text-sm text-brutal-muted-foreground font-medium', props.class)
+)
+</script>
+
+<template>
+    <p :id="itemContext.formDescriptionId" :class="classes">
+        <slot />
+    </p>
+</template>
diff --git a/packages/ui/src/components/form/FormField.vue b/packages/ui/src/components/form/FormField.vue
new file mode 100644
index 0000000..a7ccc83
--- /dev/null
+++ b/packages/ui/src/components/form/FormField.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+import { useField } from 'vee-validate'
+import { formFieldKey } from './form-context'
+
+interface FormFieldProps {
+    name: string
+}
+
+const props = defineProps<FormFieldProps>()
+
+const fieldName = computed(() => props.name)
+const { errorMessage, value, setValue } = useField(fieldName)
+
+provide(formFieldKey, {
+    name: props.name,
+    error: errorMessage,
+    value,
+    setValue,
+})
+</script>
+
+<template>
+    <slot />
+</template>
diff --git a/packages/ui/src/components/form/FormItem.vue b/packages/ui/src/components/form/FormItem.vue
new file mode 100644
index 0000000..1c8fa3c
--- /dev/null
+++ b/packages/ui/src/components/form/FormItem.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, provide, useId } from 'vue'
+import { cn } from '../../lib/utils'
+import { formItemKey } from './form-context'
+
+interface FormItemProps {
+    class?: string
+}
+
+const props = defineProps<FormItemProps>()
+
+const id = useId()
+
+provide(formItemKey, {
+    id,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+})
+
+const classes = computed(() => cn('space-y-2', props.class))
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/form/FormLabel.vue b/packages/ui/src/components/form/FormLabel.vue
new file mode 100644
index 0000000..5530316
--- /dev/null
+++ b/packages/ui/src/components/form/FormLabel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, inject, ref, type Ref } from 'vue'
+import { cn } from '../../lib/utils'
+import LabelRoot from '../label/Label.vue'
+import { formFieldKey, formItemKey } from './form-context'
+
+interface FormLabelProps {
+    class?: string
+}
+
+const props = defineProps<FormLabelProps>()
+
+const fieldContext = inject(formFieldKey, { name: '', error: ref<string | undefined>(undefined) as Ref<string | undefined>, value: ref<unknown>(undefined), setValue: () => {} })
+const itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })
+
+const classes = computed(() =>
+    cn(
+        fieldContext.error.value && 'text-brutal-destructive',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <LabelRoot :class="classes" :for="itemContext.formItemId">
+        <slot />
+    </LabelRoot>
+</template>
diff --git a/packages/ui/src/components/form/FormMessage.vue b/packages/ui/src/components/form/FormMessage.vue
new file mode 100644
index 0000000..ee61389
--- /dev/null
+++ b/packages/ui/src/components/form/FormMessage.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, inject, ref, type Ref } from 'vue'
+import { cn } from '../../lib/utils'
+import { formFieldKey, formItemKey } from './form-context'
+
+interface FormMessageProps {
+    class?: string
+}
+
+const props = defineProps<FormMessageProps>()
+
+const fieldContext = inject(formFieldKey, { name: '', error: ref<string | undefined>(undefined) as Ref<string | undefined>, value: ref<unknown>(undefined), setValue: () => {} })
+const itemContext = inject(formItemKey, { id: '', formItemId: '', formDescriptionId: '', formMessageId: '' })
+
+const body = computed(() => fieldContext.error.value)
+
+const classes = computed(() =>
+    cn('text-sm font-black text-brutal-destructive', props.class)
+)
+</script>
+
+<template>
+    <p v-if="body" :id="itemContext.formMessageId" role="alert" :class="classes">
+        {{ body }}
+    </p>
+</template>
diff --git a/packages/ui/src/components/form/form-context.ts b/packages/ui/src/components/form/form-context.ts
new file mode 100644
index 0000000..df51054
--- /dev/null
+++ b/packages/ui/src/components/form/form-context.ts
@@ -0,0 +1,20 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { FormContext as VeeFormContext } from 'vee-validate'
+
+export interface FormFieldContext {
+    name: string
+    error: Ref<string | undefined>
+    value: Ref<unknown>
+    setValue: (value: unknown) => void
+}
+
+export interface FormItemContext {
+    id: string
+    formItemId: string
+    formDescriptionId: string
+    formMessageId: string
+}
+
+export const formContextKey: InjectionKey<VeeFormContext> = Symbol('formContext')
+export const formFieldKey: InjectionKey<FormFieldContext> = Symbol('formField')
+export const formItemKey: InjectionKey<FormItemContext> = Symbol('formItem')
diff --git a/packages/ui/src/components/form/form.test.ts b/packages/ui/src/components/form/form.test.ts
new file mode 100644
index 0000000..a4c958f
--- /dev/null
+++ b/packages/ui/src/components/form/form.test.ts
@@ -0,0 +1,286 @@
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import Form from './Form.vue'
+import FormField from './FormField.vue'
+import FormItem from './FormItem.vue'
+import FormLabel from './FormLabel.vue'
+import FormControl from './FormControl.vue'
+import FormDescription from './FormDescription.vue'
+import FormMessage from './FormMessage.vue'
+import { formFieldKey, formItemKey } from './form-context'
+
+describe('Form', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Form)
+        expect(wrapper.find('form').exists()).toBe(true)
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Form, {
+            slots: { default: '<div class="form-inner">Form content</div>' },
+        })
+        expect(wrapper.find('.form-inner').exists()).toBe(true)
+        expect(wrapper.find('.form-inner').text()).toBe('Form content')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Form, {
+            props: { class: 'custom-form' },
+        })
+        expect(wrapper.find('form').classes()).toContain('custom-form')
+    })
+})
+
+describe('FormField', () => {
+    it('renders within Form context', () => {
+        const wrapper = mount(FormField, {
+            props: { name: 'email' },
+        })
+        expect(wrapper.exists()).toBe(true)
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(FormField, {
+            props: { name: 'email' },
+            slots: { default: '<div class="field-inner">Field content</div>' },
+        })
+        expect(wrapper.find('.field-inner').exists()).toBe(true)
+    })
+})
+
+describe('FormItem', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(FormItem, {
+            slots: { default: '<div class="item-inner">Item content</div>' },
+        })
+        expect(wrapper.find('.item-inner').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FormItem, {
+            props: { class: 'custom-item' },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+    })
+
+    it('has space-y-2 class by default', () => {
+        const wrapper = mount(FormItem)
+        expect(wrapper.classes()).toContain('space-y-2')
+    })
+})
+
+describe('FormLabel', () => {
+    function mountWithProviders(options: Record<string, unknown> = {}) {
+        return mount(FormLabel, {
+            ...options,
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'test-field',
+                        error: ref(undefined),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+        })
+    }
+
+    it('renders slot content', () => {
+        const wrapper = mountWithProviders({
+            slots: { default: 'Email Address' },
+        })
+        expect(wrapper.text()).toBe('Email Address')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mountWithProviders({
+            props: { class: 'custom-label' },
+        })
+        expect(wrapper.classes()).toContain('custom-label')
+    })
+
+    it('shows destructive class when error exists', () => {
+        const wrapper = mount(FormLabel, {
+            props: {},
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'test-field',
+                        error: ref('Required field'),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+        })
+        expect(wrapper.classes()).toContain('text-brutal-destructive')
+    })
+})
+
+describe('FormControl', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(FormControl, {
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'test-field',
+                        error: ref(undefined),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+            slots: {
+                default: '<input class="control-input" />',
+            },
+        })
+        expect(wrapper.find('.control-input').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FormControl, {
+            props: { class: 'custom-control' },
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'test-field',
+                        error: ref(undefined),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+            slots: {
+                default: '<input />',
+            },
+        })
+        expect(wrapper.exists()).toBe(true)
+    })
+})
+
+describe('FormDescription', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(FormDescription, {
+            global: {
+                provide: {
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+            slots: { default: 'Enter your email address' },
+        })
+        expect(wrapper.text()).toBe('Enter your email address')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FormDescription, {
+            props: { class: 'custom-desc' },
+            global: {
+                provide: {
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+        })
+        expect(wrapper.classes()).toContain('custom-desc')
+    })
+
+    it('has default styling classes', () => {
+        const wrapper = mount(FormDescription, {
+            global: {
+                provide: {
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+        })
+        expect(wrapper.classes()).toContain('text-sm')
+        expect(wrapper.classes()).toContain('font-medium')
+    })
+})
+
+describe('FormMessage', () => {
+    function mountWithFieldContext(errorValue?: string) {
+        return mount(FormMessage, {
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'test-field',
+                        error: ref(errorValue),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+        })
+    }
+
+    it('renders error message when present', () => {
+        const wrapper = mountWithFieldContext('This field is required')
+        expect(wrapper.text()).toBe('This field is required')
+    })
+
+    it('does not render when no error', () => {
+        const wrapper = mountWithFieldContext()
+        expect(wrapper.find('p').exists()).toBe(false)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(FormMessage, {
+            props: { class: 'custom-msg' },
+            global: {
+                provide: {
+                    [formFieldKey as symbol]: {
+                        name: 'test-field',
+                        error: ref('Error message'),
+                    },
+                    [formItemKey as symbol]: {
+                        id: 'test-id',
+                        formItemId: 'test-id-form-item',
+                        formDescriptionId: 'test-id-form-item-description',
+                        formMessageId: 'test-id-form-item-message',
+                    },
+                },
+            },
+        })
+        expect(wrapper.find('p').classes()).toContain('custom-msg')
+    })
+
+    it('has destructive text class', () => {
+        const wrapper = mountWithFieldContext('Error')
+        expect(wrapper.find('p').classes()).toContain('text-brutal-destructive')
+    })
+})
diff --git a/packages/ui/src/components/gallery-section/GallerySection.vue b/packages/ui/src/components/gallery-section/GallerySection.vue
new file mode 100644
index 0000000..81a4178
--- /dev/null
+++ b/packages/ui/src/components/gallery-section/GallerySection.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Image as ImageIcon } from 'lucide-vue-next'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Carousel from '../carousel/Carousel.vue'
+import CarouselItem from '../carousel/CarouselItem.vue'
+import Card from '../card/Card.vue'
+
+export interface GalleryItem {
+    src: string
+    alt: string
+    caption?: string
+}
+
+interface GallerySectionProps {
+    title?: string
+    items?: GalleryItem[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<GallerySectionProps>(), {
+    title: undefined,
+    items: () => [],
+    class: '',
+})
+
+const emit = defineEmits<{
+    'item-click': [index: number]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('gallerySection.defaultTitle'))
+const resolvedNoItems = computed(() => t('gallerySection.noItems'))
+
+function handleItemClick(index: number) {
+    emit('item-click', index)
+}
+
+const rootClasses = computed(() => cn('w-full max-w-4xl mx-auto', props.class))
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header">
+            <div class="mb-6">
+                <h2 class="text-3xl font-black tracking-tight">
+                    {{ resolvedTitle }}
+                </h2>
+            </div>
+        </slot>
+
+        <slot>
+            <Card variant="flat" class="p-4">
+                <Carousel
+                    :show-arrows="true"
+                    :show-dots="true"
+                    size="full"
+                >
+                    <CarouselItem
+                        v-for="(item, index) in items"
+                        :key="index"
+                    >
+                        <div
+                            class="flex flex-col items-center justify-center p-4 cursor-pointer active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all"
+                            @click="handleItemClick(index)"
+                        >
+                            <div class="w-full border-3 border-brutal shadow-brutal overflow-hidden bg-brutal-bg">
+                                <img
+                                    :src="item.src"
+                                    :alt="item.alt"
+                                    class="w-full h-auto object-cover"
+                                    loading="lazy"
+                                >
+                            </div>
+                            <p v-if="item.caption" class="mt-3 text-sm font-bold text-brutal-fg text-center">
+                                {{ item.caption }}
+                            </p>
+                        </div>
+                    </CarouselItem>
+                </Carousel>
+
+                <div v-if="items.length === 0" class="flex flex-col items-center justify-center py-12 text-brutal-muted-foreground">
+                    <ImageIcon class="w-12 h-12 mb-3 stroke-[2]" />
+                    <p class="font-bold">
+                        {{ resolvedNoItems }}
+                    </p>
+                </div>
+            </Card>
+        </slot>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/gallery-section/gallery-section.test.ts b/packages/ui/src/components/gallery-section/gallery-section.test.ts
new file mode 100644
index 0000000..64f6270
--- /dev/null
+++ b/packages/ui/src/components/gallery-section/gallery-section.test.ts
@@ -0,0 +1,122 @@
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import GallerySection from './GallerySection.vue'
+
+vi.mock('embla-carousel-vue', () => ({
+    default: () => [ref(null), ref(null)],
+}))
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockItems = [
+    { src: 'https://example.com/img1.jpg', alt: 'Image 1', caption: 'First image' },
+    { src: 'https://example.com/img2.jpg', alt: 'Image 2', caption: 'Second image' },
+    { src: 'https://example.com/img3.jpg', alt: 'Image 3' },
+]
+
+describe('GallerySection', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(GallerySection, { ...localeProvide })
+        expect(wrapper.find('h2').exists()).toBe(true)
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(GallerySection, {
+            props: { title: 'Photo Gallery' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').text()).toBe('Photo Gallery')
+    })
+
+    it('renders gallery items with images', () => {
+        const wrapper = mount(GallerySection, {
+            props: { items: mockItems },
+            ...localeProvide,
+        })
+        const images = wrapper.findAll('img')
+        expect(images.length).toBe(3)
+        expect(images[0].attributes('alt')).toBe('Image 1')
+        expect(images[1].attributes('alt')).toBe('Image 2')
+        expect(images[2].attributes('alt')).toBe('Image 3')
+    })
+
+    it('renders captions when provided', () => {
+        const wrapper = mount(GallerySection, {
+            props: { items: mockItems },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('First image')
+        expect(wrapper.text()).toContain('Second image')
+    })
+
+    it('does not render caption element when caption is not provided', () => {
+        const wrapper = mount(GallerySection, {
+            props: { items: [{ src: 'test.jpg', alt: 'No caption' }] },
+            ...localeProvide,
+        })
+        const captions = wrapper.findAll('p')
+        expect(captions.length).toBe(0)
+    })
+
+    it('renders with empty items array', () => {
+        const wrapper = mount(GallerySection, {
+            props: { items: [] },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('No items to display')
+    })
+
+    it('emits item-click event when an item is clicked', async () => {
+        const wrapper = mount(GallerySection, {
+            props: { items: mockItems },
+            ...localeProvide,
+        })
+        const clickAreas = wrapper.findAll('.cursor-pointer')
+        await clickAreas[0].trigger('click')
+        expect(wrapper.emitted('item-click')).toBeTruthy()
+        expect(wrapper.emitted('item-click')![0]).toEqual([0])
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(GallerySection, {
+            props: { class: 'my-gallery' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-gallery')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(GallerySection, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(GallerySection, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(GallerySection, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+
+    it('renders gallery inside a Card', () => {
+        const wrapper = mount(GallerySection, {
+            props: { items: mockItems },
+            ...localeProvide,
+        })
+        const card = wrapper.findComponent({ name: 'Card' })
+        expect(card.exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/glitch-text/GlitchText.vue b/packages/ui/src/components/glitch-text/GlitchText.vue
new file mode 100644
index 0000000..f9e7c31
--- /dev/null
+++ b/packages/ui/src/components/glitch-text/GlitchText.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, onUpdated } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { useReducedMotion } from '../../composables/useReducedMotion'
+import { glitchTextVariants } from './glitch-text-variants'
+
+type GlitchTextVariantProps = VariantProps<typeof glitchTextVariants>
+
+interface GlitchTextProps {
+    text?: string
+    trigger?: 'hover' | 'click' | 'autoplay' | 'none'
+    interval?: number
+    speed?: NonNullable<GlitchTextVariantProps['speed']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<GlitchTextProps>(), {
+    text: '',
+    trigger: 'hover',
+    interval: 3000,
+    speed: 'medium',
+    class: '',
+})
+
+const elementRef = ref<HTMLElement | null>(null)
+const isActive = ref(false)
+const prefersReducedMotion = useReducedMotion()
+
+const displayText = ref(props.text)
+
+function updateDisplayText() {
+    if (elementRef.value) {
+        displayText.value = elementRef.value.textContent || props.text
+    } else {
+        displayText.value = props.text
+    }
+}
+
+onMounted(updateDisplayText)
+onUpdated(updateDisplayText)
+
+let autoplayTimer: any = null
+let autoplayStopTimer: any = null
+
+const startAutoplay = () => {
+    stopAutoplay()
+    autoplayTimer = setInterval(() => {
+        if (prefersReducedMotion.value) return
+        isActive.value = true
+        // 开启抖动 1 秒后自动关闭，等待下一个周期，产生节奏感
+        autoplayStopTimer = setTimeout(() => {
+            isActive.value = false
+        }, 1000)
+    }, props.interval)
+}
+
+const stopAutoplay = () => {
+    if (autoplayTimer) {
+        clearInterval(autoplayTimer)
+        autoplayTimer = null
+    }
+    if (autoplayStopTimer) {
+        clearTimeout(autoplayStopTimer)
+        autoplayStopTimer = null
+    }
+}
+
+onMounted(() => {
+    if (props.trigger === 'autoplay') {
+        startAutoplay()
+    }
+})
+
+onUnmounted(() => {
+    stopAutoplay()
+})
+
+const onMouseEnter = () => {
+    if (props.trigger === 'hover') {
+        isActive.value = true
+    } else if (props.trigger === 'autoplay') {
+        // Autoplay 模式下，hover 时暂停
+        isActive.value = false
+        stopAutoplay()
+    }
+}
+
+const onMouseLeave = () => {
+    if (props.trigger === 'hover') {
+        isActive.value = false
+    } else if (props.trigger === 'autoplay') {
+        // 离开后重新开启
+        startAutoplay()
+    }
+}
+
+const onClick = () => {
+    if (props.trigger === 'click') {
+        isActive.value = !isActive.value
+    }
+}
+
+// 暴露 API 供外部程序化控制
+const play = () => {
+    isActive.value = true
+}
+
+const stop = () => {
+    isActive.value = false
+}
+
+defineExpose({
+    play,
+    stop,
+})
+
+const classes = computed(() =>
+    cn(
+        glitchTextVariants({ speed: props.speed }),
+        isActive.value && !prefersReducedMotion.value ? 'is-glitching' : '',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <span
+        ref="elementRef"
+        :class="classes"
+        :data-text="displayText"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+        @click="onClick"
+        role="status"
+        aria-live="polite"
+    >
+        <slot>{{ text }}</slot>
+    </span>
+</template>
+
+<style scoped>
+.glitch-text::before,
+.glitch-text::after {
+    display: none;
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    clip-path: inset(0 0 0 0);
+}
+
+.glitch-text.is-glitching::before,
+.glitch-text.is-glitching::after {
+    display: block;
+}
+
+.glitch-text.is-glitching::before {
+    left: 2px;
+    text-shadow: -2px 0 var(--brutal-destructive, #EF476F);
+    animation: glitch-anim-1 var(--glitch-duration, 300ms) infinite linear alternate-reverse;
+}
+
+.glitch-text.is-glitching::after {
+    left: -2px;
+    text-shadow: -2px 0 var(--brutal-info, #4A90D9);
+    animation: glitch-anim-2 var(--glitch-duration, 300ms) infinite linear alternate-reverse;
+}
+
+@keyframes glitch-anim-1 {
+    0% {
+        clip-path: inset(20% 0 70% 0);
+        transform: skew(-5deg);
+    }
+    20% {
+        clip-path: inset(60% 0 10% 0);
+        transform: skew(5deg);
+    }
+    40% {
+        clip-path: inset(40% 0 50% 0);
+        transform: skew(-2deg);
+    }
+    60% {
+        clip-path: inset(80% 0 5% 0);
+        transform: skew(3deg);
+    }
+    80% {
+        clip-path: inset(10% 0 85% 0);
+        transform: skew(-4deg);
+    }
+    100% {
+        clip-path: inset(50% 0 35% 0);
+        transform: skew(1deg);
+    }
+}
+
+@keyframes glitch-anim-2 {
+    0% {
+        clip-path: inset(10% 0 85% 0);
+        transform: skew(4deg);
+    }
+    25% {
+        clip-path: inset(40% 0 45% 0);
+        transform: skew(-3deg);
+    }
+    50% {
+        clip-path: inset(70% 0 15% 0);
+        transform: skew(5deg);
+    }
+    75% {
+        clip-path: inset(25% 0 60% 0);
+        transform: skew(-2deg);
+    }
+    100% {
+        clip-path: inset(90% 0 2% 0);
+        transform: skew(3deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .glitch-text::before,
+    .glitch-text::after,
+    .glitch-text.is-glitching::before,
+    .glitch-text.is-glitching::after {
+        display: none !important;
+        animation: none !important;
+    }
+}
+</style>
diff --git a/packages/ui/src/components/glitch-text/glitch-text-variants.ts b/packages/ui/src/components/glitch-text/glitch-text-variants.ts
new file mode 100644
index 0000000..01e58de
--- /dev/null
+++ b/packages/ui/src/components/glitch-text/glitch-text-variants.ts
@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority'
+
+export const glitchTextVariants = cva(
+    [
+        'glitch-text',
+        'relative inline-block',
+        'font-black tracking-wide',
+        'text-brutal-fg',
+    ],
+    {
+        variants: {
+            speed: {
+                slow: '[--glitch-duration:800ms]',
+                medium: '[--glitch-duration:300ms]',
+                fast: '[--glitch-duration:100ms]',
+            },
+        },
+        defaultVariants: {
+            speed: 'medium',
+        },
+    }
+)
diff --git a/packages/ui/src/components/glitch-text/glitch-text.test.ts b/packages/ui/src/components/glitch-text/glitch-text.test.ts
new file mode 100644
index 0000000..8150f7d
--- /dev/null
+++ b/packages/ui/src/components/glitch-text/glitch-text.test.ts
@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import { ref, nextTick } from 'vue'
+import GlitchText from './GlitchText.vue'
+
+vi.mock('../../composables/useReducedMotion', () => ({
+    useReducedMotion: () => ref(false)
+}))
+
+describe('GlitchText', () => {
+    it('renders with default class names', () => {
+        const wrapper = mount(GlitchText, {
+            props: { text: 'Test Text' }
+        })
+        expect(wrapper.text()).toBe('Test Text')
+        expect(wrapper.classes()).toContain('relative')
+        expect(wrapper.classes()).toContain('inline-block')
+    })
+
+    it('prefers slot content over text prop', () => {
+        const wrapper = mount(GlitchText, {
+            props: { text: 'Prop Text' },
+            slots: { default: 'Slot Text' }
+        })
+        expect(wrapper.text()).toBe('Slot Text')
+    })
+
+    it('toggles animation on click when trigger is click', async () => {
+        const wrapper = mount(GlitchText, {
+            props: { trigger: 'click', text: 'Click Test' }
+        })
+
+        expect(wrapper.classes()).not.toContain('is-glitching')
+
+        await wrapper.trigger('click')
+        expect(wrapper.classes()).toContain('is-glitching')
+
+        await wrapper.trigger('click')
+        expect(wrapper.classes()).not.toContain('is-glitching')
+    })
+
+    it('exposes play and stop methods', async () => {
+        const wrapper = mount(GlitchText, {
+            props: { trigger: 'none', text: 'Manual' }
+        })
+
+        expect(wrapper.classes()).not.toContain('is-glitching')
+
+        wrapper.vm.play()
+        await nextTick()
+        expect(wrapper.classes()).toContain('is-glitching')
+
+        wrapper.vm.stop()
+        await nextTick()
+        expect(wrapper.classes()).not.toContain('is-glitching')
+    })
+
+    it('applies speed variant classes', () => {
+        const wrapper = mount(GlitchText, {
+            props: { speed: 'slow', text: 'Slow' }
+        })
+        expect(wrapper.classes()).toContain('[--glitch-duration:800ms]')
+
+        const wrapper2 = mount(GlitchText, {
+            props: { speed: 'fast', text: 'Fast' }
+        })
+        expect(wrapper2.classes()).toContain('[--glitch-duration:100ms]')
+    })
+})
diff --git a/packages/ui/src/components/hardcore-input/HardcoreInput.vue b/packages/ui/src/components/hardcore-input/HardcoreInput.vue
new file mode 100644
index 0000000..a169409
--- /dev/null
+++ b/packages/ui/src/components/hardcore-input/HardcoreInput.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { ref, computed, toRef, inject, onUnmounted, useId } from 'vue'
+import { cn } from '../../lib/utils'
+import { useAudioEngine } from '../../composables/useAudioEngine'
+import { useLocale } from '@/composables/useLocale'
+import { hardcoreInputVariants, hardcoreInputFaceVariants } from './hardcore-input-variants'
+import { formFieldKey, type FormFieldContext } from '../form/form-context'
+
+interface HardcoreInputProps {
+    modelValue?: string
+    sound?: boolean
+    rules?: Array<(val: string) => boolean | string>
+    shakeOnError?: boolean
+    type?: string
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    validateOn?: 'input' | 'blur' | 'submit'
+    class?: string
+}
+
+const props = withDefaults(defineProps<HardcoreInputProps>(), {
+    modelValue: '',
+    sound: true,
+    rules: () => [],
+    shakeOnError: true,
+    type: 'text',
+    placeholder: '',
+    disabled: false,
+    readonly: false,
+    validateOn: 'blur',
+    class: '',
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string]
+    'validationChange': [state: 'default' | 'success' | 'error', message?: string]
+}>()
+
+const getUniqueId = () => {
+    try {
+        const id = useId()
+        return id.replace(/:/g, '-')
+    } catch {
+        return Math.random().toString(36).substring(2, 9)
+    }
+}
+
+const errorId = `input-error-${getUniqueId()}`
+
+const validationState = ref<'default' | 'success' | 'error'>('default')
+const errorMessage = ref<string>('')
+const triggerShake = ref(false)
+
+const audioEngine = useAudioEngine(toRef(props, 'sound'))
+const { t } = useLocale()
+
+const formField = inject<FormFieldContext | null>(formFieldKey, null)
+
+onUnmounted(() => {
+    audioEngine.dispose()
+})
+
+const validate = (value: string) => {
+    if (props.rules.length === 0) {
+        if (validationState.value !== 'default') {
+            validationState.value = 'default'
+            errorMessage.value = ''
+            emit('validationChange', 'default')
+        }
+        return
+    }
+
+    let isOk = true
+    let errText = ''
+
+    for (const rule of props.rules) {
+        const result = rule(value)
+        if (result !== true) {
+            isOk = false
+            errText = typeof result === 'string' ? result : t('hardcoreInput.invalidInput')
+            break
+        }
+    }
+
+    const prevState = validationState.value
+
+    if (!isOk) {
+        validationState.value = 'error'
+        errorMessage.value = errText
+        
+        if (prevState !== 'error') {
+            audioEngine.playSound('fail')
+        }
+        
+        if (props.shakeOnError) {
+            triggerShake.value = false
+            setTimeout(() => {
+                triggerShake.value = true
+            }, 10)
+        }
+        emit('validationChange', 'error', errText)
+    } else {
+        validationState.value = 'success'
+        errorMessage.value = ''
+        
+        if (prevState !== 'success') {
+            audioEngine.playSound('success')
+        }
+        emit('validationChange', 'success')
+    }
+
+    if (formField) {
+        formField.error.value = !isOk ? errText : undefined
+    }
+}
+
+const onInput = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value
+    emit('update:modelValue', value)
+    
+    // 键盘打字音效
+    audioEngine.playSound('type')
+
+    if (props.validateOn === 'input') {
+        validate(value)
+    }
+}
+
+const onBlur = () => {
+    if (props.validateOn === 'blur') {
+        validate(props.modelValue)
+    }
+}
+
+const onAnimationEnd = () => {
+    triggerShake.value = false
+}
+
+// 暴露外部主动校验接口
+const triggerValidate = () => {
+    validate(props.modelValue)
+}
+
+defineExpose({
+    validate: triggerValidate,
+    validationState,
+    errorMessage,
+})
+
+const containerClasses = computed(() =>
+    cn('relative w-full flex flex-col gap-1.5', props.class)
+)
+
+const inputClasses = computed(() =>
+    cn(
+        hardcoreInputVariants({ validationState: validationState.value }),
+        triggerShake.value ? 'animate-shake' : ''
+    )
+)
+
+const faceClasses = computed(() =>
+    cn(
+        hardcoreInputFaceVariants(),
+        validationState.value === 'success' ? 'bg-brutal-success' : '',
+        validationState.value === 'error' ? 'bg-brutal-destructive text-white animate-bounce-short' : ''
+    )
+)
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <div class="relative flex items-center w-full">
+            <input
+                :type="type"
+                :value="modelValue"
+                :disabled="disabled"
+                :readonly="readonly"
+                :placeholder="placeholder"
+                :class="inputClasses"
+                :aria-invalid="validationState === 'error'"
+                :aria-describedby="errorMessage ? errorId : undefined"
+                @input="onInput"
+                @blur="onBlur"
+                @animationend="onAnimationEnd"
+            />
+            
+            <!-- 右侧校验反馈表情 -->
+            <div class="absolute right-3 flex items-center z-10 pointer-events-none select-none">
+                <slot>
+                    <div v-if="validationState !== 'default'" :class="faceClasses">
+                        <!-- 成功 (😎) SVG -->
+                        <svg v-if="validationState === 'success'" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            <circle cx="12" cy="12" r="10" fill="var(--brutal-accent, #FFE66D)" stroke="currentColor" stroke-width="2.5" />
+                            <!-- 墨镜 -->
+                            <rect x="6" y="8" width="5" height="4" rx="1.5" fill="black" stroke="black" stroke-width="1" />
+                            <rect x="13" y="8" width="5" height="4" rx="1.5" fill="black" stroke="black" stroke-width="1" />
+                            <line x1="11" y1="10" x2="13" y2="10" stroke="black" stroke-width="2" />
+                            <!-- 微笑嘴巴 -->
+                            <path d="M8 15 Q12 19 16 15" stroke="black" stroke-width="2.5" stroke-linecap="round" fill="none" />
+                        </svg>
+                        
+                        <!-- 错误 (😠) SVG -->
+                        <svg v-if="validationState === 'error'" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                            <circle cx="12" cy="12" r="10" fill="var(--brutal-destructive, #EF476F)" stroke="currentColor" stroke-width="2.5" />
+                            <!-- 倒八字愤怒眉毛 -->
+                            <line x1="6" y1="8" x2="10" y2="10" stroke="black" stroke-width="2.5" stroke-linecap="round" />
+                            <line x1="18" y1="8" x2="14" y2="10" stroke="black" stroke-width="2.5" stroke-linecap="round" />
+                            <!-- 怒气眼睛 -->
+                            <circle cx="8" cy="12" r="1.5" fill="black" />
+                            <circle cx="16" cy="12" r="1.5" fill="black" />
+                            <!-- 嘟起向下的嘴巴 -->
+                            <path d="M9 17 Q12 14 15 17" stroke="black" stroke-width="2.5" stroke-linecap="round" fill="none" />
+                        </svg>
+                    </div>
+                </slot>
+            </div>
+        </div>
+        
+        <!-- 错误校验提示文案 -->
+        <p
+            v-if="validationState === 'error' && errorMessage"
+            :id="errorId"
+            class="text-xs font-black tracking-wide text-brutal-destructive animate-fade-in"
+            aria-live="polite"
+        >
+            {{ errorMessage }}
+        </p>
+    </div>
+</template>
+
+<style scoped>
+@keyframes input-shake {
+    0%, 100% { transform: translateX(0); }
+    15%, 45%, 75% { transform: translateX(-6px); }
+    30%, 60%, 90% { transform: translateX(6px); }
+}
+
+:deep(.animate-shake) {
+    animation: input-shake 0.35s ease-in-out;
+}
+
+@keyframes bounce-short {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+:deep(.animate-bounce-short) {
+    animation: bounce-short 0.4s ease-in-out 2;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(-2px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+:deep(.animate-fade-in) {
+    animation: fade-in 0.2s ease-out forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :deep(.animate-shake),
+    :deep(.animate-bounce-short),
+    :deep(.animate-fade-in) {
+        animation: none !important;
+        transform: none !important;
+    }
+}
+</style>
diff --git a/packages/ui/src/components/hardcore-input/hardcore-input-variants.ts b/packages/ui/src/components/hardcore-input/hardcore-input-variants.ts
new file mode 100644
index 0000000..4ff7073
--- /dev/null
+++ b/packages/ui/src/components/hardcore-input/hardcore-input-variants.ts
@@ -0,0 +1,41 @@
+import { cva } from 'class-variance-authority'
+
+export const hardcoreInputVariants = cva(
+    [
+        'w-full',
+        'border-3 border-brutal',
+        'rounded-brutal',
+        'bg-brutal-bg text-brutal-fg',
+        'shadow-brutal',
+        'px-4 py-2',
+        'font-bold',
+        'transition-all duration-150',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'placeholder:text-brutal-placeholder placeholder:font-normal',
+    ],
+    {
+        variants: {
+            validationState: {
+                default: '',
+                success: 'border-brutal-success',
+                error: 'border-brutal-destructive',
+            },
+        },
+        defaultVariants: {
+            validationState: 'default',
+        },
+    }
+)
+
+export const hardcoreInputFaceVariants = cva(
+    [
+        'inline-flex items-center justify-center',
+        'border-3 border-brutal',
+        'rounded-brutal',
+        'w-10 h-10',
+        'text-lg',
+        'bg-brutal-accent',
+        'transition-transform duration-300',
+    ]
+)
diff --git a/packages/ui/src/components/hardcore-input/hardcore-input.test.ts b/packages/ui/src/components/hardcore-input/hardcore-input.test.ts
new file mode 100644
index 0000000..4c54400
--- /dev/null
+++ b/packages/ui/src/components/hardcore-input/hardcore-input.test.ts
@@ -0,0 +1,105 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import HardcoreInput from './HardcoreInput.vue'
+
+vi.mock('../../composables/useAudioEngine', () => ({
+    useAudioEngine: () => ({
+        playSound: vi.fn(),
+        dispose: vi.fn()
+    })
+}))
+
+describe('HardcoreInput', () => {
+    it('supports v-model and updates binding value', async () => {
+        const wrapper = mount(HardcoreInput, {
+            props: { modelValue: 'hello' }
+        })
+        const input = wrapper.find('input')
+        expect(input.element.value).toBe('hello')
+
+        await input.setValue('world')
+        expect(wrapper.emitted()['update:modelValue']?.[0]).toEqual(['world'])
+    })
+
+    it('performs validation on blur', async () => {
+        const checkRule = (val: string) => val.length >= 5 || 'Too short!'
+        const wrapper = mount(HardcoreInput, {
+            props: {
+                modelValue: '123',
+                rules: [checkRule],
+                validateOn: 'blur'
+            }
+        })
+
+        const input = wrapper.find('input')
+        await input.trigger('blur')
+
+        expect((wrapper.vm as any).validationState).toBe('error')
+        expect((wrapper.vm as any).errorMessage).toBe('Too short!')
+        expect(wrapper.text()).toContain('Too short!')
+    })
+
+    it('shows success state when validation passes', async () => {
+        const checkRule = (val: string) => val.length >= 5 || 'Too short!'
+        const wrapper = mount(HardcoreInput, {
+            props: {
+                modelValue: '12345',
+                rules: [checkRule],
+                validateOn: 'blur'
+            }
+        })
+
+        const input = wrapper.find('input')
+        await input.trigger('blur')
+
+        expect((wrapper.vm as any).validationState).toBe('success')
+        expect((wrapper.vm as any).errorMessage).toBe('')
+    })
+
+    it('does not create multiple AudioContext instances', () => {
+        const mockPlaySound = vi.fn()
+        const mockDispose = vi.fn()
+
+        vi.doMock('../../composables/useAudioEngine', () => ({
+            useAudioEngine: () => ({
+                playSound: mockPlaySound,
+                dispose: mockDispose
+            })
+        }))
+
+        const wrapper = mount(HardcoreInput, {
+            props: { modelValue: 'test' }
+        })
+
+        expect(mockDispose).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+    })
+
+    it('throttles type sound playback', async () => {
+        const playSoundMock = vi.fn()
+        vi.doMock('../../composables/useAudioEngine', () => ({
+            useAudioEngine: () => ({
+                playSound: playSoundMock,
+                dispose: vi.fn()
+            })
+        }))
+
+        const { default: HardcoreInputFresh } = await import('./HardcoreInput.vue')
+        const wrapper = mount(HardcoreInputFresh, {
+            props: { modelValue: '', sound: true }
+        })
+
+        const input = wrapper.find('input')
+        await input.setValue('a')
+        await input.setValue('b')
+        await input.setValue('c')
+
+        const typeCalls = playSoundMock.mock.calls.filter(
+            (call: any[]) => call[0] === 'type'
+        )
+        expect(typeCalls.length).toBeLessThanOrEqual(3)
+
+        vi.doUnmock('../../composables/useAudioEngine')
+    })
+})
diff --git a/packages/ui/src/components/header-section/HeaderSection.vue b/packages/ui/src/components/header-section/HeaderSection.vue
new file mode 100644
index 0000000..32cd40a
--- /dev/null
+++ b/packages/ui/src/components/header-section/HeaderSection.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { DialogRoot } from 'reka-ui'
+import { Menu } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Button from '../button/Button.vue'
+import SheetContent from '../sheet/SheetContent.vue'
+import SheetHeader from '../sheet/SheetHeader.vue'
+import SheetTitle from '../sheet/SheetTitle.vue'
+import SheetDescription from '../sheet/SheetDescription.vue'
+import Separator from '../separator/Separator.vue'
+
+export interface NavItem {
+    label: string
+    href?: string
+}
+
+interface HeaderSectionProps {
+    logoText?: string
+    navItems?: NavItem[]
+    ctaText?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<HeaderSectionProps>(), {
+    logoText: undefined,
+    navItems: () => [],
+    ctaText: undefined,
+    class: '',
+})
+
+const emit = defineEmits<{
+    'cta-click': []
+    'nav-click': [index: number]
+}>()
+
+const { t } = useLocale()
+
+const resolvedLogoText = computed(() => props.logoText ?? t('headerSection.defaultLogoText'))
+const resolvedCtaText = computed(() => props.ctaText ?? t('headerSection.defaultCtaText'))
+const menuLabel = computed(() => t('headerSection.menuLabel'))
+
+const mobileMenuOpen = ref(false)
+
+const rootClasses = computed(() =>
+    cn(
+        'sticky top-0 z-40 w-full',
+        'bg-brutal-bg border-3 border-b border-brutal shadow-brutal-sm',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <header :class="rootClasses">
+        <div class="flex h-16 items-center justify-between px-4 md:px-6 max-w-7xl mx-auto">
+            <slot name="header">
+                <span class="text-xl font-black tracking-tight text-brutal-fg">
+                    {{ resolvedLogoText }}
+                </span>
+            </slot>
+
+            <slot>
+                <nav class="hidden md:flex items-center gap-1">
+                    <Button
+                        v-for="(item, index) in navItems"
+                        :key="index"
+                        variant="ghost"
+                        size="sm"
+                        @click="emit('nav-click', index)"
+                    >
+                        {{ item.label }}
+                    </Button>
+                </nav>
+            </slot>
+
+            <div class="flex items-center gap-3">
+                <slot name="footer">
+                    <Button
+                        variant="primary"
+                        size="sm"
+                        class="hidden md:inline-flex"
+                        @click="emit('cta-click')"
+                    >
+                        {{ resolvedCtaText }}
+                    </Button>
+                </slot>
+
+                <Button
+                    variant="outline"
+                    size="sm"
+                    class="md:hidden"
+                    @click="mobileMenuOpen = true"
+                >
+                    <Menu class="h-5 w-5" />
+                    <span class="sr-only">{{ menuLabel }}</span>
+                </Button>
+            </div>
+        </div>
+
+        <DialogRoot v-model:open="mobileMenuOpen">
+            <SheetContent side="right">
+                <SheetHeader>
+                    <SheetTitle>{{ resolvedLogoText }}</SheetTitle>
+                    <SheetDescription>{{ menuLabel }}</SheetDescription>
+                </SheetHeader>
+                <nav class="flex flex-col gap-2 py-4">
+                    <Button
+                        v-for="(item, index) in navItems"
+                        :key="index"
+                        variant="ghost"
+                        class="justify-start"
+                        @click="emit('nav-click', index); mobileMenuOpen = false"
+                    >
+                        {{ item.label }}
+                    </Button>
+                </nav>
+                <Separator />
+                <div class="pt-4">
+                    <Button
+                        variant="primary"
+                        class="w-full"
+                        @click="emit('cta-click'); mobileMenuOpen = false"
+                    >
+                        {{ resolvedCtaText }}
+                    </Button>
+                </div>
+            </SheetContent>
+        </DialogRoot>
+    </header>
+</template>
diff --git a/packages/ui/src/components/header-section/header-section.test.ts b/packages/ui/src/components/header-section/header-section.test.ts
new file mode 100644
index 0000000..84bb868
--- /dev/null
+++ b/packages/ui/src/components/header-section/header-section.test.ts
@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import HeaderSection from './HeaderSection.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockNavItems = [
+    { label: 'Home', href: '/' },
+    { label: 'About', href: '/about' },
+    { label: 'Contact', href: '/contact' },
+]
+
+describe('HeaderSection', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(HeaderSection, { ...localeProvide })
+        expect(wrapper.find('header').exists()).toBe(true)
+    })
+
+    it('renders custom logo text', () => {
+        const wrapper = mount(HeaderSection, {
+            props: { logoText: 'MyBrand' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('MyBrand')
+    })
+
+    it('renders nav items', () => {
+        const wrapper = mount(HeaderSection, {
+            props: { navItems: mockNavItems },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Home')
+        expect(wrapper.text()).toContain('About')
+        expect(wrapper.text()).toContain('Contact')
+    })
+
+    it('renders CTA button text', () => {
+        const wrapper = mount(HeaderSection, {
+            props: { ctaText: 'Sign Up' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Sign Up')
+    })
+
+    it('renders with empty nav items', () => {
+        const wrapper = mount(HeaderSection, {
+            props: { navItems: [] },
+            ...localeProvide,
+        })
+        expect(wrapper.find('header').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(HeaderSection, {
+            props: { class: 'my-header' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('header').classes()).toContain('my-header')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(HeaderSection, {
+            slots: { header: '<div class="custom-logo">Custom Logo</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-logo').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(HeaderSection, {
+            slots: { footer: '<div class="custom-cta">Custom CTA</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-cta').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(HeaderSection, {
+            slots: { default: '<nav class="custom-nav">Custom Nav</nav>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-nav').exists()).toBe(true)
+    })
+
+    it('has sticky header styling', () => {
+        const wrapper = mount(HeaderSection, { ...localeProvide })
+        const header = wrapper.find('header')
+        expect(header.classes()).toContain('sticky')
+        expect(header.classes()).toContain('border-3')
+        expect(header.classes()).toContain('border-brutal')
+    })
+})
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
deleted file mode 100644
index 76d4967..0000000
--- a/packages/ui/src/components/input.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const inputVariants = cva(
-    [
-        'flex w-full',
-        'border-3 border-brutal rounded-brutal',
-        'bg-brutal-bg text-brutal-fg',
-        'font-medium',
-        'placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:font-normal',
-        'transition-all duration-150',
-        'focus:outline-none focus:shadow-brutal',
-        'focus-visible:ring-2 focus-visible:ring-[var(--brutal-ring,#000)] focus-visible:ring-offset-2',
-        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',
-    ],
-    {
-        variants: {
-            variant: {
-                default: '',
-                error: 'border-[#EF476F] focus:shadow-[4px_4px_0px_0px_#EF476F]',
-                success: 'border-[#7FB069] focus:shadow-[4px_4px_0px_0px_#7FB069]',
-            },
-            size: {
-                sm: 'h-9 px-3 py-1 text-sm',
-                default: 'h-11 px-4 py-2 text-base',
-                lg: 'h-14 px-5 py-3 text-lg',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-export interface InputProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
-        VariantProps<typeof inputVariants> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-    ({ className, variant, size, type, ...props }, ref) => {
-        return (
-            <input
-                type={type}
-                className={cn(inputVariants({ variant, size, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
-);
-Input.displayName = 'Input';
-
-export { Input, inputVariants };
diff --git a/packages/ui/src/components/input/Input.vue b/packages/ui/src/components/input/Input.vue
new file mode 100644
index 0000000..1ad05dd
--- /dev/null
+++ b/packages/ui/src/components/input/Input.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { inputVariants } from './input-variants'
+
+type InputVariantProps = VariantProps<typeof inputVariants>
+
+interface InputProps {
+    type?: string
+    modelValue?: string
+    variant?: NonNullable<InputVariantProps['variant']>
+    inputSize?: NonNullable<InputVariantProps['inputSize']>
+    disabled?: boolean
+    placeholder?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+    type: 'text',
+    modelValue: undefined,
+    variant: 'default',
+    inputSize: 'default',
+    disabled: false,
+    placeholder: '',
+    class: '',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const classes = computed(() =>
+    cn(inputVariants({ variant: props.variant, inputSize: props.inputSize }), props.class)
+)
+</script>
+
+<template>
+    <input
+        :type="type"
+        :value="modelValue"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :class="classes"
+        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    >
+</template>
diff --git a/packages/ui/src/components/input/input-variants.ts b/packages/ui/src/components/input/input-variants.ts
new file mode 100644
index 0000000..5c63380
--- /dev/null
+++ b/packages/ui/src/components/input/input-variants.ts
@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority'
+
+export const inputVariants = cva(
+    [
+        'flex w-full',
+        'border-3 border-brutal',
+        'bg-brutal-bg text-brutal-fg',
+        'font-medium',
+        'placeholder:text-brutal-placeholder placeholder:font-normal',
+        'transition-all duration-150',
+        'focus:outline-none focus:shadow-brutal',
+        'focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',
+    ],
+    {
+        variants: {
+            variant: {
+                default: '',
+                error: 'border-brutal-destructive focus:shadow-brutal-primary',
+                success: 'border-brutal-success focus:shadow-brutal-secondary',
+            },
+            inputSize: {
+                sm: 'h-9 px-3 py-1 text-sm',
+                default: 'h-11 px-4 py-2 text-base',
+                lg: 'h-14 px-5 py-3 text-lg',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            inputSize: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/input/input.test.ts b/packages/ui/src/components/input/input.test.ts
new file mode 100644
index 0000000..15045e4
--- /dev/null
+++ b/packages/ui/src/components/input/input.test.ts
@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import Input from './Input.vue'
+
+describe('Input', () => {
+    it('renders with default type="text"', () => {
+        const wrapper = mount(Input)
+        expect(wrapper.element.tagName).toBe('INPUT')
+        expect(wrapper.attributes('type')).toBe('text')
+    })
+
+    it('applies variant classes', async () => {
+        const wrapper = mount(Input)
+
+        await wrapper.setProps({ variant: 'default' })
+        expect(wrapper.classes()).toContain('border-brutal')
+
+        await wrapper.setProps({ variant: 'error' })
+        expect(wrapper.classes()).toContain('border-brutal-destructive')
+
+        await wrapper.setProps({ variant: 'success' })
+        expect(wrapper.classes()).toContain('border-brutal-success')
+    })
+
+    it('applies size classes via inputSize prop', async () => {
+        const wrapper = mount(Input)
+
+        await wrapper.setProps({ inputSize: 'sm' })
+        expect(wrapper.classes()).toContain('h-9')
+
+        await wrapper.setProps({ inputSize: 'default' })
+        expect(wrapper.classes()).toContain('h-11')
+
+        await wrapper.setProps({ inputSize: 'lg' })
+        expect(wrapper.classes()).toContain('h-14')
+    })
+
+    it('has v-model support (emits update:modelValue on input)', async () => {
+        const wrapper = mount(Input, {
+            props: { modelValue: '' },
+        })
+        await wrapper.setValue('hello')
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual(['hello'])
+    })
+
+    it('is disabled when disabled=true', () => {
+        const wrapper = mount(Input, {
+            props: { disabled: true },
+        })
+        expect(wrapper.attributes('disabled')).toBeDefined()
+    })
+
+    it('shows placeholder text', () => {
+        const wrapper = mount(Input, {
+            props: { placeholder: 'Enter text' },
+        })
+        expect(wrapper.attributes('placeholder')).toBe('Enter text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Input, {
+            props: { class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/kanban/KanbanBoard.vue b/packages/ui/src/components/kanban/KanbanBoard.vue
new file mode 100644
index 0000000..3ac20ad
--- /dev/null
+++ b/packages/ui/src/components/kanban/KanbanBoard.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { cn } from '../../lib/utils';
+import { useLocale } from '@/composables/useLocale';
+import { kanbanColumnVariants, kanbanCardVariants } from './kanban-variants';
+
+export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: string[];
+    color?: string;
+}
+
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    color?: string;
+    cards: KanbanCard[];
+}
+
+interface KanbanBoardProps {
+    modelValue: KanbanColumn[];
+    class?: string;
+}
+
+const props = defineProps<KanbanBoardProps>();
+
+const emit = defineEmits<{
+    'update:modelValue': [columns: KanbanColumn[]];
+    'card-move': [cardId: string, fromColumn: string, toColumn: string];
+}>();
+
+const { t } = useLocale();
+
+const draggingCard = ref<{ cardId: string; fromColumn: string } | null>(null);
+const dragOverColumn = ref<string | null>(null);
+
+const columns = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+
+function onDragStart(cardId: string, fromColumn: string) {
+    draggingCard.value = { cardId, fromColumn };
+}
+
+function onDragEnd() {
+    draggingCard.value = null;
+    dragOverColumn.value = null;
+}
+
+function onDragOver(e: DragEvent, columnId: string) {
+    e.preventDefault();
+    dragOverColumn.value = columnId;
+}
+
+function onDragLeave(columnId: string) {
+    if (dragOverColumn.value === columnId) {
+        dragOverColumn.value = null;
+    }
+}
+
+function onDrop(toColumnId: string) {
+    if (!draggingCard.value) return;
+    const { cardId, fromColumn } = draggingCard.value;
+    if (fromColumn === toColumnId) {
+        dragOverColumn.value = null;
+        draggingCard.value = null;
+        return;
+    }
+
+    const sourceColumn = columns.value.find((col) => col.id === fromColumn);
+    const card = sourceColumn?.cards.find((c) => c.id === cardId);
+    if (!card) {
+        draggingCard.value = null;
+        dragOverColumn.value = null;
+        return;
+    }
+
+    const newColumns = columns.value.map((col) => {
+        if (col.id === fromColumn) {
+            return { ...col, cards: col.cards.filter((c) => c.id !== cardId) };
+        }
+        if (col.id === toColumnId) {
+            return { ...col, cards: [...col.cards, card] };
+        }
+        return col;
+    });
+
+    emit('update:modelValue', newColumns);
+    emit('card-move', cardId, fromColumn, toColumnId);
+    draggingCard.value = null;
+    dragOverColumn.value = null;
+}
+
+const boardClass = computed(() => cn('flex gap-4 overflow-x-auto pb-4', props.class));
+
+const columnClassesMap = computed(() => {
+    const map = new Map<string, string>()
+    columns.value.forEach((col) => {
+        map.set(col.id, cn(kanbanColumnVariants({ dragOver: dragOverColumn.value === col.id })))
+    })
+    return map
+})
+
+const cardClassesMap = computed(() => {
+    const map = new Map<string, string>()
+    columns.value.forEach((col) => {
+        col.cards.forEach((card) => {
+            map.set(card.id, cn(kanbanCardVariants({ dragging: draggingCard.value?.cardId === card.id })))
+        })
+    })
+    return map
+})
+</script>
+
+<template>
+    <div :class="boardClass">
+        <div
+            v-for="col in columns"
+            :key="col.id"
+            :class="columnClassesMap.get(col.id)"
+            @dragover="onDragOver($event, col.id)"
+            @dragleave="onDragLeave(col.id)"
+            @drop="onDrop(col.id)"
+        >
+            <!-- Column Header -->
+            <div class="flex items-center justify-between mb-1">
+                <div class="flex items-center gap-2">
+                    <span
+                        v-if="col.color"
+                        class="inline-block w-3 h-3 rounded-brutal border-3 border-brutal"
+                        :style="{ background: col.color }"
+                    />
+                    <h3 class="font-black text-sm tracking-wide uppercase text-brutal-fg">{{ col.title }}</h3>
+                </div>
+                <span class="text-xs font-bold border-3 border-brutal px-1.5 py-0.5 rounded-brutal bg-brutal-bg shadow-brutal">
+                    {{ col.cards.length }}
+                </span>
+            </div>
+
+            <!-- Cards -->
+            <div class="flex flex-col gap-2 min-h-[120px]">
+                <div
+                    v-for="card in col.cards"
+                    :key="card.id"
+                    :class="cardClassesMap.get(card.id)"
+                    draggable="true"
+                    @dragstart="onDragStart(card.id, col.id)"
+                    @dragend="onDragEnd"
+                >
+                    <p class="font-bold text-sm text-brutal-fg">{{ card.title }}</p>
+                    <p v-if="card.description" class="text-xs text-brutal-fg opacity-70 mt-1">
+                        {{ card.description }}
+                    </p>
+                    <div v-if="card.tags && card.tags.length" class="flex flex-wrap gap-1 mt-2">
+                        <span
+                            v-for="tag in card.tags"
+                            :key="tag"
+                            class="text-xs font-bold px-1.5 py-0.5 border-3 border-brutal rounded-brutal bg-brutal-accent"
+                        >
+                            {{ tag }}
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Empty State -->
+                <div
+                    v-if="col.cards.length === 0"
+                    class="flex items-center justify-center h-16 border-3 border-dashed border-brutal rounded-brutal text-xs font-medium opacity-40"
+                >
+                    {{ t('kanban.dropCardsHere') }}
+                </div>
+            </div>
+
+            <!-- Add Card Slot -->
+            <slot :name="`add-${col.id}`" />
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/kanban/index.ts b/packages/ui/src/components/kanban/index.ts
new file mode 100644
index 0000000..963c34b
--- /dev/null
+++ b/packages/ui/src/components/kanban/index.ts
@@ -0,0 +1,2 @@
+export { default as KanbanBoard } from './KanbanBoard.vue';
+export type { KanbanCard, KanbanColumn } from './KanbanBoard.vue';
diff --git a/packages/ui/src/components/kanban/kanban-variants.ts b/packages/ui/src/components/kanban/kanban-variants.ts
new file mode 100644
index 0000000..91a125e
--- /dev/null
+++ b/packages/ui/src/components/kanban/kanban-variants.ts
@@ -0,0 +1,42 @@
+import { cva } from 'class-variance-authority';
+
+export const kanbanColumnVariants = cva(
+    [
+        'flex flex-col gap-3 min-w-[260px] w-[280px]',
+        'border-3 border-brutal shadow-brutal rounded-brutal',
+        'bg-brutal-muted p-3',
+        'transition-shadow duration-200',
+    ].join(' '),
+    {
+        variants: {
+            dragOver: {
+                true: 'shadow-brutal-lg border-brutal-primary',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            dragOver: false,
+        },
+    }
+);
+
+export const kanbanCardVariants = cva(
+    [
+        'border-3 border-brutal shadow-brutal rounded-brutal',
+        'bg-brutal-bg px-3 py-2',
+        'cursor-grab active:cursor-grabbing',
+        'transition-all duration-150',
+        'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
+    ].join(' '),
+    {
+        variants: {
+            dragging: {
+                true: 'opacity-40 shadow-none',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            dragging: false,
+        },
+    }
+);
diff --git a/packages/ui/src/components/kanban/kanban.test.ts b/packages/ui/src/components/kanban/kanban.test.ts
new file mode 100644
index 0000000..403ff36
--- /dev/null
+++ b/packages/ui/src/components/kanban/kanban.test.ts
@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils'
+import KanbanBoard from './KanbanBoard.vue'
+import type { KanbanCard, KanbanColumn } from './KanbanBoard.vue'
+import { zhCN } from '@/locales/zh-CN'
+
+const card1: KanbanCard = {
+    id: 'card-1',
+    title: 'Design System',
+    description: 'Create design tokens',
+    tags: ['design', 'ui'],
+}
+
+const card2: KanbanCard = {
+    id: 'card-2',
+    title: 'API Integration',
+    tags: ['backend'],
+}
+
+const card3: KanbanCard = {
+    id: 'card-3',
+    title: 'Bug Fix',
+    description: 'Fix login redirect',
+}
+
+const columns: KanbanColumn[] = [
+    {
+        id: 'todo',
+        title: 'To Do',
+        cards: [card1, card2],
+    },
+    {
+        id: 'in-progress',
+        title: 'In Progress',
+        color: '#4ECDC4',
+        cards: [card3],
+    },
+    {
+        id: 'done',
+        title: 'Done',
+        cards: [],
+    },
+]
+
+describe('KanbanBoard', () => {
+    it('renders columns and cards', () => {
+        const wrapper = mount(KanbanBoard, {
+            props: { modelValue: columns },
+        })
+        const columnEls = wrapper.findAll('[class*="flex-col"]')
+        expect(columnEls.length).toBeGreaterThanOrEqual(3)
+        expect(wrapper.text()).toContain('Design System')
+        expect(wrapper.text()).toContain('API Integration')
+        expect(wrapper.text()).toContain('Bug Fix')
+    })
+
+    it('shows column titles', () => {
+        const wrapper = mount(KanbanBoard, {
+            props: { modelValue: columns },
+        })
+        expect(wrapper.text()).toContain('To Do')
+        expect(wrapper.text()).toContain('In Progress')
+        expect(wrapper.text()).toContain('Done')
+    })
+
+    it('shows card count badge', () => {
+        const wrapper = mount(KanbanBoard, {
+            props: { modelValue: columns },
+        })
+        const badges = wrapper.findAll('span.text-xs.font-bold.border-3')
+        const texts = badges.map((b) => b.text())
+        expect(texts).toContain('2')
+        expect(texts).toContain('1')
+        expect(texts).toContain('0')
+    })
+
+    it('shows empty state for empty column', () => {
+        const wrapper = mount(KanbanBoard, {
+            props: { modelValue: columns },
+        })
+        expect(wrapper.text()).toContain(zhCN.kanban.dropCardsHere)
+    })
+
+    it('renders card tags', () => {
+        const wrapper = mount(KanbanBoard, {
+            props: { modelValue: columns },
+        })
+        expect(wrapper.text()).toContain('design')
+        expect(wrapper.text()).toContain('ui')
+        expect(wrapper.text()).toContain('backend')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(KanbanBoard, {
+            props: { modelValue: columns, class: 'my-board' },
+        })
+        expect(wrapper.classes()).toContain('my-board')
+    })
+
+    it('cards are draggable', () => {
+        const wrapper = mount(KanbanBoard, {
+            props: { modelValue: columns },
+        })
+        const cards = wrapper.findAll('[draggable="true"]')
+        expect(cards.length).toBe(3)
+    })
+})
diff --git a/packages/ui/src/components/kbd/Kbd.vue b/packages/ui/src/components/kbd/Kbd.vue
new file mode 100644
index 0000000..e1dce91
--- /dev/null
+++ b/packages/ui/src/components/kbd/Kbd.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { kbdVariants } from './kbd-variants';
+
+type KbdVariantProps = VariantProps<typeof kbdVariants>;
+
+interface KbdProps {
+    size?: NonNullable<KbdVariantProps['size']>;
+    class?: string;
+}
+
+const props = withDefaults(defineProps<KbdProps>(), {
+    size: 'md',
+});
+
+const classes = computed(() =>
+    cn(kbdVariants({ size: props.size }), props.class)
+);
+</script>
+
+<template>
+    <kbd :class="classes">
+        <slot />
+    </kbd>
+</template>
diff --git a/packages/ui/src/components/kbd/index.ts b/packages/ui/src/components/kbd/index.ts
new file mode 100644
index 0000000..94189a9
--- /dev/null
+++ b/packages/ui/src/components/kbd/index.ts
@@ -0,0 +1,2 @@
+export { default as Kbd } from './Kbd.vue';
+export { kbdVariants } from './kbd-variants';
diff --git a/packages/ui/src/components/kbd/kbd-variants.ts b/packages/ui/src/components/kbd/kbd-variants.ts
new file mode 100644
index 0000000..4b8edb0
--- /dev/null
+++ b/packages/ui/src/components/kbd/kbd-variants.ts
@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority';
+
+export const kbdVariants = cva(
+    [
+        'inline-flex items-center justify-center',
+        'font-mono font-black text-brutal-fg',
+        'border-3 border-brutal rounded-brutal',
+        'bg-brutal-muted shadow-brutal-sm',
+        'select-none whitespace-nowrap',
+    ].join(' '),
+    {
+        variants: {
+            size: {
+                sm: 'px-1.5 py-0.5 text-xs min-w-[1.25rem]',
+                md: 'px-2 py-1 text-sm min-w-[1.75rem]',
+                lg: 'px-3 py-1.5 text-base min-w-[2.25rem]',
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+        },
+    }
+);
diff --git a/packages/ui/src/components/kbd/kbd.test.ts b/packages/ui/src/components/kbd/kbd.test.ts
new file mode 100644
index 0000000..e982c57
--- /dev/null
+++ b/packages/ui/src/components/kbd/kbd.test.ts
@@ -0,0 +1,63 @@
+import { mount } from '@vue/test-utils'
+import Kbd from './Kbd.vue'
+
+describe('Kbd', () => {
+    it('renders as kbd element', () => {
+        const wrapper = mount(Kbd)
+        expect(wrapper.element.tagName).toBe('KBD')
+    })
+
+    it('applies default md size classes', () => {
+        const wrapper = mount(Kbd)
+        const classes = wrapper.classes()
+        expect(classes).toContain('px-2')
+        expect(classes).toContain('py-1')
+        expect(classes).toContain('text-sm')
+        expect(classes).toContain('min-w-[1.75rem]')
+    })
+
+    it('applies sm size classes', () => {
+        const wrapper = mount(Kbd, {
+            props: { size: 'sm' },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('px-1.5')
+        expect(classes).toContain('py-0.5')
+        expect(classes).toContain('text-xs')
+        expect(classes).toContain('min-w-[1.25rem]')
+    })
+
+    it('applies lg size classes', () => {
+        const wrapper = mount(Kbd, {
+            props: { size: 'lg' },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('px-3')
+        expect(classes).toContain('py-1.5')
+        expect(classes).toContain('text-base')
+        expect(classes).toContain('min-w-[2.25rem]')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Kbd, {
+            slots: { default: 'Ctrl' },
+        })
+        expect(wrapper.text()).toBe('Ctrl')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Kbd, {
+            props: { class: 'my-kbd' },
+        })
+        expect(wrapper.classes()).toContain('my-kbd')
+    })
+
+    it('has base brutal classes', () => {
+        const wrapper = mount(Kbd)
+        const classes = wrapper.classes()
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('rounded-brutal')
+        expect(classes).toContain('shadow-brutal-sm')
+    })
+})
diff --git a/packages/ui/src/components/label.tsx b/packages/ui/src/components/label.tsx
deleted file mode 100644
index 09c48f4..0000000
--- a/packages/ui/src/components/label.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const labelVariants = cva(
-    [
-        'text-sm font-bold tracking-wide leading-none',
-        'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'text-black dark:text-white',
-                error: 'text-[#EF476F]',
-                success: 'text-[#7FB069]',
-                muted: 'text-gray-500 dark:text-gray-400',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-        },
-    }
-);
-
-export interface LabelProps
-    extends React.LabelHTMLAttributes<HTMLLabelElement>,
-        VariantProps<typeof labelVariants> {}
-
-const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-    ({ className, variant, ...props }, ref) => (
-        <label ref={ref} className={cn(labelVariants({ variant, className }))} {...props} />
-    )
-);
-Label.displayName = 'Label';
-
-export { Label, labelVariants };
diff --git a/packages/ui/src/components/label/Label.vue b/packages/ui/src/components/label/Label.vue
new file mode 100644
index 0000000..3288211
--- /dev/null
+++ b/packages/ui/src/components/label/Label.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { Label as LabelRoot } from 'reka-ui'
+import { labelVariants } from './label-variants'
+
+type LabelVariantProps = VariantProps<typeof labelVariants>
+
+interface LabelProps {
+    variant?: NonNullable<LabelVariantProps['variant']>
+    for?: string
+    class?: string
+}
+
+const props = defineProps<LabelProps>()
+
+const classes = computed(() =>
+    cn(labelVariants({ variant: props.variant }), props.class)
+)
+</script>
+
+<template>
+    <LabelRoot :class="classes" :for="props.for">
+        <slot />
+    </LabelRoot>
+</template>
diff --git a/packages/ui/src/components/label/label-variants.ts b/packages/ui/src/components/label/label-variants.ts
new file mode 100644
index 0000000..1a0700b
--- /dev/null
+++ b/packages/ui/src/components/label/label-variants.ts
@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority'
+
+export const labelVariants = cva(
+    [
+        'text-sm font-bold tracking-wide leading-none',
+        'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'text-brutal-fg',
+                error: 'text-brutal-destructive',
+                success: 'text-brutal-success',
+                muted: 'text-brutal-muted-foreground',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/label/label.test.ts b/packages/ui/src/components/label/label.test.ts
new file mode 100644
index 0000000..03feb10
--- /dev/null
+++ b/packages/ui/src/components/label/label.test.ts
@@ -0,0 +1,71 @@
+import { mount } from '@vue/test-utils'
+import Label from './Label.vue'
+
+describe('Label', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Label, { attachTo: document.body })
+        const classes = wrapper.classes()
+        expect(classes).toContain('text-sm')
+        expect(classes).toContain('font-bold')
+        expect(classes).toContain('tracking-wide')
+        expect(classes).toContain('leading-none')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Label, {
+            slots: { default: 'Username' },
+            attachTo: document.body,
+        })
+        expect(wrapper.text()).toBe('Username')
+    })
+
+    it('renders a label element', () => {
+        const wrapper = mount(Label, { attachTo: document.body })
+        expect(wrapper.element.tagName).toBe('LABEL')
+    })
+
+    it('applies default variant classes', () => {
+        const wrapper = mount(Label, { attachTo: document.body })
+        expect(wrapper.classes()).toContain('text-brutal-fg')
+    })
+
+    it('applies error variant classes', () => {
+        const wrapper = mount(Label, {
+            props: { variant: 'error' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('text-brutal-destructive')
+    })
+
+    it('applies success variant classes', () => {
+        const wrapper = mount(Label, {
+            props: { variant: 'success' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('text-brutal-success')
+    })
+
+    it('applies muted variant classes', () => {
+        const wrapper = mount(Label, {
+            props: { variant: 'muted' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('text-brutal-muted-foreground')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Label, {
+            props: { class: 'my-label' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('my-label')
+    })
+
+    it('passes for attribute', () => {
+        const wrapper = mount(Label, {
+            props: { for: 'input-field' },
+            attachTo: document.body,
+        })
+        expect(wrapper.attributes('for')).toBe('input-field')
+    })
+})
diff --git a/packages/ui/src/components/loading-page/LoadingPage.vue b/packages/ui/src/components/loading-page/LoadingPage.vue
new file mode 100644
index 0000000..4bf76d6
--- /dev/null
+++ b/packages/ui/src/components/loading-page/LoadingPage.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Skeleton from '../skeleton/Skeleton.vue'
+import Spinner from '../spinner/Spinner.vue'
+import Progress from '../progress/Progress.vue'
+
+interface LoadingPageProps {
+    title?: string
+    description?: string
+    progress?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<LoadingPageProps>(), {
+    title: undefined,
+    description: undefined,
+    progress: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('loadingPage.defaultTitle'))
+const resolvedDescription = computed(() => props.description ?? t('loadingPage.defaultDescription'))
+
+const hasProgress = computed(() => props.progress !== undefined)
+
+const rootClasses = computed(() =>
+    cn('min-h-screen flex items-center justify-center bg-brutal-bg p-4', props.class)
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="w-full max-w-lg text-center relative">
+            <slot name="header" />
+
+            <div class="relative border-3 border-brutal bg-brutal-bg shadow-brutal p-8 sm:p-12">
+                <Skeleton variant="accent" class="absolute -top-3 -left-3 h-6 w-24" />
+                <Skeleton variant="secondary" class="absolute -bottom-3 -right-3 h-6 w-32" />
+
+                <div class="flex justify-center mb-6">
+                    <Spinner size="lg" />
+                </div>
+
+                <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-brutal-fg">
+                    {{ resolvedTitle }}
+                </h1>
+
+                <p class="mt-3 text-brutal-muted-foreground font-medium">
+                    {{ resolvedDescription }}
+                </p>
+
+                <slot />
+
+                <div v-if="hasProgress" class="mt-6">
+                    <Progress :model-value="progress" />
+                </div>
+
+                <slot name="footer" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/loading-page/loading-page.test.ts b/packages/ui/src/components/loading-page/loading-page.test.ts
new file mode 100644
index 0000000..27fb068
--- /dev/null
+++ b/packages/ui/src/components/loading-page/loading-page.test.ts
@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import LoadingPage from './LoadingPage.vue'
+
+const mockLocale = {
+    ...en,
+    loadingPage: {
+        defaultTitle: 'Loading',
+        defaultDescription: 'Please wait while we load your content.',
+    },
+}
+
+const localeProvide = { [LOCALE_INJECTION_KEY]: mockLocale }
+
+describe('LoadingPage', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(LoadingPage, { global: { provide: localeProvide } })
+        expect(wrapper.find('h1').text()).toBe('Loading')
+        expect(wrapper.text()).toContain('Please wait while we load your content.')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(LoadingPage, {
+            props: { title: 'Loading Data' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('h1').text()).toBe('Loading Data')
+    })
+
+    it('shows custom description', () => {
+        const wrapper = mount(LoadingPage, {
+            props: { description: 'Please wait a moment' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('Please wait a moment')
+    })
+
+    it('renders Spinner component', () => {
+        const wrapper = mount(LoadingPage, { global: { provide: localeProvide } })
+        const spinner = wrapper.find('[role="status"]')
+        expect(spinner.exists()).toBe(true)
+    })
+
+    it('does not show Progress when progress prop is undefined', () => {
+        const wrapper = mount(LoadingPage, { global: { provide: localeProvide } })
+        const progressBar = wrapper.find('[role="progressbar"]')
+        expect(progressBar.exists()).toBe(false)
+    })
+
+    it('shows Progress when progress prop is provided', () => {
+        const wrapper = mount(LoadingPage, {
+            props: { progress: 50 },
+            global: { provide: localeProvide },
+        })
+        const progressBar = wrapper.find('[role="progressbar"]')
+        expect(progressBar.exists()).toBe(true)
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(LoadingPage, {
+            slots: { header: '<div data-test="header">Header Content</div>' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="header"]').text()).toBe('Header Content')
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(LoadingPage, {
+            slots: { default: '<div data-test="custom">Custom Content</div>' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('[data-test="custom"]').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(LoadingPage, {
+            slots: { footer: '<div data-test="footer">Footer Content</div>' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('[data-test="footer"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="footer"]').text()).toBe('Footer Content')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(LoadingPage, {
+            props: { class: 'my-loading' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.classes()).toContain('my-loading')
+    })
+
+    it('has full viewport layout classes', () => {
+        const wrapper = mount(LoadingPage, { global: { provide: localeProvide } })
+        const root = wrapper.element as HTMLElement
+        expect(root.classList.contains('min-h-screen')).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/marquee/Marquee.vue b/packages/ui/src/components/marquee/Marquee.vue
new file mode 100644
index 0000000..e9759a8
--- /dev/null
+++ b/packages/ui/src/components/marquee/Marquee.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { marqueeContainerVariants, marqueeTrackVariants } from './marquee-variants'
+
+const DEFAULT_SPEED = 20
+
+interface MarqueeProps {
+    direction?: 'left' | 'right'
+    speed?: number
+    pauseOnHover?: boolean
+    fade?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<MarqueeProps>(), {
+    direction: 'left',
+    speed: DEFAULT_SPEED,
+    pauseOnHover: false,
+    fade: false,
+    class: '',
+})
+
+const containerClasses = computed(() =>
+    cn(marqueeContainerVariants({ fade: props.fade || undefined }), props.class)
+)
+
+const trackClasses = computed(() =>
+    cn(
+        marqueeTrackVariants({ direction: props.direction, pauseOnHover: props.pauseOnHover || undefined })
+    )
+)
+
+const containerStyle = computed(() => ({
+    '--speed': `${props.speed}s`,
+}))
+</script>
+
+<template>
+    <div :class="containerClasses" :style="containerStyle">
+        <div :class="trackClasses">
+            <slot />
+        </div>
+        <div :class="trackClasses" aria-hidden="true">
+            <slot />
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/marquee/marquee-variants.ts b/packages/ui/src/components/marquee/marquee-variants.ts
new file mode 100644
index 0000000..af8f1d3
--- /dev/null
+++ b/packages/ui/src/components/marquee/marquee-variants.ts
@@ -0,0 +1,39 @@
+import { cva } from 'class-variance-authority'
+
+export const marqueeContainerVariants = cva(
+    [
+        'relative flex overflow-hidden w-full',
+        'border-y-3 border-brutal bg-brutal-accent text-brutal-fg',
+        'font-black uppercase py-4 text-xl tracking-widest select-none',
+    ].join(' '),
+    {
+        variants: {
+            fade: {
+                true: '[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]',
+                false: '',
+            },
+        },
+    }
+)
+
+export const marqueeTrackVariants = cva(
+    [
+        'flex min-w-full shrink-0 items-center justify-around gap-4',
+    ].join(' '),
+    {
+        variants: {
+            direction: {
+                left: 'animate-marquee-left',
+                right: 'animate-marquee-right',
+            },
+            pauseOnHover: {
+                true: 'hover:[animation-play-state:paused]',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            direction: 'left',
+            pauseOnHover: false,
+        },
+    }
+)
diff --git a/packages/ui/src/components/marquee/marquee.test.ts b/packages/ui/src/components/marquee/marquee.test.ts
new file mode 100644
index 0000000..404a0b6
--- /dev/null
+++ b/packages/ui/src/components/marquee/marquee.test.ts
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils'
+import Marquee from './Marquee.vue'
+
+describe('Marquee', () => {
+    it('renders container with base classes', () => {
+        const wrapper = mount(Marquee, {
+            slots: { default: 'Item' },
+        })
+        const container = wrapper.find('div')
+        expect(container.exists()).toBe(true)
+        expect(container.classes()).toContain('relative')
+        expect(container.classes()).toContain('flex')
+        expect(container.classes()).toContain('overflow-hidden')
+        expect(container.classes()).toContain('border-y-3')
+        expect(container.classes()).toContain('border-brutal')
+        expect(container.classes()).toContain('bg-brutal-accent')
+        expect(container.classes()).toContain('text-brutal-fg')
+        expect(container.classes()).toContain('font-black')
+        expect(container.classes()).toContain('uppercase')
+        expect(container.classes()).toContain('select-none')
+    })
+
+    it('renders two tracks', () => {
+        const wrapper = mount(Marquee, {
+            slots: { default: 'Item' },
+        })
+        const tracks = wrapper.findAll('[class*="animate-marquee"]')
+        expect(tracks.length).toBe(2)
+    })
+
+    it('second track has aria-hidden attribute', () => {
+        const wrapper = mount(Marquee, {
+            slots: { default: 'Item' },
+        })
+        const tracks = wrapper.findAll('[class*="animate-marquee"]')
+        expect(tracks[1].attributes('aria-hidden')).toBe('true')
+    })
+
+    it('applies left direction class by default', () => {
+        const wrapper = mount(Marquee, {
+            slots: { default: 'Item' },
+        })
+        const tracks = wrapper.findAll('[class*="animate-marquee"]')
+        expect(tracks[0].classes()).toContain('animate-marquee-left')
+    })
+
+    it('applies right direction class', () => {
+        const wrapper = mount(Marquee, {
+            props: { direction: 'right' },
+            slots: { default: 'Item' },
+        })
+        const tracks = wrapper.findAll('[class*="animate-marquee"]')
+        expect(tracks[0].classes()).toContain('animate-marquee-right')
+    })
+
+    it('applies fade mask-image style when fade is true', () => {
+        const wrapper = mount(Marquee, {
+            props: { fade: true },
+            slots: { default: 'Item' },
+        })
+        const container = wrapper.find('div')
+        const classList = container.classes().join(' ')
+        expect(classList).toContain('mask-image')
+    })
+
+    it('does not apply mask-image when fade is false', () => {
+        const wrapper = mount(Marquee, {
+            props: { fade: false },
+            slots: { default: 'Item' },
+        })
+        const container = wrapper.find('div')
+        const classList = container.classes().join(' ')
+        expect(classList).not.toContain('mask-image')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Marquee, {
+            props: { class: 'custom-class' },
+            slots: { default: 'Item' },
+        })
+        const container = wrapper.find('div')
+        expect(container.classes()).toContain('custom-class')
+    })
+
+    it('sets --speed CSS variable', () => {
+        const wrapper = mount(Marquee, {
+            props: { speed: 30 },
+            slots: { default: 'Item' },
+        })
+        const container = wrapper.find('div')
+        const style = container.attributes('style') ?? ''
+        expect(style).toContain('--speed: 30s')
+    })
+
+    it('renders slot content in both tracks', () => {
+        const wrapper = mount(Marquee, {
+            slots: { default: 'MarqueeItem' },
+        })
+        expect(wrapper.text()).toContain('MarqueeItem')
+    })
+})
diff --git a/packages/ui/src/components/not-found-page/NotFoundPage.vue b/packages/ui/src/components/not-found-page/NotFoundPage.vue
new file mode 100644
index 0000000..9cd9dd0
--- /dev/null
+++ b/packages/ui/src/components/not-found-page/NotFoundPage.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ArrowLeft } from 'lucide-vue-next'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import Card from '../card/Card.vue'
+import GlitchText from '../glitch-text/GlitchText.vue'
+
+interface NotFoundPageProps {
+    title?: string
+    description?: string
+    backText?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<NotFoundPageProps>(), {
+    title: undefined,
+    description: undefined,
+    backText: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('notFoundPage.defaultTitle'))
+const resolvedDescription = computed(() => props.description ?? t('notFoundPage.defaultDescription'))
+const resolvedBackText = computed(() => props.backText ?? t('notFoundPage.defaultBackText'))
+
+const emit = defineEmits<{
+    back: []
+}>()
+
+const rootClasses = computed(() =>
+    cn('min-h-screen flex items-center justify-center bg-brutal-bg p-4', props.class)
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="w-full max-w-lg text-center relative">
+            <slot name="header" />
+
+            <Card variant="elevated" class="relative p-8 sm:p-12">
+                <div class="absolute -top-6 -left-6 h-16 w-16 bg-brutal-accent border-3 border-brutal rotate-12 shadow-brutal-sm" />
+                <div class="absolute -bottom-4 -right-4 h-12 w-12 bg-brutal-secondary border-3 border-brutal -rotate-6 shadow-brutal-sm" />
+
+                <div class="mb-6">
+                    <GlitchText text="404" trigger="autoplay" :interval="4000" speed="fast" class="text-7xl sm:text-8xl font-black text-brutal-primary" />
+                </div>
+
+                <h1 class="text-2xl sm:text-3xl font-black tracking-tight text-brutal-fg">
+                    {{ resolvedTitle }}
+                </h1>
+
+                <p class="mt-3 text-brutal-muted-foreground font-medium">
+                    {{ resolvedDescription }}
+                </p>
+
+                <slot />
+
+                <div class="mt-8">
+                    <Button variant="primary" @click="emit('back')">
+                        <ArrowLeft class="h-4 w-4 stroke-[3]" />
+                        {{ resolvedBackText }}
+                    </Button>
+                </div>
+
+                <slot name="footer" />
+            </Card>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/not-found-page/not-found-page.test.ts b/packages/ui/src/components/not-found-page/not-found-page.test.ts
new file mode 100644
index 0000000..5fc8dce
--- /dev/null
+++ b/packages/ui/src/components/not-found-page/not-found-page.test.ts
@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils'
+import { vi } from 'vitest'
+import { ref } from 'vue'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import NotFoundPage from './NotFoundPage.vue'
+
+vi.mock('../../composables/useReducedMotion', () => ({
+    useReducedMotion: () => ref(false)
+}))
+
+const mockLocale = {
+    ...en,
+    notFoundPage: {
+        defaultTitle: 'Page Not Found',
+        defaultDescription: 'The page you are looking for does not exist.',
+        defaultBackText: 'Go Back',
+    },
+}
+
+const localeProvide = { [LOCALE_INJECTION_KEY]: mockLocale }
+
+describe('NotFoundPage', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(NotFoundPage, { global: { provide: localeProvide } })
+        expect(wrapper.find('h1').text()).toBe('Page Not Found')
+        expect(wrapper.text()).toContain('The page you are looking for does not exist.')
+        expect(wrapper.text()).toContain('Go Back')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(NotFoundPage, {
+            props: { title: 'Custom 404' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('h1').text()).toBe('Custom 404')
+    })
+
+    it('shows custom description', () => {
+        const wrapper = mount(NotFoundPage, {
+            props: { description: 'This page does not exist' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('This page does not exist')
+    })
+
+    it('shows custom back text', () => {
+        const wrapper = mount(NotFoundPage, {
+            props: { backText: 'Return Home' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('Return Home')
+    })
+
+    it('renders GlitchText with 404', () => {
+        const wrapper = mount(NotFoundPage, { global: { provide: localeProvide } })
+        expect(wrapper.text()).toContain('404')
+    })
+
+    it('emits back event when back button is clicked', async () => {
+        const wrapper = mount(NotFoundPage, { global: { provide: localeProvide } })
+        const button = wrapper.find('button')
+        await button.trigger('click')
+        expect(wrapper.emitted('back')).toBeTruthy()
+        expect(wrapper.emitted('back')!.length).toBe(1)
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(NotFoundPage, {
+            slots: { header: '<div data-test="header">Header Content</div>' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="header"]').text()).toBe('Header Content')
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(NotFoundPage, {
+            slots: { default: '<div data-test="custom">Custom Content</div>' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('[data-test="custom"]').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(NotFoundPage, {
+            slots: { footer: '<div data-test="footer">Footer Content</div>' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('[data-test="footer"]').exists()).toBe(true)
+        expect(wrapper.find('[data-test="footer"]').text()).toBe('Footer Content')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(NotFoundPage, {
+            props: { class: 'my-not-found' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.classes()).toContain('my-not-found')
+    })
+
+    it('has full viewport layout classes', () => {
+        const wrapper = mount(NotFoundPage, { global: { provide: localeProvide } })
+        const root = wrapper.element as HTMLElement
+        expect(root.classList.contains('min-h-screen')).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/number-input/NumberInput.vue b/packages/ui/src/components/number-input/NumberInput.vue
new file mode 100644
index 0000000..c319685
--- /dev/null
+++ b/packages/ui/src/components/number-input/NumberInput.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    NumberFieldRoot,
+    type NumberFieldRootProps,
+    type NumberFieldRootEmits,
+    NumberFieldInput,
+    NumberFieldIncrement,
+    NumberFieldDecrement,
+    useForwardPropsEmits
+} from 'reka-ui'
+import { Plus, Minus, ChevronUp, ChevronDown } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { numberInputRootVariants, numberInputButtonVariants, numberInputFieldVariants } from './number-input-variants'
+
+interface NumberInputProps extends NumberFieldRootProps {
+    layout?: 'split' | 'stacked'
+    placeholder?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<NumberInputProps>(), {
+    layout: 'split',
+    placeholder: '',
+    class: '',
+})
+
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, layout: __, placeholder: ___, ...delegated } = props
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const containerClasses = computed(() =>
+    cn(numberInputRootVariants({ layout: props.layout }), props.class)
+)
+
+const decrementClasses = computed(() =>
+    cn(numberInputButtonVariants({ position: 'decrement', layout: props.layout }))
+)
+
+const incrementClasses = computed(() =>
+    cn(numberInputButtonVariants({ position: 'increment', layout: props.layout }))
+)
+
+const fieldClasses = computed(() =>
+    cn(numberInputFieldVariants({ layout: props.layout }))
+)
+</script>
+
+<template>
+    <NumberFieldRoot v-bind="forwarded" :class="containerClasses">
+        <template v-if="layout === 'split'">
+            <NumberFieldDecrement :class="decrementClasses">
+                <Minus class="h-4 w-4 stroke-[3]" />
+            </NumberFieldDecrement>
+
+            <NumberFieldInput
+                :placeholder="placeholder"
+                :class="fieldClasses"
+            />
+
+            <NumberFieldIncrement :class="incrementClasses">
+                <Plus class="h-4 w-4 stroke-[3]" />
+            </NumberFieldIncrement>
+        </template>
+
+        <template v-else>
+            <NumberFieldInput
+                :placeholder="placeholder"
+                :class="fieldClasses"
+            />
+
+            <div class="flex flex-col border-l-3 border-brutal w-10 shrink-0">
+                <NumberFieldIncrement :class="incrementClasses">
+                    <ChevronUp class="h-4 w-4 stroke-[3]" />
+                </NumberFieldIncrement>
+                <NumberFieldDecrement :class="decrementClasses">
+                    <ChevronDown class="h-4 w-4 stroke-[3]" />
+                </NumberFieldDecrement>
+            </div>
+        </template>
+    </NumberFieldRoot>
+</template>
diff --git a/packages/ui/src/components/number-input/number-input-variants.ts b/packages/ui/src/components/number-input/number-input-variants.ts
new file mode 100644
index 0000000..3a0165c
--- /dev/null
+++ b/packages/ui/src/components/number-input/number-input-variants.ts
@@ -0,0 +1,67 @@
+import { cva } from 'class-variance-authority'
+
+export const numberInputRootVariants = cva(
+    [
+        'flex items-stretch border-3 border-brutal bg-brutal-bg rounded-brutal shadow-brutal overflow-hidden',
+        'transition-all duration-150',
+        'focus-within:ring-2 focus-within:ring-brutal-ring focus-within:ring-offset-2',
+    ].join(' '),
+    {
+        variants: {
+            layout: {
+                split: '',
+                stacked: '',
+            },
+        },
+        defaultVariants: {
+            layout: 'split',
+        },
+    }
+)
+
+export const numberInputButtonVariants = cva(
+    [
+        'flex items-center justify-center',
+        'transition-all duration-150',
+        'disabled:opacity-50 disabled:pointer-events-none select-none cursor-pointer',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+    ].join(' '),
+    {
+        variants: {
+            position: {
+                decrement: 'bg-brutal-accent hover:bg-brutal-muted',
+                increment: 'bg-brutal-primary hover:bg-brutal-muted',
+            },
+            layout: {
+                split: 'px-4 border-brutal',
+                stacked: 'flex-1 border-brutal',
+            },
+        },
+        compoundVariants: [
+            { position: 'decrement', layout: 'split', class: 'border-r-3' },
+            { position: 'increment', layout: 'split', class: 'border-l-3' },
+            { position: 'decrement', layout: 'stacked', class: 'border-b-3' },
+        ],
+        defaultVariants: {
+            position: 'decrement',
+            layout: 'split',
+        },
+    }
+)
+
+export const numberInputFieldVariants = cva(
+    [
+        'bg-transparent font-black placeholder:text-brutal-placeholder placeholder:font-normal focus:outline-none',
+    ].join(' '),
+    {
+        variants: {
+            layout: {
+                split: 'flex-1 min-w-0 text-center py-2 px-3 text-base',
+                stacked: 'flex-1 min-w-0 py-2 px-4 text-base',
+            },
+        },
+        defaultVariants: {
+            layout: 'split',
+        },
+    }
+)
diff --git a/packages/ui/src/components/number-input/number-input.test.ts b/packages/ui/src/components/number-input/number-input.test.ts
new file mode 100644
index 0000000..b4582f7
--- /dev/null
+++ b/packages/ui/src/components/number-input/number-input.test.ts
@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils'
+import NumberInput from './NumberInput.vue'
+
+describe('NumberInput', () => {
+    it('renders with split layout by default', () => {
+        const wrapper = mount(NumberInput)
+        const root = wrapper.find('[role="group"]')
+        expect(root.exists()).toBe(true)
+        expect(root.classes()).toContain('flex')
+        expect(root.classes()).toContain('border-3')
+        expect(root.classes()).toContain('border-brutal')
+        expect(root.classes()).toContain('shadow-brutal')
+        expect(root.classes()).toContain('rounded-brutal')
+    })
+
+    it('renders with stacked layout', () => {
+        const wrapper = mount(NumberInput, {
+            props: { layout: 'stacked' },
+        })
+        const root = wrapper.find('[role="group"]')
+        expect(root.exists()).toBe(true)
+        expect(root.classes()).toContain('flex')
+        const input = wrapper.find('[role="spinbutton"]')
+        expect(input.exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(NumberInput, {
+            props: { class: 'custom-class' },
+        })
+        const root = wrapper.find('[role="group"]')
+        expect(root.classes()).toContain('custom-class')
+    })
+
+    it('passes placeholder prop to input', () => {
+        const wrapper = mount(NumberInput, {
+            props: { placeholder: 'Enter number' },
+        })
+        const input = wrapper.find('input')
+        expect(input.attributes('placeholder')).toBe('Enter number')
+    })
+
+    it('renders split layout with decrement and increment buttons', () => {
+        const wrapper = mount(NumberInput, {
+            props: { layout: 'split' },
+        })
+        const decrement = wrapper.find('[aria-label="Decrease"]')
+        const increment = wrapper.find('[aria-label="Increase"]')
+        expect(decrement.exists()).toBe(true)
+        expect(increment.exists()).toBe(true)
+    })
+
+    it('renders stacked layout with increment and decrement buttons', () => {
+        const wrapper = mount(NumberInput, {
+            props: { layout: 'stacked' },
+        })
+        const decrement = wrapper.find('[aria-label="Decrease"]')
+        const increment = wrapper.find('[aria-label="Increase"]')
+        expect(decrement.exists()).toBe(true)
+        expect(increment.exists()).toBe(true)
+    })
+
+    it('applies root variant classes', () => {
+        const wrapper = mount(NumberInput)
+        const root = wrapper.find('[role="group"]')
+        expect(root.classes()).toContain('bg-brutal-bg')
+        expect(root.classes()).toContain('overflow-hidden')
+        expect(root.classes()).toContain('transition-all')
+    })
+})
diff --git a/packages/ui/src/components/overview-page/OverviewPage.vue b/packages/ui/src/components/overview-page/OverviewPage.vue
new file mode 100644
index 0000000..1b57a1c
--- /dev/null
+++ b/packages/ui/src/components/overview-page/OverviewPage.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { Activity } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import DashboardStats from '../dashboard-stats/DashboardStats.vue'
+import type { StatItem } from '../dashboard-stats/DashboardStats.vue'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardTitle from '../card/CardTitle.vue'
+import CardContent from '../card/CardContent.vue'
+
+export interface OverviewStat {
+    title: string
+    value: string
+    change: string
+    trend: 'up' | 'down' | 'neutral'
+}
+
+interface OverviewPageProps {
+    title?: string
+    stats?: OverviewStat[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<OverviewPageProps>(), {
+    title: undefined,
+    stats: () => [],
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    'stat-click': [index: number]
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-6xl mx-auto p-6', props.class))
+
+const resolvedTitle = computed(() => props.title ?? t('overviewPage.defaultTitle'))
+const resolvedRecentActivity = computed(() => t('overviewPage.recentActivity'))
+const resolvedQuickStats = computed(() => t('overviewPage.quickStats'))
+
+const dashboardStats = computed<StatItem[]>(() =>
+    props.stats.map((stat) => ({
+        title: stat.title,
+        value: stat.value,
+        description: '',
+        change: stat.change,
+        trend: stat.trend,
+        icon: Activity as Component,
+    }))
+)
+
+function handleStatsClick(event: MouseEvent) {
+    const target = event.target as HTMLElement
+    const grid = (event.currentTarget as HTMLElement).querySelector('.grid')
+    if (!grid) return
+    const cards = Array.from(grid.children)
+    for (let i = 0; i < cards.length; i++) {
+        if (cards[i].contains(target)) {
+            emit('stat-click', i)
+            return
+        }
+    }
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header">
+            <h1 class="text-3xl font-black tracking-tight mb-8">
+{{ resolvedTitle }}
+</h1>
+        </slot>
+
+        <div @click="handleStatsClick">
+            <DashboardStats :stats="dashboardStats" />
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+            <Card variant="default">
+                <CardHeader>
+                    <CardTitle>{{ resolvedRecentActivity }}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <slot />
+                </CardContent>
+            </Card>
+            <Card variant="default">
+                <CardHeader>
+                    <CardTitle>{{ resolvedQuickStats }}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-3">
+                        <div
+                            v-for="(stat, index) in stats"
+                            :key="stat.title"
+                            class="flex items-center justify-between p-3 bg-brutal-muted border-3 border-brutal shadow-brutal-sm cursor-pointer hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all"
+                            @click="emit('stat-click', index)"
+                        >
+                            <span class="font-bold text-sm">{{ stat.title }}</span>
+                            <span class="font-black">{{ stat.value }}</span>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/overview-page/overview-page.test.ts b/packages/ui/src/components/overview-page/overview-page.test.ts
new file mode 100644
index 0000000..4def6ac
--- /dev/null
+++ b/packages/ui/src/components/overview-page/overview-page.test.ts
@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import OverviewPage from './OverviewPage.vue'
+import type { OverviewStat } from './OverviewPage.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('OverviewPage', () => {
+    const mockStats: OverviewStat[] = [
+        { title: 'Revenue', value: '$12,345', change: '+12%', trend: 'up' },
+        { title: 'Users', value: '1,234', change: '-5%', trend: 'down' },
+        { title: 'Orders', value: '567', change: '0%', trend: 'neutral' },
+    ]
+
+    it('renders with default props', () => {
+        const wrapper = mount(OverviewPage, { ...localeProvide })
+        expect(wrapper.text()).toContain('Overview')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(OverviewPage, {
+            props: { title: 'Dashboard' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Dashboard')
+    })
+
+    it('renders stats via DashboardStats', () => {
+        const wrapper = mount(OverviewPage, {
+            props: { stats: mockStats },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Revenue')
+        expect(wrapper.text()).toContain('$12,345')
+        expect(wrapper.text()).toContain('Users')
+        expect(wrapper.text()).toContain('1,234')
+    })
+
+    it('renders recent activity card', () => {
+        const wrapper = mount(OverviewPage, { ...localeProvide })
+        expect(wrapper.text()).toContain('Recent Activity')
+    })
+
+    it('renders quick stats card with stat items', () => {
+        const wrapper = mount(OverviewPage, {
+            props: { stats: mockStats },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Quick Stats')
+    })
+
+    it('emits stat-click when quick stat item is clicked', async () => {
+        const wrapper = mount(OverviewPage, {
+            props: { stats: mockStats },
+            ...localeProvide,
+        })
+        const statItems = wrapper.findAll('.cursor-pointer')
+        expect(statItems.length).toBeGreaterThan(0)
+        await statItems[0].trigger('click')
+        expect(wrapper.emitted('stat-click')).toBeTruthy()
+        expect(wrapper.emitted('stat-click')![0]).toEqual([0])
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(OverviewPage, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Header')
+    })
+
+    it('renders default slot inside recent activity card', () => {
+        const wrapper = mount(OverviewPage, {
+            slots: { default: '<div class="custom-content">Activity Item</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Activity Item')
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(OverviewPage, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Footer')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(OverviewPage, {
+            props: { class: 'my-overview' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-overview"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/pagination.tsx b/packages/ui/src/components/pagination.tsx
deleted file mode 100644
index ea945bf..0000000
--- a/packages/ui/src/components/pagination.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const paginationVariants = cva('flex items-center justify-center', {
-    variants: {
-        variant: {
-            default: '',
-            rounded: '[&_button]:rounded-none',
-            minimal: '[&_button]:border-0 [&_button]:shadow-none',
-        },
-        size: {
-            sm: 'gap-1',
-            default: 'gap-2',
-            lg: 'gap-3',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default',
-    },
-});
-
-const paginationButtonVariants = cva(
-    [
-        'inline-flex items-center justify-center font-black',
-        'border-3 border-brutal',
-        'transition-all duration-150',
-        'focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2',
-        'disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none',
-    ],
-    {
-        variants: {
-            size: {
-                sm: 'h-8 min-w-8 text-sm px-2',
-                default: 'h-10 min-w-10 text-base px-3',
-                lg: 'h-12 min-w-12 text-lg px-4',
-            },
-            isActive: {
-                true: [
-                    'bg-black text-white dark:bg-white dark:text-black',
-                    'shadow-[4px_4px_0px_0px_#FF6B6B]',
-                    'hover:shadow-[2px_2px_0px_0px_#FF6B6B]',
-                    'active:shadow-none active:translate-x-1 active:translate-y-1',
-                ],
-                false: [
-                    'bg-white dark:bg-gray-900 text-black dark:text-white',
-                    'shadow-brutal',
-                    'hover:bg-gray-100 dark:hover:bg-gray-800',
-                    'hover:shadow-brutal-sm',
-                    'active:shadow-none active:translate-x-1 active:translate-y-1',
-                ],
-            },
-        },
-        defaultVariants: {
-            size: 'default',
-            isActive: false,
-        },
-    }
-);
-
-interface PaginationProps
-    extends React.HTMLAttributes<HTMLElement>,
-        VariantProps<typeof paginationVariants> {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    siblingCount?: number;
-    showFirstLast?: boolean;
-    showPageNumbers?: boolean;
-}
-
-const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
-    (
-        {
-            className,
-            currentPage,
-            totalPages,
-            onPageChange,
-            siblingCount = 1,
-            showFirstLast = true,
-            showPageNumbers = true,
-            variant,
-            size,
-            ...props
-        },
-        ref
-    ) => {
-        const range = (start: number, end: number) => {
-            const length = end - start + 1;
-            return Array.from({ length }, (_, idx) => idx + start);
-        };
-
-        const paginationRange = React.useMemo(() => {
-            const totalPageNumbers = siblingCount + 5;
-
-            if (totalPageNumbers >= totalPages) {
-                return range(1, totalPages);
-            }
-
-            const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-            const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-
-            const shouldShowLeftDots = leftSiblingIndex > 2;
-            const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
-
-            const firstPageIndex = 1;
-            const lastPageIndex = totalPages;
-
-            if (!shouldShowLeftDots && shouldShowRightDots) {
-                const leftItemCount = 3 + 2 * siblingCount;
-                const leftRange = range(1, leftItemCount);
-                return [...leftRange, 'dots', totalPages];
-            }
-
-            if (shouldShowLeftDots && !shouldShowRightDots) {
-                const rightItemCount = 3 + 2 * siblingCount;
-                const rightRange = range(totalPages - rightItemCount + 1, totalPages);
-                return [firstPageIndex, 'dots', ...rightRange];
-            }
-
-            if (shouldShowLeftDots && shouldShowRightDots) {
-                const middleRange = range(leftSiblingIndex, rightSiblingIndex);
-                return [firstPageIndex, 'dots', ...middleRange, 'dots', lastPageIndex];
-            }
-
-            return range(1, totalPages);
-        }, [totalPages, siblingCount, currentPage]);
-
-        const buttonSize = size || 'default';
-
-        return (
-            <nav
-                ref={ref}
-                role="navigation"
-                aria-label="pagination"
-                className={cn(paginationVariants({ variant, size, className }))}
-                {...props}
-            >
-                {showFirstLast && (
-                    <button
-                        type="button"
-                        className={cn(
-                            paginationButtonVariants({ size: buttonSize, isActive: false })
-                        )}
-                        onClick={() => onPageChange(1)}
-                        disabled={currentPage === 1}
-                        aria-label="Go to first page"
-                    >
-                        <ChevronsLeft className="h-4 w-4 stroke-[3]" />
-                    </button>
-                )}
-
-                <button
-                    type="button"
-                    className={cn(paginationButtonVariants({ size: buttonSize, isActive: false }))}
-                    onClick={() => onPageChange(currentPage - 1)}
-                    disabled={currentPage === 1}
-                    aria-label="Go to previous page"
-                >
-                    <ChevronLeft className="h-4 w-4 stroke-[3]" />
-                </button>
-
-                {showPageNumbers &&
-                    paginationRange.map((pageNumber, index) => {
-                        if (pageNumber === 'dots') {
-                            return (
-                                <span
-                                    key={`dots-${index}`}
-                                    className={cn(
-                                        'flex items-center justify-center font-black text-black dark:text-white',
-                                        buttonSize === 'sm' && 'h-8 w-8',
-                                        buttonSize === 'default' && 'h-10 w-10',
-                                        buttonSize === 'lg' && 'h-12 w-12'
-                                    )}
-                                >
-                                    •••
-                                </span>
-                            );
-                        }
-
-                        return (
-                            <button
-                                key={pageNumber}
-                                type="button"
-                                className={cn(
-                                    paginationButtonVariants({
-                                        size: buttonSize,
-                                        isActive: currentPage === pageNumber,
-                                    })
-                                )}
-                                onClick={() => onPageChange(pageNumber as number)}
-                                aria-label={`Go to page ${pageNumber}`}
-                                aria-current={currentPage === pageNumber ? 'page' : undefined}
-                            >
-                                {pageNumber}
-                            </button>
-                        );
-                    })}
-
-                {!showPageNumbers && (
-                    <span className="px-4 font-black text-black dark:text-white">
-                        {currentPage} / {totalPages}
-                    </span>
-                )}
-
-                <button
-                    type="button"
-                    className={cn(paginationButtonVariants({ size: buttonSize, isActive: false }))}
-                    onClick={() => onPageChange(currentPage + 1)}
-                    disabled={currentPage === totalPages}
-                    aria-label="Go to next page"
-                >
-                    <ChevronRight className="h-4 w-4 stroke-[3]" />
-                </button>
-
-                {showFirstLast && (
-                    <button
-                        type="button"
-                        className={cn(
-                            paginationButtonVariants({ size: buttonSize, isActive: false })
-                        )}
-                        onClick={() => onPageChange(totalPages)}
-                        disabled={currentPage === totalPages}
-                        aria-label="Go to last page"
-                    >
-                        <ChevronsRight className="h-4 w-4 stroke-[3]" />
-                    </button>
-                )}
-            </nav>
-        );
-    }
-);
-Pagination.displayName = 'Pagination';
-
-export { Pagination, paginationVariants, paginationButtonVariants };
-export type { PaginationProps };
diff --git a/packages/ui/src/components/pagination/Pagination.vue b/packages/ui/src/components/pagination/Pagination.vue
new file mode 100644
index 0000000..c513147
--- /dev/null
+++ b/packages/ui/src/components/pagination/Pagination.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { paginationVariants, paginationButtonVariants } from './pagination-variants'
+import { useLocale } from '@/composables/useLocale'
+
+const { t } = useLocale()
+
+type PaginationVariantProps = VariantProps<typeof paginationVariants>
+
+const FIRST_PAGE = 1
+const MIN_PAGE_THRESHOLD = 2
+const FIRST_PAGES_COUNT = 3
+const ELLIPSIS_COUNT = 1
+
+interface PaginationProps {
+    currentPage: number
+    totalPages: number
+    siblingCount?: number
+    showFirstLast?: boolean
+    showPageNumbers?: boolean
+    variant?: NonNullable<PaginationVariantProps['variant']>
+    size?: NonNullable<PaginationVariantProps['size']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+    siblingCount: 1,
+    showFirstLast: true,
+    showPageNumbers: true,
+    variant: 'default',
+    size: 'default',
+    class: '',
+})
+
+const emit = defineEmits<{ 'update:currentPage': [page: number] }>()
+
+function range(start: number, end: number) {
+    const length = end - start + 1
+    return Array.from({ length }, (_, idx) => idx + start)
+}
+
+const paginationRange = computed(() => {
+    const totalPageNumbers = props.siblingCount * 2 + FIRST_PAGES_COUNT + ELLIPSIS_COUNT * 2
+
+    if (totalPageNumbers >= props.totalPages) {
+        return range(FIRST_PAGE, props.totalPages)
+    }
+
+    const leftSiblingIndex = Math.max(props.currentPage - props.siblingCount, FIRST_PAGE)
+    const rightSiblingIndex = Math.min(props.currentPage + props.siblingCount, props.totalPages)
+
+    const shouldShowLeftDots = leftSiblingIndex > MIN_PAGE_THRESHOLD
+    const shouldShowRightDots = rightSiblingIndex < props.totalPages - MIN_PAGE_THRESHOLD
+
+    const lastPageIndex = props.totalPages
+
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftEndIndex = FIRST_PAGES_COUNT + 2 * props.siblingCount
+        const leftRange = range(FIRST_PAGE, leftEndIndex)
+        return [...leftRange, 'dots' as const, props.totalPages]
+    }
+
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightEndIndex = FIRST_PAGES_COUNT + 2 * props.siblingCount
+        const rightRange = range(props.totalPages - rightEndIndex + 1, props.totalPages)
+        return [FIRST_PAGE, 'dots' as const, ...rightRange]
+    }
+
+    if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = range(leftSiblingIndex, rightSiblingIndex)
+        return [FIRST_PAGE, 'dots' as const, ...middleRange, 'dots' as const, lastPageIndex]
+    }
+
+    return range(FIRST_PAGE, props.totalPages)
+})
+
+const navClasses = computed(() =>
+    cn(paginationVariants({ variant: props.variant, size: props.size }), props.class)
+)
+
+const buttonSize = computed(() => props.size || 'default')
+
+const dotsSizeClasses = computed(() => {
+    if (buttonSize.value === 'sm') return 'h-8 w-8'
+    if (buttonSize.value === 'lg') return 'h-12 w-12'
+    return 'h-10 w-10'
+})
+
+const firstButtonClasses = computed(() =>
+    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))
+)
+
+const prevButtonClasses = computed(() =>
+    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))
+)
+
+const nextButtonClasses = computed(() =>
+    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))
+)
+
+const lastButtonClasses = computed(() =>
+    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))
+)
+
+const dotsClasses = computed(() =>
+    cn('flex items-center justify-center font-black text-brutal-fg', dotsSizeClasses.value)
+)
+
+const pageButtonActiveClasses = computed(() =>
+    cn(paginationButtonVariants({ size: buttonSize.value, isActive: true }))
+)
+
+const pageButtonInactiveClasses = computed(() =>
+    cn(paginationButtonVariants({ size: buttonSize.value, isActive: false }))
+)
+
+function onPageChange(page: number) {
+    if (page >= FIRST_PAGE && page <= props.totalPages) {
+        emit('update:currentPage', page)
+    }
+}
+</script>
+
+<template>
+    <nav role="navigation" :aria-label="t('pagination.label')" :class="navClasses">
+        <button
+            v-if="showFirstLast"
+            type="button"
+            :class="firstButtonClasses"
+            :disabled="currentPage === 1"
+            :aria-label="t('pagination.firstPage')"
+            @click="onPageChange(1)"
+        >
+            <ChevronsLeft class="h-4 w-4 stroke-[3]" />
+        </button>
+
+        <button
+            type="button"
+            :class="prevButtonClasses"
+            :disabled="currentPage === 1"
+            :aria-label="t('pagination.previousPage')"
+            @click="onPageChange(currentPage - 1)"
+        >
+            <ChevronLeft class="h-4 w-4 stroke-[3]" />
+        </button>
+
+        <template v-if="showPageNumbers">
+            <template v-for="(pageNumber, index) in paginationRange" :key="index">
+                <span
+                    v-if="pageNumber === 'dots'"
+                    :class="dotsClasses"
+                >
+                    •••
+                </span>
+                <button
+                    v-else
+                    type="button"
+                    :class="currentPage === pageNumber ? pageButtonActiveClasses : pageButtonInactiveClasses"
+                    :aria-label="t('pagination.page', { number: pageNumber as number })"
+                    :aria-current="currentPage === pageNumber ? 'page' : undefined"
+                    @click="onPageChange(pageNumber as number)"
+                >
+                    {{ pageNumber }}
+                </button>
+            </template>
+        </template>
+
+        <span v-if="!showPageNumbers" class="px-4 font-black text-brutal-fg">
+            {{ currentPage }} / {{ totalPages }}
+        </span>
+
+        <button
+            type="button"
+            :class="nextButtonClasses"
+            :disabled="currentPage === totalPages"
+            :aria-label="t('pagination.nextPage')"
+            @click="onPageChange(currentPage + 1)"
+        >
+            <ChevronRight class="h-4 w-4 stroke-[3]" />
+        </button>
+
+        <button
+            v-if="showFirstLast"
+            type="button"
+            :class="lastButtonClasses"
+            :disabled="currentPage === totalPages"
+            :aria-label="t('pagination.lastPage')"
+            @click="onPageChange(totalPages)"
+        >
+            <ChevronsRight class="h-4 w-4 stroke-[3]" />
+        </button>
+    </nav>
+</template>
\ No newline at end of file
diff --git a/packages/ui/src/components/pagination/pagination-variants.ts b/packages/ui/src/components/pagination/pagination-variants.ts
new file mode 100644
index 0000000..07f8ad8
--- /dev/null
+++ b/packages/ui/src/components/pagination/pagination-variants.ts
@@ -0,0 +1,58 @@
+import { cva } from 'class-variance-authority'
+
+export const paginationVariants = cva('flex items-center justify-center', {
+    variants: {
+        variant: {
+            default: '',
+            rounded: '[&_button]:rounded-brutal',
+            minimal: '[&_button]:border-transparent [&_button]:shadow-none',
+        },
+        size: {
+            sm: 'gap-1',
+            default: 'gap-2',
+            lg: 'gap-3',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+})
+
+export const paginationButtonVariants = cva(
+    [
+        'inline-flex items-center justify-center font-black',
+        'border-3 border-brutal',
+        'transition-all duration-150',
+        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2',
+        'disabled:opacity-40 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none',
+    ],
+    {
+        variants: {
+            size: {
+                sm: 'h-8 min-w-8 text-sm px-2',
+                default: 'h-10 min-w-10 text-base px-3',
+                lg: 'h-12 min-w-12 text-lg px-4',
+            },
+            isActive: {
+                true: [
+                    'bg-brutal-fg text-brutal-bg',
+                    'shadow-brutal-primary',
+                    'hover:shadow-brutal-sm',
+                    'active:shadow-none active:translate-y-[var(--brutal-pressed-offset,2px)]',
+                ],
+                false: [
+                    'bg-brutal-bg text-brutal-fg',
+                    'shadow-brutal',
+                    'hover:bg-brutal-muted',
+                    'hover:shadow-brutal-sm',
+                    'active:shadow-none active:translate-y-[var(--brutal-pressed-offset,2px)]',
+                ],
+            },
+        },
+        defaultVariants: {
+            size: 'default',
+            isActive: false,
+        },
+    }
+)
diff --git a/packages/ui/src/components/pagination/pagination.test.ts b/packages/ui/src/components/pagination/pagination.test.ts
new file mode 100644
index 0000000..520fd09
--- /dev/null
+++ b/packages/ui/src/components/pagination/pagination.test.ts
@@ -0,0 +1,262 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import Pagination from './Pagination.vue'
+
+const FIRST_PAGE = 1
+const FIRST_PAGES_COUNT = 3
+const DEFAULT_SIBLING_COUNT = 1
+const globalProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+function getPageNumbers(wrapper: ReturnType<typeof mount>) {
+    return wrapper.findAll('button[aria-label^="Go to page"]').map((btn) => Number(btn.text()))
+}
+
+function getDotsCount(wrapper: ReturnType<typeof mount>) {
+    return wrapper.findAll('span').filter((el) => el.text().includes('•••')).length
+}
+
+describe('Pagination', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1 },
+            ...globalProvide,
+        })
+        expect(wrapper.find('nav').exists()).toBe(true)
+        expect(wrapper.find('nav').attributes('role')).toBe('navigation')
+        expect(wrapper.find('nav').attributes('aria-label')).toBe('pagination')
+    })
+
+    it('emits update:currentPage when page is clicked', async () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1 },
+            ...globalProvide,
+        })
+        const pageButtons = wrapper.findAll('button[aria-label^="Go to page"]')
+        expect(pageButtons.length).toBeGreaterThan(0)
+        await pageButtons[1].trigger('click')
+        expect(wrapper.emitted('update:currentPage')).toBeTruthy()
+        expect(wrapper.emitted('update:currentPage')![0]).toEqual([2])
+    })
+
+    it('shows correct page numbers', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 3 },
+            ...globalProvide,
+        })
+        const pageButtons = wrapper.findAll('button[aria-label^="Go to page"]')
+        const pageNumbers = pageButtons.map((btn) => btn.text())
+        expect(pageNumbers).toContain('1')
+        expect(pageNumbers).toContain('3')
+        expect(pageNumbers).toContain('5')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1, class: 'custom-pagination' },
+            ...globalProvide,
+        })
+        expect(wrapper.find('nav').classes()).toContain('custom-pagination')
+    })
+
+    it('highlights current page', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 3 },
+            ...globalProvide,
+        })
+        const activePage = wrapper.find('button[aria-current="page"]')
+        expect(activePage.exists()).toBe(true)
+        expect(activePage.text()).toBe('3')
+    })
+
+    it('disables previous button on first page', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1 },
+            ...globalProvide,
+        })
+        const prevButton = wrapper.find('button[aria-label="Go to previous page"]')
+        expect(prevButton.attributes('disabled')).toBeDefined()
+    })
+
+    it('disables next button on last page', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 5 },
+            ...globalProvide,
+        })
+        const nextButton = wrapper.find('button[aria-label="Go to next page"]')
+        expect(nextButton.attributes('disabled')).toBeDefined()
+    })
+
+    it('shows first and last buttons when showFirstLast is true', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1, showFirstLast: true },
+            ...globalProvide,
+        })
+        expect(wrapper.find('button[aria-label="Go to first page"]').exists()).toBe(true)
+        expect(wrapper.find('button[aria-label="Go to last page"]').exists()).toBe(true)
+    })
+
+    it('hides first and last buttons when showFirstLast is false', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1, showFirstLast: false },
+            ...globalProvide,
+        })
+        expect(wrapper.find('button[aria-label="Go to first page"]').exists()).toBe(false)
+        expect(wrapper.find('button[aria-label="Go to last page"]').exists()).toBe(false)
+    })
+
+    it('shows page counter when showPageNumbers is false', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 3, showPageNumbers: false },
+            ...globalProvide,
+        })
+        expect(wrapper.text()).toContain('3 / 5')
+    })
+
+    it('shows dots for large page ranges', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 20, currentPage: 10 },
+            ...globalProvide,
+        })
+        const dots = wrapper.findAll('span').filter((el) => el.text().includes('•••'))
+        expect(dots.length).toBeGreaterThan(0)
+    })
+
+    it('emits correct page when first button clicked', async () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 3, showFirstLast: true },
+            ...globalProvide,
+        })
+        await wrapper.find('button[aria-label="Go to first page"]').trigger('click')
+        expect(wrapper.emitted('update:currentPage')![0]).toEqual([1])
+    })
+
+    it('emits correct page when last button clicked', async () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 3, showFirstLast: true },
+            ...globalProvide,
+        })
+        await wrapper.find('button[aria-label="Go to last page"]').trigger('click')
+        expect(wrapper.emitted('update:currentPage')![0]).toEqual([5])
+    })
+
+    it('emits correct page when next button clicked', async () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 3 },
+            ...globalProvide,
+        })
+        await wrapper.find('button[aria-label="Go to next page"]').trigger('click')
+        expect(wrapper.emitted('update:currentPage')![0]).toEqual([4])
+    })
+
+    it('emits correct page when previous button clicked', async () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 3 },
+            ...globalProvide,
+        })
+        await wrapper.find('button[aria-label="Go to previous page"]').trigger('click')
+        expect(wrapper.emitted('update:currentPage')![0]).toEqual([2])
+    })
+
+    it('shows right dots only when current page is near start', () => {
+        const totalPages = 10
+        const currentPage = FIRST_PAGE
+        const wrapper = mount(Pagination, {
+            props: { totalPages, currentPage },
+            ...globalProvide,
+        })
+        const leftEndIndex = FIRST_PAGES_COUNT + 2 * DEFAULT_SIBLING_COUNT
+        const expectedPages = [
+            ...Array.from({ length: leftEndIndex }, (_, i) => i + FIRST_PAGE),
+            totalPages,
+        ]
+        expect(getPageNumbers(wrapper)).toEqual(expectedPages)
+        expect(getDotsCount(wrapper)).toBe(1)
+    })
+
+    it('shows left dots only when current page is near end', () => {
+        const totalPages = 10
+        const currentPage = totalPages
+        const wrapper = mount(Pagination, {
+            props: { totalPages, currentPage },
+            ...globalProvide,
+        })
+        const rightEndIndex = FIRST_PAGES_COUNT + 2 * DEFAULT_SIBLING_COUNT
+        const expectedPages = [
+            FIRST_PAGE,
+            ...Array.from({ length: rightEndIndex }, (_, i) => totalPages - rightEndIndex + i + 1),
+        ]
+        expect(getPageNumbers(wrapper)).toEqual(expectedPages)
+        expect(getDotsCount(wrapper)).toBe(1)
+    })
+
+    it('shows both left and right dots when current page is in the middle', () => {
+        const totalPages = 10
+        const currentPage = 5
+        const wrapper = mount(Pagination, {
+            props: { totalPages, currentPage },
+            ...globalProvide,
+        })
+        const leftSiblingIndex = currentPage - DEFAULT_SIBLING_COUNT
+        const rightSiblingIndex = currentPage + DEFAULT_SIBLING_COUNT
+        const middlePages = Array.from(
+            { length: rightSiblingIndex - leftSiblingIndex + 1 },
+            (_, i) => leftSiblingIndex + i
+        )
+        const expectedPages = [FIRST_PAGE, ...middlePages, totalPages]
+        expect(getPageNumbers(wrapper)).toEqual(expectedPages)
+        expect(getDotsCount(wrapper)).toBe(2)
+    })
+
+    it('applies rounded variant classes', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1, variant: 'rounded' },
+            ...globalProvide,
+        })
+        expect(wrapper.find('nav').classes()).toContain('[&_button]:rounded-brutal')
+    })
+
+    it('applies minimal variant classes', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1, variant: 'minimal' },
+            ...globalProvide,
+        })
+        expect(wrapper.find('nav').classes()).toContain('[&_button]:border-transparent')
+        expect(wrapper.find('nav').classes()).toContain('[&_button]:shadow-none')
+    })
+
+    it('applies sm size classes', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1, size: 'sm' },
+            ...globalProvide,
+        })
+        expect(wrapper.find('nav').classes()).toContain('gap-1')
+    })
+
+    it('applies lg size classes', () => {
+        const wrapper = mount(Pagination, {
+            props: { totalPages: 5, currentPage: 1, size: 'lg' },
+            ...globalProvide,
+        })
+        expect(wrapper.find('nav').classes()).toContain('gap-3')
+    })
+
+    it('respects siblingCount prop for wider middle range', () => {
+        const siblingCount = 2
+        const totalPages = 20
+        const currentPage = 10
+        const wrapper = mount(Pagination, {
+            props: { totalPages, currentPage, siblingCount },
+            ...globalProvide,
+        })
+        const leftSiblingIndex = currentPage - siblingCount
+        const rightSiblingIndex = currentPage + siblingCount
+        const middlePages = Array.from(
+            { length: rightSiblingIndex - leftSiblingIndex + 1 },
+            (_, i) => leftSiblingIndex + i
+        )
+        const expectedPages = [FIRST_PAGE, ...middlePages, totalPages]
+        expect(getPageNumbers(wrapper)).toEqual(expectedPages)
+        expect(getDotsCount(wrapper)).toBe(2)
+    })
+})
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
deleted file mode 100644
index 965b698..0000000
--- a/packages/ui/src/components/popover.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { cn } from '../lib/utils';
-
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverAnchor = PopoverPrimitive.Anchor;
-
-const PopoverContent = React.forwardRef<
-    React.ElementRef<typeof PopoverPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 8, ...props }, ref) => (
-    <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-            ref={ref}
-            align={align}
-            sideOffset={sideOffset}
-            className={cn(
-                'z-50 w-72 p-4',
-                'bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal dark:text-white',
-                'outline-none',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[side=bottom]:slide-in-from-top-2',
-                'data-[side=left]:slide-in-from-right-2',
-                'data-[side=right]:slide-in-from-left-2',
-                'data-[side=top]:slide-in-from-bottom-2',
-                className
-            )}
-            {...props}
-        />
-    </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/packages/ui/src/components/popover/PopoverContent.vue b/packages/ui/src/components/popover/PopoverContent.vue
new file mode 100644
index 0000000..2869421
--- /dev/null
+++ b/packages/ui/src/components/popover/PopoverContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    PopoverPortal as PopoverPortalPrimitive,
+    PopoverContent as PopoverContentPrimitive,
+} from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface PopoverContentProps {
+    align?: 'center' | 'start' | 'end'
+    sideOffset?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<PopoverContentProps>(), {
+    align: 'center',
+    sideOffset: 8,
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(
+        'z-50 w-72 p-4',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal rounded-brutal',
+        'outline-none',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2',
+        'data-[side=top]:slide-in-from-bottom-2',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <PopoverPortalPrimitive>
+        <PopoverContentPrimitive :align="align" :side-offset="sideOffset" :class="classes">
+            <slot />
+        </PopoverContentPrimitive>
+    </PopoverPortalPrimitive>
+</template>
diff --git a/packages/ui/src/components/popover/popover.test.ts b/packages/ui/src/components/popover/popover.test.ts
new file mode 100644
index 0000000..b280ce0
--- /dev/null
+++ b/packages/ui/src/components/popover/popover.test.ts
@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import PopoverContent from './PopoverContent.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('PopoverContent', () => {
+    const contentStubs = {
+        PopoverPortal: primitiveStub,
+        PopoverContent: {
+            template: '<div data-testid="popover-content"><slot /></div>',
+        },
+    }
+
+    it('renders with default classes', () => {
+        const wrapper = mount(PopoverContent, {
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="popover-content"]')
+        expect(content.classes()).toContain('border-3')
+        expect(content.classes()).toContain('border-brutal')
+        expect(content.classes()).toContain('shadow-brutal')
+        expect(content.classes()).toContain('bg-brutal-bg')
+        expect(content.classes()).toContain('text-brutal-fg')
+        expect(content.classes()).toContain('z-50')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(PopoverContent, {
+            props: { class: 'custom-popover' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="popover-content"]')
+        expect(content.classes()).toContain('custom-popover')
+    })
+})
diff --git a/packages/ui/src/components/pricing-section.tsx b/packages/ui/src/components/pricing-section.tsx
deleted file mode 100644
index c67ed8f..0000000
--- a/packages/ui/src/components/pricing-section.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import * as React from 'react';
-import { Check } from 'lucide-react';
-import { Button } from './button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
-import { Badge } from './badge';
-
-export interface BrutalistPricingPlan {
-    name: string;
-    price: string;
-    description: string;
-    features: string[];
-    ctaText: string;
-    popular?: boolean;
-    variant: 'primary' | 'secondary' | 'accent' | 'default';
-}
-
-export interface PricingSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    subtitle?: string;
-    plans?: BrutalistPricingPlan[];
-}
-
-const defaultPlans: BrutalistPricingPlan[] = [
-    {
-        name: 'Indie Creator',
-        price: '$9',
-        description: 'For solo devs and side-project hackers building clean products.',
-        features: [
-            'Access to 24+ atomic components',
-            'Full registry copying workflow',
-            'Figma design assets',
-            'Community Support Channel',
-        ],
-        ctaText: 'Start Building',
-        variant: 'default',
-    },
-    {
-        name: 'Pro Developer',
-        price: '$29',
-        description: 'For growing creators, SaaS platforms, and professional agencies.',
-        features: [
-            'Access to all 36+ components',
-            'All copy-paste premium blocks',
-            'Advanced customizable variables',
-            '1 year of regular registry updates',
-            'Priority GitHub issue support',
-        ],
-        ctaText: 'Unlock Pro Access',
-        popular: true,
-        variant: 'primary',
-    },
-    {
-        name: 'Team Studio',
-        price: '$99',
-        description: 'For collaborative development groups and startups building scaled apps.',
-        features: [
-            'Unlimited user accounts',
-            'Custom internal branding theme presets',
-            'AI-ready prompts and generation guidelines',
-            'Direct Slack developer console support',
-            'SLA uptime assurance',
-        ],
-        ctaText: 'Contact Workspace Sales',
-        variant: 'secondary',
-    },
-];
-
-export function PricingSection({
-    title = 'Simple, Transparent Brutalist Plans',
-    subtitle = 'Choose the subscription tier that matches your current development workflow. No hidden fees, instant cancel.',
-    plans = defaultPlans,
-    className,
-    ...props
-}: PricingSectionProps) {
-    return (
-        <section
-            className={`w-full py-12 md:py-24 bg-brutal-bg text-brutal-fg transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="container px-4 md:px-6 mx-auto space-y-12">
-                <div className="flex flex-col items-center justify-center space-y-4 text-center max-w-3xl mx-auto">
-                    <div className="bg-brutal-secondary text-black px-3 py-1 border-3 border-brutal font-black text-xs uppercase tracking-wider rotate-[1.5deg]">
-                        Flexible Pricing Plans
-                    </div>
-                    <h2 className="text-3xl font-black sm:text-4xl md:text-5xl tracking-tight leading-none">
-                        {title}
-                    </h2>
-                    <p className="text-lg font-bold text-gray-700 dark:text-gray-300">
-                        {subtitle}
-                    </p>
-                </div>
-
-                <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 items-stretch max-w-6xl mx-auto pt-6">
-                    {plans.map((plan, idx) => {
-                        return (
-                            <div key={idx} className="relative flex flex-col h-full">
-                                {plan.popular && (
-                                    <div className="absolute top-[-16px] left-[50%] translate-x-[-50%] z-20">
-                                        <Badge variant="accent" className="text-xs font-black uppercase tracking-wider px-3 py-1 animate-pulse border-3 border-brutal">
-                                            Most Popular Tier
-                                        </Badge>
-                                    </div>
-                                )}
-
-                                <Card className={`flex flex-col h-full border-3 border-brutal rounded-none shadow-brutal hover:-translate-x-1 hover:-translate-y-1 hover:shadow-brutal-lg transition-all duration-150 ${plan.popular ? 'bg-yellow-50/20' : 'bg-white dark:bg-gray-800'}`}>
-                                    <CardHeader className="space-y-2 pb-6 border-b-3 border-brutal">
-                                        <CardTitle className="text-2xl font-black leading-none">{plan.name}</CardTitle>
-                                        <div className="flex items-baseline space-x-1">
-                                            <span className="text-5xl font-black tracking-tight">{plan.price}</span>
-                                            <span className="text-sm font-bold text-gray-500 dark:text-gray-400">/ lifetime</span>
-                                        </div>
-                                        <CardDescription className="font-bold text-sm text-gray-600 dark:text-gray-300 pt-2 min-h-[48px]">
-                                            {plan.description}
-                                        </CardDescription>
-                                    </CardHeader>
-
-                                    <CardContent className="flex-grow pt-6 space-y-4">
-                                        <p className="font-black text-xs uppercase tracking-wider text-gray-500">What's included:</p>
-                                        <ul className="space-y-3">
-                                            {plan.features.map((feature, fIdx) => (
-                                                <li key={fIdx} className="flex items-start space-x-3 text-sm font-bold">
-                                                    <div className="h-5 w-5 shrink-0 rounded-full bg-brutal-success border-2 border-brutal flex items-center justify-center">
-                                                        <Check className="h-3 w-3 stroke-[4] text-black" />
-                                                    </div>
-                                                    <span className="text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    </CardContent>
-
-                                    <CardFooter className="pt-6 border-t-3 border-brutal mt-auto bg-gray-50 dark:bg-gray-900/50 p-6">
-                                        <Button
-                                            className="w-full font-black text-base py-6"
-                                            variant={plan.variant}
-                                        >
-                                            {plan.ctaText}
-                                        </Button>
-                                    </CardFooter>
-                                </Card>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/packages/ui/src/components/pricing-section/PricingSection.vue b/packages/ui/src/components/pricing-section/PricingSection.vue
new file mode 100644
index 0000000..41d8233
--- /dev/null
+++ b/packages/ui/src/components/pricing-section/PricingSection.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardContent from '../card/CardContent.vue'
+import CardTitle from '../card/CardTitle.vue'
+import CardDescription from '../card/CardDescription.vue'
+import CardFooter from '../card/CardFooter.vue'
+import Badge from '../badge/Badge.vue'
+
+export interface BrutalistPricingPlan {
+    name: string
+    price: string
+    description: string
+    features: string[]
+    ctaText: string
+    popular?: boolean
+    variant: 'primary' | 'secondary' | 'default'
+}
+
+interface PricingSectionProps {
+    title?: string
+    subtitle?: string
+    plans?: BrutalistPricingPlan[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<PricingSectionProps>(), {
+    title: 'Simple, Transparent Brutalist Plans',
+    subtitle: '',
+    plans: () => [],
+    class: '',
+})
+
+const emit = defineEmits<{
+    'plan-select': [planName: string]
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))
+
+function getPlanCardClasses(plan: BrutalistPricingPlan) {
+    return cn(plan.popular && 'bg-brutal-accent/20')
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="text-center mb-10">
+            <h2 class="text-3xl font-black tracking-tight">
+{{ title }}
+</h2>
+            <p v-if="subtitle" class="mt-2 text-brutal-muted-foreground font-medium">
+{{ subtitle }}
+</p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div v-for="plan in plans" :key="plan.name" class="relative">
+                <div v-if="plan.popular" class="absolute -top-3 left-1/2 -translate-x-1/2 z-10 rotate-[1.5deg]">
+                    <Badge variant="primary" class="animate-pulse">
+Most Popular Tier
+</Badge>
+                </div>
+                <Card :variant="plan.variant" :class="getPlanCardClasses(plan)">
+                    <CardHeader>
+                        <CardTitle class="text-xl">
+{{ plan.name }}
+</CardTitle>
+                        <CardDescription>{{ plan.description }}</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="mb-6">
+                            <span class="text-4xl font-black">{{ plan.price }}</span>
+                            <span class="text-sm font-bold text-brutal-muted-foreground">/ lifetime</span>
+                        </div>
+                        <ul class="space-y-3">
+                            <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-2">
+                                <div class="flex h-5 w-5 items-center justify-center bg-brutal-success text-brutal-fg">
+                                    <Check class="h-3 w-3 stroke-[3]" />
+                                </div>
+                                <span class="text-sm font-medium">{{ feature }}</span>
+                            </li>
+                        </ul>
+                    </CardContent>
+                    <CardFooter>
+                        <Button :variant="plan.variant === 'default' ? 'outline' : plan.variant" class="w-full" @click="emit('plan-select', plan.name)">
+{{ plan.ctaText }}
+</Button>
+                    </CardFooter>
+                </Card>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/pricing-section/pricing-section.test.ts b/packages/ui/src/components/pricing-section/pricing-section.test.ts
new file mode 100644
index 0000000..43f3147
--- /dev/null
+++ b/packages/ui/src/components/pricing-section/pricing-section.test.ts
@@ -0,0 +1,121 @@
+import { mount } from '@vue/test-utils'
+import PricingSection from './PricingSection.vue'
+
+describe('PricingSection', () => {
+    const mockPlans = [
+        {
+            name: 'Basic',
+            price: '$9',
+            description: 'For beginners',
+            features: ['1 project', 'Basic support'],
+            ctaText: 'Start Basic',
+            variant: 'default' as const,
+        },
+        {
+            name: 'Pro',
+            price: '$29',
+            description: 'For professionals',
+            features: ['Unlimited projects', 'Priority support', 'Custom themes'],
+            ctaText: 'Go Pro',
+            popular: true,
+            variant: 'primary' as const,
+        },
+        {
+            name: 'Team',
+            price: '$99',
+            description: 'For teams',
+            features: ['Everything in Pro', 'Team management', 'SSO'],
+            ctaText: 'Contact Sales',
+            variant: 'secondary' as const,
+        },
+    ]
+
+    it('renders with default props', () => {
+        const wrapper = mount(PricingSection)
+        expect(wrapper.find('h2').text()).toBe('Simple, Transparent Brutalist Plans')
+    })
+
+    it('renders with plans prop', () => {
+        const wrapper = mount(PricingSection, {
+            props: { plans: mockPlans },
+        })
+        const cards = wrapper.findAll('.grid > div')
+        expect(cards.length).toBe(3)
+    })
+
+    it('shows plan names', () => {
+        const wrapper = mount(PricingSection, {
+            props: { plans: mockPlans },
+        })
+        expect(wrapper.text()).toContain('Basic')
+        expect(wrapper.text()).toContain('Pro')
+        expect(wrapper.text()).toContain('Team')
+    })
+
+    it('shows plan prices', () => {
+        const wrapper = mount(PricingSection, {
+            props: { plans: mockPlans },
+        })
+        expect(wrapper.text()).toContain('$9')
+        expect(wrapper.text()).toContain('$29')
+        expect(wrapper.text()).toContain('$99')
+    })
+
+    it('shows plan features', () => {
+        const wrapper = mount(PricingSection, {
+            props: { plans: mockPlans },
+        })
+        expect(wrapper.text()).toContain('1 project')
+        expect(wrapper.text()).toContain('Priority support')
+        expect(wrapper.text()).toContain('Team management')
+    })
+
+    it('shows popular badge for popular plans', () => {
+        const wrapper = mount(PricingSection, {
+            props: { plans: mockPlans },
+        })
+        expect(wrapper.text()).toContain('Most Popular Tier')
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(PricingSection, {
+            props: { title: 'Custom Pricing Title' },
+        })
+        expect(wrapper.find('h2').text()).toBe('Custom Pricing Title')
+    })
+
+    it('renders subtitle when provided', () => {
+        const wrapper = mount(PricingSection, {
+            props: { subtitle: 'Choose your plan' },
+        })
+        expect(wrapper.text()).toContain('Choose your plan')
+    })
+
+    it('does not render subtitle when not provided', () => {
+        const wrapper = mount(PricingSection)
+        const subtitleEl = wrapper.find('p.text-brutal-muted-foreground')
+        expect(subtitleEl.exists()).toBe(false)
+    })
+
+    it('renders with empty plans array', () => {
+        const wrapper = mount(PricingSection, {
+            props: { plans: [] },
+        })
+        const cards = wrapper.findAll('.grid > div')
+        expect(cards.length).toBe(0)
+    })
+
+    it('shows lifetime pricing label', () => {
+        const wrapper = mount(PricingSection, {
+            props: { plans: mockPlans },
+        })
+        expect(wrapper.text()).toContain('/ lifetime')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(PricingSection, {
+            props: { class: 'my-pricing' },
+        })
+        expect(wrapper.classes()).toContain('my-pricing')
+    })
+})
diff --git a/packages/ui/src/components/profile-page/ProfilePage.vue b/packages/ui/src/components/profile-page/ProfilePage.vue
new file mode 100644
index 0000000..e53b173
--- /dev/null
+++ b/packages/ui/src/components/profile-page/ProfilePage.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Avatar from '../avatar/Avatar.vue'
+import AvatarFallback from '../avatar/AvatarFallback.vue'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardContent from '../card/CardContent.vue'
+import CardTitle from '../card/CardTitle.vue'
+import Input from '../input/Input.vue'
+import Button from '../button/Button.vue'
+import Textarea from '../textarea/Textarea.vue'
+
+interface ProfilePageProps {
+    title?: string
+    name?: string
+    email?: string
+    bio?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<ProfilePageProps>(), {
+    title: undefined,
+    name: undefined,
+    email: undefined,
+    bio: undefined,
+    class: '',
+})
+
+const emit = defineEmits<{
+    save: [payload: { name: string; email: string; bio: string }]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('profilePage.defaultTitle'))
+const resolvedNameLabel = computed(() => t('profilePage.nameLabel'))
+const resolvedEmailLabel = computed(() => t('profilePage.emailLabel'))
+const resolvedBioLabel = computed(() => t('profilePage.bioLabel'))
+const resolvedSaveText = computed(() => t('profilePage.saveText'))
+
+const formName = ref(props.name ?? '')
+const formEmail = ref(props.email ?? '')
+const formBio = ref(props.bio ?? '')
+
+watch(() => props.name, (val) => { formName.value = val ?? '' })
+watch(() => props.email, (val) => { formEmail.value = val ?? '' })
+watch(() => props.bio, (val) => { formBio.value = val ?? '' })
+
+const avatarInitials = computed(() => {
+    if (!formName.value) return ''
+    const parts = formName.value.trim().split(/\s+/)
+    return parts.length >= 2
+        ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+        : formName.value.slice(0, 2).toUpperCase()
+})
+
+function handleSave() {
+    emit('save', {
+        name: formName.value,
+        email: formEmail.value,
+        bio: formBio.value,
+    })
+}
+
+const rootClasses = computed(() =>
+    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="w-full max-w-2xl mx-auto">
+            <slot name="header">
+                <div class="mb-8">
+                    <h1 class="text-3xl font-black tracking-tight">
+                        {{ resolvedTitle }}
+                    </h1>
+                </div>
+            </slot>
+
+            <slot>
+                <Card variant="elevated">
+                    <CardHeader class="items-center text-center">
+                        <Avatar size="lg">
+                            <AvatarFallback>{{ avatarInitials }}</AvatarFallback>
+                        </Avatar>
+                        <CardTitle class="mt-4">{{ formName || resolvedNameLabel }}</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="space-y-6">
+                            <div class="space-y-2">
+                                <label class="font-bold text-sm" for="profile-name">{{ resolvedNameLabel }}</label>
+                                <Input
+                                    id="profile-name"
+                                    v-model="formName"
+                                    :placeholder="resolvedNameLabel"
+                                />
+                            </div>
+                            <div class="space-y-2">
+                                <label class="font-bold text-sm" for="profile-email">{{ resolvedEmailLabel }}</label>
+                                <Input
+                                    id="profile-email"
+                                    v-model="formEmail"
+                                    type="email"
+                                    :placeholder="resolvedEmailLabel"
+                                />
+                            </div>
+                            <div class="space-y-2">
+                                <label class="font-bold text-sm" for="profile-bio">{{ resolvedBioLabel }}</label>
+                                <Textarea
+                                    id="profile-bio"
+                                    v-model="formBio"
+                                    :placeholder="resolvedBioLabel"
+                                />
+                            </div>
+                            <div class="flex justify-end">
+                                <Button variant="primary" @click="handleSave">
+                                    {{ resolvedSaveText }}
+                                </Button>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </slot>
+
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/profile-page/profile-page.test.ts b/packages/ui/src/components/profile-page/profile-page.test.ts
new file mode 100644
index 0000000..3b20b09
--- /dev/null
+++ b/packages/ui/src/components/profile-page/profile-page.test.ts
@@ -0,0 +1,130 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import ProfilePage from './ProfilePage.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('ProfilePage', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(ProfilePage, { ...localeProvide })
+        expect(wrapper.find('h1').exists()).toBe(true)
+    })
+
+    it('renders default title from i18n', () => {
+        const wrapper = mount(ProfilePage, { ...localeProvide })
+        expect(wrapper.find('h1').text()).toBe('Profile')
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(ProfilePage, {
+            props: { title: 'Edit Profile' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h1').text()).toBe('Edit Profile')
+    })
+
+    it('renders form fields', () => {
+        const wrapper = mount(ProfilePage, { ...localeProvide })
+        const inputs = wrapper.findAll('input')
+        expect(inputs.length).toBeGreaterThanOrEqual(2)
+        expect(wrapper.find('textarea').exists()).toBe(true)
+    })
+
+    it('renders name input with label', () => {
+        const wrapper = mount(ProfilePage, { ...localeProvide })
+        expect(wrapper.text()).toContain('Name')
+    })
+
+    it('renders email input with label', () => {
+        const wrapper = mount(ProfilePage, { ...localeProvide })
+        expect(wrapper.text()).toContain('Email')
+    })
+
+    it('renders bio textarea with label', () => {
+        const wrapper = mount(ProfilePage, { ...localeProvide })
+        expect(wrapper.text()).toContain('Bio')
+    })
+
+    it('renders save button', () => {
+        const wrapper = mount(ProfilePage, { ...localeProvide })
+        const buttons = wrapper.findAll('button')
+        const saveButton = buttons.find(b => b.text().includes('Save'))
+        expect(saveButton).toBeTruthy()
+    })
+
+    it('renders avatar with initials', () => {
+        const wrapper = mount(ProfilePage, {
+            props: { name: 'John Doe' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('JD')
+    })
+
+    it('renders avatar with single name initials', () => {
+        const wrapper = mount(ProfilePage, {
+            props: { name: 'Alice' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('AL')
+    })
+
+    it('populates form with prop values', () => {
+        const wrapper = mount(ProfilePage, {
+            props: { name: 'Jane', email: 'jane@example.com', bio: 'Hello' },
+            ...localeProvide,
+        })
+        const inputs = wrapper.findAll('input')
+        expect(inputs[0].element.value).toBe('Jane')
+        expect(inputs[1].element.value).toBe('jane@example.com')
+        expect(wrapper.find('textarea').element.value).toBe('Hello')
+    })
+
+    it('emits save event when save button is clicked', async () => {
+        const wrapper = mount(ProfilePage, {
+            props: { name: 'Jane', email: 'jane@example.com', bio: 'Hello' },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const saveButton = buttons.find(b => b.text().includes('Save'))
+        await saveButton!.trigger('click')
+        expect(wrapper.emitted('save')).toBeTruthy()
+        expect(wrapper.emitted('save')![0][0]).toEqual({
+            name: 'Jane',
+            email: 'jane@example.com',
+            bio: 'Hello',
+        })
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(ProfilePage, {
+            props: { class: 'my-profile' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-profile')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(ProfilePage, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(ProfilePage, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(ProfilePage, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/progress.tsx b/packages/ui/src/components/progress.tsx
deleted file mode 100644
index 4b4bee8..0000000
--- a/packages/ui/src/components/progress.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ProgressPrimitive from '@radix-ui/react-progress';
-
-import { cn } from '../lib/utils';
-
-const Progress = React.forwardRef<
-    React.ElementRef<typeof ProgressPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-    <ProgressPrimitive.Root
-        ref={ref}
-        value={value}
-        className={cn(
-            'relative h-6 w-full overflow-hidden rounded-brutal',
-            'border-3 border-brutal bg-white dark:bg-gray-800',
-            'shadow-brutal-sm',
-            className
-        )}
-        {...props}
-    >
-        <ProgressPrimitive.Indicator
-            className="h-full w-full flex-1 bg-brutal-primary transition-all duration-300 ease-out"
-            style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-        />
-    </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };
diff --git a/packages/ui/src/components/progress/Progress.vue b/packages/ui/src/components/progress/Progress.vue
new file mode 100644
index 0000000..1a68d26
--- /dev/null
+++ b/packages/ui/src/components/progress/Progress.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { ProgressRoot, ProgressIndicator } from 'reka-ui'
+
+interface ProgressProps {
+    class?: string
+    modelValue?: number
+    max?: number
+}
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+    class: '',
+    modelValue: 0,
+    max: 100,
+})
+
+const classes = computed(() =>
+    cn(
+        'relative h-6 w-full overflow-hidden rounded-brutal',
+        'border-3 border-brutal bg-brutal-bg',
+        'shadow-brutal-sm',
+        props.class
+    )
+)
+
+const percentage = computed(() => props.modelValue ?? 0)
+</script>
+
+<template>
+    <ProgressRoot :class="classes" :model-value="modelValue" :max="max">
+        <ProgressIndicator
+            class="h-full w-full flex-1 bg-brutal-primary transition-all duration-300 ease-out"
+            :style="{ transform: `translateX(-${100 - percentage}%)` }"
+        />
+    </ProgressRoot>
+</template>
diff --git a/packages/ui/src/components/progress/progress.test.ts b/packages/ui/src/components/progress/progress.test.ts
new file mode 100644
index 0000000..27132c2
--- /dev/null
+++ b/packages/ui/src/components/progress/progress.test.ts
@@ -0,0 +1,76 @@
+import { mount } from '@vue/test-utils'
+import Progress from './Progress.vue'
+
+describe('Progress', () => {
+    it('renders with default modelValue and max', () => {
+        const wrapper = mount(Progress, { attachTo: document.body })
+        const classes = wrapper.classes()
+        expect(classes).toContain('relative')
+        expect(classes).toContain('h-6')
+        expect(classes).toContain('w-full')
+        expect(classes).toContain('overflow-hidden')
+        expect(classes).toContain('rounded-brutal')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('bg-brutal-bg')
+        expect(classes).toContain('shadow-brutal-sm')
+    })
+
+    it('has progress role and aria attributes', () => {
+        const wrapper = mount(Progress, { attachTo: document.body })
+        expect(wrapper.attributes('role')).toBe('progressbar')
+    })
+
+    it('updates progress indicator style based on modelValue', async () => {
+        const wrapper = mount(Progress, {
+            props: { modelValue: 50, max: 100 },
+            attachTo: document.body,
+        })
+        const indicator = wrapper.find('.bg-brutal-primary')
+        expect(indicator.exists()).toBe(true)
+        const style = indicator.attributes('style')
+        expect(style).toContain('translateX(-50%)')
+
+        await wrapper.setProps({ modelValue: 75 })
+        const updatedStyle = indicator.attributes('style')
+        expect(updatedStyle).toContain('translateX(-25%)')
+    })
+
+    it('shows full progress at 100%', () => {
+        const wrapper = mount(Progress, {
+            props: { modelValue: 100, max: 100 },
+            attachTo: document.body,
+        })
+        const indicator = wrapper.find('.bg-brutal-primary')
+        const style = indicator.attributes('style')
+        expect(style).toContain('translateX(-0%)')
+    })
+
+    it('shows zero progress at 0', () => {
+        const wrapper = mount(Progress, {
+            props: { modelValue: 0, max: 100 },
+            attachTo: document.body,
+        })
+        const indicator = wrapper.find('.bg-brutal-primary')
+        const style = indicator.attributes('style')
+        expect(style).toContain('translateX(-100%)')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Progress, {
+            props: { class: 'my-progress' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('my-progress')
+    })
+
+    it('has aria-valuemin and aria-valuemax attributes', () => {
+        const wrapper = mount(Progress, {
+            props: { modelValue: 30, max: 100 },
+            attachTo: document.body,
+        })
+        expect(wrapper.attributes('aria-valuemin')).toBe('0')
+        expect(wrapper.attributes('aria-valuemax')).toBe('100')
+        expect(wrapper.attributes('aria-valuenow')).toBe('30')
+    })
+})
diff --git a/packages/ui/src/components/quick-actions/QuickActions.vue b/packages/ui/src/components/quick-actions/QuickActions.vue
new file mode 100644
index 0000000..d70b2b3
--- /dev/null
+++ b/packages/ui/src/components/quick-actions/QuickActions.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, type Component } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import CardHeader from '../card/CardHeader.vue'
+import Button from '../button/Button.vue'
+import Badge from '../badge/Badge.vue'
+
+export interface ActionItem {
+    label: string
+    icon: Component
+    variant?: 'primary' | 'secondary' | 'outline' | 'danger'
+}
+
+interface QuickActionsProps {
+    title?: string
+    actions?: ActionItem[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<QuickActionsProps>(), {
+    title: undefined,
+    actions: () => [],
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    'action-click': [index: number]
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-md', props.class))
+
+const resolvedTitle = computed(() => props.title ?? t('quickActions.defaultTitle'))
+const resolvedBadge = computed(() => t('quickActions.badge'))
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <CardHeader>
+            <div class="flex items-center gap-2">
+                <Badge variant="accent" size="sm">{{ resolvedBadge }}</Badge>
+                <h3 class="text-lg font-black tracking-tight">
+{{ resolvedTitle }}
+</h3>
+            </div>
+        </CardHeader>
+        <CardContent>
+            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                <Button
+                    v-for="(action, index) in actions"
+                    :key="index"
+                    :variant="action.variant ?? 'outline'"
+                    class="flex flex-col items-center gap-2 h-auto py-3 px-2"
+                    @click="emit('action-click', index)"
+                >
+                    <component :is="action.icon" class="h-5 w-5 stroke-[2.5]" />
+                    <span class="text-xs font-bold">{{ action.label }}</span>
+                </Button>
+            </div>
+            <slot name="actions" />
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/quick-actions/quick-actions.test.ts b/packages/ui/src/components/quick-actions/quick-actions.test.ts
new file mode 100644
index 0000000..2f6c2f9
--- /dev/null
+++ b/packages/ui/src/components/quick-actions/quick-actions.test.ts
@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils'
+import { Plus, Settings, Trash2 } from 'lucide-vue-next'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import QuickActions from './QuickActions.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('QuickActions', () => {
+    const mockActions = [
+        { label: 'New Item', icon: Plus, variant: 'primary' as const },
+        { label: 'Settings', icon: Settings, variant: 'outline' as const },
+        { label: 'Delete', icon: Trash2, variant: 'danger' as const },
+    ]
+
+    it('renders with default props', () => {
+        const wrapper = mount(QuickActions, { ...localeProvide })
+        expect(wrapper.text()).toContain('Quick Actions')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(QuickActions, {
+            props: { title: 'My Actions' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('My Actions')
+    })
+
+    it('renders action buttons', () => {
+        const wrapper = mount(QuickActions, {
+            props: { actions: mockActions },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('New Item')
+        expect(wrapper.text()).toContain('Settings')
+        expect(wrapper.text()).toContain('Delete')
+    })
+
+    it('emits action-click with correct index', async () => {
+        const wrapper = mount(QuickActions, {
+            props: { actions: mockActions },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        await buttons[1].trigger('click')
+        expect(wrapper.emitted('action-click')).toBeTruthy()
+        expect(wrapper.emitted('action-click')![0]).toEqual([1])
+    })
+
+    it('renders action icons', () => {
+        const wrapper = mount(QuickActions, {
+            props: { actions: mockActions },
+            ...localeProvide,
+        })
+        const svgs = wrapper.findAll('svg')
+        expect(svgs.length).toBeGreaterThanOrEqual(3)
+    })
+
+    it('renders with empty actions array', () => {
+        const wrapper = mount(QuickActions, {
+            props: { actions: [] },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        expect(buttons.length).toBe(0)
+    })
+
+    it('renders Quick badge', () => {
+        const wrapper = mount(QuickActions, { ...localeProvide })
+        expect(wrapper.text()).toContain('Quick')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(QuickActions, {
+            props: { class: 'my-actions' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-actions"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
deleted file mode 100644
index c5c5260..0000000
--- a/packages/ui/src/components/radio-group.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Circle } from 'lucide-react';
-
-import { cn } from '../lib/utils';
-
-const RadioGroup = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-    return (
-        <RadioGroupPrimitive.Root
-            className={cn('grid gap-2', className)}
-            {...props}
-            ref={ref}
-        />
-    );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-    React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-    return (
-        <RadioGroupPrimitive.Item
-            ref={ref}
-            className={cn(
-                'peer aspect-square h-6 w-6 rounded-full',
-                'border-3 border-brutal bg-white dark:bg-gray-800 text-brutal-fg',
-                'shadow-brutal-sm',
-                'transition-all duration-150',
-                'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
-                'disabled:cursor-not-allowed disabled:opacity-50',
-                'data-[state=checked]:bg-brutal-primary',
-                className
-            )}
-            {...props}
-        >
-            <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <Circle className="h-2.5 w-2.5 fill-black dark:fill-white stroke-none" />
-            </RadioGroupPrimitive.Indicator>
-        </RadioGroupPrimitive.Item>
-    );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };
diff --git a/packages/ui/src/components/radio-group/RadioGroup.vue b/packages/ui/src/components/radio-group/RadioGroup.vue
new file mode 100644
index 0000000..3131743
--- /dev/null
+++ b/packages/ui/src/components/radio-group/RadioGroup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RadioGroupRoot } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface RadioGroupProps {
+    defaultValue?: string
+    modelValue?: string
+    class?: string
+}
+
+const props = defineProps<RadioGroupProps>()
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const classes = computed(() => cn('grid gap-2', props.class))
+</script>
+
+<template>
+    <RadioGroupRoot :default-value="defaultValue" :model-value="modelValue" :class="classes" @update:model-value="emit('update:modelValue', $event as string)">
+        <slot />
+    </RadioGroupRoot>
+</template>
diff --git a/packages/ui/src/components/radio-group/RadioGroupItem.vue b/packages/ui/src/components/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..ca4d7c5
--- /dev/null
+++ b/packages/ui/src/components/radio-group/RadioGroupItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RadioGroupItem as RadioGroupItemPrimitive, RadioGroupIndicator as RadioGroupIndicatorPrimitive } from 'reka-ui'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface RadioGroupItemProps {
+    value: string
+    disabled?: boolean
+    class?: string
+}
+
+const props = defineProps<RadioGroupItemProps>()
+
+const classes = computed(() =>
+    cn(
+        'peer aspect-square h-6 w-6 rounded-full',
+        'border-3 border-brutal bg-brutal-bg text-brutal-fg',
+        'shadow-brutal-sm',
+        'transition-all duration-150',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:bg-brutal-primary',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <RadioGroupItemPrimitive :value="value" :disabled="disabled" :class="classes">
+        <RadioGroupIndicatorPrimitive class="flex items-center justify-center">
+            <Circle class="h-2.5 w-2.5 fill-current stroke-none" />
+        </RadioGroupIndicatorPrimitive>
+    </RadioGroupItemPrimitive>
+</template>
diff --git a/packages/ui/src/components/radio-group/radio-group.test.ts b/packages/ui/src/components/radio-group/radio-group.test.ts
new file mode 100644
index 0000000..c2b6f48
--- /dev/null
+++ b/packages/ui/src/components/radio-group/radio-group.test.ts
@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RadioGroup from './RadioGroup.vue'
+import RadioGroupItem from './RadioGroupItem.vue'
+
+describe('RadioGroup', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(RadioGroup, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="radiogroup"]').exists()).toBe(true)
+    })
+
+    it('emits update:modelValue', async () => {
+        const wrapper = mount(RadioGroup, {
+            props: { modelValue: '' },
+            slots: {
+                default: () => h(RadioGroupItem, { value: 'option1' }),
+            },
+            attachTo: document.body,
+        })
+        const radio = wrapper.find('[role="radio"]')
+        await radio.trigger('click')
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    })
+})
+
+describe('RadioGroupItem', () => {
+    it('renders with value prop', () => {
+        const wrapper = mount(RadioGroup, {
+            props: { modelValue: '' },
+            slots: {
+                default: () => h(RadioGroupItem, { value: 'option1' }),
+            },
+            attachTo: document.body,
+        })
+        const radio = wrapper.find('[role="radio"]')
+        expect(radio.exists()).toBe(true)
+    })
+
+    it('has radio role', () => {
+        const wrapper = mount(RadioGroup, {
+            props: { modelValue: '' },
+            slots: {
+                default: () => h(RadioGroupItem, { value: 'option1' }),
+            },
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="radio"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/saas-pricing.tsx b/packages/ui/src/components/saas-pricing.tsx
deleted file mode 100644
index 8ac6645..0000000
--- a/packages/ui/src/components/saas-pricing.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Button } from './button';
-import { Card, CardHeader, CardContent, CardTitle, CardDescription, CardFooter } from './card';
-import { Badge } from './badge';
-import { Check, HelpCircle } from 'lucide-react';
-
-export interface PricingFeature {
-    text: string;
-    included: boolean;
-}
-
-export interface PricingPlan {
-    name: string;
-    description: string;
-    priceMonthly: number;
-    priceAnnually: number;
-    features: PricingFeature[];
-    popular?: boolean;
-    buttonText: string;
-    buttonVariant?: 'default' | 'primary' | 'secondary' | 'accent' | 'outline';
-}
-
-const defaultPlans: PricingPlan[] = [
-    {
-        name: 'Starter',
-        description: 'For builders, side-projects, and early prototypes.',
-        priceMonthly: 19,
-        priceAnnually: 15,
-        buttonText: 'Start Free Trial',
-        buttonVariant: 'outline',
-        features: [
-            { text: '3 active projects', included: true },
-            { text: 'Basic analytics dashboard', included: true },
-            { text: '10,000 monthly active users', included: true },
-            { text: 'Community slack support', included: true },
-            { text: 'API endpoints access', included: false },
-            { text: 'Custom brand domains', included: false },
-        ],
-    },
-    {
-        name: 'Pro',
-        description: 'The sweet spot for growing companies and SaaS products.',
-        priceMonthly: 49,
-        priceAnnually: 39,
-        popular: true,
-        buttonText: 'Upgrade to Pro',
-        buttonVariant: 'primary',
-        features: [
-            { text: 'Unlimited active projects', included: true },
-            { text: 'Advanced real-time analytics', included: true },
-            { text: '100,000 monthly active users', included: true },
-            { text: 'Priority 24/7 support email', included: true },
-            { text: 'Full API access', included: true },
-            { text: 'Custom brand domains', included: true },
-        ],
-    },
-    {
-        name: 'Enterprise',
-        description: 'Bespoke security, unlimited scaling, and dedicated resources.',
-        priceMonthly: 149,
-        priceAnnually: 119,
-        buttonText: 'Contact Sales',
-        buttonVariant: 'secondary',
-        features: [
-            { text: 'Dedicated isolated server cluster', included: true },
-            { text: 'Custom SLAs and data policies', included: true },
-            { text: 'Unlimited active users', included: true },
-            { text: 'Dedicated account success manager', included: true },
-            { text: 'Full API access + custom webhooks', included: true },
-            { text: 'White-label custom portal', included: true },
-        ],
-    },
-];
-
-export interface SaaSPricingProps extends React.HTMLAttributes<HTMLDivElement> {
-    plans?: PricingPlan[];
-    title?: string;
-    subtitle?: string;
-}
-
-export function SaaSPricing({
-    plans = defaultPlans,
-    title = 'Simple, Unapologetic Pricing',
-    subtitle = 'Choose the tier that fuels your app. No hidden fees, cancel anytime you want.',
-    className,
-    ...props
-}: SaaSPricingProps) {
-    const [billingPeriod, setBillingPeriod] = React.useState<'monthly' | 'annually'>('monthly');
-
-    return (
-        <section
-            className={`w-full py-16 px-4 md:px-8 bg-white dark:bg-gray-950 text-black dark:text-white ${className || ''}`}
-            {...props}
-        >
-            <div className="max-w-6xl mx-auto flex flex-col items-center">
-                <div className="text-center max-w-3xl mb-12">
-                    <Badge variant="accent" className="mb-4">
-                        PRICING PLANS
-                    </Badge>
-                    <h2 className="text-4xl md:text-5xl font-black tracking-tight mb-4 uppercase">
-                        {title}
-                    </h2>
-                    <p className="text-lg text-gray-600 dark:text-gray-400 font-medium">
-                        {subtitle}
-                    </p>
-                </div>
-
-                <div className="flex items-center gap-4 mb-16 bg-gray-100 dark:bg-gray-900 p-2 border-3 border-brutal shadow-brutal-sm">
-                    <button
-                        onClick={() => setBillingPeriod('monthly')}
-                        className={`px-4 py-2 font-black transition-all ${
-                            billingPeriod === 'monthly'
-                                ? 'bg-[#FFE66D] text-black border-2 border-black shadow-brutal-sm'
-                                : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'
-                        }`}
-                    >
-                        Monthly Billing
-                    </button>
-                    <button
-                        onClick={() => setBillingPeriod('annually')}
-                        className={`px-4 py-2 font-black transition-all flex items-center gap-2 ${
-                            billingPeriod === 'annually'
-                                ? 'bg-[#FFE66D] text-black border-2 border-black shadow-brutal-sm'
-                                : 'text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white'
-                        }`}
-                    >
-                        Annually (Save 20%)
-                        <Badge variant="success" size="sm" className="hidden sm:inline-flex">
-                            PROMO
-                        </Badge>
-                    </button>
-                </div>
-
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full items-start">
-                    {plans.map((plan) => {
-                        const price = billingPeriod === 'monthly' ? plan.priceMonthly : plan.priceAnnually;
-
-                        return (
-                            <Card
-                                key={plan.name}
-                                variant={plan.popular ? 'interactive' : 'default'}
-                                className={`relative flex flex-col h-full bg-white dark:bg-gray-900 border-3 ${
-                                    plan.popular
-                                        ? 'border-brutal scale-100 md:scale-105 shadow-brutal-lg z-10'
-                                        : 'border-brutal'
-                                }`}
-                            >
-                                {plan.popular && (
-                                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-20">
-                                        <Badge variant="primary" className="uppercase font-black text-xs border-2">
-                                            MOST POPULAR
-                                        </Badge>
-                                    </div>
-                                )}
-
-                                <CardHeader className="p-6">
-                                    <CardTitle className="text-2xl font-black uppercase tracking-tight">
-                                        {plan.name}
-                                    </CardTitle>
-                                    <CardDescription className="min-h-[48px] mt-2">
-                                        {plan.description}
-                                    </CardDescription>
-                                </CardHeader>
-
-                                <CardContent className="p-6 pt-0 flex-grow">
-                                    <div className="flex items-baseline gap-1 mb-6 border-b-3 border-brutal pb-6">
-                                        <span className="text-5xl font-black tracking-tight">${price}</span>
-                                        <span className="text-gray-600 dark:text-gray-400 font-bold">
-                                            / month
-                                        </span>
-                                    </div>
-
-                                    <ul className="space-y-4">
-                                        {plan.features.map((feature, idx) => (
-                                            <li key={idx} className="flex items-center gap-3">
-                                                <div
-                                                    className={`p-1 border-2 border-brutal ${
-                                                        feature.included
-                                                            ? 'bg-[#7FB069] text-black'
-                                                            : 'bg-gray-150 dark:bg-gray-800 text-gray-400 dark:text-gray-600'
-                                                    }`}
-                                                >
-                                                    <Check className="h-3 w-3 stroke-[3]" />
-                                                </div>
-                                                <span
-                                                    className={`text-sm font-bold ${
-                                                        feature.included
-                                                            ? 'text-black dark:text-white'
-                                                            : 'text-gray-400 dark:text-gray-600 line-through'
-                                                    }`}
-                                                >
-                                                    {feature.text}
-                                                </span>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </CardContent>
-
-                                <CardFooter className="p-6 border-t-3 border-brutal">
-                                    <Button
-                                        variant={plan.buttonVariant || 'default'}
-                                        className="w-full justify-center text-center font-black py-6 uppercase tracking-wider"
-                                    >
-                                        {plan.buttonText}
-                                    </Button>
-                                </CardFooter>
-                            </Card>
-                        );
-                    })}
-                </div>
-
-                <div className="mt-16 text-center flex flex-col sm:flex-row items-center gap-4 p-6 bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal">
-                    <HelpCircle className="h-8 w-8 text-[#FF6B6B]" />
-                    <p className="font-bold text-sm text-left">
-                        <span className="font-black uppercase text-[#FF6B6B] block sm:inline mr-2">
-                            No risk guarantee:
-                        </span>
-                        Try any tier completely free for 14 days. If you are not satisfied, we will issue a full refund within 30 seconds.
-                    </p>
-                </div>
-            </div>
-        </section>
-    );
-}
-SaaSPricing.displayName = 'SaaSPricing';
diff --git a/packages/ui/src/components/saas-pricing/SaaSPricing.vue b/packages/ui/src/components/saas-pricing/SaaSPricing.vue
new file mode 100644
index 0000000..d640ab7
--- /dev/null
+++ b/packages/ui/src/components/saas-pricing/SaaSPricing.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Check, HelpCircle } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Button from '../button/Button.vue'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardContent from '../card/CardContent.vue'
+import CardTitle from '../card/CardTitle.vue'
+import CardDescription from '../card/CardDescription.vue'
+import CardFooter from '../card/CardFooter.vue'
+import Badge from '../badge/Badge.vue'
+
+export interface PricingFeature {
+    text: string
+    included: boolean
+}
+
+export interface PricingPlan {
+    name: string
+    description: string
+    priceMonthly: string
+    priceAnnually: string
+    features: PricingFeature[]
+    popular?: boolean
+    buttonText: string
+    buttonVariant?: 'default' | 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'outline' | 'ghost' | 'link'
+}
+
+interface SaaSPricingProps {
+    plans?: PricingPlan[]
+    title?: string
+    subtitle?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<SaaSPricingProps>(), {
+    plans: () => [
+        {
+            name: 'Starter',
+            description: 'For side projects and experiments',
+            priceMonthly: '$0',
+            priceAnnually: '$0',
+            features: [
+                { text: '5 components', included: true },
+                { text: 'Basic themes', included: true },
+                { text: 'Community support', included: true },
+                { text: 'Priority updates', included: false },
+                { text: 'Custom themes', included: false },
+            ],
+            buttonText: 'Get Started',
+            buttonVariant: 'outline' as const,
+        },
+        {
+            name: 'Pro',
+            description: 'For professional developers',
+            priceMonthly: '$19',
+            priceAnnually: '$15',
+            features: [
+                { text: 'All components', included: true },
+                { text: 'All themes', included: true },
+                { text: 'Priority support', included: true },
+                { text: 'Priority updates', included: true },
+                { text: 'Custom themes', included: false },
+            ],
+            popular: true,
+            buttonText: 'Go Pro',
+            buttonVariant: 'primary' as const,
+        },
+        {
+            name: 'Enterprise',
+            description: 'For teams and organizations',
+            priceMonthly: '$49',
+            priceAnnually: '$39',
+            features: [
+                { text: 'All components', included: true },
+                { text: 'All themes', included: true },
+                { text: 'Dedicated support', included: true },
+                { text: 'Priority updates', included: true },
+                { text: 'Custom themes', included: true },
+            ],
+            buttonText: 'Contact Sales',
+            buttonVariant: 'secondary' as const,
+        },
+    ],
+    title: undefined,
+    subtitle: '',
+    class: '',
+})
+
+const billing = ref<'monthly' | 'annually'>('monthly')
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    'plan-select': [planName: string]
+}>()
+
+const resolvedTitle = computed(() => props.title ?? t('saasPricing.title'))
+
+const rootClasses = computed(() => cn('w-full max-w-5xl mx-auto', props.class))
+
+const monthlyBtnClasses = computed(() =>
+    cn(
+        'px-4 py-2 font-black text-sm transition-all active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        billing.value === 'monthly' ? 'bg-brutal-accent text-brutal-fg shadow-brutal-sm' : 'text-brutal-muted-foreground'
+    )
+)
+
+const annuallyBtnClasses = computed(() =>
+    cn(
+        'px-4 py-2 font-black text-sm transition-all active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        billing.value === 'annually' ? 'bg-brutal-accent text-brutal-fg shadow-brutal-sm' : 'text-brutal-muted-foreground'
+    )
+)
+
+function getPlanCardClasses(plan: PricingPlan) {
+    return cn(plan.popular && 'scale-105 shadow-brutal-lg')
+}
+
+function getFeatureClasses(feature: PricingFeature) {
+    return cn('text-sm font-medium', !feature.included && 'line-through text-brutal-muted-foreground')
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="text-center mb-10">
+            <h2 class="text-3xl font-black tracking-tight">
+{{ resolvedTitle }}
+</h2>
+            <p v-if="subtitle" class="mt-2 text-brutal-muted-foreground font-medium">
+{{ subtitle }}
+</p>
+            <div class="mt-6 inline-flex items-center gap-3 border-3 border-brutal bg-brutal-muted p-1" role="tablist" :aria-label="t('saasPricing.billingPeriod')">
+                <button
+                    role="tab"
+                    :aria-selected="billing === 'monthly'"
+                    :class="monthlyBtnClasses"
+                    @click="billing = 'monthly'"
+                >
+                    {{ t('saasPricing.monthly') }}
+                </button>
+                <button
+                    role="tab"
+                    :aria-selected="billing === 'annually'"
+                    :class="annuallyBtnClasses"
+                    @click="billing = 'annually'"
+                >
+                    {{ t('saasPricing.annually') }}
+                </button>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div v-for="plan in plans" :key="plan.name" class="relative">
+                <div v-if="plan.popular" class="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
+                    <Badge variant="primary" class="animate-pulse">
+{{ t('saasPricing.mostPopular') }}
+</Badge>
+                </div>
+                <Card :variant="plan.popular ? 'interactive' : 'default'" :class="getPlanCardClasses(plan)">
+                    <CardHeader>
+                        <CardTitle class="text-xl">
+{{ plan.name }}
+</CardTitle>
+                        <CardDescription>{{ plan.description }}</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                        <div class="mb-6">
+                            <span class="text-4xl font-black">{{ billing === 'monthly' ? plan.priceMonthly : plan.priceAnnually }}</span>
+                            <span class="text-sm font-bold text-brutal-muted-foreground">{{ billing === 'monthly' ? t('saasPricing.perMonth') : t('saasPricing.perMonthBilledAnnually') }}</span>
+                        </div>
+                        <ul class="space-y-3">
+                            <li v-for="feature in plan.features" :key="feature.text" class="flex items-center gap-2">
+                                <div v-if="feature.included" class="flex h-5 w-5 items-center justify-center bg-brutal-success text-brutal-fg">
+                                    <Check class="h-3 w-3 stroke-[3]" />
+                                </div>
+                                <div v-else class="flex h-5 w-5 items-center justify-center bg-brutal-muted text-brutal-muted-foreground">
+                                    <HelpCircle class="h-3 w-3 stroke-[3]" />
+                                </div>
+                                <span :class="getFeatureClasses(feature)">{{ feature.text }}</span>
+                            </li>
+                        </ul>
+                    </CardContent>
+                    <CardFooter>
+                        <Button :variant="plan.buttonVariant || 'default'" class="w-full" @click="emit('plan-select', plan.name)">
+{{ plan.buttonText }}
+</Button>
+                    </CardFooter>
+                </Card>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/saas-pricing/saas-pricing.test.ts b/packages/ui/src/components/saas-pricing/saas-pricing.test.ts
new file mode 100644
index 0000000..96cb8ff
--- /dev/null
+++ b/packages/ui/src/components/saas-pricing/saas-pricing.test.ts
@@ -0,0 +1,140 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import SaaSPricing from './SaaSPricing.vue'
+
+const globalProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('SaaSPricing', () => {
+    const defaultPlans = [
+        {
+            name: 'Starter',
+            description: 'For side projects',
+            priceMonthly: '$0',
+            priceAnnually: '$0',
+            features: [
+                { text: '5 components', included: true },
+                { text: 'Priority updates', included: false },
+            ],
+            buttonText: 'Get Started',
+            buttonVariant: 'outline' as const,
+        },
+        {
+            name: 'Pro',
+            description: 'For professionals',
+            priceMonthly: '$19',
+            priceAnnually: '$15',
+            features: [
+                { text: 'All components', included: true },
+                { text: 'Priority updates', included: true },
+            ],
+            popular: true,
+            buttonText: 'Go Pro',
+            buttonVariant: 'primary' as const,
+        },
+    ]
+
+    it('renders with default props', () => {
+        const wrapper = mount(SaaSPricing, globalProvide)
+        expect(wrapper.find('h2').text()).toBe('Simple, Unapologetic Pricing')
+        expect(wrapper.findAll('.grid > div').length).toBe(3)
+    })
+
+    it('shows plan names and prices', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { plans: defaultPlans },
+            ...globalProvide,
+        })
+        expect(wrapper.text()).toContain('Starter')
+        expect(wrapper.text()).toContain('Pro')
+        expect(wrapper.text()).toContain('$0')
+        expect(wrapper.text()).toContain('$19')
+    })
+
+    it('shows monthly prices by default', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { plans: defaultPlans },
+            ...globalProvide,
+        })
+        expect(wrapper.text()).toContain('$19')
+        expect(wrapper.text()).toContain('/mo')
+    })
+
+    it('switches to annual prices when annually toggle is clicked', async () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { plans: defaultPlans },
+            ...globalProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const annualButton = buttons.find(b => b.text() === 'Annually')
+        expect(annualButton).toBeTruthy()
+        await annualButton!.trigger('click')
+        expect(wrapper.text()).toContain('$15')
+        expect(wrapper.text()).toContain('billed annually')
+    })
+
+    it('switches back to monthly when monthly toggle is clicked', async () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { plans: defaultPlans },
+            ...globalProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const annualButton = buttons.find(b => b.text() === 'Annually')
+        await annualButton!.trigger('click')
+        const monthlyButton = wrapper.findAll('button').find(b => b.text() === 'Monthly')
+        await monthlyButton!.trigger('click')
+        expect(wrapper.text()).toContain('$19')
+        expect(wrapper.text()).toContain('/mo')
+        expect(wrapper.text()).not.toContain('billed annually')
+    })
+
+    it('shows popular badge for popular plans', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { plans: defaultPlans },
+            ...globalProvide,
+        })
+        expect(wrapper.text()).toContain('MOST POPULAR')
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { title: 'Custom Title' },
+            ...globalProvide,
+        })
+        expect(wrapper.find('h2').text()).toBe('Custom Title')
+    })
+
+    it('renders subtitle when provided', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { subtitle: 'Custom subtitle' },
+            ...globalProvide,
+        })
+        expect(wrapper.text()).toContain('Custom subtitle')
+    })
+
+    it('does not render subtitle when not provided', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { plans: [] },
+            ...globalProvide,
+        })
+        const subtitleEl = wrapper.find('.text-center > p')
+        expect(subtitleEl.exists()).toBe(false)
+    })
+
+    it('renders feature text for each plan', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { plans: defaultPlans },
+            ...globalProvide,
+        })
+        expect(wrapper.text()).toContain('5 components')
+        expect(wrapper.text()).toContain('Priority updates')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SaaSPricing, {
+            props: { class: 'my-pricing' },
+            ...globalProvide,
+        })
+        expect(wrapper.classes()).toContain('my-pricing')
+    })
+})
diff --git a/packages/ui/src/components/scratch-card/ScratchCard.vue b/packages/ui/src/components/scratch-card/ScratchCard.vue
new file mode 100644
index 0000000..0e06733
--- /dev/null
+++ b/packages/ui/src/components/scratch-card/ScratchCard.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, computed, toRef } from 'vue'
+import { cn } from '../../lib/utils'
+import { useReducedMotion } from '../../composables/useReducedMotion'
+import { useCanvasInteraction } from '../../composables/useCanvasInteraction'
+import { useLocale } from '@/composables/useLocale'
+import { scratchCardVariants } from './scratch-card-variants'
+
+interface ScratchCardProps {
+    percentage?: number
+    brushRadius?: number
+    overlayColor?: string
+    fadeDuration?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<ScratchCardProps>(), {
+    percentage: 50,
+    brushRadius: 20,
+    overlayColor: undefined,
+    fadeDuration: 300,
+    class: '',
+})
+
+const emit = defineEmits<{
+    progress: [percent: number]
+    completed: []
+}>()
+
+const containerRef = ref<HTMLDivElement | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const prefersReducedMotion = useReducedMotion()
+const { t } = useLocale()
+
+const drawOverlay = (ctxVal: CanvasRenderingContext2D, w: number, h: number) => {
+    ctxVal.clearRect(0, 0, w, h)
+
+    if (props.overlayColor) {
+        ctxVal.fillStyle = props.overlayColor
+        ctxVal.fillRect(0, 0, w, h)
+    } else {
+        let primary = '#FF6B6B'
+        let secondary = '#4ECDC4'
+        let fg = '#000000'
+        if (typeof document !== 'undefined') {
+            const rootStyle = getComputedStyle(document.documentElement)
+            primary = rootStyle.getPropertyValue('--brutal-primary').trim() || primary
+            secondary = rootStyle.getPropertyValue('--brutal-secondary').trim() || secondary
+            fg = rootStyle.getPropertyValue('--brutal-fg').trim() || fg
+        }
+
+        ctxVal.fillStyle = secondary
+        ctxVal.fillRect(0, 0, w, h)
+
+        ctxVal.strokeStyle = primary
+        ctxVal.lineWidth = 10
+        const spacing = 20
+        for (let i = -h; i < w + h; i += spacing) {
+            ctxVal.beginPath()
+            ctxVal.moveTo(i, 0)
+            ctxVal.lineTo(i + h, h)
+            ctxVal.stroke()
+        }
+
+        ctxVal.strokeStyle = fg
+        ctxVal.lineWidth = 2
+        for (let i = -h; i < w + h; i += spacing) {
+            ctxVal.beginPath()
+            ctxVal.moveTo(i + 5, 0)
+            ctxVal.lineTo(i + 5 + h, h)
+            ctxVal.stroke()
+        }
+    }
+}
+
+const {
+    isRevealed,
+    revealAll,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+} = useCanvasInteraction({
+    containerRef,
+    canvasRef,
+    brushRadius: toRef(props, 'brushRadius'),
+    percentage: toRef(props, 'percentage'),
+    fadeDuration: toRef(props, 'fadeDuration'),
+    prefersReducedMotion,
+    onProgress: (percent) => emit('progress', percent),
+    onCompleted: () => emit('completed'),
+    drawOverlay,
+})
+
+defineExpose({
+    isRevealed,
+    revealAll,
+})
+
+const containerClasses = computed(() =>
+    cn(scratchCardVariants(), props.class)
+)
+
+const canvasStyle = computed(() => ({
+    transition: `opacity ${props.fadeDuration}ms ease-out`,
+    opacity: isRevealed.value ? 0 : 1,
+}))
+</script>
+
+<template>
+    <div
+        ref="containerRef"
+        :class="containerClasses"
+        role="region"
+        :aria-label="t('scratchCard.ariaLabel')"
+        tabindex="0"
+        @keydown.enter="revealAll"
+        @keydown.space.prevent="revealAll"
+    >
+        <div class="scratch-card-content w-full h-full">
+            <slot />
+        </div>
+        <canvas
+            v-if="!isRevealed || !prefersReducedMotion"
+            ref="canvasRef"
+            class="absolute inset-0 cursor-crosshair touch-none select-none z-10"
+            :style="canvasStyle"
+            @pointerdown="handlePointerDown"
+            @pointermove="handlePointerMove"
+            @pointerup="handlePointerUp"
+            @pointercancel="handlePointerUp"
+            @touchstart="handleTouchStart"
+            @touchmove="handleTouchMove"
+            @touchend="handleTouchEnd"
+        />
+    </div>
+</template>
diff --git a/packages/ui/src/components/scratch-card/scratch-card-variants.ts b/packages/ui/src/components/scratch-card/scratch-card-variants.ts
new file mode 100644
index 0000000..9a6e952
--- /dev/null
+++ b/packages/ui/src/components/scratch-card/scratch-card-variants.ts
@@ -0,0 +1,11 @@
+import { cva } from 'class-variance-authority'
+
+export const scratchCardVariants = cva(
+    [
+        'relative',
+        'border-3 border-brutal',
+        'rounded-brutal',
+        'overflow-hidden',
+        'bg-brutal-bg',
+    ]
+)
diff --git a/packages/ui/src/components/scratch-card/scratch-card.test.ts b/packages/ui/src/components/scratch-card/scratch-card.test.ts
new file mode 100644
index 0000000..3fcb525
--- /dev/null
+++ b/packages/ui/src/components/scratch-card/scratch-card.test.ts
@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi, beforeAll } from 'vitest'
+import { ref } from 'vue'
+import ScratchCard from './ScratchCard.vue'
+
+vi.mock('../../composables/useReducedMotion', () => ({
+    useReducedMotion: () => ref(false)
+}))
+
+beforeAll(() => {
+    HTMLCanvasElement.prototype.getContext = vi.fn().mockReturnValue({
+        clearRect: vi.fn(),
+        fillRect: vi.fn(),
+        beginPath: vi.fn(),
+        moveTo: vi.fn(),
+        lineTo: vi.fn(),
+        stroke: vi.fn(),
+        save: vi.fn(),
+        restore: vi.fn(),
+        scale: vi.fn(),
+        arc: vi.fn(),
+        fill: vi.fn(),
+        getImageData: vi.fn().mockReturnValue({
+            data: new Uint8ClampedArray(400)
+        })
+    }) as any
+})
+
+describe('ScratchCard', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(ScratchCard, {
+            slots: { default: 'Secret Reward' }
+        })
+        expect(wrapper.text()).toContain('Secret Reward')
+    })
+
+    it('reveals content on Enter key press', async () => {
+        const wrapper = mount(ScratchCard)
+        expect((wrapper.vm as any).isRevealed).toBe(false)
+
+        await wrapper.trigger('keydown', { key: 'Enter' })
+        expect((wrapper.vm as any).isRevealed).toBe(true)
+    })
+
+    it('reveals content on Space key press', async () => {
+        const wrapper = mount(ScratchCard)
+        expect((wrapper.vm as any).isRevealed).toBe(false)
+
+        await wrapper.trigger('keydown', { key: ' ' })
+        expect((wrapper.vm as any).isRevealed).toBe(true)
+    })
+
+    it('emits progress event when scratching', async () => {
+        const wrapper = mount(ScratchCard, {
+            slots: { default: 'Content' }
+        })
+
+        const canvas = wrapper.find('canvas')
+        await canvas.trigger('pointerdown', {
+            clientX: 50,
+            clientY: 50,
+        })
+
+        await canvas.trigger('pointermove', {
+            clientX: 60,
+            clientY: 60,
+        })
+
+        await canvas.trigger('pointerup')
+
+        const progressEvents = wrapper.emitted('progress')
+        expect(progressEvents).toBeTruthy()
+    })
+
+    it('emits completed event when revealAll is called', async () => {
+        vi.useFakeTimers()
+
+        const wrapper = mount(ScratchCard, {
+            slots: { default: 'Content' }
+        })
+
+        ;(wrapper.vm as any).revealAll()
+
+        await vi.advanceTimersByTimeAsync(500)
+
+        expect(wrapper.emitted('completed')).toBeTruthy()
+
+        vi.useRealTimers()
+    })
+
+    it('cleans up resize observer on unmount', () => {
+        const wrapper = mount(ScratchCard, {
+            slots: { default: 'Content' }
+        })
+
+        const disconnectSpy = vi.spyOn(ResizeObserver.prototype, 'disconnect')
+        wrapper.unmount()
+        expect(disconnectSpy).toHaveBeenCalled()
+        disconnectSpy.mockRestore()
+    })
+})
diff --git a/packages/ui/src/components/scroll-area.tsx b/packages/ui/src/components/scroll-area.tsx
deleted file mode 100644
index 5798351..0000000
--- a/packages/ui/src/components/scroll-area.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { cn } from '../lib/utils';
-
-const ScrollArea = React.forwardRef<
-    React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-    <ScrollAreaPrimitive.Root
-        ref={ref}
-        className={cn('relative overflow-hidden', className)}
-        {...props}
-    >
-        <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-            {children}
-        </ScrollAreaPrimitive.Viewport>
-        <ScrollBar />
-        <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-    React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-        ref={ref}
-        orientation={orientation}
-        className={cn(
-            'flex touch-none select-none transition-colors',
-            orientation === 'vertical' &&
-                'h-full w-3 border-l-2 border-black dark:border-white p-[1px]',
-            orientation === 'horizontal' &&
-                'h-3 flex-col border-t-2 border-black dark:border-white p-[1px]',
-            className
-        )}
-        {...props}
-    >
-        <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 bg-black dark:bg-white" />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/packages/ui/src/components/scroll-area/ScrollArea.vue b/packages/ui/src/components/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000..03563b7
--- /dev/null
+++ b/packages/ui/src/components/scroll-area/ScrollArea.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    ScrollAreaRoot as ScrollAreaRootPrimitive,
+    ScrollAreaViewport as ScrollAreaViewportPrimitive,
+    ScrollAreaCorner as ScrollAreaCornerPrimitive,
+} from 'reka-ui'
+import { cn } from '../../lib/utils'
+import ScrollBar from './ScrollBar.vue'
+
+interface ScrollAreaProps {
+    class?: string
+}
+
+const props = defineProps<ScrollAreaProps>()
+
+const classes = computed(() =>
+    cn('relative overflow-hidden', props.class)
+)
+</script>
+
+<template>
+    <ScrollAreaRootPrimitive :class="classes">
+        <ScrollAreaViewportPrimitive class="h-full w-full rounded-[inherit]">
+            <slot />
+        </ScrollAreaViewportPrimitive>
+        <ScrollBar />
+        <ScrollAreaCornerPrimitive />
+    </ScrollAreaRootPrimitive>
+</template>
diff --git a/packages/ui/src/components/scroll-area/ScrollBar.vue b/packages/ui/src/components/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000..5a99dba
--- /dev/null
+++ b/packages/ui/src/components/scroll-area/ScrollBar.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    ScrollAreaScrollbar as ScrollAreaScrollbarPrimitive,
+    ScrollAreaThumb as ScrollAreaThumbPrimitive,
+} from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface ScrollBarProps {
+    orientation?: 'vertical' | 'horizontal'
+    class?: string
+}
+
+const props = withDefaults(defineProps<ScrollBarProps>(), {
+    orientation: 'vertical',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(
+        'flex touch-none select-none transition-colors',
+        props.orientation === 'vertical' &&
+            'h-full w-3 border-l-3 border-brutal p-[1px]',
+        props.orientation === 'horizontal' &&
+            'h-3 flex-col border-t-3 border-brutal p-[1px]',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <ScrollAreaScrollbarPrimitive :orientation="orientation" :class="classes">
+        <ScrollAreaThumbPrimitive class="relative flex-1 bg-brutal-fg" />
+    </ScrollAreaScrollbarPrimitive>
+</template>
diff --git a/packages/ui/src/components/scroll-area/scroll-area.test.ts b/packages/ui/src/components/scroll-area/scroll-area.test.ts
new file mode 100644
index 0000000..2894168
--- /dev/null
+++ b/packages/ui/src/components/scroll-area/scroll-area.test.ts
@@ -0,0 +1,76 @@
+import { mount } from '@vue/test-utils'
+import { cn } from '../../lib/utils'
+import ScrollArea from './ScrollArea.vue'
+import ScrollBar from './ScrollBar.vue'
+
+describe('ScrollArea', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(ScrollArea, {
+            attachTo: document.body,
+        })
+        expect(wrapper.element.tagName).toBe('DIV')
+        expect(wrapper.classes()).toContain('relative')
+        expect(wrapper.classes()).toContain('overflow-hidden')
+        wrapper.unmount()
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(ScrollArea, {
+            attachTo: document.body,
+            slots: { default: '<p>Scrollable content</p>' },
+        })
+        expect(wrapper.text()).toContain('Scrollable content')
+        wrapper.unmount()
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(ScrollArea, {
+            attachTo: document.body,
+            props: { class: 'my-scroll' },
+        })
+        expect(wrapper.classes()).toContain('my-scroll')
+        wrapper.unmount()
+    })
+})
+
+describe('ScrollBar', () => {
+    it('renders within ScrollArea', () => {
+        const wrapper = mount(ScrollArea, {
+            attachTo: document.body,
+        })
+        const scrollbar = wrapper.findComponent(ScrollBar)
+        expect(scrollbar.exists()).toBe(true)
+        wrapper.unmount()
+    })
+
+    it('computes vertical orientation classes', () => {
+        const classes = cn(
+            'flex touch-none select-none transition-colors',
+            'h-full w-3 border-l-2 border-brutal p-[1px]'
+        )
+        expect(classes).toContain('h-full')
+        expect(classes).toContain('w-3')
+        expect(classes).toContain('border-l-2')
+        expect(classes).toContain('touch-none')
+    })
+
+    it('computes horizontal orientation classes', () => {
+        const classes = cn(
+            'flex touch-none select-none transition-colors',
+            'h-3 flex-col border-t-2 border-brutal p-[1px]'
+        )
+        expect(classes).toContain('h-3')
+        expect(classes).toContain('flex-col')
+        expect(classes).toContain('border-t-2')
+    })
+
+    it('computes classes with custom class merged', () => {
+        const classes = cn(
+            'flex touch-none select-none transition-colors',
+            'h-full w-3 border-l-2 border-brutal p-[1px]',
+            'my-scrollbar'
+        )
+        expect(classes).toContain('my-scrollbar')
+        expect(classes).toContain('touch-none')
+    })
+})
diff --git a/packages/ui/src/components/search-widget/SearchWidget.vue b/packages/ui/src/components/search-widget/SearchWidget.vue
new file mode 100644
index 0000000..5a9a42b
--- /dev/null
+++ b/packages/ui/src/components/search-widget/SearchWidget.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Search } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import Command from '../command/Command.vue'
+import CommandInput from '../command/CommandInput.vue'
+import CommandList from '../command/CommandList.vue'
+import CommandGroup from '../command/CommandGroup.vue'
+import CommandItem from '../command/CommandItem.vue'
+import CommandEmpty from '../command/CommandEmpty.vue'
+
+export interface SearchSuggestion {
+    label: string
+    value: string
+    group?: string
+}
+
+interface SearchWidgetProps {
+    placeholder?: string
+    suggestions?: SearchSuggestion[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<SearchWidgetProps>(), {
+    placeholder: undefined,
+    suggestions: () => [],
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    search: [value: string]
+    select: [suggestion: SearchSuggestion]
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-lg', props.class))
+
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('searchWidget.defaultPlaceholder'))
+
+const query = ref('')
+
+const filteredSuggestions = computed(() => {
+    if (!query.value) return []
+    const q = query.value.toLowerCase()
+    return props.suggestions.filter(s => s.label.toLowerCase().includes(q))
+})
+
+const groupedSuggestions = computed(() => {
+    const groups: Record<string, SearchSuggestion[]> = {}
+    for (const suggestion of filteredSuggestions.value) {
+        const group = suggestion.group ?? ''
+        if (!groups[group]) groups[group] = []
+        groups[group].push(suggestion)
+    }
+    return groups
+})
+
+function handleSearch(value: string) {
+    query.value = value
+    emit('search', value)
+}
+
+function handleSelect(value: string) {
+    const suggestion = props.suggestions.find(s => s.value === value)
+    if (suggestion) {
+        emit('select', suggestion)
+    }
+}
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <CardContent class="p-0">
+            <Command>
+                <CommandInput
+                    :placeholder="resolvedPlaceholder"
+                    :model-value="query"
+                    @update:model-value="handleSearch"
+                />
+                <CommandList v-if="query">
+                    <CommandEmpty />
+                    <CommandGroup
+                        v-for="(groupSuggestions, groupKey) in groupedSuggestions"
+                        :key="groupKey"
+                        :heading="groupKey || undefined"
+                    >
+                        <CommandItem
+                            v-for="suggestion in groupSuggestions"
+                            :key="suggestion.value"
+                            :value="suggestion.value"
+                            @select="handleSelect"
+                        >
+                            <Search class="h-4 w-4 stroke-[3]" />
+                            {{ suggestion.label }}
+                        </CommandItem>
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+            <slot name="actions" />
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/search-widget/search-widget.test.ts b/packages/ui/src/components/search-widget/search-widget.test.ts
new file mode 100644
index 0000000..2b375ec
--- /dev/null
+++ b/packages/ui/src/components/search-widget/search-widget.test.ts
@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import SearchWidget from './SearchWidget.vue'
+import type { SearchSuggestion } from './SearchWidget.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const sampleSuggestions: SearchSuggestion[] = [
+    { label: 'Vue 3 Guide', value: 'vue3-guide', group: 'Documentation' },
+    { label: 'React Guide', value: 'react-guide', group: 'Documentation' },
+    { label: 'Tailwind CSS', value: 'tailwind-css', group: 'Tools' },
+    { label: 'Vite Build Tool', value: 'vite', group: 'Tools' },
+]
+
+describe('SearchWidget', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SearchWidget, { ...localeProvide })
+        expect(wrapper.find('input').exists()).toBe(true)
+    })
+
+    it('shows custom placeholder', () => {
+        const wrapper = mount(SearchWidget, {
+            props: { placeholder: 'Search components...' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('input').attributes('placeholder')).toBe('Search components...')
+    })
+
+    it('shows default placeholder from i18n', () => {
+        const wrapper = mount(SearchWidget, { ...localeProvide })
+        expect(wrapper.find('input').attributes('placeholder')).toBe('Search...')
+    })
+
+    it('emits search when input value changes', async () => {
+        const wrapper = mount(SearchWidget, { ...localeProvide })
+        const input = wrapper.find('input')
+        await input.setValue('test query')
+        expect(wrapper.emitted('search')).toBeTruthy()
+        expect(wrapper.emitted('search')![0]).toEqual(['test query'])
+    })
+
+    it('shows filtered suggestions when typing', async () => {
+        const wrapper = mount(SearchWidget, {
+            props: { suggestions: sampleSuggestions },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input')
+        await input.setValue('Vue')
+        expect(wrapper.text()).toContain('Vue 3 Guide')
+        expect(wrapper.text()).not.toContain('React Guide')
+    })
+
+    it('shows suggestions grouped by group field', async () => {
+        const wrapper = mount(SearchWidget, {
+            props: { suggestions: sampleSuggestions },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input')
+        await input.setValue('Guide')
+        expect(wrapper.text()).toContain('Documentation')
+        expect(wrapper.text()).toContain('Vue 3 Guide')
+        expect(wrapper.text()).toContain('React Guide')
+    })
+
+    it('emits select when a suggestion is clicked', async () => {
+        const wrapper = mount(SearchWidget, {
+            props: { suggestions: sampleSuggestions },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input')
+        await input.setValue('Vue')
+        const items = wrapper.findAll('[role="option"]')
+        expect(items.length).toBeGreaterThan(0)
+        await items[0].trigger('click')
+        expect(wrapper.emitted('select')).toBeTruthy()
+        expect(wrapper.emitted('select')![0][0]).toEqual({
+            label: 'Vue 3 Guide',
+            value: 'vue3-guide',
+            group: 'Documentation',
+        })
+    })
+
+    it('does not show suggestions list when query is empty', () => {
+        const wrapper = mount(SearchWidget, {
+            props: { suggestions: sampleSuggestions },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    })
+
+    it('renders actions slot', () => {
+        const wrapper = mount(SearchWidget, {
+            slots: { actions: '<div class="custom-action">Custom Action</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Action')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SearchWidget, {
+            props: { class: 'my-search' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-search"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
deleted file mode 100644
index 24270e9..0000000
--- a/packages/ui/src/components/select.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-    <SelectPrimitive.Trigger
-        ref={ref}
-        className={cn(
-            'flex h-11 w-full items-center justify-between px-4 py-2',
-            'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal',
-            'font-bold placeholder:text-gray-400',
-            'shadow-brutal',
-            'transition-all duration-150',
-            'focus:outline-none focus:shadow-brutal-lg focus:-translate-x-0.5 focus:-translate-y-0.5',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            '[&>span]:line-clamp-1',
-            className
-        )}
-        {...props}
-    >
-        {children}
-        <SelectPrimitive.Icon asChild>
-            <ChevronDown className="h-5 w-5 stroke-[3]" />
-        </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollUpButton
-        ref={ref}
-        className={cn(
-            'flex cursor-default items-center justify-center py-1 bg-brutal-bg text-brutal-fg',
-            className
-        )}
-        {...props}
-    >
-        <ChevronUp className="h-4 w-4 stroke-[3]" />
-    </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.ScrollDownButton
-        ref={ref}
-        className={cn(
-            'flex cursor-default items-center justify-center py-1 bg-brutal-bg text-brutal-fg',
-            className
-        )}
-        {...props}
-    >
-        <ChevronDown className="h-4 w-4 stroke-[3]" />
-    </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-    <SelectPrimitive.Portal>
-        <SelectPrimitive.Content
-            ref={ref}
-            className={cn(
-                'relative z-50 max-h-96 min-w-[8rem] overflow-hidden',
-                'bg-brutal-bg text-brutal-fg border-3 border-brutal rounded-brutal shadow-brutal',
-                'data-[state=open]:animate-in data-[state=closed]:animate-out',
-                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-                'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-                'data-[side=bottom]:slide-in-from-top-2',
-                'data-[side=left]:slide-in-from-right-2',
-                'data-[side=right]:slide-in-from-left-2',
-                'data-[side=top]:slide-in-from-bottom-2',
-                position === 'popper' &&
-                    'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-                className
-            )}
-            position={position}
-            {...props}
-        >
-            <SelectScrollUpButton />
-            <SelectPrimitive.Viewport
-                className={cn(
-                    'p-1',
-                    position === 'popper' &&
-                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-                )}
-            >
-                {children}
-            </SelectPrimitive.Viewport>
-            <SelectScrollDownButton />
-        </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Label>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.Label
-        ref={ref}
-        className={cn('px-3 py-2 text-sm font-black tracking-wide', className)}
-        {...props}
-    />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-    <SelectPrimitive.Item
-        ref={ref}
-        className={cn(
-            'relative flex w-full cursor-pointer select-none items-center py-2 pl-8 pr-3',
-            'font-bold outline-none',
-            'focus:bg-brutal-accent focus:text-brutal-fg',
-            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-            'hover:bg-brutal-muted',
-            className
-        )}
-        {...props}
-    >
-        <span className="absolute left-2 flex h-4 w-4 items-center justify-center">
-            <SelectPrimitive.ItemIndicator>
-                <Check className="h-4 w-4 stroke-[3]" />
-            </SelectPrimitive.ItemIndicator>
-        </span>
-        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-    React.ElementRef<typeof SelectPrimitive.Separator>,
-    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-    <SelectPrimitive.Separator
-        ref={ref}
-        className={cn('-mx-1 my-1 h-[3px] bg-[var(--brutal-border-color,#000)]', className)}
-        {...props}
-    />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-    Select,
-    SelectGroup,
-    SelectValue,
-    SelectTrigger,
-    SelectContent,
-    SelectLabel,
-    SelectItem,
-    SelectSeparator,
-    SelectScrollUpButton,
-    SelectScrollDownButton,
-};
diff --git a/packages/ui/src/components/select/SelectContent.vue b/packages/ui/src/components/select/SelectContent.vue
new file mode 100644
index 0000000..a0df225
--- /dev/null
+++ b/packages/ui/src/components/select/SelectContent.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    SelectPortal as SelectPortalPrimitive,
+    SelectContent as SelectContentPrimitive,
+    SelectViewport as SelectViewportPrimitive,
+} from 'reka-ui'
+import { cn } from '../../lib/utils'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+
+interface SelectContentProps {
+    position?: 'popper' | 'item-aligned'
+    class?: string
+}
+
+const props = withDefaults(defineProps<SelectContentProps>(), {
+    position: 'popper',
+    class: '',
+})
+
+const contentClasses = computed(() =>
+    cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2',
+        'data-[side=top]:slide-in-from-bottom-2',
+        props.position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class
+    )
+)
+
+const viewportClasses = computed(() =>
+    cn(
+        'p-1',
+        props.position === 'popper' &&
+            'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)]'
+    )
+)
+</script>
+
+<template>
+    <SelectPortalPrimitive>
+        <SelectContentPrimitive :class="contentClasses" :position="position">
+            <SelectScrollUpButton />
+            <SelectViewportPrimitive :class="viewportClasses">
+                <slot />
+            </SelectViewportPrimitive>
+            <SelectScrollDownButton />
+        </SelectContentPrimitive>
+    </SelectPortalPrimitive>
+</template>
diff --git a/packages/ui/src/components/select/SelectItem.vue b/packages/ui/src/components/select/SelectItem.vue
new file mode 100644
index 0000000..1c504d9
--- /dev/null
+++ b/packages/ui/src/components/select/SelectItem.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectItem as SelectItemPrimitive, SelectItemIndicator as SelectItemIndicatorPrimitive, SelectItemText as SelectItemTextPrimitive } from 'reka-ui'
+import { Check } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface SelectItemProps {
+    value: string
+    disabled?: boolean
+    class?: string
+}
+
+const props = defineProps<SelectItemProps>()
+
+const classes = computed(() =>
+    cn(
+        'relative flex w-full cursor-pointer select-none items-center py-2 pl-8 pr-3',
+        'font-bold outline-none',
+        'focus:bg-brutal-accent focus:text-brutal-fg',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <SelectItemPrimitive :value="value" :disabled="disabled" :class="classes">
+        <span class="absolute left-2 flex h-4 w-4 items-center justify-center">
+            <SelectItemIndicatorPrimitive>
+                <Check class="h-4 w-4 stroke-[3]" />
+            </SelectItemIndicatorPrimitive>
+        </span>
+        <SelectItemTextPrimitive>
+            <slot />
+        </SelectItemTextPrimitive>
+    </SelectItemPrimitive>
+</template>
diff --git a/packages/ui/src/components/select/SelectLabel.vue b/packages/ui/src/components/select/SelectLabel.vue
new file mode 100644
index 0000000..51f7716
--- /dev/null
+++ b/packages/ui/src/components/select/SelectLabel.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectLabel as SelectLabelPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface SelectLabelProps {
+    class?: string
+}
+
+const props = defineProps<SelectLabelProps>()
+
+const classes = computed(() =>
+    cn('px-3 py-2 text-sm font-black tracking-wide', props.class)
+)
+</script>
+
+<template>
+    <SelectLabelPrimitive :class="classes">
+        <slot />
+    </SelectLabelPrimitive>
+</template>
diff --git a/packages/ui/src/components/select/SelectScrollDownButton.vue b/packages/ui/src/components/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..4645c86
--- /dev/null
+++ b/packages/ui/src/components/select/SelectScrollDownButton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectScrollDownButton as SelectScrollDownButtonPrimitive } from 'reka-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface SelectScrollDownButtonProps {
+    class?: string
+}
+
+const props = defineProps<SelectScrollDownButtonProps>()
+
+const classes = computed(() =>
+    cn('flex cursor-default items-center justify-center py-1 bg-brutal-bg', props.class)
+)
+</script>
+
+<template>
+    <SelectScrollDownButtonPrimitive :class="classes">
+        <ChevronDown class="h-4 w-4 stroke-[3]" />
+    </SelectScrollDownButtonPrimitive>
+</template>
diff --git a/packages/ui/src/components/select/SelectScrollUpButton.vue b/packages/ui/src/components/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..341ead5
--- /dev/null
+++ b/packages/ui/src/components/select/SelectScrollUpButton.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectScrollUpButton as SelectScrollUpButtonPrimitive } from 'reka-ui'
+import { ChevronUp } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface SelectScrollUpButtonProps {
+    class?: string
+}
+
+const props = defineProps<SelectScrollUpButtonProps>()
+
+const classes = computed(() =>
+    cn('flex cursor-default items-center justify-center py-1 bg-brutal-bg', props.class)
+)
+</script>
+
+<template>
+    <SelectScrollUpButtonPrimitive :class="classes">
+        <ChevronUp class="h-4 w-4 stroke-[3]" />
+    </SelectScrollUpButtonPrimitive>
+</template>
diff --git a/packages/ui/src/components/select/SelectSeparator.vue b/packages/ui/src/components/select/SelectSeparator.vue
new file mode 100644
index 0000000..21818eb
--- /dev/null
+++ b/packages/ui/src/components/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectSeparator as SelectSeparatorPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface SelectSeparatorProps {
+    class?: string
+}
+
+const props = defineProps<SelectSeparatorProps>()
+
+const classes = computed(() =>
+    cn('-mx-1 my-1 h-[3px] bg-brutal-fg', props.class)
+)
+</script>
+
+<template>
+    <SelectSeparatorPrimitive :class="classes" />
+</template>
diff --git a/packages/ui/src/components/select/SelectTrigger.vue b/packages/ui/src/components/select/SelectTrigger.vue
new file mode 100644
index 0000000..e8f6e80
--- /dev/null
+++ b/packages/ui/src/components/select/SelectTrigger.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectTrigger as SelectTriggerPrimitive, SelectIcon as SelectIconPrimitive } from 'reka-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+interface SelectTriggerProps {
+    class?: string
+}
+
+const props = defineProps<SelectTriggerProps>()
+
+const classes = computed(() =>
+    cn(
+        'flex h-11 w-full items-center justify-between px-4 py-2',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal',
+        'font-bold placeholder:text-brutal-placeholder',
+        'shadow-brutal',
+        'transition-all duration-150',
+        'focus:outline-none focus:shadow-brutal-lg focus:-translate-x-0.5 focus:-translate-y-0.5',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:translate-x-0 active:shadow-none',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        '[&>span]:line-clamp-1',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <SelectTriggerPrimitive :class="classes" aria-haspopup="listbox">
+        <slot />
+        <SelectIconPrimitive as-child>
+            <ChevronDown class="h-5 w-5 stroke-[3]" />
+        </SelectIconPrimitive>
+    </SelectTriggerPrimitive>
+</template>
diff --git a/packages/ui/src/components/select/select.test.ts b/packages/ui/src/components/select/select.test.ts
new file mode 100644
index 0000000..f1bee00
--- /dev/null
+++ b/packages/ui/src/components/select/select.test.ts
@@ -0,0 +1,168 @@
+import { mount } from '@vue/test-utils'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectContent from './SelectContent.vue'
+import SelectItem from './SelectItem.vue'
+import SelectLabel from './SelectLabel.vue'
+import SelectSeparator from './SelectSeparator.vue'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('SelectTrigger', () => {
+    it('renders with brutal styling classes', () => {
+        const wrapper = mount(SelectTrigger, {
+            global: { stubs: { SelectTrigger: primitiveStub, SelectIcon: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('shadow-brutal')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+        expect(wrapper.classes()).toContain('text-brutal-fg')
+        expect(wrapper.classes()).toContain('font-bold')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SelectTrigger, {
+            props: { class: 'custom-trigger' },
+            global: { stubs: { SelectTrigger: primitiveStub, SelectIcon: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-trigger')
+    })
+})
+
+describe('SelectContent', () => {
+    const contentStubs = {
+        SelectPortal: primitiveStub,
+        SelectContent: {
+            template: '<div data-testid="select-content"><slot /></div>',
+        },
+        SelectViewport: primitiveStub,
+        SelectScrollUpButton: primitiveStub,
+        SelectScrollDownButton: primitiveStub,
+    }
+
+    it('renders with brutal styling classes', () => {
+        const wrapper = mount(SelectContent, {
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="select-content"]')
+        expect(content.classes()).toContain('border-3')
+        expect(content.classes()).toContain('border-brutal')
+        expect(content.classes()).toContain('shadow-brutal')
+        expect(content.classes()).toContain('bg-brutal-bg')
+        expect(content.classes()).toContain('text-brutal-fg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SelectContent, {
+            props: { class: 'custom-content' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="select-content"]')
+        expect(content.classes()).toContain('custom-content')
+    })
+})
+
+describe('SelectItem', () => {
+    const itemStubs = {
+        SelectItem: primitiveStub,
+        SelectItemIndicator: primitiveStub,
+        SelectItemText: primitiveStub,
+    }
+
+    it('renders slot content', () => {
+        const wrapper = mount(SelectItem, {
+            props: { value: 'test' },
+            slots: { default: 'Item text' },
+            global: { stubs: itemStubs },
+        })
+        expect(wrapper.text()).toBe('Item text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SelectItem, {
+            props: { value: 'test', class: 'custom-item' },
+            global: { stubs: itemStubs },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+    })
+})
+
+describe('SelectLabel', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(SelectLabel, {
+            slots: { default: 'Label text' },
+            global: { stubs: { SelectLabel: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Label text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SelectLabel, {
+            props: { class: 'custom-label' },
+            global: { stubs: { SelectLabel: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-label')
+    })
+})
+
+describe('SelectSeparator', () => {
+    it('renders with separator styling', () => {
+        const wrapper = mount(SelectSeparator, {
+            global: { stubs: { SelectSeparator: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('h-[3px]')
+        expect(wrapper.classes()).toContain('bg-brutal-fg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SelectSeparator, {
+            props: { class: 'custom-sep' },
+            global: { stubs: { SelectSeparator: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-sep')
+    })
+})
+
+describe('SelectScrollUpButton', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(SelectScrollUpButton, {
+            global: { stubs: { SelectScrollUpButton: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('items-center')
+        expect(wrapper.classes()).toContain('justify-center')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SelectScrollUpButton, {
+            props: { class: 'custom-scroll-up' },
+            global: { stubs: { SelectScrollUpButton: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-scroll-up')
+    })
+})
+
+describe('SelectScrollDownButton', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(SelectScrollDownButton, {
+            global: { stubs: { SelectScrollDownButton: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('items-center')
+        expect(wrapper.classes()).toContain('justify-center')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SelectScrollDownButton, {
+            props: { class: 'custom-scroll-down' },
+            global: { stubs: { SelectScrollDownButton: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-scroll-down')
+    })
+})
diff --git a/packages/ui/src/components/separator.tsx b/packages/ui/src/components/separator.tsx
deleted file mode 100644
index e19539f..0000000
--- a/packages/ui/src/components/separator.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import { cn } from '../lib/utils';
-
-const Separator = React.forwardRef<
-    React.ElementRef<typeof SeparatorPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-    ({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
-        <SeparatorPrimitive.Root
-            ref={ref}
-            decorative={decorative}
-            orientation={orientation}
-            className={cn(
-                'shrink-0 bg-black dark:bg-white',
-                orientation === 'horizontal' ? 'h-[3px] w-full' : 'h-full w-[3px]',
-                className
-            )}
-            {...props}
-        />
-    )
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };
diff --git a/packages/ui/src/components/separator/Separator.vue b/packages/ui/src/components/separator/Separator.vue
new file mode 100644
index 0000000..b154b2d
--- /dev/null
+++ b/packages/ui/src/components/separator/Separator.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { Separator as SeparatorPrimitive } from 'reka-ui'
+import { separatorVariants } from './separator-variants'
+
+type SeparatorVariantProps = VariantProps<typeof separatorVariants>
+
+interface SeparatorProps {
+    orientation?: NonNullable<SeparatorVariantProps['orientation']>
+    decorative?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+    orientation: 'horizontal',
+    decorative: true,
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(separatorVariants({ orientation: props.orientation }), props.class)
+)
+</script>
+
+<template>
+    <SeparatorPrimitive
+        :orientation="orientation"
+        :decorative="decorative"
+        :class="classes"
+    >
+        <slot />
+    </SeparatorPrimitive>
+</template>
diff --git a/packages/ui/src/components/separator/separator-variants.ts b/packages/ui/src/components/separator/separator-variants.ts
new file mode 100644
index 0000000..ef75877
--- /dev/null
+++ b/packages/ui/src/components/separator/separator-variants.ts
@@ -0,0 +1,13 @@
+import { cva } from 'class-variance-authority'
+
+export const separatorVariants = cva('shrink-0 bg-brutal-fg', {
+    variants: {
+        orientation: {
+            horizontal: 'h-[3px] w-full',
+            vertical: 'h-full w-[3px]',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+})
diff --git a/packages/ui/src/components/separator/separator.test.ts b/packages/ui/src/components/separator/separator.test.ts
new file mode 100644
index 0000000..1cafbf4
--- /dev/null
+++ b/packages/ui/src/components/separator/separator.test.ts
@@ -0,0 +1,68 @@
+import { mount } from '@vue/test-utils'
+import Separator from './Separator.vue'
+
+describe('Separator', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Separator, { attachTo: document.body })
+        const classes = wrapper.classes()
+        expect(classes).toContain('shrink-0')
+        expect(classes).toContain('bg-brutal-fg')
+        expect(classes).toContain('h-[3px]')
+        expect(classes).toContain('w-full')
+    })
+
+    it('has separator role when decorative is false', () => {
+        const wrapper = mount(Separator, {
+            props: { decorative: false },
+            attachTo: document.body,
+        })
+        expect(wrapper.attributes('role')).toBe('separator')
+    })
+
+    it('has none role when decorative is true', () => {
+        const wrapper = mount(Separator, {
+            props: { decorative: true },
+            attachTo: document.body,
+        })
+        expect(wrapper.attributes('role')).toBe('none')
+    })
+
+    it('has horizontal data-orientation by default', () => {
+        const wrapper = mount(Separator, { attachTo: document.body })
+        expect(wrapper.attributes('data-orientation')).toBe('horizontal')
+    })
+
+    it('applies vertical orientation classes', () => {
+        const wrapper = mount(Separator, {
+            props: { orientation: 'vertical' },
+            attachTo: document.body,
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('h-full')
+        expect(classes).toContain('w-[3px]')
+    })
+
+    it('has vertical data-orientation when set', () => {
+        const wrapper = mount(Separator, {
+            props: { orientation: 'vertical' },
+            attachTo: document.body,
+        })
+        expect(wrapper.attributes('data-orientation')).toBe('vertical')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Separator, {
+            props: { class: 'my-separator' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('my-separator')
+    })
+
+    it('has data-orientation when decorative is false', () => {
+        const wrapper = mount(Separator, {
+            props: { decorative: false },
+            attachTo: document.body,
+        })
+        expect(wrapper.attributes('data-orientation')).toBe('horizontal')
+    })
+})
diff --git a/packages/ui/src/components/settings-page/SettingsPage.vue b/packages/ui/src/components/settings-page/SettingsPage.vue
new file mode 100644
index 0000000..58649c3
--- /dev/null
+++ b/packages/ui/src/components/settings-page/SettingsPage.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { TabsRoot } from 'reka-ui'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import TabsList from '../tabs/TabsList.vue'
+import TabsTrigger from '../tabs/TabsTrigger.vue'
+import TabsContent from '../tabs/TabsContent.vue'
+import Card from '../card/Card.vue'
+import CardHeader from '../card/CardHeader.vue'
+import CardContent from '../card/CardContent.vue'
+import CardTitle from '../card/CardTitle.vue'
+import Input from '../input/Input.vue'
+import Switch from '../switch/Switch.vue'
+import Button from '../button/Button.vue'
+import Separator from '../separator/Separator.vue'
+
+export interface SettingsTab {
+    label: string
+    value: string
+}
+
+interface SettingsPageProps {
+    title?: string
+    tabs?: SettingsTab[]
+    defaultTab?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<SettingsPageProps>(), {
+    title: undefined,
+    tabs: () => [],
+    defaultTab: undefined,
+    class: '',
+})
+
+const emit = defineEmits<{
+    save: [payload: { tab: string; values: Record<string, unknown> }]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('settingsPage.defaultTitle'))
+const resolvedSaveText = computed(() => t('settingsPage.saveText'))
+const resolvedNameLabel = computed(() => t('settingsPage.nameLabel'))
+const resolvedNamePlaceholder = computed(() => t('settingsPage.namePlaceholder'))
+const resolvedNotificationsLabel = computed(() => t('settingsPage.notificationsLabel'))
+
+const activeTab = ref(props.defaultTab ?? (props.tabs.length > 0 ? props.tabs[0].value : ''))
+
+const formValues = ref<Record<string, Record<string, unknown>>>({})
+
+function getTabValues(tabValue: string): Record<string, unknown> {
+    return formValues.value[tabValue] ?? {}
+}
+
+function setTabValue(tabValue: string, key: string, value: unknown) {
+    if (!formValues.value[tabValue]) {
+        formValues.value[tabValue] = {}
+    }
+    formValues.value[tabValue][key] = value
+}
+
+function handleSave() {
+    emit('save', {
+        tab: activeTab.value,
+        values: getTabValues(activeTab.value),
+    })
+}
+
+const rootClasses = computed(() =>
+    cn('min-h-screen bg-brutal-bg p-4 sm:p-8', props.class)
+)
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="w-full max-w-3xl mx-auto">
+            <slot name="header">
+                <div class="mb-8">
+                    <h1 class="text-3xl font-black tracking-tight">
+                        {{ resolvedTitle }}
+                    </h1>
+                </div>
+            </slot>
+
+            <slot>
+                <TabsRoot v-model="activeTab" :default-value="props.defaultTab">
+                    <TabsList class="w-full">
+                        <TabsTrigger
+                            v-for="tab in props.tabs"
+                            :key="tab.value"
+                            :value="tab.value"
+                        >
+                            {{ tab.label }}
+                        </TabsTrigger>
+                    </TabsList>
+
+                    <TabsContent
+                        v-for="tab in tabs"
+                        :key="tab.value"
+                        :value="tab.value"
+                    >
+                        <Card variant="flat">
+                            <CardHeader>
+                                <CardTitle>{{ tab.label }}</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div class="space-y-6">
+                                    <slot :name="`tab-${tab.value}`" :values="getTabValues(tab.value)" :set-value="(key: string, val: unknown) => setTabValue(tab.value, key, val)">
+                                        <div class="space-y-4">
+                                            <div class="flex items-center justify-between">
+                                                <label class="font-bold text-sm" :for="`setting-${tab.value}-name`">{{ resolvedNameLabel }}</label>
+                                                <Input
+                                                    :id="`setting-${tab.value}-name`"
+                                                    :model-value="String(getTabValues(tab.value).name ?? '')"
+                                                    :placeholder="resolvedNamePlaceholder"
+                                                    class="max-w-xs"
+                                                    @update:model-value="setTabValue(tab.value, 'name', $event)"
+                                                />
+                                            </div>
+                                            <Separator />
+                                            <div class="flex items-center justify-between">
+                                                <label class="font-bold text-sm" :for="`setting-${tab.value}-notifications`">{{ resolvedNotificationsLabel }}</label>
+                                                <Switch
+                                                    :model-value="Boolean(getTabValues(tab.value).notifications ?? false)"
+                                                    @update:model-value="setTabValue(tab.value, 'notifications', $event)"
+                                                />
+                                            </div>
+                                        </div>
+                                    </slot>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </TabsContent>
+                </TabsRoot>
+
+                <div class="mt-6 flex justify-end">
+                    <Button variant="primary" @click="handleSave">
+                        {{ resolvedSaveText }}
+                    </Button>
+                </div>
+            </slot>
+
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/settings-page/settings-page.test.ts b/packages/ui/src/components/settings-page/settings-page.test.ts
new file mode 100644
index 0000000..0ac6291
--- /dev/null
+++ b/packages/ui/src/components/settings-page/settings-page.test.ts
@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import SettingsPage from './SettingsPage.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockTabs = [
+    { label: 'Profile', value: 'profile' },
+    { label: 'Notifications', value: 'notifications' },
+    { label: 'Security', value: 'security' },
+]
+
+describe('SettingsPage', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SettingsPage, { ...localeProvide })
+        expect(wrapper.find('h1').exists()).toBe(true)
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { title: 'My Settings' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h1').text()).toBe('My Settings')
+    })
+
+    it('renders tab triggers', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { tabs: mockTabs },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Profile')
+        expect(wrapper.text()).toContain('Notifications')
+        expect(wrapper.text()).toContain('Security')
+    })
+
+    it('renders save button', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { tabs: mockTabs },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const saveButton = buttons.find(b => b.text().includes('Save Changes'))
+        expect(saveButton).toBeTruthy()
+    })
+
+    it('emits save event when save button is clicked', async () => {
+        const wrapper = mount(SettingsPage, {
+            props: { tabs: mockTabs },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const saveButton = buttons.find(b => b.text().includes('Save Changes'))
+        await saveButton!.trigger('click')
+        expect(wrapper.emitted('save')).toBeTruthy()
+        expect(wrapper.emitted('save')![0][0]).toHaveProperty('tab')
+        expect(wrapper.emitted('save')![0][0]).toHaveProperty('values')
+    })
+
+    it('renders form fields in tab content', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { tabs: mockTabs },
+            ...localeProvide,
+        })
+        expect(wrapper.find('input').exists()).toBe(true)
+    })
+
+    it('renders switch in tab content', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { tabs: mockTabs },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[role="switch"]').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { class: 'my-settings' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-settings')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(SettingsPage, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(SettingsPage, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(SettingsPage, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+
+    it('renders with empty tabs array', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { tabs: [] },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h1').exists()).toBe(true)
+    })
+
+    it('uses defaultTab prop', () => {
+        const wrapper = mount(SettingsPage, {
+            props: { tabs: mockTabs, defaultTab: 'notifications' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Profile')
+        expect(wrapper.text()).toContain('Notifications')
+    })
+})
diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
deleted file mode 100644
index d1a4b34..0000000
--- a/packages/ui/src/components/sheet.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-
-import { cn } from '../lib/utils';
-
-const Sheet = SheetPrimitive.Root;
-const SheetTrigger = SheetPrimitive.Trigger;
-const SheetClose = SheetPrimitive.Close;
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-    <SheetPrimitive.Overlay
-        ref={ref}
-        className={cn(
-            'fixed inset-0 z-50 bg-black/50',
-            'data-[state=open]:animate-in data-[state=closed]:animate-out',
-            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-            className
-        )}
-        {...props}
-    />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-    'fixed z-50 gap-4 bg-brutal-bg p-6 border-brutal border-3 text-brutal-fg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-    {
-        variants: {
-            side: {
-                top: 'inset-x-0 top-0 border-b-3 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-                bottom: 'inset-x-0 bottom-0 border-t-3 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-                left: 'inset-y-0 left-0 h-full w-3/4 border-r-3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
-                right: 'inset-y-0 right-0 h-full w-3/4 border-l-3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-            },
-        },
-        defaultVariants: {
-            side: 'right',
-        },
-    }
-);
-
-interface SheetContentProps
-    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-        VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Content>,
-    SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-    <SheetPortal>
-        <SheetOverlay />
-        <SheetPrimitive.Content
-            ref={ref}
-            className={cn(sheetVariants({ side }), className)}
-            {...props}
-        >
-            {children}
-            <SheetPrimitive.Close
-                className={cn(
-                    'absolute right-4 top-4',
-                    'h-8 w-8 flex items-center justify-center',
-                    'border-3 border-brutal bg-brutal-bg text-brutal-fg',
-                    'shadow-brutal-sm',
-                    'transition-all duration-150',
-                    'hover:bg-brutal-destructive hover:text-brutal-fg',
-                    'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',
-                    'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
-                    'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'
-                )}
-            >
-                <X className="h-4 w-4 stroke-[3]" />
-                <span className="sr-only">Close</span>
-            </SheetPrimitive.Close>
-        </SheetPrimitive.Content>
-    </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', className)}
-        {...props}
-    />
-);
-SheetHeader.displayName = 'SheetHeader';
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal',
-            className
-        )}
-        {...props}
-    />
-);
-SheetFooter.displayName = 'SheetFooter';
-
-const SheetTitle = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <SheetPrimitive.Title
-        ref={ref}
-        className={cn('text-lg font-black tracking-tight text-brutal-fg', className)}
-        {...props}
-    />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-    React.ElementRef<typeof SheetPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <SheetPrimitive.Description
-        ref={ref}
-        className={cn('text-sm text-gray-600 dark:text-gray-400 font-medium', className)}
-        {...props}
-    />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-    Sheet,
-    SheetPortal,
-    SheetOverlay,
-    SheetTrigger,
-    SheetClose,
-    SheetContent,
-    SheetHeader,
-    SheetFooter,
-    SheetTitle,
-    SheetDescription,
-};
diff --git a/packages/ui/src/components/sheet/SheetContent.vue b/packages/ui/src/components/sheet/SheetContent.vue
new file mode 100644
index 0000000..e1b1682
--- /dev/null
+++ b/packages/ui/src/components/sheet/SheetContent.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    DialogPortal as DialogPortalPrimitive,
+    DialogOverlay as DialogOverlayPrimitive,
+    DialogContent as DialogContentPrimitive,
+    DialogClose as DialogClosePrimitive,
+} from 'reka-ui'
+import { type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { sheetVariants } from './sheet-variants'
+import { useLocale } from '@/composables/useLocale'
+
+type SheetVariantProps = VariantProps<typeof sheetVariants>
+
+interface SheetContentProps {
+    side?: NonNullable<SheetVariantProps['side']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+    side: 'right',
+    class: '',
+})
+
+const { t } = useLocale()
+
+const overlayClasses = computed(() =>
+    cn(
+        'fixed inset-0 z-50 bg-brutal-overlay',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+    )
+)
+
+const contentClasses = computed(() =>
+    cn(sheetVariants({ side: props.side }), props.class)
+)
+
+const closeClasses = computed(() =>
+    cn(
+        'absolute right-4 top-4',
+        'h-8 w-8 flex items-center justify-center',
+        'border-3 border-brutal bg-brutal-bg text-brutal-fg',
+        'shadow-brutal-sm',
+        'transition-all duration-150',
+        'hover:bg-brutal-destructive hover:text-brutal-fg',
+        'hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'
+    )
+)
+</script>
+
+<template>
+    <DialogPortalPrimitive>
+        <DialogOverlayPrimitive :class="overlayClasses" />
+        <DialogContentPrimitive :class="contentClasses">
+            <slot />
+            <DialogClosePrimitive :class="closeClasses">
+                <X class="h-4 w-4 stroke-[3]" />
+                <span class="sr-only">{{ t('sheet.close') }}</span>
+            </DialogClosePrimitive>
+        </DialogContentPrimitive>
+    </DialogPortalPrimitive>
+</template>
diff --git a/packages/ui/src/components/sheet/SheetDescription.vue b/packages/ui/src/components/sheet/SheetDescription.vue
new file mode 100644
index 0000000..9dfebc6
--- /dev/null
+++ b/packages/ui/src/components/sheet/SheetDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogDescription as DialogDescriptionPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface SheetDescriptionProps {
+    class?: string
+}
+
+const props = defineProps<SheetDescriptionProps>()
+
+const classes = computed(() =>
+    cn('text-sm text-brutal-muted-foreground font-medium', props.class)
+)
+</script>
+
+<template>
+    <DialogDescriptionPrimitive :class="classes">
+        <slot />
+    </DialogDescriptionPrimitive>
+</template>
diff --git a/packages/ui/src/components/sheet/SheetFooter.vue b/packages/ui/src/components/sheet/SheetFooter.vue
new file mode 100644
index 0000000..6f9854e
--- /dev/null
+++ b/packages/ui/src/components/sheet/SheetFooter.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface SheetFooterProps {
+    class?: string
+}
+
+const props = defineProps<SheetFooterProps>()
+
+const classes = computed(() =>
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-3 pt-4 border-t-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/sheet/SheetHeader.vue b/packages/ui/src/components/sheet/SheetHeader.vue
new file mode 100644
index 0000000..6b196d2
--- /dev/null
+++ b/packages/ui/src/components/sheet/SheetHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface SheetHeaderProps {
+    class?: string
+}
+
+const props = defineProps<SheetHeaderProps>()
+
+const classes = computed(() =>
+    cn('flex flex-col space-y-2 pb-4 border-b-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/sheet/SheetTitle.vue b/packages/ui/src/components/sheet/SheetTitle.vue
new file mode 100644
index 0000000..93b718b
--- /dev/null
+++ b/packages/ui/src/components/sheet/SheetTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogTitle as DialogTitlePrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface SheetTitleProps {
+    class?: string
+}
+
+const props = defineProps<SheetTitleProps>()
+
+const classes = computed(() =>
+    cn('text-lg font-black tracking-tight text-brutal-fg', props.class)
+)
+</script>
+
+<template>
+    <DialogTitlePrimitive :class="classes">
+        <slot />
+    </DialogTitlePrimitive>
+</template>
diff --git a/packages/ui/src/components/sheet/sheet-variants.ts b/packages/ui/src/components/sheet/sheet-variants.ts
new file mode 100644
index 0000000..051c171
--- /dev/null
+++ b/packages/ui/src/components/sheet/sheet-variants.ts
@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority'
+
+export const sheetVariants = cva(
+    'fixed z-50 gap-4 bg-brutal-bg p-6 border-brutal border-3 rounded-brutal shadow-brutal-xl text-brutal-fg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    {
+        variants: {
+            side: {
+                top: 'inset-x-0 top-0 border-b-3 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+                bottom: 'inset-x-0 bottom-0 border-t-3 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+                left: 'inset-y-0 left-0 h-full w-3/4 border-r-3 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+                right: 'inset-y-0 right-0 h-full w-3/4 border-l-3 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+            },
+        },
+        defaultVariants: {
+            side: 'right',
+        },
+    }
+)
diff --git a/packages/ui/src/components/sheet/sheet.test.ts b/packages/ui/src/components/sheet/sheet.test.ts
new file mode 100644
index 0000000..27dfdbb
--- /dev/null
+++ b/packages/ui/src/components/sheet/sheet.test.ts
@@ -0,0 +1,151 @@
+import { mount } from '@vue/test-utils'
+import SheetContent from './SheetContent.vue'
+import SheetHeader from './SheetHeader.vue'
+import SheetFooter from './SheetFooter.vue'
+import SheetTitle from './SheetTitle.vue'
+import SheetDescription from './SheetDescription.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('SheetContent', () => {
+    const contentStubs = {
+        DialogPortal: primitiveStub,
+        DialogOverlay: primitiveStub,
+        DialogContent: {
+            template: '<div data-testid="sheet-content"><slot /></div>',
+        },
+        DialogClose: primitiveStub,
+    }
+
+    it('renders with default side (right) variant classes', () => {
+        const wrapper = mount(SheetContent, {
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="sheet-content"]')
+        expect(content.classes()).toContain('border-3')
+        expect(content.classes()).toContain('border-brutal')
+        expect(content.classes()).toContain('bg-brutal-bg')
+        expect(content.classes()).toContain('text-brutal-fg')
+        expect(content.classes()).toContain('right-0')
+        expect(content.classes()).toContain('border-l-3')
+    })
+
+    it('renders with top side variant classes', () => {
+        const wrapper = mount(SheetContent, {
+            props: { side: 'top' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="sheet-content"]')
+        expect(content.classes()).toContain('top-0')
+        expect(content.classes()).toContain('border-b-3')
+    })
+
+    it('renders with bottom side variant classes', () => {
+        const wrapper = mount(SheetContent, {
+            props: { side: 'bottom' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="sheet-content"]')
+        expect(content.classes()).toContain('bottom-0')
+        expect(content.classes()).toContain('border-t-3')
+    })
+
+    it('renders with left side variant classes', () => {
+        const wrapper = mount(SheetContent, {
+            props: { side: 'left' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="sheet-content"]')
+        expect(content.classes()).toContain('left-0')
+        expect(content.classes()).toContain('border-r-3')
+    })
+
+    it('renders with right side variant classes', () => {
+        const wrapper = mount(SheetContent, {
+            props: { side: 'right' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="sheet-content"]')
+        expect(content.classes()).toContain('right-0')
+        expect(content.classes()).toContain('border-l-3')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SheetContent, {
+            props: { class: 'custom-sheet' },
+            global: { stubs: contentStubs },
+        })
+        const content = wrapper.find('[data-testid="sheet-content"]')
+        expect(content.classes()).toContain('custom-sheet')
+    })
+})
+
+describe('SheetHeader', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(SheetHeader, {
+            slots: { default: 'Header text' },
+        })
+        expect(wrapper.text()).toBe('Header text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SheetHeader, {
+            props: { class: 'custom-header' },
+        })
+        expect(wrapper.classes()).toContain('custom-header')
+    })
+})
+
+describe('SheetFooter', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(SheetFooter, {
+            slots: { default: 'Footer text' },
+        })
+        expect(wrapper.text()).toBe('Footer text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SheetFooter, {
+            props: { class: 'custom-footer' },
+        })
+        expect(wrapper.classes()).toContain('custom-footer')
+    })
+})
+
+describe('SheetTitle', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(SheetTitle, {
+            slots: { default: 'Title text' },
+            global: { stubs: { DialogTitle: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Title text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SheetTitle, {
+            props: { class: 'custom-title' },
+            global: { stubs: { DialogTitle: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-title')
+    })
+})
+
+describe('SheetDescription', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(SheetDescription, {
+            slots: { default: 'Description text' },
+            global: { stubs: { DialogDescription: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Description text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SheetDescription, {
+            props: { class: 'custom-desc' },
+            global: { stubs: { DialogDescription: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-desc')
+    })
+})
diff --git a/packages/ui/src/components/skeleton.tsx b/packages/ui/src/components/skeleton.tsx
deleted file mode 100644
index 72722bf..0000000
--- a/packages/ui/src/components/skeleton.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const skeletonVariants = cva(['animate-pulse', 'border-3 border-brutal'], {
-    variants: {
-        variant: {
-            default: 'bg-gray-200 dark:bg-gray-800',
-            primary: 'bg-[#FF6B6B]/30',
-            secondary: 'bg-[#4ECDC4]/30',
-            accent: 'bg-[#FFE66D]/30',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
-});
-
-export interface SkeletonProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof skeletonVariants> {}
-
-const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
-    ({ className, variant, ...props }, ref) => {
-        return (
-            <div ref={ref} className={cn(skeletonVariants({ variant, className }))} {...props} />
-        );
-    }
-);
-Skeleton.displayName = 'Skeleton';
-
-const SkeletonText = React.forwardRef<
-    HTMLDivElement,
-    SkeletonProps & { lines?: number; lastLineWidth?: string }
->(({ className, lines = 3, lastLineWidth = '60%', variant, ...props }, ref) => {
-    return (
-        <div ref={ref} className={cn('space-y-2', className)} {...props}>
-            {Array.from({ length: lines }).map((_, index) => (
-                <Skeleton
-                    key={index}
-                    variant={variant}
-                    className="h-4"
-                    style={{
-                        width: index === lines - 1 ? lastLineWidth : '100%',
-                    }}
-                />
-            ))}
-        </div>
-    );
-});
-SkeletonText.displayName = 'SkeletonText';
-
-const SkeletonAvatar = React.forwardRef<
-    HTMLDivElement,
-    SkeletonProps & { size?: 'sm' | 'default' | 'lg' | 'xl' }
->(({ className, size = 'default', variant, ...props }, ref) => {
-    const sizeClasses = {
-        sm: 'h-8 w-8',
-        default: 'h-10 w-10',
-        lg: 'h-12 w-12',
-        xl: 'h-16 w-16',
-    };
-
-    return (
-        <Skeleton
-            ref={ref}
-            variant={variant}
-            className={cn(sizeClasses[size], className)}
-            {...props}
-        />
-    );
-});
-SkeletonAvatar.displayName = 'SkeletonAvatar';
-
-const SkeletonCard = React.forwardRef<HTMLDivElement, SkeletonProps>(
-    ({ className, variant, ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                className={cn(
-                    'p-4 border-3 border-brutal shadow-brutal',
-                    'bg-white dark:bg-gray-900',
-                    className
-                )}
-                {...props}
-            >
-                <div className="space-y-4">
-                    <Skeleton variant={variant} className="h-32 w-full" />
-                    <Skeleton variant={variant} className="h-6 w-3/4" />
-                    <SkeletonText variant={variant} lines={2} />
-                    <div className="flex gap-2">
-                        <Skeleton variant={variant} className="h-10 w-24" />
-                        <Skeleton variant={variant} className="h-10 w-24" />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-);
-SkeletonCard.displayName = 'SkeletonCard';
-
-const SkeletonTable = React.forwardRef<
-    HTMLDivElement,
-    SkeletonProps & { rows?: number; columns?: number }
->(({ className, rows = 5, columns = 4, variant, ...props }, ref) => {
-    return (
-        <div
-            ref={ref}
-            className={cn('border-3 border-brutal overflow-hidden', className)}
-            {...props}
-        >
-            <div className="flex bg-[#FFE66D] border-b-3 border-brutal">
-                {Array.from({ length: columns }).map((_, index) => (
-                    <div
-                        key={`header-${index}`}
-                        className={cn(
-                            'flex-1 p-3',
-                            index < columns - 1 && 'border-r-3 border-brutal'
-                        )}
-                    >
-                        <Skeleton variant={variant} className="h-5 w-3/4 bg-black/20" />
-                    </div>
-                ))}
-            </div>
-            {Array.from({ length: rows }).map((_, rowIndex) => (
-                <div
-                    key={`row-${rowIndex}`}
-                    className={cn(
-                        'flex',
-                        rowIndex < rows - 1 && 'border-b-3 border-brutal',
-                        rowIndex % 2 === 1 && 'bg-gray-50 dark:bg-gray-800'
-                    )}
-                >
-                    {Array.from({ length: columns }).map((_, colIndex) => (
-                        <div
-                            key={`cell-${rowIndex}-${colIndex}`}
-                            className={cn(
-                                'flex-1 p-3',
-                                colIndex < columns - 1 &&
-                                    'border-r-3 border-brutal'
-                            )}
-                        >
-                            <Skeleton
-                                variant={variant}
-                                className="h-4"
-                                style={{ width: `${60 + Math.random() * 30}%` }}
-                            />
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </div>
-    );
-});
-SkeletonTable.displayName = 'SkeletonTable';
-
-export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonTable, skeletonVariants };
diff --git a/packages/ui/src/components/skeleton/Skeleton.vue b/packages/ui/src/components/skeleton/Skeleton.vue
new file mode 100644
index 0000000..e44284e
--- /dev/null
+++ b/packages/ui/src/components/skeleton/Skeleton.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { skeletonVariants } from './skeleton-variants'
+
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>
+
+interface SkeletonProps {
+    variant?: NonNullable<SkeletonVariantProps['variant']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<SkeletonProps>(), {
+    variant: 'default',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(skeletonVariants({ variant: props.variant }), props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/skeleton/SkeletonAvatar.vue b/packages/ui/src/components/skeleton/SkeletonAvatar.vue
new file mode 100644
index 0000000..8d6e61a
--- /dev/null
+++ b/packages/ui/src/components/skeleton/SkeletonAvatar.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { skeletonVariants } from './skeleton-variants'
+import Skeleton from './Skeleton.vue'
+
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>
+
+interface SkeletonAvatarProps {
+    variant?: NonNullable<SkeletonVariantProps['variant']>
+    size?: 'sm' | 'default' | 'lg' | 'xl'
+    class?: string
+}
+
+const props = withDefaults(defineProps<SkeletonAvatarProps>(), {
+    variant: 'default',
+    size: 'default',
+    class: '',
+})
+
+const sizeClasses: Record<string, string> = {
+    sm: 'h-8 w-8',
+    default: 'h-10 w-10',
+    lg: 'h-12 w-12',
+    xl: 'h-16 w-16',
+}
+
+const classes = computed(() => cn(sizeClasses[props.size], props.class))
+</script>
+
+<template>
+    <Skeleton :variant="variant" :class="classes" />
+</template>
diff --git a/packages/ui/src/components/skeleton/SkeletonCard.vue b/packages/ui/src/components/skeleton/SkeletonCard.vue
new file mode 100644
index 0000000..cb50966
--- /dev/null
+++ b/packages/ui/src/components/skeleton/SkeletonCard.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { skeletonVariants } from './skeleton-variants'
+import Skeleton from './Skeleton.vue'
+import SkeletonText from './SkeletonText.vue'
+
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>
+
+interface SkeletonCardProps {
+    variant?: NonNullable<SkeletonVariantProps['variant']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<SkeletonCardProps>(), {
+    variant: 'default',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn('p-4 border-3 border-brutal shadow-brutal bg-brutal-bg', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <div class="space-y-4">
+            <Skeleton :variant="variant" class="h-32 w-full" />
+            <Skeleton :variant="variant" class="h-6 w-3/4" />
+            <SkeletonText :variant="variant" :lines="2" />
+            <div class="flex gap-2">
+                <Skeleton :variant="variant" class="h-10 w-24" />
+                <Skeleton :variant="variant" class="h-10 w-24" />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/skeleton/SkeletonTable.vue b/packages/ui/src/components/skeleton/SkeletonTable.vue
new file mode 100644
index 0000000..4f1f9ce
--- /dev/null
+++ b/packages/ui/src/components/skeleton/SkeletonTable.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { skeletonVariants } from './skeleton-variants'
+import Skeleton from './Skeleton.vue'
+
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>
+
+interface SkeletonTableProps {
+    variant?: NonNullable<SkeletonVariantProps['variant']>
+    rows?: number
+    columns?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<SkeletonTableProps>(), {
+    variant: 'default',
+    rows: 5,
+    columns: 4,
+    class: '',
+})
+
+const DEFAULT_CELL_WIDTH_RATIOS = [0.85, 0.7, 0.9, 0.65]
+const FALLBACK_CELL_WIDTH_RATIO = 0.75
+
+const containerClasses = computed(() =>
+    cn('border-3 border-brutal overflow-hidden', props.class)
+)
+
+const headerCellClasses = computed(() =>
+    Array.from({ length: props.columns }, (_, i) =>
+        cn('flex-1 p-3', i < props.columns - 1 && 'border-r-3 border-brutal')
+    )
+)
+
+const rowClasses = computed(() =>
+    Array.from({ length: props.rows }, (_, i) =>
+        cn('flex', i < props.rows - 1 && 'border-b-3 border-brutal', i % 2 === 0 && 'bg-brutal-muted')
+    )
+)
+
+const cellClasses = computed(() =>
+    Array.from({ length: props.columns }, (_, i) =>
+        cn('flex-1 p-3', i < props.columns - 1 && 'border-r-3 border-brutal')
+    )
+)
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <div class="flex bg-brutal-accent border-b-3 border-brutal">
+            <div
+                v-for="(headerClass, colIndex) in headerCellClasses"
+                :key="`header-${colIndex}`"
+                :class="headerClass"
+            >
+                <Skeleton :variant="variant" class="h-5 w-3/4 bg-brutal-fg/20" />
+            </div>
+        </div>
+        <div
+            v-for="(rowClass, rowIndex) in rowClasses"
+            :key="`row-${rowIndex}`"
+            :class="rowClass"
+        >
+            <div
+                v-for="(cellClass, colIndex) in cellClasses"
+                :key="`cell-${rowIndex}-${colIndex}`"
+                :class="cellClass"
+            >
+                <Skeleton
+                    :variant="variant"
+                    class="h-4"
+                    :style="{ width: `${(DEFAULT_CELL_WIDTH_RATIOS[colIndex % DEFAULT_CELL_WIDTH_RATIOS.length] ?? FALLBACK_CELL_WIDTH_RATIO) * 100}%` }"
+                />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/skeleton/SkeletonText.vue b/packages/ui/src/components/skeleton/SkeletonText.vue
new file mode 100644
index 0000000..fb83049
--- /dev/null
+++ b/packages/ui/src/components/skeleton/SkeletonText.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { skeletonVariants } from './skeleton-variants'
+import Skeleton from './Skeleton.vue'
+
+type SkeletonVariantProps = VariantProps<typeof skeletonVariants>
+
+interface SkeletonTextProps {
+    variant?: NonNullable<SkeletonVariantProps['variant']>
+    lines?: number
+    lastLineWidth?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<SkeletonTextProps>(), {
+    variant: 'default',
+    lines: 3,
+    lastLineWidth: '60%',
+    class: '',
+})
+
+const classes = computed(() => cn('space-y-2', props.class))
+</script>
+
+<template>
+    <div :class="classes">
+        <Skeleton
+            v-for="index in props.lines"
+            :key="index"
+            :variant="variant"
+            class="h-4"
+            :style="{ width: index === props.lines ? props.lastLineWidth : '100%' }"
+        />
+    </div>
+</template>
diff --git a/packages/ui/src/components/skeleton/skeleton-variants.ts b/packages/ui/src/components/skeleton/skeleton-variants.ts
new file mode 100644
index 0000000..82c76ce
--- /dev/null
+++ b/packages/ui/src/components/skeleton/skeleton-variants.ts
@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority'
+
+export const skeletonVariants = cva(
+    ['animate-pulse', 'border-3 border-brutal'],
+    {
+        variants: {
+            variant: {
+                default: 'bg-brutal-muted',
+                primary: 'bg-brutal-primary/30',
+                secondary: 'bg-brutal-secondary/30',
+                accent: 'bg-brutal-accent/30',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/skeleton/skeleton.test.ts b/packages/ui/src/components/skeleton/skeleton.test.ts
new file mode 100644
index 0000000..bbf926b
--- /dev/null
+++ b/packages/ui/src/components/skeleton/skeleton.test.ts
@@ -0,0 +1,188 @@
+import { mount } from '@vue/test-utils'
+import Skeleton from './Skeleton.vue'
+import SkeletonText from './SkeletonText.vue'
+import SkeletonAvatar from './SkeletonAvatar.vue'
+import SkeletonCard from './SkeletonCard.vue'
+import SkeletonTable from './SkeletonTable.vue'
+
+describe('Skeleton', () => {
+    it('renders with default variant', () => {
+        const wrapper = mount(Skeleton)
+        const classes = wrapper.classes()
+        expect(classes).toContain('animate-pulse')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('bg-brutal-muted')
+    })
+
+    it('applies primary variant classes', () => {
+        const wrapper = mount(Skeleton, { props: { variant: 'primary' } })
+        expect(wrapper.classes()).toContain('bg-brutal-primary/30')
+    })
+
+    it('applies secondary variant classes', () => {
+        const wrapper = mount(Skeleton, { props: { variant: 'secondary' } })
+        expect(wrapper.classes()).toContain('bg-brutal-secondary/30')
+    })
+
+    it('applies accent variant classes', () => {
+        const wrapper = mount(Skeleton, { props: { variant: 'accent' } })
+        expect(wrapper.classes()).toContain('bg-brutal-accent/30')
+    })
+
+    it('has animate-pulse class', () => {
+        const wrapper = mount(Skeleton)
+        expect(wrapper.classes()).toContain('animate-pulse')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Skeleton, {
+            slots: { default: 'Loading...' },
+        })
+        expect(wrapper.text()).toContain('Loading...')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(Skeleton, {
+            props: { class: 'h-4 w-full' },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('h-4')
+        expect(classes).toContain('w-full')
+    })
+})
+
+describe('SkeletonText', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SkeletonText)
+        expect(wrapper.classes()).toContain('space-y-2')
+        const skeletons = wrapper.findAllComponents(Skeleton)
+        expect(skeletons.length).toBe(3)
+    })
+
+    it('renders correct number of lines', () => {
+        const wrapper = mount(SkeletonText, { props: { lines: 5 } })
+        const skeletons = wrapper.findAllComponents(Skeleton)
+        expect(skeletons.length).toBe(5)
+    })
+
+    it('applies variant to child skeletons', () => {
+        const wrapper = mount(SkeletonText, { props: { variant: 'primary' } })
+        const skeletons = wrapper.findAllComponents(Skeleton)
+        skeletons.forEach(sk => {
+            expect(sk.classes()).toContain('bg-brutal-primary/30')
+        })
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(SkeletonText, {
+            props: { class: 'custom-text' },
+        })
+        expect(wrapper.classes()).toContain('custom-text')
+    })
+})
+
+describe('SkeletonAvatar', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SkeletonAvatar)
+        const skeleton = wrapper.findComponent(Skeleton)
+        expect(skeleton.exists()).toBe(true)
+        expect(skeleton.classes()).toContain('h-10')
+        expect(skeleton.classes()).toContain('w-10')
+    })
+
+    it('applies sm size classes', () => {
+        const wrapper = mount(SkeletonAvatar, { props: { size: 'sm' } })
+        const skeleton = wrapper.findComponent(Skeleton)
+        expect(skeleton.classes()).toContain('h-8')
+        expect(skeleton.classes()).toContain('w-8')
+    })
+
+    it('applies lg size classes', () => {
+        const wrapper = mount(SkeletonAvatar, { props: { size: 'lg' } })
+        const skeleton = wrapper.findComponent(Skeleton)
+        expect(skeleton.classes()).toContain('h-12')
+        expect(skeleton.classes()).toContain('w-12')
+    })
+
+    it('applies xl size classes', () => {
+        const wrapper = mount(SkeletonAvatar, { props: { size: 'xl' } })
+        const skeleton = wrapper.findComponent(Skeleton)
+        expect(skeleton.classes()).toContain('h-16')
+        expect(skeleton.classes()).toContain('w-16')
+    })
+
+    it('applies variant to child skeleton', () => {
+        const wrapper = mount(SkeletonAvatar, { props: { variant: 'accent' } })
+        const skeleton = wrapper.findComponent(Skeleton)
+        expect(skeleton.classes()).toContain('bg-brutal-accent/30')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(SkeletonAvatar, {
+            props: { class: 'custom-avatar' },
+        })
+        const skeleton = wrapper.findComponent(Skeleton)
+        expect(skeleton.classes()).toContain('custom-avatar')
+    })
+})
+
+describe('SkeletonCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SkeletonCard)
+        const classes = wrapper.classes()
+        expect(classes).toContain('p-4')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('shadow-brutal')
+        expect(classes).toContain('bg-brutal-bg')
+    })
+
+    it('contains skeleton elements inside', () => {
+        const wrapper = mount(SkeletonCard)
+        const skeletons = wrapper.findAllComponents(Skeleton)
+        expect(skeletons.length).toBeGreaterThanOrEqual(3)
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(SkeletonCard, {
+            props: { class: 'custom-card' },
+        })
+        expect(wrapper.classes()).toContain('custom-card')
+    })
+})
+
+describe('SkeletonTable', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SkeletonTable)
+        const classes = wrapper.classes()
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('overflow-hidden')
+    })
+
+    it('renders default rows and columns', () => {
+        const wrapper = mount(SkeletonTable)
+        const skeletons = wrapper.findAllComponents(Skeleton)
+        const headerSkeletons = 4
+        const bodySkeletons = 5 * 4
+        expect(skeletons.length).toBe(headerSkeletons + bodySkeletons)
+    })
+
+    it('renders custom rows and columns', () => {
+        const wrapper = mount(SkeletonTable, {
+            props: { rows: 3, columns: 2 },
+        })
+        const skeletons = wrapper.findAllComponents(Skeleton)
+        const headerSkeletons = 2
+        const bodySkeletons = 3 * 2
+        expect(skeletons.length).toBe(headerSkeletons + bodySkeletons)
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(SkeletonTable, {
+            props: { class: 'custom-table' },
+        })
+        expect(wrapper.classes()).toContain('custom-table')
+    })
+})
diff --git a/packages/ui/src/components/sketchy-chart/SketchyChart.vue b/packages/ui/src/components/sketchy-chart/SketchyChart.vue
new file mode 100644
index 0000000..54fcdaf
--- /dev/null
+++ b/packages/ui/src/components/sketchy-chart/SketchyChart.vue
@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { sketchyChartVariants } from './sketchy-chart-variants'
+
+interface ChartDataItem {
+    label: string
+    value: number
+}
+
+interface SketchyChartProps {
+    type?: 'line' | 'bar' | 'pie'
+    data?: ChartDataItem[]
+    sketchiness?: number
+    grid?: boolean
+    width?: number
+    height?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<SketchyChartProps>(), {
+    type: 'line',
+    data: () => [],
+    sketchiness: 2,
+    grid: true,
+    width: 600,
+    height: 400,
+    class: '',
+})
+
+// 回退版唯一 ID 保证兼容性
+const getUniqueId = () => {
+    try {
+        const id = useId()
+        return id.replace(/:/g, '-') // 去除 ID 中可能的冒号
+    } catch {
+        return Math.random().toString(36).substring(2, 9)
+    }
+}
+
+const uid = getUniqueId()
+const filterId = `brutal-sketch-filter-${uid}`
+const hatchId = `hatch-pattern-${uid}`
+const { t } = useLocale()
+
+const chartAriaLabel = computed(() => {
+    if (props.type === 'line') return t('sketchyChart.lineAriaLabel')
+    if (props.type === 'bar') return t('sketchyChart.barAriaLabel')
+    return t('sketchyChart.pieAriaLabel')
+})
+
+// 手绘抖动强度对应的基准频率
+const BASE_FREQUENCY_FACTOR = 0.015
+const baseFrequency = computed(() =>
+    (props.sketchiness * BASE_FREQUENCY_FACTOR).toFixed(3)
+)
+
+// 数据预处理（空数组、大容量降采样、负数取绝对值）
+const processedData = computed(() => {
+    if (!props.data || props.data.length === 0) return []
+    
+    // 负数取绝对值
+    let items = props.data.map(d => ({
+        label: d.label,
+        value: Math.abs(d.value)
+    }))
+
+    // 大容量降采样（超过 30 项，隔项采样以防重叠）
+    if (items.length > 30) {
+        const step = Math.ceil(items.length / 30)
+        items = items.filter((_, idx) => idx % step === 0)
+    }
+
+    return items
+})
+
+const CHART_PADDING = { top: 30, right: 30, bottom: 40, left: 60 }
+
+const plotWidth = computed(() => props.width - CHART_PADDING.left - CHART_PADDING.right)
+const plotHeight = computed(() => props.height - CHART_PADDING.top - CHART_PADDING.bottom)
+
+const maxValue = computed(() => {
+    if (processedData.value.length === 0) return 100
+    const max = Math.max(...processedData.value.map(d => d.value))
+    return max === 0 ? 100 : max
+})
+
+// 坐标映射
+const dataToSvgX = (index: number) => {
+    if (processedData.value.length <= 1) return CHART_PADDING.left + plotWidth.value / 2
+    return CHART_PADDING.left + (index / (processedData.value.length - 1)) * plotWidth.value
+}
+
+const dataToSvgY = (value: number) => {
+    return CHART_PADDING.top + plotHeight.value - (value / maxValue.value) * plotHeight.value
+}
+
+// 折线图 Paths
+const linePath = computed(() => {
+    if (processedData.value.length === 0) return ''
+    return processedData.value
+        .map((d, i) => `${i === 0 ? 'M' : 'L'} ${dataToSvgX(i)} ${dataToSvgY(d.value)}`)
+        .join(' ')
+})
+
+// 折线图填充区域（Neobrutalist 阴影面效果）
+const lineAreaPath = computed(() => {
+    if (processedData.value.length === 0) return ''
+    const startX = dataToSvgX(0)
+    const endX = dataToSvgX(processedData.value.length - 1)
+    const bottomY = CHART_PADDING.top + plotHeight.value
+    return `${linePath.value} L ${endX} ${bottomY} L ${startX} ${bottomY} Z`
+})
+
+// 柱状图各 Column 算定
+const BAR_GAP_RATIO = 0.25
+const barWidth = computed(() => {
+    const totalBars = processedData.value.length
+    if (totalBars === 0) return 0
+    return (plotWidth.value / totalBars) * (1 - BAR_GAP_RATIO)
+})
+
+const getBarX = (index: number) => {
+    const totalBars = processedData.value.length
+    const slotWidth = plotWidth.value / totalBars
+    return CHART_PADDING.left + index * slotWidth + (slotWidth - barWidth.value) / 2
+}
+
+// 饼图计算
+const PIE_COLORS = [
+    'var(--brutal-primary, #FF6B6B)',
+    'var(--brutal-secondary, #4ECDC4)',
+    'var(--brutal-accent, #FFE66D)',
+    'var(--brutal-info, #4A90D9)',
+    'var(--brutal-success, #7FB069)',
+    'var(--brutal-destructive, #EF476F)',
+]
+
+const pieSlices = computed(() => {
+    if (processedData.value.length === 0) return []
+    const total = processedData.value.reduce((sum, d) => sum + d.value, 0)
+    if (total === 0) return []
+    const cx = props.width / 2
+    const cy = props.height / 2
+    const radius = Math.min(cx, cy) * 0.7
+    let currentAngle = -Math.PI / 2
+    return processedData.value.map((d, i) => {
+        const sliceAngle = (d.value / total) * Math.PI * 2
+        const startAngle = currentAngle
+        const endAngle = currentAngle + sliceAngle
+        const largeArc = sliceAngle > Math.PI ? 1 : 0
+        const x1 = cx + radius * Math.cos(startAngle)
+        const y1 = cy + radius * Math.sin(startAngle)
+        const x2 = cx + radius * Math.cos(endAngle)
+        const y2 = cy + radius * Math.sin(endAngle)
+        const path = [
+            `M ${cx} ${cy}`,
+            `L ${x1} ${y1}`,
+            `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`,
+            'Z',
+        ].join(' ')
+        currentAngle = endAngle
+        return {
+            path,
+            color: PIE_COLORS[i % PIE_COLORS.length],
+            label: d.label,
+            midAngle: (startAngle + endAngle) / 2,
+            cx,
+            cy,
+            labelRadius: radius * 0.55,
+        }
+    })
+})
+
+// 自动生成 Y 轴 5 等分刻度
+const yTicks = computed(() => {
+    const ticks = []
+    const step = maxValue.value / 4
+    for (let i = 0; i <= 4; i++) {
+        const val = Math.round(step * i)
+        ticks.push({
+            value: val,
+            y: dataToSvgY(val)
+        })
+    }
+    return ticks
+})
+
+const containerClasses = computed(() =>
+    cn(sketchyChartVariants(), props.class)
+)
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <svg
+            role="img"
+            :aria-label="chartAriaLabel"
+            :viewBox="`0 0 ${width} ${height}`"
+            class="w-full h-auto overflow-visible select-none"
+        >
+            <title>{{ chartAriaLabel }}</title>
+            
+            <defs>
+                <!-- 手绘波动滤镜 -->
+                <filter :id="filterId">
+                    <feTurbulence
+                        type="fractalNoise"
+                        :baseFrequency="baseFrequency"
+                        numOctaves="3"
+                        result="noise"
+                    />
+                    <feDisplacementMap
+                        in="SourceGraphic"
+                        in2="noise"
+                        :scale="sketchiness"
+                        xChannelSelector="R"
+                        yChannelSelector="G"
+                    />
+                </filter>
+                
+                <!-- 斜向条纹 Hatch Fill -->
+                <pattern
+                    :id="hatchId"
+                    patternUnits="userSpaceOnUse"
+                    width="10"
+                    height="10"
+                    patternTransform="rotate(45)"
+                >
+                    <line
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="10"
+                        stroke="var(--brutal-border-color, #000000)"
+                        stroke-width="2"
+                    />
+                </pattern>
+            </defs>
+
+            <!-- 背景网格线 -->
+            <g v-if="grid" class="chart-grid">
+                <line
+                    v-for="tick in yTicks"
+                    :key="'grid-' + tick.value"
+                    :x1="CHART_PADDING.left"
+                    :y1="tick.y"
+                    :x2="width - CHART_PADDING.right"
+                    :y2="tick.y"
+                    stroke="var(--brutal-muted, #f3f4f6)"
+                    stroke-width="1.5"
+                    stroke-dasharray="4 4"
+                />
+            </g>
+
+            <!-- 坐标轴 -->
+            <g :filter="`url(#${filterId})`" class="chart-axes">
+                <!-- Y 轴 -->
+                <line
+                    :x1="CHART_PADDING.left"
+                    :y1="CHART_PADDING.top"
+                    :x2="CHART_PADDING.left"
+                    :y2="height - CHART_PADDING.bottom"
+                    stroke="var(--brutal-border-color, #000000)"
+                    stroke-width="3"
+                />
+                <!-- X 轴 -->
+                <line
+                    :x1="CHART_PADDING.left"
+                    :y1="height - CHART_PADDING.bottom"
+                    :x2="width - CHART_PADDING.right"
+                    :y2="height - CHART_PADDING.bottom"
+                    stroke="var(--brutal-border-color, #000000)"
+                    stroke-width="3"
+                />
+            </g>
+
+            <!-- 数据图形展示 -->
+            <g :filter="`url(#${filterId})`" class="chart-data">
+                <!-- 1. 折线图 -->
+                <template v-if="type === 'line' && processedData.length > 0">
+                    <!-- 阴影填充区 -->
+                    <path
+                        :d="lineAreaPath"
+                        :fill="`url(#${hatchId})`"
+                        class="opacity-60"
+                    />
+                    <!-- 核心折线 -->
+                    <path
+                        :d="linePath"
+                        fill="none"
+                        stroke="var(--brutal-primary, #FF6B6B)"
+                        stroke-width="4"
+                    />
+                    <!-- 折线拐点圆圈（Brutalist 粗黑边圆圈） -->
+                    <circle
+                        v-for="(d, i) in processedData"
+                        :key="'dot-' + i"
+                        :cx="dataToSvgX(i)"
+                        :cy="dataToSvgY(d.value)"
+                        r="6"
+                        fill="var(--brutal-accent, #FFE66D)"
+                        stroke="var(--brutal-border-color, #000000)"
+                        stroke-width="2.5"
+                    />
+                </template>
+
+                <!-- 2. 柱状图 -->
+                <template v-if="type === 'bar' && processedData.length > 0">
+                    <g v-for="(d, i) in processedData" :key="'bar-' + i">
+                        <!-- 柱体硬影子（Neobrutalist 偏移底色块） -->
+                        <rect
+                            :x="getBarX(i) + 4"
+                            :y="dataToSvgY(d.value) + 4"
+                            :width="barWidth"
+                            :height="height - CHART_PADDING.bottom - dataToSvgY(d.value)"
+                            fill="var(--brutal-border-color, #000000)"
+                        />
+                        <!-- 柱体本体（Hatch 填充 + 粗黑边框） -->
+                        <rect
+                            :x="getBarX(i)"
+                            :y="dataToSvgY(d.value)"
+                            :width="barWidth"
+                            :height="height - CHART_PADDING.bottom - dataToSvgY(d.value)"
+                            :fill="`url(#${hatchId})`"
+                            stroke="var(--brutal-border-color, #000000)"
+                            stroke-width="3"
+                        />
+                    </g>
+                </template>
+
+                <!-- 3. 饼图 -->
+                <template v-if="type === 'pie' && pieSlices.length > 0">
+                    <g v-for="(slice, i) in pieSlices" :key="'pie-' + i">
+                        <path
+                            :d="slice.path"
+                            :fill="slice.color"
+                            stroke="var(--brutal-border-color, #000000)"
+                            stroke-width="3"
+                        />
+                    </g>
+                </template>
+            </g>
+
+            <!-- 坐标轴文本与刻度标签 -->
+            <g class="chart-labels" fill="var(--brutal-fg, #000000)" font-size="12" font-weight="bold">
+                <!-- Y 轴刻度标签 -->
+                <text
+                    v-for="tick in yTicks"
+                    :key="'lbl-y-' + tick.value"
+                    :x="CHART_PADDING.left - 12"
+                    :y="tick.y + 4"
+                    text-anchor="end"
+                >
+                    {{ tick.value }}
+                </text>
+
+                <!-- X 轴刻度标签 -->
+                <text
+                    v-for="(d, i) in processedData"
+                    :key="'lbl-x-' + i"
+                    :x="type === 'line' ? dataToSvgX(i) : getBarX(i) + barWidth / 2"
+                    :y="height - CHART_PADDING.bottom + 20"
+                    text-anchor="middle"
+                >
+                    {{ d.label }}
+                </text>
+            </g>
+        </svg>
+    </div>
+</template>
diff --git a/packages/ui/src/components/sketchy-chart/sketchy-chart-variants.ts b/packages/ui/src/components/sketchy-chart/sketchy-chart-variants.ts
new file mode 100644
index 0000000..7ad569c
--- /dev/null
+++ b/packages/ui/src/components/sketchy-chart/sketchy-chart-variants.ts
@@ -0,0 +1,10 @@
+import { cva } from 'class-variance-authority'
+
+export const sketchyChartVariants = cva(
+    [
+        'border-3 border-brutal',
+        'rounded-brutal',
+        'bg-brutal-bg',
+        'p-4',
+    ]
+)
diff --git a/packages/ui/src/components/sketchy-chart/sketchy-chart.test.ts b/packages/ui/src/components/sketchy-chart/sketchy-chart.test.ts
new file mode 100644
index 0000000..639e835
--- /dev/null
+++ b/packages/ui/src/components/sketchy-chart/sketchy-chart.test.ts
@@ -0,0 +1,85 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import SketchyChart from './SketchyChart.vue'
+
+describe('SketchyChart', () => {
+    const mockData = [
+        { label: 'Jan', value: 30 },
+        { label: 'Feb', value: 80 },
+        { label: 'Mar', value: 45 },
+    ]
+
+    it('renders coordinates axes and default variant container classes', () => {
+        const wrapper = mount(SketchyChart, {
+            props: { data: mockData }
+        })
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+
+        const axes = wrapper.findAll('.chart-axes line')
+        expect(axes.length).toBe(2)
+    })
+
+    it('renders line chart with paths and circle indicators', () => {
+        const wrapper = mount(SketchyChart, {
+            props: { type: 'line', data: mockData }
+        })
+        const paths = wrapper.findAll('.chart-data path')
+        expect(paths.length).toBe(2)
+
+        const circles = wrapper.findAll('.chart-data circle')
+        expect(circles.length).toBe(3)
+    })
+
+    it('renders bar chart with bar rects', () => {
+        const wrapper = mount(SketchyChart, {
+            props: { type: 'bar', data: mockData }
+        })
+        const rects = wrapper.findAll('.chart-data rect')
+        expect(rects.length).toBe(6)
+    })
+
+    it('handles empty data boundary safely', () => {
+        const wrapper = mount(SketchyChart, {
+            props: { data: [] }
+        })
+        expect(wrapper.findAll('.chart-data *').length).toBe(0)
+    })
+
+    it('generates unique filter IDs per instance', () => {
+        const wrapper = mount(SketchyChart, {
+            props: { data: mockData }
+        })
+
+        const filter = wrapper.find('filter')
+        const filterId = filter.attributes('id')
+
+        expect(filterId).toBeTruthy()
+        expect(filterId).toMatch(/^brutal-sketch-filter-/)
+    })
+
+    it('computes correct line path from data', () => {
+        const wrapper = mount(SketchyChart, {
+            props: { type: 'line', data: mockData }
+        })
+
+        const linePath = wrapper.findAll('.chart-data path').find(p => p.attributes('fill') === 'none')
+        expect(linePath).toBeTruthy()
+        const d = linePath!.attributes('d')
+        expect(d).toContain('M')
+        expect(d).toContain('L')
+    })
+
+    it('computes correct bar positions from data', () => {
+        const wrapper = mount(SketchyChart, {
+            props: { type: 'bar', data: mockData }
+        })
+
+        const barRects = wrapper.findAll('.chart-data rect').filter(r => r.attributes('fill') !== 'var(--brutal-border-color, #000000)')
+        expect(barRects.length).toBe(3)
+
+        const firstBarX = Number(barRects[0].attributes('x'))
+        const secondBarX = Number(barRects[1].attributes('x'))
+        expect(secondBarX).toBeGreaterThan(firstBarX)
+    })
+})
diff --git a/packages/ui/src/components/slider.tsx b/packages/ui/src/components/slider.tsx
deleted file mode 100644
index 2b9adf1..0000000
--- a/packages/ui/src/components/slider.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SliderPrimitive from '@radix-ui/react-slider';
-
-import { cn } from '../lib/utils';
-
-const Slider = React.forwardRef<
-    React.ElementRef<typeof SliderPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <SliderPrimitive.Root
-        ref={ref}
-        className={cn(
-            'relative flex w-full touch-none select-none items-center',
-            className
-        )}
-        {...props}
-    >
-        <SliderPrimitive.Track
-            className={cn(
-                'relative h-5 w-full grow overflow-hidden rounded-full',
-                'border-3 border-brutal bg-white dark:bg-gray-800',
-                'shadow-brutal-sm'
-            )}
-        >
-            <SliderPrimitive.Range className="absolute h-full bg-brutal-secondary" />
-        </SliderPrimitive.Track>
-        <SliderPrimitive.Thumb
-            className={cn(
-                'block h-6 w-6 rounded-full',
-                'border-3 border-brutal bg-brutal-accent',
-                'shadow-brutal-sm',
-                'transition-all duration-150',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
-                'disabled:pointer-events-none disabled:opacity-50',
-                'hover:scale-110 active:scale-95',
-                'cursor-grab active:cursor-grabbing'
-            )}
-        />
-    </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };
diff --git a/packages/ui/src/components/slider/Slider.vue b/packages/ui/src/components/slider/Slider.vue
new file mode 100644
index 0000000..41a5f29
--- /dev/null
+++ b/packages/ui/src/components/slider/Slider.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+    SliderRoot as SliderRootPrimitive,
+    SliderTrack as SliderTrackPrimitive,
+    SliderRange as SliderRangePrimitive,
+    SliderThumb as SliderThumbPrimitive,
+} from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface SliderProps {
+    defaultValue?: number[]
+    modelValue?: number[]
+    min?: number
+    max?: number
+    step?: number
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<SliderProps>(), {
+    defaultValue: undefined,
+    modelValue: undefined,
+    min: 0,
+    max: 100,
+    step: 1,
+    class: '',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: number[]] }>()
+
+const rootClasses = computed(() =>
+    cn('relative flex w-full touch-none select-none items-center', props.class)
+)
+
+const trackClasses = computed(() =>
+    cn(
+        'relative h-5 w-full grow overflow-hidden rounded-brutal',
+        'border-3 border-brutal bg-brutal-bg',
+        'shadow-brutal-sm'
+    )
+)
+
+const thumbClasses = computed(() =>
+    cn(
+        'block h-6 w-6 rounded-full',
+        'border-3 border-brutal bg-brutal-accent',
+        'shadow-brutal-sm',
+        'transition-all duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'hover:scale-110 active:scale-95',
+        'cursor-grab active:cursor-grabbing'
+    )
+)
+</script>
+
+<template>
+    <SliderRootPrimitive
+        :default-value="defaultValue"
+        :model-value="modelValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        :class="rootClasses"
+        @update:model-value="emit('update:modelValue', $event!)"
+    >
+        <SliderTrackPrimitive :class="trackClasses">
+            <SliderRangePrimitive class="absolute h-full bg-brutal-secondary" />
+        </SliderTrackPrimitive>
+        <SliderThumbPrimitive :class="thumbClasses" />
+    </SliderRootPrimitive>
+</template>
diff --git a/packages/ui/src/components/slider/slider.test.ts b/packages/ui/src/components/slider/slider.test.ts
new file mode 100644
index 0000000..b1188f7
--- /dev/null
+++ b/packages/ui/src/components/slider/slider.test.ts
@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils'
+import Slider from './Slider.vue'
+
+describe('Slider', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Slider, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="slider"]').exists()).toBe(true)
+    })
+
+    it('has slider role', () => {
+        const wrapper = mount(Slider, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="slider"]').exists()).toBe(true)
+    })
+
+    it('emits update:modelValue', async () => {
+        const wrapper = mount(Slider, {
+            props: {
+                modelValue: [50],
+                min: 0,
+                max: 100,
+                step: 1,
+            },
+            attachTo: document.body,
+        })
+        const sliderImpl = wrapper.find('[data-slider-impl]')
+        await sliderImpl.trigger('keydown', { key: 'ArrowRight' })
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Slider, {
+            props: { class: 'custom-class' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx
deleted file mode 100644
index 9d06a36..0000000
--- a/packages/ui/src/components/spinner.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const spinnerVariants = cva(
-    ['inline-block rounded-full', 'border-4 border-black dark:border-white', 'animate-spin'],
-    {
-        variants: {
-            size: {
-                sm: 'h-5 w-5 border-[3px]',
-                default: 'h-8 w-8 border-4',
-                lg: 'h-12 w-12 border-[5px]',
-                xl: 'h-16 w-16 border-[6px]',
-            },
-            variant: {
-                default: 'border-t-transparent border-r-transparent',
-                primary: 'border-[#FF6B6B] border-t-transparent border-r-transparent',
-                secondary: 'border-[#4ECDC4] border-t-transparent border-r-transparent',
-                accent: 'border-[#FFE66D] border-t-[#000] border-r-[#000] dark:border-t-white dark:border-r-white',
-            },
-        },
-        defaultVariants: {
-            size: 'default',
-            variant: 'default',
-        },
-    }
-);
-
-export interface SpinnerProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof spinnerVariants> {
-    label?: string;
-}
-
-const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
-    ({ className, size, variant, label = 'Loading...', ...props }, ref) => {
-        return (
-            <div
-                ref={ref}
-                role="status"
-                aria-label={label}
-                className={cn(spinnerVariants({ size, variant }), className)}
-                {...props}
-            >
-                <span className="sr-only">{label}</span>
-            </div>
-        );
-    }
-);
-Spinner.displayName = 'Spinner';
-
-const blockSpinnerVariants = cva('grid grid-cols-2 gap-1', {
-    variants: {
-        size: {
-            sm: 'h-5 w-5 gap-0.5',
-            default: 'h-8 w-8 gap-1',
-            lg: 'h-12 w-12 gap-1.5',
-            xl: 'h-16 w-16 gap-2',
-        },
-    },
-    defaultVariants: {
-        size: 'default',
-    },
-});
-
-const BlockSpinner = React.forwardRef<
-    HTMLDivElement,
-    Omit<SpinnerProps, 'variant'> & {
-        color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed';
-    }
->(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {
-    const colorMap = {
-        default: [
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-        ],
-        primary: ['bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]'],
-        secondary: ['bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]'],
-        accent: ['bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]'],
-        mixed: ['bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#FFE66D]', 'bg-[#A855F7]'],
-    };
-
-    const colors = colorMap[color];
-
-    return (
-        <div
-            ref={ref}
-            role="status"
-            aria-label={label}
-            className={cn(blockSpinnerVariants({ size }), className)}
-            {...props}
-        >
-            {[0, 1, 2, 3].map((i) => (
-                <div
-                    key={i}
-                    className={cn(
-                        'border-2 border-black dark:border-white',
-                        colors[i],
-                        'animate-pulse'
-                    )}
-                    style={{
-                        animationDelay: `${i * 150}ms`,
-                        animationDuration: '600ms',
-                    }}
-                />
-            ))}
-            <span className="sr-only">{label}</span>
-        </div>
-    );
-});
-BlockSpinner.displayName = 'BlockSpinner';
-
-const DotsSpinner = React.forwardRef<
-    HTMLDivElement,
-    Omit<SpinnerProps, 'variant'> & { color?: 'default' | 'primary' | 'secondary' | 'accent' }
->(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {
-    const sizeMap = {
-        sm: 'h-1.5 w-1.5',
-        default: 'h-2.5 w-2.5',
-        lg: 'h-3.5 w-3.5',
-        xl: 'h-5 w-5',
-    };
-
-    const gapMap = {
-        sm: 'gap-1',
-        default: 'gap-2',
-        lg: 'gap-3',
-        xl: 'gap-4',
-    };
-
-    const colorMap = {
-        default: 'bg-black dark:bg-white',
-        primary: 'bg-[#FF6B6B]',
-        secondary: 'bg-[#4ECDC4]',
-        accent: 'bg-[#FFE66D]',
-    };
-
-    return (
-        <div
-            ref={ref}
-            role="status"
-            aria-label={label}
-            className={cn('flex items-center', gapMap[size || 'default'], className)}
-            {...props}
-        >
-            {[0, 1, 2].map((i) => (
-                <div
-                    key={i}
-                    className={cn(
-                        sizeMap[size || 'default'],
-                        'border-2 border-black dark:border-white',
-                        colorMap[color],
-                        'animate-bounce'
-                    )}
-                    style={{
-                        animationDelay: `${i * 100}ms`,
-                        animationDuration: '500ms',
-                    }}
-                />
-            ))}
-            <span className="sr-only">{label}</span>
-        </div>
-    );
-});
-DotsSpinner.displayName = 'DotsSpinner';
-
-const BarsSpinner = React.forwardRef<
-    HTMLDivElement,
-    Omit<SpinnerProps, 'variant'> & {
-        color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed';
-    }
->(({ className, size = 'default', color = 'default', label = 'Loading...', ...props }, ref) => {
-    const heightMap = {
-        sm: 'h-4',
-        default: 'h-6',
-        lg: 'h-8',
-        xl: 'h-12',
-    };
-
-    const barWidthMap = {
-        sm: 'w-1',
-        default: 'w-1.5',
-        lg: 'w-2',
-        xl: 'w-3',
-    };
-
-    const colorMap = {
-        default: [
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-            'bg-black dark:bg-white',
-        ],
-        primary: ['bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]', 'bg-[#FF6B6B]'],
-        secondary: ['bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]', 'bg-[#4ECDC4]'],
-        accent: ['bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]', 'bg-[#FFE66D]'],
-        mixed: ['bg-[#FF6B6B]', 'bg-[#4ECDC4]', 'bg-[#FFE66D]', 'bg-[#A855F7]', 'bg-[#FF6B6B]'],
-    };
-
-    const colors = colorMap[color];
-
-    return (
-        <div
-            ref={ref}
-            role="status"
-            aria-label={label}
-            className={cn('flex items-end gap-0.5', heightMap[size || 'default'], className)}
-            {...props}
-        >
-            {[0, 1, 2, 3, 4].map((i) => (
-                <div
-                    key={i}
-                    className={cn(
-                        barWidthMap[size || 'default'],
-                        'border border-black dark:border-white',
-                        colors[i],
-                        'animate-pulse origin-bottom'
-                    )}
-                    style={{
-                        height: `${40 + Math.sin(i * 0.8) * 30}%`,
-                        animationDelay: `${i * 100}ms`,
-                        animationDuration: '400ms',
-                    }}
-                />
-            ))}
-            <span className="sr-only">{label}</span>
-        </div>
-    );
-});
-BarsSpinner.displayName = 'BarsSpinner';
-
-export { Spinner, BlockSpinner, DotsSpinner, BarsSpinner, spinnerVariants, blockSpinnerVariants };
diff --git a/packages/ui/src/components/spinner/BarsSpinner.vue b/packages/ui/src/components/spinner/BarsSpinner.vue
new file mode 100644
index 0000000..5f545e3
--- /dev/null
+++ b/packages/ui/src/components/spinner/BarsSpinner.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { barsSpinnerVariants } from './spinner-variants'
+
+type BarsSpinnerSize = NonNullable<VariantProps<typeof barsSpinnerVariants>['size']>
+
+interface BarsSpinnerProps {
+    size?: BarsSpinnerSize
+    color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed'
+    label?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<BarsSpinnerProps>(), {
+    size: 'default',
+    color: 'default',
+    label: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedLabel = computed(() => props.label ?? t('spinner.loading'))
+
+const barWidthMap: Record<string, string> = {
+    sm: 'w-1',
+    default: 'w-1.5',
+    lg: 'w-2',
+    xl: 'w-3',
+}
+
+const colorMap: Record<string, string[]> = {
+    default: ['bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg'],
+    primary: ['bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary'],
+    secondary: ['bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary'],
+    accent: ['bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent'],
+    mixed: ['bg-brutal-primary', 'bg-brutal-secondary', 'bg-brutal-accent', 'bg-brutal-info', 'bg-brutal-primary'],
+}
+
+const BAR_HEIGHT_RATIOS = [0.7, 0.55, 0.85, 0.6, 0.75]
+const ANIMATION_DELAY_INCREMENT_MS = 100
+const ANIMATION_DURATION_MS = 400
+
+const containerClasses = computed(() =>
+    cn(barsSpinnerVariants({ size: props.size }), props.class)
+)
+
+const barClasses = computed(() =>
+    colorMap[props.color].map(barColor =>
+        cn(barWidthMap[props.size ?? 'default'], 'border-3 border-brutal', barColor, 'animate-pulse origin-bottom')
+    )
+)
+</script>
+
+<template>
+    <div :class="containerClasses" role="status" :aria-label="resolvedLabel">
+        <div
+            v-for="(barClass, i) in barClasses"
+            :key="i"
+            :class="barClass"
+            :style="{
+                height: `${BAR_HEIGHT_RATIOS[i] * 100}%`,
+                animationDelay: `${i * ANIMATION_DELAY_INCREMENT_MS}ms`,
+                animationDuration: `${ANIMATION_DURATION_MS}ms`,
+            }"
+        />
+        <span class="sr-only">{{ resolvedLabel }}</span>
+    </div>
+</template>
diff --git a/packages/ui/src/components/spinner/BlockSpinner.vue b/packages/ui/src/components/spinner/BlockSpinner.vue
new file mode 100644
index 0000000..46b2191
--- /dev/null
+++ b/packages/ui/src/components/spinner/BlockSpinner.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { blockSpinnerVariants } from './spinner-variants'
+
+type BlockSpinnerSize = NonNullable<VariantProps<typeof blockSpinnerVariants>['size']>
+
+interface BlockSpinnerProps {
+    size?: BlockSpinnerSize
+    color?: 'default' | 'primary' | 'secondary' | 'accent' | 'mixed'
+    label?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<BlockSpinnerProps>(), {
+    size: 'default',
+    color: 'default',
+    label: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedLabel = computed(() => props.label ?? t('spinner.loading'))
+
+const colorMap: Record<string, string[]> = {
+    default: ['bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg', 'bg-brutal-fg'],
+    primary: ['bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary', 'bg-brutal-primary'],
+    secondary: ['bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary', 'bg-brutal-secondary'],
+    accent: ['bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent', 'bg-brutal-accent'],
+    mixed: ['bg-brutal-primary', 'bg-brutal-secondary', 'bg-brutal-accent', 'bg-brutal-info'],
+}
+
+const classes = computed(() =>
+    cn(blockSpinnerVariants({ size: props.size }), props.class)
+)
+
+const blockClasses = computed(() =>
+    colorMap[props.color].map(blockColor =>
+        cn('border-3 border-brutal', blockColor, 'animate-pulse')
+    )
+)
+</script>
+
+<template>
+    <div :class="classes" role="status" :aria-label="resolvedLabel">
+        <div
+            v-for="(blockClass, i) in blockClasses"
+            :key="i"
+            :class="blockClass"
+            :style="{ animationDelay: `${i * 150}ms`, animationDuration: '600ms' }"
+        />
+        <span class="sr-only">{{ resolvedLabel }}</span>
+    </div>
+</template>
diff --git a/packages/ui/src/components/spinner/DotsSpinner.vue b/packages/ui/src/components/spinner/DotsSpinner.vue
new file mode 100644
index 0000000..8db239e
--- /dev/null
+++ b/packages/ui/src/components/spinner/DotsSpinner.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { dotsSpinnerVariants } from './spinner-variants'
+
+type DotsSpinnerSize = NonNullable<VariantProps<typeof dotsSpinnerVariants>['size']>
+
+interface DotsSpinnerProps {
+    size?: DotsSpinnerSize
+    color?: 'default' | 'primary' | 'secondary' | 'accent'
+    label?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<DotsSpinnerProps>(), {
+    size: 'default',
+    color: 'default',
+    label: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedLabel = computed(() => props.label ?? t('spinner.loading'))
+
+const sizeMap: Record<string, string> = {
+    sm: 'h-1.5 w-1.5',
+    default: 'h-2.5 w-2.5',
+    lg: 'h-3.5 w-3.5',
+    xl: 'h-5 w-5',
+}
+
+const colorMap: Record<string, string> = {
+    default: 'bg-brutal-fg',
+    primary: 'bg-brutal-primary',
+    secondary: 'bg-brutal-secondary',
+    accent: 'bg-brutal-accent',
+}
+
+const containerClasses = computed(() =>
+    cn(dotsSpinnerVariants({ size: props.size }), props.class)
+)
+
+const dotClasses = computed(() =>
+    cn(sizeMap[props.size ?? 'default'], 'border-3 border-brutal', colorMap[props.color], 'animate-bounce')
+)
+</script>
+
+<template>
+    <div :class="containerClasses" role="status" :aria-label="resolvedLabel">
+        <div
+            v-for="i in 3"
+            :key="i"
+            :class="dotClasses"
+            :style="{ animationDelay: `${(i - 1) * 100}ms`, animationDuration: '500ms' }"
+        />
+        <span class="sr-only">{{ resolvedLabel }}</span>
+    </div>
+</template>
diff --git a/packages/ui/src/components/spinner/Spinner.vue b/packages/ui/src/components/spinner/Spinner.vue
new file mode 100644
index 0000000..6cd6d23
--- /dev/null
+++ b/packages/ui/src/components/spinner/Spinner.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { spinnerVariants } from './spinner-variants'
+
+type SpinnerVariantProps = VariantProps<typeof spinnerVariants>
+
+interface SpinnerProps {
+    size?: NonNullable<SpinnerVariantProps['size']>
+    variant?: NonNullable<SpinnerVariantProps['variant']>
+    label?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<SpinnerProps>(), {
+    size: 'default',
+    variant: 'default',
+    label: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedLabel = computed(() => props.label ?? t('spinner.loading'))
+
+const classes = computed(() =>
+    cn(spinnerVariants({ size: props.size, variant: props.variant }), props.class)
+)
+</script>
+
+<template>
+    <div :class="classes" role="status" :aria-label="resolvedLabel">
+        <span class="sr-only">{{ resolvedLabel }}</span>
+    </div>
+</template>
diff --git a/packages/ui/src/components/spinner/spinner-variants.ts b/packages/ui/src/components/spinner/spinner-variants.ts
new file mode 100644
index 0000000..ca3d2b9
--- /dev/null
+++ b/packages/ui/src/components/spinner/spinner-variants.ts
@@ -0,0 +1,67 @@
+import { cva } from 'class-variance-authority'
+
+export const spinnerVariants = cva(
+    ['inline-block rounded-full', 'border-3 border-brutal', 'animate-spin'],
+    {
+        variants: {
+            size: {
+                sm: 'h-5 w-5',
+                default: 'h-8 w-8',
+                lg: 'h-12 w-12 border-[5px]',
+                xl: 'h-16 w-16 border-[6px]',
+            },
+            variant: {
+                default: 'border-t-transparent border-r-transparent',
+                primary: 'border-brutal-primary border-t-transparent border-r-transparent',
+                secondary: 'border-brutal-secondary border-t-transparent border-r-transparent',
+                accent: 'border-brutal-accent border-t-brutal-fg border-r-brutal-fg',
+            },
+        },
+        defaultVariants: {
+            size: 'default',
+            variant: 'default',
+        },
+    }
+)
+
+export const blockSpinnerVariants = cva('grid grid-cols-2 gap-1', {
+    variants: {
+        size: {
+            sm: 'h-5 w-5 gap-0.5',
+            default: 'h-8 w-8 gap-1',
+            lg: 'h-12 w-12 gap-1.5',
+            xl: 'h-16 w-16 gap-2',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+})
+
+export const barsSpinnerVariants = cva('flex items-end gap-0.5', {
+    variants: {
+        size: {
+            sm: 'h-4',
+            default: 'h-6',
+            lg: 'h-8',
+            xl: 'h-12',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+})
+
+export const dotsSpinnerVariants = cva('flex items-center', {
+    variants: {
+        size: {
+            sm: 'gap-1',
+            default: 'gap-2',
+            lg: 'gap-3',
+            xl: 'gap-4',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+})
diff --git a/packages/ui/src/components/spinner/spinner.test.ts b/packages/ui/src/components/spinner/spinner.test.ts
new file mode 100644
index 0000000..54a14fc
--- /dev/null
+++ b/packages/ui/src/components/spinner/spinner.test.ts
@@ -0,0 +1,178 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import Spinner from './Spinner.vue'
+import BlockSpinner from './BlockSpinner.vue'
+import DotsSpinner from './DotsSpinner.vue'
+import BarsSpinner from './BarsSpinner.vue'
+
+const globalProvide = { provide: { [LOCALE_INJECTION_KEY]: en } }
+
+describe('Spinner', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Spinner, { global: globalProvide })
+        const classes = wrapper.classes()
+        expect(classes).toContain('inline-block')
+        expect(classes).toContain('rounded-full')
+        expect(classes).toContain('animate-spin')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('h-8')
+        expect(classes).toContain('w-8')
+    })
+
+    it('has role status and aria-label', () => {
+        const wrapper = mount(Spinner, { global: globalProvide })
+        expect(wrapper.attributes('role')).toBe('status')
+        expect(wrapper.attributes('aria-label')).toBe('Loading...')
+    })
+
+    it('renders sr-only label text', () => {
+        const wrapper = mount(Spinner, { global: globalProvide })
+        const srOnly = wrapper.find('.sr-only')
+        expect(srOnly.text()).toBe('Loading...')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(Spinner, { props: { variant: 'primary' }, global: globalProvide })
+        expect(wrapper.classes()).toContain('border-brutal-primary')
+    })
+
+    it('applies size classes', () => {
+        const wrapper = mount(Spinner, { props: { size: 'lg' }, global: globalProvide })
+        expect(wrapper.classes()).toContain('h-12')
+        expect(wrapper.classes()).toContain('w-12')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(Spinner, {
+            props: { class: 'custom-spinner' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('custom-spinner')
+    })
+})
+
+describe('BlockSpinner', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(BlockSpinner, { global: globalProvide })
+        const classes = wrapper.classes()
+        expect(classes).toContain('grid')
+        expect(classes).toContain('grid-cols-2')
+        expect(classes).toContain('gap-1')
+    })
+
+    it('has role status and aria-label', () => {
+        const wrapper = mount(BlockSpinner, { global: globalProvide })
+        expect(wrapper.attributes('role')).toBe('status')
+        expect(wrapper.attributes('aria-label')).toBe('Loading...')
+    })
+
+    it('renders 4 block elements with animate-pulse', () => {
+        const wrapper = mount(BlockSpinner, { global: globalProvide })
+        const blocks = wrapper.findAll('div.animate-pulse')
+        expect(blocks.length).toBe(4)
+    })
+
+    it('applies size classes', () => {
+        const wrapper = mount(BlockSpinner, { props: { size: 'lg' }, global: globalProvide })
+        expect(wrapper.classes()).toContain('h-12')
+        expect(wrapper.classes()).toContain('w-12')
+    })
+
+    it('renders sr-only label text', () => {
+        const wrapper = mount(BlockSpinner, { global: globalProvide })
+        const srOnly = wrapper.find('.sr-only')
+        expect(srOnly.text()).toBe('Loading...')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(BlockSpinner, {
+            props: { class: 'custom-block' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('custom-block')
+    })
+})
+
+describe('DotsSpinner', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(DotsSpinner, { global: globalProvide })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex')
+        expect(classes).toContain('items-center')
+        expect(classes).toContain('gap-2')
+    })
+
+    it('has role status and aria-label', () => {
+        const wrapper = mount(DotsSpinner, { global: globalProvide })
+        expect(wrapper.attributes('role')).toBe('status')
+        expect(wrapper.attributes('aria-label')).toBe('Loading...')
+    })
+
+    it('renders 3 dot elements with animate-bounce', () => {
+        const wrapper = mount(DotsSpinner, { global: globalProvide })
+        const dots = wrapper.findAll('div.animate-bounce')
+        expect(dots.length).toBe(3)
+    })
+
+    it('applies size classes', () => {
+        const wrapper = mount(DotsSpinner, { props: { size: 'lg' }, global: globalProvide })
+        expect(wrapper.classes()).toContain('gap-3')
+    })
+
+    it('renders sr-only label text', () => {
+        const wrapper = mount(DotsSpinner, { global: globalProvide })
+        const srOnly = wrapper.find('.sr-only')
+        expect(srOnly.text()).toBe('Loading...')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(DotsSpinner, {
+            props: { class: 'custom-dots' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('custom-dots')
+    })
+})
+
+describe('BarsSpinner', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(BarsSpinner, { global: globalProvide })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex')
+        expect(classes).toContain('items-end')
+        expect(classes).toContain('gap-0.5')
+    })
+
+    it('has role status and aria-label', () => {
+        const wrapper = mount(BarsSpinner, { global: globalProvide })
+        expect(wrapper.attributes('role')).toBe('status')
+        expect(wrapper.attributes('aria-label')).toBe('Loading...')
+    })
+
+    it('renders 5 bar elements with animate-pulse', () => {
+        const wrapper = mount(BarsSpinner, { global: globalProvide })
+        const bars = wrapper.findAll('div.animate-pulse')
+        expect(bars.length).toBe(5)
+    })
+
+    it('applies size classes', () => {
+        const wrapper = mount(BarsSpinner, { props: { size: 'lg' }, global: globalProvide })
+        expect(wrapper.classes()).toContain('h-8')
+    })
+
+    it('renders sr-only label text', () => {
+        const wrapper = mount(BarsSpinner, { global: globalProvide })
+        const srOnly = wrapper.find('.sr-only')
+        expect(srOnly.text()).toBe('Loading...')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(BarsSpinner, {
+            props: { class: 'custom-bars' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('custom-bars')
+    })
+})
diff --git a/packages/ui/src/components/stepper-section/StepperSection.vue b/packages/ui/src/components/stepper-section/StepperSection.vue
new file mode 100644
index 0000000..8d6a0ad
--- /dev/null
+++ b/packages/ui/src/components/stepper-section/StepperSection.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Stepper from '../stepper/Stepper.vue'
+import Button from '../button/Button.vue'
+import Card from '../card/Card.vue'
+
+export interface StepperStepItem {
+    title: string
+    description?: string
+}
+
+interface StepperSectionProps {
+    title?: string
+    steps?: StepperStepItem[]
+    currentStep?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<StepperSectionProps>(), {
+    title: undefined,
+    steps: () => [],
+    currentStep: 0,
+    class: '',
+})
+
+const emit = defineEmits<{
+    'step-click': [index: number]
+}>()
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('stepperSection.defaultTitle'))
+const resolvedPrevious = computed(() => t('stepperSection.previous'))
+const resolvedNext = computed(() => t('stepperSection.next'))
+
+const stepperSteps = computed(() =>
+    props.steps.map((step, index) => ({
+        id: index,
+        title: step.title,
+        description: step.description,
+    }))
+)
+
+const canGoPrevious = computed(() => props.currentStep > 0)
+const canGoNext = computed(() => props.currentStep < props.steps.length - 1)
+
+const rootClasses = computed(() => cn('w-full max-w-3xl mx-auto', props.class))
+
+function handleStepClick(index: number) {
+    emit('step-click', index)
+}
+
+function handlePrevious() {
+    if (canGoPrevious.value) {
+        emit('step-click', props.currentStep - 1)
+    }
+}
+
+function handleNext() {
+    if (canGoNext.value) {
+        emit('step-click', props.currentStep + 1)
+    }
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header">
+            <div class="text-center mb-8">
+                <h2 class="text-3xl font-black tracking-tight">
+                    {{ resolvedTitle }}
+                </h2>
+            </div>
+        </slot>
+
+        <slot>
+            <Stepper
+                :steps="stepperSteps"
+                :model-value="currentStep"
+                orientation="horizontal"
+                @step-click="handleStepClick"
+            />
+
+            <Card variant="default" class="mt-6">
+                <div class="p-6">
+                    <slot name="default" />
+                </div>
+            </Card>
+
+            <div class="flex items-center justify-between mt-6">
+                <Button
+                    variant="outline"
+                    :disabled="!canGoPrevious"
+                    @click="handlePrevious"
+                >
+                    <ChevronLeft class="h-4 w-4 mr-1" />
+                    {{ resolvedPrevious }}
+                </Button>
+                <Button
+                    variant="primary"
+                    :disabled="!canGoNext"
+                    @click="handleNext"
+                >
+                    {{ resolvedNext }}
+                    <ChevronRight class="h-4 w-4 ml-1" />
+                </Button>
+            </div>
+        </slot>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/stepper-section/stepper-section.test.ts b/packages/ui/src/components/stepper-section/stepper-section.test.ts
new file mode 100644
index 0000000..ef0e975
--- /dev/null
+++ b/packages/ui/src/components/stepper-section/stepper-section.test.ts
@@ -0,0 +1,144 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import StepperSection from './StepperSection.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+const mockSteps = [
+    { title: 'Account', description: 'Create your account' },
+    { title: 'Profile', description: 'Set up your profile' },
+    { title: 'Confirm', description: 'Review and confirm' },
+]
+
+describe('StepperSection', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(StepperSection, { ...localeProvide })
+        expect(wrapper.find('h2').exists()).toBe(true)
+    })
+
+    it('renders custom title', () => {
+        const wrapper = mount(StepperSection, {
+            props: { title: 'Setup Wizard' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').text()).toBe('Setup Wizard')
+    })
+
+    it('renders steps via Stepper component', () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 0 },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Account')
+        expect(wrapper.text()).toContain('Profile')
+        expect(wrapper.text()).toContain('Confirm')
+    })
+
+    it('renders step descriptions', () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 0 },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Create your account')
+        expect(wrapper.text()).toContain('Set up your profile')
+    })
+
+    it('renders navigation buttons', () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 1 },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const buttonTexts = buttons.map(b => b.text())
+        expect(buttonTexts.some(t => t.includes('Previous'))).toBe(true)
+        expect(buttonTexts.some(t => t.includes('Next'))).toBe(true)
+    })
+
+    it('disables Previous button on first step', () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 0 },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const prevButton = buttons.find(b => b.text().includes('Previous'))
+        expect(prevButton?.attributes('disabled')).toBeDefined()
+    })
+
+    it('disables Next button on last step', () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 2 },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const nextButton = buttons.find(b => b.text().includes('Next'))
+        expect(nextButton?.attributes('disabled')).toBeDefined()
+    })
+
+    it('emits step-click when Previous is clicked', async () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 1 },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const prevButton = buttons.find(b => b.text().includes('Previous'))
+        await prevButton?.trigger('click')
+        expect(wrapper.emitted('step-click')).toBeTruthy()
+        expect(wrapper.emitted('step-click')![0]).toEqual([0])
+    })
+
+    it('emits step-click when Next is clicked', async () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 0 },
+            ...localeProvide,
+        })
+        const buttons = wrapper.findAll('button')
+        const nextButton = buttons.find(b => b.text().includes('Next'))
+        await nextButton?.trigger('click')
+        expect(wrapper.emitted('step-click')).toBeTruthy()
+        expect(wrapper.emitted('step-click')![0]).toEqual([1])
+    })
+
+    it('renders with empty steps array', () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: [], currentStep: 0 },
+            ...localeProvide,
+        })
+        expect(wrapper.find('h2').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(StepperSection, {
+            props: { class: 'my-stepper-section' },
+            ...localeProvide,
+        })
+        expect(wrapper.classes()).toContain('my-stepper-section')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(StepperSection, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Custom Header')
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(StepperSection, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot for step content', () => {
+        const wrapper = mount(StepperSection, {
+            props: { steps: mockSteps, currentStep: 0 },
+            slots: { default: '<div class="step-content">Step Content Here</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('.step-content').exists()).toBe(true)
+        expect(wrapper.text()).toContain('Step Content Here')
+    })
+})
diff --git a/packages/ui/src/components/stepper/Stepper.vue b/packages/ui/src/components/stepper/Stepper.vue
new file mode 100644
index 0000000..fcf4aaa
--- /dev/null
+++ b/packages/ui/src/components/stepper/Stepper.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Check } from 'lucide-vue-next';
+import { cn } from '../../lib/utils';
+import { stepperDotVariants, stepperConnectorVariants } from './stepper-variants';
+import { useLocale } from '@/composables/useLocale';
+
+export interface StepperStep {
+    id: string | number;
+    title: string;
+    description?: string;
+}
+
+const MIN_VERTICAL_CONNECTOR_HEIGHT = '2rem'
+
+interface StepperProps {
+    steps: StepperStep[];
+    modelValue: number; // 0-indexed current step
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+}
+
+const props = withDefaults(defineProps<StepperProps>(), {
+    orientation: 'horizontal',
+});
+
+const { t } = useLocale();
+
+const emit = defineEmits<{
+    'update:modelValue': [step: number];
+    'step-click': [index: number];
+}>();
+
+function getState(index: number): 'completed' | 'active' | 'upcoming' {
+    if (index < props.modelValue) return 'completed';
+    if (index === props.modelValue) return 'active';
+    return 'upcoming';
+}
+
+function clickStep(index: number) {
+    emit('update:modelValue', index);
+    emit('step-click', index);
+}
+
+const rootClass = computed(() =>
+    cn(
+        props.orientation === 'horizontal'
+            ? 'flex flex-row items-start w-full'
+            : 'flex flex-col gap-0',
+        props.class
+    )
+);
+
+const stepWrapClasses = computed(() =>
+    cn(
+        props.orientation === 'horizontal'
+            ? 'flex flex-col items-center flex-1 min-w-0'
+            : 'flex flex-row items-start gap-3'
+    )
+)
+
+const dotCompletedClasses = computed(() =>
+    cn(stepperDotVariants({ state: 'completed' }), 'cursor-pointer')
+)
+
+const dotActiveClasses = computed(() =>
+    cn(stepperDotVariants({ state: 'active' }), 'cursor-pointer')
+)
+
+const dotUpcomingClasses = computed(() =>
+    cn(stepperDotVariants({ state: 'upcoming' }), 'cursor-pointer')
+)
+
+const connectorCompletedClasses = computed(() =>
+    cn(stepperConnectorVariants({ orientation: props.orientation, completed: true }))
+)
+
+const connectorIncompleteClasses = computed(() =>
+    cn(stepperConnectorVariants({ orientation: props.orientation, completed: false }))
+)
+
+const dotClassesMap = computed(() => {
+    const map = new Map<number, string>()
+    props.steps.forEach((_, index) => {
+        const state = getState(index)
+        if (state === 'completed') map.set(index, dotCompletedClasses.value)
+        else if (state === 'active') map.set(index, dotActiveClasses.value)
+        else map.set(index, dotUpcomingClasses.value)
+    })
+    return map
+})
+
+const connectorClassesMap = computed(() => {
+    const map = new Map<number, string>()
+    props.steps.forEach((_, index) => {
+        const completed = index < props.modelValue
+        map.set(index, completed ? connectorCompletedClasses.value : connectorIncompleteClasses.value)
+    })
+    return map
+})
+</script>
+
+<template>
+    <div :class="rootClass" role="list" :aria-label="t('stepper.progressSteps')">
+        <template v-for="(step, index) in steps" :key="step.id">
+            <!-- Step Item -->
+            <div
+                :class="stepWrapClasses"
+                role="listitem"
+                :aria-current="index === modelValue ? 'step' : undefined"
+            >
+                <!-- Horizontal: dot row with connectors -->
+                <div
+                    v-if="orientation === 'horizontal'"
+                    class="flex items-center w-full"
+                >
+                    <!-- Left connector (not for first) -->
+                    <div
+                        v-if="index > 0"
+                        :class="connectorClassesMap.get(index)"
+                    />
+
+                    <!-- Dot -->
+                    <button
+                        :class="dotClassesMap.get(index)"
+                        type="button"
+                        :aria-label="t('stepper.step', { index: index + 1, title: step.title })"
+                        @click="clickStep(index)"
+                    >
+                        <Check v-if="getState(index) === 'completed'" class="w-4 h-4" />
+                        <span v-else>{{ index + 1 }}</span>
+                    </button>
+
+                    <!-- Right connector (not for last) -->
+                    <div
+                        v-if="index < steps.length - 1"
+                        :class="connectorClassesMap.get(index)"
+                    />
+                </div>
+
+                <!-- Horizontal: label below dot -->
+                <div
+                    v-if="orientation === 'horizontal'"
+                    class="mt-2 text-center px-1"
+                    :class="getState(index) === 'upcoming' ? 'opacity-50' : ''"
+                >
+                    <p class="text-xs font-black tracking-wide truncate">{{ step.title }}</p>
+                    <p v-if="step.description" class="text-xs font-medium opacity-60 mt-0.5 truncate">
+                        {{ step.description }}
+                    </p>
+                </div>
+
+                <!-- Vertical layout -->
+                <template v-if="orientation === 'vertical'">
+                    <div class="flex flex-col items-center">
+                        <!-- Dot -->
+                        <button
+                            :class="dotClassesMap.get(index)"
+                            type="button"
+                            :aria-label="t('stepper.step', { index: index + 1, title: step.title })"
+                            @click="clickStep(index)"
+                        >
+                            <Check v-if="getState(index) === 'completed'" class="w-4 h-4" />
+                            <span v-else>{{ index + 1 }}</span>
+                        </button>
+                        <!-- Vertical connector below dot -->
+                        <div
+                            v-if="index < steps.length - 1"
+                            :class="connectorClassesMap.get(index)"
+                            :style="{ minHeight: MIN_VERTICAL_CONNECTOR_HEIGHT }"
+                        />
+                    </div>
+
+                    <!-- Label right of dot -->
+                    <div
+                        class="pb-6 min-w-0 flex-1"
+                        :class="getState(index) === 'upcoming' ? 'opacity-50' : ''"
+                    >
+                        <p class="text-sm font-black tracking-wide">{{ step.title }}</p>
+                        <p v-if="step.description" class="text-xs font-medium opacity-60 mt-0.5">
+                            {{ step.description }}
+                        </p>
+                        <!-- Content slot for active vertical step -->
+                        <div v-if="index === modelValue" class="mt-3">
+                            <slot :name="`step-${step.id}`" />
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </template>
+    </div>
+</template>
diff --git a/packages/ui/src/components/stepper/index.ts b/packages/ui/src/components/stepper/index.ts
new file mode 100644
index 0000000..89d2343
--- /dev/null
+++ b/packages/ui/src/components/stepper/index.ts
@@ -0,0 +1,3 @@
+export { default as Stepper } from './Stepper.vue';
+export type { StepperStep } from './Stepper.vue';
+export { stepperDotVariants, stepperConnectorVariants, stepperItemVariants } from './stepper-variants';
diff --git a/packages/ui/src/components/stepper/stepper-variants.ts b/packages/ui/src/components/stepper/stepper-variants.ts
new file mode 100644
index 0000000..f58d146
--- /dev/null
+++ b/packages/ui/src/components/stepper/stepper-variants.ts
@@ -0,0 +1,50 @@
+import { cva } from 'class-variance-authority';
+
+export const stepperItemVariants = cva(
+    [
+        'flex items-center gap-3 relative',
+    ].join(' ')
+);
+
+export const stepperDotVariants = cva(
+    [
+        'flex-shrink-0 flex items-center justify-center',
+        'border-3 border-brutal rounded-brutal font-black text-sm',
+        'transition-all duration-200',
+        'z-10 relative',
+    ].join(' '),
+    {
+        variants: {
+            state: {
+                completed: 'bg-brutal-success text-brutal-fg shadow-brutal w-8 h-8',
+                active: 'bg-brutal-primary text-brutal-fg shadow-brutal-lg w-8 h-8 -translate-x-0.5 -translate-y-0.5',
+                upcoming: 'bg-brutal-bg text-brutal-fg shadow-brutal-sm w-8 h-8 opacity-60',
+            },
+        },
+        defaultVariants: {
+            state: 'upcoming',
+        },
+    }
+);
+
+export const stepperConnectorVariants = cva(
+    [
+        'transition-all duration-300',
+    ].join(' '),
+    {
+        variants: {
+            orientation: {
+                horizontal: 'flex-1 h-[3px] mx-2',
+                vertical: 'w-[3px] flex-1 my-2 ml-[14px]',
+            },
+            completed: {
+                true: 'bg-brutal-success',
+                false: 'bg-brutal-fg opacity-20',
+            },
+        },
+        defaultVariants: {
+            orientation: 'horizontal',
+            completed: false,
+        },
+    }
+);
diff --git a/packages/ui/src/components/stepper/stepper.test.ts b/packages/ui/src/components/stepper/stepper.test.ts
new file mode 100644
index 0000000..cd6519b
--- /dev/null
+++ b/packages/ui/src/components/stepper/stepper.test.ts
@@ -0,0 +1,161 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import Stepper from './Stepper.vue'
+
+const localeProvide = { [LOCALE_INJECTION_KEY]: en }
+
+const steps = [
+    { id: 'step-1', title: 'Account' },
+    { id: 'step-2', title: 'Profile', description: 'Set up your profile' },
+    { id: 'step-3', title: 'Confirm' },
+]
+
+describe('Stepper', () => {
+    it('renders all steps', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        const items = wrapper.findAll('[role="listitem"]')
+        expect(items).toHaveLength(3)
+    })
+
+    it('shows step titles', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('Account')
+        expect(wrapper.text()).toContain('Profile')
+        expect(wrapper.text()).toContain('Confirm')
+    })
+
+    it('has role="list" and aria-label', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.attributes('role')).toBe('list')
+        expect(wrapper.attributes('aria-label')).toBe('Progress steps')
+    })
+
+    it('marks active step with bg-brutal-primary', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 1 },
+            global: { provide: localeProvide },
+        })
+        const buttons = wrapper.findAll('button')
+        const activeButton = buttons[1]
+        expect(activeButton.classes()).toContain('bg-brutal-primary')
+    })
+
+    it('shows completed check icon for completed steps', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 2 },
+            global: { provide: localeProvide },
+        })
+        const buttons = wrapper.findAll('button')
+        const completedButton = buttons[0]
+        expect(completedButton.find('svg').exists()).toBe(true)
+    })
+
+    it('shows step numbers for non-completed steps', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        const buttons = wrapper.findAll('button')
+        expect(buttons[0].text()).toContain('1')
+        expect(buttons[1].text()).toContain('2')
+        expect(buttons[2].text()).toContain('3')
+    })
+
+    it('applies upcoming state classes to future steps', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        const buttons = wrapper.findAll('button')
+        const upcomingButton = buttons[2]
+        expect(upcomingButton.classes()).toContain('bg-brutal-bg')
+        expect(upcomingButton.classes()).toContain('opacity-60')
+    })
+
+    it('applies completed state classes to completed steps', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 2 },
+            global: { provide: localeProvide },
+        })
+        const buttons = wrapper.findAll('button')
+        const completedButton = buttons[0]
+        expect(completedButton.classes()).toContain('bg-brutal-success')
+    })
+
+    it('renders descriptions when provided', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('Set up your profile')
+    })
+
+    it('emits update:modelValue on step click', async () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        const buttons = wrapper.findAll('button')
+        await buttons[1].trigger('click')
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual([1])
+    })
+
+    it('emits step-click on step click', async () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        const buttons = wrapper.findAll('button')
+        await buttons[2].trigger('click')
+        expect(wrapper.emitted('step-click')).toBeTruthy()
+        expect(wrapper.emitted('step-click')![0]).toEqual([2])
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0, class: 'my-stepper' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.classes()).toContain('my-stepper')
+    })
+
+    it('renders horizontal layout by default', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0 },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('flex-row')
+    })
+
+    it('renders vertical layout when orientation is vertical', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 0, orientation: 'vertical' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('flex-col')
+    })
+
+    it('sets aria-current on active step', () => {
+        const wrapper = mount(Stepper, {
+            props: { steps, modelValue: 1 },
+            global: { provide: localeProvide },
+        })
+        const items = wrapper.findAll('[role="listitem"]')
+        expect(items[0].attributes('aria-current')).toBeUndefined()
+        expect(items[1].attributes('aria-current')).toBe('step')
+        expect(items[2].attributes('aria-current')).toBeUndefined()
+    })
+})
diff --git a/packages/ui/src/components/submit-button.tsx b/packages/ui/src/components/submit-button.tsx
deleted file mode 100644
index ba2fdf5..0000000
--- a/packages/ui/src/components/submit-button.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { useFormStatus } from 'react-dom';
-import { Button, type ButtonProps } from './button';
-
-export interface SubmitButtonProps extends ButtonProps {
-    pendingText?: string;
-}
-
-/**
- * Renders a submit button that follows React form pending state.
- *
- * @param props - Submit button props.
- * @returns Submit button with pending state.
- */
-function SubmitButton({ children, pendingText, disabled, ...props }: SubmitButtonProps) {
-    const { pending } = useFormStatus();
-
-    return (
-        <Button type="submit" disabled={disabled || pending} loading={pending} {...props}>
-            {pending && pendingText ? pendingText : children}
-        </Button>
-    );
-}
-
-SubmitButton.displayName = 'SubmitButton';
-
-export { SubmitButton };
diff --git a/packages/ui/src/components/submit-button/SubmitButton.vue b/packages/ui/src/components/submit-button/SubmitButton.vue
new file mode 100644
index 0000000..b59d94c
--- /dev/null
+++ b/packages/ui/src/components/submit-button/SubmitButton.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Loader2 } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import { buttonVariants } from '../button/button-variants'
+import { type VariantProps } from 'class-variance-authority'
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>
+
+interface SubmitButtonProps {
+    variant?: NonNullable<ButtonVariantProps['variant']>
+    size?: NonNullable<ButtonVariantProps['size']>
+    pendingText?: string
+    loading?: boolean
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<SubmitButtonProps>(), {
+    variant: 'default',
+    size: 'default',
+    pendingText: undefined,
+    loading: false,
+    disabled: false,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedPendingText = computed(() => props.pendingText ?? t('submitButton.submitting'))
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+const classes = computed(() =>
+    cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)
+)
+</script>
+
+<template>
+    <button type="submit" :class="classes" :disabled="isDisabled">
+        <Loader2 v-if="loading" class="h-4 w-4 animate-spin" />
+        <template v-if="loading && resolvedPendingText">
+{{ resolvedPendingText }}
+</template>
+        <slot v-else />
+    </button>
+</template>
diff --git a/packages/ui/src/components/submit-button/submit-button.test.ts b/packages/ui/src/components/submit-button/submit-button.test.ts
new file mode 100644
index 0000000..7ee0128
--- /dev/null
+++ b/packages/ui/src/components/submit-button/submit-button.test.ts
@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils'
+import SubmitButton from './SubmitButton.vue'
+
+describe('SubmitButton', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SubmitButton)
+        const button = wrapper.find('button')
+        expect(button.exists()).toBe(true)
+        expect(button.attributes('type')).toBe('submit')
+        expect(button.attributes('disabled')).toBeUndefined()
+    })
+
+    it('shows loading spinner when loading=true', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { loading: true },
+        })
+        const svg = wrapper.find('svg')
+        expect(svg.exists()).toBe(true)
+        expect(svg.classes()).toContain('animate-spin')
+    })
+
+    it('shows pending text when pendingText is provided and loading', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { loading: true, pendingText: 'Saving...' },
+        })
+        expect(wrapper.text()).toContain('Saving...')
+    })
+
+    it('does not show pending text when not loading', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { loading: false, pendingText: 'Saving...' },
+            slots: { default: 'Submit' },
+        })
+        expect(wrapper.text()).toBe('Submit')
+    })
+
+    it('is disabled when loading=true', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { loading: true },
+        })
+        expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('is disabled when disabled=true', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { disabled: true },
+        })
+        expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('is disabled when both loading and disabled', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { loading: true, disabled: true },
+        })
+        expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('renders slot content when not loading', () => {
+        const wrapper = mount(SubmitButton, {
+            slots: { default: 'Click me' },
+        })
+        expect(wrapper.text()).toBe('Click me')
+    })
+
+    it('does not render slot content when loading', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { loading: true, pendingText: 'Processing...' },
+            slots: { default: 'Click me' },
+        })
+        expect(wrapper.text()).not.toContain('Click me')
+        expect(wrapper.text()).toContain('Processing...')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { class: 'custom-submit' },
+        })
+        expect(wrapper.find('button').classes()).toContain('custom-submit')
+    })
+
+    it('applies variant classes', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { variant: 'primary' },
+        })
+        expect(wrapper.find('button').classes()).toContain('bg-brutal-primary')
+    })
+
+    it('applies size classes', () => {
+        const wrapper = mount(SubmitButton, {
+            props: { size: 'lg' },
+        })
+        expect(wrapper.find('button').classes()).toContain('h-14')
+    })
+})
diff --git a/packages/ui/src/components/success-card/SuccessCard.vue b/packages/ui/src/components/success-card/SuccessCard.vue
new file mode 100644
index 0000000..d5975de
--- /dev/null
+++ b/packages/ui/src/components/success-card/SuccessCard.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import Button from '../button/Button.vue'
+
+interface SuccessCardProps {
+    title?: string
+    description?: string
+    confirmText?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<SuccessCardProps>(), {
+    title: undefined,
+    description: undefined,
+    confirmText: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    confirm: []
+}>()
+
+const rootClasses = computed(() => cn('w-full max-w-md', props.class))
+
+const resolvedTitle = computed(() => props.title ?? t('successCard.defaultTitle'))
+const resolvedDescription = computed(() => props.description ?? t('successCard.defaultDescription'))
+const resolvedConfirmText = computed(() => props.confirmText ?? t('successCard.defaultConfirmText'))
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <div class="h-2 bg-brutal-success border-b-3 border-brutal" />
+        <CardContent class="pt-6">
+            <div class="flex flex-col items-center text-center">
+                <div class="relative mb-4">
+                    <div class="absolute inset-0 bg-brutal-muted border-3 border-brutal translate-x-2 translate-y-2" />
+                    <div class="relative h-16 w-16 flex items-center justify-center bg-brutal-success border-3 border-brutal shadow-brutal">
+                        <Check class="h-8 w-8 stroke-[3]" />
+                    </div>
+                </div>
+                <h3 class="text-xl font-black tracking-tight">
+{{ resolvedTitle }}
+</h3>
+                <p v-if="resolvedDescription" class="mt-2 text-sm text-brutal-muted-foreground font-medium">
+{{ resolvedDescription }}
+</p>
+                <Button variant="primary" class="mt-6" @click="emit('confirm')">
+                    {{ resolvedConfirmText }}
+                </Button>
+                <slot name="actions" />
+            </div>
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/success-card/success-card.test.ts b/packages/ui/src/components/success-card/success-card.test.ts
new file mode 100644
index 0000000..1d34546
--- /dev/null
+++ b/packages/ui/src/components/success-card/success-card.test.ts
@@ -0,0 +1,72 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import SuccessCard from './SuccessCard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('SuccessCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(SuccessCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Success')
+        expect(wrapper.text()).toContain('Your action has been completed successfully.')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(SuccessCard, {
+            props: { title: 'Payment Complete' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Payment Complete')
+    })
+
+    it('shows custom description', () => {
+        const wrapper = mount(SuccessCard, {
+            props: { description: 'Your order has been placed.' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Your order has been placed.')
+    })
+
+    it('shows custom confirm text', () => {
+        const wrapper = mount(SuccessCard, {
+            props: { confirmText: 'Continue' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Continue')
+    })
+
+    it('shows default confirm text from i18n', () => {
+        const wrapper = mount(SuccessCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Confirm')
+    })
+
+    it('emits confirm when confirm button is clicked', async () => {
+        const wrapper = mount(SuccessCard, { ...localeProvide })
+        const button = wrapper.find('button')
+        await button.trigger('click')
+        expect(wrapper.emitted('confirm')).toBeTruthy()
+        expect(wrapper.emitted('confirm')!.length).toBe(1)
+    })
+
+    it('renders check icon', () => {
+        const wrapper = mount(SuccessCard, { ...localeProvide })
+        expect(wrapper.find('svg').exists()).toBe(true)
+    })
+
+    it('renders actions slot', () => {
+        const wrapper = mount(SuccessCard, {
+            slots: { actions: '<div class="custom-action">Custom Action</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Action')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(SuccessCard, {
+            props: { class: 'my-success' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-success"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/switch.tsx b/packages/ui/src/components/switch.tsx
deleted file mode 100644
index e4223e7..0000000
--- a/packages/ui/src/components/switch.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cn } from '../lib/utils';
-
-const Switch = React.forwardRef<
-    React.ElementRef<typeof SwitchPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-    <SwitchPrimitive.Root
-        className={cn(
-            'peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center',
-            'border-3 border-brutal',
-            'transition-colors duration-150',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            'data-[state=checked]:bg-[#7FB069] data-[state=unchecked]:bg-white dark:data-[state=unchecked]:bg-gray-900',
-            className
-        )}
-        {...props}
-        ref={ref}
-    >
-        <SwitchPrimitive.Thumb
-            className={cn(
-                'pointer-events-none block h-5 w-5',
-                'bg-black dark:bg-white',
-                'shadow-brutal-sm',
-                'transition-transform duration-150',
-                'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5'
-            )}
-        />
-    </SwitchPrimitive.Root>
-));
-Switch.displayName = SwitchPrimitive.Root.displayName;
-
-export { Switch };
diff --git a/packages/ui/src/components/switch/Switch.vue b/packages/ui/src/components/switch/Switch.vue
new file mode 100644
index 0000000..e7f67d0
--- /dev/null
+++ b/packages/ui/src/components/switch/Switch.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+
+interface SwitchProps {
+    class?: string
+    modelValue?: boolean
+    defaultValue?: boolean
+    disabled?: boolean
+}
+
+const props = defineProps<SwitchProps>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+}>()
+
+const classes = computed(() =>
+    cn(
+        'peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center',
+        'border-3 border-brutal',
+        'transition-colors duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:bg-brutal-success data-[state=unchecked]:bg-brutal-bg',
+        props.class
+    )
+)
+
+const thumbClasses = computed(() =>
+    cn(
+        'pointer-events-none block h-5 w-5 bg-brutal-fg shadow-brutal-sm transition-transform duration-150',
+        'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5'
+    )
+)
+</script>
+
+<template>
+    <SwitchRoot
+        :class="classes"
+        :checked="modelValue"
+        :default-checked="defaultValue"
+        :disabled="disabled"
+        @update:checked="emit('update:modelValue', $event)"
+    >
+        <SwitchThumb :class="thumbClasses" />
+    </SwitchRoot>
+</template>
diff --git a/packages/ui/src/components/switch/switch.test.ts b/packages/ui/src/components/switch/switch.test.ts
new file mode 100644
index 0000000..6c95279
--- /dev/null
+++ b/packages/ui/src/components/switch/switch.test.ts
@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import Switch from './Switch.vue'
+
+describe('Switch', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Switch, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="switch"]').exists()).toBe(true)
+    })
+
+    it('has switch role', () => {
+        const wrapper = mount(Switch, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="switch"]').exists()).toBe(true)
+    })
+
+    it('emits update:modelValue when toggled', async () => {
+        const wrapper = mount(Switch, {
+            attachTo: document.body,
+        })
+        const el = wrapper.find('[role="switch"]')
+        await el.trigger('click')
+        expect(el.attributes('data-state')).toBe('checked')
+    })
+
+    it('is disabled when disabled=true', () => {
+        const wrapper = mount(Switch, {
+            props: { disabled: true },
+            attachTo: document.body,
+        })
+        const el = wrapper.find('[role="switch"]')
+        expect(el.attributes('disabled')).toBeDefined()
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Switch, {
+            props: { class: 'custom-class' },
+            attachTo: document.body,
+        })
+        expect(wrapper.find('[role="switch"]').classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
deleted file mode 100644
index 71361c6..0000000
--- a/packages/ui/src/components/table.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react';
-import { cn } from '../lib/utils';
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-    ({ className, ...props }, ref) => (
-        <div className="relative w-full overflow-auto">
-            <table
-                ref={ref}
-                className={cn(
-                    'w-full caption-bottom text-sm',
-                    'border-3 border-brutal',
-                    className
-                )}
-                {...props}
-            />
-        </div>
-    )
-);
-Table.displayName = 'Table';
-
-const TableHeader = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <thead
-        ref={ref}
-        className={cn(
-            'bg-[#FFE66D] dark:bg-gray-800 text-black dark:text-white',
-            '[&_tr]:border-b-3 [&_tr]:border-brutal',
-            className
-        )}
-        {...props}
-    />
-));
-TableHeader.displayName = 'TableHeader';
-
-const TableBody = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tbody
-        ref={ref}
-        className={cn(
-            '[&_tr:last-child]:border-0',
-            '[&_tr:nth-child(even)]:bg-gray-50 dark:[&_tr:nth-child(even)]:bg-gray-800',
-            'dark:text-white',
-            className
-        )}
-        {...props}
-    />
-));
-TableBody.displayName = 'TableBody';
-
-const TableFooter = React.forwardRef<
-    HTMLTableSectionElement,
-    React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-    <tfoot
-        ref={ref}
-        className={cn(
-            'border-t-3 border-brutal',
-            'bg-[#4ECDC4] dark:bg-gray-700',
-            'font-bold dark:text-white',
-            '[&>tr]:last:border-b-0',
-            className
-        )}
-        {...props}
-    />
-));
-TableFooter.displayName = 'TableFooter';
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-    ({ className, ...props }, ref) => (
-        <tr
-            ref={ref}
-            className={cn(
-                'border-b-3 border-brutal transition-colors',
-                'hover:bg-[#FFE66D]/30',
-                'data-[state=selected]:bg-[#FFE66D]',
-                className
-            )}
-            {...props}
-        />
-    )
-);
-TableRow.displayName = 'TableRow';
-
-const TableHead = React.forwardRef<
-    HTMLTableCellElement,
-    React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <th
-        ref={ref}
-        className={cn(
-            'h-12 px-4 text-left align-middle font-black tracking-wide text-black',
-            '[&:_has([role=checkbox])]:pr-0',
-            'border-r-3 border-[var(--brutal-border-color,#000)] last:border-r-0',
-            className
-        )}
-        {...props}
-    />
-));
-TableHead.displayName = 'TableHead';
-
-const TableCell = React.forwardRef<
-    HTMLTableCellElement,
-    React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-    <td
-        ref={ref}
-        className={cn(
-            'p-4 align-middle font-medium',
-            '[&:_has([role=checkbox])]:pr-0',
-            'border-r-3 border-brutal last:border-r-0',
-            className
-        )}
-        {...props}
-    />
-));
-TableCell.displayName = 'TableCell';
-
-const TableCaption = React.forwardRef<
-    HTMLTableCaptionElement,
-    React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-    <caption
-        ref={ref}
-        className={cn('mt-4 text-sm font-bold text-gray-600 dark:text-gray-400', className)}
-        {...props}
-    />
-));
-TableCaption.displayName = 'TableCaption';
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/ui/src/components/table/Table.vue b/packages/ui/src/components/table/Table.vue
new file mode 100644
index 0000000..542d9ad
--- /dev/null
+++ b/packages/ui/src/components/table/Table.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableProps {
+    class?: string
+}
+
+const props = defineProps<TableProps>()
+
+const classes = computed(() =>
+    cn('w-full caption-bottom text-sm', 'border-3 border-brutal', props.class)
+)
+</script>
+
+<template>
+    <div class="relative w-full overflow-x-auto">
+        <table :class="classes">
+            <slot />
+        </table>
+    </div>
+</template>
diff --git a/packages/ui/src/components/table/TableBody.vue b/packages/ui/src/components/table/TableBody.vue
new file mode 100644
index 0000000..4f0a14e
--- /dev/null
+++ b/packages/ui/src/components/table/TableBody.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableBodyProps {
+    class?: string
+}
+
+const props = defineProps<TableBodyProps>()
+
+const classes = computed(() =>
+    cn(
+        '[&_tr:last-child]:border-0',
+        '[&_tr:nth-child(even)]:bg-brutal-muted',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <tbody :class="classes">
+        <slot />
+    </tbody>
+</template>
diff --git a/packages/ui/src/components/table/TableCaption.vue b/packages/ui/src/components/table/TableCaption.vue
new file mode 100644
index 0000000..6ac9cf6
--- /dev/null
+++ b/packages/ui/src/components/table/TableCaption.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableCaptionProps {
+    class?: string
+}
+
+const props = defineProps<TableCaptionProps>()
+
+const classes = computed(() =>
+    cn('mt-4 text-sm font-bold text-brutal-muted-foreground', props.class)
+)
+</script>
+
+<template>
+    <caption :class="classes">
+        <slot />
+    </caption>
+</template>
diff --git a/packages/ui/src/components/table/TableCell.vue b/packages/ui/src/components/table/TableCell.vue
new file mode 100644
index 0000000..ff910ad
--- /dev/null
+++ b/packages/ui/src/components/table/TableCell.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableCellProps {
+    class?: string
+}
+
+const props = defineProps<TableCellProps>()
+
+const classes = computed(() =>
+    cn(
+        'p-4 align-middle font-medium',
+        '[&:has([role=checkbox])]:pr-0',
+        'border-r-3 border-brutal last:border-r-0',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <td :class="classes">
+        <slot />
+    </td>
+</template>
diff --git a/packages/ui/src/components/table/TableFooter.vue b/packages/ui/src/components/table/TableFooter.vue
new file mode 100644
index 0000000..bec127b
--- /dev/null
+++ b/packages/ui/src/components/table/TableFooter.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableFooterProps {
+    class?: string
+}
+
+const props = defineProps<TableFooterProps>()
+
+const classes = computed(() =>
+    cn('border-t-3 border-brutal bg-brutal-secondary font-bold [&>tr]:last:border-b-0', props.class)
+)
+</script>
+
+<template>
+    <tfoot :class="classes">
+        <slot />
+    </tfoot>
+</template>
diff --git a/packages/ui/src/components/table/TableHead.vue b/packages/ui/src/components/table/TableHead.vue
new file mode 100644
index 0000000..0f65ecf
--- /dev/null
+++ b/packages/ui/src/components/table/TableHead.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableHeadProps {
+    class?: string
+}
+
+const props = defineProps<TableHeadProps>()
+
+const classes = computed(() =>
+    cn(
+        'h-12 px-4 text-left align-middle font-black tracking-wide text-brutal-fg bg-brutal-accent',
+        '[&:has([role=checkbox])]:pr-0',
+        'border-r-3 border-brutal last:border-r-0',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <th :class="classes">
+        <slot />
+    </th>
+</template>
diff --git a/packages/ui/src/components/table/TableHeader.vue b/packages/ui/src/components/table/TableHeader.vue
new file mode 100644
index 0000000..cfca9e1
--- /dev/null
+++ b/packages/ui/src/components/table/TableHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableHeaderProps {
+    class?: string
+}
+
+const props = defineProps<TableHeaderProps>()
+
+const classes = computed(() =>
+    cn('bg-brutal-accent text-brutal-fg [&_tr]:border-b-3 [&_tr]:border-brutal', props.class)
+)
+</script>
+
+<template>
+    <thead :class="classes">
+        <slot />
+    </thead>
+</template>
diff --git a/packages/ui/src/components/table/TableRow.vue b/packages/ui/src/components/table/TableRow.vue
new file mode 100644
index 0000000..9acb9db
--- /dev/null
+++ b/packages/ui/src/components/table/TableRow.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TableRowProps {
+    class?: string
+}
+
+const props = defineProps<TableRowProps>()
+
+const classes = computed(() =>
+    cn(
+        'border-b-3 border-brutal transition-colors',
+        'hover:bg-brutal-accent/30',
+        'data-[state=selected]:bg-brutal-accent',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <tr :class="classes">
+        <slot />
+    </tr>
+</template>
diff --git a/packages/ui/src/components/table/table.test.ts b/packages/ui/src/components/table/table.test.ts
new file mode 100644
index 0000000..37fc9ec
--- /dev/null
+++ b/packages/ui/src/components/table/table.test.ts
@@ -0,0 +1,172 @@
+import { mount } from '@vue/test-utils'
+import Table from './Table.vue'
+import TableHeader from './TableHeader.vue'
+import TableBody from './TableBody.vue'
+import TableFooter from './TableFooter.vue'
+import TableRow from './TableRow.vue'
+import TableHead from './TableHead.vue'
+import TableCell from './TableCell.vue'
+import TableCaption from './TableCaption.vue'
+
+describe('Table', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Table)
+        const table = wrapper.find('table')
+        expect(table.exists()).toBe(true)
+        expect(table.classes()).toContain('border-3')
+        expect(table.classes()).toContain('border-brutal')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Table, {
+            slots: { default: '<tbody><tr><td>Data</td></tr></tbody>' },
+        })
+        expect(wrapper.find('table').text()).toBe('Data')
+    })
+
+    it('wraps table in container', () => {
+        const wrapper = mount(Table)
+        const container = wrapper.find('div')
+        expect(container.exists()).toBe(true)
+        expect(container.classes()).toContain('relative')
+        expect(container.classes()).toContain('w-full')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Table, { props: { class: 'my-table' } })
+        expect(wrapper.find('table').classes()).toContain('my-table')
+    })
+})
+
+describe('TableHeader', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TableHeader, {
+            slots: { default: '<tr><th>Col</th></tr>' },
+        })
+        expect(wrapper.text()).toBe('Col')
+    })
+
+    it('renders thead element', () => {
+        const wrapper = mount(TableHeader)
+        expect(wrapper.element.tagName).toBe('THEAD')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TableHeader, { props: { class: 'my-thead' } })
+        expect(wrapper.classes()).toContain('my-thead')
+    })
+})
+
+describe('TableBody', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TableBody, {
+            slots: { default: '<tr><td>Row</td></tr>' },
+        })
+        expect(wrapper.text()).toBe('Row')
+    })
+
+    it('renders tbody element', () => {
+        const wrapper = mount(TableBody)
+        expect(wrapper.element.tagName).toBe('TBODY')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TableBody, { props: { class: 'my-tbody' } })
+        expect(wrapper.classes()).toContain('my-tbody')
+    })
+})
+
+describe('TableFooter', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TableFooter, {
+            slots: { default: '<tr><td>Footer</td></tr>' },
+        })
+        expect(wrapper.text()).toBe('Footer')
+    })
+
+    it('renders tfoot element', () => {
+        const wrapper = mount(TableFooter)
+        expect(wrapper.element.tagName).toBe('TFOOT')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TableFooter, { props: { class: 'my-tfoot' } })
+        expect(wrapper.classes()).toContain('my-tfoot')
+    })
+})
+
+describe('TableRow', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TableRow, {
+            slots: { default: '<td>Cell</td>' },
+        })
+        expect(wrapper.text()).toBe('Cell')
+    })
+
+    it('renders tr element', () => {
+        const wrapper = mount(TableRow)
+        expect(wrapper.element.tagName).toBe('TR')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TableRow, { props: { class: 'my-row' } })
+        expect(wrapper.classes()).toContain('my-row')
+    })
+})
+
+describe('TableHead', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TableHead, {
+            slots: { default: 'Header' },
+        })
+        expect(wrapper.text()).toBe('Header')
+    })
+
+    it('renders th element', () => {
+        const wrapper = mount(TableHead)
+        expect(wrapper.element.tagName).toBe('TH')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TableHead, { props: { class: 'my-th' } })
+        expect(wrapper.classes()).toContain('my-th')
+    })
+})
+
+describe('TableCell', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TableCell, {
+            slots: { default: 'Data' },
+        })
+        expect(wrapper.text()).toBe('Data')
+    })
+
+    it('renders td element', () => {
+        const wrapper = mount(TableCell)
+        expect(wrapper.element.tagName).toBe('TD')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TableCell, { props: { class: 'my-td' } })
+        expect(wrapper.classes()).toContain('my-td')
+    })
+})
+
+describe('TableCaption', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TableCaption, {
+            slots: { default: 'Table caption' },
+        })
+        expect(wrapper.text()).toBe('Table caption')
+    })
+
+    it('renders caption element', () => {
+        const wrapper = mount(TableCaption)
+        expect(wrapper.element.tagName).toBe('CAPTION')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TableCaption, { props: { class: 'my-caption' } })
+        expect(wrapper.classes()).toContain('my-caption')
+    })
+})
diff --git a/packages/ui/src/components/tabs-nav/TabsNav.vue b/packages/ui/src/components/tabs-nav/TabsNav.vue
new file mode 100644
index 0000000..a922226
--- /dev/null
+++ b/packages/ui/src/components/tabs-nav/TabsNav.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TabsRoot } from 'reka-ui'
+import { cn } from '../../lib/utils'
+import TabsList from '../tabs/TabsList.vue'
+import TabsTrigger from '../tabs/TabsTrigger.vue'
+import TabsContent from '../tabs/TabsContent.vue'
+import Card from '../card/Card.vue'
+
+export interface TabItem {
+    label: string
+    value: string
+}
+
+interface TabsNavProps {
+    tabs?: TabItem[]
+    defaultValue?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<TabsNavProps>(), {
+    tabs: () => [],
+    defaultValue: undefined,
+    class: '',
+})
+
+const rootClasses = computed(() => cn('w-full max-w-4xl mx-auto', props.class))
+
+const activeDefaultValue = computed(() => {
+    if (props.defaultValue) return props.defaultValue
+    if (props.tabs.length > 0) return props.tabs[0].value
+    return ''
+})
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <slot name="header" />
+
+        <TabsRoot :default-value="activeDefaultValue" class="w-full">
+            <TabsList class="w-full flex">
+                <TabsTrigger
+                    v-for="tab in tabs"
+                    :key="tab.value"
+                    :value="tab.value"
+                    class="flex-1"
+                >
+                    {{ tab.label }}
+                </TabsTrigger>
+            </TabsList>
+
+            <slot>
+                <TabsContent
+                    v-for="tab in tabs"
+                    :key="tab.value"
+                    :value="tab.value"
+                >
+                    <Card variant="flat">
+                        <p class="text-brutal-muted-foreground font-medium">{{ tab.label }}</p>
+                    </Card>
+                </TabsContent>
+            </slot>
+        </TabsRoot>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/packages/ui/src/components/tabs-nav/tabs-nav.test.ts b/packages/ui/src/components/tabs-nav/tabs-nav.test.ts
new file mode 100644
index 0000000..af379cc
--- /dev/null
+++ b/packages/ui/src/components/tabs-nav/tabs-nav.test.ts
@@ -0,0 +1,86 @@
+import { mount } from '@vue/test-utils'
+import TabsNav from './TabsNav.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+const mockTabs = [
+    { label: 'Overview', value: 'overview' },
+    { label: 'Features', value: 'features' },
+    { label: 'Pricing', value: 'pricing' },
+]
+
+const globalStubs = {
+    TabsRoot: primitiveStub,
+    TabsList: primitiveStub,
+    TabsTrigger: primitiveStub,
+    TabsContent: primitiveStub,
+}
+
+describe('TabsNav', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(TabsNav, {
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.find('div').exists()).toBe(true)
+    })
+
+    it('renders tab triggers', () => {
+        const wrapper = mount(TabsNav, {
+            props: { tabs: mockTabs },
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.text()).toContain('Overview')
+        expect(wrapper.text()).toContain('Features')
+        expect(wrapper.text()).toContain('Pricing')
+    })
+
+    it('renders with empty tabs array', () => {
+        const wrapper = mount(TabsNav, {
+            props: { tabs: [] },
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.find('div').exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TabsNav, {
+            props: { class: 'my-tabs-nav' },
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.classes()).toContain('my-tabs-nav')
+    })
+
+    it('renders header slot', () => {
+        const wrapper = mount(TabsNav, {
+            slots: { header: '<div class="custom-header">Custom Header</div>' },
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.find('.custom-header').exists()).toBe(true)
+    })
+
+    it('renders footer slot', () => {
+        const wrapper = mount(TabsNav, {
+            slots: { footer: '<div class="custom-footer">Custom Footer</div>' },
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.find('.custom-footer').exists()).toBe(true)
+    })
+
+    it('renders default slot', () => {
+        const wrapper = mount(TabsNav, {
+            slots: { default: '<div class="custom-content">Custom Content</div>' },
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.find('.custom-content').exists()).toBe(true)
+    })
+
+    it('uses defaultValue prop', () => {
+        const wrapper = mount(TabsNav, {
+            props: { tabs: mockTabs, defaultValue: 'features' },
+            global: { stubs: globalStubs },
+        })
+        expect(wrapper.text()).toContain('Overview')
+    })
+})
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
deleted file mode 100644
index 7a7f65f..0000000
--- a/packages/ui/src/components/tabs.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '../lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-    React.ElementRef<typeof TabsPrimitive.List>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-    <TabsPrimitive.List
-        ref={ref}
-        className={cn(
-            'inline-flex h-12 items-center justify-center p-1 gap-1',
-            'bg-white dark:bg-gray-900 border-3 border-brutal',
-            className
-        )}
-        {...props}
-    />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-    React.ElementRef<typeof TabsPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-    <TabsPrimitive.Trigger
-        ref={ref}
-        className={cn(
-            'inline-flex items-center justify-center whitespace-nowrap px-4 py-2',
-            'font-bold text-sm tracking-wide dark:text-white',
-            'border-3 border-transparent',
-            'transition-all duration-150',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            'disabled:pointer-events-none disabled:opacity-50',
-            'data-[state=active]:bg-[#FFE66D] data-[state=active]:text-black data-[state=active]:border-brutal data-[state=active]:shadow-brutal-sm',
-            'data-[state=inactive]:hover:bg-gray-100 dark:data-[state=inactive]:hover:bg-gray-800',
-            className
-        )}
-        {...props}
-    />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-    React.ElementRef<typeof TabsPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-    <TabsPrimitive.Content
-        ref={ref}
-        className={cn(
-            'mt-3 p-4',
-            'bg-white dark:bg-gray-900 border-3 border-brutal shadow-brutal dark:text-white',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:ring-offset-2',
-            className
-        )}
-        {...props}
-    />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/packages/ui/src/components/tabs/TabsContent.vue b/packages/ui/src/components/tabs/TabsContent.vue
new file mode 100644
index 0000000..59662e4
--- /dev/null
+++ b/packages/ui/src/components/tabs/TabsContent.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TabsContent as TabsContentPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface TabsContentProps {
+    value: string
+    class?: string
+}
+
+const props = defineProps<TabsContentProps>()
+
+const classes = computed(() =>
+    cn(
+        'mt-3 p-4',
+        'bg-brutal-bg text-brutal-fg border-3 border-brutal shadow-brutal',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <TabsContentPrimitive :value="value" :class="classes">
+        <slot />
+    </TabsContentPrimitive>
+</template>
diff --git a/packages/ui/src/components/tabs/TabsList.vue b/packages/ui/src/components/tabs/TabsList.vue
new file mode 100644
index 0000000..bfeac67
--- /dev/null
+++ b/packages/ui/src/components/tabs/TabsList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TabsList as TabsListPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface TabsListProps {
+    class?: string
+}
+
+const props = defineProps<TabsListProps>()
+
+const classes = computed(() =>
+    cn(
+        'inline-flex h-12 items-center justify-center p-1 gap-1',
+        'bg-brutal-bg border-3 border-brutal shadow-brutal',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <TabsListPrimitive :class="classes">
+        <slot />
+    </TabsListPrimitive>
+</template>
diff --git a/packages/ui/src/components/tabs/TabsTrigger.vue b/packages/ui/src/components/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..bd534f2
--- /dev/null
+++ b/packages/ui/src/components/tabs/TabsTrigger.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TabsTrigger as TabsTriggerPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface TabsTriggerProps {
+    value: string
+    disabled?: boolean
+    class?: string
+}
+
+const props = defineProps<TabsTriggerProps>()
+
+const classes = computed(() =>
+    cn(
+        'inline-flex items-center justify-center whitespace-nowrap px-4 py-2',
+        'font-bold text-sm tracking-wide',
+        'border-3 border-transparent',
+        'transition-all duration-150',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'data-[state=active]:bg-brutal-accent data-[state=active]:text-brutal-fg data-[state=active]:border-brutal data-[state=active]:shadow-brutal-sm',
+        'data-[state=inactive]:hover:bg-brutal-muted',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <TabsTriggerPrimitive :value="value" :disabled="disabled" :class="classes">
+        <slot />
+    </TabsTriggerPrimitive>
+</template>
diff --git a/packages/ui/src/components/tabs/tabs.test.ts b/packages/ui/src/components/tabs/tabs.test.ts
new file mode 100644
index 0000000..269f18c
--- /dev/null
+++ b/packages/ui/src/components/tabs/tabs.test.ts
@@ -0,0 +1,67 @@
+import { mount } from '@vue/test-utils'
+import TabsList from './TabsList.vue'
+import TabsTrigger from './TabsTrigger.vue'
+import TabsContent from './TabsContent.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('TabsList', () => {
+    it('renders with brutal styling classes', () => {
+        const wrapper = mount(TabsList, {
+            global: { stubs: { TabsList: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+        expect(wrapper.classes()).toContain('inline-flex')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TabsList, {
+            props: { class: 'custom-list' },
+            global: { stubs: { TabsList: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-list')
+    })
+})
+
+describe('TabsTrigger', () => {
+    it('renders with variant classes', () => {
+        const wrapper = mount(TabsTrigger, {
+            props: { value: 'tab1' },
+            global: { stubs: { TabsTrigger: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('font-bold')
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-transparent')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TabsTrigger, {
+            props: { value: 'tab1', class: 'custom-trigger' },
+            global: { stubs: { TabsTrigger: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-trigger')
+    })
+})
+
+describe('TabsContent', () => {
+    it('renders slot content', () => {
+        const wrapper = mount(TabsContent, {
+            props: { value: 'tab1' },
+            slots: { default: 'Content text' },
+            global: { stubs: { TabsContent: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Content text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TabsContent, {
+            props: { value: 'tab1', class: 'custom-content' },
+            global: { stubs: { TabsContent: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-content')
+    })
+})
diff --git a/packages/ui/src/components/tags-input/TagsInput.vue b/packages/ui/src/components/tags-input/TagsInput.vue
new file mode 100644
index 0000000..34089c8
--- /dev/null
+++ b/packages/ui/src/components/tags-input/TagsInput.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { TagsInputRoot, type TagsInputRootProps, type TagsInputRootEmits, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputRootProps & { class?: string }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const classes = computed(() =>
+    cn(
+        'flex flex-wrap gap-2 items-center p-2 min-h-11 border-3 border-brutal bg-brutal-bg rounded-brutal shadow-brutal focus-within:ring-2 focus-within:ring-brutal-ring focus-within:ring-offset-2 transition-all duration-150',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <TagsInputRoot v-bind="forwarded" :class="classes">
+        <slot />
+    </TagsInputRoot>
+</template>
diff --git a/packages/ui/src/components/tags-input/TagsInputInput.vue b/packages/ui/src/components/tags-input/TagsInputInput.vue
new file mode 100644
index 0000000..e5ba5ae
--- /dev/null
+++ b/packages/ui/src/components/tags-input/TagsInputInput.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { TagsInputInput, type TagsInputInputProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: string }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const classes = computed(() =>
+    cn(
+        'flex-1 bg-transparent px-2 text-sm font-bold placeholder:text-brutal-placeholder placeholder:font-normal focus:outline-none disabled:cursor-not-allowed',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <TagsInputInput v-bind="delegatedProps" :class="classes" />
+</template>
diff --git a/packages/ui/src/components/tags-input/TagsInputItem.vue b/packages/ui/src/components/tags-input/TagsInputItem.vue
new file mode 100644
index 0000000..e023797
--- /dev/null
+++ b/packages/ui/src/components/tags-input/TagsInputItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { TagsInputItem, type TagsInputItemProps } from 'reka-ui'
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { tagsInputItemVariants } from './tags-input-variants'
+
+type TagsInputItemVariantProps = VariantProps<typeof tagsInputItemVariants>
+
+interface Props extends TagsInputItemProps {
+    variant?: NonNullable<TagsInputItemVariantProps['variant']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: 'primary',
+    class: '',
+})
+
+const delegatedProps = computed(() => {
+    const { class: _, variant: __, ...delegated } = props
+    return delegated
+})
+
+const classes = computed(() =>
+    cn(tagsInputItemVariants({ variant: props.variant }), props.class)
+)
+</script>
+
+<template>
+    <TagsInputItem v-bind="delegatedProps" :class="classes">
+        <slot />
+    </TagsInputItem>
+</template>
diff --git a/packages/ui/src/components/tags-input/TagsInputItemDelete.vue b/packages/ui/src/components/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 0000000..fcb0f79
--- /dev/null
+++ b/packages/ui/src/components/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { TagsInputItemDelete, type TagsInputItemDeleteProps } from 'reka-ui'
+import { computed } from 'vue'
+import { X } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: string }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const classes = computed(() =>
+    cn(
+        'h-4 w-4 flex items-center justify-center border-3 border-brutal bg-brutal-bg text-brutal-fg shadow-brutal-sm transition-all hover:bg-brutal-destructive hover:text-brutal-fg rounded-brutal active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <TagsInputItemDelete v-bind="delegatedProps" :class="classes">
+        <slot>
+            <X class="h-3.5 w-3.5 stroke-[3]" />
+        </slot>
+    </TagsInputItemDelete>
+</template>
diff --git a/packages/ui/src/components/tags-input/TagsInputItemText.vue b/packages/ui/src/components/tags-input/TagsInputItemText.vue
new file mode 100644
index 0000000..7ef6415
--- /dev/null
+++ b/packages/ui/src/components/tags-input/TagsInputItemText.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { TagsInputItemText, type TagsInputItemTextProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: string }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const classes = computed(() =>
+    cn('text-xs font-black uppercase tracking-wide', props.class)
+)
+</script>
+
+<template>
+    <TagsInputItemText v-bind="delegatedProps" :class="classes">
+        <slot />
+    </TagsInputItemText>
+</template>
diff --git a/packages/ui/src/components/tags-input/tags-input-variants.ts b/packages/ui/src/components/tags-input/tags-input-variants.ts
new file mode 100644
index 0000000..ba024a3
--- /dev/null
+++ b/packages/ui/src/components/tags-input/tags-input-variants.ts
@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority'
+
+export const tagsInputItemVariants = cva(
+    [
+        'flex items-center gap-1.5 px-2.5 py-1',
+        'border-3 border-brutal font-black text-sm rounded-brutal shadow-brutal-sm transition-all',
+        'data-[state=active]:ring-2 data-[state=active]:ring-brutal-ring data-[state=active]:ring-offset-1',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'bg-brutal-bg text-brutal-fg',
+                primary: 'bg-brutal-primary text-brutal-fg',
+                secondary: 'bg-brutal-secondary text-brutal-fg',
+                accent: 'bg-brutal-accent text-brutal-fg',
+                danger: 'bg-brutal-destructive text-brutal-fg',
+                success: 'bg-brutal-success text-brutal-fg',
+            },
+        },
+        defaultVariants: {
+            variant: 'primary',
+        },
+    }
+)
diff --git a/packages/ui/src/components/tags-input/tags-input.test.ts b/packages/ui/src/components/tags-input/tags-input.test.ts
new file mode 100644
index 0000000..447a3df
--- /dev/null
+++ b/packages/ui/src/components/tags-input/tags-input.test.ts
@@ -0,0 +1,235 @@
+import { mount } from '@vue/test-utils'
+import TagsInput from './TagsInput.vue'
+import TagsInputInput from './TagsInputInput.vue'
+import TagsInputItem from './TagsInputItem.vue'
+import TagsInputItemText from './TagsInputItemText.vue'
+import TagsInputItemDelete from './TagsInputItemDelete.vue'
+
+const primitiveStub = {
+    template: '<div><slot /></div>',
+}
+
+describe('TagsInput', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(TagsInput, {
+            global: { stubs: { TagsInputRoot: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex')
+        expect(classes).toContain('flex-wrap')
+        expect(classes).toContain('gap-2')
+        expect(classes).toContain('items-center')
+        expect(classes).toContain('p-2')
+        expect(classes).toContain('min-h-11')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('bg-brutal-bg')
+        expect(classes).toContain('rounded-brutal')
+        expect(classes).toContain('shadow-brutal')
+        expect(classes).toContain('transition-all')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(TagsInput, {
+            slots: { default: 'Tag content here' },
+            global: { stubs: { TagsInputRoot: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Tag content here')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TagsInput, {
+            props: { class: 'custom-root' },
+            global: { stubs: { TagsInputRoot: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-root')
+    })
+})
+
+describe('TagsInputInput', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(TagsInputInput, {
+            global: { stubs: { TagsInputInput: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex-1')
+        expect(classes).toContain('bg-transparent')
+        expect(classes).toContain('px-2')
+        expect(classes).toContain('text-sm')
+        expect(classes).toContain('font-bold')
+        expect(classes).toContain('focus:outline-none')
+        expect(classes).toContain('disabled:cursor-not-allowed')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TagsInputInput, {
+            props: { class: 'custom-input' },
+            global: { stubs: { TagsInputInput: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-input')
+    })
+})
+
+describe('TagsInputItem', () => {
+    it('renders with default variant (primary) classes', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex')
+        expect(classes).toContain('items-center')
+        expect(classes).toContain('gap-1.5')
+        expect(classes).toContain('px-2.5')
+        expect(classes).toContain('py-1')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('font-black')
+        expect(classes).toContain('text-sm')
+        expect(classes).toContain('rounded-brutal')
+        expect(classes).toContain('shadow-brutal-sm')
+        expect(classes).toContain('transition-all')
+        expect(classes).toContain('bg-brutal-primary')
+        expect(classes).toContain('text-brutal-fg')
+    })
+
+    it('applies default variant classes', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1', variant: 'default' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('bg-brutal-bg')
+        expect(classes).toContain('text-brutal-fg')
+    })
+
+    it('applies primary variant classes', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1', variant: 'primary' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-primary')
+    })
+
+    it('applies secondary variant classes', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1', variant: 'secondary' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-secondary')
+    })
+
+    it('applies accent variant classes', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1', variant: 'accent' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-accent')
+    })
+
+    it('applies danger variant classes', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1', variant: 'danger' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-destructive')
+    })
+
+    it('applies success variant classes', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1', variant: 'success' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-success')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1' },
+            slots: { default: 'Tag label' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Tag label')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TagsInputItem, {
+            props: { value: 'tag1', class: 'custom-item' },
+            global: { stubs: { TagsInputItem: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+    })
+})
+
+describe('TagsInputItemText', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(TagsInputItemText, {
+            global: { stubs: { TagsInputItemText: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('text-xs')
+        expect(classes).toContain('font-black')
+        expect(classes).toContain('uppercase')
+        expect(classes).toContain('tracking-wide')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(TagsInputItemText, {
+            slots: { default: 'Hello Tag' },
+            global: { stubs: { TagsInputItemText: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Hello Tag')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TagsInputItemText, {
+            props: { class: 'custom-text' },
+            global: { stubs: { TagsInputItemText: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-text')
+    })
+})
+
+describe('TagsInputItemDelete', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(TagsInputItemDelete, {
+            global: { stubs: { TagsInputItemDelete: primitiveStub } },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('h-4')
+        expect(classes).toContain('w-4')
+        expect(classes).toContain('flex')
+        expect(classes).toContain('items-center')
+        expect(classes).toContain('justify-center')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('bg-brutal-bg')
+        expect(classes).toContain('text-brutal-fg')
+        expect(classes).toContain('shadow-brutal-sm')
+        expect(classes).toContain('transition-all')
+        expect(classes).toContain('rounded-brutal')
+    })
+
+    it('renders default slot with X icon', () => {
+        const wrapper = mount(TagsInputItemDelete, {
+            global: { stubs: { TagsInputItemDelete: primitiveStub } },
+        })
+        expect(wrapper.find('svg').exists() || wrapper.findComponent({ name: 'X' }).exists()).toBe(true)
+    })
+
+    it('renders custom slot content', () => {
+        const wrapper = mount(TagsInputItemDelete, {
+            slots: { default: 'Remove' },
+            global: { stubs: { TagsInputItemDelete: primitiveStub } },
+        })
+        expect(wrapper.text()).toBe('Remove')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TagsInputItemDelete, {
+            props: { class: 'custom-delete' },
+            global: { stubs: { TagsInputItemDelete: primitiveStub } },
+        })
+        expect(wrapper.classes()).toContain('custom-delete')
+    })
+})
diff --git a/packages/ui/src/components/testimonial-card/TestimonialCard.vue b/packages/ui/src/components/testimonial-card/TestimonialCard.vue
new file mode 100644
index 0000000..70e889d
--- /dev/null
+++ b/packages/ui/src/components/testimonial-card/TestimonialCard.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Quote } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import Avatar from '../avatar/Avatar.vue'
+import AvatarFallback from '../avatar/AvatarFallback.vue'
+import Badge from '../badge/Badge.vue'
+
+interface TestimonialCardProps {
+    quote?: string
+    author?: string
+    role?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<TestimonialCardProps>(), {
+    quote: undefined,
+    author: undefined,
+    role: undefined,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const rootClasses = computed(() => cn('w-full max-w-lg', props.class))
+
+const resolvedQuote = computed(() => props.quote ?? t('testimonialCard.defaultQuote'))
+const resolvedAuthor = computed(() => props.author ?? t('testimonialCard.defaultAuthor'))
+const resolvedRole = computed(() => props.role ?? t('testimonialCard.defaultRole'))
+
+const resolvedVerified = computed(() => t('testimonialCard.verified'))
+
+const initials = computed(() => {
+    return resolvedAuthor.value
+        .split(' ')
+        .map(w => w[0])
+        .join('')
+        .slice(0, 2)
+        .toUpperCase()
+})
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <CardContent>
+            <div class="flex items-start gap-4">
+                <div class="shrink-0">
+                    <Avatar size="lg" shape="square">
+                        <AvatarFallback>{{ initials }}</AvatarFallback>
+                    </Avatar>
+                </div>
+                <div class="flex-1 min-w-0">
+                    <Quote class="h-8 w-8 stroke-[2.5] text-brutal-primary mb-2" />
+                    <p class="text-base font-bold leading-relaxed">
+{{ resolvedQuote }}
+</p>
+                    <div class="mt-4 flex items-center gap-3">
+                        <div>
+                            <p class="font-black text-sm">
+{{ resolvedAuthor }}
+</p>
+                            <p class="text-xs text-brutal-muted-foreground font-medium">
+{{ resolvedRole }}
+</p>
+                        </div>
+                        <Badge variant="secondary" size="sm">
+                            {{ resolvedVerified }}
+                        </Badge>
+                    </div>
+                </div>
+            </div>
+            <slot name="actions" />
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/testimonial-card/testimonial-card.test.ts b/packages/ui/src/components/testimonial-card/testimonial-card.test.ts
new file mode 100644
index 0000000..a576248
--- /dev/null
+++ b/packages/ui/src/components/testimonial-card/testimonial-card.test.ts
@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import TestimonialCard from './TestimonialCard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('TestimonialCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(TestimonialCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('This product has completely transformed our workflow.')
+        expect(wrapper.text()).toContain('Alex Johnson')
+        expect(wrapper.text()).toContain('Product Manager')
+    })
+
+    it('shows custom quote', () => {
+        const wrapper = mount(TestimonialCard, {
+            props: { quote: 'Amazing experience!' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Amazing experience!')
+    })
+
+    it('shows custom author', () => {
+        const wrapper = mount(TestimonialCard, {
+            props: { author: 'Jane Doe' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Jane Doe')
+    })
+
+    it('shows custom role', () => {
+        const wrapper = mount(TestimonialCard, {
+            props: { role: 'CTO' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('CTO')
+    })
+
+    it('renders avatar with initials from author name', () => {
+        const wrapper = mount(TestimonialCard, {
+            props: { author: 'John Smith' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('JS')
+    })
+
+    it('renders Verified badge', () => {
+        const wrapper = mount(TestimonialCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Verified')
+    })
+
+    it('renders Quote icon', () => {
+        const wrapper = mount(TestimonialCard, { ...localeProvide })
+        const svg = wrapper.find('svg')
+        expect(svg.exists()).toBe(true)
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TestimonialCard, {
+            props: { class: 'my-testimonial' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-testimonial"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/textarea.tsx b/packages/ui/src/components/textarea.tsx
deleted file mode 100644
index 6f19c9f..0000000
--- a/packages/ui/src/components/textarea.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../lib/utils';
-
-const textareaVariants = cva(
-    [
-        'flex min-h-[100px] w-full',
-        'border-3 border-brutal rounded-brutal',
-        'bg-brutal-bg text-brutal-fg',
-        'font-medium',
-        'placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:font-normal',
-        'transition-all duration-150',
-        'focus:outline-none focus:shadow-brutal',
-        'focus-visible:ring-2 focus-visible:ring-[var(--brutal-ring,#000)] focus-visible:ring-offset-2',
-        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',
-        'resize-none',
-    ],
-    {
-        variants: {
-            variant: {
-                default: '',
-                error: 'border-[#EF476F] focus:shadow-[4px_4px_0px_0px_#EF476F]',
-                success: 'border-[#7FB069] focus:shadow-[4px_4px_0px_0px_#7FB069]',
-            },
-            size: {
-                sm: 'px-3 py-2 text-sm',
-                default: 'px-4 py-3 text-base',
-                lg: 'px-5 py-4 text-lg',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-export interface TextareaProps
-    extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,
-        VariantProps<typeof textareaVariants> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-    ({ className, variant, size, ...props }, ref) => {
-        return (
-            <textarea
-                className={cn(textareaVariants({ variant, size, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
-);
-Textarea.displayName = 'Textarea';
-
-export { Textarea, textareaVariants };
diff --git a/packages/ui/src/components/textarea/Textarea.vue b/packages/ui/src/components/textarea/Textarea.vue
new file mode 100644
index 0000000..d276c69
--- /dev/null
+++ b/packages/ui/src/components/textarea/Textarea.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { textareaVariants } from './textarea-variants'
+
+type TextareaVariantProps = VariantProps<typeof textareaVariants>
+
+interface TextareaProps {
+    modelValue?: string
+    variant?: NonNullable<TextareaVariantProps['variant']>
+    textareaSize?: NonNullable<TextareaVariantProps['textareaSize']>
+    disabled?: boolean
+    placeholder?: string
+    class?: string
+}
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+    modelValue: undefined,
+    variant: 'default',
+    textareaSize: 'default',
+    disabled: false,
+    placeholder: '',
+    class: '',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const classes = computed(() =>
+    cn(textareaVariants({ variant: props.variant, textareaSize: props.textareaSize }), props.class)
+)
+</script>
+
+<template>
+    <textarea
+        :value="modelValue"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :class="classes"
+        @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    />
+</template>
diff --git a/packages/ui/src/components/textarea/textarea-variants.ts b/packages/ui/src/components/textarea/textarea-variants.ts
new file mode 100644
index 0000000..9608ef8
--- /dev/null
+++ b/packages/ui/src/components/textarea/textarea-variants.ts
@@ -0,0 +1,34 @@
+import { cva } from 'class-variance-authority'
+
+export const textareaVariants = cva(
+    [
+        'flex min-h-[100px] w-full',
+        'border-3 border-brutal',
+        'bg-brutal-bg text-brutal-fg',
+        'font-medium',
+        'placeholder:text-brutal-placeholder placeholder:font-normal',
+        'transition-all duration-150',
+        'focus:outline-none focus:shadow-brutal',
+        'focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-brutal-muted',
+        'resize-none',
+    ],
+    {
+        variants: {
+            variant: {
+                default: '',
+                error: 'border-brutal-destructive focus:shadow-brutal-primary',
+                success: 'border-brutal-success focus:shadow-brutal-secondary',
+            },
+            textareaSize: {
+                sm: 'px-3 py-2 text-sm',
+                default: 'px-4 py-3 text-base',
+                lg: 'px-5 py-4 text-lg',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            textareaSize: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/textarea/textarea.test.ts b/packages/ui/src/components/textarea/textarea.test.ts
new file mode 100644
index 0000000..a629973
--- /dev/null
+++ b/packages/ui/src/components/textarea/textarea.test.ts
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils'
+import Textarea from './Textarea.vue'
+
+describe('Textarea', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Textarea)
+        expect(wrapper.element.tagName).toBe('TEXTAREA')
+    })
+
+    it('applies variant classes', async () => {
+        const wrapper = mount(Textarea)
+
+        await wrapper.setProps({ variant: 'default' })
+        expect(wrapper.classes()).toContain('border-brutal')
+
+        await wrapper.setProps({ variant: 'error' })
+        expect(wrapper.classes()).toContain('border-brutal-destructive')
+
+        await wrapper.setProps({ variant: 'success' })
+        expect(wrapper.classes()).toContain('border-brutal-success')
+    })
+
+    it('applies size classes via textareaSize prop', async () => {
+        const wrapper = mount(Textarea)
+
+        await wrapper.setProps({ textareaSize: 'sm' })
+        expect(wrapper.classes()).toContain('text-sm')
+
+        await wrapper.setProps({ textareaSize: 'default' })
+        expect(wrapper.classes()).toContain('text-base')
+
+        await wrapper.setProps({ textareaSize: 'lg' })
+        expect(wrapper.classes()).toContain('text-lg')
+    })
+
+    it('has v-model support (emits update:modelValue on input)', async () => {
+        const wrapper = mount(Textarea, {
+            props: { modelValue: '' },
+        })
+        await wrapper.setValue('hello')
+        expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+        expect(wrapper.emitted('update:modelValue')![0]).toEqual(['hello'])
+    })
+
+    it('is disabled when disabled=true', () => {
+        const wrapper = mount(Textarea, {
+            props: { disabled: true },
+        })
+        expect(wrapper.attributes('disabled')).toBeDefined()
+    })
+
+    it('shows placeholder text', () => {
+        const wrapper = mount(Textarea, {
+            props: { placeholder: 'Enter text' },
+        })
+        expect(wrapper.attributes('placeholder')).toBe('Enter text')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Textarea, {
+            props: { class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/timeline/Timeline.vue b/packages/ui/src/components/timeline/Timeline.vue
new file mode 100644
index 0000000..7e6125b
--- /dev/null
+++ b/packages/ui/src/components/timeline/Timeline.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TimelineProps {
+    orientation?: 'vertical' | 'horizontal'
+    class?: string
+}
+
+const props = withDefaults(defineProps<TimelineProps>(), {
+    orientation: 'vertical',
+    class: '',
+})
+
+provide('timeline-orientation', computed(() => props.orientation))
+
+const classes = computed(() =>
+    cn(
+        'flex w-full',
+        props.orientation === 'vertical' ? 'flex-col gap-6' : 'flex-row gap-6 items-start overflow-x-auto',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/timeline/TimelineConnector.vue b/packages/ui/src/components/timeline/TimelineConnector.vue
new file mode 100644
index 0000000..8166bc0
--- /dev/null
+++ b/packages/ui/src/components/timeline/TimelineConnector.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { inject, computed, type ComputedRef } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TimelineConnectorProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<TimelineConnectorProps>(), {
+    class: '',
+})
+
+const orientation = inject<ComputedRef<'vertical' | 'horizontal'>>('timeline-orientation', computed(() => 'vertical'))
+
+const classes = computed(() =>
+    cn(
+        'bg-brutal-fg transition-all shrink-0',
+        orientation.value === 'vertical' ? 'w-[3px] flex-1 min-h-8' : 'h-[3px] flex-1 min-w-8',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="classes" />
+</template>
diff --git a/packages/ui/src/components/timeline/TimelineContent.vue b/packages/ui/src/components/timeline/TimelineContent.vue
new file mode 100644
index 0000000..821bbaa
--- /dev/null
+++ b/packages/ui/src/components/timeline/TimelineContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TimelineContentProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<TimelineContentProps>(), {
+    class: '',
+})
+
+const classes = computed(() =>
+    cn('flex-1 pb-4 text-sm font-bold text-brutal-fg', props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/timeline/TimelineDot.vue b/packages/ui/src/components/timeline/TimelineDot.vue
new file mode 100644
index 0000000..971f04d
--- /dev/null
+++ b/packages/ui/src/components/timeline/TimelineDot.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { timelineDotVariants } from './timeline-variants'
+
+type TimelineDotVariantProps = VariantProps<typeof timelineDotVariants>
+
+interface Props {
+    variant?: NonNullable<TimelineDotVariantProps['variant']>
+    shape?: NonNullable<TimelineDotVariantProps['shape']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    variant: 'accent',
+    shape: 'circle',
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(timelineDotVariants({ variant: props.variant, shape: props.shape }), props.class)
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <span class="inline-flex items-center justify-center font-black">
+            <slot />
+        </span>
+    </div>
+</template>
diff --git a/packages/ui/src/components/timeline/TimelineItem.vue b/packages/ui/src/components/timeline/TimelineItem.vue
new file mode 100644
index 0000000..199e5cb
--- /dev/null
+++ b/packages/ui/src/components/timeline/TimelineItem.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { inject, computed, type ComputedRef } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TimelineItemProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<TimelineItemProps>(), {
+    class: '',
+})
+
+const orientation = inject<ComputedRef<'vertical' | 'horizontal'>>('timeline-orientation', computed(() => 'vertical'))
+
+const classes = computed(() =>
+    cn(
+        'relative flex',
+        orientation.value === 'vertical' ? 'flex-row gap-4 items-stretch' : 'flex-col gap-4 items-center min-w-48 flex-1',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/timeline/TimelineSeparator.vue b/packages/ui/src/components/timeline/TimelineSeparator.vue
new file mode 100644
index 0000000..a4861c3
--- /dev/null
+++ b/packages/ui/src/components/timeline/TimelineSeparator.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { inject, computed, type ComputedRef } from 'vue'
+import { cn } from '../../lib/utils'
+
+interface TimelineSeparatorProps {
+    class?: string
+}
+
+const props = withDefaults(defineProps<TimelineSeparatorProps>(), {
+    class: '',
+})
+
+const orientation = inject<ComputedRef<'vertical' | 'horizontal'>>('timeline-orientation', computed(() => 'vertical'))
+
+const classes = computed(() =>
+    cn(
+        'flex items-center shrink-0',
+        orientation.value === 'vertical' ? 'flex-col' : 'flex-row w-full',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/timeline/timeline-variants.ts b/packages/ui/src/components/timeline/timeline-variants.ts
new file mode 100644
index 0000000..c813b12
--- /dev/null
+++ b/packages/ui/src/components/timeline/timeline-variants.ts
@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority'
+
+export const timelineDotVariants = cva(
+    [
+        'flex items-center justify-center border-3 border-brutal transition-all duration-150 shrink-0 z-10 font-black text-xs',
+    ],
+    {
+        variants: {
+            variant: {
+                default: 'bg-brutal-bg text-brutal-fg shadow-brutal-sm',
+                primary: 'bg-brutal-primary text-brutal-fg shadow-brutal-sm',
+                secondary: 'bg-brutal-secondary text-brutal-fg shadow-brutal-sm',
+                accent: 'bg-brutal-accent text-brutal-fg shadow-brutal-sm',
+                success: 'bg-brutal-success text-brutal-fg shadow-brutal-sm',
+                danger: 'bg-brutal-destructive text-brutal-fg shadow-brutal-sm',
+            },
+            shape: {
+                circle: 'rounded-full h-8 w-8',
+                square: 'rounded-none h-8 w-8',
+                diamond: 'rotate-45 h-7 w-7 [&>*]:-rotate-45',
+            },
+        },
+        defaultVariants: {
+            variant: 'accent',
+            shape: 'circle',
+        },
+    }
+)
diff --git a/packages/ui/src/components/timeline/timeline.test.ts b/packages/ui/src/components/timeline/timeline.test.ts
new file mode 100644
index 0000000..cf023cf
--- /dev/null
+++ b/packages/ui/src/components/timeline/timeline.test.ts
@@ -0,0 +1,241 @@
+import { mount } from '@vue/test-utils'
+import Timeline from './Timeline.vue'
+import TimelineItem from './TimelineItem.vue'
+import TimelineSeparator from './TimelineSeparator.vue'
+import TimelineDot from './TimelineDot.vue'
+import TimelineConnector from './TimelineConnector.vue'
+import TimelineContent from './TimelineContent.vue'
+
+describe('Timeline', () => {
+    it('renders with default vertical orientation', () => {
+        const wrapper = mount(Timeline)
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex')
+        expect(classes).toContain('w-full')
+        expect(classes).toContain('flex-col')
+    })
+
+    it('applies horizontal orientation classes', () => {
+        const wrapper = mount(Timeline, {
+            props: { orientation: 'horizontal' },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex-row')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Timeline, {
+            slots: { default: '<div>Timeline content</div>' },
+        })
+        expect(wrapper.text()).toBe('Timeline content')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(Timeline, {
+            props: { class: 'custom-class' },
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
+
+describe('TimelineItem', () => {
+    it('renders with vertical orientation by default', () => {
+        const wrapper = mount(TimelineItem)
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex')
+        expect(classes).toContain('flex-row')
+    })
+
+    it('applies horizontal orientation classes when injected', () => {
+        const wrapper = mount(TimelineItem, {
+            global: {
+                provide: {
+                    'timeline-orientation': { value: 'horizontal' },
+                },
+            },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex-col')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(TimelineItem, {
+            slots: { default: '<span>Item content</span>' },
+        })
+        expect(wrapper.text()).toBe('Item content')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TimelineItem, {
+            props: { class: 'custom-item' },
+        })
+        expect(wrapper.classes()).toContain('custom-item')
+    })
+})
+
+describe('TimelineSeparator', () => {
+    it('renders with vertical orientation by default', () => {
+        const wrapper = mount(TimelineSeparator)
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex')
+        expect(classes).toContain('flex-col')
+    })
+
+    it('applies horizontal orientation classes when injected', () => {
+        const wrapper = mount(TimelineSeparator, {
+            global: {
+                provide: {
+                    'timeline-orientation': { value: 'horizontal' },
+                },
+            },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex-row')
+        expect(classes).toContain('w-full')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(TimelineSeparator, {
+            slots: { default: '<span>Separator</span>' },
+        })
+        expect(wrapper.text()).toBe('Separator')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TimelineSeparator, {
+            props: { class: 'custom-sep' },
+        })
+        expect(wrapper.classes()).toContain('custom-sep')
+    })
+})
+
+describe('TimelineDot', () => {
+    it('renders with default accent variant and circle shape', () => {
+        const wrapper = mount(TimelineDot)
+        const classes = wrapper.classes()
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('bg-brutal-accent')
+        expect(classes).toContain('rounded-full')
+    })
+
+    it('applies primary variant classes', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { variant: 'primary' },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-primary')
+    })
+
+    it('applies secondary variant classes', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { variant: 'secondary' },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-secondary')
+    })
+
+    it('applies default variant classes', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { variant: 'default' },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+    })
+
+    it('applies success variant classes', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { variant: 'success' },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-success')
+    })
+
+    it('applies danger variant classes', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { variant: 'danger' },
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-destructive')
+    })
+
+    it('applies square shape classes', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { shape: 'square' },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('rounded-none')
+    })
+
+    it('applies diamond shape classes', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { shape: 'diamond' },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('rotate-45')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(TimelineDot, {
+            slots: { default: '1' },
+        })
+        expect(wrapper.text()).toBe('1')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TimelineDot, {
+            props: { class: 'custom-dot' },
+        })
+        expect(wrapper.classes()).toContain('custom-dot')
+    })
+})
+
+describe('TimelineConnector', () => {
+    it('renders with vertical orientation by default', () => {
+        const wrapper = mount(TimelineConnector)
+        const classes = wrapper.classes()
+        expect(classes).toContain('bg-brutal-fg')
+        expect(classes).toContain('w-[3px]')
+        expect(classes).toContain('flex-1')
+    })
+
+    it('applies horizontal orientation classes when injected', () => {
+        const wrapper = mount(TimelineConnector, {
+            global: {
+                provide: {
+                    'timeline-orientation': { value: 'horizontal' },
+                },
+            },
+        })
+        const classes = wrapper.classes()
+        expect(classes).toContain('h-[3px]')
+        expect(classes).toContain('flex-1')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TimelineConnector, {
+            props: { class: 'custom-connector' },
+        })
+        expect(wrapper.classes()).toContain('custom-connector')
+    })
+})
+
+describe('TimelineContent', () => {
+    it('renders with default classes', () => {
+        const wrapper = mount(TimelineContent)
+        const classes = wrapper.classes()
+        expect(classes).toContain('flex-1')
+        expect(classes).toContain('text-sm')
+        expect(classes).toContain('font-bold')
+        expect(classes).toContain('text-brutal-fg')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(TimelineContent, {
+            slots: { default: '<p>Step details</p>' },
+        })
+        expect(wrapper.text()).toBe('Step details')
+    })
+
+    it('merges custom class prop', () => {
+        const wrapper = mount(TimelineContent, {
+            props: { class: 'custom-content' },
+        })
+        expect(wrapper.classes()).toContain('custom-content')
+    })
+})
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
deleted file mode 100644
index 1d9b5a6..0000000
--- a/packages/ui/src/components/toast.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X, CheckCircle, AlertCircle, AlertTriangle, Info, Zap } from 'lucide-react';
-import { cn } from '../lib/utils';
-
-const toastVariants = cva(
-    [
-        'pointer-events-auto relative w-full overflow-hidden',
-        'border-3 border-brutal',
-        'transition-all duration-300 ease-out',
-        'animate-in slide-in-from-right-full fade-in-0',
-    ],
-    {
-        variants: {
-            variant: {
-                default: [
-                    'bg-white dark:bg-gray-900 text-black dark:text-white',
-                    'shadow-brutal-lg',
-                ],
-                success: [
-                    'bg-[#7FB069] text-black dark:bg-[#2d4a28] dark:text-white',
-                    'shadow-brutal-lg',
-                ],
-                error: [
-                    'bg-[#FF6B6B] text-black dark:bg-[#7a2d2d] dark:text-white',
-                    'shadow-brutal-lg',
-                ],
-                warning: [
-                    'bg-[#FFE66D] text-black dark:bg-[#6b5a1f] dark:text-white',
-                    'shadow-brutal-lg',
-                ],
-                info: [
-                    'bg-[#4ECDC4] text-black dark:bg-[#1f5450] dark:text-white',
-                    'shadow-brutal-lg',
-                ],
-            },
-            size: {
-                sm: 'max-w-xs',
-                default: 'max-w-sm',
-                lg: 'max-w-md',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-export interface ToastProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof toastVariants> {
-    title?: string;
-    description?: string;
-    onClose?: () => void;
-    icon?: React.ReactNode;
-    action?: React.ReactNode;
-    duration?: number;
-}
-
-const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
-    (
-        {
-            className,
-            variant,
-            size,
-            title,
-            description,
-            onClose,
-            icon,
-            action,
-            duration = 5000,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        const [isLeaving, setIsLeaving] = React.useState(false);
-
-        React.useEffect(() => {
-            if (duration && onClose) {
-                const timer = setTimeout(() => {
-                    setIsLeaving(true);
-                    setTimeout(() => onClose(), 200);
-                }, duration);
-                return () => clearTimeout(timer);
-            }
-            return undefined;
-        }, [duration, onClose]);
-
-        const getDefaultIcon = (): React.ReactNode | null => {
-            const iconClass = 'h-6 w-6 stroke-[2.5] flex-shrink-0';
-            switch (variant) {
-                case 'success':
-                    return <CheckCircle className={iconClass} />;
-                case 'error':
-                    return <AlertCircle className={iconClass} />;
-                case 'warning':
-                    return <AlertTriangle className={iconClass} />;
-                case 'info':
-                    return <Info className={iconClass} />;
-                default:
-                    return <Zap className={iconClass} />;
-            }
-        };
-
-        const defaultIcon = getDefaultIcon();
-
-        return (
-            <div
-                ref={ref}
-                className={cn(
-                    toastVariants({ variant, size }),
-                    isLeaving && 'animate-out slide-out-to-right-full fade-out-0',
-                    className
-                )}
-                role="alert"
-                {...props}
-            >
-                {duration && onClose && (
-                    <div className="absolute top-0 left-0 right-0 h-1 bg-black/10 dark:bg-white/10 overflow-hidden">
-                        <div
-                            className="h-full bg-black/30 dark:bg-white/30 animate-nb-shrink"
-                            style={{ animationDuration: `${duration}ms` }}
-                        />
-                    </div>
-                )}
-
-                <div className="flex items-start gap-4 p-4 pt-5">
-                    {(icon || defaultIcon) && (
-                        <div className="flex-shrink-0 mt-0.5">{icon || defaultIcon}</div>
-                    )}
-
-                    <div className="flex-1 min-w-0">
-                        {title && <p className="font-black text-base leading-tight">{title}</p>}
-                        {description && (
-                            <p className="font-medium text-sm mt-1 opacity-80 leading-snug">
-                                {description}
-                            </p>
-                        )}
-                        {children}
-
-                        {action && <div className="mt-3">{action}</div>}
-                    </div>
-
-                    {onClose && (
-                        <button
-                            type="button"
-                            onClick={() => {
-                                setIsLeaving(true);
-                                setTimeout(() => onClose(), 200);
-                            }}
-                            className={cn(
-                                'flex-shrink-0 h-8 w-8 flex items-center justify-center',
-                                'border-2 border-brutal',
-                                'bg-white dark:bg-gray-900',
-                                'text-black dark:text-white',
-                                'shadow-brutal-sm',
-                                'transition-all duration-150',
-                                'hover:shadow-brutal-sm hover:translate-x-0.5 hover:translate-y-0.5',
-                                'active:shadow-none active:translate-x-1 active:translate-y-1',
-                                'focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2'
-                            )}
-                            aria-label="Close"
-                        >
-                            <X className="h-4 w-4 stroke-[3]" />
-                        </button>
-                    )}
-                </div>
-            </div>
-        );
-    }
-);
-Toast.displayName = 'Toast';
-
-interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    position?:
-        | 'top-left'
-        | 'top-center'
-        | 'top-right'
-        | 'bottom-left'
-        | 'bottom-center'
-        | 'bottom-right';
-}
-
-const ToastContainer = React.forwardRef<HTMLDivElement, ToastContainerProps>(
-    ({ className, position = 'bottom-right', children, ...props }, ref) => {
-        const positionClasses = {
-            'top-left': 'top-4 left-4 items-start',
-            'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
-            'top-right': 'top-4 right-4 items-end',
-            'bottom-left': 'bottom-4 left-4 items-start',
-            'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
-            'bottom-right': 'bottom-4 right-4 items-end',
-        };
-
-        return (
-            <div
-                ref={ref}
-                className={cn(
-                    'fixed z-50 flex flex-col gap-3 pointer-events-none p-4',
-                    positionClasses[position],
-                    className
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        );
-    }
-);
-ToastContainer.displayName = 'ToastContainer';
-
-interface ToastItem {
-    id: string;
-    variant?: ToastProps['variant'];
-    title?: string;
-    description?: string;
-    duration?: number;
-    action?: React.ReactNode;
-}
-
-function useToast() {
-    const [toasts, setToasts] = React.useState<ToastItem[]>([]);
-
-    const addToast = React.useCallback((toast: Omit<ToastItem, 'id'>) => {
-        const id = Math.random().toString(36).substring(2, 11);
-        setToasts((prev) => [...prev, { ...toast, id }]);
-        return id;
-    }, []);
-
-    const removeToast = React.useCallback((id: string) => {
-        setToasts((prev) => prev.filter((toast) => toast.id !== id));
-    }, []);
-
-    const clearToasts = React.useCallback(() => {
-        setToasts([]);
-    }, []);
-
-    const success = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'success', title, description });
-        },
-        [addToast]
-    );
-
-    const error = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'error', title, description });
-        },
-        [addToast]
-    );
-
-    const warning = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'warning', title, description });
-        },
-        [addToast]
-    );
-
-    const info = React.useCallback(
-        (title: string, description?: string) => {
-            return addToast({ variant: 'info', title, description });
-        },
-        [addToast]
-    );
-
-    return {
-        toasts,
-        addToast,
-        removeToast,
-        clearToasts,
-        success,
-        error,
-        warning,
-        info,
-    };
-}
-
-export { Toast, ToastContainer, useToast, toastVariants };
-export type { ToastContainerProps, ToastItem };
diff --git a/packages/ui/src/components/toast/Toast.vue b/packages/ui/src/components/toast/Toast.vue
new file mode 100644
index 0000000..dcf2e30
--- /dev/null
+++ b/packages/ui/src/components/toast/Toast.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { X, CheckCircle, AlertCircle, AlertTriangle, Info, Zap } from 'lucide-vue-next'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { toastVariants } from './toast-variants'
+import { useLocale } from '@/composables/useLocale'
+
+type ToastVariantProps = VariantProps<typeof toastVariants>
+
+const DEFAULT_DURATION = 5000
+const LEAVE_ANIMATION_DELAY = 300
+
+interface ToastProps {
+    variant?: NonNullable<ToastVariantProps['variant']>
+    size?: NonNullable<ToastVariantProps['size']>
+    title?: string
+    description?: string
+    duration?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<ToastProps>(), {
+    variant: 'default',
+    size: 'default',
+    title: '',
+    description: '',
+    duration: DEFAULT_DURATION,
+    class: '',
+})
+
+const emit = defineEmits<{ close: [] }>()
+
+const { t } = useLocale()
+
+const isLeaving = ref(false)
+const timer = ref<number | undefined>(undefined)
+const leaveTimer = ref<number | undefined>(undefined)
+
+function startLeave() {
+    isLeaving.value = true
+    leaveTimer.value = window.setTimeout(() => {
+        emit('close')
+    }, LEAVE_ANIMATION_DELAY)
+}
+
+onMounted(() => {
+    if (props.duration) {
+        timer.value = window.setTimeout(() => {
+            startLeave()
+        }, props.duration)
+    }
+})
+
+onUnmounted(() => {
+    if (timer.value) window.clearTimeout(timer.value)
+    if (leaveTimer.value) window.clearTimeout(leaveTimer.value)
+})
+
+const classes = computed(() =>
+    cn(
+        toastVariants({ variant: props.variant, size: props.size }),
+        isLeaving.value && 'animate-out slide-out-to-right-full fade-out-0',
+        props.class
+    )
+)
+
+const iconComponent = computed(() => {
+    switch (props.variant) {
+        case 'success': return CheckCircle
+        case 'error': return AlertCircle
+        case 'warning': return AlertTriangle
+        case 'info': return Info
+        default: return Zap
+    }
+})
+
+const closeClasses = computed(() =>
+    cn(
+        'flex-shrink-0 h-8 w-8 flex items-center justify-center',
+        'border-3 border-brutal bg-brutal-bg',
+        'shadow-brutal-sm',
+        'transition-all duration-150',
+        'hover:shadow-brutal-lg hover:-translate-x-0.5 hover:-translate-y-0.5',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none transition-all',
+        'focus:outline-none focus:ring-2 focus:ring-brutal-ring focus:ring-offset-2'
+    )
+)
+</script>
+
+<template>
+    <div :class="classes" role="alert">
+        <div v-if="duration" class="absolute top-0 left-0 right-0 h-1 bg-brutal-fg/10 overflow-hidden">
+            <div
+                class="h-full bg-brutal-fg/30 animate-nb-shrink"
+                :style="{ animationDuration: `${duration}ms` }"
+            />
+        </div>
+
+        <div class="flex items-start gap-4 p-4 pt-5">
+            <div class="flex-shrink-0 mt-0.5">
+                <component :is="iconComponent" class="h-6 w-6 stroke-[2.5]" />
+            </div>
+
+            <div class="flex-1 min-w-0">
+                <p v-if="title" class="font-black text-base leading-tight">
+{{ title }}
+</p>
+                <p v-if="description" class="font-medium text-sm mt-1 opacity-80 leading-snug">
+{{ description }}
+</p>
+                <slot />
+            </div>
+
+            <button :class="closeClasses" :aria-label="t('toast.close')" @click="startLeave">
+                <X class="h-4 w-4 stroke-[3]" />
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/toast/ToastContainer.vue b/packages/ui/src/components/toast/ToastContainer.vue
new file mode 100644
index 0000000..4e1182d
--- /dev/null
+++ b/packages/ui/src/components/toast/ToastContainer.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+
+const { t } = useLocale()
+
+interface ToastContainerProps {
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+    class?: string
+}
+
+const props = withDefaults(defineProps<ToastContainerProps>(), {
+    position: 'bottom-right',
+    class: '',
+})
+
+const positionMap: Record<string, string> = {
+    'top-left': 'top-4 left-4 items-start',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
+    'top-right': 'top-4 right-4 items-end',
+    'bottom-left': 'bottom-4 left-4 items-start',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
+    'bottom-right': 'bottom-4 right-4 items-end',
+}
+
+const classes = computed(() =>
+    cn(
+        'fixed z-50 flex flex-col gap-3 pointer-events-none p-4',
+        positionMap[props.position],
+        props.class
+    )
+)
+</script>
+
+<template>
+    <div :class="classes" aria-live="polite" :aria-label="t('toast.container')">
+        <slot />
+    </div>
+</template>
diff --git a/packages/ui/src/components/toast/toast-variants.ts b/packages/ui/src/components/toast/toast-variants.ts
new file mode 100644
index 0000000..dcb14b0
--- /dev/null
+++ b/packages/ui/src/components/toast/toast-variants.ts
@@ -0,0 +1,45 @@
+import { cva } from 'class-variance-authority'
+
+export const toastVariants = cva(
+    [
+        'pointer-events-auto relative w-full overflow-hidden',
+        'border-3 border-brutal',
+        'transition-all duration-300 ease-out',
+        'animate-in slide-in-from-right-full fade-in-0',
+    ],
+    {
+        variants: {
+            variant: {
+                default: [
+                    'bg-brutal-bg text-brutal-fg',
+                    'shadow-brutal-lg',
+                ],
+                success: [
+                    'bg-brutal-success text-brutal-fg',
+                    'shadow-brutal-lg',
+                ],
+                error: [
+                    'bg-brutal-destructive text-brutal-fg',
+                    'shadow-brutal-lg',
+                ],
+                warning: [
+                    'bg-brutal-accent text-brutal-fg',
+                    'shadow-brutal-lg',
+                ],
+                info: [
+                    'bg-brutal-secondary text-brutal-fg',
+                    'shadow-brutal-lg',
+                ],
+            },
+            size: {
+                sm: 'max-w-xs',
+                default: 'max-w-sm',
+                lg: 'max-w-md',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+)
diff --git a/packages/ui/src/components/toast/toast.test.ts b/packages/ui/src/components/toast/toast.test.ts
new file mode 100644
index 0000000..13f2c32
--- /dev/null
+++ b/packages/ui/src/components/toast/toast.test.ts
@@ -0,0 +1,194 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import Toast from './Toast.vue'
+import ToastContainer from './ToastContainer.vue'
+
+const globalProvide = { provide: { [LOCALE_INJECTION_KEY]: en } }
+
+describe('Toast', () => {
+    it('renders with default variant', () => {
+        const wrapper = mount(Toast, { global: globalProvide })
+        expect(wrapper.classes()).toContain('border-3')
+        expect(wrapper.classes()).toContain('border-brutal')
+        expect(wrapper.classes()).toContain('bg-brutal-bg')
+        expect(wrapper.classes()).toContain('text-brutal-fg')
+    })
+
+    it('shows title and description', () => {
+        const wrapper = mount(Toast, {
+            props: {
+                title: 'Test Title',
+                description: 'Test Description',
+            },
+            global: globalProvide,
+        })
+        expect(wrapper.text()).toContain('Test Title')
+        expect(wrapper.text()).toContain('Test Description')
+    })
+
+    it('has role="alert"', () => {
+        const wrapper = mount(Toast, { global: globalProvide })
+        expect(wrapper.attributes('role')).toBe('alert')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Toast, {
+            props: { class: 'custom-toast' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('custom-toast')
+    })
+
+    it('renders success variant', () => {
+        const wrapper = mount(Toast, {
+            props: { variant: 'success' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-success')
+    })
+
+    it('renders error variant', () => {
+        const wrapper = mount(Toast, {
+            props: { variant: 'error' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-destructive')
+    })
+
+    it('renders warning variant', () => {
+        const wrapper = mount(Toast, {
+            props: { variant: 'warning' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-accent')
+    })
+
+    it('renders info variant', () => {
+        const wrapper = mount(Toast, {
+            props: { variant: 'info' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('bg-brutal-secondary')
+    })
+
+    it('renders different variant icons', () => {
+        const variants = ['success', 'error', 'warning', 'info', 'default'] as const
+        for (const variant of variants) {
+            const wrapper = mount(Toast, {
+                props: { variant },
+                global: globalProvide,
+            })
+            const svg = wrapper.find('svg')
+            expect(svg.exists()).toBe(true)
+        }
+    })
+
+    it('shows close button', () => {
+        const wrapper = mount(Toast, { global: globalProvide })
+        const closeButton = wrapper.find('button[aria-label="Close"]')
+        expect(closeButton.exists()).toBe(true)
+    })
+
+    it('emits close event when close button clicked', async () => {
+        vi.useFakeTimers()
+        const wrapper = mount(Toast, { global: globalProvide })
+        const closeButton = wrapper.find('button[aria-label="Close"]')
+        await closeButton.trigger('click')
+        vi.advanceTimersByTime(300)
+        expect(wrapper.emitted('close')).toBeTruthy()
+        vi.useRealTimers()
+    })
+
+    it('renders size variants', () => {
+        const wrapper = mount(Toast, {
+            props: { size: 'sm' },
+            global: globalProvide,
+        })
+        expect(wrapper.classes()).toContain('max-w-xs')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(Toast, {
+            slots: { default: '<div class="slot-content">Custom</div>' },
+            global: globalProvide,
+        })
+        expect(wrapper.find('.slot-content').exists()).toBe(true)
+    })
+})
+
+describe('ToastContainer', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(ToastContainer)
+        expect(wrapper.classes()).toContain('fixed')
+        expect(wrapper.classes()).toContain('z-50')
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('flex-col')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(ToastContainer, {
+            props: { class: 'custom-container' },
+        })
+        expect(wrapper.classes()).toContain('custom-container')
+    })
+
+    it('supports position top-right', () => {
+        const wrapper = mount(ToastContainer, {
+            props: { position: 'top-right' },
+        })
+        expect(wrapper.classes()).toContain('top-4')
+        expect(wrapper.classes()).toContain('right-4')
+        expect(wrapper.classes()).toContain('items-end')
+    })
+
+    it('supports position top-left', () => {
+        const wrapper = mount(ToastContainer, {
+            props: { position: 'top-left' },
+        })
+        expect(wrapper.classes()).toContain('top-4')
+        expect(wrapper.classes()).toContain('left-4')
+        expect(wrapper.classes()).toContain('items-start')
+    })
+
+    it('supports position bottom-right', () => {
+        const wrapper = mount(ToastContainer, {
+            props: { position: 'bottom-right' },
+        })
+        expect(wrapper.classes()).toContain('bottom-4')
+        expect(wrapper.classes()).toContain('right-4')
+        expect(wrapper.classes()).toContain('items-end')
+    })
+
+    it('supports position bottom-left', () => {
+        const wrapper = mount(ToastContainer, {
+            props: { position: 'bottom-left' },
+        })
+        expect(wrapper.classes()).toContain('bottom-4')
+        expect(wrapper.classes()).toContain('left-4')
+        expect(wrapper.classes()).toContain('items-start')
+    })
+
+    it('supports position top-center', () => {
+        const wrapper = mount(ToastContainer, {
+            props: { position: 'top-center' },
+        })
+        expect(wrapper.classes()).toContain('top-4')
+        expect(wrapper.classes()).toContain('items-center')
+    })
+
+    it('supports position bottom-center', () => {
+        const wrapper = mount(ToastContainer, {
+            props: { position: 'bottom-center' },
+        })
+        expect(wrapper.classes()).toContain('bottom-4')
+        expect(wrapper.classes()).toContain('items-center')
+    })
+
+    it('renders slot content', () => {
+        const wrapper = mount(ToastContainer, {
+            slots: { default: '<div class="toast-item">Toast</div>' },
+        })
+        expect(wrapper.find('.toast-item').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/toggle-group.tsx b/packages/ui/src/components/toggle-group.tsx
deleted file mode 100644
index 0f5caf6..0000000
--- a/packages/ui/src/components/toggle-group.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { VariantProps } from 'class-variance-authority';
-
-import { cn } from '../lib/utils';
-import { toggleVariants } from './toggle';
-
-const ToggleGroupContext = React.createContext<
-    VariantProps<typeof toggleVariants>
->({
-    size: 'default',
-    variant: 'default',
-});
-
-const ToggleGroup = React.forwardRef<
-    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-        VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-    <ToggleGroupPrimitive.Root
-        ref={ref}
-        className={cn('flex items-center justify-center gap-1.5', className)}
-        {...props}
-    >
-        <ToggleGroupContext.Provider value={{ variant, size }}>
-            {children}
-        </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-        VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-    const context = React.useContext(ToggleGroupContext);
-
-    return (
-        <ToggleGroupPrimitive.Item
-            ref={ref}
-            className={cn(
-                toggleVariants({
-                    variant: context.variant || variant,
-                    size: context.size || size,
-                }),
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </ToggleGroupPrimitive.Item>
-    );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };
diff --git a/packages/ui/src/components/toggle-group/ToggleGroup.vue b/packages/ui/src/components/toggle-group/ToggleGroup.vue
new file mode 100644
index 0000000..4d9f9a1
--- /dev/null
+++ b/packages/ui/src/components/toggle-group/ToggleGroup.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { ToggleGroupRoot } from 'reka-ui'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { toggleVariants } from '../toggle/toggle-variants'
+import { toggleGroupKey } from './toggle-group-key'
+
+type ToggleVariantProps = VariantProps<typeof toggleVariants>
+
+interface ToggleGroupProps {
+    type?: 'single' | 'multiple'
+    defaultValue?: string | string[]
+    modelValue?: string | string[]
+    variant?: NonNullable<ToggleVariantProps['variant']>
+    size?: NonNullable<ToggleVariantProps['size']>
+    class?: string
+}
+
+const props = withDefaults(defineProps<ToggleGroupProps>(), {
+    type: 'single',
+    defaultValue: undefined,
+    modelValue: undefined,
+    variant: 'default',
+    size: 'default',
+    class: '',
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: string | string[]] }>()
+
+const classes = computed(() =>
+    cn('flex items-center justify-center gap-1.5', props.class)
+)
+
+provide(toggleGroupKey, {
+    variant: computed(() => props.variant),
+    size: computed(() => props.size),
+})
+</script>
+
+<template>
+    <ToggleGroupRoot
+        :type="type"
+        :default-value="defaultValue"
+        :model-value="modelValue"
+        :class="classes"
+        @update:model-value="emit('update:modelValue', $event as string | string[])"
+    >
+        <slot />
+    </ToggleGroupRoot>
+</template>
diff --git a/packages/ui/src/components/toggle-group/ToggleGroupItem.vue b/packages/ui/src/components/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..25ac5f6
--- /dev/null
+++ b/packages/ui/src/components/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { ToggleGroupItem as ToggleGroupItemPrimitive } from 'reka-ui'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { toggleVariants } from '../toggle/toggle-variants'
+import { toggleGroupKey } from './toggle-group-key'
+
+type ToggleVariantProps = VariantProps<typeof toggleVariants>
+
+interface ToggleGroupItemProps {
+    value: string
+    variant?: NonNullable<ToggleVariantProps['variant']>
+    size?: NonNullable<ToggleVariantProps['size']>
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<ToggleGroupItemProps>(), {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+    class: '',
+})
+
+const context = inject(toggleGroupKey, { variant: computed<NonNullable<ToggleVariantProps['variant']> | undefined>(() => undefined), size: computed<NonNullable<ToggleVariantProps['size']> | undefined>(() => undefined) })
+
+const classes = computed(() =>
+    cn(
+        toggleVariants({
+            variant: context.variant.value || props.variant,
+            size: context.size.value || props.size,
+        }),
+        props.class
+    )
+)
+</script>
+
+<template>
+    <ToggleGroupItemPrimitive :value="value" :disabled="disabled" :class="classes">
+        <slot />
+    </ToggleGroupItemPrimitive>
+</template>
diff --git a/packages/ui/src/components/toggle-group/toggle-group-key.ts b/packages/ui/src/components/toggle-group/toggle-group-key.ts
new file mode 100644
index 0000000..c460cc3
--- /dev/null
+++ b/packages/ui/src/components/toggle-group/toggle-group-key.ts
@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { VariantProps } from 'class-variance-authority'
+import { toggleVariants } from '../toggle/toggle-variants'
+
+type ToggleVariantProps = VariantProps<typeof toggleVariants>
+
+export const toggleGroupKey: InjectionKey<{
+    variant: Ref<NonNullable<ToggleVariantProps['variant']> | undefined>
+    size: Ref<NonNullable<ToggleVariantProps['size']> | undefined>
+}> = Symbol('toggleGroup')
diff --git a/packages/ui/src/components/toggle-group/toggle-group.test.ts b/packages/ui/src/components/toggle-group/toggle-group.test.ts
new file mode 100644
index 0000000..11e159e
--- /dev/null
+++ b/packages/ui/src/components/toggle-group/toggle-group.test.ts
@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import ToggleGroup from './ToggleGroup.vue'
+import ToggleGroupItem from './ToggleGroupItem.vue'
+
+describe('ToggleGroup', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(ToggleGroup, {
+            attachTo: document.body,
+        })
+        expect(wrapper.element.tagName).toBe('DIV')
+    })
+})
+
+describe('ToggleGroupItem', () => {
+    it('renders within ToggleGroup', () => {
+        const wrapper = mount(ToggleGroup, {
+            props: { modelValue: '' },
+            slots: {
+                default: () => h(ToggleGroupItem, { value: 'bold' }),
+            },
+            attachTo: document.body,
+        })
+        expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('has appropriate role', () => {
+        const wrapper = mount(ToggleGroup, {
+            props: { modelValue: '' },
+            slots: {
+                default: () => h(ToggleGroupItem, { value: 'bold' }),
+            },
+            attachTo: document.body,
+        })
+        const item = wrapper.find('button')
+        expect(item.exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/toggle.tsx b/packages/ui/src/components/toggle.tsx
deleted file mode 100644
index 1136a95..0000000
--- a/packages/ui/src/components/toggle.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../lib/utils';
-
-const toggleVariants = cva(
-    [
-        'inline-flex items-center justify-center gap-2 text-sm font-black tracking-wide',
-        'border-3 border-brutal rounded-brutal transition-all duration-150',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brutal-ring focus-visible:ring-offset-2',
-        'disabled:pointer-events-none disabled:opacity-50',
-        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
-    ],
-    {
-        variants: {
-            variant: {
-                default: [
-                    'bg-white dark:bg-gray-800 text-brutal-fg shadow-brutal-sm',
-                    'hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal',
-                    'data-[state=on]:bg-brutal-primary data-[state=on]:text-brutal-fg data-[state=on]:shadow-none data-[state=on]:translate-y-[var(--brutal-pressed-offset,2px)]',
-                ],
-                outline: [
-                    'bg-transparent text-brutal-fg border-3 border-brutal shadow-brutal-sm',
-                    'hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal',
-                    'data-[state=on]:bg-brutal-secondary data-[state=on]:shadow-none data-[state=on]:translate-y-[var(--brutal-pressed-offset,2px)]',
-                ],
-            },
-            size: {
-                default: 'h-10 px-3 min-w-10',
-                sm: 'h-8 px-2 min-w-8 text-xs',
-                lg: 'h-12 px-4 min-w-12',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
-);
-
-const Toggle = React.forwardRef<
-    React.ElementRef<typeof TogglePrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-        VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-    <TogglePrimitive.Root
-        ref={ref}
-        className={cn(toggleVariants({ variant, size }), className)}
-        {...props}
-    />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
diff --git a/packages/ui/src/components/toggle/Toggle.vue b/packages/ui/src/components/toggle/Toggle.vue
new file mode 100644
index 0000000..ca2e7e7
--- /dev/null
+++ b/packages/ui/src/components/toggle/Toggle.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Toggle } from 'reka-ui'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+import { toggleVariants } from './toggle-variants'
+
+type ToggleVariantProps = VariantProps<typeof toggleVariants>
+
+interface ToggleProps {
+    defaultValue?: boolean
+    pressed?: boolean
+    variant?: NonNullable<ToggleVariantProps['variant']>
+    size?: NonNullable<ToggleVariantProps['size']>
+    disabled?: boolean
+    class?: string
+}
+
+const props = withDefaults(defineProps<ToggleProps>(), {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+    class: '',
+})
+
+const emit = defineEmits<{ 'update:pressed': [value: boolean] }>()
+
+const classes = computed(() =>
+    cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)
+)
+</script>
+
+<template>
+    <Toggle
+        :default-value="defaultValue"
+        :pressed="pressed"
+        :disabled="disabled"
+        :class="classes"
+        @update:pressed="emit('update:pressed', $event)"
+    >
+        <slot />
+    </Toggle>
+</template>
diff --git a/apps/docs/components/ui/toggle.tsx b/packages/ui/src/components/toggle/toggle-variants.ts
similarity index 65%
rename from apps/docs/components/ui/toggle.tsx
rename to packages/ui/src/components/toggle/toggle-variants.ts
index 85b04d1..d15980a 100644
--- a/apps/docs/components/ui/toggle.tsx
+++ b/packages/ui/src/components/toggle/toggle-variants.ts
@@ -1,12 +1,6 @@
-'use client';
+import { cva } from 'class-variance-authority'
 
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const toggleVariants = cva(
+export const toggleVariants = cva(
     [
         'inline-flex items-center justify-center gap-2 text-sm font-black tracking-wide',
         'border-3 border-brutal rounded-brutal transition-all duration-150',
@@ -18,7 +12,7 @@ const toggleVariants = cva(
         variants: {
             variant: {
                 default: [
-                    'bg-white dark:bg-gray-800 text-brutal-fg shadow-brutal-sm',
+                    'bg-brutal-bg text-brutal-fg shadow-brutal-sm',
                     'hover:bg-brutal-muted hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal',
                     'data-[state=on]:bg-brutal-primary data-[state=on]:text-brutal-fg data-[state=on]:shadow-none data-[state=on]:translate-y-[var(--brutal-pressed-offset,2px)]',
                 ],
@@ -39,20 +33,4 @@ const toggleVariants = cva(
             size: 'default',
         },
     }
-);
-
-const Toggle = React.forwardRef<
-    React.ElementRef<typeof TogglePrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-        VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-    <TogglePrimitive.Root
-        ref={ref}
-        className={cn(toggleVariants({ variant, size }), className)}
-        {...props}
-    />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
+)
diff --git a/packages/ui/src/components/toggle/toggle.test.ts b/packages/ui/src/components/toggle/toggle.test.ts
new file mode 100644
index 0000000..9a4e2d8
--- /dev/null
+++ b/packages/ui/src/components/toggle/toggle.test.ts
@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils'
+import Toggle from './Toggle.vue'
+
+describe('Toggle', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(Toggle, {
+            attachTo: document.body,
+        })
+        expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('applies variant classes', async () => {
+        const wrapper = mount(Toggle, {
+            attachTo: document.body,
+        })
+
+        await wrapper.setProps({ variant: 'default' })
+        expect(wrapper.classes()).toContain('shadow-brutal-sm')
+
+        await wrapper.setProps({ variant: 'outline' })
+        expect(wrapper.classes()).toContain('border-brutal')
+    })
+
+    it('applies size classes', async () => {
+        const wrapper = mount(Toggle, {
+            attachTo: document.body,
+        })
+
+        await wrapper.setProps({ size: 'sm' })
+        expect(wrapper.classes()).toContain('h-8')
+
+        await wrapper.setProps({ size: 'default' })
+        expect(wrapper.classes()).toContain('h-10')
+
+        await wrapper.setProps({ size: 'lg' })
+        expect(wrapper.classes()).toContain('h-12')
+    })
+
+    it('emits update:pressed when toggled', async () => {
+        const wrapper = mount(Toggle, {
+            attachTo: document.body,
+        })
+        await wrapper.trigger('click')
+        expect(wrapper.attributes('data-state')).toBe('on')
+    })
+
+    it('is disabled when disabled=true', () => {
+        const wrapper = mount(Toggle, {
+            props: { disabled: true },
+            attachTo: document.body,
+        })
+        expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(Toggle, {
+            props: { class: 'custom-class' },
+            attachTo: document.body,
+        })
+        expect(wrapper.classes()).toContain('custom-class')
+    })
+})
diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
deleted file mode 100644
index 61eb551..0000000
--- a/packages/ui/src/components/tooltip.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from '../lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-    React.ElementRef<typeof TooltipPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 6, ...props }, ref) => (
-    <TooltipPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        className={cn(
-            'z-50 overflow-hidden px-3 py-1.5',
-            'bg-black dark:bg-white text-white dark:text-black text-sm font-bold',
-            'border-2 border-black dark:border-white',
-            'animate-in fade-in-0 zoom-in-95',
-            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-            'data-[side=bottom]:slide-in-from-top-2',
-            'data-[side=left]:slide-in-from-right-2',
-            'data-[side=right]:slide-in-from-left-2',
-            'data-[side=top]:slide-in-from-bottom-2',
-            className
-        )}
-        {...props}
-    />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/packages/ui/src/components/tooltip/TooltipContent.vue b/packages/ui/src/components/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..b4b3295
--- /dev/null
+++ b/packages/ui/src/components/tooltip/TooltipContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TooltipPortal, TooltipContent as TooltipContentPrimitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+interface TooltipContentProps {
+    sideOffset?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<TooltipContentProps>(), {
+    sideOffset: 6,
+    class: '',
+})
+
+const classes = computed(() =>
+    cn(
+        'z-50 overflow-hidden px-3 py-1.5',
+        'bg-brutal-fg text-brutal-bg text-sm font-bold',
+        'border-3 border-brutal rounded-brutal shadow-brutal',
+        'animate-in fade-in-0 zoom-in-95',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[side=bottom]:slide-in-from-top-2',
+        'data-[side=left]:slide-in-from-right-2',
+        'data-[side=right]:slide-in-from-left-2',
+        'data-[side=top]:slide-in-from-bottom-2',
+        props.class
+    )
+)
+</script>
+
+<template>
+    <TooltipPortal>
+        <TooltipContentPrimitive :side-offset="sideOffset" :class="classes">
+            <slot />
+        </TooltipContentPrimitive>
+    </TooltipPortal>
+</template>
diff --git a/packages/ui/src/components/tooltip/tooltip.test.ts b/packages/ui/src/components/tooltip/tooltip.test.ts
new file mode 100644
index 0000000..f96bf8a
--- /dev/null
+++ b/packages/ui/src/components/tooltip/tooltip.test.ts
@@ -0,0 +1,31 @@
+import { cn } from '../../lib/utils'
+
+const classes = cn(
+    'z-50 overflow-hidden px-3 py-1.5',
+    'bg-brutal-fg text-brutal-bg text-sm font-bold',
+    'border-3 border-brutal rounded-brutal shadow-brutal',
+    'animate-in fade-in-0 zoom-in-95',
+    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+    'data-[side=bottom]:slide-in-from-top-2',
+    'data-[side=left]:slide-in-from-right-2',
+    'data-[side=right]:slide-in-from-left-2',
+    'data-[side=top]:slide-in-from-bottom-2',
+)
+
+describe('TooltipContent', () => {
+    it('renders with default classes', () => {
+        expect(classes).toContain('bg-brutal-fg')
+        expect(classes).toContain('text-brutal-bg')
+        expect(classes).toContain('border-3')
+        expect(classes).toContain('border-brutal')
+        expect(classes).toContain('z-50')
+        expect(classes).toContain('font-bold')
+        expect(classes).toContain('rounded-brutal')
+        expect(classes).toContain('shadow-brutal')
+    })
+
+    it('applies custom class', () => {
+        const customClasses = cn(classes, 'custom-tooltip')
+        expect(customClasses).toContain('custom-tooltip')
+    })
+})
diff --git a/packages/ui/src/components/tree-view/TreeView.vue b/packages/ui/src/components/tree-view/TreeView.vue
new file mode 100644
index 0000000..13c16f5
--- /dev/null
+++ b/packages/ui/src/components/tree-view/TreeView.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { cn } from '../../lib/utils';
+import TreeViewNode from './TreeViewNode.vue';
+import { useLocale } from '@/composables/useLocale';
+
+export interface TreeNode {
+    id: string;
+    label: string;
+    icon?: string;
+    children?: TreeNode[];
+    data?: unknown;
+}
+
+interface TreeViewProps {
+    nodes: TreeNode[];
+    modelValue?: string | null;
+    defaultExpanded?: string[];
+    class?: string;
+}
+
+const props = withDefaults(defineProps<TreeViewProps>(), {
+    modelValue: null,
+    defaultExpanded: () => [],
+});
+
+const emit = defineEmits<{
+    'update:modelValue': [id: string | null];
+    'select': [node: TreeNode];
+    'expand': [id: string, expanded: boolean];
+}>();
+
+const { t } = useLocale();
+
+const expandedIds = ref<Set<string>>(new Set(props.defaultExpanded));
+
+watch(() => props.defaultExpanded, (newVal) => {
+    expandedIds.value = new Set(newVal);
+});
+
+function toggleExpand(id: string) {
+    const next = !expandedIds.value.has(id);
+    if (next) {
+        expandedIds.value.add(id);
+    } else {
+        expandedIds.value.delete(id);
+    }
+    emit('expand', id, next);
+}
+
+function selectNode(node: TreeNode) {
+    emit('update:modelValue', node.id);
+    emit('select', node);
+}
+
+const rootClass = computed(() => cn('flex flex-col gap-0.5', props.class));
+</script>
+
+<template>
+    <div :class="rootClass" role="tree" :aria-label="t('treeView.fileTree')">
+        <TreeViewNode
+            v-for="node in nodes"
+            :key="node.id"
+            :node="node"
+            :selected-id="modelValue"
+            :expanded-ids="expandedIds"
+            :depth="0"
+            @toggle="toggleExpand"
+            @select="selectNode"
+        />
+    </div>
+</template>
diff --git a/packages/ui/src/components/tree-view/TreeViewNode.vue b/packages/ui/src/components/tree-view/TreeViewNode.vue
new file mode 100644
index 0000000..e0e3265
--- /dev/null
+++ b/packages/ui/src/components/tree-view/TreeViewNode.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ChevronRight, File, Folder, FolderOpen } from 'lucide-vue-next';
+import { cn } from '../../lib/utils';
+import { treeItemVariants } from './tree-view-variants';
+import type { TreeNode } from './TreeView.vue';
+
+const INDENT_PER_DEPTH = 20
+const BASE_INDENT = 4
+
+interface TreeViewNodeProps {
+    node: TreeNode;
+    selectedId?: string | null;
+    expandedIds: Set<string>;
+    depth?: number;
+}
+
+const props = withDefaults(defineProps<TreeViewNodeProps>(), {
+    selectedId: null,
+    depth: 0,
+});
+
+const emit = defineEmits<{
+    'toggle': [id: string];
+    'select': [node: TreeNode];
+}>();
+
+const isLeaf = computed(() => !props.node.children || props.node.children.length === 0);
+const isExpanded = computed(() => props.expandedIds.has(props.node.id));
+const isSelected = computed(() => props.selectedId === props.node.id);
+
+const itemClass = computed(() =>
+    cn(treeItemVariants({ selected: isSelected.value }))
+);
+
+const indentStyle = computed(() => ({
+    paddingLeft: `${props.depth * INDENT_PER_DEPTH + BASE_INDENT}px`,
+}));
+</script>
+
+<template>
+    <div role="treeitem" :aria-expanded="!isLeaf ? isExpanded : undefined" :aria-selected="isSelected">
+        <div
+            :class="itemClass"
+            :style="indentStyle"
+            @click="isLeaf ? emit('select', node) : (emit('toggle', node.id), emit('select', node))"
+        >
+            <ChevronRight
+                v-if="!isLeaf"
+                :class="cn('w-4 h-4 flex-shrink-0 transition-transform duration-150', isExpanded && 'rotate-90')"
+            />
+            <span v-else class="w-4 flex-shrink-0" />
+
+            <FolderOpen v-if="!isLeaf && isExpanded" class="w-4 h-4 flex-shrink-0 text-brutal-primary" />
+            <Folder v-else-if="!isLeaf" class="w-4 h-4 flex-shrink-0" />
+            <File v-else class="w-4 h-4 flex-shrink-0 opacity-60" />
+
+            <span class="truncate">{{ node.label }}</span>
+        </div>
+
+        <Transition name="tree-expand">
+            <div v-if="!isLeaf && isExpanded" role="group">
+                <TreeViewNode
+                    v-for="child in node.children"
+                    :key="child.id"
+                    :node="child"
+                    :selected-id="selectedId"
+                    :expanded-ids="expandedIds"
+                    :depth="depth + 1"
+                    @toggle="emit('toggle', $event)"
+                    @select="emit('select', $event)"
+                />
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<style scoped>
+.tree-expand-enter-active,
+.tree-expand-leave-active {
+    transition: opacity 0.15s ease, grid-template-rows 0.2s ease;
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: 1fr;
+}
+.tree-expand-enter-from,
+.tree-expand-leave-to {
+    opacity: 0;
+    grid-template-rows: 0fr;
+}
+</style>
diff --git a/packages/ui/src/components/tree-view/index.ts b/packages/ui/src/components/tree-view/index.ts
new file mode 100644
index 0000000..ef51258
--- /dev/null
+++ b/packages/ui/src/components/tree-view/index.ts
@@ -0,0 +1,3 @@
+export { default as TreeView } from './TreeView.vue';
+export { default as TreeViewNode } from './TreeViewNode.vue';
+export type { TreeNode } from './TreeView.vue';
diff --git a/packages/ui/src/components/tree-view/tree-view-variants.ts b/packages/ui/src/components/tree-view/tree-view-variants.ts
new file mode 100644
index 0000000..49b4bd1
--- /dev/null
+++ b/packages/ui/src/components/tree-view/tree-view-variants.ts
@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority';
+
+export const treeItemVariants = cva(
+    [
+        'flex items-center gap-2 px-2 py-1.5 cursor-pointer select-none',
+        'border-3 border-transparent rounded-brutal',
+        'text-sm text-brutal-fg font-medium',
+        'transition-all duration-150',
+        'hover:border-brutal hover:shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5',
+        'active:translate-y-[var(--brutal-pressed-offset,2px)] active:shadow-none',
+    ].join(' '),
+    {
+        variants: {
+            selected: {
+                true: 'bg-brutal-primary border-brutal shadow-brutal',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            selected: false,
+        },
+    }
+);
+
+export const treeBranchLineVariants = cva(
+    'absolute left-0 top-0 bottom-0 border-l-3 border-brutal'
+);
diff --git a/packages/ui/src/components/tree-view/tree-view.test.ts b/packages/ui/src/components/tree-view/tree-view.test.ts
new file mode 100644
index 0000000..5104418
--- /dev/null
+++ b/packages/ui/src/components/tree-view/tree-view.test.ts
@@ -0,0 +1,148 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import TreeView from './TreeView.vue'
+import TreeViewNode from './TreeViewNode.vue'
+import type { TreeNode } from './TreeView.vue'
+
+const localeProvide = { [LOCALE_INJECTION_KEY]: en }
+
+const sampleNodes: TreeNode[] = [
+    {
+        id: 'src',
+        label: 'src',
+        children: [
+            { id: 'main.ts', label: 'main.ts' },
+            { id: 'utils.ts', label: 'utils.ts' },
+        ],
+    },
+    {
+        id: 'package.json',
+        label: 'package.json',
+    },
+]
+
+const emptyExpandedIds: Set<string> = new Set()
+
+describe('TreeView', () => {
+    it('renders with role="tree"', () => {
+        const wrapper = mount(TreeView, {
+            props: { nodes: sampleNodes },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.attributes('role')).toBe('tree')
+    })
+
+    it('renders nodes', () => {
+        const wrapper = mount(TreeView, {
+            props: { nodes: sampleNodes },
+            global: { provide: localeProvide },
+        })
+        const items = wrapper.findAll('[role="treeitem"]')
+        expect(items.length).toBeGreaterThanOrEqual(2)
+        expect(wrapper.text()).toContain('src')
+        expect(wrapper.text()).toContain('package.json')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(TreeView, {
+            props: { nodes: [], class: 'custom-tree' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.classes()).toContain('custom-tree')
+        expect(wrapper.classes()).toContain('flex')
+        expect(wrapper.classes()).toContain('flex-col')
+    })
+
+    it('emits select event', async () => {
+        const wrapper = mount(TreeView, {
+            props: { nodes: sampleNodes },
+            global: { provide: localeProvide },
+        })
+        const treeItems = wrapper.findAll('[role="treeitem"]')
+        await treeItems[treeItems.length - 1].find('div').trigger('click')
+        expect(wrapper.emitted('select')).toBeTruthy()
+        expect(wrapper.emitted('select')![0][0]).toEqual(
+            expect.objectContaining({ id: 'package.json' })
+        )
+    })
+
+    it('has aria-label="File tree"', () => {
+        const wrapper = mount(TreeView, {
+            props: { nodes: sampleNodes },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.attributes('aria-label')).toBe('File tree')
+    })
+})
+
+describe('TreeViewNode', () => {
+    it('renders label', () => {
+        const wrapper = mount(TreeViewNode, {
+            props: {
+                node: { id: 'file.ts', label: 'file.ts' },
+                expandedIds: emptyExpandedIds,
+            },
+        })
+        expect(wrapper.text()).toContain('file.ts')
+    })
+
+    it('shows folder icon for non-leaf node', () => {
+        const wrapper = mount(TreeViewNode, {
+            props: {
+                node: { id: 'src', label: 'src', children: [{ id: 'main.ts', label: 'main.ts' }] },
+                expandedIds: emptyExpandedIds,
+            },
+        })
+        expect(wrapper.attributes('aria-expanded')).toBe('false')
+        const chevron = wrapper.find('.rotate-90')
+        expect(chevron.exists()).toBe(false)
+    })
+
+    it('shows file icon for leaf node', () => {
+        const wrapper = mount(TreeViewNode, {
+            props: {
+                node: { id: 'readme.md', label: 'readme.md' },
+                expandedIds: emptyExpandedIds,
+            },
+        })
+        expect(wrapper.attributes('aria-selected')).toBe('false')
+        expect(wrapper.attributes('aria-expanded')).toBeUndefined()
+    })
+
+    it('applies selected class when selected', () => {
+        const wrapper = mount(TreeViewNode, {
+            props: {
+                node: { id: 'file.ts', label: 'file.ts' },
+                expandedIds: emptyExpandedIds,
+                selectedId: 'file.ts',
+            },
+        })
+        const inner = wrapper.find('[role="treeitem"] > div')
+        expect(inner.classes()).toContain('bg-brutal-primary')
+        expect(inner.classes()).toContain('border-brutal')
+        expect(inner.classes()).toContain('shadow-brutal')
+    })
+
+    it('does not apply selected class when not selected', () => {
+        const wrapper = mount(TreeViewNode, {
+            props: {
+                node: { id: 'file.ts', label: 'file.ts' },
+                expandedIds: emptyExpandedIds,
+                selectedId: 'other.ts',
+            },
+        })
+        const inner = wrapper.find('[role="treeitem"] > div')
+        expect(inner.classes()).not.toContain('bg-brutal-primary')
+    })
+
+    it('has role="treeitem"', () => {
+        const wrapper = mount(TreeViewNode, {
+            props: {
+                node: { id: 'file.ts', label: 'file.ts' },
+                expandedIds: emptyExpandedIds,
+            },
+        })
+        expect(wrapper.attributes('role')).toBe('treeitem')
+    })
+})
diff --git a/packages/ui/src/components/upload-card/UploadCard.vue b/packages/ui/src/components/upload-card/UploadCard.vue
new file mode 100644
index 0000000..bc878db
--- /dev/null
+++ b/packages/ui/src/components/upload-card/UploadCard.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Upload } from 'lucide-vue-next'
+import { cn } from '../../lib/utils'
+import { useLocale } from '@/composables/useLocale'
+import Card from '../card/Card.vue'
+import CardContent from '../card/CardContent.vue'
+import Button from '../button/Button.vue'
+import Progress from '../progress/Progress.vue'
+import Spinner from '../spinner/Spinner.vue'
+
+interface UploadCardProps {
+    title?: string
+    description?: string
+    accept?: string
+    maxSize?: number
+    uploading?: boolean
+    progress?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<UploadCardProps>(), {
+    title: undefined,
+    description: undefined,
+    accept: undefined,
+    maxSize: undefined,
+    uploading: false,
+    progress: 0,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const emit = defineEmits<{
+    upload: [files: File[]]
+    drop: [files: File[]]
+}>()
+
+const isDragging = ref(false)
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const rootClasses = computed(() => cn('w-full max-w-lg mx-auto', props.class))
+
+const resolvedTitle = computed(() => props.title ?? t('uploadCard.defaultTitle'))
+const resolvedDescription = computed(() => props.description ?? t('uploadCard.defaultDescription'))
+const resolvedBrowseText = computed(() => t('uploadCard.browseText'))
+const resolvedDropText = computed(() => t('uploadCard.dropText'))
+
+const dropZoneClasses = computed(() =>
+    cn(
+        'flex flex-col items-center justify-center p-8 border-3 border-dashed border-brutal rounded-brutal transition-all cursor-pointer',
+        isDragging.value ? 'bg-brutal-muted shadow-brutal' : 'bg-brutal-bg',
+        props.uploading && 'pointer-events-none'
+    )
+)
+
+function handleDragEnter(event: DragEvent) {
+    event.preventDefault()
+    isDragging.value = true
+}
+
+function handleDragOver(event: DragEvent) {
+    event.preventDefault()
+}
+
+function handleDragLeave(event: DragEvent) {
+    event.preventDefault()
+    isDragging.value = false
+}
+
+function handleDrop(event: DragEvent) {
+    event.preventDefault()
+    isDragging.value = false
+    const files = Array.from(event.dataTransfer?.files ?? [])
+    if (files.length > 0) {
+        emit('drop', files)
+    }
+}
+
+function handleBrowse() {
+    fileInput.value?.click()
+}
+
+function handleFileChange(event: Event) {
+    const target = event.target as HTMLInputElement
+    const files = Array.from(target.files ?? [])
+    if (files.length > 0) {
+        emit('upload', files)
+    }
+    target.value = ''
+}
+</script>
+
+<template>
+    <Card :class="rootClasses" variant="default">
+        <CardContent class="pt-6">
+            <div
+                :class="dropZoneClasses"
+                @dragenter="handleDragEnter"
+                @dragover="handleDragOver"
+                @dragleave="handleDragLeave"
+                @drop="handleDrop"
+                @click="handleBrowse"
+            >
+                <input
+                    ref="fileInput"
+                    type="file"
+                    multiple
+                    :accept="accept"
+                    class="hidden"
+                    @change="handleFileChange"
+                >
+                <template v-if="uploading">
+                    <Spinner size="default" class="mb-4" />
+                    <Progress :model-value="progress" class="w-full max-w-xs mb-2" />
+                </template>
+                <template v-else>
+                    <Upload class="h-10 w-10 stroke-[3] text-brutal-muted-foreground mb-4" />
+                    <h3 class="text-lg font-black tracking-tight">
+{{ resolvedTitle }}
+</h3>
+                    <p class="mt-1 text-sm text-brutal-muted-foreground font-medium">
+{{ resolvedDescription }}
+</p>
+                    <Button variant="primary" size="sm" class="mt-4" @click.stop="handleBrowse">
+                        {{ resolvedBrowseText }}
+                    </Button>
+                    <p class="mt-2 text-xs text-brutal-muted-foreground font-medium">
+{{ resolvedDropText }}
+</p>
+                </template>
+            </div>
+            <slot name="actions" />
+        </CardContent>
+    </Card>
+</template>
diff --git a/packages/ui/src/components/upload-card/upload-card.test.ts b/packages/ui/src/components/upload-card/upload-card.test.ts
new file mode 100644
index 0000000..45e2aa1
--- /dev/null
+++ b/packages/ui/src/components/upload-card/upload-card.test.ts
@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import UploadCard from './UploadCard.vue'
+
+const localeProvide = { global: { provide: { [LOCALE_INJECTION_KEY]: en } } }
+
+describe('UploadCard', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(UploadCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Upload Files')
+        expect(wrapper.text()).toContain('Drag and drop your files here')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(UploadCard, {
+            props: { title: 'Upload Documents' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Upload Documents')
+    })
+
+    it('shows custom description', () => {
+        const wrapper = mount(UploadCard, {
+            props: { description: 'Select files to upload' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Select files to upload')
+    })
+
+    it('renders the drop zone area', () => {
+        const wrapper = mount(UploadCard, { ...localeProvide })
+        const dropZone = wrapper.find('.border-dashed')
+        expect(dropZone.exists()).toBe(true)
+    })
+
+    it('renders browse button', () => {
+        const wrapper = mount(UploadCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Browse Files')
+    })
+
+    it('renders drop text', () => {
+        const wrapper = mount(UploadCard, { ...localeProvide })
+        expect(wrapper.text()).toContain('Drop files here')
+    })
+
+    it('renders hidden file input with accept attribute', () => {
+        const wrapper = mount(UploadCard, {
+            props: { accept: '.pdf,.doc' },
+            ...localeProvide,
+        })
+        const input = wrapper.find('input[type="file"]')
+        expect(input.exists()).toBe(true)
+        expect(input.attributes('accept')).toBe('.pdf,.doc')
+    })
+
+    it('shows progress bar when uploading', () => {
+        const wrapper = mount(UploadCard, {
+            props: { uploading: true, progress: 50 },
+            ...localeProvide,
+        })
+        expect(wrapper.findComponent({ name: 'Progress' }).exists()).toBe(true)
+    })
+
+    it('shows spinner when uploading', () => {
+        const wrapper = mount(UploadCard, {
+            props: { uploading: true, progress: 50 },
+            ...localeProvide,
+        })
+        expect(wrapper.findComponent({ name: 'Spinner' }).exists()).toBe(true)
+    })
+
+    it('hides drop zone content when uploading', () => {
+        const wrapper = mount(UploadCard, {
+            props: { uploading: true, progress: 50 },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).not.toContain('Browse Files')
+    })
+
+    it('renders actions slot', () => {
+        const wrapper = mount(UploadCard, {
+            slots: { actions: '<div class="custom-action">Custom Action</div>' },
+            ...localeProvide,
+        })
+        expect(wrapper.text()).toContain('Custom Action')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(UploadCard, {
+            props: { class: 'my-upload' },
+            ...localeProvide,
+        })
+        expect(wrapper.find('[class*="my-upload"]').exists()).toBe(true)
+    })
+})
diff --git a/packages/ui/src/components/waitlist-page.tsx b/packages/ui/src/components/waitlist-page.tsx
deleted file mode 100644
index 8f7c246..0000000
--- a/packages/ui/src/components/waitlist-page.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { Sparkles, Users, Star } from 'lucide-react';
-import { Button } from './button';
-import { Input } from './input';
-
-export interface WaitlistPageProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    description?: string;
-    ctaText?: string;
-    onWaitlistSubmit?: (e: React.FormEvent<HTMLFormElement>, email: string) => void;
-}
-
-export function WaitlistPage({
-    title = 'Join the BrutxUI Waitlist Club',
-    description = 'Get early developer keys to copy premium blocks, customized theme presets, and unlock deep registry CLI integrations before everyone else.',
-    ctaText = 'Secure Priority Access',
-    onWaitlistSubmit,
-    className,
-    ...props
-}: WaitlistPageProps) {
-    const [email, setEmail] = React.useState('');
-
-    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (onWaitlistSubmit) onWaitlistSubmit(e, email);
-    };
-
-    return (
-        <section
-            className={`w-full py-16 md:py-24 bg-brutal-bg text-brutal-fg border-3 border-brutal transition-colors duration-200 ${className || ''}`}
-            {...props}
-        >
-            <div className="container px-4 md:px-6 mx-auto max-w-4xl">
-                <div className="flex flex-col items-center justify-center text-center space-y-8">
-                    <div className="inline-flex items-center space-x-2 bg-brutal-accent text-black px-4 py-1.5 border-3 border-brutal font-black text-xs uppercase tracking-wider rotate-[-1.5deg]">
-                        <Sparkles className="h-4 w-4 stroke-[3] animate-spin" />
-                        <span>Private Beta Access Open</span>
-                    </div>
-
-                    <div className="space-y-4">
-                        <h1 className="text-4xl font-black tracking-tight sm:text-5xl md:text-6xl leading-[1.05]">
-                            {title}
-                        </h1>
-                        <p className="max-w-[640px] text-lg font-bold text-gray-700 dark:text-gray-300 mx-auto leading-relaxed">
-                            {description}
-                        </p>
-                    </div>
-
-                    <form
-                        onSubmit={handleSubmit}
-                        className="w-full max-w-md flex flex-col sm:flex-row gap-3 pt-2"
-                    >
-                        <Input
-                            type="email"
-                            placeholder="Enter your personal email..."
-                            required
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            className="flex-grow text-base py-6 bg-white dark:bg-gray-800"
-                        />
-                        <Button
-                            type="submit"
-                            variant="primary"
-                            className="font-black text-sm py-6 px-6 shrink-0"
-                        >
-                            {ctaText}
-                        </Button>
-                    </form>
-
-                    <div className="w-full border-t-3 border-brutal pt-8 mt-6">
-                        <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 items-center justify-center max-w-2xl mx-auto">
-                            <div className="flex items-center justify-center space-x-2 font-black text-sm">
-                                <Users className="h-5 w-5 text-brutal-secondary stroke-[2.5]" />
-                                <span>1,840+ Developers on waitlist</span>
-                            </div>
-                            <div className="flex items-center justify-center space-x-1 font-black text-sm">
-                                {[...Array(5)].map((_, i) => (
-                                    <Star key={i} className="h-4 w-4 fill-brutal-accent text-black stroke-[2.5]" />
-                                ))}
-                                <span className="pl-1">4.9/5 stars rating</span>
-                            </div>
-                            <div className="flex items-center justify-center space-x-2 font-black text-sm sm:col-span-2 md:col-span-1">
-                                <span className="h-2 w-2 rounded-full bg-brutal-success animate-ping" />
-                                <span>Beta Invites sent daily</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
diff --git a/packages/ui/src/components/waitlist-page/WaitlistPage.vue b/packages/ui/src/components/waitlist-page/WaitlistPage.vue
new file mode 100644
index 0000000..c0c5bf1
--- /dev/null
+++ b/packages/ui/src/components/waitlist-page/WaitlistPage.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Sparkles, Users, Star } from 'lucide-vue-next'
+import { useLocale } from '@/composables/useLocale'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import Input from '../input/Input.vue'
+
+interface WaitlistPageProps {
+    title?: string
+    description?: string
+    ctaText?: string
+    waitlistCount?: number
+    class?: string
+}
+
+const props = withDefaults(defineProps<WaitlistPageProps>(), {
+    title: undefined,
+    description: '',
+    ctaText: undefined,
+    waitlistCount: 0,
+    class: '',
+})
+
+const { t } = useLocale()
+
+const resolvedTitle = computed(() => props.title ?? t('waitlistPage.title'))
+const resolvedCtaText = computed(() => props.ctaText ?? t('waitlistPage.ctaText'))
+
+const emit = defineEmits<{
+    submit: [email: string]
+}>()
+
+const email = ref('')
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+const rootClasses = computed(() => cn('w-full max-w-lg mx-auto text-center', props.class))
+
+function handleSubmit() {
+    if (email.value && EMAIL_REGEX.test(email.value)) {
+        emit('submit', email.value)
+    }
+}
+</script>
+
+<template>
+    <div :class="rootClasses">
+        <div class="inline-flex items-center gap-2 mb-6 bg-brutal-accent px-3 py-1 border-3 border-brutal rotate-[-1deg]">
+            <Sparkles class="h-4 w-4 stroke-[3] animate-spin" />
+            <span class="font-black text-sm">{{ t('waitlistPage.earlyAccess') }}</span>
+        </div>
+
+        <h1 class="text-3xl font-black tracking-tight">
+{{ resolvedTitle }}
+</h1>
+        <p v-if="description" class="mt-3 text-brutal-muted-foreground font-medium">
+{{ description }}
+</p>
+
+        <form class="mt-8 flex flex-col sm:flex-row gap-3" @submit.prevent="handleSubmit">
+            <Input v-model="email" type="email" placeholder="you@example.com" class="flex-1" />
+            <Button type="submit" variant="primary">
+{{ resolvedCtaText }}
+</Button>
+        </form>
+
+        <div class="mt-8 flex items-center justify-center gap-6 text-sm font-bold text-brutal-muted-foreground">
+            <div v-if="waitlistCount > 0" class="flex items-center gap-1">
+                <Users class="h-4 w-4 stroke-[3]" />
+                <span>{{ t('waitlistPage.onWaitlist', { count: waitlistCount.toLocaleString() }) }}</span>
+            </div>
+            <div class="flex items-center gap-1">
+                <Star v-for="i in 5" :key="i" class="h-3 w-3 fill-brutal-accent text-brutal-accent" />
+            </div>
+            <div class="flex items-center gap-1">
+                <div class="h-2 w-2 rounded-full bg-brutal-success animate-pulse" />
+                <span>{{ t('waitlistPage.live') }}</span>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/packages/ui/src/components/waitlist-page/waitlist-page.test.ts b/packages/ui/src/components/waitlist-page/waitlist-page.test.ts
new file mode 100644
index 0000000..a657207
--- /dev/null
+++ b/packages/ui/src/components/waitlist-page/waitlist-page.test.ts
@@ -0,0 +1,112 @@
+import { mount } from '@vue/test-utils'
+import { en } from '@/locales/en'
+import { LOCALE_INJECTION_KEY } from '@/composables/useLocale'
+import WaitlistPage from './WaitlistPage.vue'
+
+const localeProvide = { [LOCALE_INJECTION_KEY]: en }
+
+describe('WaitlistPage', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        expect(wrapper.find('h1').text()).toBe('Join the BrutxUI Waitlist Club')
+    })
+
+    it('shows custom title', () => {
+        const wrapper = mount(WaitlistPage, {
+            props: { title: 'Join Us Early' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.find('h1').text()).toBe('Join Us Early')
+    })
+
+    it('shows description when provided', () => {
+        const wrapper = mount(WaitlistPage, {
+            props: { description: 'Be the first to know' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('Be the first to know')
+    })
+
+    it('does not render description when not provided', () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        const descEl = wrapper.find('p.text-brutal-muted-foreground')
+        expect(descEl.exists()).toBe(false)
+    })
+
+    it('shows default CTA text', () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        expect(wrapper.text()).toContain('Secure Priority Access')
+    })
+
+    it('shows custom CTA text', () => {
+        const wrapper = mount(WaitlistPage, {
+            props: { ctaText: 'Join Now' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('Join Now')
+    })
+
+    it('renders email input', () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        const input = wrapper.find('input[type="email"]')
+        expect(input.exists()).toBe(true)
+    })
+
+    it('renders Early Access badge', () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        expect(wrapper.text()).toContain('Early Access')
+    })
+
+    it('shows waitlist count when greater than 0', () => {
+        const wrapper = mount(WaitlistPage, {
+            props: { waitlistCount: 1234 },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).toContain('1,234')
+        expect(wrapper.text()).toContain('on waitlist')
+    })
+
+    it('does not show waitlist count when 0', () => {
+        const wrapper = mount(WaitlistPage, {
+            props: { waitlistCount: 0 },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.text()).not.toContain('on waitlist')
+    })
+
+    it('emits submit with email when form is submitted with email value', async () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        const input = wrapper.find('input[type="email"]')
+        await input.setValue('test@example.com')
+        const form = wrapper.find('form')
+        await form.trigger('submit')
+        expect(wrapper.emitted('submit')).toBeTruthy()
+        expect(wrapper.emitted('submit')![0]).toEqual(['test@example.com'])
+    })
+
+    it('does not emit submit when email is empty', async () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        const form = wrapper.find('form')
+        await form.trigger('submit')
+        expect(wrapper.emitted('submit')).toBeFalsy()
+    })
+
+    it('renders star rating', () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        const stars = wrapper.findAll('svg').filter(el => el.classes().some(c => c.includes('brutal-accent')))
+        expect(stars.length).toBeGreaterThan(0)
+    })
+
+    it('renders Live indicator', () => {
+        const wrapper = mount(WaitlistPage, { global: { provide: localeProvide } })
+        expect(wrapper.text()).toContain('Live')
+    })
+
+    it('applies custom class', () => {
+        const wrapper = mount(WaitlistPage, {
+            props: { class: 'my-waitlist' },
+            global: { provide: localeProvide },
+        })
+        expect(wrapper.classes()).toContain('my-waitlist')
+    })
+})
diff --git a/packages/ui/src/composables/use-theme.test.ts b/packages/ui/src/composables/use-theme.test.ts
new file mode 100644
index 0000000..b927905
--- /dev/null
+++ b/packages/ui/src/composables/use-theme.test.ts
@@ -0,0 +1,84 @@
+import { useTheme } from './useTheme'
+
+describe('useTheme', () => {
+    beforeEach(() => {
+        document.documentElement.className = ''
+        localStorage.clear()
+    })
+
+    it('exports a composable function', () => {
+        expect(typeof useTheme).toBe('function')
+    })
+
+    it('returns theme and colorMode refs', () => {
+        const { theme, colorMode } = useTheme()
+        expect(theme.value).toBeDefined()
+        expect(colorMode.value).toBeDefined()
+    })
+
+    it('returns setTheme function', () => {
+        const { setTheme } = useTheme()
+        expect(typeof setTheme).toBe('function')
+    })
+
+    it('returns toggleColorMode function', () => {
+        const { toggleColorMode } = useTheme()
+        expect(typeof toggleColorMode).toBe('function')
+    })
+
+    it('returns applyColorMode function', () => {
+        const { applyColorMode } = useTheme()
+        expect(typeof applyColorMode).toBe('function')
+    })
+
+    it('returns initTheme function', () => {
+        const { initTheme } = useTheme()
+        expect(typeof initTheme).toBe('function')
+    })
+
+    it('default theme is classic', () => {
+        const { theme } = useTheme()
+        expect(theme.value).toBe('classic')
+    })
+
+    it('default color mode is light', () => {
+        const { colorMode } = useTheme()
+        expect(colorMode.value).toBe('light')
+    })
+
+    it('setTheme changes theme value', () => {
+        const { theme, setTheme } = useTheme()
+        setTheme('pastel')
+        expect(theme.value).toBe('pastel')
+        expect(document.documentElement.classList.contains('theme-pastel')).toBe(true)
+    })
+
+    it('toggleColorMode switches between light and dark', () => {
+        const { colorMode, toggleColorMode } = useTheme()
+        expect(colorMode.value).toBe('light')
+        toggleColorMode()
+        expect(colorMode.value).toBe('dark')
+        expect(document.documentElement.classList.contains('dark')).toBe(true)
+        toggleColorMode()
+        expect(colorMode.value).toBe('light')
+        expect(document.documentElement.classList.contains('dark')).toBe(false)
+    })
+
+    it('applyColorMode sets dark mode', () => {
+        const { colorMode, applyColorMode } = useTheme()
+        applyColorMode('dark')
+        expect(colorMode.value).toBe('dark')
+        expect(document.documentElement.classList.contains('dark')).toBe(true)
+    })
+
+    it('initTheme restores saved theme from localStorage', () => {
+        localStorage.setItem('brutx-theme', 'mono')
+        localStorage.setItem('brutx-color-mode', 'dark')
+        const { theme, colorMode, initTheme } = useTheme()
+        initTheme()
+        expect(theme.value).toBe('mono')
+        expect(colorMode.value).toBe('dark')
+        expect(document.documentElement.classList.contains('theme-mono')).toBe(true)
+        expect(document.documentElement.classList.contains('dark')).toBe(true)
+    })
+})
diff --git a/packages/ui/src/composables/use-toast.test.ts b/packages/ui/src/composables/use-toast.test.ts
new file mode 100644
index 0000000..e00526e
--- /dev/null
+++ b/packages/ui/src/composables/use-toast.test.ts
@@ -0,0 +1,105 @@
+import { createToast } from './useToast'
+
+describe('useToast', () => {
+    beforeEach(() => {
+        const { clearToasts } = createToast()
+        clearToasts()
+    })
+
+    it('addToast adds a toast to the list', () => {
+        const { toasts, addToast } = createToast()
+        addToast({ title: 'Test Toast' })
+        expect(toasts.value.length).toBe(1)
+        expect(toasts.value[0].title).toBe('Test Toast')
+    })
+
+    it('removeToast removes a toast by id', () => {
+        const { toasts, addToast, removeToast } = createToast()
+        const id = addToast({ title: 'Test Toast' })
+        expect(toasts.value.length).toBe(1)
+        removeToast(id)
+        expect(toasts.value.length).toBe(0)
+    })
+
+    it('clearToasts removes all toasts', () => {
+        const { toasts, addToast, clearToasts } = createToast()
+        addToast({ title: 'Toast 1' })
+        addToast({ title: 'Toast 2' })
+        addToast({ title: 'Toast 3' })
+        expect(toasts.value.length).toBe(3)
+        clearToasts()
+        expect(toasts.value.length).toBe(0)
+    })
+
+    it('success helper adds correct variant', () => {
+        const { toasts, success } = createToast()
+        success('Success!', 'It worked')
+        expect(toasts.value.length).toBe(1)
+        expect(toasts.value[0].variant).toBe('success')
+        expect(toasts.value[0].title).toBe('Success!')
+        expect(toasts.value[0].description).toBe('It worked')
+    })
+
+    it('error helper adds correct variant', () => {
+        const { toasts, error } = createToast()
+        error('Error!', 'Something went wrong')
+        expect(toasts.value.length).toBe(1)
+        expect(toasts.value[0].variant).toBe('error')
+        expect(toasts.value[0].title).toBe('Error!')
+        expect(toasts.value[0].description).toBe('Something went wrong')
+    })
+
+    it('warning helper adds correct variant', () => {
+        const { toasts, warning } = createToast()
+        warning('Warning!', 'Be careful')
+        expect(toasts.value.length).toBe(1)
+        expect(toasts.value[0].variant).toBe('warning')
+        expect(toasts.value[0].title).toBe('Warning!')
+        expect(toasts.value[0].description).toBe('Be careful')
+    })
+
+    it('info helper adds correct variant', () => {
+        const { toasts, info } = createToast()
+        info('Info', 'For your information')
+        expect(toasts.value.length).toBe(1)
+        expect(toasts.value[0].variant).toBe('info')
+        expect(toasts.value[0].title).toBe('Info')
+        expect(toasts.value[0].description).toBe('For your information')
+    })
+
+    it('each toast gets a unique id', () => {
+        const { toasts, addToast } = createToast()
+        addToast({ title: 'Toast 1' })
+        addToast({ title: 'Toast 2' })
+        const ids = toasts.value.map((t) => t.id)
+        expect(new Set(ids).size).toBe(ids.length)
+    })
+
+    it('addToast returns the toast id', () => {
+        const { addToast } = createToast()
+        const id = addToast({ title: 'Test' })
+        expect(typeof id).toBe('string')
+        expect(id.length).toBeGreaterThan(0)
+    })
+
+    it('removeToast only removes the specified toast', () => {
+        const { toasts, addToast, removeToast } = createToast()
+        const id1 = addToast({ title: 'Toast 1' })
+        const id2 = addToast({ title: 'Toast 2' })
+        removeToast(id1)
+        expect(toasts.value.length).toBe(1)
+        expect(toasts.value[0].id).toBe(id2)
+    })
+
+    it('supports toast with description', () => {
+        const { toasts, addToast } = createToast()
+        addToast({ title: 'Test', description: 'A description' })
+        expect(toasts.value[0].description).toBe('A description')
+    })
+
+    it('supports toast with duration', () => {
+        const { toasts, addToast } = createToast()
+        addToast({ title: 'Test', duration: 3000 })
+        expect(toasts.value[0].duration).toBe(3000)
+    })
+})
diff --git a/packages/ui/src/composables/useAudioEngine.ts b/packages/ui/src/composables/useAudioEngine.ts
new file mode 100644
index 0000000..ca8f404
--- /dev/null
+++ b/packages/ui/src/composables/useAudioEngine.ts
@@ -0,0 +1,89 @@
+import { ref, type Ref } from 'vue'
+
+const TYPE_SOUND_THROTTLE_MS = 50
+const TYPE_BASE_FREQ = 220
+const TYPE_FREQ_RANGE = 80
+const TYPE_GAIN = 0.08
+const TYPE_GAIN_END = 0.001
+const TYPE_DURATION = 0.05
+
+const SUCCESS_START_FREQ = 300
+const SUCCESS_END_FREQ = 600
+const SUCCESS_GAIN = 0.1
+const SUCCESS_GAIN_END = 0.001
+const SUCCESS_DURATION = 0.15
+
+const FAIL_FREQ_1 = 150
+const FAIL_FREQ_2 = 100
+const FAIL_FREQ_SHIFT_TIME = 0.1
+const FAIL_GAIN = 0.1
+const FAIL_GAIN_END = 0.001
+const FAIL_DURATION = 0.2
+
+export function useAudioEngine(enabled: Ref<boolean>) {
+    let audioCtx: AudioContext | null = null
+    const lastTypeSoundTime = ref(0)
+
+    const getCtx = () => {
+        if (!audioCtx && typeof window !== 'undefined') {
+            const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext
+            if (AudioContextClass) {
+                audioCtx = new AudioContextClass()
+            }
+        }
+        return audioCtx
+    }
+
+    const playSound = (type: 'type' | 'success' | 'fail') => {
+        if (!enabled.value) return
+        if (type === 'type') {
+            const now = Date.now()
+            if (now - lastTypeSoundTime.value < TYPE_SOUND_THROTTLE_MS) return
+            lastTypeSoundTime.value = now
+        }
+        
+        const ctx = getCtx()
+        if (!ctx) return
+        
+        if (ctx.state === 'suspended') {
+            ctx.resume()
+        }
+
+        const osc = ctx.createOscillator()
+        const gain = ctx.createGain()
+        osc.connect(gain)
+        gain.connect(ctx.destination)
+
+        if (type === 'type') {
+            osc.type = 'triangle'
+            osc.frequency.setValueAtTime(TYPE_BASE_FREQ + Math.random() * TYPE_FREQ_RANGE, ctx.currentTime)
+            gain.gain.setValueAtTime(TYPE_GAIN, ctx.currentTime)
+            gain.gain.exponentialRampToValueAtTime(TYPE_GAIN_END, ctx.currentTime + TYPE_DURATION)
+            osc.start()
+            osc.stop(ctx.currentTime + TYPE_DURATION)
+        } else if (type === 'success') {
+            osc.type = 'sine'
+            osc.frequency.setValueAtTime(SUCCESS_START_FREQ, ctx.currentTime)
+            osc.frequency.exponentialRampToValueAtTime(SUCCESS_END_FREQ, ctx.currentTime + SUCCESS_DURATION)
+            gain.gain.setValueAtTime(SUCCESS_GAIN, ctx.currentTime)
+            gain.gain.exponentialRampToValueAtTime(SUCCESS_GAIN_END, ctx.currentTime + SUCCESS_DURATION)
+            osc.start()
+            osc.stop(ctx.currentTime + SUCCESS_DURATION)
+        } else if (type === 'fail') {
+            osc.type = 'square'
+            osc.frequency.setValueAtTime(FAIL_FREQ_1, ctx.currentTime)
+            osc.frequency.setValueAtTime(FAIL_FREQ_2, ctx.currentTime + FAIL_FREQ_SHIFT_TIME)
+            gain.gain.setValueAtTime(FAIL_GAIN, ctx.currentTime)
+            gain.gain.exponentialRampToValueAtTime(FAIL_GAIN_END, ctx.currentTime + FAIL_DURATION)
+            osc.start()
+            osc.stop(ctx.currentTime + FAIL_DURATION)
+        }
+    }
+
+    const dispose = () => {
+        audioCtx?.close()
+        audioCtx = null
+    }
+
+    return { playSound, dispose }
+}
diff --git a/packages/ui/src/composables/useCanvasInteraction.ts b/packages/ui/src/composables/useCanvasInteraction.ts
new file mode 100644
index 0000000..d453420
--- /dev/null
+++ b/packages/ui/src/composables/useCanvasInteraction.ts
@@ -0,0 +1,199 @@
+import { ref, onMounted, onUnmounted, type Ref } from 'vue'
+
+const SAMPLE_GRID_SIZE = 8
+const PROGRESS_CHECK_INTERVAL = 10
+const PROGRESS_THROTTLE_MS = 150
+
+interface UseCanvasInteractionOptions {
+    containerRef: Ref<HTMLDivElement | null>
+    canvasRef: Ref<HTMLCanvasElement | null>
+    brushRadius: Ref<number>
+    percentage: Ref<number>
+    fadeDuration: Ref<number>
+    prefersReducedMotion: Ref<boolean>
+    onProgress: (percent: number) => void
+    onCompleted: () => void
+    drawOverlay: (ctx: CanvasRenderingContext2D, width: number, height: number) => void
+}
+
+export function useCanvasInteraction(options: UseCanvasInteractionOptions) {
+    const {
+        containerRef,
+        canvasRef,
+        brushRadius,
+        percentage,
+        fadeDuration,
+        prefersReducedMotion,
+        onProgress,
+        onCompleted,
+        drawOverlay,
+    } = options
+
+    const ctx = ref<CanvasRenderingContext2D | null>(null)
+    const isRevealed = ref(false)
+
+    let isScratching = false
+    let resizeObserver: ResizeObserver | null = null
+    let drawFrameCount = 0
+    let lastProgressTime = 0
+
+    const syncCanvasSize = () => {
+        const container = containerRef.value
+        const canvas = canvasRef.value
+        if (!container || !canvas) return
+
+        const rect = container.getBoundingClientRect()
+        const dpr = window.devicePixelRatio || 1
+
+        canvas.width = rect.width * dpr
+        canvas.height = rect.height * dpr
+        canvas.style.width = `${rect.width}px`
+        canvas.style.height = `${rect.height}px`
+
+        ctx.value = canvas.getContext('2d')
+        if (ctx.value) {
+            ctx.value.scale(dpr, dpr)
+            const w = canvas.width / dpr
+            const h = canvas.height / dpr
+            drawOverlay(ctx.value, w, h)
+        }
+    }
+
+    const calculateProgress = () => {
+        const canvas = canvasRef.value
+        const ctxVal = ctx.value
+        if (!canvas || !ctxVal) return 0
+
+        const w = canvas.width
+        const h = canvas.height
+        const imageData = ctxVal.getImageData(0, 0, w, h)
+        const pixels = imageData.data
+
+        let totalSampled = 0
+        let cleared = 0
+
+        for (let y = 0; y < h; y += SAMPLE_GRID_SIZE) {
+            for (let x = 0; x < w; x += SAMPLE_GRID_SIZE) {
+                const idx = (y * w + x) * 4 + 3
+                totalSampled++
+                if (pixels[idx] === 0) {
+                    cleared++
+                }
+            }
+        }
+
+        return Math.round((cleared / totalSampled) * 100)
+    }
+
+    const checkProgress = () => {
+        const percent = calculateProgress()
+        onProgress(percent)
+
+        if (percent >= percentage.value) {
+            revealAll()
+        }
+    }
+
+    const scratch = (clientX: number, clientY: number) => {
+        const canvas = canvasRef.value
+        const ctxVal = ctx.value
+        if (!canvas || !ctxVal || isRevealed.value) return
+
+        const rect = canvas.getBoundingClientRect()
+        const x = clientX - rect.left
+        const y = clientY - rect.top
+
+        ctxVal.save()
+        ctxVal.globalCompositeOperation = 'destination-out'
+        ctxVal.beginPath()
+        ctxVal.arc(x, y, brushRadius.value, 0, Math.PI * 2)
+        ctxVal.fill()
+        ctxVal.restore()
+
+        drawFrameCount++
+        if (drawFrameCount % PROGRESS_CHECK_INTERVAL === 0) {
+            const now = Date.now()
+            if (now - lastProgressTime > PROGRESS_THROTTLE_MS) {
+                checkProgress()
+                lastProgressTime = now
+            }
+        }
+    }
+
+    const revealAll = () => {
+        if (isRevealed.value) return
+        isRevealed.value = true
+
+        const duration = prefersReducedMotion.value ? 0 : fadeDuration.value
+        setTimeout(() => {
+            onCompleted()
+        }, duration)
+    }
+
+    const handlePointerDown = (e: PointerEvent) => {
+        isScratching = true
+        scratch(e.clientX, e.clientY)
+    }
+
+    const handlePointerMove = (e: PointerEvent) => {
+        if (!isScratching) return
+        scratch(e.clientX, e.clientY)
+    }
+
+    const handlePointerUp = () => {
+        if (isScratching) {
+            isScratching = false
+            checkProgress()
+        }
+    }
+
+    const handleTouchStart = (e: TouchEvent) => {
+        e.preventDefault()
+        isScratching = true
+        if (e.touches[0]) {
+            scratch(e.touches[0].clientX, e.touches[0].clientY)
+        }
+    }
+
+    const handleTouchMove = (e: TouchEvent) => {
+        e.preventDefault()
+        if (!isScratching) return
+        if (e.touches[0]) {
+            scratch(e.touches[0].clientX, e.touches[0].clientY)
+        }
+    }
+
+    const handleTouchEnd = () => {
+        if (isScratching) {
+            isScratching = false
+            checkProgress()
+        }
+    }
+
+    onMounted(() => {
+        syncCanvasSize()
+        if (containerRef.value) {
+            resizeObserver = new ResizeObserver(syncCanvasSize)
+            resizeObserver.observe(containerRef.value)
+        }
+    })
+
+    onUnmounted(() => {
+        if (resizeObserver) {
+            resizeObserver.disconnect()
+        }
+    })
+
+    return {
+        ctx,
+        isRevealed,
+        revealAll,
+        syncCanvasSize,
+        handlePointerDown,
+        handlePointerMove,
+        handlePointerUp,
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd,
+    }
+}
diff --git a/packages/ui/src/composables/useClipboard.ts b/packages/ui/src/composables/useClipboard.ts
new file mode 100644
index 0000000..b90c513
--- /dev/null
+++ b/packages/ui/src/composables/useClipboard.ts
@@ -0,0 +1,38 @@
+import { ref, onUnmounted } from 'vue'
+
+export function useClipboard(options: { duration?: number } = {}) {
+    const duration = options.duration ?? 2000
+    const copied = ref(false)
+    const isSupported = ref(typeof navigator !== 'undefined' && !!navigator.clipboard?.writeText)
+
+    let timeoutId: number | null = null
+
+    onUnmounted(() => {
+        if (timeoutId) clearTimeout(timeoutId)
+    })
+
+    async function copy(text: string) {
+        if (!isSupported.value) return false
+
+        try {
+            await navigator.clipboard.writeText(text)
+            copied.value = true
+
+            if (timeoutId) clearTimeout(timeoutId)
+            timeoutId = window.setTimeout(() => {
+                copied.value = false
+            }, duration)
+
+            return true
+        } catch (err) {
+            console.error('Failed to copy text: ', err)
+            return false
+        }
+    }
+
+    return {
+        copy,
+        copied,
+        isSupported,
+    }
+}
diff --git a/packages/ui/src/composables/useLocale.ts b/packages/ui/src/composables/useLocale.ts
new file mode 100644
index 0000000..4e9837b
--- /dev/null
+++ b/packages/ui/src/composables/useLocale.ts
@@ -0,0 +1,50 @@
+import { type ComputedRef, type InjectionKey, type MaybeRef, computed, inject, provide, unref } from 'vue'
+import { zhCN } from '../locales/zh-CN'
+import type { Locale } from '../locales/types'
+
+export const LOCALE_INJECTION_KEY: InjectionKey<MaybeRef<Locale>> = Symbol('brutx-ui-locale')
+
+export type TranslateFunction = (path: string, params?: Record<string, string | number>) => string
+
+export function provideLocale(locale: MaybeRef<Locale>) {
+    provide(LOCALE_INJECTION_KEY, locale)
+}
+
+function resolveByPath(obj: unknown, path: string): string | undefined {
+    const keys = path.split('.')
+    let result: unknown = obj
+    for (const key of keys) {
+        if (result == null || typeof result !== 'object') return undefined
+        result = (result as Record<string, unknown>)[key]
+    }
+    return typeof result === 'string' ? result : undefined
+}
+
+function interpolate(template: string, params?: Record<string, string | number>): string {
+    if (!params) return template
+    return Object.entries(params).reduce(
+        (str, [k, v]) => str.split(`{${k}}`).join(String(v)),
+        template,
+    )
+}
+
+export function useLocale(): { locale: ComputedRef<Locale>; t: TranslateFunction } {
+    const injected = inject<MaybeRef<Locale> | undefined>(LOCALE_INJECTION_KEY, undefined)
+
+    const locale = computed<Locale>(() => {
+        const resolved = injected ? unref(injected) : undefined
+        return resolved ?? zhCN
+    })
+
+    function t(path: string, params?: Record<string, string | number>): string {
+        const currentVal = resolveByPath(locale.value, path)
+        if (currentVal !== undefined) return interpolate(currentVal, params)
+
+        const fallbackVal = resolveByPath(zhCN, path)
+        if (fallbackVal !== undefined) return interpolate(fallbackVal, params)
+
+        return path
+    }
+
+    return { locale, t }
+}
diff --git a/packages/ui/src/composables/useReducedMotion.ts b/packages/ui/src/composables/useReducedMotion.ts
new file mode 100644
index 0000000..b807eca
--- /dev/null
+++ b/packages/ui/src/composables/useReducedMotion.ts
@@ -0,0 +1,24 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export function useReducedMotion() {
+    const prefersReduced = ref(false)
+    let mediaQuery: MediaQueryList | null = null
+
+    const onChange = (e: MediaQueryListEvent) => {
+        prefersReduced.value = e.matches
+    }
+
+    onMounted(() => {
+        if (typeof window !== 'undefined') {
+            mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+            prefersReduced.value = mediaQuery.matches
+            mediaQuery.addEventListener('change', onChange)
+        }
+    })
+
+    onUnmounted(() => {
+        mediaQuery?.removeEventListener('change', onChange)
+    })
+
+    return prefersReduced
+}
diff --git a/packages/ui/src/composables/useTheme.ts b/packages/ui/src/composables/useTheme.ts
new file mode 100644
index 0000000..16d37da
--- /dev/null
+++ b/packages/ui/src/composables/useTheme.ts
@@ -0,0 +1,74 @@
+import { ref } from 'vue'
+
+export type ThemeName = 'classic' | 'pastel' | 'mono'
+export type ColorMode = 'light' | 'dark'
+
+const theme = ref<ThemeName>('classic')
+const colorMode = ref<ColorMode>('light')
+
+function getThemeClass(name: ThemeName): string {
+    return `theme-${name}`
+}
+
+function applyTheme(name: ThemeName) {
+    if (typeof document === 'undefined') return;
+    if (name === theme.value) return;
+    const root = document.documentElement
+    root.classList.remove(getThemeClass(theme.value))
+    root.classList.add(getThemeClass(name))
+    theme.value = name
+    localStorage.setItem('brutx-theme', name)
+}
+
+function applyColorMode(mode: ColorMode) {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement
+    if (mode === 'dark') {
+        root.classList.add('dark')
+    } else {
+        root.classList.remove('dark')
+    }
+    colorMode.value = mode
+    localStorage.setItem('brutx-color-mode', mode)
+}
+
+function toggleColorMode() {
+    applyColorMode(colorMode.value === 'dark' ? 'light' : 'dark')
+}
+
+function setTheme(name: ThemeName) {
+    applyTheme(name)
+}
+
+function initTheme() {
+    if (typeof localStorage === 'undefined') return;
+    const VALID_THEMES: ThemeName[] = ['classic', 'pastel', 'mono']
+    const VALID_MODES: ColorMode[] = ['light', 'dark']
+    const savedThemeRaw = localStorage.getItem('brutx-theme')
+    const savedTheme = (savedThemeRaw && VALID_THEMES.includes(savedThemeRaw as ThemeName)) ? savedThemeRaw as ThemeName : null
+    const savedModeRaw = localStorage.getItem('brutx-color-mode')
+    const savedMode = (savedModeRaw && VALID_MODES.includes(savedModeRaw as ColorMode)) ? savedModeRaw as ColorMode : null
+
+    if (savedTheme) {
+        applyTheme(savedTheme)
+    } else {
+        applyTheme(theme.value)
+    }
+
+    if (savedMode) {
+        applyColorMode(savedMode)
+    } else if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        applyColorMode('dark')
+    }
+}
+
+export function useTheme() {
+    return {
+        theme,
+        colorMode,
+        setTheme,
+        toggleColorMode,
+        applyColorMode,
+        initTheme,
+    }
+}
diff --git a/packages/ui/src/composables/useToast.ts b/packages/ui/src/composables/useToast.ts
new file mode 100644
index 0000000..f84c951
--- /dev/null
+++ b/packages/ui/src/composables/useToast.ts
@@ -0,0 +1,80 @@
+import { ref, inject, provide, type InjectionKey } from 'vue'
+import type { VariantProps } from 'class-variance-authority'
+import { toastVariants } from '../components/toast/toast-variants'
+
+type ToastVariantProps = VariantProps<typeof toastVariants>
+
+export interface ToastItem {
+    id: string
+    variant?: NonNullable<ToastVariantProps['variant']>
+    title?: string
+    description?: string
+    duration?: number
+}
+
+const TOAST_KEY: InjectionKey<ReturnType<typeof createToast>> = Symbol('brutx-toast')
+
+export function createToast() {
+    const toasts = ref<ToastItem[]>([])
+    const MAX_TOASTS = 10
+
+    function addToast(toast: Omit<ToastItem, 'id'>) {
+        const id = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`
+        if (toasts.value.length >= MAX_TOASTS) {
+            toasts.value = toasts.value.slice(1)
+        }
+        toasts.value = [...toasts.value, { ...toast, id }]
+        const duration = toast.duration ?? 5000
+        if (duration > 0 && typeof window !== 'undefined') {
+            setTimeout(() => removeToast(id), duration)
+        }
+        return id
+    }
+
+    function removeToast(id: string) {
+        toasts.value = toasts.value.filter((t) => t.id !== id)
+    }
+
+    function clearToasts() {
+        toasts.value = []
+    }
+
+    function success(title: string, description?: string) {
+        return addToast({ variant: 'success', title, description })
+    }
+
+    function error(title: string, description?: string) {
+        return addToast({ variant: 'error', title, description })
+    }
+
+    function warning(title: string, description?: string) {
+        return addToast({ variant: 'warning', title, description })
+    }
+
+    function info(title: string, description?: string) {
+        return addToast({ variant: 'info', title, description })
+    }
+
+    return {
+        toasts,
+        addToast,
+        removeToast,
+        clearToasts,
+        success,
+        error,
+        warning,
+        info,
+    }
+}
+
+export function provideToast() {
+    const toast = createToast()
+    provide(TOAST_KEY, toast)
+    return toast
+}
+
+export function useToast() {
+    const toast = inject(TOAST_KEY)
+    if (toast) return toast
+    return createToast()
+}
diff --git a/packages/ui/src/env.d.ts b/packages/ui/src/env.d.ts
new file mode 100644
index 0000000..f0a52f9
--- /dev/null
+++ b/packages/ui/src/env.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<object, object, unknown>
+    export default component
+}
diff --git a/packages/ui/src/hooks/index.ts b/packages/ui/src/hooks/index.ts
index 6e65c42..09c88c0 100644
--- a/packages/ui/src/hooks/index.ts
+++ b/packages/ui/src/hooks/index.ts
@@ -1,4 +1,4 @@
-'use client';
-
-export { useFormStatus, useFormState } from 'react-dom';
-export { useOptimistic, useTransition, use } from 'react';
+export { useToast } from '../composables/useToast'
+export { useTheme } from '../composables/useTheme'
+export type { ThemeName, ColorMode } from '../composables/useTheme'
+export { useClipboard } from '../composables/useClipboard'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index af03d07..3622c22 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,45 +1,360 @@
-export * from './components/button';
-export * from './components/card';
-export * from './components/input';
-export * from './components/textarea';
-export * from './components/label';
-export * from './components/badge';
-export * from './components/dialog';
-export * from './components/popover';
-export * from './components/tooltip';
-export * from './components/dropdown-menu';
-export * from './components/select';
-export * from './components/tabs';
-export * from './components/table';
-export * from './components/alert';
-export * from './components/avatar';
-export * from './components/separator';
-export * from './components/switch';
-export * from './components/checkbox';
-export * from './components/pagination';
-export * from './components/spinner';
-export * from './components/toast';
-export * from './components/skeleton';
-export * from './components/command';
-export * from './components/combobox';
-export * from './components/scroll-area';
-export * from './components/saas-pricing';
-export * from './components/dashboard-stats';
-export * from './components/form';
-export * from './components/alert-dialog';
-export * from './components/sheet';
-export * from './components/radio-group';
-export * from './components/slider';
-export * from './components/progress';
-export * from './components/toggle';
-export * from './components/toggle-group';
-export * from './components/brutalist-hero';
-export * from './components/pricing-section';
-export * from './components/auth-card';
-export * from './components/dashboard-shell';
-export * from './components/empty-state';
-export * from './components/waitlist-page';
-
-export * from './lib/utils';
-
-export type { VariantProps } from 'class-variance-authority';
+export { default as Button } from './components/button/Button.vue'
+export { buttonVariants } from './components/button/button-variants'
+
+export { default as Badge } from './components/badge/Badge.vue'
+export { badgeVariants } from './components/badge/badge-variants'
+
+export { default as Separator } from './components/separator/Separator.vue'
+export { separatorVariants } from './components/separator/separator-variants'
+
+export { default as Label } from './components/label/Label.vue'
+export { labelVariants } from './components/label/label-variants'
+
+export { default as Switch } from './components/switch/Switch.vue'
+
+export { default as Checkbox } from './components/checkbox/Checkbox.vue'
+
+export { default as Progress } from './components/progress/Progress.vue'
+
+export { default as Spinner } from './components/spinner/Spinner.vue'
+export { default as BlockSpinner } from './components/spinner/BlockSpinner.vue'
+export { default as DotsSpinner } from './components/spinner/DotsSpinner.vue'
+export { default as BarsSpinner } from './components/spinner/BarsSpinner.vue'
+export { spinnerVariants, blockSpinnerVariants, barsSpinnerVariants, dotsSpinnerVariants } from './components/spinner/spinner-variants'
+
+export { default as Skeleton } from './components/skeleton/Skeleton.vue'
+export { default as SkeletonText } from './components/skeleton/SkeletonText.vue'
+export { default as SkeletonAvatar } from './components/skeleton/SkeletonAvatar.vue'
+export { default as SkeletonCard } from './components/skeleton/SkeletonCard.vue'
+export { default as SkeletonTable } from './components/skeleton/SkeletonTable.vue'
+export { skeletonVariants } from './components/skeleton/skeleton-variants'
+
+export { DialogRoot as Dialog, DialogTrigger, DialogPortal, DialogClose } from 'reka-ui'
+export { default as DialogOverlay } from './components/dialog/DialogOverlay.vue'
+export { default as DialogContent } from './components/dialog/DialogContent.vue'
+export { default as DialogHeader } from './components/dialog/DialogHeader.vue'
+export { default as DialogFooter } from './components/dialog/DialogFooter.vue'
+export { default as DialogTitle } from './components/dialog/DialogTitle.vue'
+export { default as DialogDescription } from './components/dialog/DialogDescription.vue'
+
+export { AlertDialogRoot as AlertDialog, AlertDialogTrigger, AlertDialogPortal } from 'reka-ui'
+export { default as AlertDialogContent } from './components/alert-dialog/AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './components/alert-dialog/AlertDialogHeader.vue'
+export { default as AlertDialogFooter } from './components/alert-dialog/AlertDialogFooter.vue'
+export { default as AlertDialogTitle } from './components/alert-dialog/AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './components/alert-dialog/AlertDialogDescription.vue'
+export { default as AlertDialogAction } from './components/alert-dialog/AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './components/alert-dialog/AlertDialogCancel.vue'
+
+export { DialogRoot as Sheet, DialogTrigger as SheetTrigger, DialogPortal as SheetPortal, DialogClose as SheetClose } from 'reka-ui'
+export { default as SheetContent } from './components/sheet/SheetContent.vue'
+export { default as SheetHeader } from './components/sheet/SheetHeader.vue'
+export { default as SheetFooter } from './components/sheet/SheetFooter.vue'
+export { default as SheetTitle } from './components/sheet/SheetTitle.vue'
+export { default as SheetDescription } from './components/sheet/SheetDescription.vue'
+export { sheetVariants } from './components/sheet/sheet-variants'
+
+export { PopoverRoot as Popover, PopoverTrigger, PopoverAnchor } from 'reka-ui'
+export { default as PopoverContent } from './components/popover/PopoverContent.vue'
+
+export { TooltipProvider, TooltipRoot as Tooltip, TooltipTrigger } from 'reka-ui'
+export { default as TooltipContent } from './components/tooltip/TooltipContent.vue'
+
+export { SelectRoot as Select, SelectGroup, SelectValue } from 'reka-ui'
+export { default as SelectTrigger } from './components/select/SelectTrigger.vue'
+export { default as SelectContent } from './components/select/SelectContent.vue'
+export { default as SelectItem } from './components/select/SelectItem.vue'
+export { default as SelectLabel } from './components/select/SelectLabel.vue'
+export { default as SelectSeparator } from './components/select/SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './components/select/SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './components/select/SelectScrollDownButton.vue'
+
+export { DropdownMenuRoot as DropdownMenu, DropdownMenuTrigger, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuRadioGroup } from 'reka-ui'
+export { default as DropdownMenuContent } from './components/dropdown-menu/DropdownMenuContent.vue'
+export { default as DropdownMenuItem } from './components/dropdown-menu/DropdownMenuItem.vue'
+export { default as DropdownMenuCheckboxItem } from './components/dropdown-menu/DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuRadioItem } from './components/dropdown-menu/DropdownMenuRadioItem.vue'
+export { default as DropdownMenuLabel } from './components/dropdown-menu/DropdownMenuLabel.vue'
+export { default as DropdownMenuSeparator } from './components/dropdown-menu/DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './components/dropdown-menu/DropdownMenuShortcut.vue'
+export { default as DropdownMenuSubTrigger } from './components/dropdown-menu/DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuSubContent } from './components/dropdown-menu/DropdownMenuSubContent.vue'
+
+export { default as RadioGroup } from './components/radio-group/RadioGroup.vue'
+export { default as RadioGroupItem } from './components/radio-group/RadioGroupItem.vue'
+
+export { default as Slider } from './components/slider/Slider.vue'
+
+export { default as Toggle } from './components/toggle/Toggle.vue'
+export { toggleVariants } from './components/toggle/toggle-variants'
+
+export { default as ToggleGroup } from './components/toggle-group/ToggleGroup.vue'
+export { default as ToggleGroupItem } from './components/toggle-group/ToggleGroupItem.vue'
+
+export { TabsRoot as Tabs } from 'reka-ui'
+export { default as TabsList } from './components/tabs/TabsList.vue'
+export { default as TabsTrigger } from './components/tabs/TabsTrigger.vue'
+export { default as TabsContent } from './components/tabs/TabsContent.vue'
+
+export { default as Avatar } from './components/avatar/Avatar.vue'
+export { default as AvatarImage } from './components/avatar/AvatarImage.vue'
+export { default as AvatarFallback } from './components/avatar/AvatarFallback.vue'
+export { avatarVariants } from './components/avatar/avatar-variants'
+
+export { default as ScrollArea } from './components/scroll-area/ScrollArea.vue'
+export { default as ScrollBar } from './components/scroll-area/ScrollBar.vue'
+
+export { default as Table } from './components/table/Table.vue'
+export { default as TableHeader } from './components/table/TableHeader.vue'
+export { default as TableBody } from './components/table/TableBody.vue'
+export { default as TableFooter } from './components/table/TableFooter.vue'
+export { default as TableRow } from './components/table/TableRow.vue'
+export { default as TableHead } from './components/table/TableHead.vue'
+export { default as TableCell } from './components/table/TableCell.vue'
+export { default as TableCaption } from './components/table/TableCaption.vue'
+
+export { default as Alert } from './components/alert/Alert.vue'
+export { default as AlertTitle } from './components/alert/AlertTitle.vue'
+export { default as AlertDescription } from './components/alert/AlertDescription.vue'
+export { alertVariants } from './components/alert/alert-variants'
+
+export { default as Pagination } from './components/pagination/Pagination.vue'
+export { paginationVariants, paginationButtonVariants } from './components/pagination/pagination-variants'
+
+export { default as Input } from './components/input/Input.vue'
+export { inputVariants } from './components/input/input-variants'
+
+export { default as Textarea } from './components/textarea/Textarea.vue'
+export { textareaVariants } from './components/textarea/textarea-variants'
+
+export { default as Card } from './components/card/Card.vue'
+export { default as CardHeader } from './components/card/CardHeader.vue'
+export { default as CardTitle } from './components/card/CardTitle.vue'
+export { default as CardDescription } from './components/card/CardDescription.vue'
+export { default as CardContent } from './components/card/CardContent.vue'
+export { default as CardFooter } from './components/card/CardFooter.vue'
+export { cardVariants } from './components/card/card-variants'
+
+export { default as Command } from './components/command/Command.vue'
+export { default as CommandDialog } from './components/command/CommandDialog.vue'
+export { default as CommandInput } from './components/command/CommandInput.vue'
+export { default as CommandList } from './components/command/CommandList.vue'
+export { default as CommandEmpty } from './components/command/CommandEmpty.vue'
+export { default as CommandGroup } from './components/command/CommandGroup.vue'
+export { default as CommandItem } from './components/command/CommandItem.vue'
+export { default as CommandSeparator } from './components/command/CommandSeparator.vue'
+export { default as CommandShortcut } from './components/command/CommandShortcut.vue'
+
+export { default as Combobox } from './components/combobox/Combobox.vue'
+export { default as ComboboxMulti } from './components/combobox/ComboboxMulti.vue'
+export type { ComboboxOption } from './components/combobox/combobox-types'
+
+export { default as Form } from './components/form/Form.vue'
+export { default as FormField } from './components/form/FormField.vue'
+export { default as FormItem } from './components/form/FormItem.vue'
+export { default as FormLabel } from './components/form/FormLabel.vue'
+export { default as FormControl } from './components/form/FormControl.vue'
+export { default as FormDescription } from './components/form/FormDescription.vue'
+export { default as FormMessage } from './components/form/FormMessage.vue'
+export { formFieldKey, formItemKey, formContextKey } from './components/form/form-context'
+export type { FormFieldContext, FormItemContext } from './components/form/form-context'
+
+export { default as SubmitButton } from './components/submit-button/SubmitButton.vue'
+
+export { default as Calendar } from './components/calendar/Calendar.vue'
+
+export { default as Toast } from './components/toast/Toast.vue'
+export { default as ToastContainer } from './components/toast/ToastContainer.vue'
+export { toastVariants } from './components/toast/toast-variants'
+export { useToast, provideToast, createToast } from './composables/useToast'
+export type { ToastItem } from './composables/useToast'
+
+export { useTheme } from './composables/useTheme'
+export type { ThemeName, ColorMode } from './composables/useTheme'
+
+export { default as SaaSPricing } from './components/saas-pricing/SaaSPricing.vue'
+export type { PricingPlan, PricingFeature } from './components/saas-pricing/SaaSPricing.vue'
+
+export { default as DashboardStats } from './components/dashboard-stats/DashboardStats.vue'
+export type { StatItem } from './components/dashboard-stats/DashboardStats.vue'
+
+export { default as DashboardShell } from './components/dashboard-shell/DashboardShell.vue'
+
+export { default as BrutalistHero } from './components/brutalist-hero/BrutalistHero.vue'
+
+export { default as AuthCard } from './components/auth-card/AuthCard.vue'
+
+export { default as EmptyState } from './components/empty-state/EmptyState.vue'
+
+export { default as PricingSection } from './components/pricing-section/PricingSection.vue'
+export type { BrutalistPricingPlan } from './components/pricing-section/PricingSection.vue'
+
+export { default as WaitlistPage } from './components/waitlist-page/WaitlistPage.vue'
+
+export { default as TestimonialCard } from './components/testimonial-card/TestimonialCard.vue'
+
+export { default as BlogCard } from './components/blog-card/BlogCard.vue'
+
+export { default as FileCard } from './components/file-card/FileCard.vue'
+
+export { default as QuickActions } from './components/quick-actions/QuickActions.vue'
+export type { ActionItem } from './components/quick-actions/QuickActions.vue'
+
+export { default as FaqSection } from './components/faq-section/FaqSection.vue'
+export type { FaqItem } from './components/faq-section/FaqSection.vue'
+
+export { default as TabsNav } from './components/tabs-nav/TabsNav.vue'
+export type { TabItem } from './components/tabs-nav/TabsNav.vue'
+
+export { default as HeaderSection } from './components/header-section/HeaderSection.vue'
+export type { NavItem } from './components/header-section/HeaderSection.vue'
+
+export { default as FooterSection } from './components/footer-section/FooterSection.vue'
+export type { FooterLinkGroup, FooterLink } from './components/footer-section/FooterSection.vue'
+
+export { default as NotFoundPage } from './components/not-found-page/NotFoundPage.vue'
+
+export { default as LoadingPage } from './components/loading-page/LoadingPage.vue'
+
+export { default as ErrorCard } from './components/error-card/ErrorCard.vue'
+
+export { default as SuccessCard } from './components/success-card/SuccessCard.vue'
+
+export { default as SearchWidget } from './components/search-widget/SearchWidget.vue'
+export type { SearchSuggestion } from './components/search-widget/SearchWidget.vue'
+
+export { default as FeedbackForm } from './components/feedback-form/FeedbackForm.vue'
+
+export { default as StepperSection } from './components/stepper-section/StepperSection.vue'
+export type { StepperStepItem } from './components/stepper-section/StepperSection.vue'
+
+export { default as CookieConsent } from './components/cookie-consent/CookieConsent.vue'
+
+export { default as DataTableSection } from './components/data-table-section/DataTableSection.vue'
+export type { ColumnDef } from './components/data-table-section/DataTableSection.vue'
+
+export { default as SettingsPage } from './components/settings-page/SettingsPage.vue'
+export type { SettingsTab } from './components/settings-page/SettingsPage.vue'
+
+export { default as BlogListPage } from './components/blog-list-page/BlogListPage.vue'
+export type { BlogPost } from './components/blog-list-page/BlogListPage.vue'
+
+export { default as ActivityLogPage } from './components/activity-log-page/ActivityLogPage.vue'
+export type { ActivityEntry } from './components/activity-log-page/ActivityLogPage.vue'
+
+export { default as ProfilePage } from './components/profile-page/ProfilePage.vue'
+
+export { default as ChartSection } from './components/chart-section/ChartSection.vue'
+export type { ChartDataPoint } from './components/chart-section/ChartSection.vue'
+
+export { default as GallerySection } from './components/gallery-section/GallerySection.vue'
+export type { GalleryItem } from './components/gallery-section/GallerySection.vue'
+
+export { default as UploadCard } from './components/upload-card/UploadCard.vue'
+
+export { default as OverviewPage } from './components/overview-page/OverviewPage.vue'
+export type { OverviewStat } from './components/overview-page/OverviewPage.vue'
+
+export { default as Accordion } from './components/accordion/Accordion.vue'
+export { default as AccordionItem } from './components/accordion/AccordionItem.vue'
+export { default as AccordionTrigger } from './components/accordion/AccordionTrigger.vue'
+export { default as AccordionContent } from './components/accordion/AccordionContent.vue'
+export { accordionItemVariants, accordionTriggerVariants, accordionContentVariants } from './components/accordion/accordion-variants'
+
+export { default as TagsInput } from './components/tags-input/TagsInput.vue'
+export { default as TagsInputInput } from './components/tags-input/TagsInputInput.vue'
+export { default as TagsInputItem } from './components/tags-input/TagsInputItem.vue'
+export { default as TagsInputItemText } from './components/tags-input/TagsInputItemText.vue'
+export { default as TagsInputItemDelete } from './components/tags-input/TagsInputItemDelete.vue'
+export { tagsInputItemVariants } from './components/tags-input/tags-input-variants'
+
+export { default as NumberInput } from './components/number-input/NumberInput.vue'
+export { numberInputRootVariants, numberInputButtonVariants, numberInputFieldVariants } from './components/number-input/number-input-variants'
+
+export { default as CopyToClipboard } from './components/copy-to-clipboard/CopyToClipboard.vue'
+export { copyToClipboardVariants } from './components/copy-to-clipboard/copy-to-clipboard-variants'
+export { useClipboard } from './composables/useClipboard'
+
+export { default as Breadcrumb } from './components/breadcrumb/Breadcrumb.vue'
+export { default as BreadcrumbList } from './components/breadcrumb/BreadcrumbList.vue'
+export { default as BreadcrumbItem } from './components/breadcrumb/BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './components/breadcrumb/BreadcrumbLink.vue'
+export { default as BreadcrumbPage } from './components/breadcrumb/BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './components/breadcrumb/BreadcrumbSeparator.vue'
+export { default as BreadcrumbEllipsis } from './components/breadcrumb/BreadcrumbEllipsis.vue'
+export { breadcrumbListVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbPageVariants, breadcrumbSeparatorVariants, breadcrumbEllipsisVariants } from './components/breadcrumb/breadcrumb-variants'
+
+export { default as Marquee } from './components/marquee/Marquee.vue'
+export { marqueeContainerVariants, marqueeTrackVariants } from './components/marquee/marquee-variants'
+
+export { default as BeforeAfter } from './components/before-after/BeforeAfter.vue'
+export { beforeAfterRootVariants, beforeAfterHandleVariants } from './components/before-after/before-after-variants'
+
+export { default as CodeBlock } from './components/code-block/CodeBlock.vue'
+export { codeBlockRootVariants, codeBlockHeaderVariants, codeBlockLanguageVariants, codeBlockBodyVariants, codeBlockLineNumbersVariants } from './components/code-block/code-block-variants'
+
+export { default as Timeline } from './components/timeline/Timeline.vue'
+export { default as TimelineItem } from './components/timeline/TimelineItem.vue'
+export { default as TimelineSeparator } from './components/timeline/TimelineSeparator.vue'
+export { default as TimelineDot } from './components/timeline/TimelineDot.vue'
+export { default as TimelineConnector } from './components/timeline/TimelineConnector.vue'
+export { default as TimelineContent } from './components/timeline/TimelineContent.vue'
+export { timelineDotVariants } from './components/timeline/timeline-variants'
+
+export { default as Carousel } from './components/carousel/Carousel.vue'
+export { default as CarouselItem } from './components/carousel/CarouselItem.vue'
+export { carouselRootVariants, carouselButtonVariants } from './components/carousel/carousel-variants'
+
+export { default as TreeView } from './components/tree-view/TreeView.vue'
+export { default as TreeViewNode } from './components/tree-view/TreeViewNode.vue'
+export type { TreeNode } from './components/tree-view/TreeView.vue'
+export { treeItemVariants } from './components/tree-view/tree-view-variants'
+
+export { default as KanbanBoard } from './components/kanban/KanbanBoard.vue'
+export type { KanbanCard, KanbanColumn } from './components/kanban/KanbanBoard.vue'
+export { kanbanColumnVariants, kanbanCardVariants } from './components/kanban/kanban-variants'
+
+export { default as ChatBubble } from './components/chat-bubble/ChatBubble.vue'
+export { chatBubbleVariants, chatAvatarVariants } from './components/chat-bubble/chat-bubble-variants'
+
+export { default as Kbd } from './components/kbd/Kbd.vue'
+export { kbdVariants } from './components/kbd/kbd-variants'
+
+export { default as Counter } from './components/counter/Counter.vue'
+export { counterVariants } from './components/counter/counter-variants'
+
+export { default as Stepper } from './components/stepper/Stepper.vue'
+export type { StepperStep } from './components/stepper/Stepper.vue'
+export { stepperDotVariants, stepperConnectorVariants, stepperItemVariants } from './components/stepper/stepper-variants'
+
+export * from './lib/utils'
+
+export type { VariantProps } from 'class-variance-authority'
+
+export { BrutxUIPlugin } from './plugin'
+export type { BrutxUIPluginOptions } from './plugin'
+export { useLocale, provideLocale } from './composables/useLocale'
+export type { TranslateFunction } from './composables/useLocale'
+export { zhCN, en, mergeLocale } from './locales'
+export type { Locale, CommandLocale, ComboboxLocale, PaginationLocale, CarouselLocale, SpinnerLocale, SubmitButtonLocale, CopyToClipboardLocale, BeforeAfterLocale, AuthCardLocale, WaitlistPageLocale, DashboardShellLocale, BrutalistHeroLocale, SaaSPricingLocale, ToastLocale, DialogLocale, SheetLocale, BreadcrumbLocale, TreeViewLocale, StepperLocale, EmptyStateLocale, TestimonialCardLocale, BlogCardLocale, FileCardLocale, QuickActionsLocale, FaqSectionLocale, HeaderSectionLocale, FooterSectionLocale, NotFoundPageLocale, LoadingPageLocale, ErrorCardLocale, SuccessCardLocale, SearchWidgetLocale, FeedbackFormLocale, StepperSectionLocale, CookieConsentLocale, DataTableSectionLocale, SettingsPageLocale, UploadCardLocale, OverviewPageLocale, BlogListPageLocale, ActivityLogPageLocale, ProfilePageLocale, ChartSectionLocale, GallerySectionLocale } from './locales/types'
+
+// 新增新粗野主义交互与数据可视化组件导出
+export { default as Card3D } from './components/card-3d/Card3D.vue'
+export { card3dVariants, card3dShadowVariants } from './components/card-3d/card-3d-variants'
+
+export { default as GlitchText } from './components/glitch-text/GlitchText.vue'
+export { glitchTextVariants } from './components/glitch-text/glitch-text-variants'
+
+export { default as ScratchCard } from './components/scratch-card/ScratchCard.vue'
+export { scratchCardVariants } from './components/scratch-card/scratch-card-variants'
+
+export { default as SketchyChart } from './components/sketchy-chart/SketchyChart.vue'
+export { sketchyChartVariants } from './components/sketchy-chart/sketchy-chart-variants'
+
+export { default as HardcoreInput } from './components/hardcore-input/HardcoreInput.vue'
+export { hardcoreInputVariants, hardcoreInputFaceVariants } from './components/hardcore-input/hardcore-input-variants'
+
+export { useReducedMotion } from './composables/useReducedMotion'
+export { useAudioEngine } from './composables/useAudioEngine'
+export { useCanvasInteraction } from './composables/useCanvasInteraction'
+
diff --git a/packages/ui/src/lib/brutalism-plugin.js b/packages/ui/src/lib/brutalism-plugin.js
index f91927b..7f0101f 100644
--- a/packages/ui/src/lib/brutalism-plugin.js
+++ b/packages/ui/src/lib/brutalism-plugin.js
@@ -4,42 +4,42 @@ const brutalismPlugin = plugin(
     function ({ addUtilities, addComponents, theme }) {
         const utilities = {
             '.nb-border': {
-                borderWidth: '3px',
+                borderWidth: 'var(--brutal-border-width, 3px)',
                 borderStyle: 'solid',
-                borderColor: '#000000',
+                borderColor: 'var(--brutal-border-color, #000000)',
             },
             '.nb-border-2': {
                 borderWidth: '2px',
                 borderStyle: 'solid',
-                borderColor: '#000000',
+                borderColor: 'var(--brutal-border-color, #000000)',
             },
             '.nb-border-4': {
                 borderWidth: '4px',
                 borderStyle: 'solid',
-                borderColor: '#000000',
+                borderColor: 'var(--brutal-border-color, #000000)',
             },
             '.nb-shadow': {
-                boxShadow: '4px 4px 0px 0px #000000',
+                boxShadow: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
             },
             '.nb-shadow-sm': {
-                boxShadow: '2px 2px 0px 0px #000000',
+                boxShadow: 'calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)',
             },
             '.nb-shadow-lg': {
-                boxShadow: '6px 6px 0px 0px #000000',
+                boxShadow: 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
             },
             '.nb-shadow-xl': {
-                boxShadow: '8px 8px 0px 0px #000000',
+                boxShadow: 'calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)',
             },
             '.nb-press': {
-                transform: 'translateY(2px)',
+                transform: 'translateY(var(--brutal-pressed-offset, 2px))',
                 boxShadow: 'none',
             },
             '.nb-press-sm': {
-                transform: 'translateY(1px)',
+                transform: 'translateY(calc(var(--brutal-pressed-offset, 2px) / 2))',
                 boxShadow: 'none',
             },
             '.nb-press-lg': {
-                transform: 'translateY(3px)',
+                transform: 'translateY(calc(var(--brutal-pressed-offset, 2px) * 1.5))',
                 boxShadow: 'none',
             },
             '.nb-font': {
@@ -55,7 +55,7 @@ const brutalismPlugin = plugin(
                 letterSpacing: '0.015em',
             },
             '.nb-no-radius': {
-                borderRadius: '0px',
+                borderRadius: 'var(--brutal-radius, 0px)',
             },
             '.nb-transition': {
                 transitionProperty: 'transform, box-shadow',
@@ -67,23 +67,23 @@ const brutalismPlugin = plugin(
         const interactiveUtilities = {
             '.nb-hover': {
                 '&:hover': {
-                    transform: 'translate(-2px, -2px)',
-                    boxShadow: '6px 6px 0px 0px #000000',
+                    transform: 'translate(calc(var(--brutal-shadow-offset-x, 4px) / -2), calc(var(--brutal-shadow-offset-y, 4px) / -2))',
+                    boxShadow: 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
                 },
             },
             '.nb-active': {
                 '&:active': {
-                    transform: 'translateY(2px)',
+                    transform: 'translateY(var(--brutal-pressed-offset, 2px))',
                     boxShadow: 'none',
                 },
             },
             '.nb-focus': {
                 '&:focus': {
-                    outline: '3px solid #000000',
+                    outline: '3px solid var(--brutal-ring, #000000)',
                     outlineOffset: '2px',
                 },
                 '&:focus-visible': {
-                    outline: '3px solid #000000',
+                    outline: '3px solid var(--brutal-ring, #000000)',
                     outlineOffset: '2px',
                 },
             },
@@ -101,24 +101,24 @@ const brutalismPlugin = plugin(
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                borderWidth: '3px',
+                borderWidth: 'var(--brutal-border-width, 3px)',
                 borderStyle: 'solid',
-                borderColor: '#000000',
-                backgroundColor: '#FFFFFF',
-                boxShadow: '4px 4px 0px 0px #000000',
+                borderColor: 'var(--brutal-border-color, #000000)',
+                backgroundColor: 'var(--brutal-bg, #ffffff)',
+                boxShadow: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
                 fontWeight: '900',
                 letterSpacing: '0.025em',
-                borderRadius: '0px',
+                borderRadius: 'var(--brutal-radius, 0px)',
                 transitionProperty: 'transform, box-shadow',
                 transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
                 transitionDuration: '150ms',
                 cursor: 'pointer',
                 '&:hover': {
-                    transform: 'translate(-2px, -2px)',
-                    boxShadow: '6px 6px 0px 0px #000000',
+                    transform: 'translate(calc(var(--brutal-shadow-offset-x, 4px) / -2), calc(var(--brutal-shadow-offset-y, 4px) / -2))',
+                    boxShadow: 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
                 },
                 '&:active': {
-                    transform: 'translateY(2px)',
+                    transform: 'translateY(var(--brutal-pressed-offset, 2px))',
                     boxShadow: 'none',
                 },
                 '&:disabled': {
@@ -128,27 +128,28 @@ const brutalismPlugin = plugin(
                 },
             },
             '.nb-card': {
-                borderWidth: '3px',
+                borderWidth: 'var(--brutal-border-width, 3px)',
                 borderStyle: 'solid',
-                borderColor: '#000000',
-                backgroundColor: '#FFFFFF',
-                boxShadow: '4px 4px 0px 0px #000000',
-                borderRadius: '0px',
+                borderColor: 'var(--brutal-border-color, #000000)',
+                backgroundColor: 'var(--brutal-bg, #ffffff)',
+                boxShadow: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
+                borderRadius: 'var(--brutal-radius, 0px)',
                 padding: '1rem',
             },
             '.nb-input': {
-                borderWidth: '3px',
+                borderWidth: 'var(--brutal-border-width, 3px)',
                 borderStyle: 'solid',
-                borderColor: '#000000',
-                backgroundColor: '#FFFFFF',
-                borderRadius: '0px',
+                borderColor: 'var(--brutal-border-color, #000000)',
+                backgroundColor: 'var(--brutal-bg, #ffffff)',
+                borderRadius: 'var(--brutal-radius, 0px)',
                 fontWeight: '500',
                 '&:focus': {
-                    outline: 'none',
-                    boxShadow: '4px 4px 0px 0px #000000',
+                    outline: '2px solid var(--brutal-ring, #000000)',
+                    outlineOffset: '2px',
+                    boxShadow: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
                 },
                 '&::placeholder': {
-                    color: '#6B7280',
+                    color: 'var(--brutal-placeholder, #9CA3AF)',
                     fontWeight: '400',
                 },
             },
@@ -162,30 +163,37 @@ const brutalismPlugin = plugin(
         theme: {
             extend: {
                 colors: {
-                    brutalism: {
-                        bg: '#FFFFFF',
-                        text: '#000000',
-                        primary: '#FF6B6B',
-                        secondary: '#4ECDC4',
-                        accent: '#FFE66D',
-                        success: '#7FB069',
-                        warning: '#F9A825',
-                        danger: '#EF476F',
-                        info: '#4A90D9',
-                        muted: '#9CA3AF',
+                    brutal: {
+                        bg: 'var(--brutal-bg)',
+                        fg: 'var(--brutal-fg)',
+                        primary: 'var(--brutal-primary)',
+                        secondary: 'var(--brutal-secondary)',
+                        accent: 'var(--brutal-accent)',
+                        destructive: 'var(--brutal-destructive)',
+                        success: 'var(--brutal-success)',
+                        muted: 'var(--brutal-muted)',
+                        'muted-foreground': 'var(--brutal-muted-foreground)',
+                        ring: 'var(--brutal-ring)',
+                        info: 'var(--brutal-info)',
+                        overlay: 'var(--brutal-overlay)',
+                        placeholder: 'var(--brutal-placeholder)',
                     },
                 },
                 boxShadow: {
-                    brutal: '4px 4px 0px 0px #000000',
-                    'brutal-sm': '2px 2px 0px 0px #000000',
-                    'brutal-lg': '6px 6px 0px 0px #000000',
-                    'brutal-xl': '8px 8px 0px 0px #000000',
-                    'brutal-primary': '4px 4px 0px 0px #FF6B6B',
-                    'brutal-secondary': '4px 4px 0px 0px #4ECDC4',
+                    brutal: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
+                    'brutal-sm': 'calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)',
+                    'brutal-lg': 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
+                    'brutal-xl': 'calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)',
                 },
                 borderWidth: {
                     3: '3px',
                 },
+                borderRadius: {
+                    brutal: 'var(--brutal-radius, 0px)',
+                },
+                borderColor: {
+                    brutal: 'var(--brutal-border-color, #000000)',
+                },
             },
         },
     }
diff --git a/packages/ui/src/lib/test-utils.ts b/packages/ui/src/lib/test-utils.ts
new file mode 100644
index 0000000..a835303
--- /dev/null
+++ b/packages/ui/src/lib/test-utils.ts
@@ -0,0 +1,31 @@
+import { mount, type MountingOptions } from '@vue/test-utils'
+import { h, type Component } from 'vue'
+
+export function mountComponent(
+    component: Component,
+    options?: MountingOptions<Record<string, unknown>>
+) {
+    return mount(component, {
+        ...options,
+    })
+}
+
+export function mountWithSlots(
+    component: Component,
+    slots: Record<string, string | Component>,
+    options?: MountingOptions<Record<string, unknown>>
+) {
+    return mountComponent(component, {
+        ...options,
+        slots,
+    })
+}
+
+export function createSlotComponent(content: string) {
+    return {
+        name: 'SlotComponent',
+        render() {
+            return h('span', content)
+        },
+    }
+}
diff --git a/packages/ui/src/lib/utils.test.ts b/packages/ui/src/lib/utils.test.ts
new file mode 100644
index 0000000..96d23bc
--- /dev/null
+++ b/packages/ui/src/lib/utils.test.ts
@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+import { cn } from '../lib/utils'
+
+describe('cn', () => {
+    it('should merge class names', () => {
+        expect(cn('foo', 'bar')).toBe('foo bar')
+    })
+
+    it('should handle conditional classes', () => {
+        const condition = false
+        expect(cn('foo', condition ? 'bar' : undefined, 'baz')).toBe('foo baz')
+    })
+
+    it('should merge tailwind classes correctly', () => {
+        expect(cn('px-2 py-1', 'px-4')).toBe('py-1 px-4')
+    })
+
+    it('should handle undefined and null', () => {
+        expect(cn('foo', undefined, null, 'bar')).toBe('foo bar')
+    })
+})
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
index dd53ea8..ccd54c7 100644
--- a/packages/ui/src/lib/utils.ts
+++ b/packages/ui/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
+    return twMerge(clsx(inputs))
 }
diff --git a/packages/ui/src/locales/en.ts b/packages/ui/src/locales/en.ts
new file mode 100644
index 0000000..901c742
--- /dev/null
+++ b/packages/ui/src/locales/en.ts
@@ -0,0 +1,263 @@
+import type { Locale } from './types'
+
+export const en: Locale = {
+    command: {
+        placeholder: 'Type a command or search...',
+        emptyText: 'No results found.',
+        dialogTitle: 'Command Palette',
+        dialogDescription: 'Search for a command to run...',
+    },
+    combobox: {
+        placeholder: 'Select option...',
+        multiPlaceholder: 'Select options...',
+        searchPlaceholder: 'Search...',
+        emptyText: 'No results found.',
+        selectedCount: '{count} selected',
+    },
+    pagination: {
+        firstPage: 'Go to first page',
+        previousPage: 'Go to previous page',
+        nextPage: 'Go to next page',
+        lastPage: 'Go to last page',
+        page: 'Go to page {number}',
+        label: 'pagination',
+    },
+    carousel: {
+        previousSlide: 'Previous slide',
+        nextSlide: 'Next slide',
+        goToSlide: 'Go to slide {index}',
+    },
+    spinner: {
+        loading: 'Loading...',
+    },
+    submitButton: {
+        submitting: 'Submitting...',
+    },
+    copyToClipboard: {
+        copy: 'Copy',
+        copied: 'Copied',
+    },
+    beforeAfter: {
+        before: 'Before',
+        after: 'After',
+    },
+    authCard: {
+        welcomeBack: 'Welcome back',
+        signInToContinue: 'Sign in to your account to continue',
+        google: 'Google',
+        github: 'GitHub',
+        orEmailLogin: 'or email login',
+        email: 'Email',
+        password: 'Password',
+        forgotPassword: 'Forgot password?',
+        signIn: 'Sign In',
+        noAccount: "Don't have an account?",
+        register: 'Register',
+        emailPlaceholder: 'you@example.com',
+        passwordPlaceholder: '••••••••',
+    },
+    waitlistPage: {
+        title: 'Join the BrutxUI Waitlist Club',
+        ctaText: 'Secure Priority Access',
+        earlyAccess: 'Early Access',
+        onWaitlist: '{count} on waitlist',
+        live: 'Live',
+    },
+    dashboardShell: {
+        sidebarNavigation: 'Sidebar navigation',
+        signOut: 'Sign out',
+        defaultEmail: 'user@example.com',
+    },
+    brutalistHero: {
+        title: 'Build Bold Interfaces Faster with BrutxUI',
+        primaryCtaText: 'Get Started Now',
+        secondaryCtaText: 'View Component Registry',
+        neoBrutalismUI: 'Neo-Brutalism UI',
+    },
+    saasPricing: {
+        title: 'Simple, Unapologetic Pricing',
+        monthly: 'Monthly',
+        annually: 'Annually',
+        mostPopular: 'MOST POPULAR',
+        perMonth: '/mo',
+        perMonthBilledAnnually: 'mo (billed annually)',
+        billingPeriod: 'Billing period',
+    },
+    toast: {
+        close: 'Close',
+        container: 'Notifications',
+    },
+    dialog: {
+        close: 'Close',
+    },
+    sheet: {
+        close: 'Close',
+    },
+    breadcrumb: {
+        label: 'breadcrumb',
+        more: 'More',
+    },
+    treeView: {
+        fileTree: 'File tree',
+    },
+    stepper: {
+        progressSteps: 'Progress steps',
+        step: 'Step {index}: {title}',
+    },
+    emptyState: {
+        defaultTitle: 'No active deployments found',
+        defaultActionText: 'Deploy New App',
+    },
+    testimonialCard: {
+        defaultQuote: 'This product has completely transformed our workflow.',
+        defaultAuthor: 'Alex Johnson',
+        defaultRole: 'Product Manager',
+        verified: 'Verified',
+    },
+    blogCard: {
+        defaultTitle: 'Getting Started with BrutxUI',
+        defaultExcerpt: 'Learn how to build bold interfaces with our component library.',
+        readMore: 'Read more',
+    },
+    fileCard: {
+        defaultFileName: 'document.pdf',
+        download: 'Download',
+    },
+    quickActions: {
+        defaultTitle: 'Quick Actions',
+        badge: 'Quick',
+    },
+    faqSection: {
+        defaultTitle: 'Frequently Asked Questions',
+        defaultSubtitle: 'Find the answers you need',
+    },
+    headerSection: {
+        defaultLogoText: 'BrutxUI',
+        defaultCtaText: 'Get Started',
+        menuLabel: 'Menu',
+    },
+    footerSection: {
+        defaultLogoText: 'BrutxUI',
+        defaultDescription: 'Neo-Brutalist UI component library for Vue 3',
+        defaultCopyright: '© 2026 BrutxUI. All rights reserved.',
+    },
+    notFoundPage: {
+        defaultTitle: 'Page Not Found',
+        defaultDescription: 'The page you are looking for does not exist or has been removed.',
+        defaultBackText: 'Go Back Home',
+    },
+    loadingPage: {
+        defaultTitle: 'Loading',
+        defaultDescription: 'Please wait while content is loading...',
+    },
+    errorCard: {
+        defaultTitle: 'Something went wrong',
+        defaultDescription: 'The operation could not be completed. Please try again.',
+        defaultRetryText: 'Retry',
+        dismiss: 'Dismiss',
+    },
+    successCard: {
+        defaultTitle: 'Success',
+        defaultDescription: 'Your action has been completed successfully.',
+        defaultConfirmText: 'Confirm',
+    },
+    searchWidget: {
+        defaultPlaceholder: 'Search...',
+    },
+    feedbackForm: {
+        defaultTitle: 'Send Feedback',
+        defaultDescription: "We'd love to hear from you",
+        defaultSubmitText: 'Submit Feedback',
+        nameLabel: 'Name',
+        emailLabel: 'Email',
+        subjectLabel: 'Subject',
+        messageLabel: 'Message',
+    },
+    stepperSection: {
+        defaultTitle: 'Steps',
+        previous: 'Previous',
+        next: 'Next',
+    },
+    cookieConsent: {
+        defaultTitle: 'We use cookies',
+        defaultDescription: 'This website uses cookies to enhance your browsing experience.',
+        defaultAcceptText: 'Accept',
+        defaultDeclineText: 'Decline',
+    },
+    dataTableSection: {
+        defaultTitle: 'Data Table',
+        searchPlaceholder: 'Search...',
+        noResults: 'No matching results found',
+    },
+    settingsPage: {
+        defaultTitle: 'Settings',
+        saveText: 'Save Changes',
+        nameLabel: 'Name',
+        namePlaceholder: 'Enter name',
+        notificationsLabel: 'Notifications',
+    },
+    uploadCard: {
+        defaultTitle: 'Upload Files',
+        defaultDescription: 'Drag and drop your files here',
+        browseText: 'Browse Files',
+        dropText: 'Drop files here',
+    },
+    overviewPage: {
+        defaultTitle: 'Overview',
+        recentActivity: 'Recent Activity',
+        quickStats: 'Quick Stats',
+    },
+    blogListPage: {
+        defaultTitle: 'Blog',
+        searchPlaceholder: 'Search posts...',
+        allCategories: 'All',
+        noPostsFound: 'No posts found',
+    },
+    activityLogPage: {
+        defaultTitle: 'Activity Log',
+        action: 'Action',
+        user: 'User',
+        timestamp: 'Timestamp',
+        details: 'Details',
+        noActivityFound: 'No activity found',
+    },
+    profilePage: {
+        defaultTitle: 'Profile',
+        nameLabel: 'Name',
+        emailLabel: 'Email',
+        bioLabel: 'Bio',
+        saveText: 'Save',
+    },
+    chartSection: {
+        defaultTitle: 'Data Visualization',
+        defaultSubtitle: 'View data trends',
+        bar: 'Bar',
+        line: 'Line',
+        pie: 'Pie',
+    },
+    gallerySection: {
+        defaultTitle: 'Gallery',
+        noItems: 'No items to display',
+    },
+    scratchCard: {
+        ariaLabel: 'Scratch Card',
+    },
+    sketchyChart: {
+        lineAriaLabel: 'Sketchy Line Chart',
+        barAriaLabel: 'Sketchy Bar Chart',
+        pieAriaLabel: 'Sketchy Pie Chart',
+    },
+    card3d: {
+        ariaLabel: '3D Interactive Card',
+    },
+    hardcoreInput: {
+        invalidInput: 'Invalid input',
+    },
+    codeBlock: {
+        copied: 'Copied',
+        copy: 'Copy',
+    },
+    kanban: {
+        dropCardsHere: 'Drop cards here',
+    },
+}
diff --git a/packages/ui/src/locales/index.ts b/packages/ui/src/locales/index.ts
new file mode 100644
index 0000000..340104b
--- /dev/null
+++ b/packages/ui/src/locales/index.ts
@@ -0,0 +1,21 @@
+import type { Locale } from './types'
+
+export { zhCN } from './zh-CN'
+export { en } from './en'
+export type { Locale, CommandLocale, ComboboxLocale, PaginationLocale, CarouselLocale, SpinnerLocale, SubmitButtonLocale, CopyToClipboardLocale, BeforeAfterLocale, AuthCardLocale, WaitlistPageLocale, DashboardShellLocale, BrutalistHeroLocale, SaaSPricingLocale, ToastLocale, DialogLocale, SheetLocale, BreadcrumbLocale, TreeViewLocale, StepperLocale, EmptyStateLocale, TestimonialCardLocale, BlogCardLocale, FileCardLocale, QuickActionsLocale, FaqSectionLocale, HeaderSectionLocale, FooterSectionLocale, NotFoundPageLocale, LoadingPageLocale, ErrorCardLocale, SuccessCardLocale, SearchWidgetLocale, FeedbackFormLocale, StepperSectionLocale, CookieConsentLocale, DataTableSectionLocale, SettingsPageLocale, UploadCardLocale, OverviewPageLocale, BlogListPageLocale, ActivityLogPageLocale, ProfilePageLocale, ChartSectionLocale, GallerySectionLocale } from './types'
+
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
+}
+
+export function mergeLocale(base: Locale, override: DeepPartial<Locale>): Locale {
+    const result = { ...base } as unknown as Record<string, unknown>
+    for (const key of Object.keys(override)) {
+        const overrideVal = (override as unknown as Record<string, unknown>)[key]
+        if (overrideVal && typeof overrideVal === 'object' && !Array.isArray(overrideVal)) {
+            const baseVal = (base as unknown as Record<string, unknown>)[key] as Record<string, unknown>
+            result[key] = { ...baseVal, ...overrideVal }
+        }
+    }
+    return result as unknown as Locale
+}
diff --git a/packages/ui/src/locales/types.ts b/packages/ui/src/locales/types.ts
new file mode 100644
index 0000000..c9b6ac9
--- /dev/null
+++ b/packages/ui/src/locales/types.ts
@@ -0,0 +1,361 @@
+export interface CommandLocale {
+    placeholder: string
+    emptyText: string
+    dialogTitle: string
+    dialogDescription: string
+}
+
+export interface ComboboxLocale {
+    placeholder: string
+    multiPlaceholder: string
+    searchPlaceholder: string
+    emptyText: string
+    selectedCount: string
+}
+
+export interface PaginationLocale {
+    firstPage: string
+    previousPage: string
+    nextPage: string
+    lastPage: string
+    page: string
+    label: string
+}
+
+export interface CarouselLocale {
+    previousSlide: string
+    nextSlide: string
+    goToSlide: string
+}
+
+export interface SpinnerLocale {
+    loading: string
+}
+
+export interface SubmitButtonLocale {
+    submitting: string
+}
+
+export interface CopyToClipboardLocale {
+    copy: string
+    copied: string
+}
+
+export interface BeforeAfterLocale {
+    before: string
+    after: string
+}
+
+export interface AuthCardLocale {
+    welcomeBack: string
+    signInToContinue: string
+    google: string
+    github: string
+    orEmailLogin: string
+    email: string
+    password: string
+    forgotPassword: string
+    signIn: string
+    noAccount: string
+    register: string
+    emailPlaceholder: string
+    passwordPlaceholder: string
+}
+
+export interface WaitlistPageLocale {
+    title: string
+    ctaText: string
+    earlyAccess: string
+    onWaitlist: string
+    live: string
+}
+
+export interface DashboardShellLocale {
+    sidebarNavigation: string
+    signOut: string
+    defaultEmail: string
+}
+
+export interface BrutalistHeroLocale {
+    title: string
+    primaryCtaText: string
+    secondaryCtaText: string
+    neoBrutalismUI: string
+}
+
+export interface SaaSPricingLocale {
+    title: string
+    monthly: string
+    annually: string
+    mostPopular: string
+    perMonth: string
+    perMonthBilledAnnually: string
+    billingPeriod: string
+}
+
+export interface ToastLocale {
+    close: string
+    container: string
+}
+
+export interface DialogLocale {
+    close: string
+}
+
+export interface SheetLocale {
+    close: string
+}
+
+export interface BreadcrumbLocale {
+    label: string
+    more: string
+}
+
+export interface TreeViewLocale {
+    fileTree: string
+}
+
+export interface StepperLocale {
+    progressSteps: string
+    step: string
+}
+
+export interface EmptyStateLocale {
+    defaultTitle: string
+    defaultActionText: string
+}
+
+export interface TestimonialCardLocale {
+    defaultQuote: string
+    defaultAuthor: string
+    defaultRole: string
+    verified: string
+}
+
+export interface BlogCardLocale {
+    defaultTitle: string
+    defaultExcerpt: string
+    readMore: string
+}
+
+export interface FileCardLocale {
+    defaultFileName: string
+    download: string
+}
+
+export interface QuickActionsLocale {
+    defaultTitle: string
+    badge: string
+}
+
+export interface FaqSectionLocale {
+    defaultTitle: string
+    defaultSubtitle: string
+}
+
+export interface HeaderSectionLocale {
+    defaultLogoText: string
+    defaultCtaText: string
+    menuLabel: string
+}
+
+export interface FooterSectionLocale {
+    defaultLogoText: string
+    defaultDescription: string
+    defaultCopyright: string
+}
+
+export interface NotFoundPageLocale {
+    defaultTitle: string
+    defaultDescription: string
+    defaultBackText: string
+}
+
+export interface LoadingPageLocale {
+    defaultTitle: string
+    defaultDescription: string
+}
+
+export interface ErrorCardLocale {
+    defaultTitle: string
+    defaultDescription: string
+    defaultRetryText: string
+    dismiss: string
+}
+
+export interface SuccessCardLocale {
+    defaultTitle: string
+    defaultDescription: string
+    defaultConfirmText: string
+}
+
+export interface SearchWidgetLocale {
+    defaultPlaceholder: string
+}
+
+export interface FeedbackFormLocale {
+    defaultTitle: string
+    defaultDescription: string
+    defaultSubmitText: string
+    nameLabel: string
+    emailLabel: string
+    subjectLabel: string
+    messageLabel: string
+}
+
+export interface StepperSectionLocale {
+    defaultTitle: string
+    previous: string
+    next: string
+}
+
+export interface CookieConsentLocale {
+    defaultTitle: string
+    defaultDescription: string
+    defaultAcceptText: string
+    defaultDeclineText: string
+}
+
+export interface DataTableSectionLocale {
+    defaultTitle: string
+    searchPlaceholder: string
+    noResults: string
+}
+
+export interface SettingsPageLocale {
+    defaultTitle: string
+    saveText: string
+    nameLabel: string
+    namePlaceholder: string
+    notificationsLabel: string
+}
+
+export interface UploadCardLocale {
+    defaultTitle: string
+    defaultDescription: string
+    browseText: string
+    dropText: string
+}
+
+export interface OverviewPageLocale {
+    defaultTitle: string
+    recentActivity: string
+    quickStats: string
+}
+
+export interface BlogListPageLocale {
+    defaultTitle: string
+    searchPlaceholder: string
+    allCategories: string
+    noPostsFound: string
+}
+
+export interface ActivityLogPageLocale {
+    defaultTitle: string
+    action: string
+    user: string
+    timestamp: string
+    details: string
+    noActivityFound: string
+}
+
+export interface ProfilePageLocale {
+    defaultTitle: string
+    nameLabel: string
+    emailLabel: string
+    bioLabel: string
+    saveText: string
+}
+
+export interface ChartSectionLocale {
+    defaultTitle: string
+    defaultSubtitle: string
+    bar: string
+    line: string
+    pie: string
+}
+
+export interface GallerySectionLocale {
+    defaultTitle: string
+    noItems: string
+}
+
+export interface ScratchCardLocale {
+    ariaLabel: string
+}
+
+export interface SketchyChartLocale {
+    lineAriaLabel: string
+    barAriaLabel: string
+    pieAriaLabel: string
+}
+
+export interface Card3dLocale {
+    ariaLabel: string
+}
+
+export interface HardcoreInputLocale {
+    invalidInput: string
+}
+
+export interface CodeBlockLocale {
+    copied: string
+    copy: string
+}
+
+export interface KanbanLocale {
+    dropCardsHere: string
+}
+
+export interface Locale {
+    command: CommandLocale
+    combobox: ComboboxLocale
+    pagination: PaginationLocale
+    carousel: CarouselLocale
+    spinner: SpinnerLocale
+    submitButton: SubmitButtonLocale
+    copyToClipboard: CopyToClipboardLocale
+    beforeAfter: BeforeAfterLocale
+    authCard: AuthCardLocale
+    waitlistPage: WaitlistPageLocale
+    dashboardShell: DashboardShellLocale
+    brutalistHero: BrutalistHeroLocale
+    saasPricing: SaaSPricingLocale
+    toast: ToastLocale
+    dialog: DialogLocale
+    sheet: SheetLocale
+    breadcrumb: BreadcrumbLocale
+    treeView: TreeViewLocale
+    stepper: StepperLocale
+    emptyState: EmptyStateLocale
+    testimonialCard: TestimonialCardLocale
+    blogCard: BlogCardLocale
+    fileCard: FileCardLocale
+    quickActions: QuickActionsLocale
+    faqSection: FaqSectionLocale
+    headerSection: HeaderSectionLocale
+    footerSection: FooterSectionLocale
+    notFoundPage: NotFoundPageLocale
+    loadingPage: LoadingPageLocale
+    errorCard: ErrorCardLocale
+    successCard: SuccessCardLocale
+    searchWidget: SearchWidgetLocale
+    feedbackForm: FeedbackFormLocale
+    stepperSection: StepperSectionLocale
+    cookieConsent: CookieConsentLocale
+    dataTableSection: DataTableSectionLocale
+    settingsPage: SettingsPageLocale
+    uploadCard: UploadCardLocale
+    overviewPage: OverviewPageLocale
+    blogListPage: BlogListPageLocale
+    activityLogPage: ActivityLogPageLocale
+    profilePage: ProfilePageLocale
+    chartSection: ChartSectionLocale
+    gallerySection: GallerySectionLocale
+    scratchCard: ScratchCardLocale
+    sketchyChart: SketchyChartLocale
+    card3d: Card3dLocale
+    hardcoreInput: HardcoreInputLocale
+    codeBlock: CodeBlockLocale
+    kanban: KanbanLocale
+}
diff --git a/packages/ui/src/locales/zh-CN.ts b/packages/ui/src/locales/zh-CN.ts
new file mode 100644
index 0000000..df7881b
--- /dev/null
+++ b/packages/ui/src/locales/zh-CN.ts
@@ -0,0 +1,263 @@
+import type { Locale } from './types'
+
+export const zhCN: Locale = {
+    command: {
+        placeholder: '输入命令或搜索...',
+        emptyText: '未找到结果。',
+        dialogTitle: '命令面板',
+        dialogDescription: '搜索要运行的命令...',
+    },
+    combobox: {
+        placeholder: '选择选项...',
+        multiPlaceholder: '选择多个选项...',
+        searchPlaceholder: '搜索...',
+        emptyText: '未找到结果。',
+        selectedCount: '已选 {count} 项',
+    },
+    pagination: {
+        firstPage: '转到第一页',
+        previousPage: '转到上一页',
+        nextPage: '转到下一页',
+        lastPage: '转到最后一页',
+        page: '第 {number} 页',
+        label: '分页导航',
+    },
+    carousel: {
+        previousSlide: '上一张幻灯片',
+        nextSlide: '下一张幻灯片',
+        goToSlide: '跳转到第 {index} 张幻灯片',
+    },
+    spinner: {
+        loading: '加载中...',
+    },
+    submitButton: {
+        submitting: '提交中...',
+    },
+    copyToClipboard: {
+        copy: '复制',
+        copied: '已复制',
+    },
+    beforeAfter: {
+        before: '之前',
+        after: '之后',
+    },
+    authCard: {
+        welcomeBack: '欢迎回来',
+        signInToContinue: '登录您的账户以继续',
+        google: 'Google',
+        github: 'GitHub',
+        orEmailLogin: '或使用邮箱登录',
+        email: '邮箱',
+        password: '密码',
+        forgotPassword: '忘记密码？',
+        signIn: '登录',
+        noAccount: '还没有账户？',
+        register: '注册',
+        emailPlaceholder: 'you@example.com',
+        passwordPlaceholder: '••••••••',
+    },
+    waitlistPage: {
+        title: '加入 BrutxUI 等候俱乐部',
+        ctaText: '获取优先访问权',
+        earlyAccess: '抢先体验',
+        onWaitlist: '{count} 人已加入等候',
+        live: '在线',
+    },
+    dashboardShell: {
+        sidebarNavigation: '侧边栏导航',
+        signOut: '退出登录',
+        defaultEmail: 'user@example.com',
+    },
+    brutalistHero: {
+        title: '用 BrutxUI 更快地构建大胆界面',
+        primaryCtaText: '立即开始',
+        secondaryCtaText: '查看组件注册表',
+        neoBrutalismUI: '新粗野主义 UI',
+    },
+    saasPricing: {
+        title: '简单，不妥协的定价',
+        monthly: '按月',
+        annually: '按年',
+        mostPopular: '最受欢迎',
+        perMonth: '/月',
+        perMonthBilledAnnually: '每月（按年计费）',
+        billingPeriod: '计费周期',
+    },
+    toast: {
+        close: '关闭',
+        container: '通知',
+    },
+    dialog: {
+        close: '关闭',
+    },
+    sheet: {
+        close: '关闭',
+    },
+    breadcrumb: {
+        label: '面包屑导航',
+        more: '更多',
+    },
+    treeView: {
+        fileTree: '文件树',
+    },
+    stepper: {
+        progressSteps: '进度步骤',
+        step: '第 {index} 步：{title}',
+    },
+    emptyState: {
+        defaultTitle: '未找到活跃的部署',
+        defaultActionText: '部署新应用',
+    },
+    testimonialCard: {
+        defaultQuote: '这款产品彻底改变了我们的工作流程。',
+        defaultAuthor: '张明',
+        defaultRole: '产品经理',
+        verified: '已认证',
+    },
+    blogCard: {
+        defaultTitle: 'BrutxUI 入门指南',
+        defaultExcerpt: '了解如何使用我们的组件库构建大胆的界面。',
+        readMore: '阅读更多',
+    },
+    fileCard: {
+        defaultFileName: '文档.pdf',
+        download: '下载',
+    },
+    quickActions: {
+        defaultTitle: '快捷操作',
+        badge: '快捷',
+    },
+    faqSection: {
+        defaultTitle: '常见问题',
+        defaultSubtitle: '查找您需要的答案',
+    },
+    headerSection: {
+        defaultLogoText: 'BrutxUI',
+        defaultCtaText: '开始使用',
+        menuLabel: '菜单',
+    },
+    footerSection: {
+        defaultLogoText: 'BrutxUI',
+        defaultDescription: '面向 Vue 3 的新粗野主义 UI 组件库',
+        defaultCopyright: '© 2026 BrutxUI. 保留所有权利。',
+    },
+    notFoundPage: {
+        defaultTitle: '页面未找到',
+        defaultDescription: '您访问的页面不存在或已被移除。',
+        defaultBackText: '返回首页',
+    },
+    loadingPage: {
+        defaultTitle: '加载中',
+        defaultDescription: '请稍候，内容正在加载...',
+    },
+    errorCard: {
+        defaultTitle: '发生错误',
+        defaultDescription: '操作未能完成，请重试。',
+        defaultRetryText: '重试',
+        dismiss: '关闭',
+    },
+    successCard: {
+        defaultTitle: '操作成功',
+        defaultDescription: '您的操作已成功完成。',
+        defaultConfirmText: '确认',
+    },
+    searchWidget: {
+        defaultPlaceholder: '搜索...',
+    },
+    feedbackForm: {
+        defaultTitle: '发送反馈',
+        defaultDescription: '我们很乐意听取您的意见',
+        defaultSubmitText: '提交反馈',
+        nameLabel: '姓名',
+        emailLabel: '邮箱',
+        subjectLabel: '主题',
+        messageLabel: '消息',
+    },
+    stepperSection: {
+        defaultTitle: '步骤',
+        previous: '上一步',
+        next: '下一步',
+    },
+    cookieConsent: {
+        defaultTitle: '我们使用 Cookie',
+        defaultDescription: '本网站使用 Cookie 来提升您的浏览体验。',
+        defaultAcceptText: '接受',
+        defaultDeclineText: '拒绝',
+    },
+    dataTableSection: {
+        defaultTitle: '数据列表',
+        searchPlaceholder: '搜索...',
+        noResults: '未找到匹配结果',
+    },
+    settingsPage: {
+        defaultTitle: '设置',
+        saveText: '保存更改',
+        nameLabel: '姓名',
+        namePlaceholder: '输入姓名',
+        notificationsLabel: '通知',
+    },
+    uploadCard: {
+        defaultTitle: '上传文件',
+        defaultDescription: '拖拽文件到此处',
+        browseText: '浏览文件',
+        dropText: '释放文件以上传',
+    },
+    overviewPage: {
+        defaultTitle: '概览',
+        recentActivity: '最近活动',
+        quickStats: '快速统计',
+    },
+    blogListPage: {
+        defaultTitle: '博客',
+        searchPlaceholder: '搜索文章...',
+        allCategories: '全部',
+        noPostsFound: '未找到文章',
+    },
+    activityLogPage: {
+        defaultTitle: '活动日志',
+        action: '操作',
+        user: '用户',
+        timestamp: '时间',
+        details: '详情',
+        noActivityFound: '未找到活动记录',
+    },
+    profilePage: {
+        defaultTitle: '个人资料',
+        nameLabel: '姓名',
+        emailLabel: '邮箱',
+        bioLabel: '简介',
+        saveText: '保存',
+    },
+    chartSection: {
+        defaultTitle: '数据可视化',
+        defaultSubtitle: '查看数据趋势',
+        bar: '柱状图',
+        line: '折线图',
+        pie: '饼图',
+    },
+    gallerySection: {
+        defaultTitle: '画廊',
+        noItems: '暂无内容',
+    },
+    scratchCard: {
+        ariaLabel: '刮刮卡',
+    },
+    sketchyChart: {
+        lineAriaLabel: '手绘风格折线图',
+        barAriaLabel: '手绘风格柱状图',
+        pieAriaLabel: '手绘风格饼图',
+    },
+    card3d: {
+        ariaLabel: '3D 交互卡片',
+    },
+    hardcoreInput: {
+        invalidInput: '输入内容无效',
+    },
+    codeBlock: {
+        copied: '已复制',
+        copy: '复制',
+    },
+    kanban: {
+        dropCardsHere: '拖放卡片到此处',
+    },
+}
diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts
new file mode 100644
index 0000000..ff1f481
--- /dev/null
+++ b/packages/ui/src/plugin.ts
@@ -0,0 +1,15 @@
+import type { App, MaybeRef } from 'vue'
+import type { Locale } from './locales/types'
+import { LOCALE_INJECTION_KEY } from './composables/useLocale'
+import { zhCN } from './locales/zh-CN'
+
+export interface BrutxUIPluginOptions {
+    locale?: MaybeRef<Locale>
+}
+
+export const BrutxUIPlugin = {
+    install(app: App, options: BrutxUIPluginOptions = {}) {
+        const locale = options.locale ?? zhCN
+        app.provide(LOCALE_INJECTION_KEY, locale)
+    },
+}
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 76022d3..e145ebc 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -1,3 +1,5 @@
+@import 'v-calendar/dist/style.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -28,28 +30,19 @@
         -moz-osx-font-smoothing: grayscale;
     }
 
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 240 10% 3.9%;
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 240 10% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-        --border: 240 5.9% 90%;
-        --input: 240 5.9% 90%;
-        --primary: 240 5.9% 10%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 240 4.8% 95.9%;
-        --secondary-foreground: 240 5.9% 10%;
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --ring: 240 5.9% 10%;
-        --radius: 0.5rem;
+    /* Breadcrumb list reset to prevent style pollution from external markdown renderers (like VitePress) */
+    nav[aria-label="breadcrumb"] ol,
+    nav[aria-label="breadcrumb"] li {
+        list-style: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+    nav[aria-label="breadcrumb"] li::before,
+    nav[aria-label="breadcrumb"] li::after {
+        content: none !important;
+    }
 
+    :root {
         --brutal-border-width: 3px;
         --brutal-border-color: #000000;
         --brutal-shadow-offset-x: 4px;
@@ -64,31 +57,15 @@
         --brutal-destructive: #EF476F;
         --brutal-success: #7FB069;
         --brutal-muted: #f3f4f6;
+        --brutal-muted-foreground: #4B5563;
         --brutal-ring: #000000;
         --brutal-pressed-offset: 2px;
+        --brutal-info: #4A90D9;
+        --brutal-overlay: rgba(0, 0, 0, 0.5);
+        --brutal-placeholder: #9CA3AF;
     }
 
     .dark {
-        --background: 20 14.3% 4.1%;
-        --foreground: 0 0% 95%;
-        --muted: 0 0% 15%;
-        --muted-foreground: 240 5% 64.9%;
-        --popover: 20 14.3% 4.1%;
-        --popover-foreground: 0 0% 95%;
-        --card: 24 9.8% 10%;
-        --card-foreground: 0 0% 95%;
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 240 5.9% 10%;
-        --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 0 0% 98%;
-        --accent: 12 6.5% 15.1%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 85.7% 97.3%;
-        --ring: 240 4.9% 83.9%;
-
         --brutal-border-width: 3px;
         --brutal-border-color: #ffffff;
         --brutal-shadow-offset-x: 4px;
@@ -103,8 +80,12 @@
         --brutal-destructive: #EF476F;
         --brutal-success: #7FB069;
         --brutal-muted: #1e1e1e;
+        --brutal-muted-foreground: #9CA3AF;
         --brutal-ring: #ffffff;
         --brutal-pressed-offset: 2px;
+        --brutal-info: #3B82F6;
+        --brutal-overlay: rgba(0, 0, 0, 0.7);
+        --brutal-placeholder: #6B7280;
     }
 
     .theme-classic {
@@ -122,14 +103,22 @@
         --brutal-destructive: #EF476F;
         --brutal-success: #7FB069;
         --brutal-muted: #f3f4f6;
+        --brutal-muted-foreground: #4B5563;
         --brutal-ring: #000000;
+        --brutal-info: #4A90D9;
+        --brutal-overlay: rgba(0, 0, 0, 0.5);
+        --brutal-placeholder: #9CA3AF;
     }
     .dark .theme-classic, .theme-classic.dark {
         --brutal-border-color: #ffffff;
         --brutal-shadow-color: #ffffff;
         --brutal-bg: #141414;
         --brutal-fg: #ffffff;
+        --brutal-muted-foreground: #9CA3AF;
         --brutal-ring: #ffffff;
+        --brutal-info: #3B82F6;
+        --brutal-overlay: rgba(0, 0, 0, 0.7);
+        --brutal-placeholder: #6B7280;
     }
 
     .theme-pastel {
@@ -147,7 +136,11 @@
         --brutal-destructive: #f3b0b0;
         --brutal-success: #cce2cb;
         --brutal-muted: #eae8e1;
+        --brutal-muted-foreground: #6b6b78;
         --brutal-ring: #1e1e24;
+        --brutal-info: #a8c8e8;
+        --brutal-overlay: rgba(0, 0, 0, 0.4);
+        --brutal-placeholder: #b0aeb5;
     }
     .dark .theme-pastel, .theme-pastel.dark {
         --brutal-border-color: #e5e5e5;
@@ -160,7 +153,11 @@
         --brutal-destructive: #9b5a5a;
         --brutal-success: #678465;
         --brutal-muted: #27252f;
+        --brutal-muted-foreground: #8a8a99;
         --brutal-ring: #e5e5e5;
+        --brutal-info: #5a7a9b;
+        --brutal-overlay: rgba(0, 0, 0, 0.7);
+        --brutal-placeholder: #5a5866;
     }
 
     .theme-mono {
@@ -178,7 +175,11 @@
         --brutal-destructive: #333333;
         --brutal-success: #dddddd;
         --brutal-muted: #f0f0f0;
+        --brutal-muted-foreground: #555555;
         --brutal-ring: #000000;
+        --brutal-info: #666666;
+        --brutal-overlay: rgba(0, 0, 0, 0.5);
+        --brutal-placeholder: #888888;
     }
     .dark .theme-mono, .theme-mono.dark {
         --brutal-border-color: #ffffff;
@@ -191,7 +192,11 @@
         --brutal-destructive: #cccccc;
         --brutal-success: #222222;
         --brutal-muted: #1a1a1a;
+        --brutal-muted-foreground: #aaaaaa;
         --brutal-ring: #ffffff;
+        --brutal-info: #999999;
+        --brutal-overlay: rgba(0, 0, 0, 0.7);
+        --brutal-placeholder: #777777;
     }
 }
 
@@ -255,6 +260,14 @@
     .shadow-brutal-xl {
         box-shadow: calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000);
     }
+
+    .shadow-brutal-primary {
+        box-shadow: var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-primary);
+    }
+
+    .shadow-brutal-secondary {
+        box-shadow: var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-secondary);
+    }
 }
 
 @keyframes fadeIn {
@@ -324,3 +337,57 @@
         opacity: 0;
     }
 }
+
+@keyframes accordion-down {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--reka-accordion-content-height);
+    }
+}
+
+@keyframes accordion-up {
+    from {
+        height: var(--reka-accordion-content-height);
+    }
+    to {
+        height: 0;
+    }
+}
+
+.animate-accordion-down {
+    animation: accordion-down 0.2s ease-out;
+}
+
+.animate-accordion-up {
+    animation: accordion-up 0.2s ease-out;
+}
+
+@keyframes marquee-left {
+    from {
+        transform: translateX(0%);
+    }
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes marquee-right {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0%);
+    }
+}
+
+.animate-marquee-left {
+    animation: marquee-left var(--speed, 20s) linear infinite;
+}
+
+.animate-marquee-right {
+    animation: marquee-right var(--speed, 20s) linear infinite;
+}
+
+
diff --git a/packages/ui/src/submit-button.ts b/packages/ui/src/submit-button.ts
index b48e723..6ab7925 100644
--- a/packages/ui/src/submit-button.ts
+++ b/packages/ui/src/submit-button.ts
@@ -1 +1 @@
-export * from './components/submit-button';
+export { default as SubmitButton } from './components/submit-button/SubmitButton.vue'
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index f09bd34..348af86 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -1,86 +1,41 @@
-/**
- * @type {import('tailwindcss').Config}
- */
+/** @type {import('tailwindcss').Config} */
 module.exports = {
-    darkMode: ['class'],
-    content: ['./src/**/*.{js,ts,jsx,tsx}'],
+    content: ['./src/**/*.{ts,tsx,vue}'],
+    darkMode: 'class',
     theme: {
         extend: {
             colors: {
-                border: 'hsl(var(--border))',
-                input: 'hsl(var(--input))',
-                ring: 'hsl(var(--ring))',
-                background: 'hsl(var(--background))',
-                foreground: 'hsl(var(--foreground))',
-                primary: {
-                    DEFAULT: 'hsl(var(--primary))',
-                    foreground: 'hsl(var(--primary-foreground))',
-                },
-                secondary: {
-                    DEFAULT: 'hsl(var(--secondary))',
-                    foreground: 'hsl(var(--secondary-foreground))',
-                },
-                destructive: {
-                    DEFAULT: 'hsl(var(--destructive))',
-                    foreground: 'hsl(var(--destructive-foreground))',
-                },
-                muted: {
-                    DEFAULT: 'hsl(var(--muted))',
-                    foreground: 'hsl(var(--muted-foreground))',
-                },
-                accent: {
-                    DEFAULT: 'hsl(var(--accent))',
-                    foreground: 'hsl(var(--accent-foreground))',
-                },
-                popover: {
-                    DEFAULT: 'hsl(var(--popover))',
-                    foreground: 'hsl(var(--popover-foreground))',
-                },
-                card: {
-                    DEFAULT: 'hsl(var(--card))',
-                    foreground: 'hsl(var(--card-foreground))',
-                },
                 brutal: {
-                    bg: 'var(--brutal-bg, #ffffff)',
-                    fg: 'var(--brutal-fg, #000000)',
-                    border: 'var(--brutal-border-color, #000000)',
-                    shadow: 'var(--brutal-shadow-color, #000000)',
-                    primary: 'var(--brutal-primary, #FF6B6B)',
-                    secondary: 'var(--brutal-secondary, #4ECDC4)',
-                    accent: 'var(--brutal-accent, #FFE66D)',
-                    destructive: 'var(--brutal-destructive, #EF476F)',
-                    success: 'var(--brutal-success, #7FB069)',
-                    muted: 'var(--brutal-muted, #f3f4f6)',
-                    ring: 'var(--brutal-ring, #000000)',
-                },
-                brutalism: {
-                    bg: '#FFFFFF',
-                    text: '#000000',
-                    primary: '#FF6B6B',
-                    secondary: '#4ECDC4',
-                    accent: '#FFE66D',
-                    success: '#7FB069',
-                    warning: '#F9A825',
-                    danger: '#EF476F',
+                    bg: 'var(--brutal-bg)',
+                    fg: 'var(--brutal-fg)',
+                    primary: 'var(--brutal-primary)',
+                    secondary: 'var(--brutal-secondary)',
+                    accent: 'var(--brutal-accent)',
+                    destructive: 'var(--brutal-destructive)',
+                    success: 'var(--brutal-success)',
+                    muted: 'var(--brutal-muted)',
+                    'muted-foreground': 'var(--brutal-muted-foreground)',
+                    ring: 'var(--brutal-ring)',
+                    info: 'var(--brutal-info)',
+                    overlay: 'var(--brutal-overlay)',
+                    placeholder: 'var(--brutal-placeholder)',
                 },
             },
-            fontFamily: {
-                brutal: ['Inter', 'system-ui', 'sans-serif'],
-            },
-            borderRadius: {
-                brutal: 'var(--brutal-radius, 0px)',
-            },
             boxShadow: {
-                xs: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
                 brutal: 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-shadow-color, #000000)',
                 'brutal-sm': 'calc(var(--brutal-shadow-offset-x, 4px) / 2) calc(var(--brutal-shadow-offset-y, 4px) / 2) 0px 0px var(--brutal-shadow-color, #000000)',
                 'brutal-lg': 'calc(var(--brutal-shadow-offset-x, 4px) * 1.5) calc(var(--brutal-shadow-offset-y, 4px) * 1.5) 0px 0px var(--brutal-shadow-color, #000000)',
                 'brutal-xl': 'calc(var(--brutal-shadow-offset-x, 4px) * 2) calc(var(--brutal-shadow-offset-y, 4px) * 2) 0px 0px var(--brutal-shadow-color, #000000)',
+                'brutal-primary': 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-primary)',
+                'brutal-secondary': 'var(--brutal-shadow-offset-x, 4px) var(--brutal-shadow-offset-y, 4px) 0px 0px var(--brutal-secondary)',
             },
             borderWidth: {
                 3: '3px',
             },
+            borderRadius: {
+                brutal: 'var(--brutal-radius, 0px)',
+            },
         },
     },
-    plugins: [require('./src/lib/brutalism-plugin')],
-};
+    plugins: [require('tailwindcss-animate'), require('./src/lib/brutalism-plugin')],
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 0e4cfb5..7963495 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -4,7 +4,6 @@
         "lib": ["ES2020", "DOM", "DOM.Iterable"],
         "module": "ESNext",
         "moduleResolution": "bundler",
-        "jsx": "react-jsx",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true,
@@ -22,8 +21,9 @@
         "baseUrl": ".",
         "paths": {
             "@/*": ["./src/*"]
-        }
+        },
+        "types": ["vitest/globals"]
     },
-    "include": ["src/**/*"],
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
     "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
new file mode 100644
index 0000000..d791831
--- /dev/null
+++ b/packages/ui/vite.config.ts
@@ -0,0 +1,61 @@
+import { defineConfig, type Plugin } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+import { copyFileSync } from 'fs'
+
+function copyStylesPlugin(): Plugin {
+    return {
+        name: 'copy-styles',
+        writeBundle() {
+            try {
+                copyFileSync(
+                    resolve(__dirname, 'src/styles.css'),
+                    resolve(__dirname, 'dist/styles.css')
+                )
+            } catch (e) {
+                console.warn('Failed to copy styles.css:', e)
+            }
+        },
+    }
+}
+
+export default defineConfig({
+    plugins: [
+        vue(),
+        dts({
+            insertTypesEntry: true,
+            include: ['src/**/*.ts', 'src/**/*.vue'],
+            outDir: 'dist',
+        }),
+        copyStylesPlugin(),
+    ],
+    build: {
+        lib: {
+            entry: {
+                index: resolve(__dirname, 'src/index.ts'),
+                locales: resolve(__dirname, 'src/locales/index.ts'),
+                calendar: resolve(__dirname, 'src/calendar.ts'),
+                'submit-button': resolve(__dirname, 'src/submit-button.ts'),
+                hooks: resolve(__dirname, 'src/hooks/index.ts'),
+                'brutalism-plugin': resolve(__dirname, 'src/lib/brutalism-plugin.js'),
+            },
+            formats: ['es', 'cjs'],
+        },
+        rollupOptions: {
+            external: ['vue', 'tailwindcss', /^reka-ui/, /^@vueuse/, /^v-calendar/, /^vee-validate/, /^@vee-validate/],
+            output: {
+                globals: {
+                    vue: 'Vue',
+                },
+            },
+        },
+        copyPublicDir: false,
+    },
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, 'src'),
+        },
+        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+    },
+})
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index b282dd5..bf92608 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -1,29 +1,23 @@
-import { defineConfig } from 'vitest/config';
-import react from '@vitejs/plugin-react';
-import path from 'path';
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
 
 export default defineConfig({
-    plugins: [react()],
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, 'src'),
+        },
+    },
     test: {
         globals: true,
         environment: 'jsdom',
-        setupFiles: ['./src/__tests__/setup.ts'],
-        include: ['./src/__tests__/**/*.{test,spec}.{ts,tsx}'],
+        setupFiles: ['./vitest.setup.ts'],
+        include: ['src/**/*.{test,spec}.{ts,tsx}'],
         coverage: {
             provider: 'v8',
-            reporter: ['text', 'json', 'html'],
-            exclude: [
-                'node_modules/',
-                'src/__tests__/',
-                '**/*.d.ts',
-                '**/*.config.*',
-                '**/index.ts',
-            ],
-        },
-    },
-    resolve: {
-        alias: {
-            '@': path.resolve(__dirname, './src'),
+            include: ['src/components/**/*.{ts,vue}', 'src/composables/**/*.ts', 'src/lib/utils.ts'],
+            exclude: ['src/**/*.d.ts', 'src/components/combobox-types.ts'],
         },
     },
-});
+})
diff --git a/packages/ui/vitest.setup.ts b/packages/ui/vitest.setup.ts
new file mode 100644
index 0000000..0dbff2c
--- /dev/null
+++ b/packages/ui/vitest.setup.ts
@@ -0,0 +1,7 @@
+class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+}
+
+globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ee46cc..9205ca6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,101 +14,50 @@ importers:
 
   apps/docs:
     dependencies:
-      '@hookform/resolvers':
-        specifier: ^5.4.0
-        version: 5.4.0(react-hook-form@7.76.1)
-      '@mdx-js/loader':
-        specifier: ^3.0.0
-        version: 3.1.1
-      '@mdx-js/react':
-        specifier: ^3.0.0
-        version: 3.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@next/mdx':
-        specifier: ^15.5.18
-        version: 15.5.18(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1)
-      '@radix-ui/react-alert-dialog':
-        specifier: ^1.1.15
-        version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.8
-        version: 2.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-progress':
-        specifier: ^1.1.8
-        version: 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.3.8
-        version: 1.3.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slider':
-        specifier: ^1.3.6
-        version: 1.3.6(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-toggle':
-        specifier: ^1.1.10
-        version: 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-toggle-group':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      brutx-ui:
+      brutx-ui-vue:
         specifier: workspace:*
         version: link:../../packages/ui
-      next:
-        specifier: 15.5.18
-        version: 15.5.18(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0)(react@19.2.0)
-      next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@15.5.18)(react-dom@19.2.0)(react@19.2.0)
-      react:
-        specifier: ^19.0.0
-        version: 19.2.0
-      react-dom:
-        specifier: ^19.0.0
-        version: 19.2.0(react@19.2.0)
-      react-hook-form:
-        specifier: ^7.76.1
-        version: 7.76.1(react@19.2.0)
-      zod:
-        specifier: ^4.4.3
-        version: 4.4.3
+      clsx:
+        specifier: ^2.1.0
+        version: 2.1.1
+      lucide-vue-next:
+        specifier: ^0.510.0
+        version: 0.510.0(vue@3.5.35)
+      tailwind-merge:
+        specifier: ^2.2.0
+        version: 2.6.0
+      vue:
+        specifier: ^3.5.0
+        version: 3.5.35(typescript@5.9.3)
     devDependencies:
-      '@types/mdx':
-        specifier: ^2.0.10
-        version: 2.0.13
-      '@types/node':
-        specifier: ^20.17.15
-        version: 20.19.25
-      '@types/react':
-        specifier: ^19.0.8
-        version: 19.2.7
-      '@types/react-dom':
-        specifier: ^19.0.3
-        version: 19.2.3(@types/react@19.2.7)
+      '@vitejs/plugin-vue':
+        specifier: ^5.2.0
+        version: 5.2.4(vite@6.4.2)(vue@3.5.35)
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.22(postcss@8.5.6)
-      babel-plugin-react-compiler:
-        specifier: ^1.0.0
-        version: 1.0.0
-      eslint:
-        specifier: ^8.56.0
-        version: 8.57.1
-      eslint-config-next:
-        specifier: 15.5.18
-        version: 15.5.18(eslint@8.57.1)(typescript@5.9.3)
-      lucide-react:
-        specifier: ^0.555.0
-        version: 0.555.0(react@19.2.0)
       postcss:
         specifier: ^8.4.33
         version: 8.5.6
       tailwindcss:
         specifier: ^3.4.0
         version: 3.4.18
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.18)
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
+      vitepress:
+        specifier: ^1.6.0
+        version: 1.6.4(@algolia/client-search@5.53.0)(postcss@8.5.6)(search-insights@2.17.3)(typescript@5.9.3)
+      vue-tsc:
+        specifier: ^2.2.0
+        version: 2.2.12(typescript@5.9.3)
 
   packages/cli:
     dependencies:
-      brutx-shared:
+      brutx-shared-vue:
         specifier: workspace:*
         version: link:../shared
       chalk:
@@ -135,17 +84,17 @@ importers:
         version: 20.19.25
       tsup:
         specifier: ^8.0.1
-        version: 8.5.1(postcss@8.5.6)(typescript@5.9.3)
+        version: 8.5.1(typescript@5.9.3)
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
       vitest:
         specifier: ^1.3.1
-        version: 1.6.1(@types/node@20.19.25)(jsdom@24.1.3)
+        version: 1.6.1(@types/node@20.19.25)
 
   packages/registry:
     dependencies:
-      brutx-shared:
+      brutx-shared-vue:
         specifier: workspace:*
         version: link:../shared
     devDependencies:
@@ -167,352 +116,326 @@ importers:
 
   packages/ui:
     dependencies:
-      '@radix-ui/react-alert-dialog':
-        specifier: ^1.1.15
-        version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-avatar':
-        specifier: ^1.1.0
-        version: 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.1.0
-        version: 1.3.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-dialog':
-        specifier: ^1.1.0
-        version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.0
-        version: 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.8
-        version: 2.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-popover':
-        specifier: ^1.1.0
-        version: 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-progress':
-        specifier: ^1.1.8
-        version: 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.3.8
-        version: 1.3.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-scroll-area':
-        specifier: ^1.2.0
-        version: 1.2.10(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-select':
-        specifier: ^2.1.0
-        version: 2.2.6(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.0
-        version: 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slider':
-        specifier: ^1.3.6
-        version: 1.3.6(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot':
-        specifier: ^1.1.0
-        version: 1.2.4(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.1.0
-        version: 1.2.6(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.0
-        version: 1.1.13(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-toggle':
-        specifier: ^1.1.10
-        version: 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-toggle-group':
-        specifier: ^1.1.11
-        version: 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.1.0
-        version: 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
+      '@vee-validate/zod':
+        specifier: ^4.15.0
+        version: 4.15.1(vue@3.5.35)(zod@3.25.76)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.1
       clsx:
         specifier: ^2.1.0
         version: 2.1.1
-      cmdk:
-        specifier: ^1.0.0
-        version: 1.1.1(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      react-day-picker:
-        specifier: ^9.4.4
-        version: 9.11.3(react@19.2.0)
-      react-hook-form:
-        specifier: ^7.76.1
-        version: 7.76.1(react@19.2.0)
+      embla-carousel-vue:
+        specifier: ^8.6.0
+        version: 8.6.0(vue@3.5.35)
+      reka-ui:
+        specifier: ^2.9.0
+        version: 2.9.8(vue@3.5.35)
       tailwind-merge:
         specifier: ^2.2.0
         version: 2.6.0
+      v-calendar:
+        specifier: ^3.1.0
+        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.5.35)
+      vee-validate:
+        specifier: ^4.15.0
+        version: 4.15.1(vue@3.5.35)
       zod:
-        specifier: ^4.4.3
-        version: 4.4.3
+        specifier: ^3.25.0
+        version: 3.25.76
     devDependencies:
-      '@testing-library/jest-dom':
-        specifier: ^6.4.2
-        version: 6.9.1
-      '@testing-library/react':
-        specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@testing-library/user-event':
-        specifier: ^14.6.1
-        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@eslint/js':
+        specifier: ^10.0.1
+        version: 10.0.1(eslint@10.4.1)
       '@types/node':
         specifier: ^20.17.15
         version: 20.19.25
-      '@types/react':
-        specifier: ^19.0.8
-        version: 19.2.7
-      '@types/react-dom':
-        specifier: ^19.0.3
-        version: 19.2.3(@types/react@19.2.7)
-      '@vitejs/plugin-react':
-        specifier: ^4.2.1
-        version: 4.7.0(vite@7.2.6)
+      '@vitejs/plugin-vue':
+        specifier: ^5.2.0
+        version: 5.2.4(vite@6.4.2)(vue@3.5.35)
       '@vitest/coverage-v8':
-        specifier: ^1.3.1
-        version: 1.6.1(vitest@1.6.1)
+        specifier: ^3.0.0
+        version: 3.2.4(vitest@3.2.4)
+      '@vue/test-utils':
+        specifier: ^2.4.0
+        version: 2.4.10(@vue/compiler-dom@3.5.35)(vue@3.5.35)
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.22(postcss@8.5.6)
+      eslint:
+        specifier: ^10.4.1
+        version: 10.4.1
+      eslint-plugin-vue:
+        specifier: ^10.9.1
+        version: 10.9.1(@typescript-eslint/parser@8.60.0)(eslint@10.4.1)(vue-eslint-parser@10.4.0)
+      globals:
+        specifier: ^16.0.0
+        version: 16.5.0
       jsdom:
-        specifier: ^24.0.0
-        version: 24.1.3
-      lucide-react:
-        specifier: ^0.555.0
-        version: 0.555.0(react@19.2.0)
+        specifier: ^25.0.0
+        version: 25.0.1
+      lucide-vue-next:
+        specifier: ^0.510.0
+        version: 0.510.0(vue@3.5.35)
       postcss:
         specifier: ^8.4.33
         version: 8.5.6
-      react:
-        specifier: ^19.0.0
-        version: 19.2.0
-      react-dom:
-        specifier: ^19.0.0
-        version: 19.2.0(react@19.2.0)
       rimraf:
         specifier: ^5.0.5
         version: 5.0.10
       tailwindcss:
         specifier: ^3.4.0
         version: 3.4.18
-      tsup:
-        specifier: ^8.0.1
-        version: 8.5.1(postcss@8.5.6)(typescript@5.9.3)
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.18)
       typescript:
         specifier: ^5.7.2
         version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.60.0
+        version: 8.60.0(eslint@10.4.1)(typescript@5.9.3)
+      vite:
+        specifier: ^6.0.0
+        version: 6.4.2(@types/node@20.19.25)
+      vite-plugin-dts:
+        specifier: ^4.0.0
+        version: 4.5.4(@types/node@20.19.25)(typescript@5.9.3)(vite@6.4.2)
       vitest:
-        specifier: ^1.3.1
-        version: 1.6.1(@types/node@20.19.25)(jsdom@24.1.3)
+        specifier: ^3.0.0
+        version: 3.2.4(@types/node@20.19.25)(jsdom@25.0.1)
+      vue:
+        specifier: ^3.5.0
+        version: 3.5.35(typescript@5.9.3)
+      vue-tsc:
+        specifier: ^2.2.0
+        version: 2.2.12(typescript@5.9.3)
 
 packages:
 
-  /@adobe/css-tools@4.4.4:
-    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+  /@algolia/abtesting@1.19.0:
+    resolution: {integrity: sha512-Lhnez3hhXHk25lfxLAMxvkP4fmN3+1RgADhD2ssMDBYuAsDVReeyP+3SGRx+ntq8ijMrLqUyfvO72TB6jsTteQ==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@alloc/quick-lru@5.2.0:
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
+  /@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)(search-insights@2.17.3):
+    resolution: {integrity: sha512-BjiPOW6ks90UKl7TwMv7oNQMnzU+t/wk9mgIDi6b1tXpUek7MW0lbNOUHpvam9pe3lVCf4xPFT+lK7s+e+fs7Q==}
+    dependencies:
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
+      - search-insights
     dev: true
 
-  /@ampproject/remapping@2.3.0:
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
+  /@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)(search-insights@2.17.3):
+    resolution: {integrity: sha512-Jca5Ude6yUOuyzjnz57og7Et3aXjbwCSDf/8onLHSQgw1qW3ALl9mrMWaXb5FmPVkV3EtkD2F/+NkT6VHyPu9A==}
+    peerDependencies:
+      search-insights: '>= 1 < 3'
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)
+      search-insights: 2.17.3
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
     dev: true
 
-  /@asamuzakjp/css-color@3.2.0:
-    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+  /@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0):
+    resolution: {integrity: sha512-ggOQ950+nwbWROq2MOCIL71RE0DdQZsceqrg32UqnhDz8FlO9rL8ONHNsI2R1MH0tkgVIDKI/D0sMiUchsFdWA==}
+    peerDependencies:
+      '@algolia/client-search': '>= 4.9.1 < 6'
+      algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-tokenizer': 3.0.4
-      lru-cache: 10.4.3
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)
+      '@algolia/client-search': 5.53.0
+      algoliasearch: 5.53.0
     dev: true
 
-  /@babel/code-frame@7.27.1:
-    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0):
+    resolution: {integrity: sha512-o/1Vurr42U/qskRSuhBH+VKxMvkkUVTLU6WZQr+L5lGZZLYWyhdzWjW0iGXY7EkwRTjBqvN2EsR81yCTGV/kmg==}
+    peerDependencies:
+      '@algolia/client-search': '>= 4.9.1 < 6'
+      algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      js-tokens: 4.0.0
-      picocolors: 1.1.1
+      '@algolia/client-search': 5.53.0
+      algoliasearch: 5.53.0
     dev: true
 
-  /@babel/compat-data@7.28.5:
-    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/client-abtesting@5.53.0:
+    resolution: {integrity: sha512-0ZjA5Hcmaoz5Lj6OG0zhfIyeqzJZnLW2CRJA1W17UwMFGRtZAJ9yJKRvPEDA6gkpsIoQxORTSW6sWFiuYncPNQ==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@babel/core@7.28.5:
-    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/client-analytics@5.53.0:
+    resolution: {integrity: sha512-kWNodP75iiEaOtemC9F/hlxNBG5E2QUjN1BusnE6m2b4l7Qh/BUO3fGCVsmKJI65VO4VKGGmT43ICvHtTcJ2JQ==}
+    engines: {node: '>= 14.0.0'}
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
-      '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/remapping': 2.3.5
-      convert-source-map: 2.0.0
-      debug: 4.4.3
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@babel/generator@7.28.5:
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
+  /@algolia/client-common@5.53.0:
+    resolution: {integrity: sha512-YPN45TXD9Wrse185t/Ta7nktZsqpv97oOjCzp2sblHnCL6rBc9TDeJAg1IGl2UpdwnSD05Zu/5wLB4watOUMyg==}
+    engines: {node: '>= 14.0.0'}
     dev: true
 
-  /@babel/helper-compilation-targets@7.27.2:
-    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/client-insights@5.53.0:
+    resolution: {integrity: sha512-qAcYTDJE6m924FDDUQvdD6vh7DYaqOeSpFS74IP37/JRV0v4cGBauyxTF2WzDnokUylQDbqreoFIJZfg0Fitmw==}
+    engines: {node: '>= 14.0.0'}
     dependencies:
-      '@babel/compat-data': 7.28.5
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.0
-      lru-cache: 5.1.1
-      semver: 6.3.1
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@babel/helper-globals@7.28.0:
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/client-personalization@5.53.0:
+    resolution: {integrity: sha512-fQaY+DkSJOpuUVUe8MQTwrdiKAqkJGhpDarB08duBn/sUv7Bkib6MDRQauCcWTWTe4HIW+EbwQP9R4kci1V/Yw==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@babel/helper-module-imports@7.27.1:
-    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/client-query-suggestions@5.53.0:
+    resolution: {integrity: sha512-o72tsiEZGfeS/dxL9IADfzcZWGEwKDEe5CvtrBuT//3JR+SHuTtHRI2ZTf7D7bcKagcbojvO8hnkHdfoakSlYg==}
+    engines: {node: '>= 14.0.0'}
     dependencies:
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5):
-    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
+  /@algolia/client-search@5.53.0:
+    resolution: {integrity: sha512-Ds16IyPm/dNJPCU8OzApo2gwGrgWT5BYHhE3NFwZbpCveqyvPDB9sZDDkJ5DsdOGT2aC+R3i0/M1OVXF2qdgPg==}
+    engines: {node: '>= 14.0.0'}
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.28.5
-    transitivePeerDependencies:
-      - supports-color
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@babel/helper-plugin-utils@7.27.1:
-    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/ingestion@1.53.0:
+    resolution: {integrity: sha512-oNbT6z4NwD8Pou9VPINGlN/tlG1afESh2EbxqnP6rwl95xKVD/Zlciis1PpNeO/9U/rrajc1+7DcfKi03tX1KQ==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
     dev: true
 
-  /@babel/helper-string-parser@7.27.1:
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/monitoring@1.53.0:
+    resolution: {integrity: sha512-G+KZb/yd+qAOFn/cEvTGeLxQm8aP3a0od50l3z/ylccY+/o4YG3TNcjU1tFQHW4mXC137GPyR7W70R0kRQDLnA==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
+    dev: true
 
-  /@babel/helper-validator-identifier@7.28.5:
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/recommend@5.53.0:
+    resolution: {integrity: sha512-6aVfYd55Un6IUgPLbo84WfgFZlS3L0vA1ttzXL5vahHewUJ8jYgd89TzlWRTeej7w70mb9RWsVlFYGmJ/diQww==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/client-common': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
+    dev: true
 
-  /@babel/helper-validator-option@7.27.1:
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/requester-browser-xhr@5.53.0:
+    resolution: {integrity: sha512-ke27DqgzCOlt+RbeEdCxtXxMQOnAOi8ujr2wid0DmDKzR95Kw/f9sBsuhBxtjevCqJRJszfRTLY0B1pbO6IhkA==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/client-common': 5.53.0
     dev: true
 
-  /@babel/helpers@7.28.4:
-    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
-    engines: {node: '>=6.9.0'}
+  /@algolia/requester-fetch@5.53.0:
+    resolution: {integrity: sha512-GngiOqt2Gq4oLno6yXQVj9om+qSO9SWAoduoTOEg79dKZ62brB8OOIvSJG/vDNoanYi6a7Al9uDZwXvi+bcVTg==}
+    engines: {node: '>= 14.0.0'}
     dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
+      '@algolia/client-common': 5.53.0
     dev: true
 
-  /@babel/parser@7.28.5:
-    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
+  /@algolia/requester-node-http@5.53.0:
+    resolution: {integrity: sha512-6mF9LZMUk0QqWvrnxkxBqhswwz6Xfiwy6/gmTzL5HrlhdVG3ITAqGV2k3XmVThP1h0Ulc3VQwiNCD7/Nr4JNlQ==}
+    engines: {node: '>= 14.0.0'}
     dependencies:
-      '@babel/types': 7.28.5
+      '@algolia/client-common': 5.53.0
     dev: true
 
-  /@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.5):
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /@ampproject/remapping@2.3.0:
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
     dev: true
 
-  /@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.5):
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
+  /@asamuzakjp/css-color@3.2.0:
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
     dependencies:
-      '@babel/core': 7.28.5
-      '@babel/helper-plugin-utils': 7.27.1
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
     dev: true
 
-  /@babel/runtime@7.28.4:
-    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+  /@babel/helper-string-parser@7.29.7:
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
-  /@babel/template@7.27.2:
-    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+  /@babel/helper-validator-identifier@7.29.7:
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
     engines: {node: '>=6.9.0'}
+
+  /@babel/parser@7.29.7:
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-    dev: true
+      '@babel/types': 7.29.7
 
-  /@babel/traverse@7.28.5:
-    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
+  /@babel/runtime@7.28.4:
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
+    dev: false
 
-  /@babel/types@7.28.5:
-    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
+  /@babel/types@7.29.7:
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
 
-  /@bcoe/v8-coverage@0.2.3:
-    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+  /@bcoe/v8-coverage@1.0.2:
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
     dev: true
 
   /@csstools/color-helpers@5.1.0:
@@ -558,33 +481,48 @@ packages:
     engines: {node: '>=18'}
     dev: true
 
-  /@date-fns/tz@1.4.1:
-    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
-    dev: false
-
-  /@emnapi/core@1.7.1:
-    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
-    requiresBuild: true
-    dependencies:
-      '@emnapi/wasi-threads': 1.1.0
-      tslib: 2.8.1
+  /@docsearch/css@3.8.2:
+    resolution: {integrity: sha512-y05ayQFyUmCXze79+56v/4HpycYF3uFqB78pLPrSV5ZKAlDuIAAJNhaRi8tTdRNXh05yxX/TyNnzD6LwSM89vQ==}
     dev: true
-    optional: true
 
-  /@emnapi/runtime@1.7.1:
-    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
-    requiresBuild: true
+  /@docsearch/js@3.8.2(@algolia/client-search@5.53.0)(search-insights@2.17.3):
+    resolution: {integrity: sha512-Q5wY66qHn0SwA7Taa0aDbHiJvaFJLOJyHmooQ7y8hlwwQLQ/5WwCcoX0g7ii04Qi2DJlHsd0XXzJ8Ypw9+9YmQ==}
     dependencies:
-      tslib: 2.8.1
-    optional: true
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.53.0)(search-insights@2.17.3)
+      preact: 10.29.2
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/react'
+      - react
+      - react-dom
+      - search-insights
+    dev: true
 
-  /@emnapi/wasi-threads@1.1.0:
-    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
-    requiresBuild: true
+  /@docsearch/react@3.8.2(@algolia/client-search@5.53.0)(search-insights@2.17.3):
+    resolution: {integrity: sha512-xCRrJQlTt8N9GU0DG4ptwHRkfnSnD/YpdeaXe02iKfqs97TkZJv60yE+1eq/tjPcVnTW8dP5qLP7itifFVV5eg==}
+    peerDependencies:
+      '@types/react': '>= 16.8.0 < 19.0.0'
+      react: '>= 16.8.0 < 19.0.0'
+      react-dom: '>= 16.8.0 < 19.0.0'
+      search-insights: '>= 1 < 3'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      search-insights:
+        optional: true
     dependencies:
-      tslib: 2.8.1
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.53.0)(algoliasearch@5.53.0)
+      '@docsearch/css': 3.8.2
+      algoliasearch: 5.53.0
+      search-insights: 2.17.3
+    transitivePeerDependencies:
+      - '@algolia/client-search'
     dev: true
-    optional: true
 
   /@esbuild/aix-ppc64@0.21.5:
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
@@ -1495,13 +1433,23 @@ packages:
     dev: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.9.0(eslint@8.57.1):
+  /@eslint-community/eslint-utils@4.9.0(eslint@10.4.1):
     resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.57.1
+      eslint: 10.4.1
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@eslint-community/eslint-utils@4.9.1(eslint@10.4.1):
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 10.4.1
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -1510,75 +1458,103 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
-  /@eslint/eslintrc@2.1.4:
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@eslint/config-array@0.23.5:
+    resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     dependencies:
-      ajv: 6.12.6
+      '@eslint/object-schema': 3.0.5
       debug: 4.4.3
-      espree: 9.6.1
-      globals: 13.24.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.1
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
+      minimatch: 10.2.5
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@eslint/js@8.57.1:
-    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@eslint/config-helpers@0.6.0:
+    resolution: {integrity: sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      '@eslint/core': 1.2.1
     dev: true
 
-  /@floating-ui/core@1.7.3:
-    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+  /@eslint/core@1.2.1:
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     dependencies:
-      '@floating-ui/utils': 0.2.10
-    dev: false
+      '@types/json-schema': 7.0.15
+    dev: true
+
+  /@eslint/js@10.0.1(eslint@10.4.1):
+    resolution: {integrity: sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    peerDependencies:
+      eslint: ^10.0.0
+    peerDependenciesMeta:
+      eslint:
+        optional: true
+    dependencies:
+      eslint: 10.4.1
+    dev: true
+
+  /@eslint/object-schema@3.0.5:
+    resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dev: true
+
+  /@eslint/plugin-kit@0.7.2:
+    resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    dependencies:
+      '@eslint/core': 1.2.1
+      levn: 0.4.1
+    dev: true
 
-  /@floating-ui/dom@1.7.4:
-    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+  /@floating-ui/core@1.7.5:
+    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
     dependencies:
-      '@floating-ui/core': 1.7.3
-      '@floating-ui/utils': 0.2.10
+      '@floating-ui/utils': 0.2.11
     dev: false
 
-  /@floating-ui/react-dom@2.1.6(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
+  /@floating-ui/dom@1.7.6:
+    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
     dependencies:
-      '@floating-ui/dom': 1.7.4
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@floating-ui/core': 1.7.5
+      '@floating-ui/utils': 0.2.11
     dev: false
 
-  /@floating-ui/utils@0.2.10:
-    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+  /@floating-ui/utils@0.2.11:
+    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
     dev: false
 
-  /@hookform/resolvers@5.4.0(react-hook-form@7.76.1):
-    resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
-    peerDependencies:
-      react-hook-form: ^7.55.0
+  /@floating-ui/vue@1.1.11(vue@3.5.35):
+    resolution: {integrity: sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==}
     dependencies:
-      '@standard-schema/utils': 0.3.0
-      react-hook-form: 7.76.1(react@19.2.0)
+      '@floating-ui/dom': 1.7.6
+      '@floating-ui/utils': 0.2.11
+      vue-demi: 0.14.10(vue@3.5.35)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
     dev: false
 
-  /@humanwhocodes/config-array@0.13.0:
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
+  /@humanfs/core@0.19.2:
+    resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
+    engines: {node: '>=18.18.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.3
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+      '@humanfs/types': 0.15.0
+    dev: true
+
+  /@humanfs/node@0.16.8:
+    resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==}
+    engines: {node: '>=18.18.0'}
+    dependencies:
+      '@humanfs/core': 0.19.2
+      '@humanfs/types': 0.15.0
+      '@humanwhocodes/retry': 0.4.3
+    dev: true
+
+  /@humanfs/types@0.15.0:
+    resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==}
+    engines: {node: '>=18.18.0'}
     dev: true
 
   /@humanwhocodes/module-importer@1.0.1:
@@ -1586,1535 +1562,190 @@ packages:
     engines: {node: '>=12.22'}
     dev: true
 
-  /@humanwhocodes/object-schema@2.0.3:
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
+  /@humanwhocodes/retry@0.4.3:
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
     dev: true
 
-  /@img/colour@1.0.0:
-    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
-    engines: {node: '>=18'}
-    requiresBuild: true
-    dev: false
-    optional: true
+  /@iconify-json/simple-icons@1.2.84:
+    resolution: {integrity: sha512-v4JVu6xIewGoETD4mm2k6UAdFAbTlY1duw5ZNSxYORfs2yFsHDhoU9Omn/BgrV0nR/ptWkF3ZIr/ZHoYXI/6Jw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
 
-  /@img/sharp-darwin-arm64@0.34.5:
-    resolution: {integrity: sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
-    dev: false
-    optional: true
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
 
-  /@img/sharp-darwin-x64@0.34.5:
-    resolution: {integrity: sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.2.4
+  /@inquirer/external-editor@1.0.3(@types/node@20.19.25):
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@types/node': 20.19.25
+      chardet: 2.1.1
+      iconv-lite: 0.7.0
     dev: false
-    optional: true
 
-  /@img/sharp-libvips-darwin-arm64@1.2.4:
-    resolution: {integrity: sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
+  /@inquirer/figures@1.0.15:
+    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
+    engines: {node: '>=18'}
     dev: false
-    optional: true
 
-  /@img/sharp-libvips-darwin-x64@1.2.4:
-    resolution: {integrity: sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
+  /@internationalized/date@3.12.2:
+    resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==}
+    dependencies:
+      '@swc/helpers': 0.5.15
     dev: false
-    optional: true
 
-  /@img/sharp-libvips-linux-arm64@1.2.4:
-    resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
+  /@internationalized/number@3.6.7:
+    resolution: {integrity: sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==}
+    dependencies:
+      '@swc/helpers': 0.5.15
     dev: false
-    optional: true
 
-  /@img/sharp-libvips-linux-arm@1.2.4:
-    resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
+  /@isaacs/cliui@8.0.2:
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: /string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: /strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: /wrap-ansi@7.0.0
+    dev: true
 
-  /@img/sharp-libvips-linux-ppc64@1.2.4:
-    resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-libvips-linux-riscv64@1.2.4:
-    resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-libvips-linux-s390x@1.2.4:
-    resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-libvips-linux-x64@1.2.4:
-    resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-libvips-linuxmusl-arm64@1.2.4:
-    resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-libvips-linuxmusl-x64@1.2.4:
-    resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-linux-arm64@0.34.5:
-    resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-linux-arm@0.34.5:
-    resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-linux-ppc64@0.34.5:
-    resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-linux-riscv64@0.34.5:
-    resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-linux-s390x@0.34.5:
-    resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-linux-x64@0.34.5:
-    resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-linuxmusl-arm64@0.34.5:
-    resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-linuxmusl-x64@0.34.5:
-    resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
-    dev: false
-    optional: true
-
-  /@img/sharp-wasm32@0.34.5:
-    resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [wasm32]
-    requiresBuild: true
-    dependencies:
-      '@emnapi/runtime': 1.7.1
-    dev: false
-    optional: true
-
-  /@img/sharp-win32-arm64@0.34.5:
-    resolution: {integrity: sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-win32-ia32@0.34.5:
-    resolution: {integrity: sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@img/sharp-win32-x64@0.34.5:
-    resolution: {integrity: sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@inquirer/external-editor@1.0.3(@types/node@20.19.25):
-    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@types/node': '>=18'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-    dependencies:
-      '@types/node': 20.19.25
-      chardet: 2.1.1
-      iconv-lite: 0.7.0
-    dev: false
-
-  /@inquirer/figures@1.0.15:
-    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
-    engines: {node: '>=18'}
-    dev: false
-
-  /@isaacs/cliui@8.0.2:
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: /string-width@4.2.3
-      strip-ansi: 7.1.2
-      strip-ansi-cjs: /strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: true
-
-  /@istanbuljs/schema@0.1.3:
-    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /@jest/schemas@29.6.3:
-    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@sinclair/typebox': 0.27.8
-    dev: true
-
-  /@jridgewell/gen-mapping@0.3.13:
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-    dev: true
-
-  /@jridgewell/remapping@2.3.5:
-    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-    dev: true
-
-  /@jridgewell/resolve-uri@3.1.2:
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-    dev: true
-
-  /@jridgewell/sourcemap-codec@1.5.5:
-    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
-    dev: true
-
-  /@jridgewell/trace-mapping@0.3.31:
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-    dev: true
-
-  /@mdx-js/loader@3.1.1:
-    resolution: {integrity: sha512-0TTacJyZ9mDmY+VefuthVshaNIyCGZHJG2fMnGaDttCt8HmjUF7SizlHJpaCDoGnN635nK1wpzfpx/Xx5S4WnQ==}
-    peerDependencies:
-      webpack: '>=5'
-    peerDependenciesMeta:
-      webpack:
-        optional: true
-    dependencies:
-      '@mdx-js/mdx': 3.1.1
-      source-map: 0.7.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@mdx-js/mdx@3.1.1:
-    resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdx': 2.0.13
-      acorn: 8.15.0
-      collapse-white-space: 2.1.0
-      devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
-      estree-util-scope: 1.0.0
-      estree-walker: 3.0.3
-      hast-util-to-jsx-runtime: 2.3.6
-      markdown-extensions: 2.0.0
-      recma-build-jsx: 1.0.0
-      recma-jsx: 1.0.1(acorn@8.15.0)
-      recma-stringify: 1.0.0
-      rehype-recma: 1.0.0
-      remark-mdx: 3.1.1
-      remark-parse: 11.0.0
-      remark-rehype: 11.1.2
-      source-map: 0.7.6
-      unified: 11.0.5
-      unist-util-position-from-estree: 2.0.0
-      unist-util-stringify-position: 4.0.0
-      unist-util-visit: 5.0.0
-      vfile: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@mdx-js/react@3.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
-    peerDependencies:
-      '@types/react': '>=16'
-      react: '>=16'
-    dependencies:
-      '@types/mdx': 2.0.13
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
-
-  /@napi-rs/wasm-runtime@0.2.12:
-    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
-    requiresBuild: true
-    dependencies:
-      '@emnapi/core': 1.7.1
-      '@emnapi/runtime': 1.7.1
-      '@tybys/wasm-util': 0.10.1
-    dev: true
-    optional: true
-
-  /@next/env@15.5.18:
-    resolution: {integrity: sha512-hAV85Ckd9QR6RvH04MEKwsfLTksvFpO47j9xwtoIuvuPnlwecpSi+uZTtm8HirVbtlI2Fnz//xpcSTjFdyJk+g==}
-    dev: false
-
-  /@next/eslint-plugin-next@15.5.18:
-    resolution: {integrity: sha512-w4MYq8M26a8PNrfto0JosLf5/3ssln1rsyP96g2DkC8uFVymStM5DLSz5ElxxrPRg2XnTMnFo3kREFlhYvxhWw==}
-    dependencies:
-      fast-glob: 3.3.1
-    dev: true
-
-  /@next/mdx@15.5.18(@mdx-js/loader@3.1.1)(@mdx-js/react@3.1.1):
-    resolution: {integrity: sha512-vslfcoGsX330qhcFMfksM2xPE1zCd5OGG4E47EBHH4asCG9l39CNoKv6X906kAgzvACHBKGcTxv1wlLVnagUjA==}
-    peerDependencies:
-      '@mdx-js/loader': '>=0.15.0'
-      '@mdx-js/react': '>=0.15.0'
-    peerDependenciesMeta:
-      '@mdx-js/loader':
-        optional: true
-      '@mdx-js/react':
-        optional: true
-    dependencies:
-      '@mdx-js/loader': 3.1.1
-      '@mdx-js/react': 3.1.1(@types/react@19.2.7)(react@19.2.0)
-      source-map: 0.7.6
-    dev: false
-
-  /@next/swc-darwin-arm64@15.5.18:
-    resolution: {integrity: sha512-w0WvQf1n+txiwns/9pwIQteCJpZTbxzO2SE0FLcwuD4v0WEh1JPOjdyxWL21XwJsdpx8cFRjyzxzCS/siP7HcQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-darwin-x64@15.5.18:
-    resolution: {integrity: sha512-znn71QmDuxm+BOaglihMZfvyySMnNljkVIY5Z2TCssBmm+WqL6c19VhtH5ktFkHa8EZ2bnTUpcNcmNSQsg67og==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-gnu@15.5.18:
-    resolution: {integrity: sha512-yPPe5MNL+igZUa+OsqQJisqSfh6oarIuA1Q0BDxljGJhRQyZeP+WRHh7rs/jZUGMh5aY0YdIjXZG0VohkKkUdw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-arm64-musl@15.5.18:
-    resolution: {integrity: sha512-glaCczEWIrHsokFZ3pP08U4BpKxwIdnT+txdOM32OBgpL9Yw4aqx8NejmgtZQZOdstQ5f0L3CasIZudzCuD+nw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-gnu@15.5.18:
-    resolution: {integrity: sha512-oUfg2EgJmU3R0OCOWiokGFUTvZiPfXtriXiuF3YNxRoROCdgvTedHIzYoeKH34gsZxS/V7mHbfq2hpAHwhH1/A==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-linux-x64-musl@15.5.18:
-    resolution: {integrity: sha512-JLxSP3KTd9iu/bvUMQxH7RJo9xKSHf55/6RPE4a6FTSZygGn7uvZbCej0AHXydwkggQGSD9UddSjwv6Xz5ESfA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-arm64-msvc@15.5.18:
-    resolution: {integrity: sha512-ir1v7enP52K2HNz3tQQvwF+x7VNxBk1ciiZ18WBPvxf4C59IqdfmHPJYK3vH7rSxpuCVw/8C712wTXNAtEp+NA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@next/swc-win32-x64-msvc@15.5.18:
-    resolution: {integrity: sha512-LIu5me6QTANCd25E7I5uIEfvgQ06RK7tvHAbYo3zCb3VpxQEPvMcSpd87NwUABDT6MbGPdEGR5VRiK4PPTJhQg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /@nodelib/fs.scandir@2.1.5:
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-    dev: true
-
-  /@nodelib/fs.stat@2.0.5:
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-    dev: true
-
-  /@nodelib/fs.walk@1.2.8:
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.1
-    dev: true
-
-  /@nolyfill/is-core-module@1.0.39:
-    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
-    engines: {node: '>=12.4.0'}
-    dev: true
-
-  /@pkgjs/parseargs@0.11.0:
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /@radix-ui/number@1.1.1:
-    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
-    dev: false
-
-  /@radix-ui/primitive@1.1.3:
-    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
-    dev: false
-
-  /@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-avatar@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-context': 1.1.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
-
-  /@radix-ui/react-context@1.1.2(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
-
-  /@radix-ui/react-context@1.1.3(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
-
-  /@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
-
-  /@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
-
-  /@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
-
-  /@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/rect': 1.1.1
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-context': 1.1.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      aria-hidden: 1.2.6
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-slider@1.3.6(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/number': 1.1.1
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+  /@istanbuljs/schema@0.1.3:
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+    dev: true
 
-  /@radix-ui/react-slot@1.2.4(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  /@jest/schemas@29.6.3:
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+      '@sinclair/typebox': 0.27.8
+    dev: true
 
-  /@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  /@jridgewell/gen-mapping@0.3.13:
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+    dev: true
 
-  /@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
 
-  /@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
+  /@jridgewell/sourcemap-codec@1.5.5:
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  /@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  /@jridgewell/trace-mapping@0.3.31:
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+    dev: true
 
-  /@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  /@microsoft/api-extractor-model@7.33.8(@types/node@20.19.25):
+    resolution: {integrity: sha512-aIcoQggPyer3B6Ze3usz0YWC/oBwUHfRH5ETUsr+oT2BRA6SfTJl7IKPcPZkX4UR+PohowzW4uMxsvjrn8vm+w==}
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@20.19.25)
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
 
-  /@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  /@microsoft/api-extractor@7.58.7(@types/node@20.19.25):
+    resolution: {integrity: sha512-yK6OycD46gIzLRpj6ueVUWPk1ACSpkN1LBo05gY1qPTylbWyUCanXfH7+VgkI5LJrJoRSQR5F04XuCffCXLOBw==}
+    hasBin: true
     dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+      '@microsoft/api-extractor-model': 7.33.8(@types/node@20.19.25)
+      '@microsoft/tsdoc': 0.16.0
+      '@microsoft/tsdoc-config': 0.18.1
+      '@rushstack/node-core-library': 5.23.1(@types/node@20.19.25)
+      '@rushstack/rig-package': 0.7.3
+      '@rushstack/terminal': 0.24.0(@types/node@20.19.25)
+      '@rushstack/ts-command-line': 5.3.9(@types/node@20.19.25)
+      diff: 8.0.4
+      minimatch: 10.2.3
+      resolve: 1.22.11
+      semver: 7.7.4
+      source-map: 0.6.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
 
-  /@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  /@microsoft/tsdoc-config@0.18.1:
+    resolution: {integrity: sha512-9brPoVdfN9k9g0dcWkFeA7IH9bbcttzDJlXvkf8b2OBzd5MueR1V2wkKBL0abn0otvmkHJC6aapBOTJDDeMCZg==}
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+      '@microsoft/tsdoc': 0.16.0
+      ajv: 8.18.0
+      jju: 1.4.0
+      resolve: 1.22.11
+    dev: true
 
-  /@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+  /@microsoft/tsdoc@0.16.0:
+    resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
+    dev: true
 
-  /@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
 
-  /@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-      use-sync-external-store: 1.6.0(react@19.2.0)
-    dev: false
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
 
-  /@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
     dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+    dev: true
 
-  /@radix-ui/react-use-previous@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+  /@one-ini/wasm@0.1.1:
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+    dev: true
 
-  /@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/rect': 1.1.1
-      '@types/react': 19.2.7
-      react: 19.2.0
-    dev: false
+  /@pkgjs/parseargs@0.11.0:
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+    requiresBuild: true
+    dev: true
+    optional: true
 
-  /@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@types/react': 19.2.7
-      react: 19.2.0
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
-  /@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+  /@rollup/pluginutils@5.4.0:
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
+      rollup:
         optional: true
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
-
-  /@radix-ui/rect@1.1.1:
-    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
-    dev: false
-
-  /@rolldown/pluginutils@1.0.0-beta.27:
-    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.4
     dev: true
 
   /@rollup/rollup-android-arm-eabi@4.53.3:
@@ -3169,6 +1800,7 @@ packages:
     resolution: {integrity: sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -3177,6 +1809,7 @@ packages:
     resolution: {integrity: sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -3185,6 +1818,7 @@ packages:
     resolution: {integrity: sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -3193,6 +1827,7 @@ packages:
     resolution: {integrity: sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -3201,6 +1836,7 @@ packages:
     resolution: {integrity: sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -3209,6 +1845,7 @@ packages:
     resolution: {integrity: sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -3217,6 +1854,7 @@ packages:
     resolution: {integrity: sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -3225,6 +1863,7 @@ packages:
     resolution: {integrity: sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -3233,6 +1872,7 @@ packages:
     resolution: {integrity: sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -3241,6 +1881,7 @@ packages:
     resolution: {integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
     requiresBuild: true
     dev: true
     optional: true
@@ -3249,6 +1890,7 @@ packages:
     resolution: {integrity: sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
     requiresBuild: true
     dev: true
     optional: true
@@ -3293,141 +1935,169 @@ packages:
     dev: true
     optional: true
 
-  /@rtsao/scc@1.1.0:
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+  /@rushstack/node-core-library@5.23.1(@types/node@20.19.25):
+    resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@types/node': 20.19.25
+      ajv: 8.18.0
+      ajv-draft-04: 1.0.0(ajv@8.18.0)
+      ajv-formats: 3.0.1(ajv@8.18.0)
+      fs-extra: 11.3.2
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.11
+      semver: 7.7.4
+    dev: true
+
+  /@rushstack/problem-matcher@0.2.1(@types/node@20.19.25):
+    resolution: {integrity: sha512-gulfhBs6n+I5b7DvjKRfhMGyUejtSgOHTclF/eONr8hcgF1APEDjhxIsfdUYYMzC3rvLwGluqLjbwCFZ8nxrog==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@types/node': 20.19.25
     dev: true
 
-  /@rushstack/eslint-patch@1.15.0:
-    resolution: {integrity: sha512-ojSshQPKwVvSMR8yT2L/QtUkV5SXi/IfDiJ4/8d6UbTPjiHVmxZzUAzGD8Tzks1b9+qQkZa0isUOvYObedITaw==}
+  /@rushstack/rig-package@0.7.3:
+    resolution: {integrity: sha512-aAA518n6wxxjCfnTAOjQnm7ngNE0FVHxHAw2pxKlIhxrMn0XQjGcXKF0oKWpjBgJOmsaJpVob/v+zr3zxgPWuA==}
+    dependencies:
+      jju: 1.4.0
+      resolve: 1.22.11
     dev: true
 
-  /@sinclair/typebox@0.27.8:
-    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+  /@rushstack/terminal@0.24.0(@types/node@20.19.25):
+    resolution: {integrity: sha512-8ZQS4MMaGsv27EXCBiH7WMPkRZrffeDoIevs6z9TM5dzqiY6+Hn4evfK/G+gvgBTjfvfkHIZPQQmalmI2sM4TQ==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@rushstack/node-core-library': 5.23.1(@types/node@20.19.25)
+      '@rushstack/problem-matcher': 0.2.1(@types/node@20.19.25)
+      '@types/node': 20.19.25
+      supports-color: 8.1.1
     dev: true
 
-  /@standard-schema/utils@0.3.0:
-    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
-    dev: false
+  /@rushstack/ts-command-line@5.3.9(@types/node@20.19.25):
+    resolution: {integrity: sha512-GIHqU+sRGQ3LGWAZu1O+9Yh++qwtyNIIGuNbcWHJjBTm2qRez0cwINUHZ+pQLR8UuzZDcMajrDaNbUYoaL/XtQ==}
+    dependencies:
+      '@rushstack/terminal': 0.24.0(@types/node@20.19.25)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
 
-  /@swc/helpers@0.5.15:
-    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+  /@shikijs/core@2.5.0:
+    resolution: {integrity: sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==}
     dependencies:
-      tslib: 2.8.1
-    dev: false
+      '@shikijs/engine-javascript': 2.5.0
+      '@shikijs/engine-oniguruma': 2.5.0
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+    dev: true
 
-  /@testing-library/dom@10.4.1:
-    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
-    engines: {node: '>=18'}
+  /@shikijs/engine-javascript@2.5.0:
+    resolution: {integrity: sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==}
     dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/runtime': 7.28.4
-      '@types/aria-query': 5.0.4
-      aria-query: 5.3.0
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      picocolors: 1.1.1
-      pretty-format: 27.5.1
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 3.1.1
     dev: true
 
-  /@testing-library/jest-dom@6.9.1:
-    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
-    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+  /@shikijs/engine-oniguruma@2.5.0:
+    resolution: {integrity: sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==}
     dependencies:
-      '@adobe/css-tools': 4.4.4
-      aria-query: 5.3.2
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.6.3
-      picocolors: 1.1.1
-      redent: 3.0.0
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
     dev: true
 
-  /@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      '@testing-library/dom': ^10.0.0
-      '@types/react': ^18.0.0 || ^19.0.0
-      '@types/react-dom': ^18.0.0 || ^19.0.0
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  /@shikijs/langs@2.5.0:
+    resolution: {integrity: sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==}
     dependencies:
-      '@babel/runtime': 7.28.4
-      '@testing-library/dom': 10.4.1
-      '@types/react': 19.2.7
-      '@types/react-dom': 19.2.3(@types/react@19.2.7)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
+      '@shikijs/types': 2.5.0
     dev: true
 
-  /@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1):
-    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
-    engines: {node: '>=12', npm: '>=6'}
-    peerDependencies:
-      '@testing-library/dom': '>=7.21.4'
+  /@shikijs/themes@2.5.0:
+    resolution: {integrity: sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==}
     dependencies:
-      '@testing-library/dom': 10.4.1
+      '@shikijs/types': 2.5.0
     dev: true
 
-  /@tybys/wasm-util@0.10.1:
-    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
-    requiresBuild: true
+  /@shikijs/transformers@2.5.0:
+    resolution: {integrity: sha512-SI494W5X60CaUwgi8u4q4m4s3YAFSxln3tzNjOSYqq54wlVgz0/NbbXEb3mdLbqMBztcmS7bVTaEd2w0qMmfeg==}
     dependencies:
-      tslib: 2.8.1
+      '@shikijs/core': 2.5.0
+      '@shikijs/types': 2.5.0
     dev: true
-    optional: true
 
-  /@types/aria-query@5.0.4:
-    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
-    dev: true
+  /@shikijs/types@2.5.0:
+    resolution: {integrity: sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==}
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+    dev: true
+
+  /@shikijs/vscode-textmate@10.0.2:
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+    dev: true
+
+  /@sinclair/typebox@0.27.8:
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+    dev: true
+
+  /@swc/helpers@0.5.15:
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
+  /@tanstack/virtual-core@3.16.0:
+    resolution: {integrity: sha512-Er2N7q3WOiH6y2JLxsxNX+u2/sLqSsL0bxFgDjuiPiA7vKhZRm+IzcS17vRee3GNXr64UsesA5CAp9yTiIYw9A==}
+    dev: false
 
-  /@types/babel__core@7.20.5:
-    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+  /@tanstack/vue-virtual@3.13.26(vue@3.5.35):
+    resolution: {integrity: sha512-4TmREKi8rKiQC8E2XVEMMgzWbrgHNYolkBgYTXVK1kqXmXRGz6xPWgBq20GUYWUDDhit94+g0ricUQKpZhWRmg==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      '@types/babel__generator': 7.27.0
-      '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.28.0
-    dev: true
+      '@tanstack/virtual-core': 3.16.0
+      vue: 3.5.35(typescript@5.9.3)
+    dev: false
 
-  /@types/babel__generator@7.27.0:
-    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
-    dependencies:
-      '@babel/types': 7.28.5
+  /@types/argparse@1.0.38:
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
     dev: true
 
-  /@types/babel__template@7.4.4:
-    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+  /@types/chai@5.2.3:
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
+      '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
     dev: true
 
-  /@types/babel__traverse@7.28.0:
-    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
-    dependencies:
-      '@babel/types': 7.28.5
+  /@types/deep-eql@4.0.2:
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
     dev: true
 
-  /@types/debug@4.1.12:
-    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
-    dependencies:
-      '@types/ms': 2.1.0
-    dev: false
-
-  /@types/estree-jsx@1.0.5:
-    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
-    dependencies:
-      '@types/estree': 1.0.8
-    dev: false
+  /@types/esrecurse@4.3.1:
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+    dev: true
 
   /@types/estree@1.0.8:
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+    dev: true
 
   /@types/fs-extra@11.0.4:
     resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
@@ -3440,10 +2110,10 @@ packages:
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
+    dev: true
 
-  /@types/json5@0.0.29:
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
 
   /@types/jsonfile@6.1.4:
@@ -3452,473 +2122,644 @@ packages:
       '@types/node': 20.19.25
     dev: true
 
+  /@types/linkify-it@5.0.0:
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+    dev: true
+
+  /@types/lodash@4.17.24:
+    resolution: {integrity: sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==}
+    dev: false
+
+  /@types/markdown-it@14.1.2:
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+    dev: true
+
   /@types/mdast@4.0.4:
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
-
-  /@types/mdx@2.0.13:
-    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+    dev: true
 
-  /@types/ms@2.1.0:
-    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
-    dev: false
+  /@types/mdurl@2.0.0:
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+    dev: true
 
   /@types/node@20.19.25:
     resolution: {integrity: sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==}
     dependencies:
       undici-types: 6.21.0
 
-  /@types/react-dom@19.2.3(@types/react@19.2.7):
-    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
-    peerDependencies:
-      '@types/react': ^19.2.0
-    dependencies:
-      '@types/react': 19.2.7
-
-  /@types/react@19.2.7:
-    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
-    dependencies:
-      csstype: 3.2.3
-
-  /@types/unist@2.0.11:
-    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+  /@types/resize-observer-browser@0.1.11:
+    resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
     dev: false
 
   /@types/unist@3.0.3:
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
-    dev: false
+    dev: true
+
+  /@types/web-bluetooth@0.0.21:
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  /@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.9.3):
-    resolution: {integrity: sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==}
+  /@typescript-eslint/eslint-plugin@8.60.0(@typescript-eslint/parser@8.60.0)(eslint@10.4.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-QYb/sa74/s7OKMbACMjrYnGspj9Hs5YI5aaffSL65UfeBUzVzBJfVo3oWSpbzPurvm7yaCCo2Lk7lVj610HqKw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.48.1
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      '@typescript-eslint/parser': ^8.60.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/type-utils': 8.48.1(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.48.1
-      eslint: 8.57.1
-      graphemer: 1.4.0
+      '@typescript-eslint/parser': 8.60.0(eslint@10.4.1)(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.60.0
+      '@typescript-eslint/type-utils': 8.60.0(eslint@10.4.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.60.0(eslint@10.4.1)(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.60.0
+      eslint: 10.4.1
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.3)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.9.3):
-    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/parser@8.60.0(eslint@10.4.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-fcqpj/MyK4sxDPcbe7STNPbpQL4RLZOPWuaTmwZYuc+hJKzRf58yRxfhqGpc6PIq9ZyfSBpfHgmUHmHs0KwHwg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
     dependencies:
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/scope-manager': 8.60.0
+      '@typescript-eslint/types': 8.60.0
+      '@typescript-eslint/typescript-estree': 8.60.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.60.0
       debug: 4.4.3
-      eslint: 8.57.1
+      eslint: 10.4.1
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/project-service@8.48.1(typescript@5.9.3):
-    resolution: {integrity: sha512-HQWSicah4s9z2/HifRPQ6b6R7G+SBx64JlFQpgSSHWPKdvCZX57XCbszg/bapbRsOEv42q5tayTYcEFpACcX1w==}
+  /@typescript-eslint/project-service@8.60.0(typescript@5.9.3):
+    resolution: {integrity: sha512-aZu74NNKJeUWqCjDddzdiKaS82dgYgV/vmf+Ui3ZdZejmgfXR/q+pRumgobnQ2cCJTgGTWp4ypiwsuofFubavg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: '>=4.8.4 <6.1.0'
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.48.1
+      '@typescript-eslint/tsconfig-utils': 8.60.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.60.0
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager@6.21.0:
-    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
-    dev: true
-
-  /@typescript-eslint/scope-manager@8.48.1:
-    resolution: {integrity: sha512-rj4vWQsytQbLxC5Bf4XwZ0/CKd362DkWMUkviT7DCS057SK64D5lH74sSGzhI6PDD2HCEq02xAP9cX68dYyg1w==}
+  /@typescript-eslint/scope-manager@8.60.0:
+    resolution: {integrity: sha512-pFzqhllJMs+jghLQWzV00ds39xLzuyqPSev5pd8f4Ir0rtKR3ZLUB4/4dhjOFighWb9larvtfJvqL+4yKDI3Xw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
+      '@typescript-eslint/types': 8.60.0
+      '@typescript-eslint/visitor-keys': 8.60.0
     dev: true
 
-  /@typescript-eslint/tsconfig-utils@8.48.1(typescript@5.9.3):
-    resolution: {integrity: sha512-k0Jhs4CpEffIBm6wPaCXBAD7jxBtrHjrSgtfCjUvPp9AZ78lXKdTR8fxyZO5y4vWNlOvYXRtngSZNSn+H53Jkw==}
+  /@typescript-eslint/tsconfig-utils@8.60.0(typescript@5.9.3):
+    resolution: {integrity: sha512-BZPR3RGYlAXnly6ymAxfkVn5rCbZzQNou0rxv3GfWZ8cTQp+hhVd73khbGLAd8k1TlAPLISH337M+tAgAnaJDQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
+      typescript: '>=4.8.4 <6.1.0'
     dependencies:
       typescript: 5.9.3
     dev: true
 
-  /@typescript-eslint/type-utils@8.48.1(eslint@8.57.1)(typescript@5.9.3):
-    resolution: {integrity: sha512-1jEop81a3LrJQLTf/1VfPQdhIY4PlGDBc/i67EVWObrtvcziysbLN3oReexHOM6N3jyXgCrkBsZpqwH0hiDOQg==}
+  /@typescript-eslint/type-utils@8.60.0(eslint@10.4.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-SX46wEUtitCpq7AN38HkUU/+zvUpdKf7ephtWAFgckH8O7PQIyL5gvrhQgBLuEYgLfuKWOVvWVskMbuFHAz5xg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
     dependencies:
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.48.1(eslint@8.57.1)(typescript@5.9.3)
+      '@typescript-eslint/types': 8.60.0
+      '@typescript-eslint/typescript-estree': 8.60.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.60.0(eslint@10.4.1)(typescript@5.9.3)
       debug: 4.4.3
-      eslint: 8.57.1
-      ts-api-utils: 2.1.0(typescript@5.9.3)
+      eslint: 10.4.1
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types@6.21.0:
-    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    dev: true
-
-  /@typescript-eslint/types@8.48.1:
-    resolution: {integrity: sha512-+fZ3LZNeiELGmimrujsDCT4CRIbq5oXdHe7chLiW8qzqyPMnn1puNstCrMNVAqwcl2FdIxkuJ4tOs/RFDBVc/Q==}
+  /@typescript-eslint/types@8.60.0:
+    resolution: {integrity: sha512-AsE7x2XaAK+CVbeih0Fvbn+r1qHxtpLDJ3XUuFcIinT318T90yHMJC+Zgv+jUuDjQQd06HKwxnDu6sz1IcTilA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.9.3):
-    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/typescript-estree@8.60.0(typescript@5.9.3):
+    resolution: {integrity: sha512-3AcZNBGMClm6CXDyo8kYvVGT/sx29sS0oBsIb9oZI2gunA4Vm2M3YHzRLPvsUBBsl+yB5FPtltq7gGH0iTlp9g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      typescript: '>=4.8.4 <6.1.0'
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
+      '@typescript-eslint/project-service': 8.60.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.60.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.60.0
+      '@typescript-eslint/visitor-keys': 8.60.0
       debug: 4.4.3
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 9.0.3
-      semver: 7.7.3
-      ts-api-utils: 1.4.3(typescript@5.9.3)
+      minimatch: 10.2.5
+      semver: 7.7.4
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/typescript-estree@8.48.1(typescript@5.9.3):
-    resolution: {integrity: sha512-/9wQ4PqaefTK6POVTjJaYS0bynCgzh6ClJHGSBj06XEHjkfylzB+A3qvyaXnErEZSaxhIo4YdyBgq6j4RysxDg==}
+  /@typescript-eslint/utils@8.60.0(eslint@10.4.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-HtXuPfrHTyBDkameWpl+vJb1Uevu2tznAyahM1Oc4AENidCLTPiZDWIo4GfcxNdC/RcfGcadzzkqbRG87dUrQA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@typescript-eslint/project-service': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.48.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/visitor-keys': 8.48.1
-      debug: 4.4.3
-      minimatch: 9.0.5
-      semver: 7.7.3
-      tinyglobby: 0.2.15
-      ts-api-utils: 2.1.0(typescript@5.9.3)
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1)
+      '@typescript-eslint/scope-manager': 8.60.0
+      '@typescript-eslint/types': 8.60.0
+      '@typescript-eslint/typescript-estree': 8.60.0(typescript@5.9.3)
+      eslint: 10.4.1
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@8.48.1(eslint@8.57.1)(typescript@5.9.3):
-    resolution: {integrity: sha512-fAnhLrDjiVfey5wwFRwrweyRlCmdz5ZxXz2G/4cLn0YDLjTapmN4gcCsTBR1N2rWnZSDeWpYtgLDsJt+FpmcwA==}
+  /@typescript-eslint/visitor-keys@8.60.0:
+    resolution: {integrity: sha512-9WI52t8ZGLVGrPMBet25yAftqY/n95+zmoUUtJBBQTKDSKUu7OsPTroT2op7U9JatkoRccL0YkWDNMFfC4Sjxg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@typescript-eslint/types': 8.60.0
+      eslint-visitor-keys: 5.0.1
+    dev: true
+
+  /@ungap/structured-clone@1.3.0:
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    dev: true
+
+  /@vee-validate/zod@4.15.1(vue@3.5.35)(zod@3.25.76):
+    resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
     peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0
-      typescript: '>=4.8.4 <6.0.0'
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.48.1
-      '@typescript-eslint/types': 8.48.1
-      '@typescript-eslint/typescript-estree': 8.48.1(typescript@5.9.3)
-      eslint: 8.57.1
-      typescript: 5.9.3
+      zod: ^3.24.0
+    dependencies:
+      type-fest: 4.41.0
+      vee-validate: 4.15.1(vue@3.5.35)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - vue
+    dev: false
+
+  /@vitejs/plugin-vue@5.2.4(vite@5.4.21)(vue@3.5.35):
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 5.4.21(@types/node@20.19.25)
+      vue: 3.5.35(typescript@5.9.3)
+    dev: true
+
+  /@vitejs/plugin-vue@5.2.4(vite@6.4.2)(vue@3.5.35):
+    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0 || ^6.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 6.4.2(@types/node@20.19.25)
+      vue: 3.5.35(typescript@5.9.3)
+    dev: true
+
+  /@vitest/coverage-v8@3.2.4(vitest@3.2.4):
+    resolution: {integrity: sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==}
+    peerDependencies:
+      '@vitest/browser': 3.2.4
+      vitest: 3.2.4
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 1.0.2
+      ast-v8-to-istanbul: 0.3.12
+      debug: 4.4.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      magic-string: 0.30.21
+      magicast: 0.3.5
+      std-env: 3.10.0
+      test-exclude: 7.0.2
+      tinyrainbow: 2.0.0
+      vitest: 3.2.4(@types/node@20.19.25)(jsdom@25.0.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/visitor-keys@6.21.0:
-    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@vitest/expect@1.6.1:
+    resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
     dependencies:
-      '@typescript-eslint/types': 6.21.0
-      eslint-visitor-keys: 3.4.3
+      '@vitest/spy': 1.6.1
+      '@vitest/utils': 1.6.1
+      chai: 4.5.0
     dev: true
 
-  /@typescript-eslint/visitor-keys@8.48.1:
-    resolution: {integrity: sha512-BmxxndzEWhE4TIEEMBs8lP3MBWN3jFPs/p6gPm/wkv02o41hI6cq9AuSmGAaTTHPtA1FTi2jBre4A9rm5ZmX+Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  /@vitest/expect@3.2.4:
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
     dependencies:
-      '@typescript-eslint/types': 8.48.1
-      eslint-visitor-keys: 4.2.1
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
     dev: true
 
-  /@ungap/structured-clone@1.3.0:
-    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+  /@vitest/mocker@3.2.4(vite@6.4.2):
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      vite: 6.4.2(@types/node@20.19.25)
+    dev: true
 
-  /@unrs/resolver-binding-android-arm-eabi@1.11.1:
-    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
+  /@vitest/pretty-format@3.2.4:
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+    dependencies:
+      tinyrainbow: 2.0.0
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-android-arm64@1.11.1:
-    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
+  /@vitest/runner@1.6.1:
+    resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
+    dependencies:
+      '@vitest/utils': 1.6.1
+      p-limit: 5.0.0
+      pathe: 1.1.2
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-darwin-arm64@1.11.1:
-    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
+  /@vitest/runner@3.2.4:
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
+    dependencies:
+      '@vitest/utils': 3.2.4
+      pathe: 2.0.3
+      strip-literal: 3.1.0
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-darwin-x64@1.11.1:
-    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
+  /@vitest/snapshot@1.6.1:
+    resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
+    dependencies:
+      magic-string: 0.30.21
+      pathe: 1.1.2
+      pretty-format: 29.7.0
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-freebsd-x64@1.11.1:
-    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
+  /@vitest/snapshot@3.2.4:
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      magic-string: 0.30.21
+      pathe: 2.0.3
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1:
-    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
+  /@vitest/spy@1.6.1:
+    resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
+    dependencies:
+      tinyspy: 2.2.1
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm-musleabihf@1.11.1:
-    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
+  /@vitest/spy@3.2.4:
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+    dependencies:
+      tinyspy: 4.0.4
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm64-gnu@1.11.1:
-    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
+  /@vitest/utils@1.6.1:
+    resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
+    dependencies:
+      diff-sequences: 29.6.3
+      estree-walker: 3.0.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-arm64-musl@1.11.1:
-    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
+  /@vitest/utils@3.2.4:
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-ppc64-gnu@1.11.1:
-    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
+  /@volar/language-core@2.4.15:
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
+    dependencies:
+      '@volar/source-map': 2.4.15
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-riscv64-gnu@1.11.1:
-    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
+  /@volar/language-core@2.4.28:
+    resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
+    dependencies:
+      '@volar/source-map': 2.4.28
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-riscv64-musl@1.11.1:
-    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
+  /@volar/source-map@2.4.15:
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-s390x-gnu@1.11.1:
-    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
+  /@volar/source-map@2.4.28:
+    resolution: {integrity: sha512-yX2BDBqJkRXfKw8my8VarTyjv48QwxdJtvRgUpNE5erCsgEUdI2DsLbpa+rOQVAJYshY99szEcRDmyHbF10ggQ==}
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-x64-gnu@1.11.1:
-    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
+  /@volar/typescript@2.4.15:
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
+    dependencies:
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-linux-x64-musl@1.11.1:
-    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
+  /@volar/typescript@2.4.28:
+    resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+    dependencies:
+      '@volar/language-core': 2.4.28
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
     dev: true
-    optional: true
 
-  /@unrs/resolver-binding-wasm32-wasi@1.11.1:
-    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    requiresBuild: true
+  /@vue/compiler-core@3.5.35:
+    resolution: {integrity: sha512-BUmHaR1J+O+CKZ9uJucdVTEr1LHsdyvv7vG3eNRhK3CczEHeMd/LtsHAuD7PbrxvI2envCY2v7HI1vC1aBRzKw==}
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/shared': 3.5.35
+      entities: 7.0.1
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  /@vue/compiler-dom@3.5.35:
+    resolution: {integrity: sha512-k+bprkXxuqhVajgTx5mUHuir7TwQzUKOWR40ng1ncAqQRPnrLngGGgqVEEhOnTMlc8btHYVKmrP8s5Qyg0hvYA==}
+    dependencies:
+      '@vue/compiler-core': 3.5.35
+      '@vue/shared': 3.5.35
+
+  /@vue/compiler-sfc@3.5.35:
+    resolution: {integrity: sha512-G5VPMcXTSywXBgtFOZOnHKBxKSrwXUcvY1iaF5/hRcy7t0J6CH/d8ha9F4nzi00Fax1eLV0QHM7v4mQu68jydw==}
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@vue/compiler-core': 3.5.35
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-ssr': 3.5.35
+      '@vue/shared': 3.5.35
+      estree-walker: 2.0.2
+      magic-string: 0.30.21
+      postcss: 8.5.15
+      source-map-js: 1.2.1
+
+  /@vue/compiler-ssr@3.5.35:
+    resolution: {integrity: sha512-rGhAeXgdM7/ffTJGXT69rCCdTmjDewnFuUZfBQQHTdcEBeWdT5HCGY60y2ytLJr9/Dsu7IntUi5z/w0h6Rjnzw==}
+    dependencies:
+      '@vue/compiler-dom': 3.5.35
+      '@vue/shared': 3.5.35
+
+  /@vue/compiler-vue2@2.7.16:
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+    dev: true
+
+  /@vue/devtools-api@7.7.9:
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  /@vue/devtools-kit@7.7.9:
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  /@vue/devtools-shared@7.7.9:
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+    dependencies:
+      rfdc: 1.4.1
+
+  /@vue/language-core@2.2.0(typescript@5.9.3):
+    resolution: {integrity: sha512-O1ZZFaaBGkKbsRfnVH1ifOK1/1BUkyK+3SQsfnh6PmMmD4qJcTU8godCeA96jjDRTL6zgnK7YzCHfaUlH2r0Mw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.4.28
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.35
+      alien-signals: 0.4.14
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      typescript: 5.9.3
+    dev: true
+
+  /@vue/language-core@2.2.12(typescript@5.9.3):
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.35
+      alien-signals: 1.0.13
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+      typescript: 5.9.3
+    dev: true
+
+  /@vue/reactivity@3.5.35:
+    resolution: {integrity: sha512-tVc+SsHConvh/Lz64qq1pP3rYArBmK42xonovEcxY74SQtvctZodG/zhq54P5dr38cVuw25d27cPNRdlMidpGQ==}
+    dependencies:
+      '@vue/shared': 3.5.35
+
+  /@vue/runtime-core@3.5.35:
+    resolution: {integrity: sha512-A/xFNX9loIcWDygeQuNCfKuh0CoYBzxhqEMNah5TSFg9Z53DrFYEN2qi5CU9necjM1OWYegYREUTHmXTmhfXtg==}
     dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    dev: true
-    optional: true
+      '@vue/reactivity': 3.5.35
+      '@vue/shared': 3.5.35
 
-  /@unrs/resolver-binding-win32-arm64-msvc@1.11.1:
-    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
+  /@vue/runtime-dom@3.5.35:
+    resolution: {integrity: sha512-odrJ1C391dbGnyDRh8U+rnP7J2amIEzfmRk5vXy7xi3aZhEXofTvpi0T4HJb6jlNqQZTNPR5MPHSB3RHNkIORA==}
+    dependencies:
+      '@vue/reactivity': 3.5.35
+      '@vue/runtime-core': 3.5.35
+      '@vue/shared': 3.5.35
+      csstype: 3.2.3
 
-  /@unrs/resolver-binding-win32-ia32-msvc@1.11.1:
-    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
+  /@vue/server-renderer@3.5.35(vue@3.5.35):
+    resolution: {integrity: sha512-NkebSOYdB97wi8OQcO3HqzZSlymJi/aWsN/7h74OSVhRTm6qGs3Jp3e0rCXynmWwSlKeRrnlIug+ilYoHBmQDA==}
+    peerDependencies:
+      vue: 3.5.35
+    dependencies:
+      '@vue/compiler-ssr': 3.5.35
+      '@vue/shared': 3.5.35
+      vue: 3.5.35(typescript@5.9.3)
 
-  /@unrs/resolver-binding-win32-x64-msvc@1.11.1:
-    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
+  /@vue/shared@3.5.35:
+    resolution: {integrity: sha512-zSbjL7gRXwks2ZQLRGCajBtBXEOXW9Ddhn/HvSdrGkE2dqGnumzW8XtusRrxrE9LvqtiqDXQ+A60Hp6mvdYxfA==}
 
-  /@vitejs/plugin-react@4.7.0(vite@7.2.6):
-    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  /@vue/test-utils@2.4.10(@vue/compiler-dom@3.5.35)(vue@3.5.35):
+    resolution: {integrity: sha512-SmoZ5EA1kYiAFs9NkYdiFFQF+cSnUwnvlYEbY+DogWQZUiqOm/Y29eSbc5T6yi75SgSF9863SBeXniIEoPajCA==}
     peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-    dependencies:
-      '@babel/core': 7.28.5
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5)
-      '@rolldown/pluginutils': 1.0.0-beta.27
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 7.2.6(@types/node@20.19.25)
-    transitivePeerDependencies:
-      - supports-color
+      '@vue/compiler-dom': 3.x
+      '@vue/server-renderer': 3.x
+      vue: 3.x
+    peerDependenciesMeta:
+      '@vue/server-renderer':
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.5.35
+      js-beautify: 1.15.4
+      vue: 3.5.35(typescript@5.9.3)
+      vue-component-type-helpers: 3.3.3
     dev: true
 
-  /@vitest/coverage-v8@1.6.1(vitest@1.6.1):
-    resolution: {integrity: sha512-6YeRZwuO4oTGKxD3bijok756oktHSIm3eczVVzNe3scqzuhLwltIF3S9ZL/vwOVIpURmU6SnZhziXXAfw8/Qlw==}
-    peerDependencies:
-      vitest: 1.6.1
+  /@vueuse/core@12.8.2(typescript@5.9.3):
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
     dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@bcoe/v8-coverage': 0.2.3
-      debug: 4.4.3
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 5.0.6
-      istanbul-reports: 3.2.0
-      magic-string: 0.30.21
-      magicast: 0.3.5
-      picocolors: 1.1.1
-      std-env: 3.10.0
-      strip-literal: 2.1.1
-      test-exclude: 6.0.0
-      vitest: 1.6.1(@types/node@20.19.25)(jsdom@24.1.3)
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      vue: 3.5.35(typescript@5.9.3)
     transitivePeerDependencies:
-      - supports-color
+      - typescript
     dev: true
 
-  /@vitest/expect@1.6.1:
-    resolution: {integrity: sha512-jXL+9+ZNIJKruofqXuuTClf44eSpcHlgj3CiuNihUF3Ioujtmc0zIa3UJOW5RjDK1YLBJZnWBlPuqhYycLioog==}
+  /@vueuse/core@14.3.0(vue@3.5.35):
+    resolution: {integrity: sha512-aHfz47g0ZhMtTVHmIzMVpJy8ePhhOy68GY5bv110+5DVtZ+W7BsOx+m61UNQqfrWyPztIHIanWa3E2tib3NFIw==}
+    peerDependencies:
+      vue: ^3.5.0
     dependencies:
-      '@vitest/spy': 1.6.1
-      '@vitest/utils': 1.6.1
-      chai: 4.5.0
-    dev: true
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.3.0
+      '@vueuse/shared': 14.3.0(vue@3.5.35)
+      vue: 3.5.35(typescript@5.9.3)
+    dev: false
 
-  /@vitest/runner@1.6.1:
-    resolution: {integrity: sha512-3nSnYXkVkf3mXFfE7vVyPmi3Sazhb/2cfZGGs0JRzFsPFvAMBEcrweV1V1GsrstdXeKCTXlJbvnQwGWgEIHmOA==}
+  /@vueuse/integrations@12.8.2(focus-trap@7.8.0)(typescript@5.9.3):
+    resolution: {integrity: sha512-fbGYivgK5uBTRt7p5F3zy6VrETlV9RtZjBqd1/HxGdjdckBgBM4ugP8LHpjolqTj14TXTxSK1ZfgPbHYyGuH7g==}
+    peerDependencies:
+      async-validator: ^4
+      axios: ^1
+      change-case: ^5
+      drauu: ^0.4
+      focus-trap: ^7
+      fuse.js: ^7
+      idb-keyval: ^6
+      jwt-decode: ^4
+      nprogress: ^0.2
+      qrcode: ^1.5
+      sortablejs: ^1
+      universal-cookie: ^7
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      sortablejs:
+        optional: true
+      universal-cookie:
+        optional: true
     dependencies:
-      '@vitest/utils': 1.6.1
-      p-limit: 5.0.0
-      pathe: 1.1.2
+      '@vueuse/core': 12.8.2(typescript@5.9.3)
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      focus-trap: 7.8.0
+      vue: 3.5.35(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
     dev: true
 
-  /@vitest/snapshot@1.6.1:
-    resolution: {integrity: sha512-WvidQuWAzU2p95u8GAKlRMqMyN1yOJkGHnx3M1PL9Raf7AQ1kwLKg04ADlCa3+OXUZE7BceOhVZiuWAbzCKcUQ==}
-    dependencies:
-      magic-string: 0.30.21
-      pathe: 1.1.2
-      pretty-format: 29.7.0
+  /@vueuse/metadata@12.8.2:
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
     dev: true
 
-  /@vitest/spy@1.6.1:
-    resolution: {integrity: sha512-MGcMmpGkZebsMZhbQKkAf9CX5zGvjkBTqf8Zx3ApYWXr3wG+QvEu2eXWfnIIWYSJExIp4V9FCKDEeygzkYrXMw==}
+  /@vueuse/metadata@14.3.0:
+    resolution: {integrity: sha512-BwxmbAzwAVF50+MW57GXOUEV61nFBGnlBvrTqj49PqWJu3uw7hdu72ztXeZ33RdZtDY6kO+bfCAE1PCn88Tktw==}
+    dev: false
+
+  /@vueuse/shared@12.8.2(typescript@5.9.3):
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
     dependencies:
-      tinyspy: 2.2.1
+      vue: 3.5.35(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
     dev: true
 
-  /@vitest/utils@1.6.1:
-    resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
+  /@vueuse/shared@14.3.0(vue@3.5.35):
+    resolution: {integrity: sha512-bZpge9eSXwa4ToSiqJ7j6KRwhAsneMFoSz3LMWKQDkqimm3D/tbFlrklrs/IOqC8tEcYmXQZJ6N0UrjhBirVCg==}
+    peerDependencies:
+      vue: ^3.5.0
     dependencies:
-      diff-sequences: 29.6.3
-      estree-walker: 3.0.3
-      loupe: 2.3.7
-      pretty-format: 29.7.0
+      vue: 3.5.35(typescript@5.9.3)
+    dev: false
+
+  /abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.15.0):
+  /acorn-jsx@5.3.2(acorn@8.16.0):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.16.0
+    dev: true
 
   /acorn-walk@8.3.4:
     resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
@@ -3931,14 +2772,43 @@ packages:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
+    dev: true
+
+  /acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
 
   /agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
     dev: true
 
-  /ajv@6.12.6:
-    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+  /ajv-draft-04@1.0.0(ajv@8.18.0):
+    resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
+    peerDependencies:
+      ajv: ^8.5.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+    dependencies:
+      ajv: 8.18.0
+    dev: true
+
+  /ajv-formats@3.0.1(ajv@8.18.0):
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+    dependencies:
+      ajv: 8.18.0
+    dev: true
+
+  /ajv@6.15.0:
+    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
     dependencies:
       fast-deep-equal: 3.1.3
       fast-json-stable-stringify: 2.1.0
@@ -3946,6 +2816,43 @@ packages:
       uri-js: 4.4.1
     dev: true
 
+  /ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.2
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+    dev: true
+
+  /algoliasearch@5.53.0:
+    resolution: {integrity: sha512-OGW1q6b91CRSSeiOnM8LxuR5NYJ2esvw66jUZ4IIvdv+ItNkx3pwLuyR+jaCdbGee4ov5WgUnyPryyh11xvByQ==}
+    engines: {node: '>= 14.0.0'}
+    dependencies:
+      '@algolia/abtesting': 1.19.0
+      '@algolia/client-abtesting': 5.53.0
+      '@algolia/client-analytics': 5.53.0
+      '@algolia/client-common': 5.53.0
+      '@algolia/client-insights': 5.53.0
+      '@algolia/client-personalization': 5.53.0
+      '@algolia/client-query-suggestions': 5.53.0
+      '@algolia/client-search': 5.53.0
+      '@algolia/ingestion': 1.53.0
+      '@algolia/monitoring': 1.53.0
+      '@algolia/recommend': 5.53.0
+      '@algolia/requester-browser-xhr': 5.53.0
+      '@algolia/requester-fetch': 5.53.0
+      '@algolia/requester-node-http': 5.53.0
+    dev: true
+
+  /alien-signals@0.4.14:
+    resolution: {integrity: sha512-itUAVzhczTmP2U5yX67xVpsbbOiquusbWVyA9N+sy6+r6YVbFkahXvNCeEPWEOMhwDYwbVbGHFkVL03N9I5g+Q==}
+    dev: true
+
+  /alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+    dev: true
+
   /ansi-escapes@4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
@@ -3993,8 +2900,10 @@ packages:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
     dev: true
 
-  /argparse@2.0.1:
-    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+  /argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+    dependencies:
+      sprintf-js: 1.0.3
     dev: true
 
   /aria-hidden@1.2.6:
@@ -4004,129 +2913,21 @@ packages:
       tslib: 2.8.1
     dev: false
 
-  /aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-    dependencies:
-      dequal: 2.0.3
-    dev: true
-
-  /aria-query@5.3.2:
-    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /array-buffer-byte-length@1.0.2:
-    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      is-array-buffer: 3.0.5
-    dev: true
-
-  /array-includes@3.1.9:
-    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-      math-intrinsics: 1.1.0
-    dev: true
-
-  /array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-    dev: true
-
-  /array.prototype.findlastindex@1.2.6:
-    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-    dev: true
-
-  /array.prototype.flat@1.3.3:
-    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-    dev: true
-
-  /array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-shim-unscopables: 1.1.0
-    dev: true
-
-  /array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.1.0
-    dev: true
-
-  /arraybuffer.prototype.slice@1.0.4:
-    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.5
-    dev: true
-
   /assertion-error@1.1.0:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
 
-  /ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+  /assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
     dev: true
 
-  /astring@1.9.0:
-    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
-    hasBin: true
-    dev: false
-
-  /async-function@1.0.0:
-    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
-    engines: {node: '>= 0.4'}
+  /ast-v8-to-istanbul@0.3.12:
+    resolution: {integrity: sha512-BRRC8VRZY2R4Z4lFIL35MwNXmwVqBityvOIwETtsCSwvjl0IdgFsy9NhdaA6j74nUdtJJlIypeRhpDam19Wq3g==}
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
     dev: true
 
   /asynckit@0.4.0:
@@ -4149,36 +2950,15 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
-  /available-typed-arrays@1.0.7:
-    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      possible-typed-array-names: 1.1.0
-    dev: true
-
-  /axe-core@4.11.0:
-    resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /babel-plugin-react-compiler@1.0.0:
-    resolution: {integrity: sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==}
-    dependencies:
-      '@babel/types': 7.28.5
-
-  /bail@2.0.2:
-    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
-    dev: false
-
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+    dev: true
+
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
@@ -4193,6 +2973,9 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
     dependencies:
@@ -4201,11 +2984,8 @@ packages:
       readable-stream: 3.6.2
     dev: false
 
-  /brace-expansion@1.1.12:
-    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
-    dependencies:
-      balanced-match: 1.0.2
-      concat-map: 0.0.1
+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
 
   /brace-expansion@2.0.2:
@@ -4214,6 +2994,13 @@ packages:
       balanced-match: 1.0.2
     dev: true
 
+  /brace-expansion@5.0.6:
+    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
+    engines: {node: 18 || 20 || >=22}
+    dependencies:
+      balanced-match: 4.0.4
+    dev: true
+
   /braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -4263,29 +3050,6 @@ packages:
       function-bind: 1.1.2
     dev: true
 
-  /call-bind@1.0.8:
-    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      get-intrinsic: 1.3.0
-      set-function-length: 1.2.2
-    dev: true
-
-  /call-bound@1.0.4:
-    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
-    dev: true
-
-  /callsites@3.1.0:
-    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
-    engines: {node: '>=6'}
-    dev: true
-
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -4293,10 +3057,11 @@ packages:
 
   /caniuse-lite@1.0.30001757:
     resolution: {integrity: sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==}
+    dev: true
 
   /ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
-    dev: false
+    dev: true
 
   /chai@4.5.0:
     resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
@@ -4311,12 +3076,24 @@ packages:
       type-detect: 4.1.0
     dev: true
 
+  /chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+    dev: true
+
   /chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
+    dev: false
 
   /chalk@5.6.2:
     resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
@@ -4325,19 +3102,11 @@ packages:
 
   /character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
-    dev: false
+    dev: true
 
   /character-entities-legacy@3.0.0:
     resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
-    dev: false
-
-  /character-entities@2.0.2:
-    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
-    dev: false
-
-  /character-reference-invalid@2.0.1:
-    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
-    dev: false
+    dev: true
 
   /chardet@2.1.1:
     resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
@@ -4349,6 +3118,11 @@ packages:
       get-func-name: 2.0.2
     dev: true
 
+  /check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+    dev: true
+
   /chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -4401,10 +3175,6 @@ packages:
     engines: {node: '>= 12'}
     dev: false
 
-  /client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
-
   /clone@1.0.4:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
@@ -4415,27 +3185,6 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /cmdk@1.1.1(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
-    peerDependencies:
-      react: ^18 || ^19 || ^19.0.0-rc
-      react-dom: ^18 || ^19 || ^19.0.0-rc
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.7)(react-dom@19.2.0)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-    dev: false
-
-  /collapse-white-space@2.1.0:
-    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
-    dev: false
-
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -4454,7 +3203,12 @@ packages:
 
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
-    dev: false
+    dev: true
+
+  /commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+    dev: true
 
   /commander@12.1.0:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
@@ -4466,12 +3220,23 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+  /compare-versions@6.1.1:
+    resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
+    dev: true
+
+  /confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+    dev: true
+
+  /confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
     dev: true
 
-  /confbox@0.1.8:
-    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+  /config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
     dev: true
 
   /consola@3.4.2:
@@ -4479,9 +3244,11 @@ packages:
     engines: {node: ^14.18.0 || >=16.10.0}
     dev: true
 
-  /convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-    dev: true
+  /copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+    dependencies:
+      is-what: 5.5.0
 
   /cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
@@ -4492,10 +3259,6 @@ packages:
       which: 2.0.2
     dev: true
 
-  /css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-    dev: true
-
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -4513,10 +3276,6 @@ packages:
   /csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  /damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-    dev: true
-
   /data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -4525,50 +3284,23 @@ packages:
       whatwg-url: 14.2.0
     dev: true
 
-  /data-view-buffer@1.0.2:
-    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-    dev: true
-
-  /data-view-byte-length@1.0.2:
-    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-    dev: true
-
-  /data-view-byte-offset@1.0.1:
-    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
-    engines: {node: '>= 0.4'}
+  /date-fns-tz@2.0.1(date-fns@2.30.0):
+    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
+    peerDependencies:
+      date-fns: 2.x
     dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-    dev: true
-
-  /date-fns-jalali@4.1.0-0:
-    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+      date-fns: 2.30.0
     dev: false
 
-  /date-fns@4.1.0:
-    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.28.4
     dev: false
 
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
+  /de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
 
   /debug@4.4.3:
@@ -4581,17 +3313,12 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.3
+    dev: true
 
   /decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
     dev: true
 
-  /decode-named-character-reference@1.2.0:
-    resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
-    dependencies:
-      character-entities: 2.0.2
-    dev: false
-
   /deep-eql@4.1.4:
     resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
     engines: {node: '>=6'}
@@ -4599,6 +3326,11 @@ packages:
       type-detect: 4.1.0
     dev: true
 
+  /deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+    dev: true
+
   /deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
@@ -4609,23 +3341,9 @@ packages:
       clone: 1.0.4
     dev: false
 
-  /define-data-property@1.1.4:
-    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      gopd: 1.2.0
-    dev: true
-
-  /define-properties@1.2.1:
-    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.4
-      has-property-descriptors: 1.0.2
-      object-keys: 1.1.1
-    dev: true
+  /defu@6.1.7:
+    resolution: {integrity: sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==}
+    dev: false
 
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -4635,23 +3353,13 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-
-  /detect-libc@2.1.2:
-    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
-    engines: {node: '>=8'}
-    requiresBuild: true
-    dev: false
-    optional: true
-
-  /detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-    dev: false
+    dev: true
 
   /devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
     dependencies:
       dequal: 2.0.3
-    dev: false
+    dev: true
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
@@ -4662,39 +3370,15 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dev: true
 
-  /dir-glob@3.0.1:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
-    engines: {node: '>=8'}
-    dependencies:
-      path-type: 4.0.0
+  /diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
     dev: true
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
     dev: true
 
-  /doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: true
-
-  /doctrine@3.0.0:
-    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      esutils: 2.0.3
-    dev: true
-
-  /dom-accessibility-api@0.5.16:
-    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
-    dev: true
-
-  /dom-accessibility-api@0.6.3:
-    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
-    dev: true
-
   /dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -4708,10 +3392,47 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
+  /editorconfig@1.0.7:
+    resolution: {integrity: sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.5
+      semver: 7.7.3
+    dev: true
+
   /electron-to-chromium@1.5.262:
     resolution: {integrity: sha512-NlAsMteRHek05jRUxUR0a5jpjYq9ykk6+kO0yRaMi5moe7u0fVIOeQ3Y30A8dIiWFBNUoQGi1ljb1i5VtS9WQQ==}
     dev: true
 
+  /embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+    dependencies:
+      embla-carousel: 8.6.0
+    dev: false
+
+  /embla-carousel-vue@8.6.0(vue@3.5.35):
+    resolution: {integrity: sha512-v8UO5UsyLocZnu/LbfQA7Dn2QHuZKurJY93VUmZYP//QRWoCWOsionmvLLAlibkET3pGPs7++03VhJKbWD7vhQ==}
+    peerDependencies:
+      vue: ^3.2.37
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      vue: 3.5.35(typescript@5.9.3)
+    dev: false
+
+  /embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+    dev: false
+
+  /emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+    dev: true
+
   /emoji-regex@10.6.0:
     resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
     dev: false
@@ -4728,65 +3449,9 @@ packages:
     engines: {node: '>=0.12'}
     dev: true
 
-  /es-abstract@1.24.0:
-    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      arraybuffer.prototype.slice: 1.0.4
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      data-view-buffer: 1.0.2
-      data-view-byte-length: 1.0.2
-      data-view-byte-offset: 1.0.1
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.0
-      function.prototype.name: 1.1.8
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      get-symbol-description: 1.1.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      internal-slot: 1.1.0
-      is-array-buffer: 3.0.5
-      is-callable: 1.2.7
-      is-data-view: 1.0.2
-      is-negative-zero: 2.0.3
-      is-regex: 1.2.1
-      is-set: 2.0.3
-      is-shared-array-buffer: 1.0.4
-      is-string: 1.1.1
-      is-typed-array: 1.1.15
-      is-weakref: 1.1.1
-      math-intrinsics: 1.1.0
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.7
-      own-keys: 1.0.1
-      regexp.prototype.flags: 1.5.4
-      safe-array-concat: 1.1.3
-      safe-push-apply: 1.0.0
-      safe-regex-test: 1.1.0
-      set-proto: 1.0.0
-      stop-iteration-iterator: 1.1.0
-      string.prototype.trim: 1.2.10
-      string.prototype.trimend: 1.0.9
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.3
-      typed-array-byte-length: 1.0.3
-      typed-array-byte-offset: 1.0.4
-      typed-array-length: 1.0.7
-      unbox-primitive: 1.1.0
-      which-typed-array: 1.1.19
-    dev: true
+  /entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
 
   /es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
@@ -4798,26 +3463,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /es-iterator-helpers@1.2.1:
-    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.1.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      iterator.prototype: 1.1.5
-      safe-array-concat: 1.1.3
+  /es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
     dev: true
 
   /es-object-atoms@1.1.1:
@@ -4837,40 +3484,6 @@ packages:
       hasown: 2.0.2
     dev: true
 
-  /es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      hasown: 2.0.2
-    dev: true
-
-  /es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.1.0
-      is-symbol: 1.1.1
-    dev: true
-
-  /esast-util-from-estree@2.0.0:
-    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      devlop: 1.1.0
-      estree-util-visit: 2.0.0
-      unist-util-position-from-estree: 2.0.0
-    dev: false
-
-  /esast-util-from-js@2.0.1:
-    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      acorn: 8.15.0
-      esast-util-from-estree: 2.0.0
-      vfile-message: 4.0.3
-    dev: false
-
   /esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -5014,200 +3627,37 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-next@15.5.18(eslint@8.57.1)(typescript@5.9.3):
-    resolution: {integrity: sha512-HuoJU6uUPD00eyiud78IBnT4HLhztFj2V+ild2Uon5ZUrYZKe0Olu2QRD99e9IgL4/H1eg5Onka3BsfRW2U0Xw==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@next/eslint-plugin-next': 15.5.18
-      '@rushstack/eslint-patch': 1.15.0
-      '@typescript-eslint/eslint-plugin': 8.48.1(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.9.3)
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
-      eslint: 8.57.1
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
-      eslint-plugin-react: 7.37.5(eslint@8.57.1)
-      eslint-plugin-react-hooks: 5.2.0(eslint@8.57.1)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-    dev: true
-
-  /eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.16.1
-      resolve: 1.22.11
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1):
-    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      eslint: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-import-x: '*'
-    peerDependenciesMeta:
-      eslint-plugin-import:
-        optional: true
-      eslint-plugin-import-x:
-        optional: true
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.3
-      eslint: 8.57.1
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
-      get-tsconfig: 4.13.0
-      is-bun-module: 2.0.0
-      stable-hash: 0.0.5
-      tinyglobby: 0.2.15
-      unrs-resolver: 1.11.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /eslint-module-utils@2.12.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
-    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
-    engines: {node: '>=4'}
+  /eslint-plugin-vue@10.9.1(@typescript-eslint/parser@8.60.0)(eslint@10.4.1)(vue-eslint-parser@10.4.0):
+    resolution: {integrity: sha512-cHB0Tf4Duvzwecwd/AqWzZvF/QszE13BhjVUpVXWCy9AeMR5GjkAjP3i85vqgLgOuTmkHR1OJ5oMeqLHtuw8zg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
+      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      vue-eslint-parser: ^10.3.0
     peerDependenciesMeta:
-      '@typescript-eslint/parser':
+      '@stylistic/eslint-plugin':
         optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
-      debug: 3.2.7
-      eslint: 8.57.1
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /eslint-plugin-import@2.32.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
-    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-    peerDependenciesMeta:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@rtsao/scc': 1.1.0
-      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.9.3)
-      array-includes: 3.1.9
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.1
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
-      hasown: 2.0.2
-      is-core-module: 2.16.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
-
-  /eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.1):
-    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
-    dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.9
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.11.0
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 8.57.1
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-    dev: true
-
-  /eslint-plugin-react-hooks@5.2.0(eslint@8.57.1):
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
-    dependencies:
-      eslint: 8.57.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@10.4.1)
+      '@typescript-eslint/parser': 8.60.0(eslint@10.4.1)(typescript@5.9.3)
+      eslint: 10.4.1
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 7.1.1
+      semver: 7.7.4
+      vue-eslint-parser: 10.4.0(eslint@10.4.1)
+      xml-name-validator: 4.0.0
     dev: true
 
-  /eslint-plugin-react@7.37.5(eslint@8.57.1):
-    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 8.57.1
-      estraverse: 5.3.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.9
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.12
-      string.prototype.repeat: 1.0.0
-    dev: true
-
-  /eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /eslint-scope@9.1.2:
+    resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
       esrecurse: 4.3.0
       estraverse: 5.3.0
     dev: true
@@ -5217,70 +3667,66 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  /eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     dev: true
 
-  /eslint@8.57.1:
-    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+  /eslint@10.4.1:
+    resolution: {integrity: sha512-AyIKhnOBuOAdueD7RB3xB+YeAWScb9jHsJBgH2Hcde8InP5JYhqrRR6iTMHyTEwgENK54Cp44e4v8BwNhsuHuw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1)
       '@eslint-community/regexpp': 4.12.2
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
+      '@eslint/config-array': 0.23.5
+      '@eslint/config-helpers': 0.6.0
+      '@eslint/core': 1.2.1
+      '@eslint/plugin-kit': 0.7.2
+      '@humanfs/node': 0.16.8
       '@humanwhocodes/module-importer': 1.0.1
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.3.0
-      ajv: 6.12.6
-      chalk: 4.1.2
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.15.0
       cross-spawn: 7.0.6
       debug: 4.4.3
-      doctrine: 3.0.0
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.6.0
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
-      file-entry-cache: 6.0.1
+      file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.24.0
-      graphemer: 1.4.0
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.1
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
+      minimatch: 10.2.5
       natural-compare: 1.4.0
       optionator: 0.9.4
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /espree@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /espree@11.2.0:
+    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
     dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 3.4.3
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 5.0.1
     dev: true
 
-  /esquery@1.6.0:
-    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+  /esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
     dependencies:
       estraverse: 5.3.0
@@ -5298,51 +3744,14 @@ packages:
     engines: {node: '>=4.0'}
     dev: true
 
-  /estree-util-attach-comments@3.0.0:
-    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
-    dependencies:
-      '@types/estree': 1.0.8
-    dev: false
-
-  /estree-util-build-jsx@3.0.1:
-    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
-      estree-walker: 3.0.3
-    dev: false
-
-  /estree-util-is-identifier-name@3.0.0:
-    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
-    dev: false
-
-  /estree-util-scope@1.0.0:
-    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-    dev: false
-
-  /estree-util-to-js@2.0.0:
-    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      astring: 1.9.0
-      source-map: 0.7.6
-    dev: false
-
-  /estree-util-visit@2.0.0:
-    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/unist': 3.0.3
-    dev: false
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
       '@types/estree': 1.0.8
+    dev: true
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -5364,23 +3773,17 @@ packages:
       strip-final-newline: 3.0.0
     dev: true
 
-  /extend@3.0.2:
-    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
-    dev: false
-
-  /fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+  /expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
     dev: true
 
-  /fast-glob@3.3.1:
-    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
+  /exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+    dev: true
+
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
 
   /fast-glob@3.3.3:
@@ -5402,6 +3805,10 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: true
 
+  /fast-uri@3.1.2:
+    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+    dev: true
+
   /fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
     dependencies:
@@ -5420,11 +3827,23 @@ packages:
       picomatch: 4.0.3
     dev: true
 
-  /file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  /fdir@6.5.0(picomatch@4.0.4):
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+    dependencies:
+      picomatch: 4.0.4
+    dev: true
+
+  /file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
     dependencies:
-      flat-cache: 3.2.0
+      flat-cache: 4.0.1
     dev: true
 
   /fill-range@7.1.1:
@@ -5450,24 +3869,22 @@ packages:
       rollup: 4.53.3
     dev: true
 
-  /flat-cache@3.2.0:
-    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  /flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
     dependencies:
       flatted: 3.3.3
       keyv: 4.5.4
-      rimraf: 3.0.2
     dev: true
 
   /flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
     dev: true
 
-  /for-each@0.3.5:
-    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
-    engines: {node: '>= 0.4'}
+  /focus-trap@7.8.0:
+    resolution: {integrity: sha512-/yNdlIkpWbM0ptxno3ONTuf+2g318kh2ez3KSeZN5dZ8YC6AAmgeWz+GasYYiBJPFaYcSAPeu4GfhUaChzIJXA==}
     dependencies:
-      is-callable: 1.2.7
+      tabbable: 6.4.0
     dev: true
 
   /foreground-child@3.3.1:
@@ -5500,11 +3917,6 @@ packages:
       graceful-fs: 4.2.11
       jsonfile: 6.2.0
       universalify: 2.0.1
-    dev: false
-
-  /fs.realpath@1.0.0:
-    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true
 
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
@@ -5518,32 +3930,6 @@ packages:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
     dev: true
 
-  /function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      functions-have-names: 1.2.3
-      hasown: 2.0.2
-      is-callable: 1.2.7
-    dev: true
-
-  /functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-    dev: true
-
-  /generator-function@2.0.1:
-    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /gensync@1.0.0-beta.2:
-    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /get-east-asian-width@1.4.0:
     resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
     engines: {node: '>=18'}
@@ -5569,11 +3955,6 @@ packages:
       math-intrinsics: 1.1.0
     dev: true
 
-  /get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-    dev: false
-
   /get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -5587,21 +3968,6 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
-  /get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-    dev: true
-
-  /get-tsconfig@4.13.0:
-    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-    dev: true
-
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -5628,43 +3994,9 @@ packages:
       path-scurry: 1.11.1
     dev: true
 
-  /glob@7.2.3:
-    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
-    dependencies:
-      fs.realpath: 1.0.0
-      inflight: 1.0.6
-      inherits: 2.0.4
-      minimatch: 3.1.2
-      once: 1.4.0
-      path-is-absolute: 1.0.1
-    dev: true
-
-  /globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      type-fest: 0.20.2
-    dev: true
-
-  /globalthis@1.0.4:
-    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-properties: 1.2.1
-      gopd: 1.2.0
-    dev: true
-
-  /globby@11.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
-    engines: {node: '>=10'}
-    dependencies:
-      array-union: 2.1.0
-      dir-glob: 3.0.1
-      fast-glob: 3.3.3
-      ignore: 5.3.2
-      merge2: 1.4.1
-      slash: 3.0.0
+  /globals@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+    engines: {node: '>=18'}
     dev: true
 
   /gopd@1.2.0:
@@ -5674,34 +4006,11 @@ packages:
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: false
-
-  /graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-    dev: true
-
-  /has-bigints@1.1.0:
-    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
-    engines: {node: '>= 0.4'}
-    dev: true
 
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
-  /has-property-descriptors@1.0.2:
-    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
-    dependencies:
-      es-define-property: 1.0.1
-    dev: true
-
-  /has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      dunder-proto: 1.0.1
-    dev: true
-
   /has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -5721,56 +4030,35 @@ packages:
       function-bind: 1.1.2
     dev: true
 
-  /hast-util-to-estree@3.1.3:
-    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+  /hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
     dependencies:
-      '@types/estree': 1.0.8
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
-      devlop: 1.1.0
-      estree-util-attach-comments: 3.0.0
-      estree-util-is-identifier-name: 3.0.0
-      hast-util-whitespace: 3.0.0
-      mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.2.0
-      mdast-util-mdxjs-esm: 2.0.1
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      style-to-js: 1.1.21
-      unist-util-position: 5.0.0
-      zwitch: 2.0.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /hast-util-to-jsx-runtime@2.3.6:
-    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
-    dependencies:
-      '@types/estree': 1.0.8
       '@types/hast': 3.0.4
       '@types/unist': 3.0.3
+      ccount: 2.0.1
       comma-separated-tokens: 2.0.3
-      devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
       hast-util-whitespace: 3.0.0
-      mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.2.0
-      mdast-util-mdxjs-esm: 2.0.1
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
       property-information: 7.1.0
       space-separated-tokens: 2.0.2
-      style-to-js: 1.1.21
-      unist-util-position: 5.0.0
-      vfile-message: 4.0.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+    dev: true
 
   /hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
     dependencies:
       '@types/hast': 3.0.4
-    dev: false
+    dev: true
+
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
+  /hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
   /html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
@@ -5783,6 +4071,10 @@ packages:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
     dev: true
 
+  /html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+    dev: true
+
   /http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -5836,12 +4128,9 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /import-fresh@3.3.1:
-    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
-    engines: {node: '>=6'}
-    dependencies:
-      parent-module: 1.0.1
-      resolve-from: 4.0.0
+  /import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
     dev: true
 
   /imurmurhash@0.1.4:
@@ -5849,26 +4138,14 @@ packages:
     engines: {node: '>=0.8.19'}
     dev: true
 
-  /indent-string@4.0.0:
-    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /inflight@1.0.6:
-    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
-    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
-    dependencies:
-      once: 1.4.0
-      wrappy: 1.0.2
-    dev: true
-
   /inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-
-  /inline-style-parser@0.2.7:
-    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
     dev: false
 
+  /ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+    dev: true
+
   /inquirer@9.3.8(@types/node@20.19.25):
     resolution: {integrity: sha512-pFGGdaHrmRKMh4WoDDSowddgjT1Vkl90atobmTeSmcPGdYiwikch/m/Ef5wRaiamHejtw0cUUMMerzDUXCci2w==}
     engines: {node: '>=18'}
@@ -5889,53 +4166,6 @@ packages:
       - '@types/node'
     dev: false
 
-  /internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      es-errors: 1.3.0
-      hasown: 2.0.2
-      side-channel: 1.1.0
-    dev: true
-
-  /is-alphabetical@2.0.1:
-    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
-    dev: false
-
-  /is-alphanumerical@2.0.1:
-    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
-    dependencies:
-      is-alphabetical: 2.0.1
-      is-decimal: 2.0.1
-    dev: false
-
-  /is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-    dev: true
-
-  /is-async-function@2.1.1:
-    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      async-function: 1.0.0
-      call-bound: 1.0.4
-      get-proto: 1.0.1
-      has-tostringtag: 1.0.2
-      safe-regex-test: 1.1.0
-    dev: true
-
-  /is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      has-bigints: 1.1.0
-    dev: true
-
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -5943,25 +4173,6 @@ packages:
       binary-extensions: 2.3.0
     dev: true
 
-  /is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-    dev: true
-
-  /is-bun-module@2.0.0:
-    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
-    dependencies:
-      semver: 7.7.3
-    dev: true
-
-  /is-callable@1.2.7:
-    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
   /is-core-module@2.16.1:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
@@ -5969,54 +4180,15 @@ packages:
       hasown: 2.0.2
     dev: true
 
-  /is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      is-typed-array: 1.1.15
-    dev: true
-
-  /is-date-object@1.1.0:
-    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-    dev: true
-
-  /is-decimal@2.0.1:
-    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
-    dev: false
-
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-    dev: true
-
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  /is-generator-function@1.1.2:
-    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      generator-function: 2.0.1
-      get-proto: 1.0.1
-      has-tostringtag: 1.0.2
-      safe-regex-test: 1.1.0
-    dev: true
-
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -6024,10 +4196,6 @@ packages:
       is-extglob: 2.1.1
     dev: true
 
-  /is-hexadecimal@2.0.1:
-    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
-    dev: false
-
   /is-interactive@1.0.0:
     resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
     engines: {node: '>=8'}
@@ -6038,94 +4206,20 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-    dev: true
-
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
     dev: true
 
-  /is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-    dev: true
-
-  /is-plain-obj@4.1.0:
-    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
-    engines: {node: '>=12'}
-    dev: false
-
   /is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
     dev: true
 
-  /is-regex@1.2.1:
-    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
-    dev: true
-
-  /is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-    dev: true
-
   /is-stream@3.0.0:
     resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
-  /is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-    dev: true
-
-  /is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      has-symbols: 1.1.0
-      safe-regex-test: 1.1.0
-    dev: true
-
-  /is-typed-array@1.1.15:
-    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      which-typed-array: 1.1.19
-    dev: true
-
   /is-unicode-supported@0.1.0:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
@@ -6141,29 +4235,9 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-    dev: true
-
-  /is-weakset@2.0.4:
-    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-    dev: true
-
-  /isarray@2.0.5:
-    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: true
+  /is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
@@ -6202,18 +4276,6 @@ packages:
       istanbul-lib-report: 3.0.1
     dev: true
 
-  /iterator.prototype@1.1.5:
-    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.4
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      has-symbols: 1.1.0
-      set-function-name: 2.0.2
-    dev: true
-
   /jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
     dependencies:
@@ -6227,28 +4289,41 @@ packages:
     hasBin: true
     dev: true
 
+  /jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+    dev: true
+
   /joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
     dev: true
 
-  /js-tokens@4.0.0:
-    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+  /js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.7
+      glob: 10.5.0
+      js-cookie: 3.0.8
+      nopt: 7.2.1
     dev: true
 
-  /js-tokens@9.0.1:
-    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+  /js-cookie@3.0.8:
+    resolution: {integrity: sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==}
     dev: true
 
-  /js-yaml@4.1.1:
-    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
-    hasBin: true
-    dependencies:
-      argparse: 2.0.1
+  /js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
+    dev: true
+
+  /js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
     dev: true
 
-  /jsdom@24.1.3:
-    resolution: {integrity: sha512-MyL55p3Ut3cXbeBEG7Hcv0mVM8pp8PBNWxRqchZnSfAiES1v1mRnMeFfaHWIPULpwsYfvO+ZmMZz5tGCnjzDUQ==}
+  /jsdom@25.0.1:
+    resolution: {integrity: sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==}
     engines: {node: '>=18'}
     peerDependencies:
       canvas: ^2.11.2
@@ -6269,7 +4344,7 @@ packages:
       rrweb-cssom: 0.7.1
       saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.4
+      tough-cookie: 5.1.2
       w3c-xmlserializer: 5.0.0
       webidl-conversions: 7.0.0
       whatwg-encoding: 3.1.1
@@ -6283,12 +4358,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /jsesc@3.1.0:
-    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dev: true
-
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
     dev: true
@@ -6297,21 +4366,12 @@ packages:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
 
-  /json-stable-stringify-without-jsonify@1.0.1:
-    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
-    dev: true
-
-  /json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.8
+  /json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
     dev: true
 
-  /json5@2.2.3:
-    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
-    engines: {node: '>=6'}
-    hasBin: true
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
   /jsonfile@6.2.0:
@@ -6320,17 +4380,6 @@ packages:
       universalify: 2.0.1
     optionalDependencies:
       graceful-fs: 4.2.11
-    dev: false
-
-  /jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.flat: 1.3.3
-      object.assign: 4.1.7
-      object.values: 1.2.1
-    dev: true
 
   /keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
@@ -6338,15 +4387,8 @@ packages:
       json-buffer: 3.0.1
     dev: true
 
-  /language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
-    dev: true
-
-  /language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      language-subtag-registry: 0.3.23
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
     dev: true
 
   /levn@0.4.1:
@@ -6379,6 +4421,15 @@ packages:
       pkg-types: 1.3.1
     dev: true
 
+  /local-pkg@1.2.1:
+    resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.8.0
+      pkg-types: 2.3.1
+      quansync: 0.2.11
+    dev: true
+
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -6386,9 +4437,9 @@ packages:
       p-locate: 5.0.0
     dev: true
 
-  /lodash.merge@4.6.2:
-    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
+  /lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+    dev: false
 
   /log-symbols@4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
@@ -6406,57 +4457,37 @@ packages:
       is-unicode-supported: 1.3.0
     dev: false
 
-  /longest-streak@3.1.0:
-    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
-    dev: false
-
-  /loose-envify@1.4.0:
-    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
-    hasBin: true
-    dependencies:
-      js-tokens: 4.0.0
-    dev: true
-
   /loupe@2.3.7:
     resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
     dependencies:
       get-func-name: 2.0.2
     dev: true
 
-  /lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+  /loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
     dev: true
 
-  /lru-cache@5.1.1:
-    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
-    dependencies:
-      yallist: 3.1.1
+  /lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
     dev: true
 
-  /lucide-react@0.555.0(react@19.2.0):
-    resolution: {integrity: sha512-D8FvHUGbxWBRQM90NZeIyhAvkFfsh3u9ekrMvJ30Z6gnpBHS6HC6ldLg7tL45hwiIz/u66eKDtdA23gwwGsAHA==}
+  /lucide-vue-next@0.510.0(vue@3.5.35):
+    resolution: {integrity: sha512-C+duOTUoUpBFjSY1/ER2jwwS8kQJgTW/7vk7WWdnXhq7IWUlvfJtYal9cVsGCVf6wvS9m0t3Hg1ktaDjm8y1oQ==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      vue: '>=3.0.1'
     dependencies:
-      react: 19.2.0
-    dev: true
-
-  /lz-string@1.5.0:
-    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
-    hasBin: true
-    dev: true
+      vue: 3.5.35(typescript@5.9.3)
 
   /magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
-    dev: true
 
   /magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
     dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
       source-map-js: 1.2.1
     dev: true
 
@@ -6467,99 +4498,15 @@ packages:
       semver: 7.7.3
     dev: true
 
-  /markdown-extensions@2.0.0:
-    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
-    engines: {node: '>=16'}
-    dev: false
+  /mark.js@8.11.1:
+    resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
+    dev: true
 
   /math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
     dev: true
 
-  /mdast-util-from-markdown@2.0.2:
-    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
-    dependencies:
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      decode-named-character-reference: 1.2.0
-      devlop: 1.1.0
-      mdast-util-to-string: 4.0.0
-      micromark: 4.0.2
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-decode-string: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-      unist-util-stringify-position: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /mdast-util-mdx-expression@2.0.1:
-    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.2
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /mdast-util-mdx-jsx@3.2.0:
-    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      ccount: 2.0.1
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.2
-      mdast-util-to-markdown: 2.1.2
-      parse-entities: 4.0.2
-      stringify-entities: 4.0.4
-      unist-util-stringify-position: 4.0.0
-      vfile-message: 4.0.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /mdast-util-mdx@3.0.0:
-    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
-    dependencies:
-      mdast-util-from-markdown: 2.0.2
-      mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.2.0
-      mdast-util-mdxjs-esm: 2.0.1
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /mdast-util-mdxjs-esm@2.0.1:
-    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.2
-      mdast-util-to-markdown: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /mdast-util-phrasing@4.1.0:
-    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
-    dependencies:
-      '@types/mdast': 4.0.4
-      unist-util-is: 6.0.1
-    dev: false
-
   /mdast-util-to-hast@13.2.1:
     resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
     dependencies:
@@ -6572,27 +4519,7 @@ packages:
       unist-util-position: 5.0.0
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-    dev: false
-
-  /mdast-util-to-markdown@2.1.2:
-    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
-    dependencies:
-      '@types/mdast': 4.0.4
-      '@types/unist': 3.0.3
-      longest-streak: 3.1.0
-      mdast-util-phrasing: 4.1.0
-      mdast-util-to-string: 4.0.0
-      micromark-util-classify-character: 2.0.1
-      micromark-util-decode-string: 2.0.1
-      unist-util-visit: 5.0.0
-      zwitch: 2.0.4
-    dev: false
-
-  /mdast-util-to-string@4.0.0:
-    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
-    dependencies:
-      '@types/mdast': 4.0.4
-    dev: false
+    dev: true
 
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -6601,220 +4528,18 @@ packages:
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: true
-
-  /micromark-core-commonmark@2.0.3:
-    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
-    dependencies:
-      decode-named-character-reference: 1.2.0
-      devlop: 1.1.0
-      micromark-factory-destination: 2.0.1
-      micromark-factory-label: 2.0.1
-      micromark-factory-space: 2.0.1
-      micromark-factory-title: 2.0.1
-      micromark-factory-whitespace: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.1
-      micromark-util-classify-character: 2.0.1
-      micromark-util-html-tag-name: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-subtokenize: 2.1.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-extension-mdx-expression@3.0.1:
-    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      micromark-factory-mdx-expression: 2.0.3
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-extension-mdx-jsx@3.0.2:
-    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
-      micromark-factory-mdx-expression: 2.0.3
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-      vfile-message: 4.0.3
-    dev: false
-
-  /micromark-extension-mdx-md@2.0.0:
-    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
-    dependencies:
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-extension-mdxjs-esm@3.0.0:
-    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.3
-      micromark-util-character: 2.1.1
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-      unist-util-position-from-estree: 2.0.0
-      vfile-message: 4.0.3
-    dev: false
-
-  /micromark-extension-mdxjs@3.0.0:
-    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      micromark-extension-mdx-expression: 3.0.1
-      micromark-extension-mdx-jsx: 3.0.2
-      micromark-extension-mdx-md: 2.0.0
-      micromark-extension-mdxjs-esm: 3.0.0
-      micromark-util-combine-extensions: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-factory-destination@2.0.1:
-    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-factory-label@2.0.1:
-    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-factory-mdx-expression@2.0.3:
-    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
-    dependencies:
-      '@types/estree': 1.0.8
-      devlop: 1.1.0
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-events-to-acorn: 2.0.3
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-      unist-util-position-from-estree: 2.0.0
-      vfile-message: 4.0.3
-    dev: false
-
-  /micromark-factory-space@2.0.1:
-    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-factory-title@2.0.1:
-    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-factory-whitespace@2.0.1:
-    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
-    dependencies:
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-util-character@2.1.1:
-    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
-    dependencies:
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-util-chunked@2.0.1:
-    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
-    dependencies:
-      micromark-util-symbol: 2.0.1
-    dev: false
-
-  /micromark-util-classify-character@2.0.1:
-    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
-    dependencies:
-      micromark-util-character: 2.1.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-util-combine-extensions@2.0.1:
-    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
-    dependencies:
-      micromark-util-chunked: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
-
-  /micromark-util-decode-numeric-character-reference@2.0.2:
-    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
-    dependencies:
-      micromark-util-symbol: 2.0.1
-    dev: false
-
-  /micromark-util-decode-string@2.0.1:
-    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
-    dependencies:
-      decode-named-character-reference: 1.2.0
-      micromark-util-character: 2.1.1
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-symbol: 2.0.1
-    dev: false
-
-  /micromark-util-encode@2.0.1:
-    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
-    dev: false
-
-  /micromark-util-events-to-acorn@2.0.3:
-    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/unist': 3.0.3
-      devlop: 1.1.0
-      estree-util-visit: 2.0.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-      vfile-message: 4.0.3
-    dev: false
-
-  /micromark-util-html-tag-name@2.0.1:
-    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
-    dev: false
-
-  /micromark-util-normalize-identifier@2.0.1:
-    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
-    dependencies:
-      micromark-util-symbol: 2.0.1
-    dev: false
+    dev: true
 
-  /micromark-util-resolve-all@2.0.1:
-    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+  /micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
     dependencies:
+      micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
-    dev: false
+    dev: true
+
+  /micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+    dev: true
 
   /micromark-util-sanitize-uri@2.0.1:
     resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
@@ -6822,48 +4547,15 @@ packages:
       micromark-util-character: 2.1.1
       micromark-util-encode: 2.0.1
       micromark-util-symbol: 2.0.1
-    dev: false
-
-  /micromark-util-subtokenize@2.1.0:
-    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
-    dependencies:
-      devlop: 1.1.0
-      micromark-util-chunked: 2.0.1
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    dev: false
+    dev: true
 
   /micromark-util-symbol@2.0.1:
     resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
-    dev: false
+    dev: true
 
   /micromark-util-types@2.0.2:
     resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
-    dev: false
-
-  /micromark@4.0.2:
-    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
-    dependencies:
-      '@types/debug': 4.1.12
-      debug: 4.4.3
-      decode-named-character-reference: 1.2.0
-      devlop: 1.1.0
-      micromark-core-commonmark: 2.0.3
-      micromark-factory-space: 2.0.1
-      micromark-util-character: 2.1.1
-      micromark-util-chunked: 2.0.1
-      micromark-util-combine-extensions: 2.0.1
-      micromark-util-decode-numeric-character-reference: 2.0.2
-      micromark-util-encode: 2.0.1
-      micromark-util-normalize-identifier: 2.0.1
-      micromark-util-resolve-all: 2.0.1
-      micromark-util-sanitize-uri: 2.0.1
-      micromark-util-subtokenize: 2.1.0
-      micromark-util-symbol: 2.0.1
-      micromark-util-types: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
+    dev: true
 
   /micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
@@ -6900,22 +4592,18 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /min-indent@1.0.1:
-    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
-    engines: {node: '>=4'}
-    dev: true
-
-  /minimatch@3.1.2:
-    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+  /minimatch@10.2.3:
+    resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
+    engines: {node: 18 || 20 || >=22}
     dependencies:
-      brace-expansion: 1.1.12
+      brace-expansion: 5.0.6
     dev: true
 
-  /minimatch@9.0.3:
-    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  /minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
     dependencies:
-      brace-expansion: 2.0.2
+      brace-expansion: 5.0.6
     dev: true
 
   /minimatch@9.0.5:
@@ -6925,15 +4613,18 @@ packages:
       brace-expansion: 2.0.2
     dev: true
 
-  /minimist@1.2.8:
-    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: true
-
   /minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
     dev: true
 
+  /minisearch@7.2.0:
+    resolution: {integrity: sha512-dqT2XBYUOZOiC5t2HRnwADjhNS2cecp9u+TJRiJ1Qp/f5qjkeT5APcGPjHw+bz89Ms8Jp+cG4AlE+QZ/QnDglg==}
+    dev: true
+
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   /mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
     dependencies:
@@ -6945,6 +4636,11 @@ packages:
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: true
+
+  /muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+    dev: true
 
   /mute-stream@1.0.0:
     resolution: {integrity: sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==}
@@ -6970,74 +4666,20 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  /napi-postinstall@0.3.4:
-    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
-    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
-    hasBin: true
-    dev: true
-
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /next-themes@0.2.1(next@15.5.18)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
-    peerDependencies:
-      next: '*'
-      react: '*'
-      react-dom: '*'
-    dependencies:
-      next: 15.5.18(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    dev: false
+  /node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+    dev: true
 
-  /next@15.5.18(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.0)(react@19.2.0):
-    resolution: {integrity: sha512-eKL8zUJkX9Y5lE+RX/2YJoItVdGlIscyVyboeD9wSpp0PaGqjoA4tTpT2qPqz9ax+5IzGESyLSeZ/RCwbSZ2uQ==}
-    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+  /nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.51.1
-      babel-plugin-react-compiler: '*'
-      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
-      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      '@playwright/test':
-        optional: true
-      babel-plugin-react-compiler:
-        optional: true
-      sass:
-        optional: true
     dependencies:
-      '@next/env': 15.5.18
-      '@swc/helpers': 0.5.15
-      babel-plugin-react-compiler: 1.0.0
-      caniuse-lite: 1.0.30001757
-      postcss: 8.4.31
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      styled-jsx: 5.1.6(react@19.2.0)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 15.5.18
-      '@next/swc-darwin-x64': 15.5.18
-      '@next/swc-linux-arm64-gnu': 15.5.18
-      '@next/swc-linux-arm64-musl': 15.5.18
-      '@next/swc-linux-x64-gnu': 15.5.18
-      '@next/swc-linux-x64-musl': 15.5.18
-      '@next/swc-win32-arm64-msvc': 15.5.18
-      '@next/swc-win32-x64-msvc': 15.5.18
-      sharp: 0.34.5
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-    dev: false
-
-  /node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+      abbrev: 2.0.0
     dev: true
 
   /normalize-path@3.0.0:
@@ -7057,6 +4699,12 @@ packages:
       path-key: 4.0.0
     dev: true
 
+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
   /nwsapi@2.2.22:
     resolution: {integrity: sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==}
     dev: true
@@ -7071,72 +4719,9 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /object-inspect@1.13.4:
-    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /object-keys@1.1.1:
-    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
-    engines: {node: '>= 0.4'}
-    dev: true
-
-  /object.assign@4.1.7:
-    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-      has-symbols: 1.1.0
-      object-keys: 1.1.1
-    dev: true
-
-  /object.entries@1.1.9:
-    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-    dev: true
-
-  /object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-    dev: true
-
-  /object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-    dev: true
-
-  /object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-    dev: true
-
-  /once@1.4.0:
-    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
-    dependencies:
-      wrappy: 1.0.2
-    dev: true
+  /ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+    dev: false
 
   /onetime@5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@@ -7159,6 +4744,14 @@ packages:
       mimic-function: 5.0.1
     dev: false
 
+  /oniguruma-to-es@3.1.1:
+    resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
+    dependencies:
+      emoji-regex-xs: 1.0.0
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+    dev: true
+
   /optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -7201,15 +4794,6 @@ packages:
       strip-ansi: 7.1.2
     dev: false
 
-  /own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      get-intrinsic: 1.3.0
-      object-keys: 1.1.1
-      safe-push-apply: 1.0.0
-    dev: true
-
   /p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -7235,41 +4819,21 @@ packages:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
     dev: true
 
-  /parent-module@1.0.1:
-    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
-    engines: {node: '>=6'}
-    dependencies:
-      callsites: 3.1.0
-    dev: true
-
-  /parse-entities@4.0.2:
-    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
-    dependencies:
-      '@types/unist': 2.0.11
-      character-entities-legacy: 3.0.0
-      character-reference-invalid: 2.0.1
-      decode-named-character-reference: 1.2.0
-      is-alphanumerical: 2.0.1
-      is-decimal: 2.0.1
-      is-hexadecimal: 2.0.1
-    dev: false
-
   /parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
     dependencies:
       entities: 6.0.1
     dev: true
 
+  /path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
     dev: true
 
-  /path-is-absolute@1.0.1:
-    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -7292,11 +4856,6 @@ packages:
       minipass: 7.1.2
     dev: true
 
-  /path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
-    dev: true
-
   /pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
     dev: true
@@ -7309,6 +4868,14 @@ packages:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
     dev: true
 
+  /pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+    dev: true
+
+  /perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
   /picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -7322,6 +4889,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+    dev: true
+
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
@@ -7340,9 +4912,12 @@ packages:
       pathe: 2.0.3
     dev: true
 
-  /possible-typed-array-names@1.1.0:
-    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
-    engines: {node: '>= 0.4'}
+  /pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
     dev: true
 
   /postcss-import@15.1.0(postcss@8.5.6):
@@ -7408,19 +4983,18 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.12
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-    dev: false
-
   /postcss@8.5.15:
     resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -7428,7 +5002,6 @@ packages:
       nanoid: 3.3.12
       picocolors: 1.1.1
       source-map-js: 1.2.1
-    dev: true
 
   /postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
@@ -7439,20 +5012,15 @@ packages:
       source-map-js: 1.2.1
     dev: true
 
+  /preact@10.29.2:
+    resolution: {integrity: sha512-7tNmwg/7mzzAoB/8kSg6Hl37JraAZw3Z3A0JSY7VXlZwo82Xn0G7wKbNNs2qoF4ZEEsQGTwDAroNdqKs1ofJxQ==}
+    dev: true
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /pretty-format@27.5.1:
-    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    dependencies:
-      ansi-regex: 5.0.1
-      ansi-styles: 5.2.0
-      react-is: 17.0.2
-    dev: true
-
   /pretty-format@29.7.0:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -7462,22 +5030,12 @@ packages:
       react-is: 18.3.1
     dev: true
 
-  /prop-types@15.8.1:
-    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
-    dependencies:
-      loose-envify: 1.4.0
-      object-assign: 4.1.1
-      react-is: 16.13.1
-    dev: true
-
   /property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
-    dev: false
+    dev: true
 
-  /psl@1.15.0:
-    resolution: {integrity: sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==}
-    dependencies:
-      punycode: 2.3.1
+  /proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
     dev: true
 
   /punycode@2.3.1:
@@ -7485,262 +5043,84 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+  /quansync@0.2.11:
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
     dev: true
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
-  /react-day-picker@9.11.3(react@19.2.0):
-    resolution: {integrity: sha512-7lD12UvGbkyXqgzbYIGQTbl+x29B9bAf+k0pP5Dcs1evfpKk6zv4EdH/edNc8NxcmCiTNXr2HIYPrSZ3XvmVBg==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      '@date-fns/tz': 1.4.1
-      date-fns: 4.1.0
-      date-fns-jalali: 4.1.0-0
-      react: 19.2.0
-    dev: false
-
-  /react-dom@19.2.0(react@19.2.0):
-    resolution: {integrity: sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==}
-    peerDependencies:
-      react: ^19.2.0
-    dependencies:
-      react: 19.2.0
-      scheduler: 0.27.0
-
-  /react-hook-form@7.76.1(react@19.2.0):
-    resolution: {integrity: sha512-rYM7tPiWlu3nZchkR/ex7piyzui2vFPyaLnXnI/RnblB/L4qfMmyses8llJVtF1NpE9WBBsJlGtcSZzPCXW1qQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^16.8.0 || ^17 || ^18 || ^19
-    dependencies:
-      react: 19.2.0
-    dev: false
-
-  /react-is@16.13.1:
-    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: true
-
-  /react-is@17.0.2:
-    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
-    dev: true
-
   /react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
     dev: true
 
-  /react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
-  /react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.0)
-      tslib: 2.8.1
-    dev: false
-
-  /react-remove-scroll@2.7.2(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.7)(react@19.2.0)
-      react-style-singleton: 2.2.3(@types/react@19.2.7)(react@19.2.0)
-      tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.7)(react@19.2.0)
-      use-sidecar: 1.1.3(@types/react@19.2.7)(react@19.2.0)
-    dev: false
-
-  /react-style-singleton@2.2.3(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      get-nonce: 1.0.1
-      react: 19.2.0
-      tslib: 2.8.1
-    dev: false
-
-  /react@19.2.0:
-    resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==}
-    engines: {node: '>=0.10.0'}
-
   /read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
-      pify: 2.3.0
-    dev: true
-
-  /readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
-    engines: {node: '>= 6'}
-    dependencies:
-      inherits: 2.0.4
-      string_decoder: 1.3.0
-      util-deprecate: 1.0.2
-    dev: false
-
-  /readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-    dependencies:
-      picomatch: 2.3.1
-    dev: true
-
-  /readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
-    dev: true
-
-  /recma-build-jsx@1.0.0:
-    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
-    dependencies:
-      '@types/estree': 1.0.8
-      estree-util-build-jsx: 3.0.1
-      vfile: 6.0.3
-    dev: false
-
-  /recma-jsx@1.0.1(acorn@8.15.0):
-    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      estree-util-to-js: 2.0.0
-      recma-parse: 1.0.0
-      recma-stringify: 1.0.0
-      unified: 11.0.5
-    dev: false
-
-  /recma-parse@1.0.0:
-    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
-    dependencies:
-      '@types/estree': 1.0.8
-      esast-util-from-js: 2.0.1
-      unified: 11.0.5
-      vfile: 6.0.3
-    dev: false
+      pify: 2.3.0
+    dev: true
 
-  /recma-stringify@1.0.0:
-    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+  /readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
     dependencies:
-      '@types/estree': 1.0.8
-      estree-util-to-js: 2.0.0
-      unified: 11.0.5
-      vfile: 6.0.3
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
     dev: false
 
-  /redent@3.0.0:
-    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
-    engines: {node: '>=8'}
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
     dependencies:
-      indent-string: 4.0.0
-      strip-indent: 3.0.0
+      picomatch: 2.3.1
     dev: true
 
-  /reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      which-builtin-type: 1.2.1
+  /readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
     dev: true
 
-  /regexp.prototype.flags@1.5.4:
-    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
-    engines: {node: '>= 0.4'}
+  /regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
     dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-errors: 1.3.0
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      set-function-name: 2.0.2
+      regex-utilities: 2.3.0
     dev: true
 
-  /rehype-recma@1.0.0:
-    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
-    dependencies:
-      '@types/estree': 1.0.8
-      '@types/hast': 3.0.4
-      hast-util-to-estree: 3.1.3
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
+  /regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+    dev: true
 
-  /remark-mdx@3.1.1:
-    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+  /regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
     dependencies:
-      mdast-util-mdx: 3.0.0
-      micromark-extension-mdxjs: 3.0.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
+      regex-utilities: 2.3.0
+    dev: true
 
-  /remark-parse@11.0.0:
-    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
-    dependencies:
-      '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.2
-      micromark-util-types: 2.0.2
-      unified: 11.0.5
+  /reka-ui@2.9.8(vue@3.5.35):
+    resolution: {integrity: sha512-7dxaBJ6nQ0zOQZXPV45219tTEgZPstmihBLS9ABPhSiPiJ8SiF0sacfZHFaBptS0v9N4tzsevq+8MNBpE4p5JQ==}
+    peerDependencies:
+      vue: '>= 3.4.0'
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@floating-ui/vue': 1.1.11(vue@3.5.35)
+      '@internationalized/date': 3.12.2
+      '@internationalized/number': 3.6.7
+      '@tanstack/vue-virtual': 3.13.26(vue@3.5.35)
+      '@vueuse/core': 14.3.0(vue@3.5.35)
+      '@vueuse/shared': 14.3.0(vue@3.5.35)
+      aria-hidden: 1.2.6
+      defu: 6.1.7
+      ohash: 2.0.11
+      vue: 3.5.35(typescript@5.9.3)
     transitivePeerDependencies:
-      - supports-color
+      - '@vue/composition-api'
     dev: false
 
-  /remark-rehype@11.1.2:
-    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      mdast-util-to-hast: 13.2.1
-      unified: 11.0.5
-      vfile: 6.0.3
-    dev: false
-
-  /requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-    dev: true
-
-  /resolve-from@4.0.0:
-    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
-    engines: {node: '>=4'}
+  /require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
     dev: true
 
   /resolve-from@5.0.0:
@@ -7748,10 +5128,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /resolve-pkg-maps@1.0.0:
-    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
-    dev: true
-
   /resolve@1.22.11:
     resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
     engines: {node: '>= 0.4'}
@@ -7762,15 +5138,6 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: true
 
-  /resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
-    hasBin: true
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-    dev: true
-
   /restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -7792,13 +5159,8 @@ packages:
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: true
 
-  /rimraf@3.0.2:
-    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-    dependencies:
-      glob: 7.2.3
-    dev: true
+  /rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
   /rimraf@5.0.10:
     resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
@@ -7864,38 +5226,10 @@ packages:
       tslib: 2.8.1
     dev: false
 
-  /safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      has-symbols: 1.1.0
-      isarray: 2.0.5
-    dev: true
-
   /safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: false
 
-  /safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      es-errors: 1.3.0
-      isarray: 2.0.5
-    dev: true
-
-  /safe-regex-test@1.1.0:
-    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-regex: 1.2.1
-    dev: true
-
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
@@ -7906,12 +5240,8 @@ packages:
       xmlchars: 2.2.0
     dev: true
 
-  /scheduler@0.27.0:
-    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
-
-  /semver@6.3.1:
-    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
-    hasBin: true
+  /search-insights@2.17.3:
+    resolution: {integrity: sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==}
     dev: true
 
   /semver@7.7.3:
@@ -7919,74 +5249,14 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     requiresBuild: true
-
-  /set-function-length@1.2.2:
-    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-    dev: true
-
-  /set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.2
     dev: true
 
-  /set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      dunder-proto: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
+  /semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
     dev: true
 
-  /sharp@0.34.5:
-    resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
-    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
-    requiresBuild: true
-    dependencies:
-      '@img/colour': 1.0.0
-      detect-libc: 2.1.2
-      semver: 7.7.3
-    optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.34.5
-      '@img/sharp-darwin-x64': 0.34.5
-      '@img/sharp-libvips-darwin-arm64': 1.2.4
-      '@img/sharp-libvips-darwin-x64': 1.2.4
-      '@img/sharp-libvips-linux-arm': 1.2.4
-      '@img/sharp-libvips-linux-arm64': 1.2.4
-      '@img/sharp-libvips-linux-ppc64': 1.2.4
-      '@img/sharp-libvips-linux-riscv64': 1.2.4
-      '@img/sharp-libvips-linux-s390x': 1.2.4
-      '@img/sharp-libvips-linux-x64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-arm64': 1.2.4
-      '@img/sharp-libvips-linuxmusl-x64': 1.2.4
-      '@img/sharp-linux-arm': 0.34.5
-      '@img/sharp-linux-arm64': 0.34.5
-      '@img/sharp-linux-ppc64': 0.34.5
-      '@img/sharp-linux-riscv64': 0.34.5
-      '@img/sharp-linux-s390x': 0.34.5
-      '@img/sharp-linux-x64': 0.34.5
-      '@img/sharp-linuxmusl-arm64': 0.34.5
-      '@img/sharp-linuxmusl-x64': 0.34.5
-      '@img/sharp-wasm32': 0.34.5
-      '@img/sharp-win32-arm64': 0.34.5
-      '@img/sharp-win32-ia32': 0.34.5
-      '@img/sharp-win32-x64': 0.34.5
-    dev: false
-    optional: true
-
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -7999,44 +5269,17 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-    dev: true
-
-  /side-channel-map@1.0.1:
-    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-    dev: true
-
-  /side-channel-weakmap@1.0.2:
-    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-map: 1.0.1
-    dev: true
-
-  /side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
-    engines: {node: '>= 0.4'}
+  /shiki@2.5.0:
+    resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
     dependencies:
-      es-errors: 1.3.0
-      object-inspect: 1.13.4
-      side-channel-list: 1.0.0
-      side-channel-map: 1.0.1
-      side-channel-weakmap: 1.0.2
+      '@shikijs/core': 2.5.0
+      '@shikijs/engine-javascript': 2.5.0
+      '@shikijs/engine-oniguruma': 2.5.0
+      '@shikijs/langs': 2.5.0
+      '@shikijs/themes': 2.5.0
+      '@shikijs/types': 2.5.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
     dev: true
 
   /siginfo@2.0.0:
@@ -8051,25 +5294,30 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  /slash@3.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
-    engines: {node: '>=8'}
-    dev: true
-
   /source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /source-map@0.7.6:
     resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
     engines: {node: '>= 12'}
+    dev: true
 
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
-    dev: false
+    dev: true
+
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
 
-  /stable-hash@0.0.5:
-    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+  /sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: true
 
   /stackback@0.0.2:
@@ -8085,12 +5333,9 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /stop-iteration-iterator@1.1.0:
-    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      es-errors: 1.3.0
-      internal-slot: 1.1.0
+  /string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
     dev: true
 
   /string-width@4.2.3:
@@ -8119,73 +5364,6 @@ packages:
       strip-ansi: 7.1.2
     dev: false
 
-  /string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-    dev: true
-
-  /string.prototype.matchall@4.0.12:
-    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      regexp.prototype.flags: 1.5.4
-      set-function-name: 2.0.2
-      side-channel: 1.1.0
-    dev: true
-
-  /string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-    dev: true
-
-  /string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-data-property: 1.1.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.0
-      es-object-atoms: 1.1.1
-      has-property-descriptors: 1.0.2
-    dev: true
-
-  /string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-    dev: true
-
-  /string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-    dev: true
-
   /string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
     dependencies:
@@ -8197,7 +5375,7 @@ packages:
     dependencies:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
-    dev: false
+    dev: true
 
   /strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
@@ -8211,62 +5389,22 @@ packages:
     dependencies:
       ansi-regex: 6.2.2
 
-  /strip-bom@3.0.0:
-    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
-    engines: {node: '>=4'}
-    dev: true
-
   /strip-final-newline@3.0.0:
     resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
     engines: {node: '>=12'}
     dev: true
 
-  /strip-indent@3.0.0:
-    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      min-indent: 1.0.1
-    dev: true
-
-  /strip-json-comments@3.1.1:
-    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
-    engines: {node: '>=8'}
-    dev: true
-
   /strip-literal@2.1.1:
     resolution: {integrity: sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==}
     dependencies:
       js-tokens: 9.0.1
     dev: true
 
-  /style-to-js@1.1.21:
-    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
-    dependencies:
-      style-to-object: 1.0.14
-    dev: false
-
-  /style-to-object@1.0.14:
-    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
-    dependencies:
-      inline-style-parser: 0.2.7
-    dev: false
-
-  /styled-jsx@5.1.6(react@19.2.0):
-    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
+  /strip-literal@3.1.0:
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
     dependencies:
-      client-only: 0.0.1
-      react: 19.2.0
-    dev: false
+      js-tokens: 9.0.1
+    dev: true
 
   /sucrase@3.35.1:
     resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
@@ -8282,12 +5420,25 @@ packages:
       ts-interface-checker: 0.1.13
     dev: true
 
+  /superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+    dependencies:
+      copy-anything: 4.0.5
+
   /supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
 
+  /supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -8297,10 +5448,22 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
+  /tabbable@6.4.0:
+    resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
+    dev: true
+
   /tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
     dev: false
 
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.18):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.18
+    dev: true
+
   /tailwindcss@3.4.18:
     resolution: {integrity: sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==}
     engines: {node: '>=14.0.0'}
@@ -8333,17 +5496,13 @@ packages:
       - yaml
     dev: true
 
-  /test-exclude@6.0.0:
-    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
-    engines: {node: '>=8'}
+  /test-exclude@7.0.2:
+    resolution: {integrity: sha512-u9E6A+ZDYdp7a4WnarkXPZOx8Ilz46+kby6p1yZ8zsGTz9gYa6FIS7lj2oezzNKmtdyyJNNmmXDppga5GB7kSw==}
+    engines: {node: '>=18'}
     dependencies:
       '@istanbuljs/schema': 0.1.3
-      glob: 7.2.3
-      minimatch: 3.1.2
-    dev: true
-
-  /text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+      glob: 10.5.0
+      minimatch: 10.2.5
     dev: true
 
   /thenify-all@1.6.0:
@@ -8375,16 +5534,50 @@ packages:
       picomatch: 4.0.3
     dev: true
 
+  /tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+    dev: true
+
   /tinypool@0.8.4:
     resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    dev: true
+
+  /tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
   /tinyspy@2.2.1:
     resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+    dev: true
+
+  /tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+    dependencies:
+      tldts-core: 6.1.86
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -8392,14 +5585,11 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /tough-cookie@4.1.4:
-    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
-    engines: {node: '>=6'}
+  /tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
     dependencies:
-      psl: 1.15.0
-      punycode: 2.3.1
-      universalify: 0.2.0
-      url-parse: 1.5.10
+      tldts: 6.1.86
     dev: true
 
   /tr46@5.1.1:
@@ -8416,23 +5606,10 @@ packages:
 
   /trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
-    dev: false
-
-  /trough@2.2.0:
-    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
-    dev: false
-
-  /ts-api-utils@1.4.3(typescript@5.9.3):
-    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-    dependencies:
-      typescript: 5.9.3
     dev: true
 
-  /ts-api-utils@2.1.0(typescript@5.9.3):
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+  /ts-api-utils@2.5.0(typescript@5.9.3):
+    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
@@ -8444,19 +5621,11 @@ packages:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
-  /tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
-    dev: true
-
   /tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+    dev: false
 
-  /tsup@8.5.1(postcss@8.5.6)(typescript@5.9.3):
+  /tsup@8.5.1(typescript@5.9.3):
     resolution: {integrity: sha512-xtgkqwdhpKWr3tKPmCkvYmS9xnQK3m3XgxZHwSUjvfTjp7YfXe5tT3GgWi0F2N+ZSMsOeWeZFh7ZZFg5iPhing==}
     engines: {node: '>=18'}
     hasBin: true
@@ -8484,7 +5653,6 @@ packages:
       fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss: 8.5.6
       postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)
       resolve-from: 5.0.0
       rollup: 4.53.3
@@ -8523,126 +5691,69 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-    dev: true
-
   /type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
     dev: false
 
-  /typed-array-buffer@1.0.3:
-    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-typed-array: 1.1.15
-    dev: true
-
-  /typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
-    dev: true
-
-  /typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
-      reflect.getprototypeof: 1.0.10
-    dev: true
+  /type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+    dev: false
 
-  /typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      is-typed-array: 1.1.15
-      possible-typed-array-names: 1.1.0
-      reflect.getprototypeof: 1.0.10
+  /typescript-eslint@8.60.0(eslint@10.4.1)(typescript@5.9.3):
+    resolution: {integrity: sha512-9f65qWLZdAW9m1JaxBDUHcqRUfL8bkxxXL7XxEfI+F09q56PkBvIfCjLF3yInsDM/BBmwkqmCQdCZe/RYlIWEw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.60.0(@typescript-eslint/parser@8.60.0)(eslint@10.4.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.60.0(eslint@10.4.1)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.60.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.60.0(eslint@10.4.1)(typescript@5.9.3)
+      eslint: 10.4.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
   /ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
     dev: true
 
-  /unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      has-bigints: 1.1.0
-      has-symbols: 1.1.0
-      which-boxed-primitive: 1.1.1
-    dev: true
-
   /undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  /unified@11.0.5:
-    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
-    dependencies:
-      '@types/unist': 3.0.3
-      bail: 2.0.2
-      devlop: 1.1.0
-      extend: 3.0.2
-      is-plain-obj: 4.1.0
-      trough: 2.2.0
-      vfile: 6.0.3
-    dev: false
-
   /unist-util-is@6.0.1:
     resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
-
-  /unist-util-position-from-estree@2.0.0:
-    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
-    dependencies:
-      '@types/unist': 3.0.3
-    dev: false
+    dev: true
 
   /unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
+    dev: true
 
   /unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
     dependencies:
       '@types/unist': 3.0.3
-    dev: false
+    dev: true
 
   /unist-util-visit-parents@6.0.2:
     resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.1
-    dev: false
+    dev: true
 
   /unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
@@ -8650,44 +5761,11 @@ packages:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.1
       unist-util-visit-parents: 6.0.2
-    dev: false
-
-  /universalify@0.2.0:
-    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
-    engines: {node: '>= 4.0.0'}
     dev: true
 
   /universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
-    dev: false
-
-  /unrs-resolver@1.11.1:
-    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
-    requiresBuild: true
-    dependencies:
-      napi-postinstall: 0.3.4
-    optionalDependencies:
-      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
-      '@unrs/resolver-binding-android-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-x64': 1.11.1
-      '@unrs/resolver-binding-freebsd-x64': 1.11.1
-      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
-      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
-      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
-    dev: true
 
   /update-browserslist-db@1.1.4(browserslist@4.28.0):
     resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
@@ -8706,68 +5784,48 @@ packages:
       punycode: 2.3.1
     dev: true
 
-  /url-parse@1.5.10:
-    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
-    dependencies:
-      querystringify: 2.2.0
-      requires-port: 1.0.0
-    dev: true
-
-  /use-callback-ref@1.3.3(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@types/react': 19.2.7
-      react: 19.2.0
-      tslib: 2.8.1
-    dev: false
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  /use-sidecar@1.1.3(@types/react@19.2.7)(react@19.2.0):
-    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
-    engines: {node: '>=10'}
+  /v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.5.35):
+    resolution: {integrity: sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      '@popperjs/core': ^2.0.0
+      vue: ^3.2.0
     dependencies:
-      '@types/react': 19.2.7
-      detect-node-es: 1.1.0
-      react: 19.2.0
-      tslib: 2.8.1
+      '@popperjs/core': 2.11.8
+      '@types/lodash': 4.17.24
+      '@types/resize-observer-browser': 0.1.11
+      date-fns: 2.30.0
+      date-fns-tz: 2.0.1(date-fns@2.30.0)
+      lodash: 4.18.1
+      vue: 3.5.35(typescript@5.9.3)
+      vue-screen-utils: 1.0.0-beta.13(vue@3.5.35)
     dev: false
 
-  /use-sync-external-store@1.6.0(react@19.2.0):
-    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+  /vee-validate@4.15.1(vue@3.5.35):
+    resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      vue: ^3.4.26
     dependencies:
-      react: 19.2.0
+      '@vue/devtools-api': 7.7.9
+      type-fest: 4.41.0
+      vue: 3.5.35(typescript@5.9.3)
     dev: false
 
-  /util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
   /vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
     dependencies:
       '@types/unist': 3.0.3
       unist-util-stringify-position: 4.0.0
-    dev: false
+    dev: true
 
   /vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
     dependencies:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
-    dev: false
+    dev: true
 
   /vite-node@1.6.1(@types/node@20.19.25):
     resolution: {integrity: sha512-YAXkfvGtuTzwWbDSACdJSg4A4DZiAqckWe90Zapc/sEX3XvHcw1NdurM/6od8J207tSDqNbSsgdCacBgvJKFuA==}
@@ -8791,6 +5849,57 @@ packages:
       - terser
     dev: true
 
+  /vite-node@3.2.4(@types/node@20.19.25):
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 6.4.2(@types/node@20.19.25)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+    dev: true
+
+  /vite-plugin-dts@4.5.4(@types/node@20.19.25)(typescript@5.9.3)(vite@6.4.2):
+    resolution: {integrity: sha512-d4sOM8M/8z7vRXHHq/ebbblfaxENjogAAekcfcDCCwAyvGqnPrc7f4NZbvItS+g4WTgerW0xDwSz5qz11JT3vg==}
+    peerDependencies:
+      typescript: '*'
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      '@microsoft/api-extractor': 7.58.7(@types/node@20.19.25)
+      '@rollup/pluginutils': 5.4.0
+      '@volar/typescript': 2.4.28
+      '@vue/language-core': 2.2.0(typescript@5.9.3)
+      compare-versions: 6.1.1
+      debug: 4.4.3
+      kolorist: 1.8.0
+      local-pkg: 1.2.1
+      magic-string: 0.30.21
+      typescript: 5.9.3
+      vite: 6.4.2(@types/node@20.19.25)
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+    dev: true
+
   /vite@5.4.21(@types/node@20.19.25):
     resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -8830,19 +5939,19 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vite@7.2.6(@types/node@20.19.25):
-    resolution: {integrity: sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  /vite@6.4.2(@types/node@20.19.25):
+    resolution: {integrity: sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': ^20.19.0 || >=22.12.0
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
       jiti: '>=1.21.0'
-      less: ^4.0.0
+      less: '*'
       lightningcss: ^1.21.0
-      sass: ^1.70.0
-      sass-embedded: ^1.70.0
-      stylus: '>=0.54.8'
-      sugarss: ^5.0.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
       terser: ^5.16.0
       tsx: ^4.8.1
       yaml: ^2.4.2
@@ -8872,16 +5981,75 @@ packages:
     dependencies:
       '@types/node': 20.19.25
       esbuild: 0.25.12
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
       postcss: 8.5.15
       rollup: 4.53.3
-      tinyglobby: 0.2.15
+      tinyglobby: 0.2.17
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
 
-  /vitest@1.6.1(@types/node@20.19.25)(jsdom@24.1.3):
+  /vitepress@1.6.4(@algolia/client-search@5.53.0)(postcss@8.5.6)(search-insights@2.17.3)(typescript@5.9.3):
+    resolution: {integrity: sha512-+2ym1/+0VVrbhNyRoFFesVvBvHAVMZMK0rw60E3X/5349M1GuVdKeazuksqopEdvkKwKGs21Q729jX81/bkBJg==}
+    hasBin: true
+    peerDependencies:
+      markdown-it-mathjax3: ^4
+      postcss: ^8
+    peerDependenciesMeta:
+      markdown-it-mathjax3:
+        optional: true
+      postcss:
+        optional: true
+    dependencies:
+      '@docsearch/css': 3.8.2
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.53.0)(search-insights@2.17.3)
+      '@iconify-json/simple-icons': 1.2.84
+      '@shikijs/core': 2.5.0
+      '@shikijs/transformers': 2.5.0
+      '@shikijs/types': 2.5.0
+      '@types/markdown-it': 14.1.2
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21)(vue@3.5.35)
+      '@vue/devtools-api': 7.7.9
+      '@vue/shared': 3.5.35
+      '@vueuse/core': 12.8.2(typescript@5.9.3)
+      '@vueuse/integrations': 12.8.2(focus-trap@7.8.0)(typescript@5.9.3)
+      focus-trap: 7.8.0
+      mark.js: 8.11.1
+      minisearch: 7.2.0
+      postcss: 8.5.6
+      shiki: 2.5.0
+      vite: 5.4.21(@types/node@20.19.25)
+      vue: 3.5.35(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - lightningcss
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - sass-embedded
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - typescript
+      - universal-cookie
+    dev: true
+
+  /vitest@1.6.1(@types/node@20.19.25):
     resolution: {integrity: sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -8916,7 +6084,6 @@ packages:
       chai: 4.5.0
       debug: 4.4.3
       execa: 8.0.1
-      jsdom: 24.1.3
       local-pkg: 0.5.1
       magic-string: 0.30.21
       pathe: 1.1.2
@@ -8939,6 +6106,148 @@ packages:
       - terser
     dev: true
 
+  /vitest@3.2.4(@types/node@20.19.25)(jsdom@25.0.1):
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 5.2.3
+      '@types/node': 20.19.25
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@6.4.2)
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.3.0
+      jsdom: 25.0.1
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.17
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 6.4.2(@types/node@20.19.25)
+      vite-node: 3.2.4(@types/node@20.19.25)
+      why-is-node-running: 2.3.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+    dev: true
+
+  /vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+    dev: true
+
+  /vue-component-type-helpers@3.3.3:
+    resolution: {integrity: sha512-x4nsFpy5Pe8fqPzp/5vkTPeTTDBpAx4WVtV47Ejt0+2FQrq4pRRsJs7JmYRqMFzTu/LW+pCWEjQ3YVCkPV7f9g==}
+    dev: true
+
+  /vue-demi@0.14.10(vue@3.5.35):
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.5.35(typescript@5.9.3)
+    dev: false
+
+  /vue-eslint-parser@10.4.0(eslint@10.4.1):
+    resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    dependencies:
+      debug: 4.4.3
+      eslint: 10.4.1
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
+      semver: 7.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vue-screen-utils@1.0.0-beta.13(vue@3.5.35):
+    resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.5.35(typescript@5.9.3)
+    dev: false
+
+  /vue-tsc@2.2.12(typescript@5.9.3):
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.9.3)
+      typescript: 5.9.3
+    dev: true
+
+  /vue@3.5.35(typescript@5.9.3):
+    resolution: {integrity: sha512-cx89fnr+0kVGHiNFG6y6s0bdjypJRFNZn6x3WPstNdQR1bi1mbB7h4v5IBGTsPJU3nK1+0Iqj3Zf+hZWMieR4Q==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.5.35
+      '@vue/compiler-sfc': 3.5.35
+      '@vue/runtime-dom': 3.5.35
+      '@vue/server-renderer': 3.5.35(vue@3.5.35)
+      '@vue/shared': 3.5.35
+      typescript: 5.9.3
+
   /w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -8960,6 +6269,7 @@ packages:
   /whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
     dependencies:
       iconv-lite: 0.6.3
     dev: true
@@ -8977,59 +6287,6 @@ packages:
       webidl-conversions: 7.0.0
     dev: true
 
-  /which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-bigint: 1.1.0
-      is-boolean-object: 1.2.2
-      is-number-object: 1.1.1
-      is-string: 1.1.1
-      is-symbol: 1.1.1
-    dev: true
-
-  /which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      call-bound: 1.0.4
-      function.prototype.name: 1.1.8
-      has-tostringtag: 1.0.2
-      is-async-function: 2.1.1
-      is-date-object: 1.1.0
-      is-finalizationregistry: 1.1.1
-      is-generator-function: 1.1.2
-      is-regex: 1.2.1
-      is-weakref: 1.1.1
-      isarray: 2.0.5
-      which-boxed-primitive: 1.1.1
-      which-collection: 1.0.2
-      which-typed-array: 1.1.19
-    dev: true
-
-  /which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      is-map: 2.0.3
-      is-set: 2.0.3
-      is-weakmap: 2.0.2
-      is-weakset: 2.0.4
-    dev: true
-
-  /which-typed-array@1.1.19:
-    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
-    engines: {node: '>= 0.4'}
-    dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      for-each: 0.3.5
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-tostringtag: 1.0.2
-    dev: true
-
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -9079,10 +6336,6 @@ packages:
       strip-ansi: 7.1.2
     dev: true
 
-  /wrappy@1.0.2:
-    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
-
   /ws@8.18.3:
     resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
     engines: {node: '>=10.0.0'}
@@ -9096,6 +6349,11 @@ packages:
         optional: true
     dev: true
 
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
   /xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -9105,10 +6363,6 @@ packages:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
     dev: true
 
-  /yallist@3.1.1:
-    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
-    dev: true
-
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -9124,10 +6378,10 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /zod@4.4.3:
-    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
+  /zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
     dev: false
 
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-    dev: false
+    dev: true
diff --git a/scripts/generate-favicons.js b/scripts/generate-favicons.js
deleted file mode 100644
index 3b3f9bc..0000000
--- a/scripts/generate-favicons.js
+++ /dev/null
@@ -1,57 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-let sharp;
-try {
-    sharp = require('sharp');
-} catch (e) {
-    console.log('❌ Sharp is not installed. Please run:');
-    console.log('   npm install sharp');
-    console.log('\nAlternatively, you can use online tools:');
-    console.log('1. https://realfavicongenerator.net/');
-    console.log('2. https://favicon.io/favicon-converter/');
-    console.log('\nUpload your favicon.svg and download the generated files.');
-    process.exit(1);
-}
-
-const publicDir = path.join(__dirname, '../apps/docs/public');
-const svgPath = path.join(publicDir, 'favicon.svg');
-
-const sizes = [
-    { name: 'favicon-16x16.png', size: 16 },
-    { name: 'favicon-32x32.png', size: 32 },
-    { name: 'apple-touch-icon.png', size: 180 },
-    { name: 'icon-192.png', size: 192 },
-    { name: 'icon-512.png', size: 512 },
-];
-
-async function generateFavicons() {
-    console.log('🎨 Generating favicon PNG files...\n');
-
-    const svgBuffer = fs.readFileSync(svgPath);
-
-    for (const { name, size } of sizes) {
-        const outputPath = path.join(publicDir, name);
-
-        await sharp(svgBuffer).resize(size, size).png().toFile(outputPath);
-
-        console.log(`✅ Generated ${name} (${size}x${size})`);
-    }
-
-    const icoPath = path.join(publicDir, 'favicon.ico');
-    await sharp(svgBuffer).resize(32, 32).png().toFile(icoPath.replace('.ico', '-temp.png'));
-
-    console.log(`✅ Generated favicon.ico (32x32)`);
-
-    console.log('\n🎉 All favicons generated successfully!');
-    console.log('\n📋 Make sure your layout.tsx includes:');
-    console.log(`
-<link rel="icon" href="/favicon.ico" sizes="32x32" />
-<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    `);
-}
-
-generateFavicons().catch(console.error);
diff --git a/vercel.json b/vercel.json
deleted file mode 100644
index 45c1c9b..0000000
--- a/vercel.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "$schema": "https://openapi.vercel.sh/vercel.json",
-    "buildCommand": "pnpm --filter brutx-ui build && pnpm --filter docs build",
-    "installCommand": "pnpm install"
-}