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

node_modules/@lobehub/ui/es/index.mjs

• 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

src/app/[variants]/(auth)/

desktopRouter.config.tsx

Key Files

• Entry:

  src/app/[variants]/page.tsx

• Desktop router:

  src/app/[variants]/router/desktopRouter.config.tsx

• Mobile router:

  src/app/[variants]/(mobile)/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

Link

react-router-dom

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');