🧩 Plasmo Developers•8mo 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 🙂

19 Replies

nithur•8mo 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

Daluxe•8mo 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

Daluxe•8mo 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•8mo ago

@Daluxe has reached level 1. GG!

nithur•8mo ago

Nice

Aain•7mo 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•7mo ago

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

Aain•7mo 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•7mo ago

awesome, thanks for letting us kno

Hardy•7mo 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•3mo ago

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

cholebhature7887•3mo ago

@Arvin having same issue can you please share some code

Arcane•3mo ago

@cholebhature7887 has reached level 1. GG!

Paolo•2mo ago

@Arvin can you please provide an example.

Tamir•2mo ago

@here did anyone figure out a fix?

ink•2mo 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•2mo 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•5d ago

Also looking for a fix

Arcane•5d ago

@RL has reached level 2. GG!

Gaming

Programming

How to use shadcn-ui stylings in content script?