Sidebar
A simple sidebar with navigation grouped by section.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">Build Your Application</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-01 --kit shadcnA sidebar with collapsible sections.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">Build Your Application</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
{%- for index in 1..24 %}
<div class="aspect-video h-12 w-full rounded-lg bg-muted/50"></div>
{%- endfor %}
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-02 --kit shadcnA sidebar with submenus.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b">
<div class="flex items-center gap-2 px-3">
<twig:Sidebar:Trigger>
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">
Build Your Application
</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-03 --kit shadcnA floating sidebar with submenus.
100%
Loading...
Copy code
<twig:Sidebar:Provider style="--sidebar-width: 19rem; --sidebar-width-icon: 3rem; --sidebar-width-mobile: 18rem;">
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">Build Your Application</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-04 --kit shadcnA sidebar with collapsible submenus.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">Build Your Application</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-05 --kit shadcnA sidebar with submenus as dropdowns.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">Build Your Application</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-06 --kit shadcnA sidebar that collapses to icons.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
<div class="flex items-center gap-2 px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">
Build Your Application
</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-07 --kit shadcnAn inset sidebar with secondary navigation.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2">
<div class="flex items-center gap-2 px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">Build Your Application</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-08 --kit shadcnCollapsible nested sidebars.
100%
Loading...
Copy code
<twig:Sidebar:Provider style="--sidebar-width: 350px; --sidebar-width-icon: 3rem; --sidebar-width-mobile: 18rem;">
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">All Inboxes</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Inbox</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
{%- for index in 1..24 %}
<div class="aspect-video h-12 w-full rounded-lg bg-muted/50"></div>
{%- endfor %}
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-09 --kit shadcnA sidebar in a popover.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-14 shrink-0 items-center gap-2">
<div class="flex flex-1 items-center gap-2 px-3">
<twig:Sidebar:Trigger>
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page class="line-clamp-1">
Project Management & Task Tracking
</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</div>
<div class="ms-auto px-3">
<twig:NavActions />
</div>
</header>
<div class="flex flex-1 flex-col gap-4 px-4 py-10">
<div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50"></div>
<div class="mx-auto min-h-80 w-full max-w-3xl flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-10 --kit shadcnA sidebar with a collapsible file tree.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">components</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">ui</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>button.tsx</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-11 --kit shadcnA sidebar with a calendar.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:AppSidebar />
<twig:Sidebar:Inset>
<header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
<twig:Sidebar:Trigger class="-ms-1">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>October 2024</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-5">
{%- for i in 1..20 %}
<div class="aspect-square rounded-xl bg-muted/50"></div>
{%- endfor %}
</div>
</div>
</twig:Sidebar:Inset>
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-12 --kit shadcnA sidebar in a dialog.
100%
Loading...
Copy code
<div class="flex items-center justify-center" style="min-height: 540px">
<twig:SettingsDialog />
</div>Copy code
php bin/console ux:install sidebar-13 --kit shadcnA sidebar on the right.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:Sidebar:Inset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item class="hidden md:block">
<twig:Breadcrumb:Link href="#">Build Your Application</twig:Breadcrumb:Link>
</twig:Breadcrumb:Item>
<twig:Breadcrumb:Separator class="hidden md:block" />
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page>Data Fetching</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
<twig:Sidebar:Trigger class="-me-1 ms-auto rotate-180">
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
<twig:AppSidebar side="right" />
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-14 --kit shadcnA left and right sidebar.
100%
Loading...
Copy code
<twig:Sidebar:Provider>
<twig:SidebarLeft />
<twig:Sidebar:Inset>
<header class="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
<div class="flex flex-1 items-center gap-2 px-3">
<twig:Sidebar:Trigger>
<twig:ux:icon name="lucide:panel-left" />
</twig:Sidebar:Trigger>
<twig:Separator
orientation="vertical"
class="me-2 data-vertical:h-4 data-vertical:self-auto"
/>
<twig:Breadcrumb>
<twig:Breadcrumb:List>
<twig:Breadcrumb:Item>
<twig:Breadcrumb:Page class="line-clamp-1">
Project Management & Task Tracking
</twig:Breadcrumb:Page>
</twig:Breadcrumb:Item>
</twig:Breadcrumb:List>
</twig:Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50"></div>
<div class="mx-auto h-96 w-full max-w-3xl rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
<twig:SidebarRight />
</twig:Sidebar:Provider>Copy code
php bin/console ux:install sidebar-15 --kit shadcnA sidebar with a sticky site header.
100%
Loading...
Copy code
<div class="[--header-height:calc(--spacing(14))]">
<twig:Sidebar:Provider class="flex flex-col">
<twig:SiteHeader />
<div class="flex flex-1">
<twig:AppSidebar />
<twig:Sidebar:Inset>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
<div class="aspect-video rounded-xl bg-muted/50"></div>
</div>
<div class="min-h-96 flex-1 rounded-xl bg-muted/50"></div>
</div>
</twig:Sidebar:Inset>
</div>
</twig:Sidebar:Provider>
</div>Copy code
php bin/console ux:install sidebar-16 --kit shadcn