Building Blocks for the Web

Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.

sidebar-01

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            px: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A simple sidebar with navigation grouped by section.

sidebar-01

A sidebar with collapsible sections

Open in New Tab

sidebar-02

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            bg: "bg",
            pos: "sticky",
            top: "0",
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            px: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator orientation="vertical" css={{ mr: "2", h: "4" }} />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          {Array.from({ length: 24 }).map((_, index) => (
            <styled.div
              key={index}
              css={{ bg: "muted/50", aspectRatio: "16/9", h: "12", w: "full", rounded: "lg" }}
            />
          ))}
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar with collapsible sections.

sidebar-02

A sidebar with submenus

Open in New Tab

sidebar-03

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
          }}
        >
          <styled.div css={{ display: "flex", alignItems: "center", gap: "2", px: "3" }}>
            <SidebarTrigger />
            <Separator orientation="vertical" css={{ mr: "2", h: "4" }} />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                  <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
                <BreadcrumbItem>
                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </styled.div>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar with submenus.

sidebar-03

A floating sidebar with submenus

Open in New Tab

sidebar-04

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider
      style={
        {
          "--sidebar-width": "19rem",
        } as React.CSSProperties
      }
    >
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            px: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A floating sidebar with submenus.

sidebar-04

A sidebar with collapsible submenus

Open in New Tab

sidebar-05

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            px: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar with collapsible submenus.

sidebar-05

A sidebar with submenus as dropdowns

Open in New Tab

sidebar-06

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            px: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar with submenus as dropdowns.

sidebar-06

A sidebar that collapses to icons

Open in New Tab

sidebar-07

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            transitionProperty: "width,height",
            transitionTimingFunction: "linear",
            ".group-sidebar-wrapper:has([data-collapsible=icon]) &": { h: "12" },
          }}
        >
          <styled.div css={{ display: "flex", alignItems: "center", gap: "2", px: "4" }}>
            <SidebarTrigger css={{ ml: "-1" }} />
            <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                  <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
                <BreadcrumbItem>
                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </styled.div>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar that collapses to icons.

sidebar-07

An inset sidebar with secondary navigation

Open in New Tab

sidebar-08

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{ display: "flex", h: "16", flexShrink: "0", alignItems: "center", gap: "2" }}
        >
          <styled.div css={{ display: "flex", alignItems: "center", gap: "2", px: "4" }}>
            <SidebarTrigger css={{ ml: "-1" }} />
            <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                  <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
                <BreadcrumbItem>
                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </styled.div>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

An inset sidebar with secondary navigation.

sidebar-08

Collapsible nested sidebars

Open in New Tab

sidebar-09

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider
      style={
        {
          "--sidebar-width": "350px",
        } as React.CSSProperties
      }
    >
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            bg: "bg",
            pos: "sticky",
            top: "0",
            display: "flex",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            p: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator
            orientation="vertical"
            css={{
              mr: "2",
              _vertical: {
                h: "4",
              },
            }}
          />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">All Inboxes</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>Inbox</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          {Array.from({ length: 24 }).map((_, index) => (
            <styled.div
              key={index}
              css={{ bg: "muted/50", aspectRatio: "16/9", w: "full", h: "12", rounded: "lg" }}
            />
          ))}
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

Collapsible nested sidebars.

sidebar-09

A sidebar in a popover

Open in New Tab

sidebar-10

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import { NavActions } from "@/components/nav-actions";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{ display: "flex", h: "14", flexShrink: "0", alignItems: "center", gap: "2" }}
        >
          <styled.div css={{ display: "flex", flex: "1", alignItems: "center", gap: "2", px: "3" }}>
            <SidebarTrigger />
            <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbPage css={{ lineClamp: "1" }}>
                    Project Management & Task Tracking
                  </BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </styled.div>
          <styled.div css={{ ml: "auto", px: "3" }}>
            <NavActions />
          </styled.div>
        </styled.header>
        <styled.div
          css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", px: "4", py: "10" }}
        >
          <styled.div
            css={{ bg: "muted/50", mx: "auto", h: "24", w: "full", maxW: "3xl", rounded: "xl" }}
          />
          <styled.div
            css={{ bg: "muted/50", mx: "auto", h: "full", w: "full", maxW: "3xl", rounded: "xl" }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar in a popover.

sidebar-10

A sidebar with a collapsible file tree

Open in New Tab

sidebar-11

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            px: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">components</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">ui</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>button.tsx</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar with a collapsible file tree.

sidebar-11

A sidebar with a calendar

Open in New Tab

sidebar-12

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <styled.header
          css={{
            bg: "bg",
            pos: "sticky",
            top: "0",
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            px: "4",
          }}
        >
          <SidebarTrigger css={{ ml: "-1" }} />
          <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbPage>October 2024</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(5, minmax(0, 1fr))" },
            }}
          >
            {Array.from({ length: 20 }).map((_, i) => (
              <styled.div key={i} css={{ bg: "muted/50", aspectRatio: "square", rounded: "xl" }} />
            ))}
          </styled.div>
        </styled.div>
      </SidebarInset>
    </SidebarProvider>
  );
}

