Code Library

Package

@my-lab/ui is the shared React UI package. It exports component primitives, token objects, and shared CSS.

Import Rules

import { Button, Input, designTokens } from "@my-lab/ui";
import "@my-lab/ui/styles/global.css";

Structure

Path	Responsibility
`src/components`	React UI components
`src/hooks`	Component support hooks such as mobile detection
`src/tokens`	Design token objects
`src/styles/global.css`	CSS variables, Tailwind source config, global reset
`src/types`	Local module declarations for package interop
`src/vendor`	Small compatibility wrappers for bundler/runtime interop
`src/lib/utils.ts`	Shared class name helper

Component Rule

Do not add a new component only because one screen needs local markup. Add a design-system component when at least two screens need the same behavior or when accessibility/state logic is easy to get wrong.

shadcn Catalog

The shadcn component catalog is implemented as real reusable components, not Storybook-only markup.

Public exports live in packages/ui/src/index.ts.
Component implementation files live in packages/ui/src/components.
Storybook catalog examples live in packages/ui/src/shadcn-showcase.
The Storybook path is Design System/shadcn/Components.

Complex examples should show production-shaped composition. For example, Sidebar should show an application shell, Navigation Menu should show 2-depth navigation, Menubar should show multiple menu types, and Field should show grouped accessible form sections.

Interop Rule

When a dependency has Vite or ESM/CJS interop issues, keep the workaround isolated.

Prefer a package-level wrapper in src/vendor.
Keep Storybook-only aliasing in apps/storybook/vite.config.ts.
Do not spread compatibility code into component call sites.