组件

使用 110 多个由 Tailwind CSS 和 Reka UI 提供支持的 Vue 组件,构建美观、可访问且响应式的用户界面。

布局

核心结构组件,用于组织应用程序布局并为您的 UI 建立一致的基础。

App preview
App
封装您的应用程序以提供全局配置等功能。
Container preview
Container
容器允许您居中并限制内容的宽度。
Error preview
错误
一个预构建的错误组件,支持 NuxtError。
Footer preview
页脚
一个响应式页脚组件。
Header preview
页眉
一个响应式头部组件。
Main preview
主内容
一个填满可用视口高度的主元素。

元素

必要的 UI 构建块,包括按钮、徽章、头像、图标和其他基础界面元素,用于打造直观且一致的用户体验。

Alert preview
Alert
一种用于吸引用户注意力的提示框。
Avatar preview
Avatar
一个支持回退和 Nuxt Image 的 img 元素。
AvatarGroup preview
AvatarGroup
将多个头像堆叠成一组。
Badge preview
Badge
用于表示状态或类别的短文本。
Banner preview
横幅
在您网站顶部显示横幅,通知用户重要信息。
Button preview
Button
一个可作为链接或触发操作的按钮元素。
Calendar preview
Calendar
一个日历组件,用于选择单个日期、多个日期或日期范围。
Card preview
Card
在卡片中显示内容,包含头部、主体和底部。
Chip preview
Chip
数值或状态的指示器。
Collapsible preview
Collapsible
一个可折叠元素,用于切换其内容的可见性。
FieldGroup preview
字段组
将多个类似按钮的元素组合在一起。
Icon preview
Icon
一个组件,用于显示来自 Iconify 或其他组件的任何图标。
Kbd preview
Kbd
一个用于显示键盘按键的 kbd 元素。
Progress preview
Progress
一个显示任务进度的指示器。
Separator preview
Separator
水平或垂直分隔内容。
Skeleton preview
Skeleton
内容加载时显示的占位符。

Form

全面的表单组件,用于构建交互式用户输入体验,包括文本输入、选择器、复选框、单选组、开关、滑块以及完整的表单验证。

Checkbox preview
Checkbox
一个用于在选中和未选中状态之间切换的输入元素。
CheckboxGroup preview
CheckboxGroup
一组复选按钮,用于从列表中选择多个选项。
ColorPicker preview
ColorPicker
一个用于选择颜色的组件。
FileUpload preview
文件上传
一个用于上传文件的输入元素。
Form preview
Form
一个具有内置验证和提交处理功能的表单组件。
FormField preview
FormField
一个用于表单元素的包装器,提供验证和错误处理。
Input preview
Input
一个用于输入文本的输入元素。
InputMenu preview
InputMenu
一个具有实时建议的自动完成输入框。
InputNumber preview
InputNumber
一个用于输入数值并可自定义范围的输入组件。
InputTags preview
InputTags
一个显示交互式标签的输入元素。
PinInput preview
PinInput
一个用于输入 PIN 码的输入元素。
RadioGroup preview
RadioGroup
一组单选按钮,用于从列表中选择单个选项。
Select preview
Select
一个用于从选项列表中选择的 select 元素。
SelectMenu preview
SelectMenu
一个高级可搜索的选择元素。
Slider preview
Slider
一个用于在范围内选择数值的输入框。
Switch preview
Switch
一个在两种状态之间切换的控件。
Textarea preview
Textarea
一个用于输入多行文本的文本区域元素。

数据

用于显示和组织数据的组件,包括表格、手风琴、轮播、时间线、树和用户配置文件。

Accordion preview
Accordion
一组可折叠的堆叠面板。
Carousel preview
Carousel
一个使用 Embla 构建的带动画和滑动的轮播。
Empty preview
显示空状态的组件。
Marquee preview
跑马灯
一个用于创建无限滚动内容的组件。
Table preview
Table
一个用于在行和列中显示数据的响应式表格元素。
Timeline preview
Timeline
一个显示带有日期、标题、图标或头像的事件序列的组件。
Tree preview
Tree
一个用于显示和交互分层数据结构的树形视图组件。
User preview
用户
显示带有姓名、描述和头像的用户信息。

用于用户导航和寻路功能的组件,包括菜单、面包屑、分页、选项卡、步骤条、链接和命令面板。

Breadcrumb preview
Breadcrumb
一个用于在网站中导航的链接层级。
CommandPalette preview
CommandPalette
一个命令面板,由 Fuse.js 提供支持的全文本搜索,实现高效模糊匹配。
FooterColumns preview
页脚列
一个以列形式在页脚中显示的链接列表。
Link preview
Link
一个围绕 <NuxtLink> 的包装器,带有额外的属性。
NavigationMenu preview
NavigationMenu
一个可以水平或垂直显示的链接列表。
Pagination preview
Pagination
一个用于在页面之间导航的按钮或链接列表。
Stepper preview
Stepper
一组步骤,用于指示多步过程的进度。
Tabs preview
Tabs
一组标签面板,每次显示一个。

遮罩层

浮动 UI 元素,显示在主内容上方,包括模态框、弹出框、工具提示、抽屉、滑出面板和上下文菜单。

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

页面

预构建的营销和内容部分,用于创建着陆页、博客、定价页和其他营销材料。

