Issues Integrating Relume Library with Astro: Seeking Solutions | Relume Community

Issues Integrating Relume Library with Astro: Seeking Solutions

Hi everyone 👋 I have a question about using Relume Library in Astro. We are thinking about switching from Webflow to Astro and build the whole website there. I was trying to build the page using Relume's components... but they just don't work. If I use plain HTML + Tailwind it looks okay but looses everything else. If I try to use React, they just don't work. Does anyone have a solution here? 👁️

9 comments

Dan
·
Cc Rob A. Nour
🙏1
Rob A.
·
Hi Patryk, what error are you getting? Have you done the basic setup as described here https://react-docs.relume.io/getting-started/installation
1.
Ensure you installed the packages npm i @relume_io/relume-ui @relume_io/relume-tailwind
2.
Ensure you have tailwind setup correctly for your Astro project
Patryk L.
·
Rob A. Tailwind is working pretty well. What I am trying to achieve is creating the component called Navigation.astro and pasting Relume code. Then I hope it would work without any major changes to the code 😅 Is that possible?
Nour
·
Patryk L. Can you send a screenshot showing the output on your side?
Kamil J.
·
Patryk L.
1.
Add React to Astro: npm run astro add react
2.
Astro React Integration Guide
3.
Create Navigation.tsx in the components folder.
4.
Paste the code for example Navbar 1 from Relume.
5.
Go to index.astro.
6.
Add at the top: import { Navbar1 } from '../components/Navigation';
7.
Use the component: <Navbar1 client:load />
🙌2
Patryk L.
·
Great, thank you 🙌 The only thing that are not working now are button variants. Should I add them somewhere in the code?
Rob A.
·
If you want to use a variant on a Button you need to use the variant prop ie <Button variant="ghost" /> - Is that what you are doing?
Patryk L.
·
I tried adding variant="primary" / ghost / secondary to the line on 2nd screen but it didn't work 🤔 Are these variants related to Tailwind? As I don't have them in the config. Sorry if I ask stupid questions here
Nour
·
Hey Patryk L., please check our docs for the button variants and sizes: https://react-docs.relume.io/elements/button If it’s still not working on your end, there may be something wrong in your codebase. If you can share your code, I’d be happy to take a look.