像素風介面組

一個元件、三個子元件：PixelUiKit 是容器，負責尺寸與主色（寫入 --wb-pixel-accent），底下以靜態屬性掛上 PixelUiKit.Card、PixelUiKit.Button 與 PixelUiKit.Progress。所有像素邊框都不用圖片，而是用多重 box-shadow 往四邊各推一格、四角留空，形成步進的鋸齒圓角；卡片滑過會「跳一格」，按鈕按下會硬切下沉，進度條則一格一格亮起。字型交給你的站決定，元件只用 font-mono。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<PixelUiKit/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/pixel-ui-kit.json

使用

import { PixelUiKit } from "@/components/ui/pixel-ui-kit";

const [days, setDays] = React.useState(3);

<PixelUiKit size="md" accent="#22c55e">
  <PixelUiKit.Card title="第 1 關">
    <p>每日簽到 {days}/5</p>
    <PixelUiKit.Progress value={(days / 5) * 100} label="簽到進度" striped />
    <PixelUiKit.Button variant="secondary" onClick={() => setDays((d) => Math.min(5, d + 1))}>
      ＋1
    </PixelUiKit.Button>
    <PixelUiKit.Button variant="primary" disabled={days < 5}>
      領取獎勵
    </PixelUiKit.Button>
  </PixelUiKit.Card>
</PixelUiKit>

Props

PixelUiKit

PixelUiKit.Card

PixelUiKit.Button

PixelUiKit.Progress

CSS 變數

細節

• 步進邊框：上下左右四道 box-shadow 各推出一格 --wb-pixel-size，四角刻意留空，就成了像素遊戲常見的缺角外框；卡片另加一層往右下偏兩格的深色投影。
• 卡片滑過時以 steps(2) 往上位移一格——瞬間跳格而不是平滑滑動；按住時回到原位。
• 按鈕底部有兩格厚的底邊；按下時以 steps(1) 硬切：整顆下沉兩格、底邊厚度歸零，上緣位置不變，看起來像按鍵被壓進去。
• 進度條把 0–100 分成 segments 格，每格以「0 秒過渡＋遞增延遲」逐格亮起或熄滅，間隔為 --wb-pixel-step；striped 開啟時已填格會有 steps(4) 循環的條紋。
• 線條、底色與投影色以 CSS 變數在容器上依亮暗色設定，子元件自動跟上主題。

可及性

• PixelUiKit.Button 是真正的 <button>，預設 type="button"；鍵盤 focus 時顯示 2px 像素虛線外框
• 卡片有標題時以 aria-labelledby 關聯標題列
• PixelUiKit.Progress 為 role="progressbar"，帶 aria-label、aria-valuenow、aria-valuemin、aria-valuemax 與 aria-valuetext；色彩之外另顯示文字百分比
• 使用者系統開啟「減少動態效果」時，卡片滑過不跳格、進度條直接填到目標值、不播放條紋動畫