A sidebar with a calendar.

sidebar-12

A sidebar in a dialog

Open in New Tab

sidebar-13

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { SettingsDialog } from "@/components/settings-dialog";

export default function Page() {
  return (
    <styled.div css={{ display: "flex", h: "svh", alignItems: "center", justifyContent: "center" }}>
      <SettingsDialog />
    </styled.div>
  );
}

A sidebar in a dialog.

sidebar-13

A sidebar on the right

Open in New Tab

sidebar-14

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <SidebarInset>
        <styled.header
          css={{
            display: "flex",
            h: "16",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
            borderBottomWidth: "1px",
            px: "4",
          }}
        >
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem css={{ display: "none", md: { display: "block" } }}>
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator css={{ display: "none", md: { display: "block" } }} />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <SidebarTrigger css={{ mr: "-1", ml: "auto", transform: "rotate(180deg)" }} />
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{
              display: "grid",
              gridAutoRows: "min",
              gap: "4",
              md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
            }}
          >
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
            <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
          </styled.div>
          <styled.div
            css={{ bg: "muted/50", minH: "100vh", flex: "1", rounded: "xl", md: { minH: "min" } }}
          />
        </styled.div>
      </SidebarInset>
      <AppSidebar side="right" />
    </SidebarProvider>
  );
}

A sidebar on the right.

sidebar-14

A left and right sidebar

Open in New Tab

sidebar-15

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { SidebarLeft } from "@/components/sidebar-left";
import { SidebarRight } from "@/components/sidebar-right";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from "@/components/ui/breadcrumb";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Page() {
  return (
    <SidebarProvider>
      <SidebarLeft />
      <SidebarInset>
        <styled.header
          css={{
            bg: "bg",
            pos: "sticky",
            top: "0",
            display: "flex",
            h: "14",
            flexShrink: "0",
            alignItems: "center",
            gap: "2",
          }}
        >
          <styled.div css={{ display: "flex", flex: "1", alignItems: "center", gap: "2", px: "3" }}>
            <SidebarTrigger />
            <Separator orientation="vertical" css={{ mr: "2", _vertical: { h: "4" } }} />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbPage css={{ lineClamp: "1" }}>
                    Project Management & Task Tracking
                  </BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </styled.div>
        </styled.header>
        <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
          <styled.div
            css={{ bg: "muted/50", mx: "auto", h: "24", w: "full", maxW: "3xl", rounded: "xl" }}
          />
          <styled.div
            css={{ bg: "muted/50", mx: "auto", h: "100vh", w: "full", maxW: "3xl", rounded: "xl" }}
          />
        </styled.div>
      </SidebarInset>
      <SidebarRight />
    </SidebarProvider>
  );
}

A left and right sidebar.

sidebar-15

A sidebar with a sticky site header

Open in New Tab

sidebar-16

app/dashboard/page.tsx

import { styled } from "styled-system/jsx";
import { AppSidebar } from "@/components/app-sidebar";
import { SiteHeader } from "@/components/site-header";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";

export const iframeHeight = "800px";

export const description = "A sidebar with a header and a search form.";

export default function Page() {
  return (
    <styled.div
      css={{
        "--header-height": "3.5rem",
      }}
    >
      <SidebarProvider css={{ display: "flex", flexDir: "column" }}>
        <SiteHeader />
        <styled.div css={{ display: "flex", flex: "1" }}>
          <AppSidebar />
          <SidebarInset>
            <styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "4", p: "4" }}>
              <styled.div
                css={{
                  display: "grid",
                  gridAutoRows: "min",
                  gap: "4",
                  md: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" },
                }}
              >
                <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
                <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
                <styled.div css={{ bg: "muted/50", aspectRatio: "16/9", rounded: "xl" }} />
              </styled.div>
              <styled.div
                css={{
                  bg: "muted/50",
                  minH: "100vh",
                  flex: "1",
                  rounded: "xl",
                  md: { minH: "min" },
                }}
              />
            </styled.div>
          </SidebarInset>
        </styled.div>
      </SidebarProvider>
    </styled.div>
  );
}

A sidebar with a sticky site header.

sidebar-16