React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.
style attribute
createStaticStyles with cssVar.* (zero-runtime) — module-level, no hook call requiredcreateStyles + token when styles genuinely need runtime computation (dynamic props, JS color fns like readableColor/chroma).cursor/docs/createStaticStyles_migration_guide.md for full patternFlexbox and Center from @lobehub/ui for layouts (see references/layout-kit.md)src/components > @lobehub/ui/base-ui > @lobehub/ui > custom implementation
@lobehub/ui/base-ui primitives (Select, Modal, DropdownMenu, Popover, Switch, ScrollArea…) over antd equivalents@lobehub/ui higher-level components when base-ui has no matchIf unsure about component usage, search existing code in this project. Most components extend antd with additional props.
Reference: node_modules/@lobehub/ui/es/index.mjs for all available components.
Common Components:
Hybrid routing: Next.js App Router (static pages) + React Router DOM (main SPA).
| Route Type | Use Case | Implementation |
|---|---|---|
| Next.js App Router | Auth pages (login, signup, oauth) | src/app/[variants]/(auth)/ |
| React Router DOM | Main SPA (chat, settings) | desktopRouter.config.tsx + desktopRouter.config.desktop.tsx (must match) |
src/spa/entry.web.tsx (web), src/spa/entry.mobile.tsx, src/spa/entry.desktop.tsxsrc/spa/router/desktopRouter.config.tsx (dynamic imports) and src/spa/router/desktopRouter.config.desktop.tsx (sync imports). Drift can cause unregistered routes / blank screen.src/spa/router/mobileRouter.config.tsxsrc/utils/router.tsx.desktop.{ts,tsx} File Sync RuleCRITICAL: Some files have a .desktop.ts(x) variant that Electron uses instead of the base file. When editing a base file, always check if a .desktop counterpart exists and update it in sync. Drift causes blank pages or missing features in Electron.
Known pairs that must stay in sync:
| Base file (web, dynamic imports) | Desktop file (Electron, sync imports) |
|---|---|
src/spa/router/desktopRouter.config.tsx | src/spa/router/desktopRouter.config.desktop.tsx |
src/routes/(main)/settings/features/componentMap.ts | src/routes/(main)/settings/features/componentMap.desktop.ts |
How to check: After editing any .ts / .tsx file, run Glob for <filename>.desktop.{ts,tsx} in the same directory. If a match exists, update it with the equivalent sync-import change.
import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';