The project exists, your account simply is not on it yet. Ask for a seat and whoever owns the work will see it straight away.
Nine people already work in here
Monochrome permission page: a display headline over a request pill that swaps to a sent confirmation, a ruled record of the project, owner and visibility, and an overlapping avatar row of current members.
A permission page for private projects: the request pill swaps to a sent confirmation on click, a ruled record names the project, its owner and its visibility, and an overlapping avatar row shows who is already inside.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/error23?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/error23?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/error23.tsx, plus the two design-system primitives it renders through: badge7 for the parenthetical eyebrow and button12 for the request pill.
The installed file exports error23Demo alongside the block: the exact props behind the preview above. Spread it to get a working permission page in one line.
import { Error23, error23Demo } from "@/components/beste/block/error23";
export default function Forbidden() {
return <Error23 {...error23Demo} />;
}Sending the request is the caller's job, so pass a handler:
"use client";
import { Error23 } from "@/components/beste/block/error23";
export default function Forbidden({ projectId }: { projectId: string }) {
return (
<Error23
badge={{ label: "Private" }}
heading="This one is <strong>invitation only</strong>."
description="The project exists, your account simply is not on it yet."
labels={{
request: "Ask for access",
requested: "Sent. The owner has your request.",
detailsTitle: "What you are asking for",
membersCaption: "Nine people already work in here",
}}
details={[
{ title: "Project", value: "Harbour rebuild" },
{ title: "Owner", value: "Ines Karlsen" },
]}
members={[
{ src: "/avatars/ines.jpg", alt: "Portrait of a project member" },
{ src: "/avatars/tobias.jpg", alt: "Portrait of a project member" },
]}
link={{ label: "Sign in with another account", href: "/sign-in" }}
onRequest={() => requestAccess(projectId)}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Parenthetical eyebrow above the headline |
heading | string | – | Headline HTML, rendered as an h1; <strong> marks the muted clause |
description | string | – | Explanatory paragraph under the headline |
labels | Error23Labels | {} | Request pill text, sent confirmation, record eyebrow, and the avatar caption |
details | DetailRow[] | [] | Ruled record of the project being requested |
members | AvatarItem[] | [] | Overlapping avatars of current members |
link | ActionLink | – | Text link beside the request pill |
onRequest | () => void | – | Called when the request pill is pressed |
className | string | – | Extra classes for the outer <section> |
type Error23Labels = {
request?: string;
requested?: string;
detailsTitle?: string;
membersCaption?: string;
};
type DetailRow = {
title: string;
value: string;
};
type AvatarItem = {
src: string;
alt: string;
};
type ActionLink = {
label: string;
href: string;
};onRequest. The pill is replaced by the confirmation immediately, without waiting on the handler, so a slow request never leaves the button looking dead.onRequest the pill still swaps to the confirmation, so the block can be dropped in before the request flow exists. Wire the handler before shipping.dl, three columns from the sm breakpoint up, with each pair under its own top border.error16
Permission-denied page for team apps: an accent lock chip and bold headline on the left, the signed-in account card with an account switch link and a square-bullet list of access requirements on the right.
error21
Monochrome server-error page: a parenthetical eyebrow over a display headline, a retry pill beside a status link, and a ruled two-column record of the reference, timestamp, subsystem and state.
error37
A permissions error that names the missing role, lists the people who can grant it with their portraits, and floats a live access request card on an image tile beside the copy.
error32
Monochrome 404 for a renamed article: a display headline and pill call to action above three recent entries, each a full-colour image tile with a plain date line and a bold title.