使用 112+ 个强大的组件构建精美的 UI

使用 Nuxt UI 和 Nuxt UI Pro 组件更快地构建您的 Vue 或 Nuxt 应用程序。由 Tailwind CSS 和 Reka UI 提供支持,提供响应式和可自定义的组件。

元素

核心 UI 构建块,如按钮、徽章、图标、头像和其他基本界面元素。

警告
一种用于吸引用户注意力的提示框。
undefined preview
头像
一个支持回退和 Nuxt Image 的 img 元素。
undefined preview
头像组
将多个头像堆叠成一组。
undefined preview
徽章
用于表示状态或类别的短文本。
undefined preview
按钮
一个可作为链接或触发操作的按钮元素。
undefined preview
按钮组
将多个类似按钮的元素组合在一起。
undefined preview
日历
一个日历组件,用于选择单个日期、多个日期或日期范围。
undefined preview
聊天提示提交PRO
一个用于提交聊天提示并自动处理状态的按钮。
undefined preview
标签
数值或状态的指示器。
undefined preview
可折叠
一个可折叠元素,用于切换其内容的可见性。
undefined preview
颜色模式头像PRO
一个在浅色和深色模式下具有不同来源的头像。
undefined preview
颜色模式按钮PRO
一个用于在浅色和深色模式之间切换的按钮。
undefined preview
颜色模式图片PRO
一个在亮色和暗色模式下具有不同图片源的图像元素。
undefined preview
颜色模式选择PRO
一个用于在系统、深色和浅色模式之间切换的选择框。
undefined preview
颜色模式开关PRO
一个用于在浅色和深色模式之间切换的开关。
undefined preview
内容搜索按钮PRO
一个预设样式的按钮,用于打开内容搜索模态框。
undefined preview
仪表盘搜索按钮PRO
一个预设样式的按钮,用于打开仪表盘搜索模态框。
undefined preview
仪表盘侧边栏折叠PRO
一个用于在桌面端折叠侧边栏的按钮。
undefined preview
仪表盘侧边栏切换PRO
一个用于在移动设备上切换侧边栏的按钮。
undefined preview
图标
一个用于显示 Iconify 中任何图标的组件。
undefined preview
Kbd
一个用于显示键盘按键的 kbd 元素。
undefined preview
语言环境选择PRO
一个用于切换语言环境的选择框。
undefined preview
进度条
一个显示任务进度的指示器。
undefined preview

表单

交互式表单元素,包括输入框、选择框、复选框、单选按钮和高级表单验证组件。

认证表单PRO
一个可自定义的表单,用于创建登录、注册或密码重置表单。
undefined preview
聊天提示PRO
一个增强型文本区域,用于在 AI 聊天界面中提交提示。
undefined preview
复选框
一个用于在选中和未选中状态之间切换的输入元素。
undefined preview
复选框组
一组复选按钮,用于从列表中选择多个选项。
undefined preview
颜色选择器
一个用于选择颜色的组件。
undefined preview
文件上传
一个用于上传文件的输入元素。
undefined preview
表单
一个具有内置验证和提交处理功能的表单组件。
undefined preview
表单字段
一个用于表单元素的包装器,提供验证和错误处理。
undefined preview
输入框
一个用于输入文本的输入元素。
undefined preview
输入菜单
一个具有实时建议的自动完成输入框。
undefined preview
数字输入框
一个用于输入数值并可自定义范围的输入组件。
undefined preview
标签输入框
一个显示交互式标签的输入元素。
undefined preview
PIN码输入框
一个用于输入 PIN 码的输入元素。
undefined preview
单选框组
一组单选按钮,用于从列表中选择单个选项。
undefined preview
选择框
一个用于从选项列表中选择的 select 元素。
undefined preview
选择菜单
一个高级可搜索的选择元素。
undefined preview
滑块
一个用于在范围内选择数值的输入框。
undefined preview
开关
一个在两种状态之间切换的控件。
undefined preview
文本区域
一个用于输入多行文本的文本区域元素。
undefined preview

数据

用于显示和管理数据的组件,包括表格、列表、卡片、数据网格和可视化元素。

