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

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

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

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`