diff --git a/apps/docs/src/components/mode-toggle.tsx b/apps/docs/src/components/mode-toggle.tsx
index 6b4cbe33..072f3fb1 100644
--- a/apps/docs/src/components/mode-toggle.tsx
+++ b/apps/docs/src/components/mode-toggle.tsx
@@ -1,38 +1 @@
-import { useColorMode } from "@kobalte/core"
-
-import { IconLaptop, IconMoon, IconSun } from "~/components/icons"
-import { Button } from "~/registry/ui/button"
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger
-} from "~/registry/ui/dropdown-menu"
-
-export function ModeToggle() {
- const { setColorMode } = useColorMode()
-
- return (
-
- } variant="ghost" size="sm" class="w-9 px-0">
-
-
- Toggle theme
-
-
- setColorMode("light")}>
-
- Light
-
- setColorMode("dark")}>
-
- Dark
-
- setColorMode("system")}>
-
- System
-
-
-
- )
-}
+export { ModeToggle } from "~/registry/ui/mode-toggle"
diff --git a/apps/docs/src/registry/example/mode-toggle.tsx b/apps/docs/src/registry/example/mode-toggle.tsx
index 6bb6ebe4..7911f924 100644
--- a/apps/docs/src/registry/example/mode-toggle.tsx
+++ b/apps/docs/src/registry/example/mode-toggle.tsx
@@ -1,38 +1 @@
-import { useColorMode } from "@kobalte/core"
-
-import { IconLaptop, IconMoon, IconSun } from "~/components/icons"
-import { Button } from "~/registry/ui/button"
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger
-} from "~/registry/ui/dropdown-menu"
-
-export default function ModeToggle() {
- const { setColorMode } = useColorMode()
-
- return (
-
- } variant="ghost" size="sm" class="w-9 px-0">
-
-
- Toggle theme
-
-
- setColorMode("light")}>
-
- Light
-
- setColorMode("dark")}>
-
- Dark
-
- setColorMode("system")}>
-
- System
-
-
-
- )
-}
+export { ModeToggle as default } from "~/registry/ui/mode-toggle"
diff --git a/apps/docs/src/registry/registry-ui.ts b/apps/docs/src/registry/registry-ui.ts
index 0bcc7563..2f99e812 100644
--- a/apps/docs/src/registry/registry-ui.ts
+++ b/apps/docs/src/registry/registry-ui.ts
@@ -313,6 +313,18 @@ export const ui: Registry = [
}
]
},
+ {
+ name: "mode-toggle",
+ type: "ui",
+ dependencies: ["@kobalte/core", "lucide-solid"],
+ registryDependencies: ["button", "dropdown-menu"],
+ files: [
+ {
+ path: "ui/mode-toggle.tsx",
+ type: "ui"
+ }
+ ]
+ },
{
name: "navigation-menu",
type: "ui",
diff --git a/apps/docs/src/registry/ui/mode-toggle.tsx b/apps/docs/src/registry/ui/mode-toggle.tsx
new file mode 100644
index 00000000..d5538ce7
--- /dev/null
+++ b/apps/docs/src/registry/ui/mode-toggle.tsx
@@ -0,0 +1,38 @@
+import { useColorMode } from "@kobalte/core"
+import { Laptop, Moon, Sun } from "lucide-solid"
+
+import { Button } from "~/registry/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from "~/registry/ui/dropdown-menu"
+
+export function ModeToggle() {
+ const { setColorMode } = useColorMode()
+
+ return (
+
+ } variant="ghost" size="sm" class="w-9 px-0">
+
+
+ Toggle theme
+
+
+ setColorMode("light")}>
+
+ Light
+
+ setColorMode("dark")}>
+
+ Dark
+
+ setColorMode("system")}>
+
+ System
+
+
+
+ )
+}
diff --git a/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx b/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx
index f3cfc177..0c16f6e4 100644
--- a/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx
+++ b/apps/docs/src/routes/(app)/docs/dark-mode/solid-start.mdx
@@ -46,17 +46,19 @@ export default function App() {
}
```
-### Add needed components
+### Add a mode toggle
-Make sure you have the `button` and `dropdown-menu` components installed.
+Install the mode toggle (pulls in `button` and `dropdown-menu` automatically) and place it in your layout.
```bash
-npx solidui-cli@latest add button dropdown-menu
+npx solidui-cli@latest add mode-toggle
```
-### Add a mode toggle
+```tsx
+import { ModeToggle } from "~/components/ui/mode-toggle"
+```
-Place a mode toggle on your site to toggle between light and dark mode.
+Place a mode toggle on your site to toggle between light, dark, and system mode.
diff --git a/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx b/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx
index d36e99e2..92b76372 100644
--- a/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx
+++ b/apps/docs/src/routes/(app)/docs/dark-mode/vite.mdx
@@ -37,17 +37,19 @@ export default function App() {
}
```
-### Add needed components
+### Add a mode toggle
-Make sure you have the `button` and `dropdown-menu` components installed.
+Install the mode toggle (pulls in `button` and `dropdown-menu` automatically) and place it in your layout.
```bash
-npx solidui-cli@latest add button dropdown-menu
+npx solidui-cli@latest add mode-toggle
```
-### Add a mode toggle
+```tsx
+import { ModeToggle } from "~/components/ui/mode-toggle"
+```
-Place a mode toggle on your site to toggle between light and dark mode.
+Place a mode toggle on your site to toggle between light, dark, and system mode.