Toast
Deck Toast
A card-deck notification stack: several cards shifted one under another, the top one reads in full, and the sliver beneath shows the queue isn't over.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the list through items, with id, title and an optional tone
- the captions through closeLabel and emptyLabel
- the handler through onDismiss
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/toast-011?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Toast011
items={[
{ id: "1", title: "Project backup created", tone: "success" },
{ id: "2", title: "New comment on the catalog mockup" },
]}
onDismiss={handleDismiss}
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Close label
closeLabel· default: Close- Empty state
emptyLabel· default: No notifications left- Hidden cards
behindText· default: {count} more behind this card- Background
background· default: theme colour
More in Toast
FAQ
- How do I add Deck Toast with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Deck Toast depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Deck Toast?
- Adapt: the list through items, with id, title and an optional tone; the captions through closeLabel and emptyLabel; the handler through onDismiss. Keep as installed: the card's shift, scale and opacity through the --vibeui-toast-011-index variable inside calc(), not separate CSS classes per index; aria-hidden and tabIndex={-1} on the cards behind the top one — a screen reader and Tab should only reach what the eye sees; the close button with an aria-label that includes the card's text.
- Is Deck Toast free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/toast-011.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-toast-011-* variables. Every card is an absolutely positioned element whose shift, scale and opacity are computed by calc() from the --vibeui-toast-011-index variable, so a deck of any number of cards needs no separate CSS rule per index. The top card is the only one in the tab order and in the accessibility tree: the cards beneath it carry aria-hidden="true" and tabIndex={-1}, and the pointer is switched off through data-behind. Clicking the cross removes the top card and the deck shifts up — the state lives in useState, the component is client-side.
Tags
- toast
- stack
- deck
- notifications
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…