Difficulty Implementing Preline UI Tabs Plugin in Next.js Pages Router

[eraykeskinmac]

Hello Preline UI Team,

I've been exploring the use of Preline UI components within a Next.js project and have come across an issue when trying to implement the Tabs plugin in the Next.js Pages Router. I followed the documentation provided at Preline UI with Next.js, TailwindCSS and particularly focused on the app router example. However, I've encountered some difficulties in getting the Tabs plugin to work as expected.

Issue Description:

https://preline.co/examples/features-navs.html#fn-vertical-tabs-with-overlapping-background I will implement this component and the tabs plugin needs to work but I cannot use this component properly because I cannot run tabs when I use it with nextjs v13. and tailwindcss

Expected Behavior:

I want to use Preline Tabs and I can't implement tabs I can't figure out how to implement it using nextjs and tailwindcss and nextjs 13v pages router I want the preline tabs plugin to work

Environment:

• Next.js version: 13.4.19 (Pages Router)
• Preline UI version: ^2.0.3

I would appreciate any guidance or advice on resolving this issue. Is there an updated method or a different approach I should follow to integrate the Tabs plugin with Next.js's Pages Router? Any help or insights would be greatly appreciated!

Thank you for your time and assistance.

Best regards,

[jahaganiev]

Hey @eraykeskinmac - please provide Stackblitz demo and our team walkthrough if there's an issue from our side.

[hector-munachi]

having the same issue using next 14 and preline and none of the tabs or dropdowns work in my application..

[cloudtechlab1]

The confusion is with ids. Its not clear what is the expected format of the ids.