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:

Category	Components	Description
Form	Input	Text input field
	Textarea	Multi-line text input
	Select	Dropdown selection
	Checkbox	Single checkbox input
	Radio Group	Radio button group
	Switch	Toggle switch
	Form	Form validation and handling
	Input OTP	One-time password input
Dialog	Dialog	Modal dialog
	Alert Dialog	Alert confirmation
	Sheet	Slide-out dialog
	Drawer	Slide-out panel
	Popover	Floating content
	Hover Card	Hover content card
Navigation	Tabs	Tabbed interface
	Navigation Menu	Navigation menu
	Breadcrumb	Breadcrumb navigation
	Menubar	Menu bar navigation
	Pagination	Page navigation
Data Display	Table	Data table
	Card	Content card
	Calendar	Date picker
	Carousel	Image carousel
	Avatar	User avatar
	Badge	Status badge
Layout	Accordion	Collapsible sections
	Collapsible	Toggle content
	Separator	Visual separator
	Aspect Ratio	Maintain aspect ratio
	Scroll Area	Custom scrollbar
	Resizable	Resizable panels
Feedback	Alert	Status alert
	Progress	Progress indicator
	Skeleton	Loading placeholder
	Toast	Toast notification
	Sonner	Toast manager
	Command	Command palette

Magic UI Components

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

Some tips for using the Magic UI components:

Do not modify components in the src/components/magicui directory.
These components are regularly synchronized with the official magicui releases.
Avoid modifying these components as they are synchronized with official updates.
The src/components/magicui directory is excluded from Biome linting and formatting.

Available Components

The src/components/magicui directory includes:

Category	Components	Description
Text Effects	Animated Gradient Text	Text with animated gradient
	Morphing Text	Text morphing animation
	Sparkles Text	Text with sparkle effects
	Word Rotate	Rotating word animation
	Hyper Text	Interactive text effects
	Flip Text	Text flip animation
	Typing Animation	Typewriter effect
Interactive Elements	Animated Beam	Animated beam effect
	Border Beam	Border animation
	Pulsating Button	Button with pulse effect
	Shimmer Button	Button with shimmer
	Rainbow Button	Rainbow effect button
	Ripple Button	Button with ripple
	Shiny Button	Button with shine
Layout Components	Magic Card	Interactive card
	Animated Grid Pattern	Animated grid background
	Bento Grid	Bento box layout
	Marquee	Scrolling content
	Hero Video Dialog	Video modal
	Box Reveal	Reveal animation
Special Effects	Confetti	Confetti animation
	Meteors	Meteor effect
	Blur Fade	Blur transition
	Ripple	Ripple effect
	Dot Pattern	Dot background
	Grid Pattern	Grid background

You can find some of the Magic UI components embedded in the MkSaaS template in the Magic UI Components page.

Magic UI Blocks

The src/components/animate-ui directory contains a collection of animated UI components designed for modern, dynamic interfaces. These components are modular and can be used to enhance interactivity and visual appeal in your application.

Some tips for using the Animate UI components:

Do not modify components in the src/components/animate-ui directory.
These components are regularly synchronized with the official Animate UI releases.
Avoid modifying these components as they are synchronized with official updates.
The src/components/animate-ui directory is excluded from Biome linting and formatting.

Available Components

The src/components/animate-ui directory includes:

Category	Components	Description
Text Animations	Typing Text	Typewriter-style animated text
	Writing Text	Handwriting animation effect
	Counting Number	Animated number counting effect
	Gradient Text	Text with animated gradient
	Highlight Text	Animated text highlight effect
	Sliding Number	Number sliding animation
UI Elements	Playful Todolist	Animated interactive todo list
Buttons	Ripple Button	Button with ripple animation
	Copy Button	Button with copy-to-clipboard animation
	Flip Button	Button with flip animation
	GitHub Stars Button	Animated GitHub stars button
	Icon Button	Animated icon button
	Liquid Button	Button with liquid animation effect
Effects	Motion Effect	General motion effect wrapper
	Motion Highlight	Motion highlight effect for interactive elements
Components	Code Editor	Animated code editor component
Radix UI	Checkbox	Animated checkbox based on Radix UI
Backgrounds	Hexagon Background	Animated hexagon background
	Hole Background	Animated hole background effect
	Stars Background	Animated stars background
	Bubble Background	Animated bubble background
	Gradient Background	Animated gradient background
Base	Progress	Animated progress indicator

Tailark Marketing Blocks

Tailark marketing blocks are located in the src/components/tailark directory.

Some tips for using the Tailark components:

Do not modify components in the src/components/tailark directory.
These components are regularly synchronized with the official tailark releases.
Avoid modifying these components as they are synchronized with official updates.
The src/components/tailark directory is excluded from Biome linting and formatting.

Available Blocks

The Tailark directories include:

Category	Description
Hero Sections	Engaging, attention-grabbing page headers
Logo Cloud	Display partner or client logos
Features	Highlight your product's key capabilities
Integrations	Showcase third-party integrations
Content	General content display sections
Stats	Display important metrics and statistics
Team	Present your team members
Testimonials	Display customer reviews and testimonials
Call-to-action	Encourage user actions
Footer	Page footers with links and information
Pricing	Showcase your pricing plans
Comparator	Compare different product features or plans
FAQs	Answer common questions
Login	Login related components
Sign-up	Sign-up related components
Forgot Password	Password recovery interfaces
Contact	Contact forms and information

You can find all the blocks embedded in the MkSaaS template in the Tailark Blocks page, and you can get the component file path on the top right corner of the block preview.

Tailark Blocks

Business Components

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

auth-card.tsx

Adding Custom Components

When adding new components to your project:

Choose the Right Location: Place components in the appropriate business module directory
Follow Naming Conventions: Use descriptive, PascalCase names for components
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>
  )
}

Component Structure

Shadcn/ui Components

Available Components

Magic UI Components

Available Components

Animate UI Components

Available Components

Tailark Marketing Blocks

Available Blocks

Business Components

Adding Custom Components

References

Next Steps

Themes

Fonts

Customize Pages

Landing Page

Table of Contents