Page Templates

Linear Admin uses 4 different page templates to help you get started with your project. Each template has a different layout and is designed to be used in different scenarios based on the content of the page.

Two Column - Sidebar and Body

The two column template is the most common layout used in Linear Admin. It has a sidebar on the left and a body on the right. The sidebar is used for navigation and the body is used for the main content of the page.

e-commerce.html

crm.html

faq.html

invoice.html

import { Content } from "@/components/layout/content/content";
import { Header } from "@/components/layout/header/header";

const Page = () => {
	return (
		<>
			<Header title="[Header Title]">
				{/* Header content goes here... */}
			</Header>
			<Content>
				{/* Page content goes here... */}
			</Content>
		</>
	);
};

export default Page;

Three Column - Sidebar, Content-sidebar and Body

The three-column template is employed when you want to showcase a content-level sidebar on the left side of the page. This is particularly handy when you need to present a list of items on the left and the main content on the right.

How it works:

This layout shrinks the default sidebar, which contains the menu, to create space for the content-sidebar. This is achieved by adding the shrunk: true property to the respective route in sidebar-data.tsx, where all the route data is stored.
A separate component is created for the content-sidebar, and it is placed within the Content component using the sidebar prop.
A button with toggleContentSidebar() (from useSidebar hook) onclick function is used to toggle the content-sidebar on mobile and smaller screens.
In mobile devices and smaller screens, only the content body is shown, and you can toggle the content-sidebar by clicking the toggle button mentioned previously.

file-manager.html

messages.html

photos.html

calendar.html

page.tsx

import { Content } from "@/components/layout/content/content";
import { Header } from "@/components/layout/header/header";
import { Sidebar } from "./sidebar";
import { ActiontHeader } from "./action-header";
import { ScrollArea } from "@/components/ui/scroll-area";

const Page = () => {
	return (
		<>
			<Header title="[Header Title]">
				{/* Header content goes here... */}
			</Header>
			<Content columns={2} sidebar={<Sidebar />}>
				<ActiontHeader />
				<ScrollArea>
					{/* Page content goes here... */}
				</ScrollArea>
			</Content>
		</>
	);
};

export default Page;

sidebar.tsx

"use client";

import { ContentSidebar } from "@/components/layout/content/sidebar";
import { Files, Share2, Clock, Rotate3D } from "lucide-react";

export const Sidebar = () => {
	const LINKS = [
		{
			group: "Local Drive",
			items: [
				{
					icon: Files,
					label: "All Files and Folders",
					href: "/file-manager",
				},
				{
					icon: Share2,
					label: "Shared with me",
					href: "#",
				},
				{
					icon: Clock,
					label: "Recently Added",
					href: "#",
				},
				{
					icon: Rotate3D,
					label: "Transfers",
					href: "#",
				},
			],
		},
	];

	return <ContentSidebar data={LINKS} />;
};

action-header.tsx

"use client";

import React from "react";
import ContentHeader from "@/components/layout/content/header";
import { Button } from "@/components/ui/button";
import { useSidebar } from "@/contexts/sidebar";

export const ActiontHeader = () => {
	const { toggleContentSidebar } = useSidebar();

	return (
		<ContentHeader>
			<Button variant="ghost" size="icon" className="me-3 lg:hidden" onClick={() => toggleContentSidebar()}>
				<AlignLeft className="h-4.5 w-4.5" />
			</Button>

			...
		</ContentHeader>
	);
};

Four Column - Sidebar, Content-sidebar, Content-list and Body

Like the three column layout, the four column layout is also a combination of the sidebar, content sidebar and body sections. The difference is that the four column layout also includes an additional section for a third sidebar.

How it works:

Follow the first 4 steps as described previously in the 3 column layout.
A separate component is created for the content-list, and it is placed within the Content component using the list prop.
On mobile, the content-list and body are displayed one at a time and can be toggled by clicking each content-list’s list-item or the back button with with onclick function toggleCard() (from useContent hook) found on the body.
The sliding animation used to toggle between the content-list and body (on mobile) is achieved with the help of TailwindCSS’s group state class.

contacts.html

mail.html

page.tsx

import { Sidebar } from "./sidebar";
import { List } from "./list";
import { Content } from "@/components/layout/content/content";
import { ScrollArea } from "@/components/ui/scroll-area";
import ActionHeader from "./action-header";

const Page = () => {
	return (
		<>
			<Header title="[Header Title]">
				{/* Header content goes here... */}
			</Header>

			<Content columns={3} sidebar={<Sidebar />} list={<List />}>
				<ActionHeader />
				<ScrollArea className="flex-1">
					{/* Page content goes here... */}
				</ScrollArea>
			</Content>
		</>
	);
};

export default Page;

sidebar.tsx

"use client";

import { ContentSidebar } from "@/components/layout/content/sidebar";
import { Files, Share2, Clock, Rotate3D } from "lucide-react";

export const Sidebar = () => {
	const LINKS = [
		{
			group: "Local Drive",
			items: [
				{
					icon: Files,
					label: "All Files and Folders",
					href: "/file-manager",
				},
				{
					icon: Share2,
					label: "Shared with me",
					href: "#",
				},
				{
					icon: Clock,
					label: "Recently Added",
					href: "#",
				},
				{
					icon: Rotate3D,
					label: "Transfers",
					href: "#",
				},
			],
		},
	];

	return <ContentSidebar data={LINKS} />;
};

action-header.tsx

"use client";

import React from "react";
import ContentHeader from "@/components/layout/content/header";
import { Button } from "@/components/ui/button";
import { useSidebar } from "@/contexts/sidebar";
import { MoveLeft } from "lucide-react";
const { toggleCard } = useContent();

export const ActiontHeader = () => {
	const { toggleContentSidebar } = useSidebar();

	return (
		<ContentHeader>
			<Button variant="ghost" size="icon" className="md:hidden" onClick={() => toggleCard(false)}>
				<MoveLeft className="h-4 w-4" />
			</Button>

			...
		</ContentHeader>
	);
};

list.tsx

import { ContentHeader } from "@/components/layout/content/header";
import { ContentList } from "@/components/layout/content/list";
import { Button } from "@/components/ui/button";
import { ContentSidebarToggle } from "@/components/layout/content/toggle";
import { ListItem } from "@/components/layout/content/list-item";

const Header = () => (
	<ContentHeader>
		<ContentSidebarToggle className="lg:hidden" />

		...
	</ContentHeader>
);

export const List = ({ data, active }: DataProps) => {
	return (
		<ContentList header={<Header />}>
			<ListItem href={"#"}>
				List-item #1		
			</ListItem>
			<ListItem href={"#"}>
				List-item #2		
			</ListItem>
			<ListItem href={"#"}>
				List-item #3		
			</ListItem>
			<ListItem href={"#"}>
				List-item #4	
			</ListItem>
			<ListItem href={"#"}>
				List-item #5		
			</ListItem>
		</ContentList>
	);
}

No Columns - Body only

No columns layout is a simple layout with only the body content. It is useful for pages that don’t need a sidebar or a list.

coming-soon.html

forgot-password.html

import { Content } from "@/components/layout/content/content";

const Page = () => {
	return (
		<Content size="box" fill={true} padding={true}>
			{/* Page content goes here... */}
		</Content>
	);
};

export default Page;

Page Templates

Two Column - Sidebar and Body

Three Column - Sidebar, Content-sidebar and Body

Four Column - Sidebar, Content-sidebar, Content-list and Body

No Columns - Body only

On this page