Skip to content

feat(ui): add shadcn foundation with Tailwind CSS and Radix primitives#2243

Open
NianJiuZst wants to merge 2 commits intothe-open-agent:masterfrom
NianJiuZst:shadcn-infra
Open

feat(ui): add shadcn foundation with Tailwind CSS and Radix primitives#2243
NianJiuZst wants to merge 2 commits intothe-open-agent:masterfrom
NianJiuZst:shadcn-infra

Conversation

@NianJiuZst
Copy link
Copy Markdown
Contributor

@NianJiuZst NianJiuZst commented May 8, 2026

Summary

This PR establishes the Tailwind CSS foundation for the shadcn/ui migration and demonstrates dual-stack coexistence by replacing LanguageSelect's antd Dropdown with a shadcn DropdownMenu.

Two Commits

1. feat(ui): add Tailwind CSS foundation

File Purpose
tailwind.config.js shadcn HSL color system, preflight: false, data-theme dark mode
postcss.config.js CRA PostCSS pipeline + tailwindcss (preserves all react-scripts plugins)
src/shadcn-vars.css 30+ CSS custom properties for light/dark themes
src/lib/utils.js cn() helper (clsx + tailwind-merge)

Dependencies: tailwindcss, postcss, autoprefixer, tailwindcss-animate, class-variance-authority, clsx, tailwind-merge, CRA PostCSS plugins

2. feat(ui): replace LanguageSelect with shadcn DropdownMenu

Before After
antd Dropdown shadcn DropdownMenu
@ant-design/icons GlobalOutlined @ant-design/icons GlobalOutlined (unchanged)
class component functional component with useState
click to open hover to open

Why LanguageSelect

  • Self-contained component (65 lines), only used in header
  • Maps cleanly: antd Dropdown → shadcn DropdownMenu
  • Low risk, easy to verify, easy to roll back
image

Test Plan

  • yarn build passes
  • yarn start compiles successfully
  • Language dropdown opens on hover, selects language on click
  • All antd pages, forms, tables render normally
  • Dark/light theme unaffected

Generated with Claude Code

@NianJiuZst NianJiuZst force-pushed the shadcn-infra branch 4 times, most recently from c618fdd to fb63f00 Compare May 8, 2026 12:40
@NianJiuZst NianJiuZst force-pushed the shadcn-infra branch 10 times, most recently from 05c95ec to 85b2248 Compare May 8, 2026 18:15
NianJiuZst and others added 2 commits May 9, 2026 02:46
- Add core deps: tailwindcss, postcss, autoprefixer, tailwindcss-animate
- Add utility deps: class-variance-authority, clsx, tailwind-merge
- Add CRA-compatible PostCSS plugins: postcss-flexbugs-fixes,
  postcss-preset-env, postcss-normalize, postcss-loader
- Inject tailwindcss into CRA PostCSS pipeline via craco.config.js
  (react-scripts sets postcssOptions explicitly, overriding postcss.config.js)
- Create tailwind.config.js with preflight disabled (antd compat)
- Create shadcn-vars.css with light/dark CSS variables
- Create lib/utils.js (cn helper)
- Only foundation deps included; Radix/lucide/react-hook-form etc.
  will be added per migration phase

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Demonstrate shadcn/antd dual-stack coexistence:
- Convert LanguageSelect from class to functional component
- Replace antd Dropdown with shadcn DropdownMenu
- Replace @ant-design/icons GlobalOutlined with lucide-react Globe
- Add @radix-ui/react-dropdown-menu dependency
- Import shadcn-vars.css in index.js to activate Tailwind CSS variables

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant