Invitation Only Access shadcn/tailwind block

Error23: Invitation Only Access

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.

Upgrade Now

Installation

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

bash

npx shadcn add "https://ui.beste.co/r/error23?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash

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.

Quick start

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.

tsx

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:

tsx

"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)}
    />
  );
}

Props

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;
};

Behavior notes

Pressing the pill flips local state and calls onRequest. The pill is replaced by the confirmation immediately, without waiting on the handler, so a slow request never leaves the button looking dead.
The switch is one way for that mount, which stops a visitor from firing the same request at an owner repeatedly.
Without 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.
Avatars overlap by a fixed negative margin and carry a background-coloured ring, so the row reads as a stack rather than a list. The caption sits beside them, not under them.
The record is a ruled dl, three columns from the sm breakpoint up, with each pair under its own top border.

More Error blocks

View all Error

PRO

error16

403 Access Request

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.

PRO

error33

Retired Page Record

Monochrome page for deliberately removed content: a display headline, a ruled record of when it was published, retired and why, then a pill link to the replacement beside an archive link.

PRO

error21

Server Error Record

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.

PRO

error32

404 With Recent Writing

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.

PRO

error19

Typographic 404 Index

Monochrome 404 built on oversized display type: a parenthetical eyebrow, a display headline with a muted emphasis clause, a pill call to action, and a ruled index of every section on the site.

PRO

error20

Editorial 404 With Portrait Image

Two-column 404 in a quiet monochrome language: a parenthetical eyebrow, a two-line display headline, a pill call to action and an oversized report-the-link email on the left, a tall captioned photograph on the right.