Why does shadcn components suddenly depend on "npm i shadcn"

[nova9]

<Switch/> component doesn't work without @import "shadcn/tailwind.css";. Manual installation doesn't mention that we need to add following to index.css

It’s unusual for shadcn to offload logic to an internal npm package. Is this an intentional change in philosophy, or an oversight?

@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
  }

  @keyframes accordion-up {
    from {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
    to {
      height: 0;
    }
  }
}

/* Custom variants */
@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}

@custom-variant data-closed {
  &:where([data-state="closed"]),
  &:where([data-closed]:not([data-closed="false"])) {
    @slot;
  }
}

@custom-variant data-checked {
  &:where([data-state="checked"]),
  &:where([data-checked]:not([data-checked="false"])) {
    @slot;
  }
}

@custom-variant data-unchecked {
  &:where([data-state="unchecked"]),
  &:where([data-unchecked]:not([data-unchecked="false"])) {
    @slot;
  }
}

@custom-variant data-selected {
  &:where([data-selected="true"]) {
    @slot;
  }
}

@custom-variant data-disabled {
  &:where([data-disabled="true"]),
  &:where([data-disabled]:not([data-disabled="false"])) {
    @slot;
  }
}

@custom-variant data-active {
  &:where([data-state="active"]),
  &:where([data-active]:not([data-active="false"])) {
    @slot;
  }
}

@custom-variant data-horizontal {
  &:where([data-orientation="horizontal"]) {
    @slot;
  }
}

@custom-variant data-vertical {
  &:where([data-orientation="vertical"]) {
    @slot;
  }
}

@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

[shafisma]

Shadcn/ui is not a normal component package.
It provides the actual component source code directly into your project so you can fully own and customize it.

The new npm package called "shadcn" is only a CLI tool.
It helps automate adding components, installing required dependencies, and configuring Tailwind.

Because of this setup, the CLI may insert extra CSS imports like:
@import "shadcn/tailwind.css";
This file includes shared utilities and animations needed for some components.

That is why the Switch component did not work until that CSS was included.

This change is intentional and not an oversight.
The components still do not rely on a runtime package, only the tooling has changed.

[nova9]

Thank you for the reply @shafisma. @import "shadcn/tailwind.css"; does not get added automatically when running npx shadcn@latest add switch.

It's only being added when running npx shadcn@latest create. Which means Manual Installation has to mention to install shadcn using npm I shadcn and import the css file using @import "shadcn/tailwind.css";

[shafisma]

So, This now behaves like a documentation gap, not a philosophy shift.