gui/README.md

@luxfi/gui

Lux UI chrome on @hanzo/gui (Tamagui). Every Lux web property (lux.network, lux.finance, lux.exchange, lux.financial, lux.cloud, lux.industries, lux.id, etc.) consumes this package so header, footer, and primitives are identical across the portfolio.

Components are Tamagui primitives (YStack, XStack, H1..H6, Paragraph, Button, Popover, Sheet, etc.) re-composed into Lux-branded surfaces. Responsive behavior uses Tamagui media queries ($gtSm, $gtMd, $gtLg) — no Tailwind, no runtime CSS — so the same components work on mobile, tablet, laptop, and desktop out of the box.

What's in here

Export	Purpose
LuxHeader	Brand + cross-product nav bar, variant per app
LuxProductMenu	Mega-menu of every Lux product, grouped by section
LuxFooter	Multi-column footer with cross-links and legal strip
LuxHero	Landing page hero (eyebrow / title / subtitle / CTAs / visual)
LuxFeatureGrid	N-column feature callout grid
LuxStatCard / LuxStatRow	KPI tile used on dashboards and marketing
LuxCta	Closing call-to-action block with primary + secondary button
LUX_PRODUCTS	Canonical nav structure (sections + items)
LUX_PRIMARY_LINKS	Short top-level nav (Network / Finance / Exchange / Cloud / Docs)
luxColors	Light + dark brand color tokens
luxFontStack	Typography tokens
luxSpace, luxRadius, luxMaxWidth	Spacing / layout tokens

Every component is tree-shakeable. Subpath imports:

import { LuxHeader } from '@luxfi/gui/header'
import { LuxFooter } from '@luxfi/gui/footer'
import { luxColors } from '@luxfi/gui/tokens'

Install

pnpm add @luxfi/gui @hanzo/gui react react-dom

@hanzo/gui, react, react-dom are peer dependencies.

Use

@luxfi/gui components are Tamagui-based. They must be rendered inside a GuiProvider from @hanzo/gui. The Lux config is exposed at @luxfi/gui/config.

// app/providers.tsx
'use client'
import { GuiProvider } from '@hanzo/gui'
import luxConfig from '@luxfi/gui/config'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <GuiProvider config={luxConfig} defaultTheme="lux_dark">
      {children}
    </GuiProvider>
  )
}

// any page
import { LuxHeader, LuxFooter, LuxHero, LuxFeatureGrid } from '@luxfi/gui'
import Link from 'next/link'

const renderLink = ({ href, children }) => <Link href={href}>{children}</Link>

export default function Page() {
  return (
    <>
      <LuxHeader variant="finance" renderLink={renderLink} />
      <LuxHero
        eyebrow="Introducing Lux Finance"
        title={<>Self-repaying loans on every asset.</>}
        subtitle="Borrow against anything. Pay nothing."
        primaryCta={{ label: 'Get started', href: '/app' }}
        secondaryCta={{ label: 'Read docs', href: 'https://docs.lux.financial' }}
        renderLink={renderLink}
      />
      <LuxFeatureGrid
        eyebrow="Why Lux"
        heading="Built for the next decade of finance."
        features={[
          { title: 'Non-custodial', description: 'Your keys, your coins.' },
          { title: 'Cross-chain', description: '9 chains today, 50 soon.' },
          { title: 'Open source', description: 'Audited and on-chain.' },
        ]}
      />
      <LuxFooter renderLink={renderLink} />
    </>
  )
}

Variants

Pass variant on LuxHeader to highlight the active product and brand the wordmark: network, finance, financial, exchange, credit, fund, invest, safe, market, cloud, id, industries, docs, default.

Render-prop links

All components accept renderLink={({ href, children }) => ReactNode} so the host app keeps ownership of its router (Next, TanStack Router, Expo Router, etc). The default renderer is a plain <a>.

Development

pnpm install
pnpm build
pnpm typecheck

Versioning

@luxfi/gui follows semver. Peer-depends on @hanzo/gui >= 4.7.0. Breaking changes bump the major.

License

MIT. See LICENSE.