Lux Docs

Overview

Lux ID (lux.id) is the Web3 identity portal for the Lux ecosystem. It is a statically exported Next.js 15 site built on the @luxfi/ui design system and @hanzo/auth authentication components. The site is currently a minimal landing page ("LUX id -- Coming soon") with the shared Lux ecosystem chrome (navigation, footer, theming) ready for identity and account management features to be built out.

Quick Reference

Item	Value
Repo	`github.com/luxfi/id`
Package	`@luxfi/id` v0.0.6
License	BSD-3-Clause
Author	Lux Partners Limited (`dev@lux.partners`)
Framework	Next.js 15.1.6 (App Router)
React	18.3.1
Package Manager	pnpm 10.12.4
Output	Static export (`output: 'export'`)
Domain	`https://lux.id`
Default branch	`main`
Private	No (public repo)
Homepage	`https://hanzo.id` (GitHub metadata)

Tech Stack

Layer	Technology	Version
Framework	Next.js (App Router)	15.1.6
UI Components	`@luxfi/ui`	5.5.2
UI Primitives	`@hanzo/ui`	5.3.22
Auth	`@hanzo/auth`	2.5.5
Commerce	`@hanzo/commerce`	7.3.8
Data Models	`@luxfi/data`	(transitive via @luxfi/ui)
3D Rendering	`@splinetool/react-spline`	4.0.0
Icons	`lucide-react`	0.470.0
MDX	`@next/mdx` 14.1.0, `@mdx-js/loader` 3.x, `@mdx-js/react` 3.x
SVG	`@svgr/webpack` 8.x
Dark Mode	`next-themes`	0.2.x
State	`mobx-react` 9.x, `mobx-react-lite` 4.x
CSS	Tailwind CSS 3.4.17, `postcss-import`
TypeScript	5.7.3

Project Structure

luxfi/id/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout (html lang='en', dark class, black bg)
│   │   └── page.tsx            # Landing page ("LUX id - Coming soon")
│   ├── metadata.ts             # SEO metadata for lux.id
│   ├── site-def.ts             # Site definition (currentAs, nav, footer)
│   └── mdx-components.tsx      # MDX component overrides (custom link via MDXLink)
├── public/
│   └── assets/
│       └── lux-site-icons/     # Favicons (16x16, 32x32, 192x192, 512x512, apple-touch)
├── next.config.js              # Static export, transpilePackages
├── tailwind.config.ts          # Lux UI preset, content paths
├── postcss.config.js           # PostCSS with imports
├── tsconfig.json
└── package.json

Key Source Files

`src/app/layout.tsx`

Root layout with dark theme defaults:

<html lang='en' className='dark'>
  <body className='bg-black text-white flex flex-col min-h-full'>
    {children}
  </body>
</html>

Metadata title: "id - LUX". Viewport theme color adapts to user preference (light: white, dark: black).

`src/app/page.tsx`

Current landing page -- a centered "LUX id / Coming soon" placeholder with a link to lux.network. This is where the identity portal UI will be built.

`src/metadata.ts`

SEO metadata configuration:

metadataBase: https://lux.id
Title template: %s | Lux ID
Description: "Lux ID is your Web3 Identity. Authentication and account pages for Lux Ecosystem."
Application name: Lux ID
Author: Lux Partners Limited
Favicons at /assets/lux-site-icons/ (16x16, 32x32, 192x192, 512x512, apple-touch-icon)
OpenGraph and Twitter card configs present but commented out

`src/site-def.ts`

Site definition for the shared Lux navigation chrome:


export default {
  currentAs: 'https://lux.id',
  nav: { common: mainNav },
  footer: footer.standard
} satisfies SiteDef

The currentAs property highlights the current site in the shared ecosystem navigation bar.

`src/mdx-components.tsx`

Overrides MDX link rendering to use MDXLink from @hanzo/ui/primitives:

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return { a: (props) => <MDXLink {...props}/>, ...components }
}

Next.js Configuration

next.config.js settings:

output: 'export' -- static site generation, no server required
images: \{ unoptimized: true \} -- required for static export
typescript.ignoreBuildErrors: true -- WIP, build proceeds despite TS errors
eslint.ignoreDuringBuilds: true -- WIP, build proceeds despite lint errors
transpilePackages: @hanzo/ui, @hanzo/auth, @hanzo/commerce, @luxfi/ui, @luxfi/data, @luxfi/menu-icons

Tailwind Configuration

Uses the @luxfi/ui Tailwind preset with content scanning across:

src/**/*.tsx (local components)
./node_modules/@luxfi/ui/**/*.\{ts,tsx\} (Lux UI library)
./node_modules/@hanzo/**/*.\{ts,tsx\} (Hanzo UI library)

Commands

# Install dependencies
pnpm install

# Development server (with hot reload)
pnpm dev

# Production build (static export to out/)
pnpm build

# Start production server (if not using static export)
pnpm prod

# Type check
pnpm tc

# Clean .next build cache
pnpm cn

# Full clean (remove .next and node_modules)
pnpm clean

lux.id (this repo) is the identity portal -- a static marketing/profile site for Web3 identity.

luxfi/login is the authentication portal -- the actual login/signup/forgot-password flow that authenticates users against Hanzo IAM (Casdoor). The login portal proxies to iam.hanzo.ai for authentication and redirects to cloud.lux.network after success.

Both share the lux.id domain conceptually but serve different purposes. The login portal runs as a standalone Next.js server (Docker, port 3000), while this identity portal is statically exported.

Shared Lux UI Pattern

This site follows the standard pattern used across all Lux ecosystem sites (@luxfi/bitcoin, @luxfi/bridge, etc.):

Package: @luxfi/<name> with pnpm@10.12.4
Framework: Next.js 15.1.6 App Router
UI: @luxfi/ui 5.5.2 + @hanzo/ui 5.3.22
Auth: @hanzo/auth 2.5.5
Commerce: @hanzo/commerce 7.3.8
3D: @splinetool/react-spline 4.0.0
Output: Static export
Dark theme: Default className='dark' on <html>
Site def: Imports mainNav and footer.standard from @luxfi/ui/site-def

lux/lux-login.md -- Authentication portal (login/signup/OAuth2 flows)
lux/lux-wallet.md -- Wallet integration
lux/lux-ui.md -- Shared UI component libraries (@luxfi/ui, @hanzo/ui)
lux/lux-bridge.md -- Bridge uses identity

Lux ID

On this page