Root Layout
RootLayout Component for SSK
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.
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?
🔧 Simplified App Structure: Streamline layout configuration with global settings for themes and fonts.
🎨 Easy Theming: Switch between light and dark modes with minimal setup.
📈 Performance Optimized: Designed to ensure high performance even with complex layouts.
⚡ 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.
Last updated