Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Floating Notification Card Block for React

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.

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

Park a message on the page where it won't be missed, with this floating card for React with Base 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.

How does it look on a phone?

The four corner buttons form a 2 by 2 grid, with Show again under them at full width. The card is as wide as the page minus a margin, so it sits at the top or the foot of the drawing.

  • Pro

    Slide-In Notification Panel

    Bells and panels

    A notifications panel that slides in from the end of a sales pipeline's page, open on load: a bell that toggles it, five rows that mark themselves read, and Clear all with an exact Undo.

  • Pro

    Bell Dropdown Notification

    Bells and panels

    The list under a CRM's notification bell, shown open under its top bar: five notifications that mark themselves read when pressed, a bell whose count and name go down with them, Mark all read and See all.

  • Pro

    Stacked Notification Cards

    Floating cards

    Three reminders from a scheduling assistant as a deck of cards: Dismiss lets the next one come forward, Show all fans the deck into a list, and an empty deck says all caught up with a Reset.

  • Pro

    Real-Time Notification Feed

    Live and empty states

    A live status feed that doesn't jump: a typed script of six events starts when you press Start, new ones wait in a pill above the list, and pressing the pill lets them in at the top.

  • Pro

    Tabbed Inbox Notification

    Bells and panels

    A notification centre as a narrow panel: tabs for All, Mentions and Alerts with their own unread counts, rows you press to mark read, a mark all read for the open tab and a clear with an undo.

  • Pro

    Push Permission Prompt Notification

    Asks and consent

    A news app's push permission ask drawn in a browser window: a soft card on the page, a drawn browser prompt with Allow and Block, and the three outcomes, with a line that says nothing is asked of your real browser.

All 100 notification blocks