Shine Border

PreviewCode

Login

Enter your credentials to access your account

Email

Password

Sign In

@/demos/ShineBorderDemo.tsx

import { Button } from '@/components/ui/button'
import { ShineBorder } from '@/registry/magicui/shine-border'

const inputClass = 'h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none'

export function ShineBorderDemo() {
  return (
    <div class="
      relative w-full max-w-87.5 overflow-hidden rounded-xl border bg-card
      text-card-foreground shadow-sm
    "
    >
      <ShineBorder shineColor={['#A07CFE', '#FE8FB5', '#FFBE7B']} />
      <div class="space-y-1.5 p-6 pb-4">
        <h3 class="text-lg font-semibold tracking-tight">Login</h3>
        <p class="text-sm text-muted-foreground">
          Enter your credentials to access your account
        </p>
      </div>
      <form>
        <div class="grid gap-4 p-6 pt-0">
          <div class="grid gap-2">
            <label class="text-sm leading-none font-medium" for="email">Email</label>
            <input id="email" type="email" placeholder="name@example.com" class={inputClass} />
          </div>
          <div class="grid gap-2">
            <label class="text-sm leading-none font-medium" for="password">Password</label>
            <input id="password" type="password" class={inputClass} />
          </div>
        </div>
      </form>
      <div class="p-6 pt-0">
        <Button class="w-full">Sign In</Button>
      </div>
    </div>
  )
}

Installation

pnpm

bash pnpm dlx shadcn@latest add @magicui-solid/shine-border

bun

bash bunx shadcn@latest add @magicui-solid/shine-border

yarn

bash yarn dlx shadcn@latest add @magicui-solid/shine-border

npm

bash npx shadcn@latest add @magicui-solid/shine-border

Examples

Monotone

PreviewCode

Login

Enter your credentials to access your account

Email

Password

Sign In

@/demos/ShineBorderDemo2.tsx

import { Button } from '@/components/ui/button'
import { createIsDark } from '@/demos/shared/theme'
import { ShineBorder } from '@/registry/magicui/shine-border'

const inputClass = 'h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none'

export function ShineBorderDemo2() {
  const isDark = createIsDark()
  return (
    <div class="
      relative overflow-hidden rounded-xl border bg-card text-card-foreground
      shadow-sm
    "
    >
      <ShineBorder shineColor={isDark() ? 'white' : 'black'} />
      <div class="space-y-1.5 p-6 pb-4">
        <h3 class="text-lg font-semibold tracking-tight">Login</h3>
        <p class="text-sm text-muted-foreground">
          Enter your credentials to access your account
        </p>
      </div>
      <form>
        <div class="grid gap-4 p-6 pt-0">
          <div class="grid gap-2">
            <label class="text-sm leading-none font-medium" for="email">Email</label>
            <input id="email" type="email" placeholder="name@example.com" class={inputClass} />
          </div>
          <div class="grid gap-2">
            <label class="text-sm leading-none font-medium" for="password">Password</label>
            <input id="password" type="password" class={inputClass} />
          </div>
        </div>
      </form>
      <div class="p-6 pt-0">
        <Button class="w-full">Sign In</Button>
      </div>
    </div>
  )
}

Import

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

Usage

<div class="relative h-[500px] w-full overflow-hidden">
  <ShineBorder />
</div>

Props

Prop	Type	Default	Description
class	string	-	The class name to be applied to the component.
style	CSSProperties	-	Additional styles to be applied to the component.
duration	number	14	Defines the animation duration to be applied on the shining border.
shineColor	string/string[]	"#000000"	Color of the border, can be a single color or an array of colors.
borderWidth	number	1	Width of the border in pixels.

Original:

magicui.design/docs/components/shine-border