shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Sell books with this book product card for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three tiles from one independent publisher, ruled by Guides. Each tile has a typographic cover drawn in greys, the title, the author and a Toggle Group with Hardcover, Paperback and Audiobook. Choosing a format changes the price and the fact beside the cover, "368 pages" or "11 h 20 min", and the outline Button adds that book in that format. A "Look inside" button under each tile opens a band under the row with a drawn two-page spread and the book's first paragraph; one book is open at a time, the first on load, and the band keeps its height because an unseen copy of every spread shares its cell. Add turns into "Added" with an Undo, the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. On a phone the tiles are a row you swipe, with the next one showing. For bookshops, publishers and any shop that sells one title in several formats.
FAQ
How do I change the books and their formats?
Edit BOOKS. Each has an id, a title, an author, a year line, three formats (an id, a label, the price in cents and the fact that format shows), a cover of typed shapes, an opening paragraph and a pages seed for the spread. The tile reads its price and fact from the chosen format, so a book can have two formats or four.
What does the format group change?
The price, the fact line (pages or running time) and what Add puts in the bag. The bag holds the book and the format together, so a hardcover and its audiobook are two different lines, and a tile says "Added" only for the format that is in the bag. Choosing a format is announced by the polite status line.
How does Look inside work, and does the page jump?
It is a button with aria-expanded and aria-controls. Pressing it fills the band under the row with that book and folds the one that was open; pressing the open book's button closes it and the band says to press Look inside. An unseen copy of every spread sits in the same grid cell, so the band is always as tall as the tallest one and nothing below it moves.
What stays local, and how do I wire it for real?
The formats, the bag and the open book are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart and keep the status line for the result. The covers and the spread are typed shapes: swap Cover and Spread for img elements of your own cover and sample page, and the opening text for your excerpt.
How does it look on a phone?
The three tiles become a row you swipe sideways with each one snapping into place and the next one showing at the edge. The format group fills the tile's width, and the Look inside band stays under the row.
Is it accessible?
Each cover is a named image and each tile has an h3. The format group is named by an unseen label that says which book it belongs to, and the buttons name the book and format ("Add to bag The Corran Cable, Hardcover"). Everything works from the keyboard, and a change of format, an Add or an opened spread is announced by the status line.
