Components

MkSaaS includes a comprehensive collection of UI components organized into different categories. The components are carefully structured to maintain consistency, and ease of updates.

Component Structure

The components in MkSaaS are organized into several key directories:

Shadcn/ui Components

Located in the src/components/ui directory, these are the foundational components from shadcn/ui. This directory contains base components that serve as building blocks for your application.

Available Components

The src/components/ui directory includes:

Magic UI Components

The src/components/magicui directory contains specialized UI components with advanced animations and interactions.

Available Components

The src/components/magicui directory includes:

Tailark Marketing Blocks

Tailark marketing blocks are split between the src/app/[locale]/preview and src/components/tailark directories.

Available Blocks

The Tailark directories include:

Business Components

Business-specific components are organized in dedicated directories under src/components. Each module has its own directory:

Adding Custom Components

When adding new components to your project:

1. Choose the Right Location: Place components in the appropriate business module directory
2. Follow Naming Conventions: Use descriptive, PascalCase names for components
3. Maintain Consistency: Follow the existing component structure and patterns

Example of adding a new component:

// 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>
  )
}

References

• Shadcn/ui
• Magic UI
• Tailark

Next Steps

Now that you understand how to use components in MkSaaS, you might want to explore these related topics: