Innovations
links-in-bio /

Author Shelf

Author-themed link-in-bio with a horizontally swipeable wood-shelf of book covers (each slightly tilted for a tactile feel) at the top, then author photo + credentials + bio + currently-writing book tile with retailer pills + signed-editions CTA + reader

Preview

Source

tsx 
"use client";

import { useState } from "react";
import {
  Instagram,
  Twitter,
  Youtube,
  Mail,
  Globe,
  ShoppingBag,
  PlayCircle,
  Linkedin,
  Music2,
  ArrowRight,
  ArrowUpRight,
  PenLine,
  CheckCircle2,
  type LucideIcon,
} from "lucide-react";
import type { LinkIcon, LinksInBioData, RichBlock, ShelfBook } from "../types";
import { defaultData } from "../defaultData";

const ICONS: Record<LinkIcon, LucideIcon> = {
  instagram: Instagram,
  twitter: Twitter,
  tiktok: Music2,
  youtube: Youtube,
  spotify: Music2,
  apple: Music2,
  linkedin: Linkedin,
  email: Mail,
  globe: Globe,
  shop: ShoppingBag,
  play: PlayCircle,
};

const PAPER = "#f4ecdf";
const SHELF = "#3f2c20";
const SHELF_DARK = "#2a1c14";
const INK = "#1c1308";
const ACCENT = "#9b3a1c";
const CARD = "#fbf6e9";
const RULE = "rgba(28,19,8,0.16)";

function ShelfBookSpine({
  book,
  rotation,
}: {
  book: ShelfBook;
  rotation: number;
}) {
  return (
    <a
      href={book.href}
      className="group block shrink-0 snap-center transition-transform hover:-translate-y-1"
      style={{
        width: "92px",
        transform: `rotate(${rotation}deg)`,
      }}
    >
      <div
        className="relative overflow-hidden"
        style={{
          width: "92px",
          height: "138px",
          boxShadow: "0 14px 28px rgba(28,19,8,0.32)",
          borderRadius: "2px",
        }}
      >
        <img
          src={book.cover}
          alt={book.title}
          width={300}
          height={450}
          loading="lazy"
          className="h-full w-full object-cover"
        />
      </div>
      <p
        className="mt-2 line-clamp-1 text-center text-[11px] font-semibold"
        style={{ color: PAPER, opacity: 0.85 }}
      >
        {book.title}
      </p>
      {book.year && (
        <p
          className="text-center text-[9px] uppercase tracking-[0.22em]"
          style={{ color: PAPER, opacity: 0.55 }}
        >
          {book.year}
        </p>
      )}
    </a>
  );
}

export interface LinksInBioAuthorShelfProps {
  data?: LinksInBioData;
}

