Using ShadcnStore with Frameworks

ShadcnStore blocks work in any React project that has shadcn/ui and Tailwind CSS set up. The install command is identical across frameworks; what changes is how each one handles client interactivity and project structure.

npx shadcn@latest add https://shadcnstore.com/r/[block].json

Supported frameworks

Following the official shadcn/ui setup, these are supported: Next.js, Vite, Laravel, React Router, Astro, TanStack Start, TanStack Router, and a manual React setup.

Next.js (App Router)

The most common target. Initialise shadcn/ui, then add blocks. Any block with state, effects, or event handlers is a Client Component, so keep the "use client" directive at the top of interactive files (blocks that use it already include it). Server Components can import and render presentational blocks directly.

npx shadcn@latest init
npx shadcn@latest add https://shadcnstore.com/r/hero-1.json

Vite

Configure the @/* alias in vite.config.ts and tsconfig.json, then add blocks. There is no server/client split, so interactivity works without extra directives. See Dark Mode for the Vite theme-provider setup.

Laravel

Use Laravel with Inertia + React, or as a React island in Blade. Point the shadcn aliases at your resources/js structure in components.json, then install blocks into that path.

React Router, Astro, and TanStack

• React Router: full support; add blocks and import them into your routes.
• Astro: use the React integration and hydrate interactive blocks with a client:* directive.
• TanStack Start / Router: full support; treat interactive blocks as client components where the framework requires it.

The one rule that carries across frameworks

If a block manages state or handles events, it must run on the client. In Next.js that means "use client"; in Astro it means a client:load (or similar) directive; in Vite and plain React it is automatic. Everything else, the styling, the props, and the registry command, is the same.

Related

• Installation: full setup and install methods.
• components.json: aliases and paths per framework.
• TypeScript Support: typing blocks and data.
• Components: individual component references.