Shadcn UI in Astro!

[@digitalguy4242]

I am really happy, you're adding react components, i would love to see more videos on react

[@nickwoodward819]

didn't populate my global.css, but did partially break my tailwind config, presumably because I've now got a config.tailwind.mjs and .js file

[@kellingtoncrivelaro3929]

Don't we lose the benefit of low javascript pages using this component library with react in an astro project? I would rather to create a react project if I really want to use shadcn ui

[@shadowstack]

yes thats true, I just wanted to share the process if someone would want to add React as an integration. One of the key benefits with Astro is making projects as simple or robust as they need to be. You can also keep using Astro as Astro after adding the integration, so if you want one portion of the site to use React you can have the rest as .astro pages and have a simple JS free workflow

[@kellingtoncrivelaro3929]

@@shadowstack thanks for the answer

[@pedromigacz]

@@kellingtoncrivelaro3929 If you use the uninteractive components, and don't ask astro to bundle the respective react javascript, it render the html/css only! (in example, Cards, Buttons and Inputs)

[@nickwoodward819]

sure, but shadcn components tend to be interactive anyway, no?

[@mroxy01]

and you have now 2 tailwind.config.js & .mjs. Maybe that caused issues too?

[@nickwoodward819]

same. and you can't remove shadcn easily. crap DX tbh.

[@Pratibhachoudhary-y8q]

It's not working

[@codernerd7076]

But how to do Auth in Astro 😢

[@shadowstack]

I can try this! I’ve never done auth with Astro so might be a few weeks to record a video

[@TheBuddilla]

@@shadowstack lucia-auth seems like a simpler option for astro. Also it easily allows user/password auth.

[@shadowstack]

@@TheBuddilla nice ill check it out

[@ZeR0ByTe]

The problem with your CSS was you didn't add the correct path: Should be like this: Where is your global CSS file? › › ./src/styles/globals.css

[@shadowstack]

Thank you, realized what happened after I recorded the video and updated the video description. Thanks for watching

[@nickwoodward819]

Did this and it still didn't populate the global.css file