AuthForm preview
认证表单
一个可自定义的表单,用于创建登录、注册或密码重置表单。
BlogPost preview
博客文章
一个可自定义的文章,用于在博客页面中显示。
BlogPosts preview
博客文章列表
在响应式网格布局中显示博客文章列表。
ChangelogVersion preview
更新日志版本
一个可自定义的文章,用于在更新日志中显示。
ChangelogVersions preview
更新日志版本列表
在时间轴中显示更新日志版本列表。
Page preview
页面
一个带有左右列的页面网格布局。
PageAnchors preview
页面锚点
页面中显示的锚点列表。
PageAside preview
页面侧边栏
一个用于显示页面导航的固定侧边栏。
PageBody preview
页面主体
您页面的主要内容。
PageCard preview
页面卡片
一个预设样式的卡片组件,显示标题、描述和可选链接。
PageColumns preview
页面列
一个响应式多列布局系统,用于并排组织内容。
PageCTA preview
页面 CTA
在您的页面中显示行动号召区块。
PageFeature preview
页面特色
一个用于展示应用程序主要特性的组件。
PageGrid preview
页面网格
一个响应式网格系统,用于以灵活布局显示内容。
PageHeader preview
页面头部
一个用于您页面的响应式头部。
PageHero preview
页面英雄区
一个用于您页面的响应式英雄区。
PageLinks preview
页面链接
页面中显示的链接列表。
PageList preview
页面列表
一个垂直列表布局,用于以堆叠格式显示内容。
PageLogos preview
页面标志
一个用于在您的页面上显示标志或图片的列表。
PageSection preview
页面节
一个用于您页面的响应式章节。
PricingPlan preview
定价方案
一个可自定义的定价计划,用于在定价页面中显示。
PricingPlans preview
定价方案列表
在响应式网格布局中显示定价计划列表。
PricingTable preview
定价表
一个响应式定价表格组件,显示分层定价计划及功能比较。
查看 GitHub 上的 SaaS 模板以获取实际示例。

Dashboard

专用组件,用于构建具有可调整大小面板、可折叠侧边栏、工具栏和搜索功能的动态仪表板。

DashboardGroup preview
仪表盘组
一个固定布局组件,为仪表盘组件提供上下文,并支持侧边栏状态管理和持久化。
DashboardNavbar preview
仪表盘导航栏
一个用于在仪表盘中显示的响应式导航栏。
DashboardPanel preview
仪表盘面板
一个可在仪表盘中显示的,可调整大小的面板。
DashboardResizeHandle preview
仪表盘调整大小手柄
一个用于调整侧边栏或面板大小的句柄。
DashboardSearch preview
仪表盘搜索
一个随时可用的命令面板,可添加到您的仪表盘中。
DashboardSearchButton preview
仪表盘搜索按钮
一个预设样式的按钮,用于打开仪表盘搜索模态框。
DashboardSidebar preview
仪表盘侧边栏
一个可调整大小和可折叠的侧边栏,用于在仪表盘中显示。
DashboardSidebarCollapse preview
仪表盘侧边栏折叠
一个用于在桌面端折叠侧边栏的按钮。
DashboardSidebarToggle preview
仪表盘侧边栏切换
一个用于在移动设备上切换侧边栏的按钮。
DashboardToolbar preview
仪表盘工具栏
一个用于在仪表盘导航栏下方显示的工具栏。
查看 GitHub 上的 仪表板模板以获取实际示例。

聊天

用于构建会话界面和聊天机器人的组件,由 Vercel AI SDK 提供支持。

ChatMessage preview
聊天消息
显示带有图标、头像和操作的聊天消息。
ChatMessages preview
聊天消息列表
显示聊天消息列表,旨在与 Vercel AI SDK 无缝协作。
ChatPalette preview
聊天调色板
一个聊天调色板,用于在叠加层中创建聊天机器人界面。
ChatPrompt preview
聊天提示
一个增强型文本区域,用于在 AI 聊天界面中提交提示。
ChatPromptSubmit preview
聊天提示提交
一个用于提交聊天提示并自动处理状态的按钮。
查看 GitHub 上的 AI 聊天模板以获取实际示例。

内容

Content 集成的组件,适用于文档站点,包括目录、搜索、导航树和周围页面链接。

ContentNavigation preview
内容导航
一个手风琴式导航组件,用于组织页面链接。
ContentSearch preview
内容搜索
一个随时可用的命令面板,可添加到您的文档中。
ContentSearchButton preview
内容搜索按钮
一个预设样式的按钮,用于打开内容搜索模态框。
ContentSurround preview
内容环绕
一对用于在页面之间导航的上一页和下一页链接。
ContentToc preview
内容目录
一个带有自动活动锚点链接高亮功能的固定目录。
查看 GitHub 上的 文档模板以获取实际示例。

颜色模式

Color Mode 集成的组件,用于在浅色、深色和系统偏好设置之间切换主题。

ColorModeAvatar preview
颜色模式头像
一个在浅色和深色模式下具有不同来源的头像。
ColorModeButton preview
颜色模式按钮
一个用于在浅色和深色模式之间切换的按钮。
ColorModeImage preview
颜色模式图片
一个在亮色和暗色模式下具有不同图片源的图像元素。
ColorModeSelect preview
颜色模式选择
一个用于在系统、深色和浅色模式之间切换的选择框。
ColorModeSwitch preview
颜色模式开关
一个用于在浅色和深色模式之间切换的开关。

i18n

i18n 集成的组件,用于国际化和区域设置管理。

LocaleSelect preview
区域设置选择
一个用于切换语言环境的选择框。