Programatic Usage of Nextra Components (<Steps>)

[eiiot]

I want to programmatically fill the steps page with headings depending on the user. Take this example:

const list = ["Eat", "Sleep", "Repeat"];

<Steps>
### Live Life
// something here to get the list as headings?
</Steps>

I want to achieve this result:

<Steps>
### Live Life
### Eat
### Sleep
### Repeat
</Steps>

Is there some way to do this using SSR & the examples in the Nextra docs? Do I have to modify the Nextra component somehow? The best idea I can think of is to use the source components in the theme nextra/nextra-theme-docs/mdx-components but they aren't exported, as far as I can tell.

[mrvectopus]

Try this component (rename what you need)

NameList

import React from "react";

const namelist = ["John", "Alex", "Thomas"];

const NameList = () => {
  return (
    <>
      {namelist.map((name, index) => (
        <h3
          key={index}
          class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl"
        >
          {name}
          <a
            href={`#${name}`}
            id={name}
            class="subheading-anchor"
            aria-label="Permalink for this section"
          ></a>
        </h3>
      ))}
    </>
  );
};

export default NameList;

This code on page

import NameList from 'your_folder/components/namelist'

<Steps>
<NameList />
</Steps>

Result

[eiiot]

I was considering this, but it still seems like there should be a native option, either using the components from the theme, or generating the markdown itself. The problem with this approach is that if the theme updates, the <div>s won't follow, I don't think?