@webjsdev/ui 0.3.17 → 0.5.0

package/packages/registry/blocks/sidebar-02/components/app-sidebar.ts

@@ -0,0 +1,131 @@
+/**
+ * The sidebar-02 app sidebar: a version switcher and a search field in the
+ * header, then one collapsible group per docs section with its pages as
+ * links. A fragment helper, so the markup is rendered by the server; each
+ * section is a native `<details>`, so it opens and closes with no
+ * JavaScript, and the sidebar, its rail and the version menu are the kit's
+ * elements. Ported from shadcn/ui's sidebar-02.
+ *
+ * The data below is sample data. Replace it with your own, point each `url`
+ * at a real route, and mark the current page with `isActive`.
+ */
+import { html, nothing } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarGroupLabelClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { searchForm } from './search-form.ts';
+import { versionSwitcher } from './version-switcher.ts';
+import { ChevronRightIcon } from '../../../lib/icons.ts';
+
+interface NavSection {
+  title: string;
+  url: string;
+  items: { title: string; url: string; isActive?: boolean }[];
+}
+
+// This is sample data.
+const data: { versions: string[]; navMain: NavSection[] } = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        { title: 'Installation', url: '#' },
+        { title: 'Project Structure', url: '#' },
+      ],
+    },
+    {
+      title: 'Build Your Application',
+      url: '#',
+      items: [
+        { title: 'Routing', url: '#' },
+        { title: 'Data Fetching', url: '#', isActive: true },
+        { title: 'Rendering', url: '#' },
+        { title: 'Caching', url: '#' },
+        { title: 'Styling', url: '#' },
+        { title: 'Optimizing', url: '#' },
+        { title: 'Configuring', url: '#' },
+        { title: 'Testing', url: '#' },
+        { title: 'Authentication', url: '#' },
+        { title: 'Deploying', url: '#' },
+        { title: 'Upgrading', url: '#' },
+        { title: 'Examples', url: '#' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        { title: 'Components', url: '#' },
+        { title: 'File Conventions', url: '#' },
+        { title: 'Functions', url: '#' },
+        { title: 'next.config.js Options', url: '#' },
+        { title: 'CLI', url: '#' },
+        { title: 'Edge Runtime', url: '#' },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        { title: 'Accessibility', url: '#' },
+        { title: 'Fast Refresh', url: '#' },
+        { title: 'Next.js Compiler', url: '#' },
+        { title: 'Supported Browsers', url: '#' },
+        { title: 'Turbopack', url: '#' },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        { title: 'Contribution Guide', url: '#' },
+      ],
+    },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar>
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        ${versionSwitcher({ versions: data.versions, defaultVersion: data.versions[0] })}
+        ${searchForm()}
+      </div>
+      <nav aria-label="Docs" data-slot="sidebar-content" data-sidebar="content" class=${cn(sidebarContentClass(), 'gap-0')}>
+        ${data.navMain.map((section) => html`
+          <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+            <details open data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')}>
+              <summary data-slot="sidebar-group-label" data-sidebar="group-label" class=${cn(sidebarGroupLabelClass(), 'group/label cursor-pointer list-none text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&::-webkit-details-marker]:hidden')}>
+                ${section.title}
+                ${ChevronRightIcon('ml-auto transition-transform group-open/collapsible:rotate-90')}
+              </summary>
+              <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+                <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+                  <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+                    ${section.items.map((item) => html`
+                      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                        <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuButtonClass()}>${item.title}</a>
+                      </li>
+                    `)}
+                  </ul>
+                </div>
+              </div>
+            </details>
+          </div>
+        `)}
+      </nav>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-02/components/search-form.ts

