docker-service-discovery/openspec/changes/archive/2026-03-28-integrate-shadcn-library/design.md

Context

The frontend is currently built with custom React components and CSS. This has led to a fragmented and inconsistent user interface. The goal is to standardize the UI by adopting shadcn/ui.

Goals / Non-Goals

Goals:

• Successfully integrate shadcn/ui into the Create React App project.
• Replace the Dropdown and FilterBox components with shadcn/ui components.
• Establish a pattern for using shadcn/ui for all future components.

Non-Goals:

• We will not be ejecting from Create React App. We will work within its constraints.
• We will not build a complete design system, but rather use shadcn/ui as our component foundation.

Decisions

• Installation: We will follow the official shadcn/ui documentation for installation, which involves using npx.
• Component Replacement: We will replace components one by one, starting with Dropdown and FilterBox.
• Styling: shadcn/ui uses Tailwind CSS. We will need to install and configure Tailwind CSS in our project.

Risks / Trade-offs

• [Risk] Integrating Tailwind CSS into a Create React App project can be complex. → Mitigation: We will follow the official guides for both Tailwind CSS and Create React App.
• [Trade-off] shadcn/ui is a relatively new library. → Mitigation: It has a strong and growing community, and it is backed by Vercel.