export default function LinksInBioAuthorShelf({
  data = defaultData,
}: LinksInBioAuthorShelfProps) {
  const books: ShelfBook[] = data.booksShelf ?? [];
  const featured = data.richBlocks?.find(
    (b): b is Extract<RichBlock, { kind: "book" }> => b.kind === "book"
  );
  const freebie = data.richBlocks?.find(
    (b): b is Extract<RichBlock, { kind: "freebie" }> => b.kind === "freebie"
  );

  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  return (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400..700;1,400..700&family=Inter:wght@400;500;600;700&display=swap"
      />

      <section
        className="min-h-screen w-full"
        style={{ background: PAPER, color: INK, fontFamily: "'Inter', sans-serif" }}
      >
        {/* Bookshelf */}
        <div
          className="relative w-full overflow-hidden"
          style={{
            background: `linear-gradient(180deg, ${SHELF_DARK} 0%, ${SHELF} 60%, ${SHELF_DARK} 100%)`,
          }}
        >
          <div className="mx-auto w-full max-w-[640px] px-3 pt-10">
            <p
              className="text-center text-[10px] font-semibold uppercase tracking-[0.32em]"
              style={{ color: PAPER, opacity: 0.7 }}
            >
              The shelf
            </p>
            <h2
              className="mt-1 text-center"
              style={{
                fontFamily: "'Crimson Pro', serif",
                fontWeight: 700,
                fontStyle: "italic",
                fontSize: "clamp(1.6rem, 4.6vw, 2rem)",
                color: PAPER,
              }}
            >
              All the things I've put into the world
            </h2>
          </div>

          <ul
            className="mt-6 flex items-end gap-5 overflow-x-auto px-[calc(50%-46px)] pb-8 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden snap-x snap-mandatory"
            style={{ scrollSnapType: "x mandatory" }}
          >
            {books.map((book, i) => (
              <li key={book.title}>
                <ShelfBookSpine
                  book={book}
                  rotation={(i % 2 === 0 ? -1 : 1) * (1 + ((i * 7) % 3))}
                />
              </li>
            ))}
          </ul>

          {/* Wood grain shelf line */}
          <div
            aria-hidden
            className="h-3 w-full"
            style={{
              background: `linear-gradient(180deg, ${SHELF_DARK} 0%, #1a0d05 100%)`,
              boxShadow: "inset 0 2px 0 rgba(255,255,255,0.05)",
            }}
          />
        </div>

        {/* Author */}
        <div className="mx-auto w-full max-w-[520px] px-5 pb-12">
          <div className="flex flex-col items-center pt-10 text-center">
            <img
              src={data.avatar}
              alt={data.name}
              width={128}
              height={128}
              loading="eager"
              className="h-28 w-28 rounded-full object-cover"
              style={{
                border: `3px solid ${PAPER}`,
                boxShadow: "0 16px 32px rgba(28,19,8,0.18)",
              }}
            />
            <p
              className="mt-4 text-[10px] font-semibold uppercase tracking-[0.32em]"
              style={{ color: ACCENT }}
            >
              The author
            </p>
            <h1
              className="mt-1"
              style={{
                fontFamily: "'Crimson Pro', serif",
                fontWeight: 700,
                fontSize: "clamp(2rem, 6vw, 2.6rem)",
                color: INK,
              }}
            >
              {data.name}
              {data.verified && (
                <span className="ml-2 align-middle text-base" style={{ color: ACCENT }}>
                  ✓
                </span>
              )}
            </h1>
            {data.credentials && (
              <p
                className="mt-1 text-sm italic"
                style={{ fontFamily: "'Crimson Pro', serif", color: "rgba(28,19,8,0.7)" }}
              >
                {data.credentials}
              </p>
            )}
            {data.bio && (
              <p
                className="mt-3 max-w-[420px] text-[15px] leading-relaxed"
                style={{ color: "rgba(28,19,8,0.75)" }}
              >
                {data.bio}
              </p>
            )}
          </div>

          {/* Currently writing tile */}
          {featured && (
            <div
              className="mt-8 overflow-hidden rounded-3xl p-5"
              style={{ background: CARD, border: `1px solid ${RULE}` }}
            >
              <div className="grid grid-cols-[120px_1fr] gap-4">
                <div
                  className="overflow-hidden rounded-sm"
                  style={{
                    width: "120px",
                    height: "180px",
                    boxShadow: "0 18px 36px rgba(28,19,8,0.28)",
                  }}
                >
                  <img
                    src={featured.cover}
                    alt={featured.title}
                    width={400}
                    height={600}
                    loading="lazy"
                    className="h-full w-full object-cover"
                  />
                </div>
                <div className="flex min-w-0 flex-col">
                  <p
                    className="inline-flex items-center gap-1 text-[10px] font-semibold uppercase tracking-[0.25em]"
                    style={{ color: ACCENT }}
                  >
                    <PenLine className="h-3 w-3" /> Currently writing
                  </p>
                  <p
                    className="mt-1 text-lg leading-snug"
                    style={{ fontFamily: "'Crimson Pro', serif", fontWeight: 700, color: INK }}
                  >
                    {featured.title}
                  </p>
                  {featured.blurb && (
                    <p
                      className="mt-1 line-clamp-3 text-sm"
                      style={{ color: "rgba(28,19,8,0.7)" }}
                    >
                      {featured.blurb}
                    </p>
                  )}
                  <div className="mt-auto flex items-center justify-between pt-3">
                    {featured.price && (
                      <span className="text-base font-bold" style={{ color: INK }}>
                        {featured.price}
                      </span>
                    )}
                    <a
                      href={featured.href}
                      className="inline-flex items-center gap-1 rounded-full px-3.5 py-1.5 text-xs font-semibold"
                      style={{ background: INK, color: PAPER }}
                    >
                      Pre-order <ArrowRight className="h-3 w-3" />
                    </a>
                  </div>
                </div>
              </div>
              {featured.retailers && featured.retailers.length > 0 && (
                <div className="mt-4 flex flex-wrap gap-2">
                  {featured.retailers.map((r) => (
                    <a
                      key={r.label}
                      href={r.href}
                      className="rounded-full border px-3 py-1 text-[11px] font-medium transition-colors hover:bg-[color:var(--paper)]"
                      style={{ borderColor: RULE, color: INK, ["--paper" as never]: PAPER }}
                    >
                      {r.label}
                    </a>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Signed editions tile */}
          <a
            href="#signed"
            className="mt-4 flex items-center gap-3 rounded-3xl px-5 py-4 transition-transform hover:-translate-y-0.5"
            style={{
              background: ACCENT,
              color: PAPER,
              boxShadow: "0 14px 30px rgba(155,58,28,0.30)",
            }}
          >
            <span
              aria-hidden
              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
              style={{ background: "rgba(255,255,255,0.15)" }}
            >
              <PenLine className="h-4 w-4" strokeWidth={1.8} />
            </span>
            <div className="flex-1">
              <p className="text-sm font-bold">Order signed copies</p>
              <p className="text-[12px]" style={{ opacity: 0.85 }}>
                Personalized · ships in 5 days · limit 3 per order
              </p>
            </div>
            <ArrowUpRight className="h-4 w-4" />
          </a>

          {/* Freebie */}
          {freebie && (
            <div
              className="mt-6 overflow-hidden rounded-3xl p-5"
              style={{ background: CARD, border: `1px dashed ${ACCENT}` }}
            >
              <p
                className="text-[10px] font-bold uppercase tracking-[0.28em]"
                style={{ color: ACCENT }}
              >
                Reader's letter
              </p>
              <p
                className="mt-1 text-lg leading-snug"
                style={{ fontFamily: "'Crimson Pro', serif", fontWeight: 700, color: INK }}
              >
                {freebie.title}
              </p>
              {freebie.description && (
                <p className="mt-1.5 text-sm" style={{ color: "rgba(28,19,8,0.7)" }}>
                  {freebie.description}
                </p>
              )}
              {submitted ? (
                <div
                  className="mt-3 flex items-center gap-2 rounded-xl px-3 py-2.5 text-sm"
                  style={{ background: PAPER, color: INK }}
                >
                  <CheckCircle2 className="h-4 w-4" style={{ color: ACCENT }} />
                  Sent — check your inbox.
                </div>
              ) : (
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    if (email) setSubmitted(true);
                  }}
                  className="mt-3 flex flex-col gap-2 sm:flex-row"
                >
                  <input
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder={freebie.placeholder ?? "[email protected]"}
                    className="min-w-0 flex-1 rounded-full border bg-white/60 px-4 py-2.5 text-sm focus:border-[color:var(--accent)] focus:outline-none"
                    style={{ borderColor: RULE, ["--accent" as never]: ACCENT, color: INK }}
                  />
                  <button
                    type="submit"
                    className="shrink-0 rounded-full px-5 py-2.5 text-sm font-semibold"
                    style={{ background: ACCENT, color: PAPER }}
                  >
                    {freebie.cta ?? "Send"}
                  </button>
                </form>
              )}
              {freebie.socialProof && !submitted && (
                <p
                  className="mt-2 text-[11px]"
                  style={{ color: "rgba(28,19,8,0.55)" }}
                >
                  {freebie.socialProof}
                </p>
              )}
            </div>
          )}

          {/* Plain links */}
          <ul className="mt-7 space-y-2">
            {data.links.slice(0, 4).map((link) => {
              const Icon = link.icon ? ICONS[link.icon] : ArrowUpRight;
              return (
                <li key={link.label}>
                  <a
                    href={link.href}
                    className="group flex items-center gap-3 rounded-2xl px-4 py-3.5 transition-all hover:-translate-y-0.5"
                    style={{ background: CARD, border: `1px solid ${RULE}`, color: INK }}
                  >
                    <Icon className="h-4 w-4 shrink-0" strokeWidth={1.6} />
                    <span className="flex-1 truncate text-sm font-semibold">{link.label}</span>
                    {link.badge && (
                      <span
                        className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider"
                        style={{ background: ACCENT, color: PAPER }}
                      >
                        {link.badge}
                      </span>
                    )}
                    <ArrowUpRight className="h-4 w-4 shrink-0 opacity-40" />
                  </a>
                </li>
              );
            })}
          </ul>

          {/* Socials */}
          {data.socials && data.socials.length > 0 && (
            <div className="mt-8 flex items-center justify-center gap-3">
              {data.socials.map((s, i) => {
                const Icon = ICONS[s.type] ?? Globe;
                return (
                  <a
                    key={i}
                    href={s.href}
                    aria-label={s.type}
                    className="flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:text-[color:var(--accent)]"
                    style={{
                      background: CARD,
                      border: `1px solid ${RULE}`,
                      color: INK,
                      ["--accent" as never]: ACCENT,
                    }}
                  >
                    <Icon className="h-4 w-4" strokeWidth={1.6} />
                  </a>
                );
              })}
            </div>
          )}

          <p
            className="mt-8 text-center text-[10px] uppercase tracking-[0.32em]"
            style={{ color: "rgba(28,19,8,0.55)" }}
          >
            Books · Letters · A small newsletter
          </p>
        </div>
      </section>
    </>
  );
}
Claude Code Instructions

CLI Install

npx innovations add author-shelf

Where to use it

An author / writer link-in-bio page that opens with a horizontal book-shelf of the author's full backlist. Loads Crimson Pro and Inter from Google Fonts. Pass a typed 'data' prop (LinksInBioData from src/registry/links-in-bio/types.ts). Provide: - booksShelf — array of { cover, title, year, href } for the shelf carousel - credentials — short italic line beneath the name - richBlocks — opt into book (used as 'currently writing') and freebie tiles In Astro: import LinksInBioAuthorShelf from '../components/innovations/links-in-bio/author-shelf'; <LinksInBioAuthorShelf client:load data={myProfile} /> In Next.js: import LinksInBioAuthorShelf from '@/components/innovations/links-in-bio/author-shelf'; Best for: novelists, essayists, journalists, indie publishers — anyone with multiple books and an active newsletter.