[bug]: Issue with Tabs and Switch component inside an Astro Component

[shashankbhat2]

Describe the bug

Currently when using UI elements such as a Switch in Astro, one has to specify it as client:visible to work. Otherwise its not working at all. Also using Tabs gives TabsContent must be used within Tabs though I am using it within Tabs context.

astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
  site: <your_url>,
  integrations: [tailwind({
    applyBaseStyles: false,
  }), react()]
});

tsconfig.json

{
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]

    }

  }
}

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.mjs",
    "css": "./src/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Affected component/components

Switch, Tabs

How to reproduce

1. Install Tabs component with the default config for tsconfig and astro configuration.
2. Use the Switch component without giving the client:visible prop to it inside an Astro component. It will be unresponsive.
3. Use the Tabs component inside an Astro component, the below error will occur:

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

OS: Windows 11
Browser: Chrome

Before submitting

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

[seunggs]

I have the same problem

[georgzoeller]

Still happening

[ramiro-l]

I have the same problem

[hhsl]

I got the Tabs working with client:visible and a workaround for Accordions described in this issue https://github.com/AREA44/astro-shadcn-ui-template/issues/66

So basically wrap shadcn Tabs in another Tabs component. So Tabs inside of Tabs of Tabs ;). Then your new Tabs Component could be used with client:visible. And if you need dynamic tab content, just pass your data with props.

Not sure if this is a stable solution though?