Screens overview

Drop-in screen scaffolds. AuthLayout, EmptyState, ErrorScreen.

@plyxui/screens is the "I just need a competent default" layer. Each export is a screen scaffold you can use as-is or peel apart for your own composition.

Install

npm install @plyxui/screens

Auto-pulls everything below: layouts, primitives, icons, styles, core, hooks (transitively).

AuthLayout

The classic centered-card layout used by sign-in, sign-up, forgot-password, and magic-link confirm.

import { AuthLayout } from "@plyxui/screens";

<AuthLayout
  title="Sign in"
  subtitle="Welcome back."
  brand={<Logo />}
  footer={<a href="/help">Trouble signing in?</a>}
>
  <SignInForm />
</AuthLayout>

EmptyState

The "no data yet" screen. Big icon, headline, supporting copy, optional CTA. Use as a leaf inside a routed view (not a full-screen layout).

import { EmptyState } from "@plyxui/screens";
import { Button } from "@plyxui/primitives";

<EmptyState
  icon="inbox"
  title="No messages yet"
  body="When someone reaches out, they'll show up here."
  action={<Button onClick={invite}>Invite a friend</Button>}
/>

ErrorScreen

The "something broke" full-screen. Big status code, headline, optional retry + go-home buttons.

import { ErrorScreen } from "@plyxui/screens";
import { Button } from "@plyxui/primitives";

<ErrorScreen
  code={500}
  title="Server hiccup"
  body="We logged it. Hit retry or head back home."
  primary={<Button onClick={retry}>Retry</Button>}
  secondary={<Button variant="ghost" as="a" href="/">Home</Button>}
/>