Component Library

Navigation

The wayfinding layer of the broadcast: app shells, rails, tab decks, trails, and pagers. Every element carries the teal-on-navy signature — glowing active states, glass chrome, and condensed uppercase type — so a viewer always knows where they are in the feed.

6-8 UI

App shell

A sticky glass header with the real brand mark, a prop-driven tab deck with a glowing active underline, an optional right slot, and a fixed broadcast scanline overlay. Children render in a centered container.

NavShell

6-8 League Center

Live

Games Live

Teams

3.2K

Watching

Prop	Type	Default	Description
tabs	NavShellTab[]	[]	Tab deck; the entry flagged active gets the glowing underline.
title	ReactNode	—	Wordmark rendered beside the logo.
logoSrc	string	"/brand/68-logo-white.png"	Real brand asset for the mark — never a drawn logo.
rightSlot	ReactNode	—	Right-aligned slot for status, actions, or an avatar.
contentClassName	string	"max-w-[1200px]"	Max-width class for the centered content container.

6-8 UI

Tabs

Radix-powered tab decks with uppercase tracked triggers. A single glowing indicator slides to the active trigger with a spring — an underline in the line variant, a glass pill in the pill variant.

Line

Season at a glance — record, streak, and the next tip-off, all in one broadcast card.

Pill

3 games in progress

Prop	Type	Default	Description
defaultValue / value	string	—	Uncontrolled or controlled active tab (Radix-compatible).
onValueChange	(v: string) => void	—	Fires with the next value when the selection changes.
variant	"line" \| "pill"	"line"	Set on TabsList / TabsTrigger to pick the indicator style.

6-8 UI

Sidebar

A vertical rail with icon-and-label entries, a sliding teal indicator on the active row, badges, and a smooth collapse to an icon-only width. Use the toggle at the base to collapse.

Rail

Collapsed

Prop	Type	Default	Description
items	SidebarItem[]	—	Entries with label, href, optional icon, active, and badge.
header / footer	ReactNode	—	Brand block pinned to the top and content above the toggle.
collapsible	boolean	true	Show the collapse control at the base of the rail.
defaultCollapsed / collapsed	boolean	—	Uncontrolled or controlled collapsed width.

6-8 UI

Breadcrumbs

A compact trail with chevron separators. Ancestor links stay muted and light up on hover; the current page reads in glowing teal.

Trail

Prop	Type	Default	Description
BreadcrumbLink	a \| asChild	—	Ancestor link; pass asChild to render a Next Link.
BreadcrumbPage	span	—	Current page — teal, glowing, aria-current='page'.
BreadcrumbSeparator	li	—	Chevron by default; pass children to override.

6-8 UI

Pagination

Prev / next controls flanking numbered pages, with pinned first and last pages and ellipsis gaps for long ranges. The active page carries the teal glass glow.

Long range

Compact

Prop	Type	Default	Description
count	number	—	Total number of pages.
defaultPage / page	number	1	Uncontrolled or controlled current page (1-indexed).
onPageChange	(page: number) => void	—	Fires with the next page on any change.
siblingCount	number	1	Pages shown on each side of the current page.
size	"sm" \| "md" \| "lg"	"md"	Control dimensions.

6-8 UI

Usage

Compose the shell, rail, and tab deck straight from the library.

Copy

import { NavShell } from "@/components/ui/nav-shell";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

export function LeagueCenter() {
  return (
    <NavShell
      title="6-8 League Center"
      tabs={[
        { label: "Scoreboard", href: "/scoreboard", active: true },
        { label: "Standings", href: "/standings" },
        { label: "Teams", href: "/teams" },
      ]}
    >
      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="roster">Roster</TabsTrigger>
        </TabsList>
        <TabsContent value="overview">Season at a glance…</TabsContent>
        <TabsContent value="roster">Depth chart…</TabsContent>
      </Tabs>
    </NavShell>
  );
}