组件
了解 MkSaaS 中可用的组件以及如何有效使用它们
MkSaaS 模板内置全面的 UI 组件集合，组织成不同的类别。这些组件经过精心构建，以保持一致性和易于更新。
组件结构
MkSaaS 中的组件组织在几个关键目录中：
Shadcn/ui 组件
位于 src/components/ui 目录中，都是 Shadcn/ui 的基础组件。此目录包含作为应用程序构建块的基础组件。
MkSaaS文档了解 MkSaaS 中可用的组件以及如何有效使用它们
MkSaaS 模板内置全面的 UI 组件集合，组织成不同的类别。这些组件经过精心构建，以保持一致性和易于更新。
MkSaaS 中的组件组织在几个关键目录中：
位于 src/components/ui 目录中，都是 Shadcn/ui 的基础组件。此目录包含作为应用程序构建块的基础组件。
src/components/ui 目录中的组件。src/components/ui 目录被排除在 Biome 代码检查和格式化之外。src/components/ui 目录包括：
| 类别 | 组件 | 描述 |
|---|---|---|
| 表单 | Input | 文本输入字段 |
| Textarea | 多行文本输入 | |
| Select | 下拉选择 | |
| Checkbox | 单个复选框输入 | |
| Radio Group | 单选按钮组 | |
| Switch | 切换开关 | |
| Form | 表单验证和处理 | |
| Input OTP | 一次性密码输入 | |
| Input Group | 带图标、按钮、标签的输入框 | |
| Field | 统一表单组件 | |
| 对话框 | Dialog | 模态对话框 |
| Alert Dialog | 警告确认 | |
| Sheet | 滑出对话框 | |
| Drawer | 滑出面板 | |
| Popover | 浮动内容 | |
| Hover Card | 悬停内容卡片 | |
| 导航 | Tabs | 选项卡界面 |
| Navigation Menu | 导航菜单 | |
| Breadcrumb | 面包屑导航 | |
| Menubar | 菜单栏导航 | |
| Pagination | 页面导航 | |
| 数据显示 | Table | 数据表格 |
| Card | 内容卡片 | |
| Calendar |
src/components/magicui 目录包含具有高级动画和交互的专业 UI 组件，都是 Magic UI 的组件。
src/components/magicui 目录中的组件。src/components/magicui 目录被排除在 Biome 代码检查和格式化之外。src/components/magicui 目录包括：
| 类别 | 组件 | 描述 |
|---|---|---|
| 文本效果 | Animated Gradient Text | 带动画渐变的文本 |
| Morphing Text | 文本变形动画 | |
| Sparkles Text | 带闪烁效果的文本 | |
| Word Rotate | 旋转单词动画 | |
| Hyper Text | 交互式文本效果 | |
| Flip Text | 文本翻转动画 | |
| Typing Animation | 打字机效果 | |
| 交互元素 | Animated Beam | 动画光束效果 |
| Border Beam | 边框动画 | |
| Pulsating Button | 带脉冲效果的按钮 | |
| Shimmer Button | 带闪烁的按钮 | |
| Rainbow Button | 彩虹效果按钮 | |
| Ripple Button | 带涟漪的按钮 | |
| Shiny Button | 带光泽的按钮 | |
| 布局组件 | Magic Card | 交互式卡片 |
| Animated Grid Pattern | 动画网格背景 | |
| Bento Grid | 便当盒布局 | |
| Marquee | 滚动内容 | |
| Hero Video Dialog | 视频模态 | |
| Box Reveal | 揭示动画 | |
| 特殊效果 | Confetti | 五彩纸屑动画 |
| Meteors |
您可以在 Magic UI 组件 页面中找到嵌入在 MkSaaS 模板中的一些 Magic UI 组件。
src/components/animate-ui 目录包含为现代动态界面设计的动画 UI 组件集合。这些组件是模块化的，可用于增强应用程序的交互性和视觉吸引力。
src/components/animate-ui 目录中的组件。src/components/animate-ui 目录被排除在 Biome 代码检查和格式化之外。src/components/animate-ui 目录包括：
| 类别 | 组件 | 描述 |
|---|---|---|
| 文本动画 | Typing Text | 打字机风格的动画文本 |
| Counting Number | 动画数字计数效果 | |
| Gradient Text | 带动画渐变的文本 | |
| Highlight Text | 动画文本高亮效果 | |
| Sliding Number | 数字滑动动画 | |
| UI 元素 | Playful Todolist | 动画交互式待办事项列表 |
| 按钮 | Ripple Button | 带涟漪动画的按钮 |
| Copy Button | 带复制到剪贴板动画的按钮 | |
| Flip Button | 带翻转动画的按钮 | |
| GitHub Stars Button | 动画 GitHub 星标按钮 | |
| Icon Button | 动画图标按钮 | |
| Liquid Button | 带液体动画效果的按钮 | |
| 效果 | Motion Effect | 通用运动效果包装器 |
| Motion Highlight | 交互元素的运动高亮效果 | |
| 组件 | Code Editor | 动画代码编辑器组件 |
| Radix UI | Checkbox | 基于 Radix UI 的动画复选框 |
| 背景 | Hexagon Background | 动画六边形背景 |
| Hole Background | 动画洞穴背景效果 | |
| Stars Background | 动画星空背景 | |
| Bubble Background | 动画气泡背景 | |
src/components/diceui 目录包含为现代动态界面设计的 DiceUI 组件集合。这些组件是模块化的，可用于增强应用程序的交互性和视觉吸引力。
src/components/diceui 目录中的组件。src/components/diceui 目录被排除在 Biome 代码检查和格式化之外。src/components/diceui 目录包括：
| 类别 | 组件 | 描述 |
|---|---|---|
| UI 元素 | Kanban | 看板 |
您可以在 Roadmap 界面 页面中找到嵌入在 MkSaaS 模板中的看板组件。
Tailark 营销组件位于 src/components/tailark 目录中。
src/components/tailark 目录中的组件。src/components/tailark 目录被排除在 Biome 代码检查和格式化之外。Tailark 目录包括：
您可以在 Tailark 组件 页面中找到所有内置在模板中的组件，并且可以在组件预览的右上角获取组件文件路径。
业务特定组件放在 src/components 下的专用目录中，每个模块都有自己的目录：
向项目添加新组件时：
添加新组件的示例：
// src/components/dashboard/AnalyticsChart.tsx
现在您了解了如何在 MkSaaS 中使用组件，您可能想要探索这些相关主题：
| 日期选择器 |
| Carousel | 图片轮播 |
| Avatar | 用户头像 |
| Badge | 状态徽章 |
| 布局 | Accordion | 可折叠部分 |
| Collapsible | 切换内容 |
| Separator | 视觉分隔符 |
| Aspect Ratio | 保持宽高比 |
| Scroll Area | 自定义滚动条 |
| Resizable | 可调整大小的面板 |
| 反馈 | Alert | 状态警告 |
| Progress | 进度指示器 |
| Skeleton | 加载占位符 |
| Toast | 提示通知 |
| Sonner | 提示管理器 |
| Command | 命令面板 |
| Spinner | 加载状态指示器 |
| 交互元素 | Button Group | 按钮组和分割按钮 |
| Kbd | 键盘按键显示 |
| Item | 列表项和卡片显示 |
| Empty | 空状态显示 |
| 流星效果 |
| Blur Fade | 模糊过渡 |
| Ripple | 涟漪效果 |
| Dot Pattern | 点状背景 |
| Grid Pattern | 网格背景 |
| Gradient Background |
| 动画渐变背景 |
| 基础 | Progress | 动画进度指示器 |
创建落地页