[Feature] Support Astro framework

[lucafaggianelli]

Hey MagicUI is an amazing library and I think it will couple really well with https://astro.build/ as it's great for making landing pages.

At the moment is possible to use MagicUI + Astro only adding React or Vue (etc.) to Astro, but it would be nice to have a native integration of MagicUI with Astro directly, do you think it's feasible?

[itsarghyadas]

Hey, that's a great suggestion! You can indeed use Magic UI in Astro by adding React to Astro. However, to use it in native mode, we need a similar library that we can replace with Framer Motion. Do you have any ideas on that?

Thanks, Arghya

[lucafaggianelli]

Yeah indeed that's the problem :( No I don't have any idea honestly, I'd say replace framer motion with CSS animations and JS ones where needed.. but yeah that's not a quick solution How did you implement the animations for Vue ?

[nyxb]

Yeah indeed that's the problem :( No I don't have any idea honestly, I'd say replace framer motion with CSS animations and JS ones where needed.. but yeah that's not a quick solution How did you implement the animations for Vue ?

You can use Framer Motion and Tailwind CSS in all frameworks, including React, Next.js, Gatsby, Vue, Angular, Svelte, and Astro.

[dillionverma]

hey! maintainer here

astro should work :)

we just have to update the docs to make it more easily understandable

looking for help here https://github.com/magicuidesign/magicui/issues/201

[lucafaggianelli]

Hey I confirm Astro works but of course you must add React, so this issue was more for having magicui framework agnostic.

The only required step for astro is to mark the components with some client:* directive otherwise Astro won't load JS on the client and so the components wouldn't show correctly

[dillionverma]

going to close this for now as we've added installation docs for astro :)

if anyone has any additional feedback please lmk!