使用 107+ 强大的组件构建漂亮的 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
ChatPromptSubmitPRO
用于提交聊天提示并自动处理状态的按钮。
undefined preview
标签
表示数值或状态的指示器。
undefined preview
可折叠
用于切换其内容可见性的可折叠元素。
undefined preview
ColorModeAvatarPRO
在亮色和暗色模式下具有不同源的头像。
undefined preview
ColorModeButtonPRO
用于在亮色和暗色模式之间切换的按钮。
undefined preview
ColorModeImagePRO
在亮色和暗色模式下具有不同源的图像元素。
undefined preview
ColorModeSelectPRO
用于在系统、暗色和亮色模式之间切换的选择框。
undefined preview
ColorModeSwitchPRO
用于在亮色和暗色模式之间切换的开关。
undefined preview
ContentSearchButtonPRO
用于打开 ContentSearch 模态框的预设样式按钮。
undefined preview
DashboardSearchButtonPRO
用于打开 DashboardSearch 模态框的预设样式按钮。
undefined preview
DashboardSidebarCollapsePRO
用于在桌面端折叠侧边栏的按钮。
undefined preview
DashboardSidebarTogglePRO
用于在移动端切换侧边栏显示状态的按钮。
undefined preview
图标
用于显示 Iconify 中任何图标的组件。
undefined preview
键盘键
用于显示键盘键的 kbd 元素。
undefined preview
LocaleSelectPRO
用于在语言环境之间切换的选择框。
undefined preview
进度
显示任务进度的指示器。
undefined preview

表单

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

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

数据

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

折叠面板
一组堆叠的可折叠面板。
undefined preview
BlogPostPRO
可在博客页面中显示的定制化文章。
undefined preview
轮播
使用 Embla 构建的带有动效和滑动的轮播组件。
undefined preview
ChatMessagePRO
显示带有图标、头像和操作的聊天消息。
undefined preview
PageAccordionPRO
可在页面中显示的预设样式折叠面板。
undefined preview
PageCardPRO
显示标题、描述和可选链接的预设样式卡片组件。
undefined preview
PageCTAPRO
可在页面中显示的行动号召部分。
undefined preview
PageFeaturePRO
用于展示您的应用程序关键功能的组件。
undefined preview
PageHeaderPRO
页面的响应式头部。
undefined preview
PageHeroPRO
页面的响应式英雄区域。
undefined preview
PageLogosPRO
可在页面上显示的标志或图像列表。
undefined preview
PageMarqueePRO
用于创建无限滚动内容的组件。
undefined preview
PageSectionPRO
页面的响应式部分。
undefined preview
PricingPlanPRO
可在定价页面中显示的定制化定价方案。
undefined preview
PricingTablePRO
显示分级定价方案并提供功能比较的响应式定价表格组件。
undefined preview
表格
用于在行和列中显示数据的响应式表格元素。
undefined preview
树状图
用于显示和与分层数据结构交互的树状视图组件。
undefined preview
UserPRO
显示带有姓名、描述和头像的用户信息。
undefined preview

导航

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

叠加层

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

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

布局

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

应用
包裹您的应用以提供全局配置等。
undefined preview
BannerPRO
在网站顶部显示横幅,向用户告知重要信息。
undefined preview
BlogPostsPRO
在响应式网格布局中显示博客文章列表。
undefined preview
卡片
在带有头部、主体和底部的卡片中显示内容。
undefined preview
ChatMessagesPRO
显示聊天消息列表,设计用于与 Vercel AI SDK 无缝协作。
undefined preview
容器
容器允许您居中并限制内容的宽度。
undefined preview
DashboardGroupPRO
提供仪表盘组件上下文的固定布局组件,支持侧边栏状态管理和持久化。
undefined preview
DashboardNavbarPRO
可在仪表盘中显示的响应式导航栏。
undefined preview
DashboardPanelPRO
可在仪表盘中显示的、可调整大小的面板。
undefined preview
DashboardResizeHandlePRO
用于调整侧边栏或面板大小的拖动手柄。
undefined preview
DashboardSidebarPRO
可在仪表盘中显示的、可调整大小且可折叠的侧边栏。
undefined preview
DashboardToolbarPRO
在仪表盘中显示在导航栏下方的工具栏。
undefined preview
ErrorPRO
支持 NuxtError 的预构建错误组件。
undefined preview
FooterPRO
响应式页脚组件。
undefined preview
HeaderPRO
响应式头部组件。
undefined preview
MainPRO
填充可用视口高度的主体元素。
undefined preview
PagePRO
带有左侧和右侧列的页面网格布局。
undefined preview
PageAsidePRO
用于显示页面导航的固定侧边栏。
undefined preview
PageBodyPRO
页面的主要内容。
undefined preview
PageColumnsPRO
用于并排组织内容的响应式多列布局系统。
undefined preview
PageGridPRO
用于在灵活布局中显示内容的响应式网格系统。
undefined preview
PageListPRO
以堆叠格式显示内容的垂直列表布局。
undefined preview
PricingPlansPRO
在响应式网格布局中显示定价方案列表。
undefined preview
分隔线
水平或垂直分隔内容。
undefined preview
骨架屏
在内容加载时显示的占位符。
undefined preview