组件

MkSaaS 模板内置全面的 UI 组件集合，组织成不同的类别。这些组件经过精心构建，以保持一致性和易于更新。

组件结构

MkSaaS 中的组件组织在几个关键目录中：

Shadcn/ui 组件

位于 src/components/ui 目录中，都是 Shadcn/ui 的基础组件。此目录包含作为应用程序构建块的基础组件。

可用组件

src/components/ui 目录包括：

Magic UI 组件

src/components/magicui 目录包含具有高级动画和交互的专业 UI 组件，都是 Magic UI 的组件。

可用组件

src/components/magicui 目录包括：

您可以在 Magic UI 组件 页面中找到嵌入在 MkSaaS 模板中的一些 Magic UI 组件。

Animate UI 组件

src/components/animate-ui 目录包含为现代动态界面设计的动画 UI 组件集合。这些组件是模块化的，可用于增强应用程序的交互性和视觉吸引力。

可用组件

src/components/animate-ui 目录包括：

DiceUI Components

src/components/diceui 目录包含为现代动态界面设计的 DiceUI 组件集合。这些组件是模块化的，可用于增强应用程序的交互性和视觉吸引力。

可用组件

src/components/diceui 目录包括：

您可以在 Roadmap 界面 页面中找到嵌入在 MkSaaS 模板中的看板组件。

Tailark 营销组件

Tailark 营销组件位于 src/components/tailark 目录中。

可用组件

Tailark 目录包括：

您可以在 Tailark 组件 页面中找到所有内置在模板中的组件，并且可以在组件预览的右上角获取组件文件路径。

业务组件

业务特定组件放在 src/components 下的专用目录中，每个模块都有自己的目录：

添加自定义组件

向项目添加新组件时：

1. 选择正确的位置：将组件放在适当的业务模块目录中
2. 遵循命名约定：为组件使用描述性的 PascalCase 名称
3. 保持一致性：遵循现有的组件结构和模式

添加新组件的示例：

// src/components/dashboard/AnalyticsChart.tsx
import { Card } from "@/components/ui/card"
import { Chart } from "@/components/ui/chart"

export function AnalyticsChart() {
  return (
    <Card>
      <Chart data={...} />
    </Card>
  )
}

参考资料

• Shadcn/ui
• Magic UI
• Animate UI
• Tailark
• 21st.dev

视频教程

下一步

现在您了解了如何在 MkSaaS 中使用组件，您可能想要探索这些相关主题：