Shadcn.io is not affiliated with official shadcn/ui
Profile Book Reader
React book reader profile block for Next.js with reading challenge progress, currently reading shelf, star ratings, genre distribution chart, and reading history timeline using shadcn/ui, Tailwind CSS, and framer-motion
Display reading habits with this book-focused profile block for React and Next.js. Features an annual reading challenge tracker with progress bar, a currently reading shelf showing book progress, a star rating display for finished books, a genre distribution breakdown with horizontal bars, and a reading log timeline. Built with TypeScript, shadcn/ui Avatar, Badge, Progress, and Button components, Tailwind CSS, and framer-motion animations. Ideal for book club apps, Goodreads-style profiles, and library management dashboards.
Related Components
Language Learner
Language learning profile
Student Academic
Academic student profile
Content Creator
Content creator profile
Researcher Publications
Researcher profile
Podcast Host
Podcast host profile
Author Page
Author page profile
FAQ
Was this page helpful?
Sign in to leave feedback.
Blogger Analytics
React blogger profile block for Next.js with post analytics, traffic metrics, top articles list, and category breakdown using shadcn/ui, Tailwind CSS, and framer-motion
Brand Ambassador
React brand ambassador profile block for Next.js with campaign showcase, reach metrics, brand partnerships, and engagement analytics using shadcn/ui, Tailwind CSS, and framer-motion