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

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

元素

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

Alert
用于吸引用户注意的提示框。
undefined preview
Avatar
支持 fallback 和 Nuxt Image 的 img 元素。
undefined preview
AvatarGroup
在组中堆叠多个头像。
undefined preview
Badge
用于表示状态或类别的短文本。
undefined preview
Button
可作为链接或触发操作的按钮元素。
undefined preview
ButtonGroup
将多个类似按钮的元素组合在一起。
undefined preview
Calendar
用于选择单个日期、多个日期或日期范围的日历组件。
undefined preview
ChatPromptSubmitPRO
用于提交聊天提示并自动处理状态的 Button。
undefined preview
Chip
表示数值或状态的指示器。
undefined preview
Collapsible
用于切换其内容可见性的可折叠元素。
undefined preview
ColorModeAvatarPRO
在亮色和暗色模式下使用不同源的 Avatar。
undefined preview
ColorModeButtonPRO
用于切换亮色和暗色模式的 Button。
undefined preview
ColorModeImagePRO
在亮色和暗色模式下使用不同源的 image 元素。
undefined preview
ColorModeSelectPRO
用于在系统、暗色和亮色模式之间切换的 Select。
undefined preview
ColorModeSwitchPRO
用于切换亮色和暗色模式的 switch。
undefined preview
ContentSearchButtonPRO
一个预设样式的 Button,用于打开 ContentSearch 模态框。
undefined preview
DashboardSearchButtonPRO
一个预设样式的 Button,用于打开 DashboardSearch 模态框。
undefined preview
DashboardSidebarCollapsePRO
用于在桌面端折叠侧边栏的 Button。
undefined preview
DashboardSidebarTogglePRO
用于在移动端切换侧边栏的 Button。
undefined preview
Icon
用于显示来自 Iconify 的任何图标的组件。
undefined preview
Keyboard Key
用于显示键盘按键的 kbd 元素。
undefined preview
LocaleSelectPRO
用于在区域设置之间切换的 Select。
undefined preview
Progress
显示任务进度的指示器。
undefined preview

表单

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

AuthFormPRO
一个可定制的 Form,用于创建登录、注册或密码重置表单。
undefined preview
ChatPromptPRO
用于在 AI 聊天界面中提交提示的增强型 Textarea。
undefined preview
Checkbox
用于在选中和未选中状态之间切换的输入元素。
undefined preview
CheckboxGroup
一组复选框按钮,用于从列表中选择多个选项。
undefined preview
ColorPicker
用于选择颜色的组件。
undefined preview
Form
具有内置验证和提交处理功能的表单组件。
undefined preview
FormField
为表单元素提供验证和错误处理的包装器。
undefined preview
Input
用于输入文本的输入元素。
undefined preview
InputMenu
带有实时建议的自动完成输入框。
undefined preview
InputNumber
输入数值,并具有可定制的范围。
undefined preview
PinInput
用于输入 PIN 码的输入元素。
undefined preview
RadioGroup
一组单选按钮,用于从列表中选择单个选项。
undefined preview
Select
用于从选项列表中进行选择的 select 元素。
undefined preview
SelectMenu
一个高级的可搜索 select 元素。
undefined preview
Slider
用于选择范围内的数值的输入框。
undefined preview
Switch
在两种状态之间切换的控件。
undefined preview
Textarea
用于输入多行文本的 textarea 元素。
undefined preview

数据

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

Accordion
一组可折叠的堆叠面板。
undefined preview
BlogPostPRO
一个可定制的文章组件,用于在博客页面中显示。
undefined preview
Carousel
使用 Embla 构建的带有运动和滑动功能的轮播组件。
undefined preview
ChatMessagePRO
显示带有图标、头像和操作的聊天消息。
undefined preview
PageAccordionPRO
一个预设样式的 Accordion,用于在你的页面中显示。
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
Table
一个响应式 table 元素,用于在行和列中显示数据。
undefined preview
Tree
一个树状视图组件,用于显示分层数据结构并与之交互。
undefined preview
UserPRO
显示带有姓名、描述和头像的用户信息。
undefined preview

导航

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

叠加层

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

ContentSearchPRO
一个现成的 CommandPalette,可添加到你的文档中。
undefined preview
ContextMenu
右键单击元素时显示操作的菜单。
undefined preview
DashboardSearchPRO
一个现成的 CommandPalette,可添加到你的仪表盘中。
undefined preview
Drawer
平滑滑入和滑出屏幕的抽屉。
undefined preview
DropdownMenu
单击元素时显示操作的菜单。
undefined preview
Modal
可用于显示消息或请求用户输入的对话窗口。
undefined preview
Popover
一个非模态对话框,围绕触发元素浮动。
undefined preview
Slideover
从屏幕任何一侧滑入的对话框。
undefined preview
Toast
向用户提供信息或反馈的简洁消息。
undefined preview
Tooltip
悬停在元素上时显示信息的弹出框。
undefined preview

布局

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

App
包装你的应用以提供全局配置等。
undefined preview
BannerPRO
在你的网站顶部显示横幅,告知用户重要信息。
undefined preview
BlogPostsPRO
在响应式网格布局中显示博客文章列表。
undefined preview
Card
在带有页头、内容和页脚的卡片中显示内容。
undefined preview
ChatMessagesPRO
显示聊天消息列表,设计用于与 Vercel AI SDK 无缝协作。
undefined preview
Container
容器允许你居中并限制内容的宽度。
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
填充可用视口高度的 main 元素。
undefined preview
PagePRO
你的页面的网格布局,带有左列和右列。
undefined preview
PageAsidePRO
一个固定的 aside,用于显示你的页面导航。
undefined preview
PageBodyPRO
你的页面的主要内容。
undefined preview
PageColumnsPRO
一个响应式多列布局系统,用于并排组织内容。
undefined preview
PageGridPRO
一个响应式网格系统,用于在灵活布局中显示内容。
undefined preview
PageListPRO
一个垂直列表布局,用于以堆叠格式显示内容。
undefined preview
PricingPlansPRO
在响应式网格布局中显示定价计划列表。
undefined preview
Separator
水平或垂直分隔内容。
undefined preview
Skeleton
内容加载时显示的占位符。
undefined preview