Skip to content

Migrate hand-maintained UI primitives to shadcn/ui #4

@espetro

Description

@espetro

Summary

The 10 components in apps/web/src/shared/components/ui/ (button, dialog, select, dropdown-menu, input, label, badge, switch, tooltip, separator) are already shadcn-pattern compliant — they use Radix primitives, CVA variants, cn(), data-slot attributes, and Tailwind v4 conventions. They were hand-copied rather than installed via the shadcn CLI, which means they can't be updated, diffed, or extended through the standard npx shadcn add workflow.

Scope

  • Initialize shadcn/ui in apps/web/ (npx shadcn init) — wiring components.json to output to src/shared/components/ui
  • Replace each hand-maintained primitive with the CLI-installed equivalent, preserving any custom variants/extensions (e.g. xs/icon-xs button sizes, showCloseButton dialog footer prop, sm select size)
  • Add missing shadcn primitives that feature code already implicitly depends on or would benefit from: popover, tabs, scroll-area, command, sheet, toast/sonner
  • Update all imports across features/widgets to reference the new CLI-managed paths

Why now

  • Hand-maintained copies drift from upstream and miss bug fixes/aria improvements
  • Several features (settings, export, comments) compose these primitives in patterns that map 1:1 to shadcn recipes (forms, data lists, navigation)
  • Blocks adopting shadcn ecosystem additions (e.g. sonner for toast, cmdk for command palette)

Out of scope

Redesigning component visuals or API surface — match current behavior exactly.

Metadata

Metadata

Assignees

Labels

debtTechnical debt – important but not urgentenhancementNew feature or request

Projects

Status
In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions