Lzh on GitHub

使用 112+ 强大的组件构建漂亮的 UI。

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

Element

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

Alert
用于吸引用户注意力的提示框。
undefined preview
Avatar
一个带回退功能和 Nuxt Image 支持的 img 元素。
undefined preview
AvatarGroup
堆叠多个头像在一个组中。
undefined preview
Badge
用于表示状态或类别的短文本。
undefined preview
Button
一个可以作为链接或触发动作的按钮元素。
undefined preview
ButtonGroup
将多个类似按钮的元素组合在一起。
undefined preview
Calendar
一个用于选择单日、多日或日期范围的日历组件。
undefined preview
ChatPromptSubmitPRO
一个用于提交聊天提示的按钮,具有自动状态处理功能。
undefined preview
Chip
表示数值或状态的指示器。
undefined preview
Collapsible
一个可折叠元素,用于切换其内容的可见性。
undefined preview
ColorModeAvatarPRO
一个在浅色和深色模式下具有不同源的头像。
undefined preview
ColorModeButtonPRO
一个用于在浅色和深色模式之间切换的按钮。
undefined preview
ColorModeImagePRO
一个在浅色和深色模式下具有不同源的图片元素。
undefined preview
ColorModeSelectPRO
一个用于在系统、深色和浅色模式之间切换的选择器。
undefined preview
ColorModeSwitchPRO
一个用于在浅色和深色模式之间切换的开关。
undefined preview
ContentSearchButtonPRO
一个预设样式的按钮,用于打开内容搜索模态框。
undefined preview
DashboardSearchButtonPRO
一个预设样式的按钮,用于打开 DashboardSearch 模态框。
undefined preview
DashboardSidebarCollapsePRO
一个用于在桌面端折叠侧边栏的按钮。
undefined preview
DashboardSidebarTogglePRO
自定义切换按钮以打开侧边栏。
undefined preview
Icon
一个显示 Iconify 中任何图标的组件。
undefined preview
Kbd
一个显示键盘按键的 kbd 元素。
undefined preview
LocaleSelectPRO
一个用于在不同语言环境之间切换的 Select 组件。
undefined preview
Progress
显示任务进度的指示器。
undefined preview

Form

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

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

Data

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

Accordion
一组可折叠面板的堆叠。
undefined preview
Carousel
使用 Embla 构建的带运动和滑动手势的轮播组件。
undefined preview
ChangelogVersionPRO
在更新日志中显示的可自定义文章。
undefined preview
PageCTAPRO
一个用于在页面中显示行动号召(Call to Action)的区域。
undefined preview
PageAccordionPRO
一个预设样式的手风琴组件,用于在你的页面中显示。
undefined preview
PageCardPRO
一个预设样式的卡片组件,用于显示标题、描述和可选链接。
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
一个响应式表格元素,用于以行和列显示数据。
undefined preview
Timeline
一个显示带有日期、标题、图标或头像的事件序列的组件。
undefined preview
Tree
一个用于显示和交互分层数据结构的树状视图组件。
undefined preview
UserPRO
显示用户信息,包括姓名、描述和头像。
undefined preview

Navigation

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

Overlay

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

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

Layout

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

App
封装您的应用以提供全局配置等。
undefined preview
BannerPRO
在你的网站顶部显示横幅,以告知用户重要信息。
undefined preview
BlogPostPRO
一个可自定义的文章,用于在博客页面中显示。
undefined preview
BlogPostsPRO
以响应式网格布局显示博客文章列表。
undefined preview
Card
在卡片中显示内容,包含页眉、主体和页脚。
undefined preview
ChangelogVersionsPRO
以时间轴的形式显示更新日志版本列表。
undefined preview
ChatMessagePRO
显示带有图标、头像和动作的聊天消息。
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
一个用于显示页面导航的粘性侧边栏。
undefined preview
PageBodyPRO
您页面的主要内容。
undefined preview
PageColumnsPRO
一个响应式多列布局系统,用于并排组织内容。
undefined preview
PageGridPRO
一个响应式网格系统,用于以灵活的布局显示内容。
undefined preview
PageListPRO
一个用于以堆叠格式显示内容的垂直列表布局。
undefined preview
PricingPlansPRO
在响应式网格布局中显示定价计划列表。
undefined preview
Separator
水平或垂直分隔内容的元素。
undefined preview
Skeleton
内容加载时显示的占位符。
undefined preview