How to put "use client" on mdx file?

[ervinpiol]

I am creating a design system I want to put the components but I don't know how to fix the "use client"

[fuma-nama]

Why? You can add the use client directive to your components and use them in MDX files.

[SySagar]

@fuma-nama but still wewould require to putuse client in the parent component which are server by default. In my case too, although I added 'use client' in my components still it throws error that parents are not client component.

[fuma-nama]

Hmm can't get your point, could you elaborate a bit more?

[SySagar]

ok so assume I have a custom button , a client component. I am using monorepo so I imported it from my ui libray into docs files. I directly put it in the mdx with proper import. The page.tsx of docs is by default a serve componet right. But componenet is clinet, hence it throws error that parent is server and cannot put client.

Although I beleive it should work but still it shows this error. Note that I am using vite to bundle it up and then use it which is not taking use client into consideration ig.

[fuma-nama]

Why would you use Vite? If you are using Content Collections, you should pass components to the MDX component in page.tsx. Fumadocs MDX supports this natively

[SySagar]

no what I am saying is that I have a turborepo with directories: apps/ui and apps/docs(fuma-docs). Bacailly I am using a bundled version of my ui libray in the docs. However in bundle there is no use client directive which throws an error in the docs as it is a server compoenet. and no use client directive have been found.

Now I imported it into index.ts suppsoe there I am putting 'use cleint' directive on top . However if you see the video below you can see how the ui is getting distorted. So I wanted to ask any fix to that?

[SySagar]

Ok So few realisations. When using bundlers the use client isn't getting used in my bundle file due to which it was still showing me that server componenet.

https://www.loom.com/share/61a961d31a944afd95210791cd549ebd?sid=6d1f91c6-9f01-4cdb-8027-3a19fd562a65

here I have used a technie wher I am exporting it first to a file and then using use client directive above it this way it works but for osme reason the ui is distorted. Can you help please?

[SySagar]

For some reason, I am unable to handle this style clash. Is there any other way?

[fuma-nama]

You need to provide a reproduction

[SySagar]

hey @fuma-nama , i was able to solve this fianlly. however the only problem is that I have to manually add a lot of those tailwind prefix which is too much. Is there any easy way to auto the prefix?

[fuma-nama]

Just do it as you want.

I don't have any information about your component library and your Tailwind CSS design system, like how it is built? What configurations have you made? Which parts are conflicting with Fumadocs UI?

It's up to you to customise the styles, I don't have opinions on it.

[SySagar]

hi, just wanted to say everything works fine now. Just had to scope my designs and no conflcits. Again thanks for help ! :)