@webjsdev/ui 0.3.17 → 0.4.0

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

@@ -0,0 +1,124 @@
+/**
+ * The sidebar-16 app sidebar: the company, the main nav with collapsible
+ * sections, the projects list, a secondary nav and the signed-in user, in a
+ * sidebar that starts below the sticky site header. A fragment helper, so the
+ * markup is rendered by the server; the sidebar and the menus are the kit's
+ * elements. Ported from shadcn/ui's sidebar-16.
+ *
+ * The data below is sample data. Replace it with your own, and point each
+ * `url` at a real route.
+ */
+import { html } from '@webjsdev/core';
+import {
+  sidebarContentClass,
+  sidebarFooterClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { navMain, type NavMainItem } from './nav-main.ts';
+import { navProjects, type NavProject } from './nav-projects.ts';
+import { navSecondary, type NavSecondaryItem } from './nav-secondary.ts';
+import { navUser } from './nav-user.ts';
+import { BookOpenIcon, BotIcon, FrameIcon, LifeBuoyIcon, MapIcon, PieChartIcon, SendIcon, Settings2Icon, TerminalIcon, TerminalSquareIcon } from '../../../lib/icons.ts';
+
+// This is sample data.
+const data: {
+  user: { name: string; email: string; avatar: string };
+  navMain: NavMainItem[];
+  navSecondary: NavSecondaryItem[];
+  projects: NavProject[];
+} = {
+  user: {
+    name: 'vivek',
+    email: 'vivek@example.com',
+    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+  },
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: TerminalSquareIcon,
+      isActive: true,
+      items: [
+        { title: 'History', url: '#' },
+        { title: 'Starred', url: '#' },
+        { title: 'Settings', url: '#' },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: BotIcon,
+      items: [
+        { title: 'Genesis', url: '#' },
+        { title: 'Explorer', url: '#' },
+        { title: 'Quantum', url: '#' },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpenIcon,
+      items: [
+        { title: 'Introduction', url: '#' },
+        { title: 'Get Started', url: '#' },
+        { title: 'Tutorials', url: '#' },
+        { title: 'Changelog', url: '#' },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2Icon,
+      items: [
+        { title: 'General', url: '#' },
+        { title: 'Team', url: '#' },
+        { title: 'Billing', url: '#' },
+        { title: 'Limits', url: '#' },
+      ],
+    },
+  ],
+  navSecondary: [
+    { title: 'Support', url: '#', icon: LifeBuoyIcon },
+    { title: 'Feedback', url: '#', icon: SendIcon },
+  ],
+  projects: [
+    { name: 'Design Engineering', url: '#', icon: FrameIcon },
+    { name: 'Sales & Marketing', url: '#', icon: PieChartIcon },
+    { name: 'Travel', url: '#', icon: MapIcon },
+  ],
+};
+
+export function appSidebar() {
+  // shadcn's className lands on the sidebar's fixed container, which the
+  // kit's <ui-sidebar> renders as its data-slot="sidebar-container" child.
+  return html`
+    <ui-sidebar class="[&>[data-slot=sidebar-container]]:top-(--header-height) [&>[data-slot=sidebar-container]]:h-[calc(100svh-var(--header-height))]!">
+      <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">
+                ${TerminalIcon('size-4')}
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-medium">Acme Inc</span>
+                <span class="truncate text-xs">Enterprise</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${navMain({ items: data.navMain })}
+        ${navProjects({ projects: data.projects })}
+        ${navSecondary({ items: data.navSecondary, class: 'mt-auto' })}
+      </div>
+      <div data-slot="sidebar-footer" data-sidebar="footer" class=${sidebarFooterClass()}>
+        ${navUser({ user: data.user })}
+      </div>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-16/components/nav-main.ts

@@ -0,0 +1,67 @@
+/**
+ * The sidebar-16 main nav: the "Platform" group, each section a link with a
+ * toggle beside it that opens its pages in a submenu. A fragment helper; each
+ * toggle is the `<summary>` of a native `<details>`, so the submenus open and
+ * close with no JavaScript. Ported from shadcn/ui's sidebar-16.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronRightIcon } from '../../../lib/icons.ts';
+
+export interface NavMainItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+  isActive?: boolean;
+  items?: { title: string; url: string }[];
+}
+
+export function navMain({ items }: { items: NavMainItem[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Platform</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${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" class=${sidebarMenuButtonClass()}>
+              ${item.icon()}
+              <span>${item.title}</span>
+            </a>
+            ${item.items?.length
+              ? html`<details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')} ?open=${!!item.isActive}>
+                  <summary data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass(), 'top-1.5 cursor-pointer list-none group-open/collapsible:rotate-90 [&::-webkit-details-marker]:hidden')}>
+                    ${ChevronRightIcon()}
+                    <span class="sr-only">Toggle</span>
+                  </summary>
+                  <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+                    <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                      ${item.items.map((sub) => html`
+                        <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                          <a href=${sub.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" class=${sidebarMenuSubButtonClass()}>
+                            <span>${sub.title}</span>
+                          </a>
+                        </li>
+                      `)}
+                    </ul>
+                  </div>
+                </details>`
+              : ''}
+          </li>
+        `)}
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-16/components/nav-projects.ts

