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 ?? "you@somewhere.com"}
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-shelfWhere 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.