Bookshelf

Features

• Spines and covers take any content, including images.
• Control the open book from your own state.

Use cases

• Reading list or favorite books on a personal site.
• Course or ebook catalog on a landing page.
• Record or game collection with cover art.

Installation

pnpm dlx shadcn@latest add @ncdai/bookshelf

Usage

import {
  Bookshelf,
  BookshelfCover,
  BookshelfItem,
  BookshelfSpine,
  BookshelfTrigger,
} from "@/components/bookshelf"

<Bookshelf>
  <BookshelfItem spineWidth={40} coverWidth={168} className="h-60">
    <BookshelfTrigger>
      <BookshelfSpine className="bg-sky-500 text-white">
        <span className="[writing-mode:vertical-rl]">Clean Code</span>
      </BookshelfSpine>
      <BookshelfCover>
        <img src="/clean-code.jpg" alt="" className="size-full object-cover" />
      </BookshelfCover>
    </BookshelfTrigger>
  </BookshelfItem>
</Bookshelf>

Give each item a height.

Composition

Use the following composition to build a Bookshelf

Bookshelf
└── BookshelfItem
    └── BookshelfTrigger
        ├── BookshelfSpine
        └── BookshelfCover

API reference

Every part accepts a render prop to change its element.

Bookshelf

BookshelfItem

Data attributes

Accessibility

• Each book is a button with aria-expanded.
• Enter or Space toggles the focused book, and Escape closes it.
• A closed cover is hidden from screen readers, so the spine names the book.
• Keyboard changes skip the turn.
• With prefers-reduced-motion, books fade instead of turning and do not lift.

Credits

• Deimos

License and usage

• Free to use and modify in both personal and commercial projects.
• Attribution is appreciated but not required.
• Released under the MIT License.