shadcn.io is not affiliated with official shadcn/ui
Author Look Inside Profile Block for Solid
An author profile as a look inside: four books with drawn typographic covers, a read-only rating and an award badge, and a reading pane with a drop cap, a text size group and Next and Previous between two pages, beside a Follow toggle.
Installation
Overview
Let readers open a book from its author's page, with this look inside profile for Solid with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the author: initials, name, role, place, the number of readers who follow her and a Follow Toggle that says it follows in the demo and moves the count by one. At the start her four books are a group of radio cards, each with a drawn typographic cover, its title, year and kind, a read-only Rating with the score and the number of ratings in words, and a Badge for the prize it won where there is one; on a phone the cards become a row that scrolls sideways. The main cell is a reading pane: the first two pages of the chosen book set in a serif, with a Drop Cap Text opening the first, a Toggle Group for the text size and Previous and Next between the two pages. The pane keeps one height and scrolls inside itself, so changing the size or the book never moves the page. It's built from Rating, Toggle Group, Toggle, Badge, Drop Cap Text, Prose, Button, Avatar and Guides, with a CSS entrance only. The author, her books, the prize, the ratings and the passages are invented and original. For an author's page, a publisher's list or any profile that sells by letting you read.
FAQ
How do I fill it with my books?
Edit BOOKS: each has a title, year, kind, a score and the number of ratings, an optional prize, the drawing for its cover (house, light, orchard or slate, each with its own greys) and pages, the passages as two pages of short paragraphs. The words under each cover, the stars and the page count all come from that data. To show real covers, replace Cover with an image at the same 3 by 4 shape and keep the rest.
Is the rating something readers can change?
No. The stars only draw the score: they are hidden from assistive technology and unfocusable, and the score and the number of ratings are written beside them ("4.4 out of 5, 1,284 ratings"). The stars take the foreground colour, not the library's amber, and the empty ones are a faint tint, so the Follow toggle and the reading controls stay the only strong marks on the card.
What stays local in the demo?
Following, the ratings and the passages. Follow moves the reader count by one in the page and says so in the status line; nothing is sent. In your app, save the follow to the reader's account, read the ratings from your reviews and load the passages from the book's sample file.
How does the reading pane work?
The pane is a labelled region that you can scroll with the keyboard, set in a serif with a drop cap on the first paragraph of the first page. The three A buttons change the text size for both pages, Next and Previous move between the two pages and say when you reach an end, and the pane keeps its height at every size. All the passages are written for the example and are not from any real book.
Is it accessible?
The books are a named group of radio buttons, each named by its title and described by its year, kind, rating and prize, so the covers add nothing a screen reader would miss and are hidden from it. The text sizes are a named group with labels such as Larger text. The status line is a polite live region present from the start.