React Component Writing Guide
-
Use antd-style for complex styles; for simple cases, use inline style attribute
-
Use Flexbox and Center from @lobehub/ui for layouts (see references/layout-kit.md )
-
Component priority: src/components
installed packages > @lobehub/ui antd
- Use selectors to access zustand store data
@lobehub/ui Components
If 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:
-
General: ActionIcon, ActionIconGroup, Block, Button, Icon
-
Data Display: Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip
-
Data Entry: CodeEditor, CopyButton, EditableText, Form, FormModal, Input, SearchBar, Select
-
Feedback: Alert, Drawer, Modal
-
Layout: Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow
-
Navigation: Burger, Dropdown, Menu, SideNav, Tabs
Routing Architecture
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
Key Files
-
Entry: src/spa/entry.web.tsx (web), src/spa/entry.mobile.tsx , src/spa/entry.desktop.tsx
-
Desktop router: src/spa/router/desktopRouter.config.tsx
-
Mobile router: src/spa/router/mobileRouter.config.tsx
-
Router utilities: src/utils/router.tsx
Router Utilities
import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';
element: dynamicElement(() => import('./chat'), 'Desktop > Chat'); element: redirectElement('/settings/profile'); errorElement: <ErrorBoundary resetPath="/chat" />;
Navigation
Important: For SPA pages, use Link from react-router-dom , NOT next/link .
// ❌ Wrong import Link from 'next/link'; <Link href="/">Home</Link>;
// ✅ Correct import { Link } from 'react-router-dom'; <Link to="/">Home</Link>;
// In components import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/chat');
// From stores const navigate = useGlobalStore.getState().navigate; navigate?.('/settings');