Border Beam

Installation and usage

The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.

01 — Set up your project

First component? Initialize shadcn once.

pnpm dlx shadcn@latest init

02 — Install the component

pnpm dlx shadcn@latest add https://podie.dev/r/magicui--border-beam.json

03 — Add it to your interface

Import the component from the path created by the installer.

"use client";
import { BorderBeam } from '@/components/magicui/border-beam';

export default function Example() {
  return (
    <div className="relative overflow-hidden rounded-xl border p-8">
  Your content
  <BorderBeam size={100} duration={8} />
</div>
  );
}

Dependencies and distribution

motion The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.

By Magic UI · MIT license. Original component source and license included.