Invitation Only Access

A full-height, monochrome permission screen for a private project: a headline explaining access is restricted, a pill-shaped Request access button that swaps to a sent confirmation, a ruled record of the project, its owner, and its visibility, and an overlapping row of current members' avatars.

By Staaarter Team

Error

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/invitation-only-access.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/error/error23.tsx instead.

Usage

The file also exports error23Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Error23, error23Demo } from "@/components/blocks/error/error23";

export default function Page() {
  return <Error23 {...error23Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	none	Screen headline.
description	string	none	Short explanation shown under the headline.
requestLabel	string	none	Label for the Request access button.
requestedLabel	string	none	Label for the badge shown after the request is sent.
records	AccessRecord[]	none	Ruled label/value rows, e.g. Project, Owner, Visibility.
members	AccessMember[]	none	Current members, rendered as an overlapping row of initials avatars.
className	string	none	Extra classes for the outer section element.

Types

interface AccessRecord {
  label: string;
  value: string;
}

interface AccessMember {
  name: string;
}

Behavior notes

Clicking "Request access" is real client-side state: it flips a requested flag and swaps the button for a "Request sent" badge, but no request is actually sent anywhere.
The records list and the avatar row are static, decorative data with no interactivity.
Avatars are initials-only (via initialsFromName), with -space-x-2 applied to the row for the overlap effect and a background-colored border on each avatar to separate them visually.

More Error Blocks

View all →

centered-404-message

Centered 404 Message

Minimal centered 404 with two CTAs and a divided row of popular page links.

404-with-site-search

404 With Site Search

404 screen with a working search box and a bordered list of suggested pages.

split-404-with-image

Split 404 With Image

Two-column 404 with the message on one side and a full-bleed photo that scales on hover on the other.

404-with-destination-cards

404 With Destination Cards

404 screen with a grid of icon destination cards plus fallback CTA buttons.

404-support-panel

404 Support Panel

Card-style 404 echoing the requested URL, with a real back button and a support/status link row.

inline-404-line

Inline 404 Line

The smallest possible 404: code and message on one divided line with one button underneath.