Shadcn Blocks for Vue

shadcnblocks.com is a React library. Every block, component, page and template here is written for shadcn/ui with React, and installs with npx shadcn add.

If you build with Vue, use the sister site: shadcnblocksvue.com. It is a dedicated catalog of 1,400+ blocks built on shadcn-vue, Tailwind and Vue, by the same team, with the same visual system and the same copy-and-own model.

Why a separate site?

shadcn-vue is a community port of shadcn/ui, not a drop-in of the React library. The primitives are different, the registry items are not the same files with a .vue extension, the components.json is different, and the CLI is shadcn-vue rather than shadcn. Previewing Vue inside the React site would also need a second runtime in every block iframe.

Rather than a Vue toggle that constantly says “not available in Vue”, the Vue site assumes Vue from the first page: Vite or Nuxt setup, the shadcn-vue CLI, and a catalog where everything listed exists. The reasoning is written up in Shadcn Blocks for Vue - A brand new site.

What is available for Vue

	React (shadcnblocks.com)	Vue (shadcnblocksvue.com)
Blocks	Yes	Yes (1,400+)
Components	Yes	No
Pages	Yes	No
Templates	Yes	No
Themes	Yes	No
Page builder / IDE extension	Yes	No
Primitive libraries	Radix UI, Base UI, React Aria	shadcn-vue (Reka UI)
CLI	npx shadcn add @shadcnblocks/{id}	npx shadcn-vue@latest add @shadcnblocksvue/{id}

Block ids are shared where a Vue counterpart exists: hero1 on this site and hero1 on the Vue site are the same design.

Installing a Vue block

npx shadcn-vue@latest add @shadcnblocksvue/hero1

Setup for the @shadcnblocksvue registry, API keys and Nuxt / Vite instructions are documented on the Vue site: shadcnblocksvue.com/docs.

Finding the Vue version of a block

On any block page here, if the block has a Vue counterpart the toolbar shows a Vue button that opens the same block on shadcnblocksvue.com. Blocks without the button do not have a Vue version yet.

Licensing

A Shadcnblocks subscription and the Vue site are separate products. Check shadcnblocksvue.com/pricing for Vue access.