Standalone

A centered card for pages outside the application shell, such as sign-in, onboarding and errors.

import { Standalone } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StandaloneBasic() {
  return (
    <Preview block={true}>
      <Standalone.Root className="min-h-0">
        <Standalone.Panel>
          <Standalone.Header>
            <Standalone.Logo />
          </Standalone.Header>
          <Standalone.Body>
            <Standalone.Heading description="Description" title="Title" />
          </Standalone.Body>
        </Standalone.Panel>
      </Standalone.Root>
    </Preview>
  );
}

Use it when the user is not inside the application yet or has left it: sign-in, invitations, onboarding, OAuth consent and route errors.
Inside the application, show an empty or failed state with Empty instead.
Root centers a narrow column and creates a stacking context for a Backdrop. Panel holds the card, Header and Body lay it out.
Logo is the OpenPerf tile for the header. Corner pins page-level controls, such as the theme toggle, to the top right.
Heading renders the page h1 with an optional description.

Error

import { Standalone } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StandaloneError() {
  return (
    <Preview block={true}>
      <Standalone.Root className="min-h-0">
        <Standalone.Panel>
          <Standalone.Header>
            <Standalone.Logo />
          </Standalone.Header>
          <Standalone.Body>
            <Standalone.Heading code="404" description="Description" title="Title" />
          </Standalone.Body>
        </Standalone.Panel>
      </Standalone.Root>
    </Preview>
  );
}

Pass code to Heading for an HTTP status. It is decorative and hidden from assistive technology, so the title must explain the error on its own.

Steps and connected apps

import { Avatar, Standalone, StepProgress } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function StandaloneStepsAndConnectedApps() {
  return (
    <Preview block={true}>
      <Standalone.Root className="min-h-0">
        <Standalone.Panel>
          <Standalone.Header>
            <Avatar.Bridge
              from={
                <Avatar.Root shape="square" size="xl" tone="inverse">
                  A
                </Avatar.Root>
              }
              to={<Standalone.Logo />}
            />
          </Standalone.Header>
          <StepProgress.Root count={3} current={2} />
          <Standalone.Body>
            <Standalone.Heading description="Description" title="Title" />
          </Standalone.Body>
        </Standalone.Panel>
      </Standalone.Root>
    </Preview>
  );
}

Put a Step progress between Header and Body for a multi-step flow. Replace Logo with Avatar.Bridge in the header when another app asks for access.

API

PropType

title?ReactNode

On Heading. Required, rendered as the `h1`.

TypeReactNode

description?ReactNode

On Heading.

TypeReactNode

code?string

On Heading. An HTTP status, such as 404.

Typestring

Parts: Root, Body, Corner, Header, Heading, Logo, Panel. Panel takes the props of Panel; other parts except Heading and Logo pass their props to the native div.