---
title: "Nimbus 组件"
description: "在 MDX 文档中直接使用 Nimbus 自带组件，验证样式与客户端交互。"
---

> Documentation Index
> Fetch the complete documentation index at: https://personal-docs-b7b.pages.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Nimbus 组件

这一页展示 **Nimbus 组件接入效果**：提示框、徽章、按钮、可切换标签页和折叠内容。组件源码由 Nimbus 脚手架复制进本仓库（`src/components/ui/`），没有黑盒依赖。

## 提示框

> **说明**
>
> 普通信息提示。
> **技巧**
>
> Astro 组件在构建期渲染，只有交互部分会加载少量脚本。
> **注意**
>
> 第三方 HTML 应放在 sandbox iframe 中。

## 徽章与按钮

快速开始

HTML 交互

## 标签页

### Markdown

用 `.md` 编写普通文档。

### MDX

用 `.mdx` 嵌入 Nimbus 组件。

### HTML

完整 HTML 放在 `public/demos/`，通过 iframe 嵌入。

## 折叠内容

为什么不用 React？

Nimbus 组件都是 Astro 组件，默认零客户端 JavaScript，交互由很小的原生脚本完成。

## 技术边界

- **页面框架**：Astro + Nimbus 负责导航、搜索、路由与目录。
- **正文组件**：Nimbus 自带 Astro 组件（Tailwind + 设计令牌）。
- **静态部署**：文档预渲染为 HTML。
- **完整 HTML**：仍然可以作为独立文件，通过 iframe 嵌入。

## 继续扩展

如果以后需要代码执行、数据库或登录，保留静态文档并增加独立 API 即可，不需要为这些功能迁移现有文档。

Source: https://personal-docs-b7b.pages.dev/examples/vercel-ui/index.mdx