Five changes, side by side.
Browse BlocksPick one and watch the same code flip between the two libraries, or take the switch yourself. Everything else is the shadcn/ui you know, and every block in the catalog is written this way.
pricing-link.tsx
<Button asChild><a href="/pricing">Pricing</a></Button>
Links also take nativeButton={false}. There is no asChild anywhere in the catalog.
<PopoverContentclassName="data-[state=open]:animate-indata-[state=closed]:animate-out"/>
Other states get their own names too, such as data-checked and data-active.
<AccordionContentclassName="data-[state=closed]:animate-accordion-updata-[state=open]:animate-accordion-down"/>
data-starting-style on the way in, data-ending-style on the way out.
import { Dialog as DialogPrimitive } from "radix-ui"<DialogPrimitive.Content />
Some parts are renamed too: a dialog's content is its Popup.
<Accordion><AccordionContent forceMount>{answer}</AccordionContent></Accordion>
hiddenUntilFound keeps collapsed answers in the HTML; keepMounted does it for Tabs.
From a Radix project to Base UI.
Changing components.json alone migrates nothing: the primitives you installed are still Radix. Four steps, in this order.
- Your Radix project
1. Switch the style
Commit first, then set
styleincomponents.jsonto a Base UI style such asbase-nova.components.json
{Added: "style": "base-nova"}2. Reinstall your primitives
Re-add the components you use with
--overwrite. Name them rather than using--all, which adds every component.Terminal
pnpm dlx shadcn@latest add button dialog --overwrite3. Fix your own code
Replace
asChildwithrender, anddata-[state=open]withdata-open, and so on.pricing-link.tsx
Removed: <Button asChild>Added: <Button render={<a />} nativeButton={false}>Removed: className="data-[state=open]:animate-in"Added: className="data-open:animate-in"4. Check the HTML
View the source of a page with an accordion or tabs, and add
hiddenUntilFoundwhere the content matters.faq.tsx
Added: <Accordion hiddenUntilFound>- On Base UI. Every 7Ovr block installs as it is.
Common questions.
What people ask about running shadcn/ui on Base UI.
render, which Radix components reject. Switch the style in components.json to a base-* style and reinstall your primitives first, as the steps on this page describe. A project created by a recent shadcn init already uses a Base UI style.@7ovr is in the official shadcn registry directory, so pnpm dlx shadcn@latest add @7ovr/hero-1 works in any project with shadcn/ui on Base UI. For Pro blocks, first add the @7ovr-pro registry to components.json and set your license key as REGISTRY_TOKEN in .env.local, then install from @7ovr-pro the same way.@base-ui/react 1.8. Base UI describes itself as unstyled, accessible components for React, from the creators of Radix, Floating UI and Material UI, with a team working on it full-time.shadcn apply --preset in an existing project, or shadcn init --preset in a new one, and every block you install follows it.