Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Workspace Invite Notification Block for Radix UI

Two pending workspace invitations with who invited you, the role as a glyph and a word and the time, each answered in place without moving: Accept leaves a receipt with Undo and Switch workspace, Decline asks first, and the count follows.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let someone say yes or no where they read the invitation, with this invite notification for React with Radix UI. It is Gatenook, a workspace app, in a framed panel with a plus mark on each corner: two pending invitations, each with an Avatar of who invited you, the workspace, the role as a Badge with a glyph and a word, the member count and the time. "Accept" (the one Shine Button, on the first) turns that row's controls into "Joined Tarrow Court as Editor." with an Undo and a "Switch workspace" that makes it the workspace shown under the list; "Decline" first asks "Decline the invite?" in the same place, then leaves a receipt with an Undo. The count in the band follows every answer and a Guides rule closes each band. For workspace apps, team tools and any product people are invited into.

FAQ

How do I use my own invitations?

Edit INVITES: each has an id, the inviter and their initials, the workspace, the role (Editor or Viewer), the members count and an ISO at in UTC. HOME is the workspace you are in before you switch, and AS_OF is the page's fixed now, so a time reads "08:40 UTC" or "Yesterday 15:12 UTC".

What stays local, and how do I make it real?

All of it. Accept, Decline, Undo and Switch workspace change this page's state and say so ("Joined Tarrow Court as Editor in this demo"); no invitation is accepted, no request is sent and there is no mail link. In your app call your accept and decline endpoints from accept and decline, keep the two-step decline and keep Undo as a way back for as long as your endpoint allows it.

Why does a row never change height?

Each row has one cell holding the three states, the question, the decline confirmation and the receipt, stacked so the cell is as tall as the tallest and the inactive ones are unseen and out of the tab order. Answering swaps what shows without moving the next invitation, and focus moves to the control that took the place of the one you pressed.

Why does Decline ask first?

Declining may be hard to take back in a real product, so the row asks "Decline the invite to this workspace?" in the same place, with "Keep it" first in the order. Pressing Decline invite leaves a receipt and an Undo; Keep it puts the question back. Nobody is told in this demo.

How does it look on a phone?

Each row stacks: the avatar and the sentence, the role and the facts under it, then the buttons. The question and the receipt sit above their buttons instead of beside them, and the status line is the same one line at the foot.

Is it accessible?

Buttons name their workspace ("Accept Tarrow Court"), Undo says what it undoes, the role is a glyph and a word, and the one polite status line reports each answer and the count. Hidden states are inert, so only the visible controls are in the tab order.

All 100 notification blocks