shadcn.io is not affiliated with official shadcn/ui
Daily Quote Dialog Block for Vue
A journaling app's page with its quote of the day shown open: a large quote for each day of one week, Previous and Next day buttons, a Today badge, Save and Copy, and the chosen quote carried onto the journal page behind it.
Installation
Overview
Give each day one line to start from, with this daily quote dialog for Vue with Ark UI. It opens from the Journal page of Noonpage, a journaling app: the page's header holds a ghost Today's quote Button that also keeps the count of saved quotes ("Saved 2"), and the page, a phone-sized journal screen with an entry box, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog shows one quote in large type for the day you are on, one for each day from 6 to 12 October 2026, with the author under it. Previous day and Next day page through the week, and so do the arrow keys; a Today badge marks the fixed day the demo treats as now. A Toggle saves the quote and a Copy Button copies it with its author. The quote you stop on appears above the entry box on the page behind. The quotes are invented, and nothing is shared. For preview the dialog is drawn open in place when the page loads.
FAQ
Why is the dialog already open?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Today's quote button in the header opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same QuoteCard component and share the block's state, so the day you paged to in place is the day in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How does paging by day work?
QUOTES holds seven entries, one per day, in order, and the card shows the one at the current index. Previous day and Next day move it by one; at the first and last day they stay aria-disabled and say so in the polite status instead of doing nothing. The left and right arrow keys do the same while focus is inside the card, mirrored in a right-to-left page, and they are ignored in fields and with a modifier key held. The height of the card is held by laying every quote in one grid cell, so a longer quote never moves the buttons.
What do Save and Copy do?
Save toggles the day's quote in a list kept in the page's state, and the header's count follows it. Copy writes the quote and its author to the clipboard and its label reads Copied for a moment; if the browser refuses, the status line says so. Neither is stored or sent anywhere. The Today badge always keeps its space, so the day label doesn't shift when you page away from it.
What stays local, and how do I wire it for real?
Everything. The quotes are typed into the file, with invented authors, and AS_OF is the fixed day that counts as today; saved quotes live in this page's state. In your app load the day's quote from your API by date, store saves with the person's account in the save handler, and drop AS_OF for the real date.
Where does focus go?
The real dialog is named by its title and described by its sentence, and focus starts on Previous day. Paging keeps focus on the button you pressed, and Escape, Done and the close button return it to the Today's quote button. The trigger is wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange.
How does it look on a phone?
The copy shown on load docks to the foot of the frame as a bottom sheet with Done pinned and the content scrolling above it. The pager keeps its three columns, the quote keeps its display size, and Save and Copy wrap under the arrow-key hint if the row is too narrow. The real dialog keeps the Dialog's own phone layout, a sheet from the bottom.