Border Beam React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import BorderBeam from "./BorderBeam";

export default function Example() {
  return (
    <BorderBeam
      children={"Border Beam"}
      color={"#ddd3ff"}
      secondaryColor={"#7864e1"}
      duration={6}
      borderWidth={1}
      borderRadius={16}
    />
  );
}

Using Border Beam

Wrap the content you want to outline in children. Match borderRadius to the inner surface so the moving border follows its corners.

Use a longer duration for a quiet highlight. The border is decorative, so important states should still be communicated in the content.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Your content. No demo content is rendered by default.
color	string	No	"#b5f5d1"	Beam color
secondaryColor	string	No	"#7c83ff"	Trail color
duration	number	No	6	Duration
borderWidth	number	No	1	Border width
borderRadius	number	No	16	Content supplied by your application.
className	string	No	""	Additional CSS class names, merged with base component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.