Does wasp work with shadcn
10 Replies
Hi @abhinav3295. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, it is possible to use shadcn with Wasp, although it might require some manual interventions. A community member has shared a gist (https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553) on how to use shadcn with Wasp.
However, if you're encountering errors, it would be helpful to know more details about the issues you're facing. Here are some questions that might help in troubleshooting:
- What did you try to do?
- At which step does it fail?
- Which version of Wasp are you using? You can check this by running
wasp version in your terminal.
- What kind of app are you running? Open SaaS? Something generated with Mage?
If you've followed the steps in the gist and are still encountering issues, try restarting your computer. This has helped some users resolve their issues.
If you're still having trouble, I recommend reaching out to the Wasp community on their Discord server (https://discord.com/channels/686873244791210014/1223573142199341129) for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @abhinav3295, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Open SaaS
Free, open-source SaaS boilerplate starter for React & NodeJS.
Gist
Using ShadCN with Wasp 0.12+
Using ShadCN with Wasp 0.12+. GitHub Gist: instantly share code, notes, and snippets.
Wohooo @abhinav3295, you just became a Waspeteer level 2!
But I keep running into:
Any suggestions?
Turns out I was using the
saas template, so I had to replace the line
with
Even then the CSS is all broken, here is the repository:
https://github.com/abhinav3295/wasp-demoEven then the CSS is all brokenIs the existing OpenSaaS CSS broken or just the shadcn CSS? For me the instructions still work perfectly, the broken CSS you are mentioning must be related to the existing OpenSaaS styling? This is expected because the ShadCN CLI overrides the existing
Main.css file. What you can do is:
- backup the Main.css before running shadcn init and then add the styles from the backup back in
- or execute the shadcn init on a separate shadcn.css file and then import it alongside Main.css file
I'll update the instructions to mention this overriding happneing.
The tailwind.config.cjs is also overwritten and you need to add the custom properties that Open SaaS had setup from before. So this is a Tailwind + ShadCN issue, a nothing Wasp specific.
I've added all the custom properties from before e.g. colors, boxShadow, keyframes from the Open SaaS template and it worked.
Saw the update to the gist, will try it out
@miho Can you share your patch for tailwind.cjs
I don't have it at hand any more, you can just compare the two files and copy what's missing to the new one from the old one 😊 e.g. add missing colors or animations etc.
Nice! I'm glad it worked out and thanks for a link to the commit, it'll also help others looking at this 🙂