Tailwind Jun Layout
Documentation

Getting Started

Configuration

Integration

Examples

Docs
Shadcn Sidebar

Shadcn Sidebar

Learn how to integrate with Shadcn Sidebar

Shadcn Sidebar

Shadcn Sidebar is a group of components for building sidebar of the application.

However, the Shadcn sidebar is limited to some features, for example:

  • only left or right sidebar is supported at a time.
  • the header cannot clip the sidebar
  • the components require React context.

Demo

Here is the example demo using Jun Layout and Shadcn Sidebar together.

The right-EdgeSidebar is added to the example to demonstrate the seamless integration.

Integration

Here is the basic setup of Shadcn sidebar:

<SidebarProvider>
  <Sidebar>...</Sidebar>
  <SidebarInset>
    <header>...</header>
    <div>...</div>
  </SidebarInset>
</SidebarProvider>

Step 1: Layout system

insert .jun-layout in between

<SidebarProvider>
  <div className="jun-layout">
    <Sidebar>...</Sidebar>
    <SidebarInset>
      <header>...</header>
      <div>...</div>
    </SidebarInset>
  </div>
</SidebarProvider>

Step 2: Header and Content

Move header out of SidebarInset and apply classes:

<SidebarProvider>
  <div className="jun-layout">
    <Sidebar>...</Sidebar>
    <header className="jun-header">...</header>
    <SidebarInset className="jun-content">...</SidebarInset>
  </div>
</SidebarProvider>

Step 3: configure EdgeSidebar

Wrap Sidebar with .jun-edgeSidebar:

<SidebarProvider>
  <div className="jun-layout">
    <div className="jun-edgeSidebar">
      <div className="jun-edgeContent">
        <Sidebar>...</Sidebar>
      </div>
    </div>
    <header className="jun-header">...</header>
    <SidebarInset className="jun-content">...</SidebarInset>
  </div>
</SidebarProvider>

That's it, Jun Layout works automatically with Shadcn sidebar collapse feature.

Sidebar elementsBlog