shadcn-vue blocks you install with one command

Pricing, hero, auth, settings and a dashboard shell for Nuxt and Vue. The code lands in your project and follows your theme.

npx shadcn-vue@latest add https://ivyblocks.netlify.app/r/pricing-01.json

Free, five blocks so far. Join the waitlist for the full pack.

Free blocks

Pricing
Plans as rows with a monthly/yearly switch, yearly savings and “everything in X, plus”.
Open preview
npx shadcn-vue@latest add https://ivyblocks.netlify.app/r/pricing-01.json
Hero
Headline, two actions and a product frame that runs off the right edge on desktop.
Open preview
npx shadcn-vue@latest add https://ivyblocks.netlify.app/r/hero-01.json
Sign in and sign up
One form for both modes: OAuth buttons, field errors, pending state, typed submit payload.
Open preview
npx shadcn-vue@latest add https://ivyblocks.netlify.app/r/auth-01.json
Settings
Profile and notification settings with unsaved-change tracking, discard and save states.
Open preview
npx shadcn-vue@latest add https://ivyblocks.netlify.app/r/settings-01.json
Dashboard shell
Sidebar navigation, top bar and a mobile drawer built on the native dialog element.
Open preview
npx shadcn-vue@latest add https://ivyblocks.netlify.app/r/dashboard-shell-01.json

Nuxt 4, or Vue 3 with Vite, and Tailwind CSS 4
shadcn-vue set up in the project
Follow the shadcn-vue installation guide, then run npx shadcn-vue@latest init. Blocks install the base components they need.
TypeScript 6
Run npm i -D typescript@6. TypeScript 7 does not yet let Vue resolve imported types in components, so shadcn-vue components fail to compile with it.
Icons from @lucide/vue
Installed with the block. If you chose another icon library during init, both will be in your project.

Marketing pages, app screens and forms in the same style, for a one-time price. Leave your email and get a single message when it's out.