MkSaaS comes with a comprehensive set of pre-built marketing blocks that allow you to quickly create beautiful, responsive landing pages. These blocks include:
Hero sections
Feature displays
Pricing tables
Testimonials
Call-to-action sections
And many more
All of these components are based on the Tailark open-source project, which provides high-quality UI blocks built with shadcn/UI and TailwindCSS.
The blocks are located in the src/components/tailark/preview directory, organized by category. Each category folder contains multiple block variants that you can use in your landing pages.
Browse the src/components/tailark/preview directory to find the block you want to use
Open the corresponding page.tsx file to view the implementation
Copy the component code from the file
Paste it into your landing page component
Customize the content and styling as needed
We do not recommend directly using components from the src/components/tailark/preview directory in your code. These components are regularly synchronized with the official Tailark components and may introduce conflicts during updates. Instead, copy the components to your own directory or use the pre-built components in the blocks directory as described in the next section.
For example, to use the first hero section variant:
For better organization and internationalization support, MkSaaS provides a dedicated src/components/blocks directory where you should place your customized components after copying them from the src/components/tailark/preview directory.
This directory structure mirrors the categories in the src/components/tailark/preview directory and already includes some pre-built, internationalized block components. When adding new blocks from the src/components/tailark/preview directory, we recommend the following workflow:
Find and select the desired block from the src/components/tailark/preview directory
Copy the component code from the page.tsx file
Create a new file in the corresponding category folder in src/components/blocks
For example, if you've selected a hero section component from the src/components/tailark/preview directory, you should place your customized version in:
Using this organized approach provides several benefits:
Keeps all your landing page components in one dedicated location
Makes it easier to maintain and update components
Ensures proper separation from the original preview components
Allows you to adapt components for internationalization in a structured way
Facilitates reuse across different parts of your application
Best practices for using components:
While you can use components directly from the blocks directory, the most recommended approach is to copy them to your own directory (e.g., components/home or components/landing) and customize them there.
A typical landing page combines multiple blocks to create a cohesive user experience. Here's an example of how you might structure a landing page using components from the blocks directory:
import HeroSection
This approach allows you to mix and match different blocks to create a unique landing page that suits your needs.
The blocks from Tailark do not support internationalization out of the box. To make your landing page multilingual, you'll need to extract the text content into language-specific resource files.
The src/components/blocks directory already includes several pre-internationalized components that you can use as a reference or starting point. These components:
Import useTranslations from next-intl
Use translation keys for all text content
Use LocaleLink instead of regular Next.js Link for proper localization of URLs
Maintain the same visual design and functionality as their preview counterparts
For example, here's a simplified version of an internationalized hero component:
import { useTranslations }
By following this approach, you can create a fully multilingual landing page that adapts to the user's preferred language.
The marketing blocks in MkSaaS are regularly synchronized with the Tailark GitHub repository. This ensures that you always have access to the latest improvements and additions.
There are three approaches to managing your landing page components, each with different update implications:
Using Preview Components (Not Recommended)
Components in the preview directory are automatically synchronized with Tailark
Direct usage may cause conflicts during updates
Avoid using these components in production
Using Blocks Directory Components
Components in src/components/blocks are more stable
May still be affected by template updates
Good for minimal customization needs
Using Your Own Directory (Recommended)
Copy components to your own directory (e.g., components/home)
Immune to template updates
Complete control over component updates
Best for extensive customization needs
When new versions of MkSaaS are released, you can manually review the changes in the src/components/tailark/preview and src/components/blocks directories to decide if you want to incorporate any improvements into your custom components.
MkSaaS Docs