chore: upgrade Tailwind 4.3 and sync shadcn/ui components#464
Merged
Conversation
Bump tailwindcss, @tailwindcss/postcss, tailwind-merge, cmdk, and @radix-ui/* to latest registry versions. Point shadcn:add at shadcn@latest. Co-authored-by: Cursor <cursoragent@cursor.com>
Re-apply all installed primitives with shadcn@latest -o using @radix-ui imports. Drop legacy slide transforms on DialogContent so the command palette fades and zooms from center under Tailwind v4. Co-authored-by: Cursor <cursoragent@cursor.com>
Document Tailwind 4.3, official shadcn registry refresh, and the command palette dialog animation fix. Register the month in docs nav and index. Co-authored-by: Cursor <cursoragent@cursor.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (3)
📝 WalkthroughWalkthroughMigrate many shadcn/ui components from Radix icons to lucide-react, standardize focus/outline and spacing utilities, adjust component typings/structure (Input, CardTitle, Tooltip), improve select/dropdown scrolling, and update toolchain dependencies and changelog for May 2026. ChangesUI Component Migration and Styling Overhaul
Toolchain and Documentation Updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3ad9040e67
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Deploying animata with
|
| Latest commit: |
38cc1b5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://342781cc.animata.pages.dev |
| Branch Preview URL: | https://chore-upgrade-shadcn-tailwin.animata.pages.dev |
The shadcn registry sync defaulted CardTitle and CardDescription to divs. Use heading and paragraph elements again for screen-reader outline quality. Co-authored-by: Cursor <cursoragent@cursor.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
components/ui/dropdown-menu.tsx (1)
59-76:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix Tailwind v4 CSS variable syntax.
Lines 68-69 use old Tailwind v3 bracket syntax for CSS variables. Tailwind v4 requires parentheses.
- Line 68:
max-h-[var(--radix-dropdown-menu-content-available-height)]→max-h-(--radix-dropdown-menu-content-available-height)- Line 69:
origin-[--radix-dropdown-menu-content-transform-origin]→origin-(--radix-dropdown-menu-content-transform-origin)🔧 Proposed fix
className={cn( - "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", - "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", + "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", + "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)", className )}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/ui/dropdown-menu.tsx` around lines 59 - 76, The Tailwind v3 bracket CSS-variable syntax in the className of DropdownMenuContent is invalid for Tailwind v4; update the affected utility tokens in the DropdownMenuContent component so the CSS variable utilities use parentheses instead of square brackets — replace max-h-[var(--radix-dropdown-menu-content-available-height)] with max-h-(--radix-dropdown-menu-content-available-height) and origin-[--radix-dropdown-menu-content-transform-origin] with origin-(--radix-dropdown-menu-content-transform-origin) inside the cn(...) call so the component's className uses the new Tailwind v4 syntax.components/ui/select.tsx (1)
70-100:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winFix Tailwind v4 CSS variable syntax.
Lines 78 and 91 use old Tailwind v3 bracket syntax for CSS variables. Tailwind v4 requires parentheses without the
var()wrapper.
- Line 78:
max-h-[--radix-select-content-available-height]→max-h-(--radix-select-content-available-height)- Line 78:
origin-[--radix-select-content-transform-origin]→origin-(--radix-select-content-transform-origin)- Line 91:
h-[var(--radix-select-trigger-height)]→h-(--radix-select-trigger-height)- Line 91:
min-w-[var(--radix-select-trigger-width)]→min-w-(--radix-select-trigger-width)🔧 Proposed fix
className={cn( - "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]", + "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )} position={position} {...props} > <SelectScrollUpButton /> <SelectPrimitive.Viewport className={cn( "p-1", position === "popper" && - "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" + "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)" )} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/ui/select.tsx` around lines 70 - 100, SelectContent uses Tailwind v3 bracket syntax for CSS variables; update the className usages inside the SelectPrimitive.Content and SelectPrimitive.Viewport in SelectContent to Tailwind v4 parenthesis syntax: replace "max-h-[--radix-select-content-available-height]" with "max-h-(--radix-select-content-available-height)", "origin-[--radix-select-content-transform-origin]" with "origin-(--radix-select-content-transform-origin)", "h-[var(--radix-select-trigger-height)]" with "h-(--radix-select-trigger-height)", and "min-w-[var(--radix-select-trigger-width)]" with "min-w-(--radix-select-trigger-width)". Ensure changes are applied to the className strings in the SelectContent component so Tailwind v4 recognizes the CSS variables.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/ui/tooltip.tsx`:
- Line 23: The Tailwind origin utility uses v4 parentheses for CSS-variable
arbitrary values; replace the v3-style token
origin-[--radix-tooltip-content-transform-origin] in the tooltip component's
class list (the string containing "z-50 ...
origin-[--radix-tooltip-content-transform-origin]") with the v4 syntax
origin-(--radix-tooltip-content-transform-origin) so the origin utility is
applied correctly (update the class string in the Tooltip/TooltipContent JSX
where that token appears).
In `@content/docs/changelog/2026-05.mdx`:
- Line 7: Update the changelog text to use the shadcn registry URL pattern
instead of the bare CLI add command: replace occurrences of "npx shadcn@latest
add <component> -o" (and any plain "npx shadcn add component-name") with the
registry URL format "https://animata.design/r/{category}/{name}.json" and update
the `shadcn:add` mention to reference the registry URL usage; ensure all
examples in the paragraph and any inline code spans follow the registry URL
pattern per the docs guideline.
- Line 3: Update the frontmatter "description" to accurately reflect the
migration strategy described in the body: replace "unified Radix imports" with
wording that indicates per-package `@radix-ui/react-`* imports were retained
(e.g., "Tailwind CSS 4.3 and shadcn/ui component refresh with per-package
`@radix-ui/react-`* imports retained") so the description matches the content in
content/docs/changelog/2026-05.mdx.
In `@content/docs/changelog/index.mdx`:
- Line 17: Replace the bare CLI mention in the changelog sentence that currently
reads like "shadcn registry went live — every component installable with `npx
shadcn add`" to the required registry URL pattern; update the text to reference
the registry URL format "https://animata.design/r/{category}/{name}.json" (use
that pattern in place of the bare `npx shadcn add` wording) so the changelog
entry uses the correct shadcn registry URL format.
---
Outside diff comments:
In `@components/ui/dropdown-menu.tsx`:
- Around line 59-76: The Tailwind v3 bracket CSS-variable syntax in the
className of DropdownMenuContent is invalid for Tailwind v4; update the affected
utility tokens in the DropdownMenuContent component so the CSS variable
utilities use parentheses instead of square brackets — replace
max-h-[var(--radix-dropdown-menu-content-available-height)] with
max-h-(--radix-dropdown-menu-content-available-height) and
origin-[--radix-dropdown-menu-content-transform-origin] with
origin-(--radix-dropdown-menu-content-transform-origin) inside the cn(...) call
so the component's className uses the new Tailwind v4 syntax.
In `@components/ui/select.tsx`:
- Around line 70-100: SelectContent uses Tailwind v3 bracket syntax for CSS
variables; update the className usages inside the SelectPrimitive.Content and
SelectPrimitive.Viewport in SelectContent to Tailwind v4 parenthesis syntax:
replace "max-h-[--radix-select-content-available-height]" with
"max-h-(--radix-select-content-available-height)",
"origin-[--radix-select-content-transform-origin]" with
"origin-(--radix-select-content-transform-origin)",
"h-[var(--radix-select-trigger-height)]" with
"h-(--radix-select-trigger-height)", and
"min-w-[var(--radix-select-trigger-width)]" with
"min-w-(--radix-select-trigger-width)". Ensure changes are applied to the
className strings in the SelectContent component so Tailwind v4 recognizes the
CSS variables.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c3c3ce59-8aa3-4cf2-a076-11e99b8ce86a
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (16)
components/ui/accordion.tsxcomponents/ui/badge.tsxcomponents/ui/button.tsxcomponents/ui/card.tsxcomponents/ui/command.tsxcomponents/ui/dialog.tsxcomponents/ui/dropdown-menu.tsxcomponents/ui/input.tsxcomponents/ui/select.tsxcomponents/ui/sheet.tsxcomponents/ui/tabs.tsxcomponents/ui/tooltip.tsxconfig/docs.tscontent/docs/changelog/2026-05.mdxcontent/docs/changelog/index.mdxpackage.json
Use parenthesis arbitrary values for dropdown, select, and tooltip Radix CSS variables. Update changelog copy to registry URL format and accurate Radix import description per docs guidelines. Co-authored-by: Cursor <cursoragent@cursor.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
1 participant
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
tailwindcss,@tailwindcss/postcss,tailwind-merge) and bump shadcn-related deps (cmdk,@radix-ui/*,class-variance-authority)npx shadcn@latest add -o), keeping@radix-ui/react-*imports (no unifiedradix-uimigration)slide-in-from-*transforms onDialogContentthat caused scale-from-top-left under Tailwind v4 +tw-animate-cssTest plan
yarn buildpassesMade with Cursor
Summary by CodeRabbit
Chores
Style
Documentation