元件總覽

從一個按鈕到完整頁面，依照你正在製作的功能挑選元件。每個名稱都連到使用範例與 API 文件；匯入路徑收在「開發資訊」中。

先試試基本元件

這些是真實元件，會跟著上方調色盤與亮暗模式一起切換。

操作按鈕查看 Button

文字輸入Input 使用方式

狀態標籤

設計中已完成

Badge 使用方式

觸發操作

讓使用者清楚知道可以做什麼，以及下一步在哪裡。

Button穩定
執行主要操作，或將使用者帶往下一步。
開發資訊：Button
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Button.astro
ButtonGroup穩定
將同一情境的多個操作並排或垂直排列。
開發資訊：ButtonGroup
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/ButtonGroup.astro

填寫與選擇

收集輸入、選項與檔案，組成完整表單。

狀態與回饋

說明目前狀態、處理進度與操作結果。

ToastProvider穩定
提供全站通知，回報儲存完成或操作結果。
開發資訊：ToastProvider
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/ToastProvider.astro
Loader穩定
在尚無確定進度時，告知使用者作業正在進行。
開發資訊：Loader
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Loader.astro
ProgressBar穩定
呈現作業完成比例，或持續處理中的狀態。
開發資訊：ProgressBar
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/ProgressBar.astro
Badge穩定
用短標籤標示狀態、分類或附加資訊。
開發資訊：Badge
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Badge.astro
AnnouncementBar穩定
在頁面上方顯示公告，並可提供關閉操作。
開發資訊：AnnouncementBar
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/AnnouncementBar.astro
EmptyContent穩定
說明為何沒有內容，並提供恢復或探索入口。
開發資訊：EmptyContent
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/EmptyContent.astro
Poll穩定
提供單題投票與選擇性的結果比例。
開發資訊：Poll
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/Poll.astro

在頁面、層級與內容面板之間移動。

Breadcrumbs穩定
顯示目前頁面所在層級，方便返回上層。
開發資訊：Breadcrumbs
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Breadcrumbs.astro
Pagination穩定
在分頁內容間移動，保留可直接開啟的頁面連結。
開發資訊：Pagination
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Pagination.astro
Tabs穩定
在同一頁切換相關內容面板。
開發資訊：Tabs
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Tabs.astro
NavMenu穩定
建立包含品牌、主連結與行動入口的網站導覽。
開發資訊：NavMenu
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/NavMenu.astro
Dropdown穩定
將一組目的地收進可展開的連結選單。
開發資訊：Dropdown
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Dropdown.astro
SideMenu穩定
為文件或工作區建立分組的側邊導覽。
開發資訊：SideMenu
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/SideMenu.astro
SkipLinks穩定
讓鍵盤使用者直接跳到主要內容等頁面區域。
開發資訊：SkipLinks
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/SkipLinks.astro
Steps穩定
標示多步驟流程的目前位置與完成狀態。
開發資訊：Steps
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Steps.astro

對話與側邊面板

在保留目前情境的同時，完成確認或次要任務。

Dialog穩定
在目前頁面完成確認、預覽或短流程。
開發資訊：Dialog
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Dialog.astro
Drawer穩定
從頁面側邊或上下開啟次要任務面板。
開發資訊：Drawer
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Drawer.astro

呈現內容與資料

整理文字、商品、紀錄與數值，讓資訊容易掃讀。

Card穩定
包裝摘要、圖片與操作，建立可重用的內容單位。
開發資訊：Card
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Card.astro
Chart穩定
以長條圖比較數值，同時保留可讀取的資料表。
開發資訊：Chart
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Chart.astro
DetailsList穩定
以欄位名稱與數值整理帳戶、訂單或紀錄詳情。
開發資訊：DetailsList
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/DetailsList.astro
Media穩定
將縮圖、標題與說明組成緊湊的內容列。
開發資訊：Media
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Media.astro
Stats穩定
顯示關鍵數字、變化趨勢與補充說明。
開發資訊：Stats
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Stats.astro
Table穩定
比較多筆資料，支援表頭與可捲動的窄螢幕表格。
開發資訊：Table
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Table.astro
Timeline穩定
依序呈現事件、歷程或里程碑。
開發資訊：Timeline
類型
互動與內容元件
成熟度
stable
匯入路徑
@astromer/core/components/Timeline.astro
BlogCard穩定
以圖片、摘要與作者資訊介紹文章。
開發資訊：BlogCard
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/BlogCard.astro
ProductCard穩定
呈現商品圖片、價格與基本資訊。
開發資訊：ProductCard
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/ProductCard.astro

安排版面

從寬度、留白、堆疊與網格建立頁面結構。

Container穩定
限制頁面內容寬度，維持置中與左右留白。
開發資訊：Container
類型
基礎元件
成熟度
stable
匯入路徑
@astromer/core/components/Container.astro
Stack穩定
以一致間距排列水平或垂直內容。
開發資訊：Stack
類型
基礎元件
成熟度
stable
匯入路徑
@astromer/core/components/Stack.astro
Grid穩定
依可用空間建立固定欄數或自動適應的網格。
開發資訊：Grid
類型
基礎元件
成熟度
stable
匯入路徑
@astromer/core/components/Grid.astro
Section穩定
劃分頁面區段，統一背景與上下留白。
開發資訊：Section
類型
基礎元件
成熟度
stable
匯入路徑
@astromer/core/components/Section.astro
Divider穩定
分隔不同內容群組，建立清楚的閱讀節奏。
開發資訊：Divider
類型
基礎元件
成熟度
stable
匯入路徑
@astromer/core/components/Divider.astro

組合頁面區塊

用完整區段組合行銷、文章、服務與商品頁。

建立完整頁面

從儀表板、作品集、商店與客服版型開始組裝。

AnalyticsDashboardLayout穩定
組合側欄、關鍵指標、圖表與活動表格。
開發資訊：AnalyticsDashboardLayout
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/AnalyticsDashboardLayout.astro
PortfolioLayout穩定
建立作品、個人介紹、評價與聯絡頁面。
開發資訊：PortfolioLayout
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/PortfolioLayout.astro
SaaSLandingPageLayout穩定
組合產品首屏、功能、方案與頁尾。
開發資訊：SaaSLandingPageLayout
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/SaaSLandingPageLayout.astro
StorefrontLayout穩定
建立商品列表或商品詳情的商店頁面。
開發資訊：StorefrontLayout
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/StorefrontLayout.astro
SupportInboxLayout穩定
組合客服佇列、對話內容與客戶資訊。
開發資訊：SupportInboxLayout
類型
組合區塊
成熟度
stable
匯入路徑
@astromer/core/components/SupportInboxLayout.astro

元件登錄資訊

本頁列出 registry 中的 69 個項目，成熟度與匯入路徑直接取自套件資料。

Registry schema：2026-07-31。

「穩定」表示已納入目前套件的使用契約；「漸進增強」與「研究中」項目需先閱讀各自的限制。