Astromer

從可操作的範例開始，確認狀態與樣式，再把元件帶進自己的 Astro 專案。

快速導覽

Start here

先用 3 分鐘摸清 Astromer

如果你是第一次進來，先走完這三步，比直接翻完整文件更快進入可實作狀態。

×

1. 確認安裝前提

   Node.js、Astro 版本與 styles 引入方式先對齊，避免一開始就卡在環境問題。

2. 直接看互動元件實例

   Playground 可以最快判斷元件密度、狀態與 keyboard 行為是否符合需求。

3. 再回來定主題層級

   等你確認元件方向後，再看 token 與 data-theme，能少走很多重工。

1. 安裝指南先確認 dependencies、styles import 與最小使用方式。2. Dialog Playground直接看 variant、placement、footer actions 和視覺基準。3. 主題設定最後才定 light/dark 與 token 覆寫策略，成本最低。

稍後再看從安裝開始

快速開始

請參閱 安裝指南 與 主題設定。

你也可以直接進入 Playground 檢查元件實際狀態與互動行為。

核心差異

• Astro 原生 — .astro 元件，無需 React/Vue adapter
• Design Tokens — @astromer/tokens，light-dark() 雙模式
• 無障礙 — 原生語意元素 + 聚焦互動腳本，對齊 WAI-ARIA 模式
• 選用動態回饋 — gpu prop 目前啟用 CSS-based press、scale 或 pointer glow，不代表另一套 WebGPU 渲染後端