手风琴
一组堆叠的可折叠面板。
undefined preview
博客文章PRO
一个可自定义的文章,用于在博客页面中显示。
undefined preview
轮播
一个使用 Embla 构建的带动画和滑动的轮播。
undefined preview
更新日志版本PRO
一个可自定义的文章,用于在更新日志中显示。
undefined preview
聊天消息PRO
显示带有图标、头像和操作的聊天消息。
undefined preview
页面手风琴PRO
一个预设样式的手风琴组件,用于在您的页面中显示。
undefined preview
页面卡片PRO
一个预设样式的卡片组件,显示标题、描述和可选链接。
undefined preview
页面CTAPRO
在您的页面中显示行动号召区块。
undefined preview
页面特性PRO
一个用于展示应用程序主要特性的组件。
undefined preview
页面头部PRO
一个用于您页面的响应式头部。
undefined preview
页面英雄区PRO
一个用于您页面的响应式英雄区。
undefined preview
页面标志PRO
一个用于在您的页面上显示标志或图片的列表。
undefined preview
页面跑马灯PRO
一个用于创建无限滚动内容的组件。
undefined preview
页面章节PRO
一个用于您页面的响应式章节。
undefined preview
定价计划PRO
一个可自定义的定价计划,用于在定价页面中显示。
undefined preview
定价表格PRO
一个响应式定价表格组件,显示分层定价计划及功能比较。
undefined preview
表格
一个用于在行和列中显示数据的响应式表格元素。
undefined preview
时间轴
一个显示带有日期、标题、图标或头像的事件序列的组件。
undefined preview
一个用于显示和交互分层数据结构的树形视图组件。
undefined preview
用户PRO
显示带有姓名、描述和头像的用户信息。
undefined preview

导航

用于用户导航和寻路的组件,包括菜单、面包屑、分页和导航栏。

浮层

浮动 UI 元素,如模态框、对话框、工具提示、气泡框以及其他覆盖主内容的组件。

内容搜索PRO
一个随时可用的命令面板,可添加到您的文档中。
undefined preview
上下文菜单
一个用于在元素上右键单击时显示操作的菜单。
undefined preview
仪表盘搜索PRO
一个随时可用的命令面板,可添加到您的仪表盘中。
undefined preview
抽屉
一个平滑地滑入和滑出屏幕的抽屉。
undefined preview
下拉菜单
一个用于在点击元素时显示操作的菜单。
undefined preview
模态框
一个可用于显示消息或请求用户输入的对话窗口。
undefined preview
气泡框
一个非模态对话框,围绕触发元素浮动。
undefined preview
侧滑弹窗
一个从屏幕任何一侧滑入的对话框。
undefined preview
提示
一条简洁的消息,向用户提供信息或反馈。
undefined preview
工具提示
一个在悬停在元素上时显示信息的弹出框。
undefined preview

布局

用于组织内容的结构组件,包括容器、网格、分隔符和响应式布局系统。

应用
包装您的应用以提供全局配置等功能。
undefined preview
横幅PRO
在您网站顶部显示横幅,通知用户重要信息。
undefined preview
博客文章列表PRO
在响应式网格布局中显示博客文章列表。
undefined preview
卡片
在卡片中显示内容,包含头部、主体和底部。
undefined preview
更新日志版本列表PRO
在时间轴中显示更新日志版本列表。
undefined preview
聊天消息列表PRO
显示聊天消息列表,旨在与 Vercel AI SDK 无缝协作。
undefined preview
容器
容器允许您居中并限制内容的宽度。
undefined preview
仪表盘组PRO
一个固定布局组件,为仪表盘组件提供上下文,并支持侧边栏状态管理和持久化。
undefined preview
仪表盘导航栏PRO
一个用于在仪表盘中显示的响应式导航栏。
undefined preview
仪表盘面板PRO
一个可在仪表盘中显示的,可调整大小的面板。
undefined preview
仪表盘调整大小句柄PRO
一个用于调整侧边栏或面板大小的句柄。
undefined preview
仪表盘侧边栏PRO
一个可调整大小和可折叠的侧边栏,用于在仪表盘中显示。
undefined preview
仪表盘工具栏PRO
一个用于在仪表盘导航栏下方显示的工具栏。
undefined preview
错误PRO
一个预构建的错误组件,支持 NuxtError。
undefined preview
页脚PRO
一个响应式页脚组件。
undefined preview
头部PRO
一个响应式头部组件。
undefined preview
主要内容PRO
一个填满可用视口高度的主元素。
undefined preview
页面PRO
一个带有左右列的页面网格布局。
undefined preview
页面侧边栏PRO
一个用于显示页面导航的固定侧边栏。
undefined preview
页面主体PRO
您页面的主要内容。
undefined preview
页面列PRO
一个响应式多列布局系统,用于并排组织内容。
undefined preview
页面网格PRO
一个响应式网格系统,用于以灵活布局显示内容。
undefined preview
页面列表PRO
一个垂直列表布局,用于以堆叠格式显示内容。
undefined preview
定价计划列表PRO
在响应式网格布局中显示定价计划列表。
undefined preview
分隔符
水平或垂直分隔内容。
undefined preview
骨架屏
内容加载时显示的占位符。
undefined preview