examples

Composition examples

What the system enables. Each example assembles 9–13 Tux* components into a real-shape surface — a Landscape dashboard, a research-program landing, a tti-ai-studio session. Data is illustrative; the goal is to show how the components compose under realistic constraints, not to ship working product views.

If you're trying to figure out what tux is for, start here. The component-detail pages show each Tux* in isolation; these examples show them together at the density and rhythm of real product surfaces.

product · IT-facing

Landscape dashboard

Index overview for a research-IT product (Landscape). Sidebar shell + KPI row with deltas + inline ingest-rate sparkline + treemap + faceted file search + right-rail activity + active-agents tile. Composes TuxBreadcrumbs, TuxPageHeader, TuxBigStat, TuxFactoid, TuxSparkline, TuxAlert, TuxTreemap, TuxFilterPanel, TuxSearch, TuxBadge, TuxPagination, TuxSectionHeader, TuxDescriptionList, TuxCard, and the sidebar layout primitives (UDashboardSidebarToggle, UNavigationMenu).

15 Tux* components

marketing · public

Research program landing

Public-facing research-program hero. Composes TuxPageHeader (hero), TuxFactoid, TuxBlockquote, TuxMediaSlab, TuxIconFeature, TuxCardSlab, TuxNewsCollection, TuxTestimonial, TuxCTA, and TuxLinkList.

10 Tux* components

product · chat

tti-ai-studio session

LLM/agent session view. Composes TuxBreadcrumbs, TuxPageHeader, TuxAlert (compliance), TuxSectionHeader, TuxCallout, TuxDescriptionList, TuxFactoid, TuxAccordion, and TuxCommandPalette.

9 Tux* components

layout · app shell

Sidebar shell

Demonstrates `app/layouts/sidebar.vue` — the opt-in app-shell layout built on UDashboardGroup + UDashboardSidebar + UDashboardPanel. Four named slots (header, rail-header, rail, rail-footer) + default content. Try resizing.

5 Tux* components

publishing · academic article

Research paper

Full editorial-research paper page exercising the research-publishing cluster end-to-end. Composes TuxPageHeader + TuxAuthorByline + TuxPaperMeta + TuxAbstract + TuxChartLine (inside TuxFigureCaption) + TuxTableCaption + TuxCorridorStrip + TuxFootnote (inline + bottom list) + TuxCitationExport (6 formats) + TuxAcknowledgments + TuxCenterBadge + TuxFundingSource.

12 Tux* components

marketing · TTI identity

TTI center landing

Mobility Division landing page exercising the TTI identity cluster end-to-end. TuxLab as hero, TuxResearcher × 3 featured, TuxProgram × 3 active programs, TuxFundingSource strip, TuxCenterBadge throughout (including cross-division links to the other five TTI centers).

8 Tux* components

Why these three

tux serves three product shapes: data-dense IT chrome (Landscape), marketing/research surfaces (the public site, the docs site, program landings), and chat/agent product views (tti-ai-studio). Each example here demonstrates one of those shapes end-to-end so consumers can see the system stretched in the direction they care about.