feat(components): migrate to unified radix-ui package + shadcn v4 RTL classes by Copilot · Pull Request #1059 · objectstack-ai/objectui

Copilot · 2026-03-10T04:00:51Z

Aligns @object-ui/components with shadcn v4 (Jan–Feb 2026 changelog): adds logical side animation classes for RTL support and consolidates 27 individual @radix-ui/react-* packages into the unified radix-ui package.

Inline start/end animation classes

Per the January 2026 shadcn update, adds data-[side=inline-start] and data-[side=inline-end] slide-in classes to all floating content components so animations behave correctly in RTL layouts:

tooltip.tsx, popover.tsx, hover-card.tsx
dropdown-menu.tsx, context-menu.tsx, menubar.tsx, select.tsx

Unified `radix-ui` package migration

Per the February 2026 shadcn update, replaces 27 individual @radix-ui/react-* dependencies with the single radix-ui package.

Import pattern change (namespace semantics are identical — no usage logic changes):

// Before
import * as DialogPrimitive from "@radix-ui/react-dialog"

// After
import { Dialog as DialogPrimitive } from "radix-ui"

Slot named-import pattern (only case requiring usage updates):

// Before
import { Slot } from "@radix-ui/react-slot"
const Comp = asChild ? Slot : "button"

// After
import { Slot as SlotPrimitive } from "radix-ui"
const Comp = asChild ? SlotPrimitive.Slot : "button"

Covers all 48 UI components plus custom components (button-group, field, item, mobile-dialog-content). command.tsx's DialogProps type is now derived via React.ComponentProps<typeof DialogPrimitive.Root>. shadcn-components.json registry metadata updated to reflect the consolidated dependency.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

vercel · 2026-03-10T04:00:56Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Mar 10, 2026 4:31am
objectui-demo	Ready	Preview, Comment	Mar 10, 2026 4:31am
objectui-storybook	Ready	Preview, Comment	Mar 10, 2026 4:31am

- Add inline-start/end CSS classes to tooltip, popover, hover-card, dropdown-menu, context-menu, menubar, and select components for RTL support - Migrate all @radix-ui/react-* individual imports to unified radix-ui package - Update package.json to use radix-ui instead of 27 individual @radix-ui packages - Update command.tsx to derive DialogProps from Dialog namespace - Migrate custom components (button-group, field, item, mobile-dialog-content) - Update shadcn-components.json registry metadata Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Copilot

Pull request overview

Aligns @object-ui/components with shadcn v4 updates by (1) migrating Radix imports/deps to the unified radix-ui package and (2) adding logical-side (inline-start / inline-end) animation classes to improve RTL behavior for floating UI primitives.

Changes:

Replace per-component @radix-ui/react-* dependencies with a single radix-ui dependency (plus corresponding import updates across UI/custom components).
Add data-[side=inline-start] / data-[side=inline-end] slide-in animation classes to popper-based content components (tooltip/popover/hover-card/menus/select).
Update shadcn-components.json dependency metadata to reflect the consolidated Radix dependency.

Reviewed changes

