# AccessDeniedScreen

Full-screen "you don't have permission" surface. Pairs with `<RequireRole>` from `@rahhal/auth/react` as the default `deniedFallback`. Same anatomy as `<EmptyState>` — icon · title · description · action — with a destructive-tinted icon tile and a viewport-filling default layout.

[View examples](https://marsam.rahhal.app/components/access-denied-screen) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/access-denied-screen`

**Category:** `auth`

## Props

| prop | type | purpose |
| --- | --- | --- |
| icon | ReactNode | override the default <ShieldOff>; render any 18–24px node |
| title | ReactNode | headline; default "Access denied" |
| description | ReactNode | body copy explaining why the page is blocked |
| action | ReactNode | trailing action(s); typically a sign-out button |
| fullHeight | boolean | default true — fills the viewport; set false to embed inside a smaller slot |

## Pattern

```tsx
import { AccessDeniedScreen, Button } from "@rahhal/ui";
import { signOut, useSupabase } from "@rahhal/auth/react";

function Denied() {
  const supabase = useSupabase();
  return (
    <AccessDeniedScreen
      title="Admins only"
      description="Your account doesn't have permission for this admin tool."
      action={<Button onClick={() => signOut(supabase)}>Sign out</Button>}
    />
  );
}
```