安裝

需求

• Node.js 20+
• Astro 7.0+
• pnpm（建議）或 npm / yarn

安裝前確認

Quick check

先確認這 4 件事

如果你只是想快速接入 Astromer，這個 checklist 比跳去不同頁面讀完整文件更有效率。

×

• 使用 Node.js 20 以上版本
• 專案已經使用 Astro 7 以上版本
• 準備在全域 CSS 或 layout 引入 tokens 與 core styles
• 先從 Button 或 Dialog 這類低耦合元件開始接入

最小可用安裝指令：

pnpm add @astromer/core @astromer/tokens astro@^7

稍後再看接著看主題設定

安裝套件

pnpm add @astromer/core @astromer/tokens astro@^7

引入樣式

在版面或全域 CSS 中引入 token 與元件樣式：

@import "@astromer/tokens";
@import "@astromer/core/styles";

Celestial 是獨立、選用的視覺 Theme。只在要使用它的頁面加入 Theme CSS，並在該頁根元素設定 data-visual-theme="celestial"；既有匯入不需要修改：

@import "@astromer/tokens/themes/celestial";

參考 主題說明 與 Celestial 跨元件示範 查看三種外觀軸如何組合。

使用元件

---
import Button from '@astromer/core/components/Button.astro';
---
<Button variant="solid">按鈕</Button>