migrate shadcn components from Radix UI to Base UI#272
Open
jrhizor wants to merge 6 commits into
Open
Conversation
Regenerated all shadcn components in @workspace/ui from the new base-vega
registry (`pnpm dlx shadcn@latest add --overwrite ...`). All @radix-ui/*
packages and the radix-ui meta-package removed; @base-ui/react added.
Consumer updates:
- asChild → render={...} prop across 53 call sites
- data-[state=open] → data-popup-open (Base UI's open-state attribute)
- --radix-* CSS vars → Base UI equivalents (--anchor-width)
- PopoverContent onOpenAutoFocus → initialFocus={false}
Other changes:
- form.tsx removed (no consumers; superseded by base-vega's field.tsx,
which is added but not yet adopted)
- input-group.tsx added as a peer of input
- calendar.tsx fixed for react-day-picker v10 (`table` → `month_grid`)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
prompt-wizard.tsx calls useQueryClient() (added in #262) but the stories never set up a QueryClient. Add a global decorator in .storybook/preview that provides a fresh client per story, with retries disabled so error-state stories surface immediately.
The mock was rendering as <button>, which has intrinsic content sizing — even with display:flex it doesn't stretch to fill its flex parent the way an anchor does. Visible on Switch Brand in the nav-user dropdown (other items in the same menu render as <a> or <div> and stretch fine). The real Link in production renders as <a>, so this just brings the mock in line with production layout.
Resolve conflicts:
- apps/web/.storybook/preview.tsx — take main's simpler QueryClient
decorator (shared client with staleTime: Infinity); same intent as the
one this branch added.
- apps/web/src/stories/_mocks/tanstack-router.tsx — auto-merged keeps
main's new ScriptOnce export and this branch's <a>-based Link mock.
- pnpm-lock.yaml — take main's; this branch's deps reinstall cleanly.
Also fix two warnings that surface under main's new Storybook vitest
addon:
- packages/ui/src/components/tags-input.tsx — set nativeButton={false}
on the combobox PopoverTrigger (renders a <div>, not a button).
- packages/ui/src/components/button.tsx — infer nativeButton from the
render prop's element type so the common <Button render={<Link/>}>
and <Button render={<a/>}> patterns don't all need to spell out
nativeButton={false}.
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.
Closes #104.
Summary
@workspace/uicomponents from shadcn'sbase-vegaregistry (pnpm dlx shadcn@latest add --overwrite …) so they're now built on@base-ui/reactinstead of@radix-ui/*.@radix-ui/*package (12) plus theradix-uimeta-package; added@base-ui/react@^1.4.1. Net-31 / +3packages in the lockfile.Consumer API changes
<X asChild><Y/></X><X render={<Y/>}/>(53 call sites)data-[state=open]:…on a triggerdata-popup-open:…w-(--radix-dropdown-menu-trigger-width)w-(--anchor-width)(or just drop — Base UI's popup already sizes to anchor)<PopoverContent onOpenAutoFocus={(e) => e.preventDefault()}/><PopoverContent initialFocus={false}/>Other changes
form.tsxdeleted — no consumers, superseded by base-vega'sfield.tsx(added but not yet adopted).input-group.tsxadded (peer ofinputin the new registry).calendar.tsx:table→month_gridforreact-day-pickerv10.Test plan
pnpm check-typespasses in apps/web and apps/wwwpnpm exec tsc --noEmitpasses in packages/ui, packages/whitelabel, packages/docspnpm exec biome lintpasses for all migration-touched files (the only remaining lint warnings —useImportTypein app-sidebar.tsx / full-page-card.tsx, unusedpromptNamein history-button.tsx, and CSS parser warnings in styles.css — are pre-existing on main)