Relume
Log in

Community forum for knowledge and support

Updated 3 months ago

Using Relume Library in Astro

At a glance

A community member is trying to use the Relume Library in their Astro project, but the Relume components are not working. They have tried using plain HTML with Tailwind, but that loses some functionality. They have also tried using React, but that didn't work either. The community members discuss the setup process, including installing the necessary packages and ensuring Tailwind is configured correctly. They suggest adding React to the Astro project and creating a Navigation.tsx component to use the Relume components. However, the community member is still having issues with the button variants not working as expected. The Relume team suggests checking the documentation for the button variants and sizes, and offers to take a look at the code if the community member can share it.

Useful resources
PPatryk Lasek
·

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? 👁

2
D
R
P
9 comments
DDan

Cc @Rob Austin @Nour

RRob Austin

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

PPatryk Lasek

@Rob Austin 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?

NNour

@Patryk Lasek Can you send a screenshot showing the output on your side?

KKamil Jamróz

@Patryk Lasek

  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>

PPatryk Lasek

Great, thank you 🙌

The only thing that are not working now are button variants. Should I add them somewhere in the code?

RRob Austin

If you want to use a variant on a Button you need to use the variant prop ie <button> - Is that what you are doing?

PPatryk Lasek

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

NNour

Hey @Patryk Lasek, 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.

Add a reply
Sign up and join the conversation on Slack