@@ -0,0 +1,65 @@
+/**
+ * The sidebar-16 projects list: one link per project, each with a "More"
+ * menu that shows on hover, and a trailing "More" item. Hidden while the
+ * sidebar is collapsed to icons. A fragment helper; the menus are the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-16.
+ *
+ * Each "More" button sits right after its link, a sibling of it, because the
+ * kit's styles place it with `peer-*` selectors that need exactly that. The
+ * menu names it through `trigger="<id>"`, so the ids must be unique on the page.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { FolderIcon, MoreHorizontalIcon, ShareIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+export interface NavProject {
+  name: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+}
+
+export function navProjects({ projects }: { projects: NavProject[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'group-data-[collapsible=icon]:hidden')}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Projects</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${projects.map((item, i) => 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" class=${sidebarMenuButtonClass()}>
+              ${item.icon()}
+              <span>${item.name}</span>
+            </a>
+            <button type="button" id=${`nav-project-more-${i}`} data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'aria-expanded:bg-muted')}>
+              ${MoreHorizontalIcon()}
+              <span class="sr-only">More</span>
+            </button>
+            <ui-dropdown-menu trigger=${`nav-project-more-${i}`}>
+              <ui-dropdown-menu-content class="w-48" side="right" align="start">
+                <ui-dropdown-menu-item>${FolderIcon('text-muted-foreground')}<span>View Project</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>${ShareIcon('text-muted-foreground')}<span>Share Project</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item>${Trash2Icon('text-muted-foreground')}<span>Delete Project</span></ui-dropdown-menu-item>
+              </ui-dropdown-menu-content>
+            </ui-dropdown-menu>
+          </li>
+        `)}
+        <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+          <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+            ${MoreHorizontalIcon()}
+            <span>More</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-16/components/nav-secondary.ts

@@ -0,0 +1,40 @@
+/**
+ * The sidebar-16 secondary nav: small links (support, feedback) at the foot
+ * of the sidebar content. A fragment helper. Ported from shadcn/ui's
+ * sidebar-16.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+
+export interface NavSecondaryItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+}
+
+export function navSecondary({ items, class: className }: { items: NavSecondaryItem[]; class?: string }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), className)}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${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="sm" class=${sidebarMenuButtonClass({ size: 'sm' })}>
+                ${item.icon()}
+                <span>${item.title}</span>
+              </a>
+            </li>
+          `)}
+        </ul>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-16/components/nav-user.ts

@@ -0,0 +1,70 @@
+/**
+ * The sidebar-16 user menu: the signed-in user's avatar, name and email,
+ * opening an account menu. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-16.
+ *
+ * The menu items are placeholders. Make "Log out" a form that posts to your
+ * sign-out action, and the others links to your account pages.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { avatarClass, avatarFallbackClass, avatarImageClass } from '../../../components/avatar.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from '../../../lib/icons.ts';
+
+function userAvatar(user: { name: string; avatar: string }) {
+  return html`<span data-slot="avatar" data-size="default" class=${cn(avatarClass(), 'h-8 w-8 rounded-lg')}>
+    <span data-slot="avatar-fallback" class=${cn(avatarFallbackClass(), 'rounded-lg')}>VK</span>
+    <img data-slot="avatar-image" src=${user.avatar} alt="@vivek" class=${avatarImageClass()}>
+  </span>`;
+}
+
+function userText(user: { name: string; email: string }) {
+  return html`<div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-medium">${user.name}</span>
+    <span class="truncate text-xs">${user.email}</span>
+  </div>`;
+}
+
+export function navUser({ user }: { user: { name: string; email: string; avatar: string } }) {
+  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')}>
+              ${userAvatar(user)}
+              ${userText(user)}
+              ${ChevronsUpDownIcon('ml-auto size-4')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg" side="right" align="end">
+            <ui-dropdown-menu-label class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                ${userAvatar(user)}
+                ${userText(user)}
+              </div>
+            </ui-dropdown-menu-label>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${SparklesIcon()}Upgrade to Pro</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${BadgeCheckIcon()}Account</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${CreditCardIcon()}Billing</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${BellIcon()}Notifications</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item>${LogOutIcon()}Log out</ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * The sidebar-16 search form: a compact search field in the site header. A
+ * fragment helper, so it renders on the server and ships no JavaScript.
+ * Ported from shadcn/ui's sidebar-16.
+ *
+ * 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 } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { labelClass } from '../../../components/label.ts';
+import { 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 ?? null}>
+      <div class="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="Type to search..." class=${cn(sidebarInputClass(), 'h-8 pl-7')}>
+        ${SearchIcon('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none')}
+      </div>
+    </form>
+  `;
+}

package/packages/registry/blocks/sidebar-16/components/site-header.ts

@@ -0,0 +1,42 @@
+/**
+ * The sidebar-16 site header: a sticky bar across the top of the page with
+ * the sidebar toggle, a breadcrumb and the search form. A fragment helper;
+ * the toggle is the kit's `<ui-sidebar-trigger>`, which finds the provider it
+ * sits in. Ported from shadcn/ui's sidebar-16.
+ */
+import { html } 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 { searchForm } from './search-form.ts';
+import { ChevronRightIcon } from '../../../lib/icons.ts';
+
+export function siteHeader() {
+  return html`
+    <header class="sticky top-0 z-50 flex w-full items-center border-b bg-background">
+      <div class="flex h-(--header-height) w-full items-center gap-2 px-4">
+        <ui-sidebar-trigger class="[&>button]:size-8"></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" class="hidden sm:block">
+          <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+            <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+              <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+            </li>
+            <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${breadcrumbSeparatorClass()}>${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>
+        ${searchForm({ class: 'w-full sm:ml-auto sm:w-auto' })}
+      </div>
+    </header>
+  `;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * The sidebar-16 block's page: a sticky site header across the top, and a
+ * sidebar below it beside a placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-16` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-16.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { siteHeader } from './components/site-header.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <div class="[--header-height:calc(--spacing(14))]">
+      <ui-sidebar-provider class="[&>[data-slot=sidebar-wrapper]]:flex-col">
+        ${siteHeader()}
+        <div class="flex flex-1">
+          ${appSidebar()}
+          <ui-sidebar-inset>
+            <div class="flex flex-1 flex-col gap-4 p-4">
+              <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+                <div class="aspect-video rounded-xl bg-muted/50"></div>
+                <div class="aspect-video rounded-xl bg-muted/50"></div>
+                <div class="aspect-video rounded-xl bg-muted/50"></div>
+              </div>
+              <div class="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+            </div>
+          </ui-sidebar-inset>
+        </div>
+      </ui-sidebar-provider>
+    </div>
+  `;
+}

