🧩 Plasmo Developers•14mo ago

How to use shadcn-ui stylings in content script?

Hi, just starting out with a new extension and Plasmo seems too good to not give it a try! Since our brands UI is heavily relying on shadcn's styling, we're looking to also utilize it in our planned chrome extension. Sat down and managed to set it up for the popup, however no matter what I'm trying, shadcn components don't render properly using the content script. How do I have to to configure the getStyle API to utilize shadcn's components in the content script? Looking forward to any replies that might help! Best regards 🙂

22 Replies

nithur•14mo ago

Hey, are you installing the shadcn components manually or using CLI? manual is the best approach here because we need to use custom prefix for tailwind classes plasmo- in this case add the prefix to all the classes in the manually imported component hope it helps

DaluxeOP•14mo ago

Hi, thanks for your help! I’m installing components manually using the ~ prefix as recommended by plasmo. All components work in popup, just rendering them in content doesn’t work

DaluxeOP•14mo ago

Fixed it! Just randomly saw that you have to replace :root with :host in shadow tags (https://discord.com/channels/946290204443025438/1049475306811039764/1169899503093026837). That actually works 🙂

Discord

Discord - A New Way to Chat with Friends & Communities

Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.

Arcane•14mo ago

@Daluxe has reached level 1. GG!

nithur•14mo ago

Nice

Aain•14mo ago

hi, I also try to use shadcn-ui in plasmo, and find your solution to replace :root with :host but after that style of shadcn-ui components still not work in content script. @Daluxe Do you know how to solve it, thanks a lot.

nithur•14mo ago

I think it is working, you just need to add a background color to that dropdown component

Aain•14mo ago

I think it is because of shadow root, that tailwind css definition is insert inside shadow root but dropdown is mount outside shadow root's doucment.body, i try to mount it inside shadow root fixed, after mount component such as modal and popup inside shadowroot 😆

nithur•13mo ago

awesome, thanks for letting us kno

Hardy•13mo ago

Hi ,do you mind writing a simple demo on GitHub? I still don't know how to import shadcn and display it in the interface. If it's possible to help, that would be great. He will help me and those who will use Plasma in the future

Alexiaferric•10mo ago

Hi, I have the same issue with the dropdown, @Arvin could you please share a demo on github or more explanations please?

cholebhature7887•10mo ago

@Arvin having same issue can you please share some code

Arcane•10mo ago

@cholebhature7887 has reached level 1. GG!

Paolo•9mo ago

@Arvin can you please provide an example.

Tamir•9mo ago

@here did anyone figure out a fix?

ink•9mo ago

@Arvin @nithur Hello, I have the same problem with the SelectContent component and popover component that display shadcn in contentui. I found that the "SelectContent" appears outside plasmo-csui, which prevents the correct style from being displayed. How did you solve it? Any possible help is greatly appreciated The popover in the popup can be displayed correctly, !image In contentui, the surface element can be displayed correctly, but the floating element popover contained inside cannot be displayed correctly !image

ink•9mo ago

the content.tsx code:

import cssText from "data-text:~style.css"
// i have import

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.bing.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
    element: document.querySelector("#b_context"),
    insertPosition: "afterbegin"
})

const PlasmoCSUI = () => {

    // ……some code
    return (

            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <div className="pb-8 w-full">
                    <span className="text-red-700 text-3xl">
                    AtMyNotion

                    </span>
                        <NotionStatus/>

                        <ATMSpaceSwitcher/>
                        <ATMSwitch
                            id="Advanced-search-mode"
                            label="Search with Filters"
                            onChange={handleSwitchChange}>
                            <ATMPopover
                                tooltipContent={
                                    "Apply advanced filters and sorting on the search page."
                                }>
                                <CircleHelp className="h-4 w-4 text-slate-400"/>
                            </ATMPopover>
                        </ATMSwitch>
                    </div>
                </PersistGate>
            </Provider>
    )
}

export default PlasmoCSUI

import cssText from "data-text:~style.css"
// i have import

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.bing.com/*"]
}

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
    element: document.querySelector("#b_context"),
    insertPosition: "afterbegin"
})

const PlasmoCSUI = () => {

    // ……some code
    return (

            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <div className="pb-8 w-full">
                    <span className="text-red-700 text-3xl">
                    AtMyNotion

                    </span>
                        <NotionStatus/>

                        <ATMSpaceSwitcher/>
                        <ATMSwitch
                            id="Advanced-search-mode"
                            label="Search with Filters"
                            onChange={handleSwitchChange}>
                            <ATMPopover
                                tooltipContent={
                                    "Apply advanced filters and sorting on the search page."
                                }>
                                <CircleHelp className="h-4 w-4 text-slate-400"/>
                            </ATMPopover>
                        </ATMSwitch>
                    </div>
                </PersistGate>
            </Provider>
    )
}

export default PlasmoCSUI

Robz•7mo ago

Also looking for a fix

Arcane•7mo ago

@RL has reached level 2. GG!

Serhii•5mo ago

OK, I think I found how to fix that for dynamic content like sheet or popover. Since shadcn uses radix for that you need to go to radix documentation. The problem is that the dynamic component is not mounted inside of shadow dom, but it's mounted in the body. Here is how you can fix it https://www.radix-ui.com/primitives/docs/components/dialog#custom-portal-container for sheet component.

Dialog – Radix Primitives

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Arcane•5mo ago

@Serhii has reached level 1. GG!

mintedkenny•2mo ago

Hey @Serhii how did you handle the aria-hidden is not contained inside warning? It seems radix is checking to see that the component is rendering inside the body and its not

Gaming

Programming

How to use shadcn-ui stylings in content script?