Shine Border

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--shine-border.json

03 — Add it to your interface

Import the component from the path created by the installer.

"use client";
import { ShineBorder } from '@/components/magicui/shine-border';

export default function Example() {
  return (
    <div className="relative rounded-xl p-8">
  <ShineBorder shineColor={["#777", "#eee", "#777"]} />
  Your content
</div>
  );
}

Dependencies and distribution

No additional npm dependencies are declared. 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.