# Root Layout

The **RootLayout** component in **SSK-Core** is crucial for managing your app's overall structure, including themes, fonts, and layout consistency. It ensures a seamless and flexible user experience by integrating with libraries like **shadcn/ui**, **daisyUI**, and **magicUI**.

***

## **Overview**

The **RootLayout** component provides a consistent foundation for your application’s UI. It handles global settings like themes, fonts, and layout structure, simplifying your app's configuration. This component is highly customizable to meet the specific needs of your project.

***

## **Google Fonts Integration**

**SSK-Core** makes it easy to include Google Fonts within your layout. By passing font imports as props to the `RootLayout` component, you can ensure consistent typography across your app.

***

## **Using the RootLayout Component**

### **Core Layout: RootLayout**

The `RootLayout` component serves as the foundation for your app's structure. It manages global settings such as theme and fonts while maintaining consistency across your pages. Apologies for the confusion. Here is the corrected version without any reference to **daisyUI**:

***

### **Theming and Customization**

* **Light and Dark Themes**: Easily toggle between light and dark modes. This functionality is powered by **next-themes**.
* **Utility Classes with Tailwind CSS**: Use **Tailwind CSS** utility classes to extend and modify the UI components as needed.

For further details on how themes work and how to configure them, visit the [theme documentation](https://github.com/TheodorTomas/TTC/blob/main/libs/shared/core/README/libs/shared/core/features/theme/README.md).

***

## **Pro Layout for Advanced Features**

For **SSK-Pro** users, the Pro `RootLayout` offers additional functionality, including advanced features that are ideal for enterprise-level applications:

* **Analytics Integration**: Built-in support for Google Analytics and other analytics providers.
* **Cookie Consent and GDPR Compliance**: Includes cookie consent management to meet GDPR requirements.
* **Affiliate Marketing Support**: Easily enable affiliate marketing integrations like **Rewardful** or **Lemon Squeezy** with feature flags.
* **reCAPTCHA Support**: Direct integration with **Google reCAPTCHA** to secure forms.

To use the **Pro RootLayout**, import it from `@pro/RootLayout.tsx` and configure the necessary **fonts** and **feature flags**.

***

## **Why Use RootLayout?**

1. **🔧 Simplified App Structure**: Streamline layout configuration with global settings for themes and fonts.
2. **🎨 Easy Theming**: Switch between light and dark modes with minimal setup.
3. **📈 Performance Optimized**: Designed to ensure high performance even with complex layouts.
4. **⚡ Flexible Integration**: Seamlessly integrates with other SSK-Core components and libraries like **Tailwind CSS**.

***

## **Best Practices**

* Use **RootLayout** to ensure consistency across your app.
* Leverage the **Pro RootLayout** for advanced features and integrations in **SSK-Pro**.
* Pass fonts as props to maintain consistent typography across all pages.

***

## **Conclusion**

The **RootLayout** component in **SSK-Core** provides a solid foundation for your app, offering theme management, font integration, and layout structure. It is customizable and adaptable, allowing you to focus on building your app’s core features while ensuring a cohesive user interface.

For **SSK-Pro** users, the **Pro RootLayout** offers additional features and integrations for larger, more complex projects.