About

A blank canvas frame with no application chrome. Use this frame when prototyping customer-facing pages, public forms, landing pages, login screens, or any experience that exists outside of the main Skedulo application shell. The frame is intentionally minimal — a bordered white container at a fixed height with no sidebar, header, or navigation. This gives you complete control over the page layout and visual design.

Import

import { PublicPageFrame } from "@/components/frames/PublicPageFrame";

Usage Guidance

When to use

+Prototyping customer-facing or public pages outside the app shell.
+Designing login, signup, or onboarding flows.
+Building landing pages, booking confirmations, or status pages.
+Any prototype that needs a completely blank canvas.

When not to use

−For pages within the Skedulo app — use FullPageApplicationFrame instead.
−For admin or settings pages — use AdminFrame instead.
−For side panel prototypes — use ContextPanelFrame instead.

Code Samples

Blank canvas

An empty frame ready for any content.

import { PublicPageFrame } from "@/components/frames/PublicPageFrame";

export default function MyPublicPagePrototype() {
  return (
    <PublicPageFrame>
      <div className="flex items-center justify-center h-full">
        <p className="text-gray-400">Your prototype here</p>
      </div>
    </PublicPageFrame>
  );
}

Customer booking page

A public-facing booking confirmation page with a logo header.

<PublicPageFrame>
  <div className="h-full flex flex-col">
    <header className="px-6 py-4 border-b border-gray-200">
      <div className="flex items-center gap-2">
        <div className="w-6 h-6 bg-blue-500 rounded" />
        <span className="text-sm font-semibold">Acme Services</span>
      </div>
    </header>
    <div className="flex-1 flex items-center justify-center p-8">
      <div className="text-center max-w-md">
        <h1 className="text-xl font-bold mb-2">Booking Confirmed</h1>
        <p className="text-sm text-gray-500">
          Your appointment is scheduled for March 15 at 10:00 AM.
        </p>
      </div>
    </div>
  </div>
</PublicPageFrame>

Login form

A standalone login page with centered form.

<PublicPageFrame>
  <div className="h-full flex items-center justify-center bg-gray-50 p-8">
    <div className="w-full max-w-sm bg-white rounded-lg border p-6">
      <h1 className="text-lg font-bold text-center mb-6">Sign In</h1>
      <div className="space-y-4">
        <input
          type="email"
          placeholder="Email"
          className="w-full border rounded-md px-3 py-2 text-sm"
        />
        <input
          type="password"
          placeholder="Password"
          className="w-full border rounded-md px-3 py-2 text-sm"
        />
        <button className="w-full bg-blue-600 text-white rounded-md py-2 text-sm font-medium">
          Sign In
        </button>
      </div>
    </div>
  </div>
</PublicPageFrame>

API Reference

Prop	Type	Default	Description
children*	React.ReactNode	—	The prototype content to render inside the frame.
height	string	"600px"	Height of the frame container. Use a fixed value for documentation previews, or "100vh" for full-screen prototypes.