React component from Figma export not rendering properly

Other Questions Figma
1

I’m having trouble displaying a React component that I exported from Figma using Anima. This component is meant to show a payment confirmation screen, but it doesn’t show up in my app.

Here’s my component code:

import React from "react";

function PaymentConfirmed() {
  return (
    <Container
      circle1="/images/circle-bg-1.svg"
      circle2="/images/circle-bg-2.svg"
      checkIcon="/images/check-mark.svg"
      title="Success!"
      message="Payment completed successfully"
      buttonText="Continue"
    />
  );
}

export default PaymentConfirmed;

function Container(props) {
  const { circle1, circle2, checkIcon, title, message, buttonText } = props;

  return (
    <div className="container">
      <div className="background-wrapper">
        <img className="circle-1" src={circle1} />
        <img className="circle-2" src={circle2} />
        <div className="icon-wrapper">
          <img className="check-icon" src={checkIcon} />
        </div>
        <h1 className="title">{title}</h1>
      </div>
      <div className="message">{message}</div>
      <div className="button-wrapper">
        <ButtonElement />
        <div className="button-text">{buttonText}</div>
      </div>
    </div>
  );
}

function ButtonElement() {
  return <div className="button-bg"></div>;
}

When I try to use this in my main App component, nothing appears:

import React from 'react';
import './confirmation.css';
import PaymentConfirmed from './PaymentConfirmed';

const App = () => {
  return (
    <div>
      <PaymentConfirmed />
    </div>
  );
}

export default App;

What might be causing this problem and how can I fix it?

2

First, check your console for JavaScript errors. Your component structure looks problematic - you’re defining the Container function after exporting PaymentConfirmed, which creates hoisting issues. Move the Container function above the PaymentConfirmed component. Also, verify your confirmation.css file exists in the right location and has the styles you need. I’ve run into this before where the CSS file was missing or not linked properly, so components render but stay invisible. Another thing to check: some CSS classes might have position: absolute without proper positioning, pushing elements outside the viewport.

3

I’ve encountered this same issue with Figma exports through Anima. It’s often due to missing CSS that controls the layout. Your component structure looks fine, but if confirmation.css lacks the necessary styles, your elements might not display correctly or could have no dimensions. Ensure you have styles defined for .container, .background-wrapper, and the other classes. Also, double-check the SVG paths - if images are broken, they will leave blank spaces. Try adding temporary basic CSS dimensions to see if anything appears. Additionally, verify that your parent components have appropriate sizing, as a parent with zero height can disrupt the entire layout.

4

hit f12 and inspect element first - see if the component’s there but hidden by css. anima exports mess up image paths all the time. try full urls or dump your images in the public folder instead of /images/. also your buttontext isn’t clickable right now.