Glass Orb Toggle

玻璃球切换

玻璃球体在轨道上滑动，露出 Dark 或 Light。

Mode: Dark

交互方式

点击轨道，玻璃球弹簧滑到另一侧，内部的月亮与太阳交叉淡化。示例接入全站主题。

使用示例

"use client"
import { useState } from "react"
import { GlassOrbToggle } from "@/components/ui/glass-orb-toggle"

export function Demo() {
  const [theme, setTheme] = useState<"light" | "dark">("light")
  return <GlassOrbToggle value={theme} onValueChange={setTheme} />
}

参数

参数	类型 / 默认值	说明
`value`	`"light" \| "dark"`	受控主题。不传时组件自己记住状态。
`defaultValue`	`"light" \| "dark"`"light"	未传 value 时的初始状态。
`onValueChange`	`(theme: "light" \| "dark") => void`	切换后调用，可用于同步全站主题。
`className`	`string`	附加到外层的类名。
`disabled`	`boolean`	禁用点击。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxmotiontailwind-merge

components/ui/glass-orb-toggle.css
components/ui/glass-orb-toggle.tsx
lib/utils.ts

来源

https://github.com/palakonweb/Rewamp-UI — src/components/ui/GlassOrbToggle.tsx（仓库未声明许可证，按原实现保留）