shadcn.io is not affiliated with official shadcn/ui
Invite Codes Account Block for Ark UI
The invite codes a member can give: five hairline cells with each code in mono, its state in words (Unused, Used by initials and day, Revoked), Copy, a two-step Revoke and a Make a new code button that explains why it can't.
Installation
Overview
Let members hand out a few invitations and see where each one went, with this invite codes panel for React with Ark UI. A hairline frame holds five cells and a sixth for the allowance. Each cell shows a code in mono with its state in words: Unused, Used by two initials and the day they joined, or Revoked with the day. An unused code has a Copy Button and a two-step Revoke, Revoke and then Confirm or Cancel, with Escape cancelling. The header's Shine Button is the only colored control and makes a new code in the first revoked slot; when all five slots hold an active code the button says it can't and the allowance cell and the status line explain why, so a code freed by revoking is the way back. The sentence over the panel counts unused, used and revoked from the cells. Every cell is the same height whatever its state. It's built from Copy Button, Shine Button, Badge, Button and Guides, with a CSS entrance only. For invite-only communities, beta programmes and any app with a limited number of invitations.
FAQ
How do I fill it with real codes?
Edit SLOTS: one object per slot with an id, the code, its state (unused, used or revoked), the ISO day it was used or revoked (on) and the who initials of the person who joined. The counts in the sentence and in the allowance cell are worked out from the slots. New codes come from POOL in order, so replace that with a call to your server, which should make and store the real code.
What stays local, and how do I make it real?
All of it: Make a new code draws a sample code from POOL, Revoke marks the slot revoked in this page's state, and the status line says the codes work nowhere. Copy is real, it puts the code on the clipboard. To wire it, create the code in make, revoke it on the server in confirm, and only change the cell when your server answers.
Why can't I make a code?
There are five slots and each holds a code you can still give or one that was used. A slot is free only when its code is revoked, so with all five active the button is quiet and pressing it says "All five slots hold an active code. Revoke an unused one to make room." A used code can't be revoked, because the person has already joined with it.
How does revoking work?
Revoke swaps in place for Confirm and Cancel and moves focus to Confirm; Cancel sits where Revoke was, so a double click can't confirm by mistake. Escape cancels while focus is inside the panel and returns focus to Revoke. After confirming, focus moves to the Make a new code button, since the slot is now free.
How does it look on a phone?
The six cells stack one across, each the same height. The Copy and Revoke buttons sit under the code and state in a wrapping line, and the foot with the status line is pinned to the bottom of the screen.
Is it accessible?
The cells are a real list and the buttons name their code, since every cell repeats the same words. Each state is written out, a revoked code is struck through and also says Revoked, and the code reads start to end in a right-to-left page. The status line is a polite live region present from the start.