ui-component-architecture

Reduce duplicated React UI markup in a monorepo by composing screens from existing shared primitives in a `@repo/ui` package. This keeps screens thin by separating reusable presentational components from app-specific layout and data wiring.

Extract a React component into a shared UI package when it is reused across multiple screens or is clearly generic. Avoid extracting components too early if they are one-off compositions, too app-specific, or coupled to stores, routers, or API clients.

Keep React route and page files thin with Tailwind by focusing them on data wiring and app-specific layout. Reuse existing visual primitives like buttons, cards, and dialogs from your shared UI package instead of embedding all presentation details directly in the screen.

Yes, you can refactor a dashboard page to use existing shared UI components by identifying available primitives like cards and stats before writing new JSX. This approach composes the page from existing components and extracts only the stable visual units.

The limitation of over-extracting React components into a monorepo is creating shared components that are too app-specific, too early, or coupled to stores, routers, or API clients. Guardrails prevent moving one-off composition into the shared `@repo/ui` package.

Yes, this approach works for React screens using @repo/ui imports in projects with a shared `packages/ui` package. It applies to page, route, and screen development by identifying existing primitives and separating reusable presentational components from app-specific composition.