Radix UI
Radix UI is the primitive library shadcn/ui was built on and the one we recommend for Shadcnblocks. How the Radix builds are authored, which styles are available, and how the CLI installs them.
Radix UI is the primitive library shadcn/ui was built on and the one we recommend for Shadcnblocks. Every block is authored against Radix first; the Base UI and React Aria builds are derived from it.
Note: recent versions of shadcn/ui default new projects to Base UI. Projects created before that change, and any project with a
radix-*(or legacynew-york-v4/new-york/default) style, are on Radix UI. We still recommend Radix, but both are fully supported, so check thestylein yourcomponents.jsonrather than assuming.
What is Radix UI?
Radix UI is a set of unstyled, accessible React primitives (Dialog, Popover, Select, Tabs, Tooltip and so on) maintained by WorkOS. shadcn/ui wraps those primitives with Tailwind classes to produce its components, and Shadcnblocks builds every block on top of those wrappers.
Radix is the most established of the three libraries we support. It has the broadest set of primitives, years of production use, and it is what the majority of existing Next.js and shadcn/ui projects run. That is why it remains our recommendation even though shadcn/ui now defaults new projects to Base UI. The Base UI and React Aria versions of each block are derived from the Radix source.
How it works
The style in your components.json selects the library and the visual style:
{ "$schema": "https://ui.shadcn.com/schema.json", "style": "radix-vega", "registries": { "@shadcnblocks": "https://www.shadcnblocks.com/r/{style}/{name}" }}| Style value | UI library | Visual style |
|---|---|---|
radix-vega | Radix UI | Vega (New York) |
radix-nova | Radix UI | Nova |
radix-maia | Radix UI | Maia |
radix-lyra | Radix UI | Lyra |
radix-mira | Radix UI | Mira |
radix-luma | Radix UI | Luma |
radix-sera | Radix UI | Sera |
radix-rhea | Radix UI | Rhea |
With the {style} registry URL, npx shadcn@latest add @shadcnblocks/hero1 requests /r/radix-vega/hero1 and receives the Radix UI build of the block. Older style values (new-york-v4, new-york, default) and the older /r/{name} registry URL also resolve to Radix UI. See Overview for the routing rules.
Getting started
- Set
"style": "radix-vega"(or anotherradix-*style) incomponents.json. Projects created withnpx shadcn@latest createalready have a valid value; check whether it is aradix-*orbase-*style, since new projects default to Base UI. - Add the
@shadcnblocksregistry with the{style}URL shown above. - Install blocks:
npx shadcn@latest add @shadcnblocks/hero1.
The CLI installs the block, the shadcn/ui wrappers it needs, the radix-ui package, and any other npm dependencies.
Coverage
Every block, component, example and page is authored against the Radix UI wrappers first. The Radix build is the source of truth: the Base UI and React Aria builds are ports of it, and the Diff view on a block page compares them against the Radix source.
Third-party components used by some blocks (Kibo UI, Magic UI, DiceUI) publish Radix-based registries of their own, so Radix blocks depend on the upstream registry directly. Nothing is hosted or rewritten on our side for Radix installs.
Radix patterns you will see
Radix wrappers compose with asChild, expose open and value state as open / onOpenChange and value / onValueChange, and mark state with data-state attributes:
<Button asChild> <a href="/about">About</a></Button><Tabs value={tab} onValueChange={setTab}> <TabsTrigger value="a">A</TabsTrigger></Tabs><Tooltip> <TooltipTrigger asChild><Button>Hi</Button></TooltipTrigger> <TooltipContent side="right">Tip</TooltipContent></Tooltip>The Base UI and React Aria pages show the equivalent code for each of those libraries.