@@ -0,0 +1,33 @@
+/**
+ * The sidebar-02 search form: a search field at the top of the sidebar. A
+ * fragment helper, so it renders on the server and ships no JavaScript.
+ * Ported from shadcn/ui's sidebar-02.
+ *
+ * The `<form>` has no `action` yet. Point it at your search route as a GET
+ * (`<form action="/search">`), or bind a server action from a `'use server'`
+ * file (`<form action=${search}>`). Until then a submit reloads the page with
+ * `?q=` in the URL.
+ */
+import { html, nothing } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { labelClass } from '../../../components/label.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarInputClass,
+} from '../../../components/sidebar.ts';
+import { SearchIcon } from '../../../lib/icons.ts';
+
+export function searchForm(opts: { class?: string } = {}) {
+  return html`
+    <form role="search" class=${opts.class ?? nothing}>
+      <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'py-0')}>
+        <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'relative')}>
+          <label data-slot="label" for="search" class=${cn(labelClass(), 'sr-only')}>Search</label>
+          <input data-slot="sidebar-input" data-sidebar="input" id="search" name="q" placeholder="Search the docs..." class=${cn(sidebarInputClass(), 'pl-8')}>
+          ${SearchIcon('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none')}
+        </div>
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/sidebar-02/components/version-switcher.ts

@@ -0,0 +1,50 @@
+/**
+ * The sidebar-02 version switcher: the docs logo with the current version,
+ * opening a menu of the versions. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-02.
+ *
+ * It renders `defaultVersion` as the selected one. shadcn keeps the choice in
+ * React state; in your app the version is server data (a route segment or a
+ * cookie), so render the right one on the server and make each item a link
+ * to that version.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { CheckIcon, ChevronsUpDownIcon, GalleryVerticalEndIcon } from '../../../lib/icons.ts';
+
+export function versionSwitcher({ versions, defaultVersion }: { versions: string[]; defaultVersion: string }) {
+  const selected = defaultVersion;
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <ui-dropdown-menu>
+          <ui-dropdown-menu-trigger>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${GalleryVerticalEndIcon('size-4')}
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-medium">Documentation</span>
+                <span>v${selected}</span>
+              </div>
+              ${ChevronsUpDownIcon('ml-auto')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-(--radix-dropdown-menu-trigger-width)" align="start">
+            ${versions.map((version) => html`
+              <ui-dropdown-menu-item>
+                v${version} ${version === selected ? CheckIcon('ml-auto') : ''}
+              </ui-dropdown-menu-item>
+            `)}
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-02/page.ts

@@ -0,0 +1,53 @@
+/**
+ * The sidebar-02 block's page: a docs-style sidebar with collapsible
+ * sections, beside a sticky header with a breadcrumb and a long placeholder
+ * list that scrolls under it.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-02` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-02.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+          <ui-sidebar-trigger class="-ml-1"></ui-sidebar-trigger>
+          <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+          <nav aria-label="breadcrumb" data-slot="breadcrumb">
+            <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+              <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+              </li>
+              <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+              <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+              </li>
+            </ol>
+          </nav>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4">
+          ${Array.from({ length: 24 }, () => html`<div class="aspect-video h-12 w-full rounded-lg bg-muted/50"></div>`)}
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

package/packages/registry/blocks/sidebar-03/components/app-sidebar.ts

@@ -0,0 +1,134 @@
+/**
+ * The sidebar-03 app sidebar: the docs logo and version in the header, then
+ * each docs section as a menu item with its pages in a submenu. A fragment
+ * helper, so the markup is rendered by the server; the sidebar and its rail
+ * are the kit's elements. Ported from shadcn/ui's sidebar-03.
+ *
+ * The data below is sample data. Replace it with your own, point each `url`
+ * at a real route, and mark the current page with `isActive`.
+ */
+import { html, nothing } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { GalleryVerticalEndIcon } from '../../../lib/icons.ts';
+
+interface NavSection {
+  title: string;
+  url: string;
+  items: { title: string; url: string; isActive?: boolean }[];
+}
+
+// This is sample data.
+const data: { navMain: NavSection[] } = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        { title: 'Installation', url: '#' },
+        { title: 'Project Structure', url: '#' },
+      ],
+    },
+    {
+      title: 'Build Your Application',
+      url: '#',
+      items: [
+        { title: 'Routing', url: '#' },
+        { title: 'Data Fetching', url: '#', isActive: true },
+        { title: 'Rendering', url: '#' },
+        { title: 'Caching', url: '#' },
+        { title: 'Styling', url: '#' },
+        { title: 'Optimizing', url: '#' },
+        { title: 'Configuring', url: '#' },
+        { title: 'Testing', url: '#' },
+        { title: 'Authentication', url: '#' },
+        { title: 'Deploying', url: '#' },
+        { title: 'Upgrading', url: '#' },
+        { title: 'Examples', url: '#' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        { title: 'Components', url: '#' },
+        { title: 'File Conventions', url: '#' },
+        { title: 'Functions', url: '#' },
+        { title: 'next.config.js Options', url: '#' },
+        { title: 'CLI', url: '#' },
+        { title: 'Edge Runtime', url: '#' },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        { title: 'Accessibility', url: '#' },
+        { title: 'Fast Refresh', url: '#' },
+        { title: 'Next.js Compiler', url: '#' },
+        { title: 'Supported Browsers', url: '#' },
+        { title: 'Turbopack', url: '#' },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        { title: 'Contribution Guide', url: '#' },
+      ],
+    },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar>
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${sidebarMenuButtonClass({ size: 'lg' })}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${GalleryVerticalEndIcon('size-4')}
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-medium">Documentation</span>
+                <span>v1.0.0</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <nav aria-label="Docs" data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+          <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+            ${data.navMain.map((section) => html`
+              <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                <a href=${section.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'font-medium')}>${section.title}</a>
+                ${section.items.length ? html`
+                  <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                    ${section.items.map((item) => html`
+                      <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                        <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
+                      </li>
+                    `)}
+                  </ul>
+                ` : ''}
+              </li>
+            `)}
+          </ul>
+        </div>
+      </nav>
+      <ui-sidebar-rail></ui-sidebar-rail>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-03/page.ts

@@ -0,0 +1,60 @@
+/**
+ * The sidebar-03 block's page: a docs-style sidebar with each section's
+ * pages in a submenu, beside a header with a breadcrumb and a placeholder
+ * content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-03` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-03.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="flex h-16 shrink-0 items-center gap-2 border-b">
+          <div class="flex items-center gap-2 px-3">
+            <ui-sidebar-trigger></ui-sidebar-trigger>
+            <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+            <nav aria-label="breadcrumb" data-slot="breadcrumb">
+              <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+                <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                  <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+                </li>
+                <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+                <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                  <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+                </li>
+              </ol>
+            </nav>
+          </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-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

package/packages/registry/blocks/sidebar-04/components/app-sidebar.ts

@@ -0,0 +1,136 @@
+/**
+ * The sidebar-04 app sidebar: a floating sidebar with the docs logo and
+ * version in the header, then each docs section as a menu item with its pages
+ * in a submenu. A fragment helper, so the markup is rendered by the server;
+ * the sidebar is the kit's element. Ported from shadcn/ui's sidebar-04.
+ *
+ * `class` lands on the sidebar, which is where the page sets its width
+ * (`[--sidebar-width:19rem]`), as shadcn's page sets it on the provider.
+ *
+ * The data below is sample data. Replace it with your own, point each `url`
+ * at a real route, and mark the current page with `isActive`.
+ */
+import { html, nothing } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarContentClass,
+  sidebarGroupClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { GalleryVerticalEndIcon } from '../../../lib/icons.ts';
+
+interface NavSection {
+  title: string;
+  url: string;
+  items: { title: string; url: string; isActive?: boolean }[];
+}
+
+// This is sample data.
+const data: { navMain: NavSection[] } = {
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        { title: 'Installation', url: '#' },
+        { title: 'Project Structure', url: '#' },
+      ],
+    },
+    {
+      title: 'Build Your Application',
+      url: '#',
+      items: [
+        { title: 'Routing', url: '#' },
+        { title: 'Data Fetching', url: '#', isActive: true },
+        { title: 'Rendering', url: '#' },
+        { title: 'Caching', url: '#' },
+        { title: 'Styling', url: '#' },
+        { title: 'Optimizing', url: '#' },
+        { title: 'Configuring', url: '#' },
+        { title: 'Testing', url: '#' },
+        { title: 'Authentication', url: '#' },
+        { title: 'Deploying', url: '#' },
+        { title: 'Upgrading', url: '#' },
+        { title: 'Examples', url: '#' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        { title: 'Components', url: '#' },
+        { title: 'File Conventions', url: '#' },
+        { title: 'Functions', url: '#' },
+        { title: 'next.config.js Options', url: '#' },
+        { title: 'CLI', url: '#' },
+        { title: 'Edge Runtime', url: '#' },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        { title: 'Accessibility', url: '#' },
+        { title: 'Fast Refresh', url: '#' },
+        { title: 'Next.js Compiler', url: '#' },
+        { title: 'Supported Browsers', url: '#' },
+        { title: 'Turbopack', url: '#' },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        { title: 'Contribution Guide', url: '#' },
+      ],
+    },
+  ],
+};
+
+export function appSidebar(opts: { class?: string } = {}) {
+  return html`
+    <ui-sidebar variant="floating" class=${opts.class ?? nothing}>
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${sidebarMenuButtonClass({ size: 'lg' })}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${GalleryVerticalEndIcon('size-4')}
+              </div>
+              <div class="flex flex-col gap-0.5 leading-none">
+                <span class="font-medium">Documentation</span>
+                <span>v1.0.0</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <nav aria-label="Docs" data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+          <ul data-slot="sidebar-menu" data-sidebar="menu" class=${cn(sidebarMenuClass(), 'gap-2')}>
+            ${data.navMain.map((section) => html`
+              <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+                <a href=${section.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'font-medium')}>${section.title}</a>
+                ${section.items.length ? html`
+                  <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${cn(sidebarMenuSubClass(), 'ms-0 border-s-0 px-1.5')}>
+                    ${section.items.map((item) => html`
+                      <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                        <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
+                      </li>
+                    `)}
+                  </ul>
+                ` : ''}
+              </li>
+            `)}
+          </ul>
+        </div>
+      </nav>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-04/page.ts

@@ -0,0 +1,58 @@
+/**
+ * The sidebar-04 block's page: a floating docs-style sidebar, 19rem
+ * wide, with each section's pages in a submenu, beside a header with a
+ * breadcrumb and a placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-04` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-04.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar({ class: '[--sidebar-width:19rem]' })}
+      <ui-sidebar-inset>
+        <header class="flex h-16 shrink-0 items-center gap-2 px-4">
+          <ui-sidebar-trigger class="-ml-1"></ui-sidebar-trigger>
+          <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+          <nav aria-label="breadcrumb" data-slot="breadcrumb">
+            <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+              <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+              </li>
+              <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+              <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+              </li>
+            </ol>
+          </nav>
+        </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-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}