50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:Tfe5,import * as React from "react"; import { cn } from "@/lib/utils"; /** * ClaudeHeader — Claude Code's welcome box. * * The title-in-the-border is a real

/, so it stays semantic * and inherits whatever background it sits on. The logo is Claude Code's own * pixel sprite, but drawn as a crisp SVG grid instead of quadrant-block glyphs * — no font seams, scales cleanly. */ const ROSE = "#cd694a"; const GRAY = "#949494"; // Claude's launch sprite as a 1-bit bitmap (decoded from the terminal glyphs). const LOGO_BITS = [ "000111111111111000", "000110111111011000", "011111111111111110", "000111111111111000", "000010100001010000", ]; export function ClaudeLogo({ scale = 4, color = ROSE, className, }: { scale?: number; color?: string; className?: string; }) { const w = LOGO_BITS[0].length; const h = LOGO_BITS.length; // Terminal char cells are taller than wide, so each sprite pixel is stretched // vertically (PH) to keep the logo's proportions instead of looking squat. const PH = 2.4; const rects: React.ReactElement[] = []; LOGO_BITS.forEach((row, y) => { let x = 0; while (x < w) { if (row[x] === "1") { let end = x; while (end < w && row[end] === "1") end += 1; rects.push( , ); x = end; } else { x += 1; } } }); return ( ); } export function ClaudeHeader({ version = "v2.1.206", user = "Ben", model = "Fable 5 with xhigh effort · Claude Max", org = "ben@freestyle.sh's Organization", cwd = "~/dev/brainless", tips = ["Ask Claude to create a new app or clone a repo"], whatsNew = [ "Added directory path suggestions to /cd", "Added a /doctor check that proposes trims", ], className, }: { version?: string; user?: string; model?: string; org?: string; cwd?: string; tips?: string[]; whatsNew?: string[]; className?: string; }) { return (

Claude Code {version}

{/* left: identity */}

Welcome back {user}!

{model}

{org}

{cwd}

{/* right: tips + what's new */}

Tips for getting started

{tips.map((t) => (

{t}

))}

What's new

{whatsNew.map((t) => (

{t}

))}

/release-notes for more

); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://brainless.swerdlow.dev/r/claude-header.json","proxyUrl":"https://shadcnregistry.com/r/brainless/claude-header","itemId":"@brainless/claude-header"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/brainless/claude/claude-header.tsx","content":"$53","type":"registry:ui","target":"components/brainless/claude/claude-header.tsx"}]}]]}],"$L54"]}]

Claude Header

Installation

Files

components

Styles