# Hairline Shell > An app frame drawn edge to edge on single hairlines, with header and footer rules running straight across, a marker that slides along the edge to the current page and a dense issue list you can walk with J and K. A shadcn/ui block from the [@devl](https://devl.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/devl/hairline-shell). - Page, with a live preview: https://shadcn.exchange/r/devl/hairline-shell - Screenshot: https://shadcn.exchange/shot/devl/hairline-shell/light.png - Registry item: https://devl.dev/r/hairline-shell.json - Categories: screen, Shells - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/devl/hairline-shell.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `motion` - Registry items: `utils`, `https://coss.com/ui/r/avatar.json`, `https://coss.com/ui/r/button.json`, `https://coss.com/ui/r/kbd.json`, `https://coss.com/ui/r/menu.json`, `https://coss.com/ui/r/tooltip.json` ## Files ### `registry/devl/hairline-shell.tsx` ```tsx "use client"; import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react"; import { ChevronDownIcon, ChevronRightIcon, ChevronsUpDownIcon, CircleDashedIcon, CircleDotIcon, CircleIcon, FilterIcon, HouseIcon, InboxIcon, KeyboardIcon, LayersIcon, LogOutIcon, type LucideIcon, MenuIcon, PanelLeftIcon, PlusIcon, RefreshCwIcon, SearchIcon, SettingsIcon, SignalHighIcon, SignalLowIcon, SignalMediumIcon, SquarePenIcon, UserRoundIcon, XIcon, } from "lucide-react"; import { type KeyboardEvent, type ReactElement, type ReactNode, useEffect, useId, useRef, useState } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Menu, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuTrigger, } from "@/components/ui/menu"; import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; export type HairlineTone = "orange" | "teal" | "cyan" | "violet" | "rose" | "info" | "success" | "warning"; export interface HairlineWorkspace { id: string; name: string; initial: string; tone: HairlineTone; } export interface HairlineNavItem { id: string; label: string; icon: LucideIcon; count?: number; } export interface HairlineProject { id: string; name: string; tone: HairlineTone; prefix?: string; open?: number; } export interface HairlineIssue { id: string; title: string; status: "progress" | "todo" | "backlog"; priority: "high" | "medium" | "low"; label?: { name: string; tone: HairlineTone }; assignee: string; due?: string; project?: string; unread?: boolean; } export interface HairlineShellProps { workspaces?: HairlineWorkspace[]; nav?: HairlineNavItem[]; projects?: HairlineProject[]; issues?: HairlineIssue[]; user?: { name: string; initials: string }; defaultCollapsed?: boolean; children?: ReactNode; className?: string; } const swatch: Record = { "orange": "bg-orange-500", "teal": "bg-teal-500", "cyan": "bg-cyan-500", "violet": "bg-violet-500", "rose": "bg-rose-500", info: "bg-info", success: "bg-success", warning: "bg-warning", }; const text: Record = { "orange": "text-orange-600 dark:text-orange-400", "teal": "text-teal-600 dark:text-teal-400", "cyan": "text-cyan-600 dark:text-cyan-400", "violet": "text-violet-600 dark:text-violet-400", "rose": "text-rose-600 dark:text-rose-400", info: "text-info-foreground", success: "text-success-foreground", warning: "text-warning-foreground", }; const spring = { type: "spring", stiffness: 500, damping: 40 } as const; const defaultWorkspaces: HairlineWorkspace[] = [ { id: "northwind", name: "Northwind", initial: "N", tone: "info" }, { id: "pilot", name: "Pilot Studio", initial: "P", tone: "teal" }, ]; const defaultNav: HairlineNavItem[] = [ { id: "home", label: "Home", icon: HouseIcon }, { id: "inbox", label: "Inbox", icon: InboxIcon, count: 4 }, { id: "mine", label: "My issues", icon: CircleDotIcon }, { id: "views", label: "Views", icon: LayersIcon }, ]; const defaultProjects: HairlineProject[] = [ { id: "billing", name: "Billing v2", tone: "teal", prefix: "BIL" }, { id: "atlas", name: "Atlas redesign", tone: "orange", prefix: "ATL" }, { id: "mobile", name: "Mobile beta", tone: "info", prefix: "MOB" }, { id: "growth", name: "Growth", tone: "violet", prefix: "GRO" }, { id: "infra", name: "Infra", tone: "rose", prefix: "INF" }, ]; const defaultIssues: HairlineIssue[] = [ { id: "BIL-142", title: "Prorate seat changes mid-cycle", status: "progress", priority: "high", label: { name: "Pricing", tone: "orange" }, assignee: "IM", due: "Oct 28" }, { id: "BIL-139", title: "Retry failed card charges with backoff", status: "progress", priority: "high", label: { name: "Payments", tone: "teal" }, assignee: "KT", due: "Oct 30" }, { id: "BIL-151", title: "Invoice PDF uses workspace logo", status: "progress", priority: "medium", assignee: "RL" }, { id: "BIL-128", title: "Usage meter rounds to two decimals", status: "progress", priority: "low", label: { name: "Bug", tone: "warning" }, assignee: "TB", due: "Nov 2" }, { id: "BIL-155", title: "Tax ID field for EU workspaces", status: "todo", priority: "high", label: { name: "Compliance", tone: "info" }, assignee: "IM", due: "Nov 6", unread: true }, { id: "BIL-157", title: "Show next invoice estimate on plan page", status: "todo", priority: "medium", label: { name: "Pricing", tone: "orange" }, assignee: "RL" }, { id: "BIL-160", title: "Webhook for subscription.paused", status: "todo", priority: "medium", label: { name: "API", tone: "violet" }, assignee: "KT" }, { id: "BIL-161", title: "Downgrade flow keeps annual discount", status: "todo", priority: "low", assignee: "TB", due: "Nov 9" }, { id: "BIL-163", title: "Copy pass on failed payment emails", status: "todo", priority: "low", assignee: "RL" }, { id: "BIL-118", title: "Credit notes for partial refunds", status: "backlog", priority: "medium", label: { name: "Payments", tone: "teal" }, assignee: "KT" }, { id: "BIL-121", title: "Multi-currency price books", status: "backlog", priority: "low", label: { name: "Pricing", tone: "orange" }, assignee: "IM" }, { id: "BIL-124", title: "Export invoices as CSV", status: "backlog", priority: "low", assignee: "TB" }, { id: "ATL-212", title: "Collapse sidebar to an icon rail", status: "progress", priority: "high", label: { name: "Design", tone: "violet" }, assignee: "IM", due: "Oct 29", project: "atlas", unread: true }, { id: "ATL-208", title: "Breadcrumb overflow on narrow screens", status: "progress", priority: "medium", label: { name: "Bug", tone: "warning" }, assignee: "RL", project: "atlas" }, { id: "ATL-219", title: "Keyboard map for navigation", status: "todo", priority: "medium", assignee: "KT", project: "atlas" }, { id: "ATL-224", title: "Empty states for project pages", status: "todo", priority: "low", label: { name: "Design", tone: "violet" }, assignee: "TB", project: "atlas" }, { id: "ATL-190", title: "Audit icon sizes in the sidebar", status: "backlog", priority: "low", assignee: "KT", project: "atlas" }, { id: "MOB-88", title: "Push notifications for mentions only", status: "progress", priority: "high", label: { name: "API", tone: "violet" }, assignee: "KT", due: "Nov 4", project: "mobile" }, { id: "MOB-91", title: "Offline drafts survive app restarts", status: "todo", priority: "medium", assignee: "IM", project: "mobile", unread: true }, { id: "MOB-95", title: "Deep links open the right workspace", status: "todo", priority: "low", assignee: "RL", project: "mobile" }, { id: "MOB-73", title: "Haptics on swipe actions", status: "backlog", priority: "low", assignee: "TB", project: "mobile" }, { id: "GRO-31", title: "Guided first project checklist", status: "progress", priority: "medium", label: { name: "Onboarding", tone: "teal" }, assignee: "IM", project: "growth" }, { id: "GRO-34", title: "Test invite email subject lines", status: "todo", priority: "low", assignee: "RL", project: "growth" }, { id: "GRO-22", title: "Drop company size from signup", status: "backlog", priority: "low", assignee: "KT", project: "growth" }, { id: "INF-57", title: "Alert on p95 latency, not p50", status: "progress", priority: "high", label: { name: "Reliability", tone: "rose" }, assignee: "TB", due: "Oct 31", project: "infra" }, { id: "INF-61", title: "Runbook for the failover drill", status: "todo", priority: "medium", assignee: "IM", project: "infra", unread: true }, ]; const people: Record = { IM: "bg-teal-500/16 text-teal-600 dark:text-teal-400", KT: "bg-info/16 text-info-foreground", RL: "bg-orange-500/16 text-orange-600 dark:text-orange-400", TB: "bg-violet-500/20 text-violet-600 dark:text-violet-400", }; const groups = [ { id: "progress", label: "In progress", icon: CircleDotIcon, tone: "text-warning-foreground" }, { id: "todo", label: "Todo", icon: CircleIcon, tone: "text-muted-foreground" }, { id: "backlog", label: "Backlog", icon: CircleDashedIcon, tone: "text-muted-foreground/72" }, ] as const; const priorityIcon = { high: SignalHighIcon, medium: SignalMediumIcon, low: SignalLowIcon }; function RailTip({ collapsed, label, children }: { collapsed: boolean; label: ReactNode; children: ReactElement }) { return ( {label} ); } interface SidebarProps { collapsed: boolean; workspaces: HairlineWorkspace[]; nav: HairlineNavItem[]; projects: HairlineProject[]; user: { name: string; initials: string }; active: string; onNavigate: (id: string) => void; onToggle?: () => void; onClose?: () => void; onNew?: () => void; } function HairlineSidebar({ collapsed, workspaces, nav, projects, user, active, onNavigate, onToggle, onClose, onNew }: SidebarProps) { const [workspace, setWorkspace] = useState(workspaces[0]?.id ?? ""); const [open, setOpen] = useState(true); const ws = workspaces.find((w) => w.id === workspace) ?? workspaces[0]; const group = useId(); const fade = cn("transition-opacity duration-150", collapsed && "pointer-events-none opacity-0"); const row = "group/row relative flex h-7 w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md px-2.5 text-left text-[13px] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"; const item = (id: string, label: string, icon: ReactNode, trailing?: ReactNode) => { const on = active === id; return ( ); }; return (
{ws.initial} {ws.name} Switch workspace setWorkspace(v as string)} value={workspace}> {workspaces.map((w) => ( {w.name} ))} New workspace {onClose ? ( ) : ( )}
{item( "search", "Search", , /, )} {nav.map((n) => item( n.id, n.label, {collapsed && n.count ? ( ) : null} , n.count ? {n.count} : undefined, ), )}
{collapsed && }
{(open || collapsed) && ( {projects.map((p) => item( p.id, p.name, , {p.open}, ), )} )}
{user.initials} {user.name} Profile Settings G S Shortcuts ? Log out {onToggle && ( {collapsed ? "Expand" : "Collapse"} [ } > )}
); } function IssueList({ issues, fresh, onAdd }: { issues: HairlineIssue[]; fresh: string | null; onAdd: (status: HairlineIssue["status"]) => void }) { const [closed, setClosed] = useState([]); const [focus, setFocus] = useState(null); const listRef = useRef(null); const issuesRef = useRef(issues); issuesRef.current = issues; useEffect(() => { if (!fresh) return; const status = issuesRef.current.find((i) => i.id === fresh)?.status; setClosed((c) => c.filter((g) => g !== status)); setFocus(fresh); const raf = requestAnimationFrame(() => listRef.current?.querySelector(`[data-issue="${fresh}"]`)?.focus(), ); return () => cancelAnimationFrame(raf); }, [fresh]); const onKeyDown = (e: KeyboardEvent) => { if (!["ArrowDown", "ArrowUp", "j", "k"].includes(e.key)) return; const rows = Array.from(listRef.current?.querySelectorAll("[data-issue]") ?? []); const i = rows.indexOf(document.activeElement as HTMLButtonElement); const next = e.key === "ArrowDown" || e.key === "j" ? Math.min(rows.length - 1, i + 1) : Math.max(0, i - 1); rows[next]?.focus(); setFocus(rows[next]?.dataset.issue ?? null); e.preventDefault(); }; return (
{groups.map((g) => { const rows = issues.filter((i) => i.status === g.id); if (rows.length === 0) return null; const isOpen = !closed.includes(g.id); return (
onAdd(g.id)} size="icon-sm" variant="ghost" /> } > New issue in {g.label}
{isOpen && ( {rows.map((issue) => { const P = priorityIcon[issue.priority]; return ( ); })} )}
); })}
); } function EmptyPane({ icon: Icon, title, body, action }: { icon: LucideIcon; title: string; body: string; action?: ReactNode }) { return (

{title}

{body}

{action &&
{action}
}
); } export function HairlineShell({ workspaces = defaultWorkspaces, nav = defaultNav, projects = defaultProjects, issues = defaultIssues, user = { name: "Ines Moreau", initials: "IM" }, defaultCollapsed = false, children, className, }: HairlineShellProps) { const [collapsed, setCollapsed] = useState(defaultCollapsed); const [drawer, setDrawer] = useState(false); const [active, setActive] = useState(projects[0]?.id ?? "home"); const [view, setView] = useState<"list" | "board">("list"); const drawerRef = useRef(null); const viewGroup = useId(); useEffect(() => { if (drawer) drawerRef.current?.focus(); }, [drawer]); const [items, setItems] = useState(issues); const [fresh, setFresh] = useState(null); const [query, setQuery] = useState(""); const project = projects.find((p) => p.id === active); const navItem = nav.find((n) => n.id === active); const title = project?.name ?? navItem?.label ?? "Search"; const scope = (i: HairlineIssue) => i.project ?? projects[0]?.id; const q = query.trim().toLowerCase(); const visible = items.filter((i) => { if (project) return scope(i) === project.id; if (active === "mine") return i.assignee === user.initials; if (active === "inbox") return i.unread; if (active === "views") return false; if (active === "search") return !q || i.title.toLowerCase().includes(q) || i.id.toLowerCase().includes(q); return true; }); const inProgress = visible.filter((i) => i.status === "progress").length; const counted = projects.map((p) => ({ ...p, open: p.open ?? items.filter((i) => scope(i) === p.id).length })); const navCounted = nav.map((n) => (n.id === "inbox" && n.count === undefined ? { ...n, count: items.filter((i) => i.unread).length } : n)); useEffect(() => { if (!fresh) return; const t = setTimeout(() => setFresh(null), 600); return () => clearTimeout(t); }, [fresh]); const addIssue = (status: HairlineIssue["status"] = "todo") => { const target = project ?? projects[0]; if (!target) return; const prefix = target.prefix ?? target.name.slice(0, 3).toUpperCase(); const top = Math.max(0, ...items.filter((i) => i.id.startsWith(`${prefix}-`)).map((i) => Number(i.id.split("-")[1]) || 0)); const id = `${prefix}-${top + 1}`; setItems((xs) => [{ id, title: "Untitled issue", status, priority: "medium", assignee: user.initials, project: target.id }, ...xs]); setActive(target.id); setFresh(id); }; const sidebar = { workspaces, nav: navCounted, projects: counted, user, active, onNavigate: (id: string) => { setActive(id); setDrawer(false); }, onNew: () => addIssue(), }; return (
{ if (e.key === "Escape" && drawer) setDrawer(false); if (e.target instanceof HTMLInputElement) return; if (e.key === "[") setCollapsed((c) => !c); if (e.key === "/") { e.preventDefault(); setActive("search"); } }} > setCollapsed((c) => !c)} /> {drawer && ( <> setDrawer(false)} /> setDrawer(false)} /> )}
{collapsed && ( )}
{(["list", "board"] as const).map((v) => ( ))}
{children ?? ( <> {active === "search" && (
setQuery(e.target.value)} placeholder="Search by title or ID" value={query} /> {query && ( )}
)} {active === "views" ? ( New view } body="Save a filter, like high priority bugs due this week, and it will live here." icon={LayersIcon} title="No saved views yet" /> ) : visible.length === 0 ? ( active === "search" ? ( ) : active === "inbox" ? ( ) : ( addIssue()} size="sm" variant="outline"> New issue } body="Issues you create or are assigned will show up here." icon={CircleDashedIcon} title="No issues yet" /> ) ) : view === "list" ? ( ) : ( )} )}
{visible.length} {visible.length === 1 ? "issue" : "issues"} · {inProgress} in progress Synced J K to move [ sidebar
); } function IssueBoard({ issues }: { issues: HairlineIssue[] }) { return (
{groups.map((g) => { const rows = issues.filter((i) => i.status === g.id); return (
{g.label} {rows.length}
{rows.map((issue, i) => { const P = priorityIcon[issue.priority]; return ( {issue.id} {issue.assignee} {issue.title}

{issue.label && ( {issue.label.name} )} {issue.due && {issue.due}} ); })}

); })}
); } ```