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

```tsx
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](/deft/components/empty) instead.
- `Root` centers a narrow column and creates a stacking context for a [Backdrop](/deft/components/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

```tsx
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

```tsx
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](/deft/components/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

| Prop | Type | Default | Description |
| - | - | - | - |
| `title?` | `ReactNode` | - | On Heading. Required, rendered as the `h1`. |
| `description?` | `ReactNode` | - | On Heading. |
| `code?` | `string` | - | On Heading. An HTTP status, such as 404. |

Parts: `Root`, `Body`, `Corner`, `Header`, `Heading`, `Logo`, `Panel`. `Panel` takes the props of [Panel](/deft/components/panel); other parts except `Heading` and `Logo` pass their props to the native `div`.