快速开始
标准 NPM 单包发布，内部子路径导出。在 Nuxt 4 中注册模块即可获得组件与 composables 全自动按需导入；在纯 Vue 3 项目中按需显式导入即可。
Nuxt 4 模块
自动导入全部组件、useTheme 与 useToast。
// nuxt.config.ts
export default defineNuxtConfig({
modules: [['@recloudstudio/ui/nuxt', { prefix: '' }]],
css: ['@recloudstudio/ui/style.css']
})
// 任意 .vue 中直接使用，无需 import
;<Button variant="solid">部署集群</Button>Vue 3 显式导入
配合 Vite 或任意构建工具使用。
# 安装
bun add @recloudstudio/ui
// main.ts
import '@recloudstudio/ui/style.css'
// 组件与图标按需导入
import { Button, useToast } from '@recloudstudio/ui'
import { Cloud } from '@recloudstudio/ui/icons'组件总览
按使用场景分组，点击进入每个组件的文档与交互示例。
Design Tokens
通用
表单
Checkbox 复选框布尔开关复选项。Combobox 组合框可搜索的下拉选择。DatePicker 日期选择单日期与日期范围筛选。Editable 行内编辑点击即改的文本。Field / Form 表单布局统一关联标签、说明、错误信息与表单间距。Input 输入框带标签、提示与错误态的文本输入。Label 标签表单控件关联标签。MultiSelect 多选带搜索和标签的多值选择。NumberField 数字输入步进增减数字。PinInput 验证码OTP 分段输入。RadioGroup 单选组带描述的选项组。Rating 评分星级评分组件。SearchInput 搜索框带图标、清空、加载、快捷键与联想结果下拉的通用前端搜索框。Select 选择器无障碍下拉选择。Slider 滑块单值/区间滑动输入。Switch 开关即时生效的切换开关。TagInput 标签输入可添加、删除与粘贴多个标签。Textarea 文本域多行文本输入。Toggle / ToggleGroup按压态工具按钮与分组。
数据展示
导航
浮层反馈
文档排版
AnchorHeading 锚点标题悬停显现锚点符号并支持复制链接的标题。Callout 提示块注意、提示、警告、危险语义提示块。CodeGroup 代码分组多包管理器与多语言代码块选项卡容器。InlineCode 行内代码与 CodeBlock 成套的等宽行内代码标记，可选一键复制。Markdown 渲染系统面向开发者文档的受控 Markdown/GFM 与扩展指令渲染器。NavTree 文档树侧栏带分组、折叠、徽标与实时过滤的文档树侧栏。PrevNext 翻页导航文章与文档的上一篇/下一篇双向卡片导航。Steps 文档步骤长文指南与安装教程的垂直序列步骤。Toc 页内目录多级标题目录导航，支持滚动高亮与平滑跳转。