Application
Application shell
A sidebar that becomes a Sheet on phones, with a header for search, notifications, the theme and the account menu.
<script>
try { const theme = localStorage.getItem('plf-theme'); if (theme) document.currentScript.closest('[data-plf-root]').dataset.plfTheme = theme; } catch {}
</script>
<div class="drawer drawer-sticky bg-base-100" data-plf-sidebar data-plf-indicator>
<a class="not-focus-within:sr-only btn btn-outline absolute top-2 start-2 z-50" href="#main-content">Skip to content</a>
<div class="drawer-body">
<aside class="sidebar" aria-label="Workspace sidebar">
<header class="sidebar-header">
<div class="dropdown sidebar-control" data-plf-dropdown-menu data-plf-placement="right" data-plf-align="start">
<button class="sidebar-link sidebar-identity" aria-label="Switch workspace, Pelatform Pro plan">
<span class="sidebar-identity-icon" style="border-radius: var(--plf-radius-lg); background: var(--plf-color-primary); color: var(--plf-color-on-primary)">
<span class="icon icon-stack-2"></span>
</span>
<span class="sidebar-label">
<span class="sidebar-name">Pelatform</span>
<span class="sidebar-description">Pro plan</span>
</span>
<span class="icon icon-selector sidebar-chevron"></span>
</button>
<div class="dropdown-content menu" aria-label="Workspace switcher" hidden>
<div class="menu-title">Workspaces</div>
<button class="menu-item"><span class="icon icon-stack-2"></span><span>Pelatform</span></button>
<button class="menu-item"><span class="icon icon-stack-2"></span><span>Orbit</span></button>
<button class="menu-item"><span class="icon icon-stack-2"></span><span>Personal</span></button>
</div>
</div>
</header>
<nav class="sidebar-content" aria-label="Main">
<div class="sidebar-group">
<p class="sidebar-group-label sidebar-label">Platform</p>
<ul class="sidebar-menu" role="list">
<li>
<a class="sidebar-link" href="#" aria-current="page">
<span class="icon icon-layout-dashboard"></span>
<span class="sidebar-label">Dashboard</span>
</a>
</li>
<li>
<a class="sidebar-link" href="#">
<span class="icon icon-building"></span>
<span class="sidebar-label">Customers</span>
</a>
</li>
<li>
<a class="sidebar-link" href="#">
<span class="icon icon-receipt"></span>
<span class="sidebar-label">Invoices</span>
</a>
</li>
</ul>
</div>
<details class="collapse sidebar-group">
<summary class="collapse-trigger sidebar-link">
<span class="icon icon-chart-column"></span>
<span class="collapse-title sidebar-label">Reports</span>
</summary>
<div class="collapse-content sidebar-group-content">
<ul class="sidebar-submenu" role="list">
<li>
<a class="sidebar-link sidebar-sub-link" href="#">
<span class="sidebar-label">Revenue</span>
</a>
</li>
<li>
<a class="sidebar-link sidebar-sub-link" href="#">
<span class="sidebar-label">Growth</span>
</a>
</li>
<li>
<a class="sidebar-link sidebar-sub-link" href="#">
<span class="sidebar-label">Churn</span>
</a>
</li>
</ul>
</div>
</details>
<div class="sidebar-group">
<p class="sidebar-group-label sidebar-label">Workspace</p>
<ul class="sidebar-menu" role="list">
<li>
<a class="sidebar-link" href="#">
<span class="icon icon-users"></span>
<span class="sidebar-label">Team</span>
</a>
</li>
<li>
<a class="sidebar-link" href="#">
<span class="icon icon-credit-card"></span>
<span class="sidebar-label">Billing</span>
</a>
</li>
<li>
<a class="sidebar-link" href="#">
<span class="icon icon-settings"></span>
<span class="sidebar-label">Settings</span>
</a>
</li>
</ul>
</div>
</nav>
<footer class="sidebar-footer">
<ul class="sidebar-menu" role="list">
<li>
<a class="sidebar-link" href="#">
<span class="icon icon-lifebuoy"></span>
<span class="sidebar-label">Help and support</span>
</a>
</li>
</ul>
</footer>
</aside>
<div class="drawer-content">
<header class="sticky z-10 flex items-center gap-2 border-b border-base-300 bg-base-100 px-4 py-3 lg:px-6" style="top: var(--plf-sidebar-top, 0px)">
<button class="btn btn-ghost btn-square" data-plf-sidebar-toggle aria-label="Toggle navigation" hidden>
<span class="icon icon-layout-sidebar"></span>
</button>
<span class="divider divider-horizontal h-4 self-center"></span>
<button class="btn btn-outline" data-plf-trigger="modal:open" data-plf-target="app-search" aria-label="Search" aria-keyshortcuts="Control+K Meta+K">
<span class="icon icon-search"></span>
<span class="hidden md:flex w-48 items-center justify-between">Search<kbd class="kbd">⌘K</kbd></span>
</button>
<dialog class="modal command-dialog" data-plf-modal id="app-search" aria-label="Search">
<div class="command" data-plf-command>
<div class="command-search" hidden>
<input class="command-input" type="text" aria-label="Search pages and actions" placeholder="Search pages or actions…" autocomplete="off" spellcheck="false" autofocus>
<button class="command-clear" aria-label="Clear search"></button>
</div>
<div class="command-list">
<section class="command-group">
<h3 class="command-heading">Pages</h3>
<ul class="command-items">
<li class="command-row">
<a class="command-item" href="#" data-plf-command-item="dashboard" data-plf-keywords="overview revenue">
<span class="icon icon-layout-dashboard"></span>
<span class="command-label" data-plf-command-label>Dashboard</span>
</a>
</li>
<li class="command-row">
<a class="command-item" href="#" data-plf-command-item="customers" data-plf-keywords="accounts companies">
<span class="icon icon-building"></span>
<span class="command-label" data-plf-command-label>Customers</span>
</a>
</li>
<li class="command-row">
<a class="command-item" href="#" data-plf-command-item="invoices" data-plf-keywords="billing payments">
<span class="icon icon-receipt"></span>
<span class="command-label" data-plf-command-label>Invoices</span>
</a>
</li>
<li class="command-row">
<a class="command-item" href="#" data-plf-command-item="revenue" data-plf-keywords="reports income">
<span class="icon icon-chart-column"></span>
<span class="command-label" data-plf-command-label>Revenue</span>
</a>
</li>
<li class="command-row">
<a class="command-item" href="#" data-plf-command-item="growth" data-plf-keywords="reports new customers">
<span class="icon icon-trending-up"></span>
<span class="command-label" data-plf-command-label>Growth</span>
</a>
</li>
<li class="command-row">
<a class="command-item" href="#" data-plf-command-item="churn" data-plf-keywords="reports cancellations">
<span class="icon icon-trending-down"></span>
<span class="command-label" data-plf-command-label>Churn</span>
</a>
</li>
<li class="command-row">
<a class="command-item" href="#" data-plf-command-item="settings" data-plf-keywords="workspace preferences">
<span class="icon icon-settings"></span>
<span class="command-label" data-plf-command-label>Settings</span>
</a>
</li>
</ul>
</section>
<hr class="command-separator">
<section class="command-group">
<h3 class="command-heading">Actions</h3>
<ul class="command-items">
<li class="command-row">
<button class="command-item" data-plf-command-item="create-invoice" data-plf-keywords="new bill">
<span class="icon icon-plus"></span>
<span class="command-label" data-plf-command-label>Create invoice</span>
</button>
</li>
<li class="command-row">
<button class="command-item" data-plf-command-item="invite-member" data-plf-keywords="team people">
<span class="icon icon-user-plus"></span>
<span class="command-label" data-plf-command-label>Invite member</span>
</button>
</li>
</ul>
</section>
</div>
<p class="command-empty" data-plf-command-empty hidden>No results. Try a page name or keyword.</p>
<div class="command-footer" data-plf-command-help hidden>
<span><kbd class="command-key">↑ ↓</kbd> Navigate · <kbd class="command-key">Enter</kbd> Open</span>
<button class="modal-close" data-plf-trigger="modal:close" aria-label="Close search">Close</button>
</div>
</div>
</dialog>
<div class="ms-auto flex items-center gap-1">
<div class="popover" data-plf-popover data-plf-align="end">
<button class="btn btn-ghost btn-square relative" aria-label="Notifications, 3 unread">
<span class="icon icon-bell"></span>
<span class="absolute top-2 end-2 size-2 rounded-full bg-error"></span>
</button>
<div class="popover-content p-3" style="--plf-popover-width: 22rem; --plf-item-padding: var(--plf-space-2)" hidden>
<div class="flex items-center justify-between gap-2">
<h2 class="popover-title m-0">Notifications</h2>
<button class="btn btn-ghost btn-sm btn-square" data-plf-popover-close aria-label="Close notifications">
<span class="icon icon-x"></span>
</button>
</div>
<div data-plf-tabs>
<div class="tabs tabs-border gap-4" role="tablist" aria-label="Notification filter" style="--plf-tabs-height: var(--plf-control-height-sm); --plf-tabs-padding-inline: 0">
<button class="tab" role="tab" aria-selected="true">All</button>
<button class="tab" role="tab">Unread <span class="badge">3</span></button>
</div>
<div class="tab-content py-2" role="tabpanel">
<ul class="item-group gap-0" role="list">
<li>
<a class="item item-sm" href="#">
<span class="item-media"><span class="icon icon-sparkles text-primary"></span></span>
<span class="item-content">
<span class="item-title truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time class="text-xs text-base-content/70" datetime="2026-10-24T10:42">10:42</time>
<span class="sr-only">Unread</span>
</a>
</li>
<li>
<a class="item item-sm" href="#">
<span class="item-media">
<span class="icon icon-circle-check text-success"></span>
</span>
<span class="item-content">
<span class="item-title truncate">Lumen Analytics paid INV-2050</span>
</span>
<time class="text-xs text-base-content/70" datetime="2026-10-24T09:58">09:58</time>
<span class="sr-only">Unread</span>
</a>
</li>
<li>
<a class="item item-sm" href="#">
<span class="item-media">
<span class="icon icon-alert-triangle text-error"></span>
</span>
<span class="item-content">
<span class="item-title truncate">Payment failed for Orchid Finance</span>
</span>
<time class="text-xs text-base-content/70" datetime="2026-10-24T09:15">09:15</time>
<span class="sr-only">Unread</span>
</a>
</li>
<li>
<a class="item item-sm text-base-content/70" href="#">
<span class="item-media">
<span class="icon icon-clock text-base-content/50"></span>
</span>
<span class="item-content">
<span class="item-title truncate font-normal">Juniper Health started a trial</span>
</span>
<time class="text-xs" datetime="2026-10-23T16:20">23 Oct</time>
</a>
</li>
</ul>
</div>
<div class="tab-content py-2" role="tabpanel">
<ul class="item-group gap-0" role="list">
<li>
<a class="item item-sm" href="#">
<span class="item-media"><span class="icon icon-sparkles text-primary"></span></span>
<span class="item-content">
<span class="item-title truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time class="text-xs text-base-content/70" datetime="2026-10-24T10:42">10:42</time>
<span class="sr-only">Unread</span>
</a>
</li>
<li>
<a class="item item-sm" href="#">
<span class="item-media">
<span class="icon icon-circle-check text-success"></span>
</span>
<span class="item-content">
<span class="item-title truncate">Lumen Analytics paid INV-2050</span>
</span>
<time class="text-xs text-base-content/70" datetime="2026-10-24T09:58">09:58</time>
<span class="sr-only">Unread</span>
</a>
</li>
<li>
<a class="item item-sm" href="#">
<span class="item-media">
<span class="icon icon-alert-triangle text-error"></span>
</span>
<span class="item-content">
<span class="item-title truncate">Payment failed for Orchid Finance</span>
</span>
<time class="text-xs text-base-content/70" datetime="2026-10-24T09:15">09:15</time>
<span class="sr-only">Unread</span>
</a>
</li>
</ul>
</div>
</div>
<div class="flex items-center justify-between border-t border-base-300 pt-2">
<button class="btn btn-ghost btn-sm">Mark all as read</button>
<a class="btn btn-ghost btn-sm" href="#">View all</a>
</div>
</div>
</div>
<div class="dropdown" data-plf-dropdown-menu data-plf-align="end" data-plf-theme-switch hidden>
<button class="btn btn-ghost btn-square" aria-label="Color theme">
<span class="icon icon-sun" data-plf-theme-switch-icon="light"></span>
<span class="icon icon-moon" data-plf-theme-switch-icon="dark"></span>
<span class="icon icon-device-desktop" data-plf-theme-switch-icon="auto"></span>
</button>
<div class="dropdown-content menu" hidden>
<button class="menu-item" value="light">
<span class="menu-text">Light</span>
</button>
<button class="menu-item" value="dark">
<span class="menu-text">Dark</span>
</button>
<button class="menu-item" value="auto">
<span class="menu-text">Auto</span>
</button>
</div>
</div>
<div class="dropdown" data-plf-dropdown-menu data-plf-align="end">
<button class="btn btn-ghost btn-circle p-0" aria-label="Account for John Doe">
<span class="avatar avatar-sm">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="">
</span>
</button>
<div class="dropdown-content menu" aria-label="Account actions" hidden>
<div class="item item-sm" style="--plf-item-padding: var(--plf-space-2); flex-wrap: nowrap">
<span class="item-media">
<span class="avatar avatar-sm">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="">
</span>
</span>
<div class="item-content">
<p class="item-title">John Doe</p>
<p class="item-description">john@example.com</p>
</div>
</div>
<hr class="menu-separator">
<button class="menu-item">
<span class="icon icon-sparkles"></span>
<span>Upgrade to Enterprise</span>
</button>
<hr class="menu-separator">
<button class="menu-item"><span class="icon icon-user"></span><span>Account</span></button>
<button class="menu-item">
<span class="icon icon-credit-card"></span>
<span>Billing</span>
</button>
<button class="menu-item">
<span class="icon icon-bell"></span>
<span>Notifications</span>
</button>
<button class="menu-item">
<span class="icon icon-settings"></span>
<span>Preferences</span>
</button>
<hr class="menu-separator">
<button class="menu-item menu-item-error">
<span class="icon icon-logout"></span>
<span>Log out</span>
</button>
</div>
</div>
</div>
</header>
<main class="flex flex-col gap-4 p-4 md:gap-6 lg:p-6" id="main-content">
<!-- Page content -->
</main>
</div>
</div>
<dialog class="modal sheet sheet-start sidebar-dialog" aria-label="Navigation">
<button class="modal-close sheet-close" aria-label="Close navigation" data-plf-trigger="modal:close"></button>
<div class="sheet-body sidebar-mobile-content"></div>
</dialog>
</div>
<script>
{
const layout = document.currentScript.previousElementSibling;
try { if (localStorage.getItem('plf-sidebar') === 'collapsed') layout.setAttribute('data-plf-collapsed', ''); } catch {}
layout.addEventListener('plf:sidebar:change', event => {
try { localStorage.setItem('plf-sidebar', event.detail.collapsed ? 'collapsed' : 'expanded'); } catch {}
});
}
document.addEventListener('plf:theme-switch:change', event => {
try { localStorage.setItem('plf-theme', event.detail.value); } catch {}
});
</script><script>
try { const theme = localStorage.getItem('plf-theme'); if (theme) document.currentScript.closest('[data-plf-root]').dataset.plfTheme = theme; } catch {}
</script>
<div class="plf:drawer plf:drawer-sticky plf:bg-base-100" data-plf-sidebar data-plf-indicator>
<a class="plf:not-focus-within:sr-only plf:btn plf:btn-outline plf:absolute plf:top-2 plf:start-2 plf:z-50" href="#main-content">Skip to content</a>
<div class="plf:drawer-body">
<aside class="plf:sidebar" aria-label="Workspace sidebar">
<header class="plf:sidebar-header">
<div class="plf:dropdown plf:sidebar-control" data-plf-dropdown-menu data-plf-placement="right" data-plf-align="start">
<button class="plf:sidebar-link plf:sidebar-identity" aria-label="Switch workspace, Pelatform Pro plan">
<span class="plf:sidebar-identity-icon" style="border-radius: var(--plf-radius-lg); background: var(--plf-color-primary); color: var(--plf-color-on-primary)">
<span class="plf:icon plf:icon-stack-2"></span>
</span>
<span class="plf:sidebar-label">
<span class="plf:sidebar-name">Pelatform</span>
<span class="plf:sidebar-description">Pro plan</span>
</span>
<span class="plf:icon plf:icon-selector plf:sidebar-chevron"></span>
</button>
<div class="plf:dropdown-content plf:menu" aria-label="Workspace switcher" hidden>
<div class="plf:menu-title">Workspaces</div>
<button class="plf:menu-item"><span class="plf:icon plf:icon-stack-2"></span><span>Pelatform</span></button>
<button class="plf:menu-item"><span class="plf:icon plf:icon-stack-2"></span><span>Orbit</span></button>
<button class="plf:menu-item"><span class="plf:icon plf:icon-stack-2"></span><span>Personal</span></button>
</div>
</div>
</header>
<nav class="plf:sidebar-content" aria-label="Main">
<div class="plf:sidebar-group">
<p class="plf:sidebar-group-label plf:sidebar-label">Platform</p>
<ul class="plf:sidebar-menu" role="list">
<li>
<a class="plf:sidebar-link" href="#" aria-current="page">
<span class="plf:icon plf:icon-layout-dashboard"></span>
<span class="plf:sidebar-label">Dashboard</span>
</a>
</li>
<li>
<a class="plf:sidebar-link" href="#">
<span class="plf:icon plf:icon-building"></span>
<span class="plf:sidebar-label">Customers</span>
</a>
</li>
<li>
<a class="plf:sidebar-link" href="#">
<span class="plf:icon plf:icon-receipt"></span>
<span class="plf:sidebar-label">Invoices</span>
</a>
</li>
</ul>
</div>
<details class="plf:collapse plf:sidebar-group">
<summary class="plf:collapse-trigger plf:sidebar-link">
<span class="plf:icon plf:icon-chart-column"></span>
<span class="plf:collapse-title plf:sidebar-label">Reports</span>
</summary>
<div class="plf:collapse-content plf:sidebar-group-content">
<ul class="plf:sidebar-submenu" role="list">
<li>
<a class="plf:sidebar-link plf:sidebar-sub-link" href="#">
<span class="plf:sidebar-label">Revenue</span>
</a>
</li>
<li>
<a class="plf:sidebar-link plf:sidebar-sub-link" href="#">
<span class="plf:sidebar-label">Growth</span>
</a>
</li>
<li>
<a class="plf:sidebar-link plf:sidebar-sub-link" href="#">
<span class="plf:sidebar-label">Churn</span>
</a>
</li>
</ul>
</div>
</details>
<div class="plf:sidebar-group">
<p class="plf:sidebar-group-label plf:sidebar-label">Workspace</p>
<ul class="plf:sidebar-menu" role="list">
<li>
<a class="plf:sidebar-link" href="#">
<span class="plf:icon plf:icon-users"></span>
<span class="plf:sidebar-label">Team</span>
</a>
</li>
<li>
<a class="plf:sidebar-link" href="#">
<span class="plf:icon plf:icon-credit-card"></span>
<span class="plf:sidebar-label">Billing</span>
</a>
</li>
<li>
<a class="plf:sidebar-link" href="#">
<span class="plf:icon plf:icon-settings"></span>
<span class="plf:sidebar-label">Settings</span>
</a>
</li>
</ul>
</div>
</nav>
<footer class="plf:sidebar-footer">
<ul class="plf:sidebar-menu" role="list">
<li>
<a class="plf:sidebar-link" href="#">
<span class="plf:icon plf:icon-lifebuoy"></span>
<span class="plf:sidebar-label">Help and support</span>
</a>
</li>
</ul>
</footer>
</aside>
<div class="plf:drawer-content">
<header class="plf:sticky plf:z-10 plf:flex plf:items-center plf:gap-2 plf:border-b plf:border-base-300 plf:bg-base-100 plf:px-4 plf:py-3 plf:lg:px-6" style="top: var(--plf-sidebar-top, 0px)">
<button class="plf:btn plf:btn-ghost plf:btn-square" data-plf-sidebar-toggle aria-label="Toggle navigation" hidden>
<span class="plf:icon plf:icon-layout-sidebar"></span>
</button>
<span class="plf:divider plf:divider-horizontal plf:h-4 plf:self-center"></span>
<button class="plf:btn plf:btn-outline" data-plf-trigger="modal:open" data-plf-target="app-search" aria-label="Search" aria-keyshortcuts="Control+K Meta+K">
<span class="plf:icon plf:icon-search"></span>
<span class="plf:hidden plf:md:flex plf:w-48 plf:items-center plf:justify-between">Search<kbd class="plf:kbd">⌘K</kbd></span>
</button>
<dialog class="plf:modal plf:command-dialog" data-plf-modal id="app-search" aria-label="Search">
<div class="plf:command" data-plf-command>
<div class="plf:command-search" hidden>
<input class="plf:command-input" type="text" aria-label="Search pages and actions" placeholder="Search pages or actions…" autocomplete="off" spellcheck="false" autofocus>
<button class="plf:command-clear" aria-label="Clear search"></button>
</div>
<div class="plf:command-list">
<section class="plf:command-group">
<h3 class="plf:command-heading">Pages</h3>
<ul class="plf:command-items">
<li class="plf:command-row">
<a class="plf:command-item" href="#" data-plf-command-item="dashboard" data-plf-keywords="overview revenue">
<span class="plf:icon plf:icon-layout-dashboard"></span>
<span class="plf:command-label" data-plf-command-label>Dashboard</span>
</a>
</li>
<li class="plf:command-row">
<a class="plf:command-item" href="#" data-plf-command-item="customers" data-plf-keywords="accounts companies">
<span class="plf:icon plf:icon-building"></span>
<span class="plf:command-label" data-plf-command-label>Customers</span>
</a>
</li>
<li class="plf:command-row">
<a class="plf:command-item" href="#" data-plf-command-item="invoices" data-plf-keywords="billing payments">
<span class="plf:icon plf:icon-receipt"></span>
<span class="plf:command-label" data-plf-command-label>Invoices</span>
</a>
</li>
<li class="plf:command-row">
<a class="plf:command-item" href="#" data-plf-command-item="revenue" data-plf-keywords="reports income">
<span class="plf:icon plf:icon-chart-column"></span>
<span class="plf:command-label" data-plf-command-label>Revenue</span>
</a>
</li>
<li class="plf:command-row">
<a class="plf:command-item" href="#" data-plf-command-item="growth" data-plf-keywords="reports new customers">
<span class="plf:icon plf:icon-trending-up"></span>
<span class="plf:command-label" data-plf-command-label>Growth</span>
</a>
</li>
<li class="plf:command-row">
<a class="plf:command-item" href="#" data-plf-command-item="churn" data-plf-keywords="reports cancellations">
<span class="plf:icon plf:icon-trending-down"></span>
<span class="plf:command-label" data-plf-command-label>Churn</span>
</a>
</li>
<li class="plf:command-row">
<a class="plf:command-item" href="#" data-plf-command-item="settings" data-plf-keywords="workspace preferences">
<span class="plf:icon plf:icon-settings"></span>
<span class="plf:command-label" data-plf-command-label>Settings</span>
</a>
</li>
</ul>
</section>
<hr class="plf:command-separator">
<section class="plf:command-group">
<h3 class="plf:command-heading">Actions</h3>
<ul class="plf:command-items">
<li class="plf:command-row">
<button class="plf:command-item" data-plf-command-item="create-invoice" data-plf-keywords="new bill">
<span class="plf:icon plf:icon-plus"></span>
<span class="plf:command-label" data-plf-command-label>Create invoice</span>
</button>
</li>
<li class="plf:command-row">
<button class="plf:command-item" data-plf-command-item="invite-member" data-plf-keywords="team people">
<span class="plf:icon plf:icon-user-plus"></span>
<span class="plf:command-label" data-plf-command-label>Invite member</span>
</button>
</li>
</ul>
</section>
</div>
<p class="plf:command-empty" data-plf-command-empty hidden>No results. Try a page name or keyword.</p>
<div class="plf:command-footer" data-plf-command-help hidden>
<span><kbd class="plf:command-key">↑ ↓</kbd> Navigate · <kbd class="plf:command-key">Enter</kbd> Open</span>
<button class="plf:modal-close" data-plf-trigger="modal:close" aria-label="Close search">Close</button>
</div>
</div>
</dialog>
<div class="plf:ms-auto plf:flex plf:items-center plf:gap-1">
<div class="plf:popover" data-plf-popover data-plf-align="end">
<button class="plf:btn plf:btn-ghost plf:btn-square plf:relative" aria-label="Notifications, 3 unread">
<span class="plf:icon plf:icon-bell"></span>
<span class="plf:absolute plf:top-2 plf:end-2 plf:size-2 plf:rounded-full plf:bg-error"></span>
</button>
<div class="plf:popover-content plf:p-3" style="--plf-popover-width: 22rem; --plf-item-padding: var(--plf-space-2)" hidden>
<div class="plf:flex plf:items-center plf:justify-between plf:gap-2">
<h2 class="plf:popover-title plf:m-0">Notifications</h2>
<button class="plf:btn plf:btn-ghost plf:btn-sm plf:btn-square" data-plf-popover-close aria-label="Close notifications">
<span class="plf:icon plf:icon-x"></span>
</button>
</div>
<div data-plf-tabs>
<div class="plf:tabs plf:tabs-border plf:gap-4" role="tablist" aria-label="Notification filter" style="--plf-tabs-height: var(--plf-control-height-sm); --plf-tabs-padding-inline: 0">
<button class="plf:tab" role="tab" aria-selected="true">All</button>
<button class="plf:tab" role="tab">Unread <span class="plf:badge">3</span></button>
</div>
<div class="plf:tab-content plf:py-2" role="tabpanel">
<ul class="plf:item-group plf:gap-0" role="list">
<li>
<a class="plf:item plf:item-sm" href="#">
<span class="plf:item-media"><span class="plf:icon plf:icon-sparkles plf:text-primary"></span></span>
<span class="plf:item-content">
<span class="plf:item-title plf:truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time class="plf:text-xs plf:text-base-content/70" datetime="2026-10-24T10:42">10:42</time>
<span class="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a class="plf:item plf:item-sm" href="#">
<span class="plf:item-media">
<span class="plf:icon plf:icon-circle-check plf:text-success"></span>
</span>
<span class="plf:item-content">
<span class="plf:item-title plf:truncate">Lumen Analytics paid INV-2050</span>
</span>
<time class="plf:text-xs plf:text-base-content/70" datetime="2026-10-24T09:58">09:58</time>
<span class="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a class="plf:item plf:item-sm" href="#">
<span class="plf:item-media">
<span class="plf:icon plf:icon-alert-triangle plf:text-error"></span>
</span>
<span class="plf:item-content">
<span class="plf:item-title plf:truncate">Payment failed for Orchid Finance</span>
</span>
<time class="plf:text-xs plf:text-base-content/70" datetime="2026-10-24T09:15">09:15</time>
<span class="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a class="plf:item plf:item-sm plf:text-base-content/70" href="#">
<span class="plf:item-media">
<span class="plf:icon plf:icon-clock plf:text-base-content/50"></span>
</span>
<span class="plf:item-content">
<span class="plf:item-title plf:truncate plf:font-normal">Juniper Health started a trial</span>
</span>
<time class="plf:text-xs" datetime="2026-10-23T16:20">23 Oct</time>
</a>
</li>
</ul>
</div>
<div class="plf:tab-content plf:py-2" role="tabpanel">
<ul class="plf:item-group plf:gap-0" role="list">
<li>
<a class="plf:item plf:item-sm" href="#">
<span class="plf:item-media"><span class="plf:icon plf:icon-sparkles plf:text-primary"></span></span>
<span class="plf:item-content">
<span class="plf:item-title plf:truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time class="plf:text-xs plf:text-base-content/70" datetime="2026-10-24T10:42">10:42</time>
<span class="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a class="plf:item plf:item-sm" href="#">
<span class="plf:item-media">
<span class="plf:icon plf:icon-circle-check plf:text-success"></span>
</span>
<span class="plf:item-content">
<span class="plf:item-title plf:truncate">Lumen Analytics paid INV-2050</span>
</span>
<time class="plf:text-xs plf:text-base-content/70" datetime="2026-10-24T09:58">09:58</time>
<span class="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a class="plf:item plf:item-sm" href="#">
<span class="plf:item-media">
<span class="plf:icon plf:icon-alert-triangle plf:text-error"></span>
</span>
<span class="plf:item-content">
<span class="plf:item-title plf:truncate">Payment failed for Orchid Finance</span>
</span>
<time class="plf:text-xs plf:text-base-content/70" datetime="2026-10-24T09:15">09:15</time>
<span class="plf:sr-only">Unread</span>
</a>
</li>
</ul>
</div>
</div>
<div class="plf:flex plf:items-center plf:justify-between plf:border-t plf:border-base-300 plf:pt-2">
<button class="plf:btn plf:btn-ghost plf:btn-sm">Mark all as read</button>
<a class="plf:btn plf:btn-ghost plf:btn-sm" href="#">View all</a>
</div>
</div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu data-plf-align="end" data-plf-theme-switch hidden>
<button class="plf:btn plf:btn-ghost plf:btn-square" aria-label="Color theme">
<span class="plf:icon plf:icon-sun" data-plf-theme-switch-icon="light"></span>
<span class="plf:icon plf:icon-moon" data-plf-theme-switch-icon="dark"></span>
<span class="plf:icon plf:icon-device-desktop" data-plf-theme-switch-icon="auto"></span>
</button>
<div class="plf:dropdown-content plf:menu" hidden>
<button class="plf:menu-item" value="light">
<span class="plf:menu-text">Light</span>
</button>
<button class="plf:menu-item" value="dark">
<span class="plf:menu-text">Dark</span>
</button>
<button class="plf:menu-item" value="auto">
<span class="plf:menu-text">Auto</span>
</button>
</div>
</div>
<div class="plf:dropdown" data-plf-dropdown-menu data-plf-align="end">
<button class="plf:btn plf:btn-ghost plf:btn-circle plf:p-0" aria-label="Account for John Doe">
<span class="plf:avatar plf:avatar-sm">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="">
</span>
</button>
<div class="plf:dropdown-content plf:menu" aria-label="Account actions" hidden>
<div class="plf:item plf:item-sm" style="--plf-item-padding: var(--plf-space-2); flex-wrap: nowrap">
<span class="plf:item-media">
<span class="plf:avatar plf:avatar-sm">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="">
</span>
</span>
<div class="plf:item-content">
<p class="plf:item-title">John Doe</p>
<p class="plf:item-description">john@example.com</p>
</div>
</div>
<hr class="plf:menu-separator">
<button class="plf:menu-item">
<span class="plf:icon plf:icon-sparkles"></span>
<span>Upgrade to Enterprise</span>
</button>
<hr class="plf:menu-separator">
<button class="plf:menu-item"><span class="plf:icon plf:icon-user"></span><span>Account</span></button>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-credit-card"></span>
<span>Billing</span>
</button>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-bell"></span>
<span>Notifications</span>
</button>
<button class="plf:menu-item">
<span class="plf:icon plf:icon-settings"></span>
<span>Preferences</span>
</button>
<hr class="plf:menu-separator">
<button class="plf:menu-item plf:menu-item-error">
<span class="plf:icon plf:icon-logout"></span>
<span>Log out</span>
</button>
</div>
</div>
</div>
</header>
<main class="plf:flex plf:flex-col plf:gap-4 plf:p-4 plf:md:gap-6 plf:lg:p-6" id="main-content">
<!-- Page content -->
</main>
</div>
</div>
<dialog class="plf:modal plf:sheet plf:sheet-start plf:sidebar-dialog" aria-label="Navigation">
<button class="plf:modal-close plf:sheet-close" aria-label="Close navigation" data-plf-trigger="modal:close"></button>
<div class="plf:sheet-body plf:sidebar-mobile-content"></div>
</dialog>
</div>
<script>
{
const layout = document.currentScript.previousElementSibling;
try { if (localStorage.getItem('plf-sidebar') === 'collapsed') layout.setAttribute('data-plf-collapsed', ''); } catch {}
layout.addEventListener('plf:sidebar:change', event => {
try { localStorage.setItem('plf-sidebar', event.detail.collapsed ? 'collapsed' : 'expanded'); } catch {}
});
}
document.addEventListener('plf:theme-switch:change', event => {
try { localStorage.setItem('plf-theme', event.detail.value); } catch {}
});
</script>'use client';
import { useEffect, useState, type CSSProperties } from 'react';
import {
Avatar, AvatarImage, Badge, Button, buttonClass, Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger, Command,
CommandClear, CommandDialog, CommandEmpty, CommandFooter, CommandGroup, CommandInput, CommandItem, CommandKey, CommandLabel, CommandList,
CommandSearch, CommandSeparator, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTitle,
DropdownMenuTrigger, Icon, Item, itemClass, ItemContent, ItemDescription, ItemGroup, Kbd, ModalClose, Popover, PopoverClose,
PopoverContent, PopoverTitle, PopoverTrigger, Separator, Sidebar, SidebarContent, SidebarDescription, SidebarFooter, SidebarGroup,
SidebarGroupLabel, SidebarHeader, SidebarIdentityIcon, SidebarLabel, SidebarLink, SidebarMenu, SidebarName, SidebarPage, SidebarPanel,
SidebarSubLink, SidebarSubmenu, SidebarTrigger, Tab, TabContent, Tabs, TabsList, ThemeSwitch,
} from '@pelatform/react';
// The app's document restores the saved theme on its root before React renders, as the Theme Switch guide's "Saving the choice" shows.
export function Example() {
const [collapsed, setCollapsed] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
// Restores the sidebar this browser saved, once the page has loaded.
useEffect(() => {
try { if (localStorage.getItem('plf-sidebar') === 'collapsed') setCollapsed(true); } catch {}
}, []);
// As the search button's aria-keyshortcuts says, Control+K and Command+K open the closed palette outside text fields.
useEffect(() => {
if (searchOpen) return;
const shortcut = (event: KeyboardEvent) => {
if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'k' || (event.target as Element).closest('input, textarea, select, [contenteditable]')) return;
event.preventDefault();
setSearchOpen(true);
};
document.addEventListener('keydown', shortcut);
return () => document.removeEventListener('keydown', shortcut);
}, [searchOpen]);
return (
<Sidebar
className="bg-base-100"
sticky
indicator
collapsed={collapsed}
onCollapsedChange={next => {
setCollapsed(next);
try { localStorage.setItem('plf-sidebar', next ? 'collapsed' : 'expanded'); } catch {}
}}
>
<a className={`not-focus-within:sr-only ${buttonClass({ variant: 'outline' })} absolute top-2 start-2 z-50`} href="#main-content">Skip to content</a>
<SidebarPanel aria-label="Workspace sidebar">
<SidebarHeader>
<DropdownMenu className="sidebar-control" placement="right" align="start">
<DropdownMenuTrigger className="sidebar-link sidebar-identity" aria-label="Switch workspace, Pelatform Pro plan">
<SidebarIdentityIcon style={{ borderRadius: 'var(--plf-radius-lg)', background: 'var(--plf-color-primary)', color: 'var(--plf-color-on-primary)' }}>
<Icon name="stack-2" />
</SidebarIdentityIcon>
<SidebarLabel>
<SidebarName>Pelatform</SidebarName>
<SidebarDescription>Pro plan</SidebarDescription>
</SidebarLabel>
<Icon name="selector" className="sidebar-chevron" />
</DropdownMenuTrigger>
<DropdownMenuContent aria-label="Workspace switcher">
<DropdownMenuTitle>Workspaces</DropdownMenuTitle>
<DropdownMenuItem><Icon name="stack-2" /><span>Pelatform</span></DropdownMenuItem>
<DropdownMenuItem><Icon name="stack-2" /><span>Orbit</span></DropdownMenuItem>
<DropdownMenuItem><Icon name="stack-2" /><span>Personal</span></DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarHeader>
<SidebarContent aria-label="Main">
<SidebarGroup>
<SidebarGroupLabel>Platform</SidebarGroupLabel>
<SidebarMenu>
<li>
<SidebarLink href="#" aria-current="page">
<Icon name="layout-dashboard" />
<SidebarLabel>Dashboard</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="building" />
<SidebarLabel>Customers</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="receipt" />
<SidebarLabel>Invoices</SidebarLabel>
</SidebarLink>
</li>
</SidebarMenu>
</SidebarGroup>
<Collapsible className="sidebar-group">
<CollapsibleTrigger className="sidebar-link">
<Icon name="chart-column" />
<CollapsibleTitle className="sidebar-label">Reports</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent className="sidebar-group-content">
<SidebarSubmenu>
<li>
<SidebarSubLink href="#">
<SidebarLabel>Revenue</SidebarLabel>
</SidebarSubLink>
</li>
<li>
<SidebarSubLink href="#">
<SidebarLabel>Growth</SidebarLabel>
</SidebarSubLink>
</li>
<li>
<SidebarSubLink href="#">
<SidebarLabel>Churn</SidebarLabel>
</SidebarSubLink>
</li>
</SidebarSubmenu>
</CollapsibleContent>
</Collapsible>
<SidebarGroup>
<SidebarGroupLabel>Workspace</SidebarGroupLabel>
<SidebarMenu>
<li>
<SidebarLink href="#">
<Icon name="users" />
<SidebarLabel>Team</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="credit-card" />
<SidebarLabel>Billing</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="settings" />
<SidebarLabel>Settings</SidebarLabel>
</SidebarLink>
</li>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<li>
<SidebarLink href="#">
<Icon name="lifebuoy" />
<SidebarLabel>Help and support</SidebarLabel>
</SidebarLink>
</li>
</SidebarMenu>
</SidebarFooter>
</SidebarPanel>
<SidebarPage>
<header className="sticky z-10 flex items-center gap-2 border-b border-base-300 bg-base-100 px-4 py-3 lg:px-6" style={{ top: 'var(--plf-sidebar-top, 0px)' }}>
<SidebarTrigger className={buttonClass({ variant: 'ghost', shape: 'square' })}>
<Icon name="layout-sidebar" />
</SidebarTrigger>
<Separator orientation="vertical" className="h-4 self-center" />
<Button variant="outline" aria-label="Search" aria-keyshortcuts="Control+K Meta+K" onClick={() => setSearchOpen(true)}>
<Icon name="search" />
<span className="hidden md:flex w-48 items-center justify-between">Search<Kbd>⌘K</Kbd></span>
</Button>
<CommandDialog open={searchOpen} onOpenChange={setSearchOpen} aria-label="Search">
<Command>
<CommandSearch>
<CommandInput aria-label="Search pages and actions" placeholder="Search pages or actions…" autoFocus />
<CommandClear />
</CommandSearch>
<CommandList>
<CommandGroup heading="Pages">
<CommandItem value="dashboard" href="#" keywords="overview revenue">
<Icon name="layout-dashboard" />
<CommandLabel>Dashboard</CommandLabel>
</CommandItem>
<CommandItem value="customers" href="#" keywords="accounts companies">
<Icon name="building" />
<CommandLabel>Customers</CommandLabel>
</CommandItem>
<CommandItem value="invoices" href="#" keywords="billing payments">
<Icon name="receipt" />
<CommandLabel>Invoices</CommandLabel>
</CommandItem>
<CommandItem value="revenue" href="#" keywords="reports income">
<Icon name="chart-column" />
<CommandLabel>Revenue</CommandLabel>
</CommandItem>
<CommandItem value="growth" href="#" keywords="reports new customers">
<Icon name="trending-up" />
<CommandLabel>Growth</CommandLabel>
</CommandItem>
<CommandItem value="churn" href="#" keywords="reports cancellations">
<Icon name="trending-down" />
<CommandLabel>Churn</CommandLabel>
</CommandItem>
<CommandItem value="settings" href="#" keywords="workspace preferences">
<Icon name="settings" />
<CommandLabel>Settings</CommandLabel>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Actions">
<CommandItem value="create-invoice" keywords="new bill">
<Icon name="plus" />
<CommandLabel>Create invoice</CommandLabel>
</CommandItem>
<CommandItem value="invite-member" keywords="team people">
<Icon name="user-plus" />
<CommandLabel>Invite member</CommandLabel>
</CommandItem>
</CommandGroup>
</CommandList>
<CommandEmpty>No results. Try a page name or keyword.</CommandEmpty>
<CommandFooter>
<span><CommandKey>↑ ↓</CommandKey> Navigate · <CommandKey>Enter</CommandKey> Open</span>
<ModalClose aria-label="Close search">Close</ModalClose>
</CommandFooter>
</Command>
</CommandDialog>
<div className="ms-auto flex items-center gap-1">
<Popover align="end">
<PopoverTrigger className={`${buttonClass({ variant: 'ghost', shape: 'square' })} relative`} aria-label="Notifications, 3 unread">
<Icon name="bell" />
<span className="absolute top-2 end-2 size-2 rounded-full bg-error" />
</PopoverTrigger>
<PopoverContent className="p-3" style={{ '--plf-popover-width': '22rem', '--plf-item-padding': 'var(--plf-space-2)' } as CSSProperties}>
<div className="flex items-center justify-between gap-2">
<PopoverTitle level={2} className="m-0">Notifications</PopoverTitle>
<PopoverClose className={buttonClass({ variant: 'ghost', size: 'sm', shape: 'square' })} aria-label="Close notifications">
<Icon name="x" />
</PopoverClose>
</div>
<Tabs defaultValue="all">
<TabsList
variant="border"
className="gap-4"
aria-label="Notification filter"
style={{ '--plf-tabs-height': 'var(--plf-control-height-sm)', '--plf-tabs-padding-inline': '0' } as CSSProperties}
>
<Tab value="all">All</Tab>
<Tab value="unread">Unread <Badge>3</Badge></Tab>
</TabsList>
<TabContent value="all" className="py-2" tabIndex={-1}>
<ItemGroup className="gap-0">
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="item-media"><Icon name="sparkles" className="text-primary" /></span>
<span className="item-content">
<span className="item-title truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time className="text-xs text-base-content/70" dateTime="2026-10-24T10:42">10:42</time>
<span className="sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="item-media">
<Icon name="circle-check" className="text-success" />
</span>
<span className="item-content">
<span className="item-title truncate">Lumen Analytics paid INV-2050</span>
</span>
<time className="text-xs text-base-content/70" dateTime="2026-10-24T09:58">09:58</time>
<span className="sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="item-media">
<Icon name="alert-triangle" className="text-error" />
</span>
<span className="item-content">
<span className="item-title truncate">Payment failed for Orchid Finance</span>
</span>
<time className="text-xs text-base-content/70" dateTime="2026-10-24T09:15">09:15</time>
<span className="sr-only">Unread</span>
</a>
</li>
<li>
<a className={`${itemClass({ size: 'sm' })} text-base-content/70`} href="#">
<span className="item-media">
<Icon name="clock" className="text-base-content/50" />
</span>
<span className="item-content">
<span className="item-title truncate font-normal">Juniper Health started a trial</span>
</span>
<time className="text-xs" dateTime="2026-10-23T16:20">23 Oct</time>
</a>
</li>
</ItemGroup>
</TabContent>
<TabContent value="unread" className="py-2" tabIndex={-1}>
<ItemGroup className="gap-0">
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="item-media"><Icon name="sparkles" className="text-primary" /></span>
<span className="item-content">
<span className="item-title truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time className="text-xs text-base-content/70" dateTime="2026-10-24T10:42">10:42</time>
<span className="sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="item-media">
<Icon name="circle-check" className="text-success" />
</span>
<span className="item-content">
<span className="item-title truncate">Lumen Analytics paid INV-2050</span>
</span>
<time className="text-xs text-base-content/70" dateTime="2026-10-24T09:58">09:58</time>
<span className="sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="item-media">
<Icon name="alert-triangle" className="text-error" />
</span>
<span className="item-content">
<span className="item-title truncate">Payment failed for Orchid Finance</span>
</span>
<time className="text-xs text-base-content/70" dateTime="2026-10-24T09:15">09:15</time>
<span className="sr-only">Unread</span>
</a>
</li>
</ItemGroup>
</TabContent>
</Tabs>
<div className="flex items-center justify-between border-t border-base-300 pt-2">
<Button variant="ghost" size="sm">Mark all as read</Button>
<a className={buttonClass({ variant: 'ghost', size: 'sm' })} href="#">View all</a>
</div>
</PopoverContent>
</Popover>
<ThemeSwitch
align="end"
defaultValue="auto"
onValueChange={theme => { try { localStorage.setItem('plf-theme', theme); } catch {} }}
/>
<DropdownMenu align="end">
<DropdownMenuTrigger className={`${buttonClass({ variant: 'ghost', shape: 'circle' })} p-0`} aria-label="Account for John Doe">
<Avatar size="sm">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" />
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent aria-label="Account actions">
<Item size="sm" style={{ '--plf-item-padding': 'var(--plf-space-2)', flexWrap: 'nowrap' } as CSSProperties}>
<span className="item-media">
<Avatar size="sm">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" />
</Avatar>
</span>
<ItemContent>
<p className="item-title">John Doe</p>
<ItemDescription>john@example.com</ItemDescription>
</ItemContent>
</Item>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Icon name="sparkles" />
<span>Upgrade to Enterprise</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem><Icon name="user" /><span>Account</span></DropdownMenuItem>
<DropdownMenuItem>
<Icon name="credit-card" />
<span>Billing</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="bell" />
<span>Notifications</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="settings" />
<span>Preferences</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem color="error">
<Icon name="logout" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<main className="flex flex-col gap-4 p-4 md:gap-6 lg:p-6" id="main-content">
{/* Page content */}
</main>
</SidebarPage>
</Sidebar>
);
}'use client';
import { useEffect, useState, type CSSProperties } from 'react';
import {
Avatar, AvatarImage, Badge, Button, buttonClass, Collapsible, CollapsibleContent, CollapsibleTitle, CollapsibleTrigger, Command,
CommandClear, CommandDialog, CommandEmpty, CommandFooter, CommandGroup, CommandInput, CommandItem, CommandKey, CommandLabel, CommandList,
CommandSearch, CommandSeparator, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTitle,
DropdownMenuTrigger, Icon, Item, itemClass, ItemContent, ItemDescription, ItemGroup, Kbd, ModalClose, Popover, PopoverClose,
PopoverContent, PopoverTitle, PopoverTrigger, Separator, Sidebar, SidebarContent, SidebarDescription, SidebarFooter, SidebarGroup,
SidebarGroupLabel, SidebarHeader, SidebarIdentityIcon, SidebarLabel, SidebarLink, SidebarMenu, SidebarName, SidebarPage, SidebarPanel,
SidebarSubLink, SidebarSubmenu, SidebarTrigger, Tab, TabContent, Tabs, TabsList, ThemeSwitch,
} from '@pelatform/react/prefixed';
// The app's document restores the saved theme on its root before React renders, as the Theme Switch guide's "Saving the choice" shows.
export function Example() {
const [collapsed, setCollapsed] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
// Restores the sidebar this browser saved, once the page has loaded.
useEffect(() => {
try { if (localStorage.getItem('plf-sidebar') === 'collapsed') setCollapsed(true); } catch {}
}, []);
// As the search button's aria-keyshortcuts says, Control+K and Command+K open the closed palette outside text fields.
useEffect(() => {
if (searchOpen) return;
const shortcut = (event: KeyboardEvent) => {
if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'k' || (event.target as Element).closest('input, textarea, select, [contenteditable]')) return;
event.preventDefault();
setSearchOpen(true);
};
document.addEventListener('keydown', shortcut);
return () => document.removeEventListener('keydown', shortcut);
}, [searchOpen]);
return (
<Sidebar
className="plf:bg-base-100"
sticky
indicator
collapsed={collapsed}
onCollapsedChange={next => {
setCollapsed(next);
try { localStorage.setItem('plf-sidebar', next ? 'collapsed' : 'expanded'); } catch {}
}}
>
<a className={`plf:not-focus-within:sr-only ${buttonClass({ variant: 'outline' })} plf:absolute plf:top-2 plf:start-2 plf:z-50`} href="#main-content">Skip to content</a>
<SidebarPanel aria-label="Workspace sidebar">
<SidebarHeader>
<DropdownMenu className="plf:sidebar-control" placement="right" align="start">
<DropdownMenuTrigger className="plf:sidebar-link plf:sidebar-identity" aria-label="Switch workspace, Pelatform Pro plan">
<SidebarIdentityIcon style={{ borderRadius: 'var(--plf-radius-lg)', background: 'var(--plf-color-primary)', color: 'var(--plf-color-on-primary)' }}>
<Icon name="stack-2" />
</SidebarIdentityIcon>
<SidebarLabel>
<SidebarName>Pelatform</SidebarName>
<SidebarDescription>Pro plan</SidebarDescription>
</SidebarLabel>
<Icon name="selector" className="plf:sidebar-chevron" />
</DropdownMenuTrigger>
<DropdownMenuContent aria-label="Workspace switcher">
<DropdownMenuTitle>Workspaces</DropdownMenuTitle>
<DropdownMenuItem><Icon name="stack-2" /><span>Pelatform</span></DropdownMenuItem>
<DropdownMenuItem><Icon name="stack-2" /><span>Orbit</span></DropdownMenuItem>
<DropdownMenuItem><Icon name="stack-2" /><span>Personal</span></DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarHeader>
<SidebarContent aria-label="Main">
<SidebarGroup>
<SidebarGroupLabel>Platform</SidebarGroupLabel>
<SidebarMenu>
<li>
<SidebarLink href="#" aria-current="page">
<Icon name="layout-dashboard" />
<SidebarLabel>Dashboard</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="building" />
<SidebarLabel>Customers</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="receipt" />
<SidebarLabel>Invoices</SidebarLabel>
</SidebarLink>
</li>
</SidebarMenu>
</SidebarGroup>
<Collapsible className="plf:sidebar-group">
<CollapsibleTrigger className="plf:sidebar-link">
<Icon name="chart-column" />
<CollapsibleTitle className="plf:sidebar-label">Reports</CollapsibleTitle>
</CollapsibleTrigger>
<CollapsibleContent className="plf:sidebar-group-content">
<SidebarSubmenu>
<li>
<SidebarSubLink href="#">
<SidebarLabel>Revenue</SidebarLabel>
</SidebarSubLink>
</li>
<li>
<SidebarSubLink href="#">
<SidebarLabel>Growth</SidebarLabel>
</SidebarSubLink>
</li>
<li>
<SidebarSubLink href="#">
<SidebarLabel>Churn</SidebarLabel>
</SidebarSubLink>
</li>
</SidebarSubmenu>
</CollapsibleContent>
</Collapsible>
<SidebarGroup>
<SidebarGroupLabel>Workspace</SidebarGroupLabel>
<SidebarMenu>
<li>
<SidebarLink href="#">
<Icon name="users" />
<SidebarLabel>Team</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="credit-card" />
<SidebarLabel>Billing</SidebarLabel>
</SidebarLink>
</li>
<li>
<SidebarLink href="#">
<Icon name="settings" />
<SidebarLabel>Settings</SidebarLabel>
</SidebarLink>
</li>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<li>
<SidebarLink href="#">
<Icon name="lifebuoy" />
<SidebarLabel>Help and support</SidebarLabel>
</SidebarLink>
</li>
</SidebarMenu>
</SidebarFooter>
</SidebarPanel>
<SidebarPage>
<header className="plf:sticky plf:z-10 plf:flex plf:items-center plf:gap-2 plf:border-b plf:border-base-300 plf:bg-base-100 plf:px-4 plf:py-3 plf:lg:px-6" style={{ top: 'var(--plf-sidebar-top, 0px)' }}>
<SidebarTrigger className={buttonClass({ variant: 'ghost', shape: 'square' })}>
<Icon name="layout-sidebar" />
</SidebarTrigger>
<Separator orientation="vertical" className="plf:h-4 plf:self-center" />
<Button variant="outline" aria-label="Search" aria-keyshortcuts="Control+K Meta+K" onClick={() => setSearchOpen(true)}>
<Icon name="search" />
<span className="plf:hidden plf:md:flex plf:w-48 plf:items-center plf:justify-between">Search<Kbd>⌘K</Kbd></span>
</Button>
<CommandDialog open={searchOpen} onOpenChange={setSearchOpen} aria-label="Search">
<Command>
<CommandSearch>
<CommandInput aria-label="Search pages and actions" placeholder="Search pages or actions…" autoFocus />
<CommandClear />
</CommandSearch>
<CommandList>
<CommandGroup heading="Pages">
<CommandItem value="dashboard" href="#" keywords="overview revenue">
<Icon name="layout-dashboard" />
<CommandLabel>Dashboard</CommandLabel>
</CommandItem>
<CommandItem value="customers" href="#" keywords="accounts companies">
<Icon name="building" />
<CommandLabel>Customers</CommandLabel>
</CommandItem>
<CommandItem value="invoices" href="#" keywords="billing payments">
<Icon name="receipt" />
<CommandLabel>Invoices</CommandLabel>
</CommandItem>
<CommandItem value="revenue" href="#" keywords="reports income">
<Icon name="chart-column" />
<CommandLabel>Revenue</CommandLabel>
</CommandItem>
<CommandItem value="growth" href="#" keywords="reports new customers">
<Icon name="trending-up" />
<CommandLabel>Growth</CommandLabel>
</CommandItem>
<CommandItem value="churn" href="#" keywords="reports cancellations">
<Icon name="trending-down" />
<CommandLabel>Churn</CommandLabel>
</CommandItem>
<CommandItem value="settings" href="#" keywords="workspace preferences">
<Icon name="settings" />
<CommandLabel>Settings</CommandLabel>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Actions">
<CommandItem value="create-invoice" keywords="new bill">
<Icon name="plus" />
<CommandLabel>Create invoice</CommandLabel>
</CommandItem>
<CommandItem value="invite-member" keywords="team people">
<Icon name="user-plus" />
<CommandLabel>Invite member</CommandLabel>
</CommandItem>
</CommandGroup>
</CommandList>
<CommandEmpty>No results. Try a page name or keyword.</CommandEmpty>
<CommandFooter>
<span><CommandKey>↑ ↓</CommandKey> Navigate · <CommandKey>Enter</CommandKey> Open</span>
<ModalClose aria-label="Close search">Close</ModalClose>
</CommandFooter>
</Command>
</CommandDialog>
<div className="plf:ms-auto plf:flex plf:items-center plf:gap-1">
<Popover align="end">
<PopoverTrigger className={`${buttonClass({ variant: 'ghost', shape: 'square' })} plf:relative`} aria-label="Notifications, 3 unread">
<Icon name="bell" />
<span className="plf:absolute plf:top-2 plf:end-2 plf:size-2 plf:rounded-full plf:bg-error" />
</PopoverTrigger>
<PopoverContent className="plf:p-3" style={{ '--plf-popover-width': '22rem', '--plf-item-padding': 'var(--plf-space-2)' } as CSSProperties}>
<div className="plf:flex plf:items-center plf:justify-between plf:gap-2">
<PopoverTitle level={2} className="plf:m-0">Notifications</PopoverTitle>
<PopoverClose className={buttonClass({ variant: 'ghost', size: 'sm', shape: 'square' })} aria-label="Close notifications">
<Icon name="x" />
</PopoverClose>
</div>
<Tabs defaultValue="all">
<TabsList
variant="border"
className="plf:gap-4"
aria-label="Notification filter"
style={{ '--plf-tabs-height': 'var(--plf-control-height-sm)', '--plf-tabs-padding-inline': '0' } as CSSProperties}
>
<Tab value="all">All</Tab>
<Tab value="unread">Unread <Badge>3</Badge></Tab>
</TabsList>
<TabContent value="all" className="plf:py-2" tabIndex={-1}>
<ItemGroup className="plf:gap-0">
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="plf:item-media"><Icon name="sparkles" className="plf:text-primary" /></span>
<span className="plf:item-content">
<span className="plf:item-title plf:truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time className="plf:text-xs plf:text-base-content/70" dateTime="2026-10-24T10:42">10:42</time>
<span className="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="plf:item-media">
<Icon name="circle-check" className="plf:text-success" />
</span>
<span className="plf:item-content">
<span className="plf:item-title plf:truncate">Lumen Analytics paid INV-2050</span>
</span>
<time className="plf:text-xs plf:text-base-content/70" dateTime="2026-10-24T09:58">09:58</time>
<span className="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="plf:item-media">
<Icon name="alert-triangle" className="plf:text-error" />
</span>
<span className="plf:item-content">
<span className="plf:item-title plf:truncate">Payment failed for Orchid Finance</span>
</span>
<time className="plf:text-xs plf:text-base-content/70" dateTime="2026-10-24T09:15">09:15</time>
<span className="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a className={`${itemClass({ size: 'sm' })} plf:text-base-content/70`} href="#">
<span className="plf:item-media">
<Icon name="clock" className="plf:text-base-content/50" />
</span>
<span className="plf:item-content">
<span className="plf:item-title plf:truncate plf:font-normal">Juniper Health started a trial</span>
</span>
<time className="plf:text-xs" dateTime="2026-10-23T16:20">23 Oct</time>
</a>
</li>
</ItemGroup>
</TabContent>
<TabContent value="unread" className="plf:py-2" tabIndex={-1}>
<ItemGroup className="plf:gap-0">
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="plf:item-media"><Icon name="sparkles" className="plf:text-primary" /></span>
<span className="plf:item-content">
<span className="plf:item-title plf:truncate">Kestrel Labs upgraded to Scale</span>
</span>
<time className="plf:text-xs plf:text-base-content/70" dateTime="2026-10-24T10:42">10:42</time>
<span className="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="plf:item-media">
<Icon name="circle-check" className="plf:text-success" />
</span>
<span className="plf:item-content">
<span className="plf:item-title plf:truncate">Lumen Analytics paid INV-2050</span>
</span>
<time className="plf:text-xs plf:text-base-content/70" dateTime="2026-10-24T09:58">09:58</time>
<span className="plf:sr-only">Unread</span>
</a>
</li>
<li>
<a className={itemClass({ size: 'sm' })} href="#">
<span className="plf:item-media">
<Icon name="alert-triangle" className="plf:text-error" />
</span>
<span className="plf:item-content">
<span className="plf:item-title plf:truncate">Payment failed for Orchid Finance</span>
</span>
<time className="plf:text-xs plf:text-base-content/70" dateTime="2026-10-24T09:15">09:15</time>
<span className="plf:sr-only">Unread</span>
</a>
</li>
</ItemGroup>
</TabContent>
</Tabs>
<div className="plf:flex plf:items-center plf:justify-between plf:border-t plf:border-base-300 plf:pt-2">
<Button variant="ghost" size="sm">Mark all as read</Button>
<a className={buttonClass({ variant: 'ghost', size: 'sm' })} href="#">View all</a>
</div>
</PopoverContent>
</Popover>
<ThemeSwitch
align="end"
defaultValue="auto"
onValueChange={theme => { try { localStorage.setItem('plf-theme', theme); } catch {} }}
/>
<DropdownMenu align="end">
<DropdownMenuTrigger className={`${buttonClass({ variant: 'ghost', shape: 'circle' })} plf:p-0`} aria-label="Account for John Doe">
<Avatar size="sm">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" />
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent aria-label="Account actions">
<Item size="sm" style={{ '--plf-item-padding': 'var(--plf-space-2)', flexWrap: 'nowrap' } as CSSProperties}>
<span className="plf:item-media">
<Avatar size="sm">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" />
</Avatar>
</span>
<ItemContent>
<p className="plf:item-title">John Doe</p>
<ItemDescription>john@example.com</ItemDescription>
</ItemContent>
</Item>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Icon name="sparkles" />
<span>Upgrade to Enterprise</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem><Icon name="user" /><span>Account</span></DropdownMenuItem>
<DropdownMenuItem>
<Icon name="credit-card" />
<span>Billing</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="bell" />
<span>Notifications</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Icon name="settings" />
<span>Preferences</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem color="error">
<Icon name="logout" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
<main className="plf:flex plf:flex-col plf:gap-4 plf:p-4 plf:md:gap-6 plf:lg:p-6" id="main-content">
{/* Page content */}
</main>
</SidebarPage>
</Sidebar>
);
}In WordPress, Dashboard pages put each page’s content, written with Elementor or the block editor, in this shell.
<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="pelatform-ui.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/badge.min.css">
<link rel="stylesheet" href="components/tabs.min.css">
<link rel="stylesheet" href="components/modal.min.css">
<link rel="stylesheet" href="components/sheet.min.css">
<link rel="stylesheet" href="components/popover.min.css">
<link rel="stylesheet" href="components/tooltip.min.css">
<link rel="stylesheet" href="components/dropdown-menu.min.css">
<link rel="stylesheet" href="components/avatar.min.css">
<link rel="stylesheet" href="components/separator.min.css">
<link rel="stylesheet" href="components/kbd.min.css">
<link rel="stylesheet" href="components/button-group.min.css">
<link rel="stylesheet" href="components/item.min.css">
<link rel="stylesheet" href="components/toggle.min.css">
<link rel="stylesheet" href="components/toggle-group.min.css">
<link rel="stylesheet" href="components/collapsible.min.css">
<link rel="stylesheet" href="components/sidebar.min.css">
<link rel="stylesheet" href="components/command.min.css">
<link rel="stylesheet" href="icons/icons.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/tabs.min.js" defer></script>
<script src="components/modal.min.js" defer></script>
<script src="components/popover.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script src="components/toggle-group.min.js" defer></script>
<script src="components/sidebar.min.js" defer></script>
<script src="components/command.min.js" defer></script>
<script src="components/theme-switch.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script><link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script><link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/badge.prefixed.min.css">
<link rel="stylesheet" href="components/tabs.prefixed.min.css">
<link rel="stylesheet" href="components/modal.prefixed.min.css">
<link rel="stylesheet" href="components/sheet.prefixed.min.css">
<link rel="stylesheet" href="components/popover.prefixed.min.css">
<link rel="stylesheet" href="components/tooltip.prefixed.min.css">
<link rel="stylesheet" href="components/dropdown-menu.prefixed.min.css">
<link rel="stylesheet" href="components/avatar.prefixed.min.css">
<link rel="stylesheet" href="components/separator.prefixed.min.css">
<link rel="stylesheet" href="components/kbd.prefixed.min.css">
<link rel="stylesheet" href="components/button-group.prefixed.min.css">
<link rel="stylesheet" href="components/item.prefixed.min.css">
<link rel="stylesheet" href="components/toggle.prefixed.min.css">
<link rel="stylesheet" href="components/toggle-group.prefixed.min.css">
<link rel="stylesheet" href="components/collapsible.prefixed.min.css">
<link rel="stylesheet" href="components/sidebar.prefixed.min.css">
<link rel="stylesheet" href="components/command.prefixed.min.css">
<link rel="stylesheet" href="icons/icons.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/tabs.min.js" defer></script>
<script src="components/modal.min.js" defer></script>
<script src="components/popover.min.js" defer></script>
<script src="components/dropdown-menu.min.js" defer></script>
<script src="components/toggle-group.min.js" defer></script>
<script src="components/sidebar.min.js" defer></script>
<script src="components/command.min.js" defer></script>
<script src="components/theme-switch.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>Built with
Avatar, Badge, Button, Collapsible, Command, Dropdown Menu, Item, Kbd, Modal, Popover, Separator, Sheet, Sidebar, Tabs, Theme Switch.