# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/error37. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-03

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Error](/blocks/error)
5. /
6. Access Denied With Request Path

# Access Denied With Request Path[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/error37`

## Error37: Access Denied With Request Path

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.

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 NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/error37?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/error37.tsx`, the `notification20` request piece it floats on the tile (installed to `components/beste/piece/notification20.tsx`), and the `button21` component it uses for the actions.

### Quick start

The installed file exports `error37Demo` alongside the block: the exact props behind the preview above. Spread it to get a working error page in one line.

tsxCopy

```
import { Error37, error37Demo } from "@/components/beste/block/error37";

export default function ForbiddenPage() {
  return <Error37 {...error37Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Error37 } from "@/components/beste/block/error37";
import { Notification20 } from "@/components/beste/piece/notification20";
import { ShieldCheck } from "lucide-react";

export default function ForbiddenPage() {
  return (
    <Error37
      code="Error 403"
      heading="You are signed in, but not into this"
      description="This record sits behind the clinical role, which your account does not hold."
      buttons={[
        { label: "Request access", href: "/access/request" },
        { label: "Back to the workspace", href: "/app" },
      ]}
      media={
        <Notification20
          icon={ShieldCheck}
          title="Access request"
          meta="Your request goes to the record owner"
          primaryLabel="Send request"
          secondaryLabel="Cancel"
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      approversLabel="Who can grant this"
      approvers={[
        {
          name: "Elena Rourke",
          role: "Practice lead, Bramble Health",
          avatar: { src: "/people/elena.jpg", alt: "Portrait of Elena Rourke" },
        },
      ]}
      footnote="The decision and its timestamp are written into the audit log."
    />
  );
}
```

### Props

| Prop           | Type                         | Default | Description                                                |
| -------------- | ---------------------------- | ------- | ---------------------------------------------------------- |
| code           | string                       | –       | Small status line above the heading                        |
| heading        | string                       | –       | Error heading, rendered as the page h1                     |
| description    | string                       | –       | Supporting paragraph, capped at max-w-md                   |
| buttons        | ActionLink\[\]               | \[\]    | Actions in source order, first solid and the rest outlined |
| media          | ReactNode                    | –       | Live asset on the tile, notification20 in the demo         |
| image          | { src: string; alt: string } | –       | Backdrop behind the media tile                             |
| approversLabel | string                       | –       | Small label above the approver list                        |
| approvers      | Approver\[\]                 | \[\]    | People who can grant the missing role                      |
| footnote       | string                       | –       | Audit note under the approvers                             |
| className      | string                       | –       | Extra classes for the outer section                        |

tsCopy

```
type ActionLink = {
  label: string;
  href: string;
};

type Approver = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};
```

### Behavior notes

* Naming the approvers is the point of the block. A 403 that says only "access denied" sends people to a shared inbox, so this one carries the specific people who can act, populated from whoever owns the record.
* Approver rows use `min-w-0` with `truncate` on both lines, so a long name or role ellipsizes rather than pushing the portrait out of the row.
* Portraits are fixed at `size-10` with `shrink-0`, so the row height stays constant however long the text is.
* Button tones are positional and not overridable: the first is `primary`, later ones are `outline`.
* The approver group carries a `border-t` on its own container, so removing `approvers` removes the rule with it rather than leaving a stray divider.
* The request card in the tile is presentational. This block renders no form and sends no request, so the primary action is a link to wherever your request flow lives.
* The layout is `lg:grid-cols-2` with `lg:items-center`, so the tile stays centered against a copy column whose height varies with the number of approvers.

## More Error blocks

[View all Error](/blocks/error)

[](/block/error16)

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.

[](/block/error23)

PRO

error23

### Invitation Only Access

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.

[](/block/error9)

FREE

error9

### 404 Did You Mean

Left-aligned 404 for documentation and marketing sites: the requested path is shown struck through in monospace above a did-you-mean box linking to the closest matching page.

[](/block/error35)

FREE

error35

### Server Error With Live Status

A calm server-error page with a monospace code, an oversized light heading, recovery actions, an image tile floating a live uptime strip, and a hairline table carrying the incident reference.

[](/block/error4)

PRO

error4

### 404 With Destination Cards

404 page that recovers the visit with a grid of destination cards, each with an icon, title, description, and hover arrow, followed by a centered row of fallback buttons.

[](/block/error15)

PRO

error15

### 500 Incident Report

Server error page with a square eyebrow and status code over a hairline rule, a bold accent headline, a bordered incident table of reference, timestamp and service rows, and a retry seal button beside a status page link.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.