[Need Help] Integration of MagicUI through component failed

[zhongwencool]

I want to add a custom component from https://magicui.design/docs/components/border-beam
but failed. the debug repo is https://github.com/zhongwencool/magicui-rspress

1. Install tailwind css from https://tailwindcss.com/docs/installation/using-postcss
2. Install magicui component via https://magicui.design/docs/components/border-beam#installation

npx magicui-cli init
npx magicui-cli add border-beam

and update tailwind.config.js

3. Copy the component&lib to theme/* manually
4. Add component into hello.mdx

import { BorderBeam } from '@theme/components/magicui/border-beam';


<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
      <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
        Border Beam Demo
      </span>
<BorderBeam size={250} duration={12} delay={9} />
</div>

import { Badge } from '@theme';

<Badge text="ReadOnly" type="info" />

But it didn't work as expected.

I hope someone can help me take a look.
I've been debugging for a long time and still don't know where I went wrong（ I'm a beginner and not familiar with in front-end development...）.
Thank you very much.🙏

[SoonIter]

You didn't import the style file
https://rspress.dev/guide/basic/custom-page#custom-styles

you can do like below in rspress.config.ts

export default defineConfig({
  globalStyles: path.join(__dirname, 'app/globals.css'),
});

or

export default defineConfig({
 builderConfig: {
    source: {
      preEntry: ['./app/globals.css'],
    }
  },
});

[zhongwencool]

Thanks, It work! You are my hero!