shadcn.io is not affiliated with official shadcn/ui
Flashcard Dialog Block for Solid
A vocabulary trainer's deck list with its study dialog shown open: eight word cards that flip in CSS 3D, Again, Hard, Good and Easy, a queue that brings missed cards back, a progress bar, a typed shuffle and an end summary.
Installation
Overview
Study a deck one card at a time and see the ones you missed again, with this flashcard dialog for Solid with Ark UI. It opens from the deck list of Lexiloft, a vocabulary trainer: the header holds an outline Button, and the list it opens over is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, with a row for each deck and, on the open one, a strip of eight small squares and a known count. The Dialog shows a Progress bar and a line such as 3 of 8 done, 2 known, a Shuffle Toggle, and one card, a button that turns over in CSS 3D to show the meaning and an example. Show answer, a Shine Button, is replaced by Again, Hard, Good and Easy once the card is flipped. Again puts the card back at the end of the queue, Hard clears it without counting it as known, and Good and Easy count it as known. The end shows how often each button was pressed. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog, with the same state. For language apps, exam prep, onboarding quizzes and any product that teaches with repetition.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the deck list: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Study 8 cards 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 StudyFields component and share the block's state, so what you set in the copy is there 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 the queue work?
Run holds the order of the cards, where you are in it, how many are cleared and known, and how often each button was pressed. rate is a pure function: Again appends the current card to the end of the queue and clears nothing; the other three clear the card, and Good and Easy also count it as known. The line reads cleared of total, so with a missed card it can pass the number of cards you have seen. Shuffle swaps to a typed alternate order and starts over; it is not random. Edit CARDS, NATURAL and SHUFFLED, or load them from your deck.
How does the card flip, and what about reduced motion?
The card is one button holding both faces. Pressing it, or Space or Enter while it has focus, turns it over with a 500 ms CSS 3D rotation; the face that is turned away is hidden from assistive technology, and a polite status message reads the meaning aloud. With reduced motion on, the card does not turn: the two faces crossfade in 200 ms in the same place. After a flip, the digits 1 to 4 rate the card while it has focus.
What stays local, and how do I wire it for real?
Everything. The deck row on the page behind shows the known count from the current run, and nothing is saved. Closing keeps the run, so reopening carries on. In your app send each rating from grade to your scheduler (a spaced-repetition interval for each card), and fill CARDS from the cards due today.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus is trapped while it is open, and Escape and the close button return focus to the header button. The trigger is the button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The copy shown on load moves no focus; Escape inside it and its close button close it and put focus back on the header button. The card, the rating buttons and Shuffle are all reachable with Tab, in that reading order. When the last card is rated, focus moves to the summary.
How does it look on a phone?
The copy shown on load docks to the foot of the frame as a bottom sheet with Close pinned below the scrolling body. The four rating buttons share one row, and the row keeps its height while Show answer takes its place, so the card never moves. The real dialog keeps the Dialog's own phone layout: a sheet stuck to the bottom of the screen.