Explore a variety of Tailwind CSS layout examples and templates to help you build responsive and visually appealing web pages. These layouts include a range of different styles and structures to suit various types of websites and applications.
"use client";
import { Menu } from "lucide-react";
import {
Avatar,
Breadcrumb,
Button,
Drawer,
Dropdown,
ListGroup,
Navbar,
Text,
} from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const sections = [
{
title: "Dashboards",
links: ["E-commerce", "Project Management", "CRM"],
},
{
title: "Pages",
links: ["Social Feed", "Profile", "Chat", "File Manager"],
},
];
export default function Layout1() {
return (
<Drawer direction="left">
<div className="lg:grid lg:grid-cols-[16.5rem_1fr] h-full">
<aside className="hidden lg:block border-e border-subtle w-66 sticky top-0 h-screen">
<Sidebar />
</aside>
<Drawer.Content className="w-66 lg:hidden">
<Drawer.Title className="sr-only">Navigation</Drawer.Title>
<Sidebar />
</Drawer.Content>
<div className="pt-15 h-full flex-1">
<Navbar className="bg-default fixed top-0 w-full lg:w-[calc(100%-16.5rem)] border-b border-subtle px-6 justify-start h-15">
<Drawer.Trigger asChild>
<Button
variant="icon"
color={null}
className="lg:hidden"
aria-label="Open navigation"
>
<Menu className="size-4.5" />
</Button>
</Drawer.Trigger>
<Breadcrumb className="ms-5 lg:ms-0">
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="#" className="link link-hover">
Dashboard
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Item active>
<Breadcrumb.Page>E-commerce</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
<Dropdown>
<Dropdown.Trigger asChild>
<button
type="button"
className="ms-auto rounded-full"
aria-label="Account menu"
>
<Avatar size="sm">
<Avatar.Image
src="/images/avatar/avatar_1.webp"
alt="Avatar"
/>
</Avatar>
</button>
</Dropdown.Trigger>
<Dropdown.Content align="end">
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
</Dropdown.Content>
</Dropdown>
</Navbar>
<div className="p-6 flex flex-col h-full">
<div className="grid grid-cols-3 gap-4 md:gap-6">
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
</div>
<div className="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1" />
</div>
</div>
</div>
</Drawer>
);
}
function Sidebar() {
return (
<>
<Drawer.Header className="px-5 py-0 border-b border-subtle h-15 flex items-center">
<a className="flex items-center gap-2 no-underline" href="#">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text as="h6" fontWeight="semibold" className="mb-0 text-muted flex">
hummingbird
</Text>
</a>
</Drawer.Header>
<Drawer.Body className="block p-5 h-[calc(100%-60px)] overflow-y-auto">
{sections.map((section, index) => (
<div key={section.title} className="w-full">
<Text
as="h2"
size="xs"
className={cn("mb-2 text-subtle uppercase", index > 0 && "mt-6")}
>
{section.title}
</Text>
<ListGroup asChild className="w-full bg-transparent gap-0.5">
<div>
{section.links.map((link) => (
<ListGroup.Item
key={link}
asChild
action
active={link === "E-commerce"}
className="rounded-lg text-sm py-2"
>
<a href="#">
<span>{link}</span>
</a>
</ListGroup.Item>
))}
</div>
</ListGroup>
</div>
))}
</Drawer.Body>
</>
);
}"use client";
import { Menu, Search } from "lucide-react";
import {
Avatar,
Button,
Drawer,
Dropdown,
Input,
InputIcon,
ListGroup,
Navbar,
Text,
} from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const sections = [
{
title: "Dashboards",
links: ["E-commerce", "Project Management", "CRM"],
},
{
title: "Pages",
links: ["Social Feed", "Profile", "Chat", "File Manager"],
},
];
export default function Layout2() {
return (
<Drawer direction="left">
<Navbar className="bg-default fixed top-0 w-full border-b border-subtle px-6 justify-between flex h-15 z-1035">
<div className="flex">
<Drawer.Trigger asChild>
<Button
variant="icon"
color={null}
className="me-3 lg:hidden"
aria-label="Open navigation"
>
<Menu className="size-4.5" />
</Button>
</Drawer.Trigger>
<Logo />
</div>
<InputIcon className="w-80 hidden md:block">
<InputIcon.Start>
<Search className="size-5" />
</InputIcon.Start>
<Input
variant="fill"
type="text"
className="rounded-full"
aria-label="Search"
/>
</InputIcon>
<div className="flex gap-2">
<Button
variant="subtle"
color="neutral"
shape="circle"
className="size-8 text-muted md:hidden"
aria-label="Search"
>
<Search className="size-5" />
</Button>
<Dropdown>
<Dropdown.Trigger asChild>
<button
type="button"
className="rounded-full"
aria-label="Account menu"
>
<Avatar size="sm">
<Avatar.Image
src="/images/avatar/avatar_1.webp"
alt="Avatar"
/>
</Avatar>
</button>
</Dropdown.Trigger>
<Dropdown.Content align="end">
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
</Dropdown.Content>
</Dropdown>
</div>
</Navbar>
<div className="lg:grid lg:grid-cols-[16.5rem_1fr] h-full pt-15">
<aside className="hidden lg:block border-e border-subtle w-66 sticky top-15 h-[calc(100vh-60px)] overflow-y-scroll">
<SidebarNav />
</aside>
<Drawer.Content className="w-66 lg:hidden">
<Drawer.Title className="sr-only">Navigation</Drawer.Title>
<Drawer.Header className="px-5 py-0 border-b border-subtle h-15">
<Logo />
</Drawer.Header>
<div className="overflow-y-auto">
<SidebarNav />
</div>
</Drawer.Content>
<div className="p-6 flex flex-col h-full">
<div className="grid grid-cols-3 gap-4 md:gap-6">
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
</div>
<div className="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1" />
</div>
</div>
</Drawer>
);
}
function Logo() {
return (
<a className="flex items-center gap-2 no-underline" href="#">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text as="h6" fontWeight="semibold" className="mb-0 text-muted flex">
hummingbird
</Text>
</a>
);
}
function SidebarNav() {
return (
<Drawer.Body className="block p-5">
{sections.map((section, index) => (
<div key={section.title} className="w-full">
<Text
as="h2"
size="xs"
className={cn("mb-2 text-muted uppercase", index > 0 && "mt-6")}
>
{section.title}
</Text>
<ListGroup asChild className="w-full bg-transparent gap-0.5">
<div>
{section.links.map((link) => (
<ListGroup.Item
key={link}
asChild
action
active={link === "E-commerce"}
className="rounded-lg text-sm py-2"
>
<a href="#">
<span>{link}</span>
</a>
</ListGroup.Item>
))}
</div>
</ListGroup>
</div>
))}
</Drawer.Body>
);
}"use client";
import { ChevronRight, Menu } from "lucide-react";
import {
Avatar,
Breadcrumb,
Button,
Collapsible,
Drawer,
Dropdown,
ListGroup,
Navbar,
Text,
} from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const sections = [
{
title: "Dashboards",
links: ["E-commerce", "Project Management", "CRM"],
},
{
title: "Pages",
links: ["Social Feed", "Profile", "Chat", "File Manager"],
},
];
export default function Layout3() {
return (
<Drawer direction="left">
<div className="lg:grid lg:grid-cols-[16.5rem_1fr] h-full">
<aside className="hidden lg:block border-e border-subtle w-66 sticky top-0 h-screen">
<Sidebar />
</aside>
<Drawer.Content className="w-66 lg:hidden">
<Drawer.Title className="sr-only">Navigation</Drawer.Title>
<Sidebar />
</Drawer.Content>
<div className="pt-15 h-full flex-1">
<Navbar className="bg-default fixed top-0 w-full lg:w-[calc(100%-16.5rem)] border-b border-subtle px-6 justify-start h-15">
<Drawer.Trigger asChild>
<Button
variant="icon"
color={null}
className="lg:hidden"
aria-label="Open navigation"
>
<Menu className="size-4.5" />
</Button>
</Drawer.Trigger>
<Breadcrumb className="ms-5 lg:ms-0">
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="#" className="link link-hover">
Dashboard
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Item active>
<Breadcrumb.Page>E-commerce</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
<Dropdown>
<Dropdown.Trigger asChild>
<button
type="button"
className="ms-auto rounded-full"
aria-label="Account menu"
>
<Avatar size="sm">
<Avatar.Image
src="/images/avatar/avatar_1.webp"
alt="Avatar"
/>
</Avatar>
</button>
</Dropdown.Trigger>
<Dropdown.Content align="end">
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
</Dropdown.Content>
</Dropdown>
</Navbar>
<div className="p-6 flex flex-col h-full">
<div className="grid grid-cols-3 gap-4 md:gap-6">
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
</div>
<div className="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1" />
</div>
</div>
</div>
</Drawer>
);
}
function Sidebar() {
return (
<>
<Drawer.Header className="px-5 py-0 border-b border-subtle h-15 flex items-center">
<a className="flex items-center gap-2 no-underline" href="#">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text as="h6" fontWeight="semibold" className="mb-0 text-muted flex">
hummingbird
</Text>
</a>
</Drawer.Header>
<Drawer.Body className="block py-5 px-2 h-[calc(100%-60px)] overflow-y-auto">
{sections.map((section, index) => (
<div
key={section.title}
className={cn("w-full", index === 0 && "mb-0.5")}
>
<Collapsible defaultOpen asChild>
<ListGroup asChild className="w-full bg-transparent gap-0.5">
<div>
<Collapsible.Trigger asChild>
<ListGroup.Item
asChild
action
className="font-semibold rounded-lg text-sm py-2 flex justify-between items-center group"
>
<button type="button">
{section.title}
<ChevronRight className="size-4.5 group-data-[state=open]:rotate-90 transition-transform" />
</button>
</ListGroup.Item>
</Collapsible.Trigger>
<Collapsible.Content className="flex flex-col gap-0.5">
{section.links.map((link) => (
<ListGroup.Item
key={link}
asChild
action
active={link === "E-commerce"}
className="rounded-lg text-sm py-2 ps-8"
>
<a href="#">
<span>{link}</span>
</a>
</ListGroup.Item>
))}
</Collapsible.Content>
</div>
</ListGroup>
</Collapsible>
</div>
))}
</Drawer.Body>
</>
);
}"use client";
import { Ellipsis, Menu, Search } from "lucide-react";
import {
Avatar,
Breadcrumb,
Button,
Card,
Drawer,
Dropdown,
Input,
InputIcon,
ListGroup,
Navbar,
Text,
} from "@hummingbirdui/react";
const menus = [
{
title: "Getting Started",
links: [
"Introduction",
"Installation",
"Framework Guide",
"JavaScript",
"Accessibility",
],
},
{
title: "Customize",
links: ["Component", "Theming", "Colors", "Dark Mode", "Reboot"],
},
{
title: "Layout & content",
links: ["Container", "Typography", "Background", "Grid", "Shadows"],
},
{
title: "Components",
links: [
"Buttons",
"Avatars",
"Breadcrumbs",
"Dropdown",
"Modal",
"Offcanvas",
"Loader",
"Pagination",
],
},
];
export default function Layout4() {
return (
<Drawer direction="left">
<div className="lg:grid lg:grid-cols-[16.5rem_1fr] h-full">
<aside className="hidden lg:flex flex-col border-e border-subtle w-66 sticky top-0 h-screen">
<Sidebar />
</aside>
<Drawer.Content className="w-66 flex flex-col lg:hidden">
<Drawer.Title className="sr-only">Navigation</Drawer.Title>
<Sidebar />
</Drawer.Content>
<div className="pt-15 h-full flex-1">
<Navbar className="bg-default fixed top-0 w-full lg:w-[calc(100%-16.5rem)] border-b border-subtle px-6 justify-start h-15">
<Drawer.Trigger asChild>
<Button
variant="icon"
color={null}
className="lg:hidden"
aria-label="Open navigation"
>
<Menu className="size-4.5" />
</Button>
</Drawer.Trigger>
<Breadcrumb className="ms-5 lg:ms-0">
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="#" className="link link-hover">
Dashboard
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Item active>
<Breadcrumb.Page>E-commerce</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
<Dropdown>
<Dropdown.Trigger asChild>
<button
type="button"
className="ms-auto rounded-full"
aria-label="Account menu"
>
<Avatar size="sm">
<Avatar.Image
src="/images/avatar/avatar_1.webp"
alt="Avatar"
/>
</Avatar>
</button>
</Dropdown.Trigger>
<Dropdown.Content align="end">
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
</Dropdown.Content>
</Dropdown>
</Navbar>
<div className="p-6 flex flex-col h-full">
<div className="grid grid-cols-3 gap-4 md:gap-6">
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
</div>
<div className="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1" />
</div>
</div>
</div>
</Drawer>
);
}
function Sidebar() {
return (
<>
<Drawer.Header className="px-5 pt-4 flex flex-col items-start">
<a className="flex gap-2 no-underline mb-3" href="#">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text as="h6" fontWeight="semibold" className="mb-0 text-muted">
hummingbird
</Text>
</a>
<InputIcon className="w-full">
<InputIcon.Start>
<Search className="size-4" />
</InputIcon.Start>
<Input size="sm" type="text" aria-label="Search" />
</InputIcon>
</Drawer.Header>
<Drawer.Body className="flex-1 flex flex-col justify-between pt-5 pb-3 px-2">
<ListGroup asChild className="w-full bg-transparent gap-0.5">
<div>
{menus.map((menu, index) => (
<Dropdown key={menu.title}>
<Dropdown.Trigger asChild>
<ListGroup.Item
asChild
action
active={index === 0}
className="rounded-lg text-sm py-2 flex items-center justify-between"
>
<button type="button">
<span>{menu.title}</span>
<Ellipsis className="size-3.5" />
</button>
</ListGroup.Item>
</Dropdown.Trigger>
<Dropdown.Content
side="right"
align="start"
sideOffset={2}
className="py-2"
>
{menu.links.map((link) => (
<Dropdown.Item
key={link}
className={link === "Installation" ? "active" : undefined}
>
{link}
</Dropdown.Item>
))}
</Dropdown.Content>
</Dropdown>
))}
</div>
</ListGroup>
<Card className="mt-auto border-subtle mx-1">
<Card.Body className="p-2">
<Text as="h6" size="base">
Need help?
</Text>
<Card.Text className="text-sm text-muted">
Check out our documentation to get all the information you need to
start working with hummingbird.
</Card.Text>
<Button asChild color="neutral" size="sm" className="w-full">
<a href="#">Documentation</a>
</Button>
</Card.Body>
</Card>
</Drawer.Body>
</>
);
}"use client";
import { ChevronDown, Menu, Search } from "lucide-react";
import {
Avatar,
Button,
Dropdown,
Nav,
Navbar,
Text,
} from "@hummingbirdui/react";
const dashboards = [
"E-commerce",
"Project Management",
"CRM",
"Travel Agency",
"Stock",
];
const apps = [
{
title: "E-commerce",
links: [
"Add Product",
"products",
"Customers",
"Product Details",
"Inventory",
],
},
{ title: "Email", links: ["Inbox", "Email Details", "Compose"] },
{ title: "File Manager", links: ["Grid View", "List View", "Upload"] },
];
const documentation = [
"Getting Started",
"Installation",
"Configuration",
"Framework Guide",
"API Reference",
];
export default function Layout5() {
return (
<>
<Navbar
expand="lg"
className="bg-default fixed top-0 w-full border-b border-subtle px-6 justify-between flex z-1035"
>
<div className="flex items-center">
<Navbar.Toggle className="btn btn-icon">
<Menu className="size-4.5" />
</Navbar.Toggle>
<Navbar.Brand href="#" className="flex items-center gap-2">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text
as="h6"
fontWeight="semibold"
className="mb-0 text-muted flex"
>
hummingbird
</Text>
</Navbar.Brand>
</div>
<div className="flex gap-2 lg:order-1">
<Button
variant="subtle"
color="neutral"
shape="circle"
className="size-8 text-muted"
aria-label="Search"
>
<Search className="size-5" />
</Button>
<Dropdown>
<Dropdown.Trigger asChild>
<button
type="button"
className="rounded-full"
aria-label="Account menu"
>
<Avatar size="sm">
<Avatar.Image
src="/images/avatar/avatar_1.webp"
alt="Avatar"
/>
</Avatar>
</button>
</Dropdown.Trigger>
<Dropdown.Content align="end" className="z-1040">
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
</Dropdown.Content>
</Dropdown>
</div>
<Navbar.Collapse className="grow-0">
<Navbar.Nav className="mb-2 lg:mb-0">
<Nav.Item>
<Dropdown>
<MenuTrigger>Dashboard</MenuTrigger>
<Dropdown.Content align="start" className="z-1040">
{dashboards.map((item) => (
<Dropdown.Item key={item}>{item}</Dropdown.Item>
))}
</Dropdown.Content>
</Dropdown>
</Nav.Item>
<Nav.Item>
<Dropdown>
<MenuTrigger>Apps</MenuTrigger>
<Dropdown.Content align="start" className="z-1040">
{apps.map((app) => (
<Dropdown.Sub key={app.title}>
<Dropdown.SubTrigger>{app.title}</Dropdown.SubTrigger>
<Dropdown.SubContent className="z-1040">
{app.links.map((link) => (
<Dropdown.Item key={link}>{link}</Dropdown.Item>
))}
</Dropdown.SubContent>
</Dropdown.Sub>
))}
</Dropdown.Content>
</Dropdown>
</Nav.Item>
<Nav.Item>
<Dropdown>
<MenuTrigger>Documentation</MenuTrigger>
<Dropdown.Content align="start" className="z-1040">
{documentation.map((item) => (
<Dropdown.Item key={item}>{item}</Dropdown.Item>
))}
</Dropdown.Content>
</Dropdown>
</Nav.Item>
</Navbar.Nav>
</Navbar.Collapse>
</Navbar>
<div className="px-6 pb-6 pt-21 flex flex-col h-full">
<div className="grid grid-cols-3 gap-4 md:gap-6">
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
<div className="bg-muted/50 aspect-video rounded-lg" />
</div>
<div className="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1" />
</div>
</>
);
}
function MenuTrigger({ children }: { children: React.ReactNode }) {
return (
<Dropdown.Trigger asChild>
<button
type="button"
className="nav-link flex items-center gap-1 text-sm"
>
{children}
<ChevronDown className="size-4.5" />
</button>
</Dropdown.Trigger>
);
}