shadcn.io is not affiliated with official shadcn/ui
Floating Notification Card Block for Vue
A visitor's message floating on a pricing page: a toggle group parks the card in any of four corners, Reply swaps its buttons for a one-line field, and Dismiss and Show again replay the slide-in.
Installation
Overview
Park a message on the page where it won't be missed, with this floating card for Vue with Ark UI. It's the widget of Cornerloft, a customer messaging tool: a drawn pricing page in a hairline frame with a plus mark on each corner, and one card on it from a visitor, with a name, the page and the time, the message and two buttons. A Toggle Group moves the card between the four corners (top start, top end, bottom start, bottom end); start and end follow the page's direction, so the card goes to the other side in an RTL language, and it glides there in CSS. "Reply" swaps the card's buttons for a one-line Input in the same space (Enter sends, Escape cancels) and the card says "Sent in this demo."; "Dismiss" hides the card, and "Show again" brings it back with its slide-in. The card keeps one height in every state. It's built from Toggle Group, Button, Input and Guides, with CSS motion only. For a chat widget, a promo or any message that floats over the page.
FAQ
How does the card move between corners?
Its box takes the corner's share of the stage with start and top (0% or 100%) and gives the same share of its own size back with a translation, so 0% sits flush with one edge and 100% flush with the other, whatever the card's size. Both are transitioned, so it glides; under reduced motion it jumps. The horizontal translation flips under an RTL page, which is what keeps "start" and "end" true. On a narrow screen the card is nearly as wide as the page, so the two top corners (and the two bottom ones) look alike.
What does Reply do, and what is sent?
It swaps the Reply and Dismiss buttons for a field, a Send button and a Cancel button in the same space, and puts focus in the field. Enter or Send with some text says "Sent in this demo."; an empty reply says "Write a reply first." and stays. Escape or Cancel goes back to the buttons with focus on Reply. Nothing is sent: the reply isn't stored. To make it real, post reply to your server in send and keep the receipt.
What stays local?
Everything: the corner, whether the card is shown, the reply you typed and the message itself (SENDER and MESSAGE at the top of the file) live in the block and reset on reload. The page behind is a drawing, not a real page.
What do Dismiss and Show again do?
Dismiss removes the card and moves focus to Show again, so the keyboard isn't lost; the Show again button is on screen from the start, quiet while the card is there. Pressing it remounts the card, which slides in again from the edge it is parked against, and moves focus to Reply. Nothing moves in the page while the card comes and goes.
Is it accessible?
The card is an aside named "Message from" its sender, the buttons and the field are named, the time is a time element, and a polite status message says where the card sits, that a reply was sent in the demo, or that the card was dismissed or shown again. The toggle group is named "Corner of the page" and works with the arrow keys. With reduced motion nothing glides or slides.