shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let readers try a book before they buy it with this ebook product card for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds two cells with a divider between them. The start cell has a drawn cover, the title and author, a line of totals derived from the chapters ("7 chapters, 3 free, 133 pages"), a small Toggle Group to choose EPUB or PDF, the price, an outline "Send to my e-reader" button and the one Shine Button, "Add to bag". The end cell is the contents: the three free chapters are an Accordion where one excerpt is open at a time, the first on load, and the four locked chapters are rows with a lock and the words "Buy to read". Pressing a locked row says so in the status line. The list keeps its height as the excerpts open. Nothing is stored, sent or bought. For ebook shops, publishers and any product with a free sample.
FAQ
How do I change the chapters?
Edit CHAPTERS. Each has an id, a title, a page count, a free flag and, on the free ones, an excerpt. Free chapters go in the accordion and locked ones in the list under it, so keep the free ones first. The totals line is computed from the rows, so adding a chapter updates it.
What happens when someone presses a locked chapter?
Nothing opens. The status line says the chapter is locked and that you buy the book to read it, and nothing is bought. The row is marked as disabled to assistive technology but stays a button, so a keyboard user can reach it and hear the answer.
How does the free-chapter list behave?
Exactly one excerpt is open at all times, and opening another closes the first. The contents cell has a minimum height sized for the longest state, so opening an excerpt never moves the Add button.
What does Send to my e-reader do?
It tells you, in the status line, that nothing is sent in this demo and which file type would be. The EPUB or PDF choice only changes that sentence. In your app, call your delivery service from the handler send and keep the status line for the result.
What stays local, and how do I wire it for real?
The open chapter, the file type and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The cover is typed shapes: swap Cover for an img of your own.
Is it accessible?
The cover is a named image, the book and each chapter heading are headings, and each free chapter's page count and "Free" are read out with its title. The lock is decorative because "Buy to read" is text. Add, Undo, a locked row and the file choice are all announced by the polite status line.
