漸層產生器
拖曳色停駐點編輯漸層：角度旋鈕、CSS 一鍵複製、預設庫。
大面積即時預覽搭配可拖曳的色停駐點軌道——雙擊軌道新增色點、往下拖離刪除、點按色點開啟系統選色器；角度旋鈕支援線性／放射切換，即時生成 CSS 漸層字串一鍵複製，並內建 6 組精選預設。
載入預覽⋯
安裝
npx shadcn@latest add https://webberui.com/r/gradient-builder.json或在 components.json 設定 registries 後，改用 @webberui/gradient-builder 安裝。
安裝依賴後，從 registry JSON（/r/gradient-builder.json 的 files[0].content）複製 gradient-builder.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import {
GradientBuilder,
gradientToCss,
} from "@/components/ui/gradient-builder";
<GradientBuilder
defaultValue={{
type: "linear",
angle: 135,
stops: [
{ id: "a", color: "#06b6d4", position: 0 },
{ id: "b", color: "#7c3aed", position: 100 },
],
}}
onChange={(value) => console.log(gradientToCss(value))}
/>GradientValue 形如 { type: "linear" | "radial", angle: number, stops: GradientStop[] }，其中每個 GradientStop 為 { id, color, position }。另外匯出 gradientToCss(value) 工具函式與 GRADIENT_PRESETS 內建預設庫，方便在元件之外重用。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | GradientValue | — | 受控模式的漸層值，提供後由外部管理狀態 |
defaultValue | GradientValue | 內建「暮光」漸層 | 非受控模式的初始漸層值 |
onChange | (value: GradientValue) => void | — | 任何編輯（拖曳、選色、轉角度、套預設）時回呼 |
presets | GradientPreset[] | 內建 6 組精選 | 自訂預設庫 |
showPresets | boolean | true | 是否顯示底部預設庫 |
className | string | — | 透傳到外層面板，與內建樣式合併 |
雙擊新增的色點上限為 8 個；剩 2 個色點時不可再刪除，確保漸層永遠有效。
可及性
- 色停駐點與角度旋鈕皆為
role="slider"：色點支援 ←/→ 微調位置（Shift 加速）、Delete／Backspace 刪除；旋鈕支援方向鍵 ±5°（Shift ±15°）與 Home／End - 每個色點內含原生
input type="color"，點按或鍵盤聚焦後即可開啟系統選色器 - 複製按鈕具動態
aria-label（複製 CSS／已複製），成功後圖示切換並於 1.6 秒後復原 - 開啟「減少動態效果」時，彈簧縮放與懸浮動畫停用，拖曳操作本身不受影響