title: 入门指南 description: 一个快速教程，帮助你开始使用 Reka UI。 name: getting-started ​

入门指南 ​

实现弹出框 ​

在这个快速教程中，我们将安装并设置 弹出框 组件的样式。

1. 安装库 ​

从命令行安装该组件。

$ npm add reka-ui

2. 导入组件 ​

导入并组织各个组件。

<!-- Popover.vue -->
<script setup lang="ts">
import { PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui'
</script>

<template>
  <PopoverRoot>
    <PopoverTrigger>更多信息</PopoverTrigger>
    <PopoverPortal>
      <PopoverContent>
        更多信息...
        <PopoverClose />
        <PopoverArrow />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

3. 添加样式 ​

在需要的地方添加样式。

<template>
  <PopoverRoot>
    <PopoverTrigger class="PopoverTrigger">
      更多信息
    </PopoverTrigger>
    <PopoverPortal>
      <PopoverContent class="PopoverContent">
        更多信息...
        <PopoverClose />
        <PopoverArrow class="PopoverArrow" />
      </PopoverContent>
    </PopoverPortal>
  </PopoverRoot>
</template>

<style>
.PopoverTrigger {
  background-color: white;
  border-radius: 4px;
}

.PopoverContent {
  border-radius: 4px;
  padding: 20px;
  width: 260px;
  background-color: white;
}

.PopoverArrow {
  background-color: white;
}
</style>

演示 ​

这是一个完整的演示。

总结 ​

以上步骤简要概述了在应用程序中使用 Reka UI 所涉及的内容。

这些组件足够底层，让你可以控制如何包装它们。你可以自由引入自己的高级 API，以更好地满足团队和产品的需求。

通过几个简单的步骤，我们实现了一个完全可访问的弹出框组件，而无需担心其许多复杂性。

• 遵循 WAI-ARIA 设计模式。
• 可以是受控的或非受控的。
• 自定义边、对齐、偏移、碰撞处理。
• 可选渲染指向箭头。
• 焦点完全可管理和自定义。
• 关闭和分层行为高度可自定义。

与大语言模型协作 ​

Reka UI 文档针对大语言模型（LLM）进行了优化，帮助你在使用我们的组件时获得 AI 驱动的辅助。

LLM 友好文档 ​

我们的文档包含特殊的 LLM 友好格式，使 AI 助手更容易理解并提供有关 Reka UI 组件的准确帮助。这种格式：

• 移除了可能让 LLM 困惑的视觉元素和复杂格式
• 以针对文本处理优化的方式组织内容
• 以线性格式包含全面的组件信息
• 在保持机器可读的同时，保留所有基本技术细节

访问 LLM 文档 ​

你可以在 llms.txt 访问 LLM 优化版本的文档。此文件包含：

• 所有 Reka UI 组件的完整概述
• 详细的 API 文档
• 使用示例和实现模式
• 可访问性指南
• 样式和自定义选项

在 Reka UI 中使用 LLM ​

在使用 ChatGPT、Claude 或其他 AI 助手等 LLM 时，你可以：

1. 引用 llms.txt 文件：指导你的 AI 助手访问 /llms.txt 文件以获取 Reka UI 的全面上下文
2. 询问具体问题：获取实现、样式或可访问性功能的帮助
3. 生成代码示例：根据你的特定需求请求自定义实现
4. 解决问题：获得常见问题或边缘情况的帮助

示例提示 ​

以下是一些你可以与 LLM 一起使用的示例提示：

"使用 https://reka-ui.com/llms.txt 上的 Reka UI 文档，帮我实现一个带有表单验证的自定义对话框组件。"

"基于 Reka UI llms.txt 文档，向我展示如何创建一个带有自定义样式的可访问选择组件。"

"参考 Reka UI llms.txt 文件，解释如何为组合框组件正确实现键盘导航。"

通过利用我们 LLM 优化的文档，你在使用 Reka UI 组件时可以从 AI 助手那里获得更准确和有用的回应。