package/packages/registry/blocks/signup-01/components/signup-form.ts

@@ -0,0 +1,78 @@
+/**
+ * The signup-01 form: a card asking for a name, an email, a password and its
+ * confirmation, each with its helper text, and a Google button. A fragment
+ * helper (a function returning an `html` template), so it renders on the
+ * server and ships no JavaScript. Ported from shadcn/ui's signup-01.
+ *
+ * The `<form>` has no `action` yet. Bind a server action from a
+ * `'use server'` file (`<form action=${signUp}>`) before you ship it: the
+ * framework then supplies `method="post"`, and the no-JS post, the 422
+ * re-render with `fieldErrors` / `values`, and the 303 redirect all work.
+ * Until it is bound, the form submits as a GET back to the page with the
+ * typed values in the URL. The Google button is a placeholder for your
+ * provider's sign-up link.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { buttonClass } from '../../../components/button.ts';
+import {
+  cardClass,
+  cardContentClass,
+  cardDescriptionClass,
+  cardHeaderClass,
+  cardTitleClass,
+} from '../../../components/card.ts';
+import {
+  fieldClass,
+  fieldDescriptionClass,
+  fieldGroupClass,
+  fieldLabelClass,
+} from '../../../components/field.ts';
+import { inputClass } from '../../../components/input.ts';
+
+export function signupForm(opts: { class?: string } = {}) {
+  return html`
+    <div class=${cn(cardClass(), opts.class)} data-slot="card" data-size="default">
+      <div class=${cardHeaderClass()} data-slot="card-header">
+        <h1 class=${cardTitleClass()} data-slot="card-title">Create an account</h1>
+        <p class=${cardDescriptionClass()} data-slot="card-description">Enter your information below to create your account</p>
+      </div>
+      <div class=${cardContentClass()} data-slot="card-content">
+        <form>
+          <div class=${fieldGroupClass()} data-slot="field-group">
+            <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+              <label class=${fieldLabelClass()} data-slot="field-label" for="name">Full Name</label>
+              <input class=${inputClass()} data-slot="input" id="name" name="name" type="text" autocomplete="name" placeholder="John Doe" required>
+            </div>
+            <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+              <label class=${fieldLabelClass()} data-slot="field-label" for="email">Email</label>
+              <input class=${inputClass()} data-slot="input" id="email" name="email" type="email" autocomplete="email" placeholder="m@example.com" aria-describedby="email-description" required>
+              <p class=${fieldDescriptionClass()} data-slot="field-description" id="email-description">
+                We'll use this to contact you. We will not share your email with anyone else.
+              </p>
+            </div>
+            <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+              <label class=${fieldLabelClass()} data-slot="field-label" for="password">Password</label>
+              <input class=${inputClass()} data-slot="input" id="password" name="password" type="password" autocomplete="new-password" minlength="8" aria-describedby="password-description" required>
+              <p class=${fieldDescriptionClass()} data-slot="field-description" id="password-description">Must be at least 8 characters long.</p>
+            </div>
+            <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+              <label class=${fieldLabelClass()} data-slot="field-label" for="confirm-password">Confirm Password</label>
+              <input class=${inputClass()} data-slot="input" id="confirm-password" name="confirmPassword" type="password" autocomplete="new-password" aria-describedby="confirm-password-description" required>
+              <p class=${fieldDescriptionClass()} data-slot="field-description" id="confirm-password-description">Please confirm your password.</p>
+            </div>
+            <div class=${fieldGroupClass()} data-slot="field-group">
+              <div class=${fieldClass()} data-slot="field" data-orientation="vertical">
+                <button class=${buttonClass()} data-slot="button" type="submit">Create Account</button>
+                <button class=${buttonClass({ variant: 'outline' })} data-slot="button" type="button">Sign up with Google</button>
+                <p class=${cn(fieldDescriptionClass(), 'px-6 text-center')} data-slot="field-description">
+                  Already have an account? <a href="/login">Sign in</a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/signup-01/page.ts

@@ -0,0 +1,19 @@
+/**
+ * The signup-01 block's page: a simple signup form, centred on the page.
+ *
+ * Installed by `npx @webjsdev/ui add signup-01` at `app/signup/page.ts`. It
+ * is app code you own, so edit it freely. Ported from shadcn/ui's signup-01.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { signupForm } from './components/signup-form.ts';
+
+export const metadata: Metadata = { title: 'Sign up' };
+
+export default function SignupPage() {
+  return html`
+    <div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+      <div class="w-full max-w-sm">${signupForm()}</div>
+    </div>
+  `;
+}