Is there an easy way to use another Tailwind Component Library or shadcn?
I tried setting up daisyui with the existing CSS and it messed up everything. I am wondering if there is an easy way to do this. I am okay to even just use something like shadcn/ui where we can copy paste code but it does require some setup - https://ui.shadcn.com/docs/installation/next. Please ignore my inexperience with React/NextJS. I primarily do backend work and this is my first time working with React.
16 Replies
Hi @KC. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, it seems that there have been some difficulties in the Wasp community with setting up shadcn/ui. Some users have reported issues and it appears that the setup process might not be straightforward source (https://discord.com/channels/686873244791210014/1204418933927448657).
However, there is a workaround shared by a community member for using shadcn with Wasp. You can find the details in this gist (https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553). Please note that this is a workaround and might not work in all cases.
As for Tailwind, Wasp does support it. To enable Tailwind in your project, you need to add two config files —
tailwind.config.cjs and postcss.config.cjs — to the root directory. After adding these files, you should restart wasp start to ensure that Wasp picks up the changes and enables Tailwind integration source (https://wasp-lang.dev/docs/project/css-frameworks#tailwind).
If you're having trouble with a specific Tailwind Component Library like daisyui, it might be worth checking if there are any specific setup instructions for that library when used with Tailwind and Wasp.
Remember, it's okay to be new to React/NextJS. The Wasp community is here to help!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @KC, 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?This is solved with the other thread you shared bot! 😄
Good bot 😊
@miho Is there a component library that works well with Wasp?
Wohooo @KC, you just became a Waspeteer level 1!
It looks like Chakra UI was used in the Cover Letter project. Any other recommendations?
I added an issue to add some instrutcions on this to the docs: https://github.com/wasp-lang/wasp/issues/1969 .
NextUI, Chakra, ShadCN and I guess a lot more anothers, but I tried these
@miho which one did you liek the best? All worked well?
NextUI is quite modern and very active 😊
Nice! Thanks for the tips team! I'll keep ya'll posted in the next few months on what we get to build. I'm still testing out setting up somethings with Wasp but it is looking good! I will also be looking at deploying to AWS/Google Cloud sometime next month and would love to help with the documentation if needed.
@miho Could you share a link to the repo where you've used NextUI?
I am specifically looking to see how you setup the provider and then wrapped the layouts
https://github.com/wasp-lang/ask-the-document
I've used the root component https://wasp-lang.dev/docs/project/client-config#root-component
Client Config | Wasp
You can configure the client using the client field inside the app declaration:
Thanks @miho It doesn't look like that Repo is public - Could you please share it with me "Case-E" on Github or make it public when you get the chance?
The docs are detailed enough for me to work through.
I was missing an s at the end
GitHub
GitHub - wasp-lang/ask-the-documents: Ask The Documents (Embeddings...
Ask The Documents (Embeddings / ChatGPT) with Wasp & PG Vector - wasp-lang/ask-the-documents
That would be perfect, looking forward to it!