Copilot reviewed 38 out of 39 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Removes individual `@radix-ui/react-*` deps for the components package and adds `radix-ui` lock entries.
packages/components/package.json	Swaps 27 individual Radix deps for a single `radix-ui` dependency.
packages/components/shadcn-components.json	Updates component registry dependency lists to use `radix-ui`.
packages/components/src/ui/accordion.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/alert-dialog.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/aspect-ratio.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/avatar.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/breadcrumb.tsx	Migrates Slot usage to `radix-ui` namespace export.
packages/components/src/ui/button.tsx	Migrates Slot usage to `radix-ui` namespace export.
packages/components/src/ui/checkbox.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/collapsible.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/command.tsx	Updates dialog prop typing to derive from `radix-ui` Dialog root.
packages/components/src/ui/context-menu.tsx	Migrates Radix import and adds inline-start/end animation classes.
packages/components/src/ui/dialog.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/dropdown-menu.tsx	Migrates Radix import and adds inline-start/end animation classes.
packages/components/src/ui/form.tsx	Migrates Label/Slot imports to `radix-ui` namespace exports and updates Slot typing.
packages/components/src/ui/hover-card.tsx	Migrates Radix import and adds inline-start/end animation classes.
packages/components/src/ui/label.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/menubar.tsx	Migrates Radix import and adds inline-start/end animation classes.
packages/components/src/ui/navigation-menu.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/popover.tsx	Migrates Radix import and adds inline-start/end animation classes.
packages/components/src/ui/progress.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/radio-group.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/scroll-area.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/select.tsx	Migrates Radix import and adds inline-start/end animation classes to Select content.
packages/components/src/ui/separator.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/sheet.tsx	Migrates Dialog import (Sheet) to `radix-ui`.
packages/components/src/ui/sidebar.tsx	Migrates Slot usage to `radix-ui` namespace export across sidebar subcomponents.
packages/components/src/ui/slider.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/switch.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/tabs.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/toast.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/toggle-group.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/toggle.tsx	Migrates Radix import to `radix-ui`.
packages/components/src/ui/tooltip.tsx	Migrates Radix import and adds inline-start/end animation classes.
packages/components/src/custom/button-group.tsx	Migrates Slot usage to `radix-ui` namespace export.
packages/components/src/custom/field.tsx	Migrates Slot usage to `radix-ui` namespace export.
packages/components/src/custom/item.tsx	Migrates Slot usage to `radix-ui` namespace export.
packages/components/src/custom/mobile-dialog-content.tsx	Migrates Dialog import to `radix-ui`.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2026-03-10T05:10:29Z

+        "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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-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


SelectContent adds the new data-[side=inline-start] / data-[side=inline-end] animation classes, but the popper translate offset still only handles left/right (data-[side=left]:-translate-x-1 / data-[side=right]:translate-x-1). In RTL, when Radix emits side=inline-start|inline-end, the translate offset won’t apply, so spacing/positioning can differ from LTR.

Consider adding inline-start/inline-end equivalents using ltr:/rtl: variants (the codebase already uses rtl: in calendar.tsx) or switching to sideOffset props instead of direction-dependent translate classes.

Copilot · 2026-03-10T05:10:29Z


 import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Dialog as DialogPrimitive } from "radix-ui";


This file consistently uses single quotes for imports/strings, but the new radix-ui import uses double quotes. To keep formatting consistent (and avoid noisy future diffs), align the quote style with the rest of this file (or run the standard formatter across the file).

Suggested change

import { Dialog as DialogPrimitive } from "radix-ui";

import { Dialog as DialogPrimitive } from 'radix-ui';

Initial plan

7f7a189

Copilot AI assigned Copilot and hotlong Mar 10, 2026

Copilot started work on behalf of hotlong March 10, 2026 04:00 View session

vercel bot deployed to Preview – objectui-demo March 10, 2026 04:01 View deployment

vercel bot deployed to Preview – objectui-demo March 10, 2026 04:17 View deployment

Copilot AI changed the title ~~[WIP] Assess impact of upgrading shadcn to v4~~ feat(components): migrate to unified radix-ui package + shadcn v4 RTL classes Mar 10, 2026

Copilot finished work on behalf of hotlong March 10, 2026 04:24

vercel bot had a problem deploying to Preview – objectui March 10, 2026 04:25 Failure

vercel bot deployed to Preview – objectui-storybook March 10, 2026 04:31 View deployment

hotlong marked this pull request as ready for review March 10, 2026 05:06

Copilot AI review requested due to automatic review settings March 10, 2026 05:06

hotlong merged commit ec25603 into main Mar 10, 2026
5 of 6 checks passed

Copilot started reviewing on behalf of hotlong March 10, 2026 05:06 View session

Copilot AI reviewed Mar 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): migrate to unified radix-ui package + shadcn v4 RTL classes#1059

feat(components): migrate to unified radix-ui package + shadcn v4 RTL classes#1059
hotlong merged 2 commits intomainfrom
copilot/evaluate-shadcn-v4-upgrade-impact

Copilot AI commented Mar 10, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 10, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	import { Dialog as DialogPrimitive } from "radix-ui";
	import { Dialog as DialogPrimitive } from 'radix-ui';

Conversation

Copilot AI commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Inline start/end animation classes

Unified radix-ui package migration

Uh oh!

vercel bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 10, 2026 •

edited

Loading

Unified `radix-ui` package migration

vercel bot commented Mar 10, 2026 •

edited

Loading