Upgrade to Pro

Unlimited projects and priority support.

Billed yearly. Cancel anytime.

Installation

pnpm dlx kliping@latest add border-beam

Usage

Taruh sebagai anak terakhir elemen yang ingin dikelilingi. Induknya harus relative, overflow-hidden, dan punya rounded-* — sinarnya mewarisi radius itu. Animasinya murni CSS (offset-path), tanpa JavaScript per frame.

<script setup lang="ts">
import { BorderBeam } from '@/components/ui/border-beam'
</script>

<template>
  <Card class="relative overflow-hidden">
    …
    <BorderBeam :duration="8" :size="100" />
  </Card>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
Files	components/ui/border-beam/border-beam.vue components/ui/border-beam/index.ts

API Reference

Prop	Type	Default	Description
size?	number	50	The beam length, in pixels.
duration?	number	6	The duration of one full loop, in seconds.
delay?	number	0	Delays the start, in seconds.
colorFrom?	string	"#ffaa40"	The color of the beam's head.
colorTo?	string	"#9c40ff"	The color of the beam's tail.
reverse?	boolean	false	Reverses the direction of travel.
initialOffset?	number	0	The beam's starting position along its path, 0–100.
borderWidth?	number	1	The border width, in pixels.

Data attribute	Value
[data-slot]	"border-beam"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border.

Variabel khusus komponen ini — bisa ditimpa lewat style atau CSS Anda:

Variable	Value
--border-beam-width	dihitung saat runtime
--color-from	prop colorFrom
--color-to	prop colorTo

Credits

Berasal dari Magic UI (MIT, Copyright (c) Magic UI). Rantai lengkapnya di Credits.