Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Chat Encryption Indicator Block for Vue

A private messenger thread with a lock and an End-to-end encrypted tooltip in the top bar, an Encrypted note under each run, and a Verify pane with a typed safety number, its QR code and a Mark as verified switch that turns the lock into a Verified check.

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

Show what an encrypted chat tells its users with this encryption indicator chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Cipherbrook, a private messenger, with the thread and a Verify pane at the end. The top bar names Saskia Rendell, says "End-to-end encrypted" with a lock and ends with a lock button whose Tooltip opens on hover and on keyboard focus; under each run of Message and Bubble rows a small lock and the word "Encrypted" sit beside the time. The Verify pane shows a typed 12-group safety number in monospace, the QR Code of it and a Switch "Mark as verified": turning it on changes the lock to a "Verified" check and adds "You verified Saskia's safety number (in this demo)" to the log. The pane says plainly that nothing in the demo is encrypted. The Shine Button sends, and Guides rule the frame. For a private messenger, a banking chat or any thread where trust is part of the screen.

FAQ

Is anything encrypted in this demo?

No. The block is an illustration of the interface: the numbers are typed, the QR code encodes them, the messages stay in the page and the pane and the status line say so. Encryption belongs in your messaging library; this block is only where its state is shown.

What stays in the page, and how do I make it real?

Everything, including the verified switch. To wire it for real, compute the safety number from the two parties' identity keys, show the same groups on both screens, store the verified flag against the contact's key and clear it when the key changes, and render the lock from that flag.

What does Mark as verified change?

The lock in the top bar becomes a check and the line under the name says "Verified"; the tooltip says so too, and a system line is added to the log. Turning it off adds a line saying you cleared it. Nothing is stored.

How does the tooltip work with a keyboard?

The lock is a real button: the tooltip opens on focus as well as on hover, and pressing the button opens the Verify pane (on a phone, switches to it). Its name says what the lock means, so the tooltip is a convenience rather than the only place the words appear.

Is it usable with a keyboard and a screen reader?

The log is announced as a log; the safety number is a list read group by group, in one fixed direction; the QR code has a name; and the switch is labelled by its visible text. Changes are spoken once through the polite status line.

How does it look on a phone?

A two-view choice, Chat and Verify, sits above the window and shows one pane at a time, as radio buttons that work with the arrow keys. Pressing the lock in the top bar switches to Verify. The window keeps its height and only the panes scroll.

All 200 chat blocks