Skip to content

[bug]: preview block missing card sub-components — broken on install #10284

@lennontomlinson

Description

@lennontomlinson

Describe the bug

Description

When installing the preview block via npx shadcn add preview, only the top-level index.tsx and example.tsx files are installed. The ~30 card sub-components that index.tsx imports from @/components/blocks/preview/cards/ are not included in the published registry JSON, so they are never installed. This means the block is broken out of the box and all card imports fail immediately.

Expected Behavior

All sub-components under cards/ should be resolved and included in the published preview.json registry entry, so that npx shadcn add preview installs a fully working block with all its dependencies.

Actual Behavior

Only 1 file is listed in the registry entry for the preview block. The card sub-components at apps/v4/registry/bases/base/blocks/preview/cards/ are missing from the output. Every import from @/components/blocks/preview/cards/... fails with a module-not-found error.

Root Cause Analysis

The CLI's recursivelyResolveFileImports() function in packages/shadcn/src/registry/utils.ts is responsible for walking the AST of each registered file and pulling in any locally-imported files. However, the published preview.json in the registry only contains the single top-level file — the recursive resolution does not appear to pick up the card components located at:

apps/v4/registry/bases/base/blocks/preview/cards/

This suggests either:

  • The card files are not reachable by the import-resolution logic (e.g., path alias mismatch, or the walker stops too early), or
  • The registry build step does not run the recursive resolver for this block

Relevant Source Paths

  • Block source: apps/v4/registry/bases/base/blocks/preview/
  • Card sub-components: apps/v4/registry/bases/base/blocks/preview/cards/
  • Recursive resolver: packages/shadcn/src/registry/utils.tsrecursivelyResolveFileImports()

Environment

  • shadcn v4 (latest)
  • Tested with npx shadcn add preview

Affected component/components

Preview block

How to reproduce

  1. Create a new project with npx shadcn@latest init --template vite
  2. Run npx shadcn add preview
  3. Observe that files like src/components/index.tsx are created with imports referencing @/components/blocks/preview/cards/...
  4. Those card files do not exist on disk — the component fails to compile

Codesandbox/StackBlitz link

No response

Logs

npx shadcn add preview
✔ Checking registry.
✔ Installing dependencies.
✔ The file separator.tsx already exists. Would you like to overwrite? … no
✔ The file popover.tsx already exists. Would you like to overwrite? … no
✔ The file slider.tsx already exists. Would you like to overwrite? … no
✔ The file tooltip.tsx already exists. Would you like to overwrite? … no
✔ The file alert-dialog.tsx already exists. Would you like to overwrite? … no
✔ The file input-group.tsx already exists. Would you like to overwrite? … no
✔ The file field.tsx already exists. Would you like to overwrite? … no
✔ Created 2 files:
  - src/components/example.tsx
  - src/components/index.tsx
ℹ Skipped 25 files: (files might be identical, use --overwrite to overwrite)
  - src/components/ui/button.tsx
  - src/components/ui/avatar.tsx
  - src/components/ui/badge.tsx
  - src/components/ui/separator.tsx
  - src/components/ui/card.tsx
  - src/components/ui/checkbox.tsx
  - src/components/ui/input.tsx
  - src/components/ui/textarea.tsx
  - src/components/ui/dropdown-menu.tsx
  - src/components/ui/empty.tsx
  - src/components/ui/label.tsx
  - src/components/ui/popover.tsx
  - src/components/ui/radio-group.tsx
  - src/components/ui/select.tsx
  - src/components/ui/slider.tsx
  - src/components/ui/spinner.tsx
  - src/components/ui/switch.tsx
  - src/components/ui/tooltip.tsx
  - src/components/ui/alert-dialog.tsx
  - src/components/ui/sheet.tsx
  - src/components/ui/button-group.tsx
  - src/components/ui/item.tsx
  - src/components/ui/input-group.tsx
  - src/components/ui/field.tsx
  - src/components/ui/combobox.tsx
The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.

 title="app/layout.tsx"
import { TooltipProvider } from "@/components/ui/tooltip"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

System Info

macOS 26.3.1
node v24.14.0
npm 11.9.0
npx 11.9.0

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions