Skip to content

Use Atlas

Congratulations on creating your first page and successfully printing your first message—that’s a great milestone! 🎉 Let’s move forward and explore Atlas, Statista’s component library.

Atlas provides a collection of ready-to-use components that you can combine to build larger components or entire pages. These components are designed based on the design system developed and continuously refined by our UX and UI teams. By using Atlas, you not only save time but also ensure visual and functional consistency across applications.

The library offers several benefits:

  • Efficiency: No need to reinvent the wheel—leverage pre-defined components that align with Statista’s design guidelines.
  • Accessibility: Components come with built-in accessibility features, improving usability for everyone.
  • Collaboration: Atlas embodies an "open source" mindset within Statista. If you’re building a component that aligns with the design system or could benefit other teams, consider contributing. Together, we can enhance and expand the library.

Atlas empowers engineers to iterate, improve, and enrich Statista’s design system. Let’s make it even better! 🌟

As mentioned earlier, Atlas leverages several libraries to ensure accessibility and a consistent UI across applications. Below is an overview of the key technologies used:

  • Accessibility: React Aria
    • Atlas integrates React Aria to meet high accessibility standards.
    • To understand what React Aria offers, we encourage you to explore their article, Building a Button Part 1: Press Events, which explains the complexities of making a button accessible and consistent across operating systems and browsers.
  • Styling: Tailwind CSS
    • Atlas uses Tailwind CSS to simplify component styling. This integration also allows us to provide a custom theme tailored specifically for Statista applications.
      • You can find the custom theme here: Tailwind Statista Theme.
      • Note: Tailwind utilities such as spacing and colors differ from the default Tailwind documentation because of the custom theme. We recommend installing a Tailwind plugin for your editor to get suggestions for the appropriate helper classes.

By combining React Aria and Tailwind CSS, Atlas ensures a robust, accessible, and visually consistent experience across Statista applications.

📝 Task: Create the header component for the "Why Statista" solution page

Now that you've learned the basics of Atlas, let’s apply your knowledge! Your goal is to build the header component for the newly launched "Why Statista" solution page: https://www.statista.com/solutions/why-statista

why-statista-image

This header may look simple, but it provides a great example of what Atlas is not: a library of fully composed components. Atlas focuses on smaller, reusable building blocks, leaving it up to engineers like you to compose them into more complex components or layouts.

Decompose the design

Your first task is to break down the header into its smaller parts and identify which components from Atlas can be used. This principle is commonly referred to as "Thinking in React"—breaking a design or layout into smaller, manageable pieces.

When building a composed component like this, it’s helpful to slice it into smaller increments. This allows you to focus on each piece individually while maintaining a clear overall structure.

Once you've identified the components, consider the following:

  • What reusable components already exist in Atlas?
  • How can you structure and style the layout using Atlas’ design system?
  • Could any part of your solution become a reusable component for future projects?
    • If so, consider contributing to Atlas. You can find contribution guidelines here: Contributing to Atlas - but not today

Let's go back to the "Why Statista?" header. How many components can you count? Can you find all of them in Atlas?

Solution

Here are the components that make up the header:

  1. RoofTitle
  2. Headline
  3. Paragraph
  4. Link
  5. Grid (layout component)
  6. Container (layout component)

Let's build it

Now it’s time to build the header component for the "Why Statista" page. Use the page you created earlier in the workshop. Simply replace the "Welcome to the Remix..." message with your new component.

Here’s how to proceed:

  • Start Fresh
    • Delete the existing content inside your page component. This will give you a clean slate to work with.
  • Build the Header Component
    • Use Atlas components for the content and structure while combining them with Tailwind classes for layout and spacing.
  • Image Placement
  • Translation Simplification
    • For simplicity, you can hardcode the text inside the component. We’re not focusing on translations today.

Just take your time and have fun!

Note: If you don’t complete the task, don’t worry. Set a timebox for yourself (e.g., 20–30 minutes) to focus on the task and compare your progress with the solution later. It's not urgent to complete it.

Solution

Here’s how your component might look (if it's not exact like this, it's totally fine!):

<div className="w-full bg-background-muted">
  <Container className="w-full lg:py-10">
    <Grid variant="half" gap="small" className="py-10">
      <div>
        <RoofTitle label="Why Statista" renderAs="h1" size="md" />
        <Headline renderAs="h2" size="lg" className="mb-2 break-normal">
          <strong className="font-bold">Drive efficient business growth</strong>{" "}
          with trusted market and consumer data
        </Headline>
        <Paragraph className="mb-4">
          Access data from 40,000 sources, proprietary insights, and AI tools
          all in one platform. Streamline research, react quickly to shifts, and
          align strategies with reliable market and consumer intelligence.
        </Paragraph>
        <div className="mb-8 flex gap-2">
          <Link variant="buttonPrimary" className="justify-center" to="/">
            Sign up
          </Link>
          <Link variant="buttonOutline" className="justify-center" to="/">
            Book a demo
          </Link>
        </div>
      </div>
      <div>
        <img
          src="https://de.statista.com/solutions/images/why-statista-header-de.webp"
          alt=""
          width="600"
          height="338"
        />
      </div>
    </Grid>
  </Container>
</div>

🎉 Well done! You’ve successfully decomposed the UI, utilized Atlas components, and built a professional-looking header component.

Last updated: March 24, 2026 at 16:43
By: Maikel Lammers