Skip to main content

Layouts

JetShip offers three versatile layout options to help structure your application: Front Layout, Vertical Layout, and Blank Layout. These layouts are designed to cater to different page types, ensuring consistency and flexibility throughout your project.

Location

All layouts are located in the packages/ui/src/layouts directory. And other layout components like Header and Footer are located in the apps/web/src/components/layout directory.

1. Front Layout​

The Front Layout is designed for public-facing pages of your application. It provides a structure that includes header and footer sections, making it perfect for landing pages, marketing pages, and other customer-facing content.

⚙️ Props​

  • header (optional) – The header component to be displayed at the top of the page. If you want to modify the header, you can update the Header component from the apps/web/src/components/layout/front/Header.tsx file.
  • footer (optional) – The footer component to be displayed at the bottom of the page. If you want to modify the footer, you can update the Footer component from the apps/web/src/components/layout/front/Footer.tsx file.
  • children (required) – The main content of your page.

You can see usage of the Front Layout in the apps/web/src/app/(front)/(pages)/layout.tsx file.

tip

The Front Layout is ideal for pages where you want to maintain consistent branding and navigation while providing a professional, customer-focused experience.

2. Vertical Layout​

The Vertical Layout is primarily used for admin interfaces and dashboards. It includes support for a sidebar navigation and header, providing a comprehensive structure for administrative pages.

⚙️ Props​

  • navigation (optional) – The sidebar navigation component for the admin interface. If you want to modify the sidebar, you can update the Sidebar component from the apps/web/src/components/layout/vertical/Sidebar.tsx file.
  • header (optional) – The header component to be displayed at the top of the page. If you want to modify the header, you can update the Header component from the apps/web/src/components/layout/vertical/Header.tsx file.
  • children (required) – The main content of your admin page.

You can see usage of the Vertical Layout in the apps/web/src/app/(back)/layout.tsx file.

tip

The Vertical Layout is perfect for admin panels, dashboards, and other interfaces where you need quick access to multiple sections through sidebar navigation.

3. Blank Layout​

The Blank Layout provides a clean canvas with no pre-built elements. It's ideal for pages where you need complete control over the layout, such as authentication pages, error pages, or custom landing pages.

⚙️ Props​

  • children (required) – The content to be displayed on the page.

You can see usage of the Blank Layout in the apps/web/src/app/(front)/layout.tsx file.

tip

Use the Blank Layout when you want to create a custom page layout from scratch or need a distraction-free interface, such as for authentication pages or full-screen experiences.