react

Always prefer @lobehub/ui/base-ui when the component exists there, such as Select, Modal, Popover, or Drawer. Use @lobehub/ui root exports only when base-ui has no equivalent, and fall back to antd only when neither provides the component.

Use createStaticStyles with cssVar tokens for most cases since it is zero-runtime and module-level. Use inline style attributes for simple one-offs, and reserve createStyles with token access for truly dynamic values like computed colors.

Treat memoization as an opt-in optimization, not a default. First split at the update boundary, move state to its smallest owner, and narrow Zustand selectors; only memoize when the subtree is demonstrably expensive with stable inputs and a concrete render-path analysis.

The root @lobehub/ui Select is the antd-backed version, not the headless base-ui primitive. The same applies to Modal, DropdownMenu, and similar components; import them from @lobehub/ui/base-ui instead.

Use the Flexbox and Center components from @lobehub/ui, preferring gap over margin for spacing and flex={1} to fill available space. Nest Flexbox for complex layouts and set overflow to auto for scrollable regions.