react
React component development guide for building UI with @lobehub/ui, routing, and state management.
- Use
@lobehub/uicomponents as primary choice, with antd-style for complex styling and inline styles for simple cases; referencenode_modules/@lobehub/ui/es/index.mjsfor available components - Hybrid routing architecture: Next.js App Router for auth pages, React Router DOM for main SPA; always use
Linkfromreact-router-dom(notnext/link) anduseNavigatehook for SPA navigation - Layout components include
Flexbox,Center,DraggablePanel, andGrid; data display, entry, feedback, and navigation components cover most UI needs - Access zustand store data via selectors; use
dynamicElement,redirectElement, andErrorBoundaryutilities from@/utils/routerfor route configuration
React Component Writing Guide
Styling
| Scenario | Approach |
|---|---|
| Most cases | createStaticStyles + cssVar.* (zero-runtime, module-level) |
| Simple one-off | Inline style attribute |
Truly dynamic (JS color fns like readableColor/chroma) |
createStyles + token — last resort |
Component Priority
src/components— project-specific reusable components@lobehub/ui/base-ui— headless primitives (Select, Modal, DropdownMenu, Popover, Switch, ScrollArea…)@lobehub/ui— higher-level components (ActionIcon, Markdown, DragPage…)- Custom implementation — last resort; never reach for antd directly
If unsure about available components, search existing code or check node_modules/@lobehub/ui/es/index.mjs.
More from lobehub/lobehub
zustand
LobeHub Zustand store conventions: public/internal/dispatch action layers, optimistic update pattern, slice composition via `flattenActions`, and class-based action migration. Use whenever working under `src/store/**`, adding a `createXxxSlice`, writing `internal_*` or `internal_dispatch*` actions, designing `messagesMap`/`topicsMap` reducers, refactoring a `StateCreator` object slice into a `XxxActionImpl` class, or debugging stale store reads. Triggers on `useChatStore`/`useUserStore`/`useGlobalStore`, `createStore`, `flattenActions`, `StoreSetter`, `internal_dispatch`, 'add an action', 'zustand selector', 'store slice', 'class action', 'optimistic update'.
1.9Ktypescript
TypeScript code style and type-safety guide for LobeHub. Read before writing or editing any `.ts` / `.tsx` / `.mts` — covers `interface` vs `type`, `Record<PropertyKey, unknown>` over `any`/`object`, `as const satisfies`, `@ts-expect-error` over `@ts-ignore`, `import type` (`separate-type-imports`), `async`/`await` + `Promise.all`, `for…of` over indexed `for`, and the no-silent-`.catch(() => fallback)` rule. Also use when reviewing type quality, deciding module augmentation (`declare module`) over `namespace`, or designing extensible types (e.g. `PipelineContext.metadata`). Triggers on any TypeScript file edit, 'fix the type', 'why is this `any`', 'should this be interface or type', 'eslint type-import', 'ts-expect-error'.
1.5Kdrizzle
Drizzle ORM schema authoring and query style for LobeHub (postgres, strict mode). Use when editing anything under `src/database/schemas/`, defining `pgTable` columns/indexes/junction tables, spreading `...timestamps`, generating `createInsertSchema`/`$inferSelect`/`$inferInsert` types, writing `db.select().from(...).leftJoin(...)` queries, or deciding when to split a relational `with:` into two queries. Triggers on `pgTable`, `db.select`, `db.query`, `eq()`/`and()`/`inArray()`, `uniqueIndex`, `primaryKey`, `references({ onDelete })`, 'add a column', 'new table', 'foreign key', 'junction table', 'schema field'. For migration files specifically, see the `db-migrations` skill.
1.2Ki18n
LobeHub internationalization with react-i18next. Use when adding any user-facing string in `.tsx`/`.ts` files, creating or renaming a key under `src/locales/default/{namespace}.ts`, deciding the `{feature}.{context}.{action}` flat-key pattern, wiring a new namespace into `src/locales/default/index.ts`, or translating zh-CN/en-US JSON for dev preview. Triggers on `useTranslation`, `t('foo.bar')`, `i18next.t`, `{{variable}}` interpolation, hardcoded UI strings (zh or en) that should be extracted, 'add i18n', '加 i18n key', '翻译', 'locale key', 'namespace', 'pnpm i18n'.
1.1Kproject-overview
Complete project architecture and structure guide. Use when exploring the codebase, understanding project organization, finding files, or needing comprehensive architectural context. Triggers on architecture questions, directory navigation, or project overview needs.
1.1Ktesting
Testing guide using Vitest. Use when writing tests (.test.ts, .test.tsx), fixing failing tests, improving test coverage, or debugging test issues. Triggers on test creation, test debugging, mock setup, or test-related questions.
1.0K