Migrate from Mantine to Tailwind CSS v4 + shadcn/ui#730
Open
Migrate from Mantine to Tailwind CSS v4 + shadcn/ui#730
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
8 tasks
MaxGhenis
force-pushed
the
tailwind-shadcn-migration
branch
from
dac8adf to
1b0a9b3
Compare
…obile-optimization
…/feat/mobile-optimization
…yEngine/feat/mobile-optimization
…m PolicyEngine/feat/mobile-optimization
Resolve 53 ESLint errors (unused imports, duplicate imports, missing button type attributes, a11y keyboard handlers) and 3 stylelint hex color warnings across 37 files. Run Prettier on all changed files. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CI was failing because the lockfile format changed between bun 1.2.0 and 1.2.21 (configVersion field removed). Update packageManager to match the version used to generate the lockfile. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove unsupported `variant` prop from Container/Title components
- Change "flex-start" to "start" for Stack/Group align prop
- Replace pixel string gap values with token keys (sm/md/lg)
- Replace `h` prop with style={{ height }} on Stack
- Remove `size` prop from Progress component
- Resolve duplicate Label identifier (Recharts vs shadcn)
- Fix step prop type on VariableInput
- Export SheetPortal/SheetOverlay from sheet.tsx
- Fix USPlaceSelector type mismatch
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace @mantine/dates (YearPickerInput, DatePickerInput) with native HTML inputs in 3 value setter components - Remove MantineProvider from WebsiteApp, CalculatorApp, test fixtures, test utils, and Storybook config - Delete Mantine theme files (theme.ts, styles/colors.ts, styles/components.ts) - Remove @mantine/core, @mantine/dates, @mantine/hooks, eslint-config-mantine, postcss-preset-mantine from package.json - Inline ESLint rules previously provided by eslint-config-mantine - Update postcss config to remove mantine-breakpoint variables Zero @Mantine imports remain. All tests pass (2999), typecheck clean, build succeeds, lint clean. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add max-width: calc(100vw - 300px) to main element to hard-limit content width to viewport minus sidebar nav - Change overflow-x to hidden on main (no horizontal scroll) - Add min-w-0 and overflow-hidden to footer grid columns to prevent button text from overflowing grid boundaries - Add truncate to footer buttons so long labels don't break layout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Buttons now have natural/dynamic widths in a flex container with justify-between, instead of being forced into equal-width grid columns that caused overflow and truncation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
DefaultBaselineOption was using shadcn Card + CardContent with p-lg, making it visually taller than the sibling ButtonPanelVariant cards. Now uses the same button + p-md pattern as ButtonPanelVariant for consistent card heights across the simulation selection view. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Set default border-color to var(--tw-color-border) (#e2e8f0) globally in @layer base — Tailwind Preflight defaults to currentColor (black) - Add explicit tw:border-border to TableHeader, TableRow, TableFooter for defense-in-depth Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace crude triangle character with IconChevronRight that rotates - Add left highlight bar (3px primary border) on active items - Use proper flex layout with gap for icon + label alignment - Tighter padding (6px 12px) matching Mantine NavLink compact style - 20px indent per nesting level (matching Mantine's child indent) - Active state: primary-50 background + primary-700 text + left bar - Hover state: gray-100 background Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace shadcn Card/CardContent with plain divs matching the card variant pattern used across all pathway views. Fulfilled items no longer get a teal border (matches Mantine where fulfilled = unfulfilled styling). Add guttered container and colored title. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove chevron icons from sidebar menu items - Change background from gray-50 to white to match content area - Remove text-sm class for larger default text size Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
4 tasks
- Add fixed-width placeholder for checkmark icons so button text aligns consistently whether checkmark is shown or not - Style ParameterTable to match Population table: bordered container, gray header background, uppercase lighter column headings - Add explicit h2 heading styles for report sub-pages (Tailwind reset strips default heading styles) - Remove whitespace-nowrap from table cells so long parameter names wrap Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Complete migration from Mantine UI to Tailwind CSS v4 + shadcn/ui (radix primitives). Zero
@mantine/*imports remain. All Mantine packages removed from dependencies.Tracking issue: #729
What changed
Foundation:
tw:prefixcn()utility (clsx + tailwind-merge)Wrapper components (Mantine API compatibility):
Text,Stack,Group,Title,Container,SpinneruseMediaQuery,useViewportSize,useDisclosureComponent migration (~190 files):
@mantine/dates(YearPickerInput, DatePickerInput) with native HTML inputsRemoved:
@mantine/core,@mantine/dates,@mantine/hooksdependencieseslint-config-mantine,postcss-preset-mantinedev dependenciesMantineProviderfrom app shells, test fixtures, Storybooktheme.ts,styles/colors.ts,styles/components.ts)Code quality:
Test plan
bunx vitest run— 2999 tests pass (248 files)bun run typecheck— 0 errorsbun run lint— 0 errors (ESLint + Stylelint)bun run build— succeeds (website + calculator)🤖 Generated with Claude Code