A dynamic link component with animated border effects that appear on hover. Perfect for creating elegant, interactive navigation elements with customizable border positions, colors, and animation directions.
1"use client";
2
3import BorderHoverLink from "@/components/component-x/border-hover-link";
4
5export function BorderHoverLinkPreview() {
6return (
7 <div className="flex items-center justify-center w-full h-full">
8 <BorderHoverLink
9 borderPosition="bottom"
10 borderColor="hsl(var(--primary))"
11 duration={700}
12 className="bg-background px-3 py-1 cursor-pointer rounded overflow-hidden"
13 >
14 Hover over me
15 </BorderHoverLink>
16 </div>
17);
18}
19Run the following command to add the component:
npx cx add border-hover-link1"use client";
2
3import BorderHoverLink, {
4BorderPosition,
5} from "@/components/component-x/border-hover-link";
6
7function capitalizeFirstLetter(str: string): string {
8if (!str) return str;
9return str.charAt(0).toUpperCase() + str.slice(1);
10}
11
12export function BorderHoverPositions() {
13const positions: BorderPosition[] = ["top", "bottom", "left", "right"];
14
15return (
16 <div className="w-full h-full overflow-y-auto flex items-center justify-center">
17 <div className="flex flex-col gap-4">
18 {positions.map((pos) => (
19 <BorderHoverLink
20 key={pos}
21 borderPosition={pos}
22 borderColor="hsl(var(--primary))"
23 duration={700}
24 className="bg-background px-3 py-1 cursor-pointer rounded overflow-hidden w-full text-center"
25 >
26 Hover me{" "}
27 <span className="text-muted-foreground text-sm">
28 {capitalizeFirstLetter(pos)}
29 </span>
30 </BorderHoverLink>
31 ))}
32 </div>
33 </div>
34);
35}
36Hover me left to right
Hover me right to left
1"use client";
2
3import BorderHoverLink, {
4BorderHoverAnimationDirection,
5} from "@/components/component-x/border-hover-link";
6
7interface BorderItem {
8label: string;
9value: BorderHoverAnimationDirection;
10}
11
12export function BorderHoverDirections() {
13const directions: BorderItem[] = [
14 { label: "Left to Right", value: "ltr" },
15 { label: "Right to Left", value: "rtl" },
16];
17
18return (
19 <div className="w-full h-full overflow-y-auto flex items-center justify-center">
20 <div className="flex flex-col gap-4">
21 {directions.map((dir) => (
22 <BorderHoverLink
23 key={dir.label}
24 borderPosition="bottom"
25 borderColor="hsl(var(--primary))"
26 animationDirection={dir.value}
27 duration={700}
28 className="bg-background px-3 py-1 cursor-pointer rounded overflow-hidden text-center w-full"
29 >
30 <p className="text-foreground">
31 Hover me{" "}
32 <span className="text-sm text-muted-foreground">
33 {dir.value === "ltr" ? "left to right" : "right to left"}
34 </span>
35 </p>
36 </BorderHoverLink>
37 ))}
38 </div>
39 </div>
40);
41}
42Hover me Fast
Hover me Normal
Hover me Slow
1"use client";
2
3import BorderHoverLink from "@/components/component-x/border-hover-link";
4
5export function BorderHoverDurations() {
6const durations = [
7 { label: "Fast", value: 300 },
8 { label: "Normal", value: 700 },
9 { label: "Slow", value: 1200 },
10];
11
12return (
13 <div className="w-full h-full overflow-y-auto flex items-center justify-center">
14 <div className="flex flex-col gap-4">
15 {durations.map(({ label, value }) => (
16 <BorderHoverLink
17 key={label}
18 borderPosition="bottom"
19 borderColor="hsl(var(--primary))"
20 duration={value}
21 className="bg-background px-3 py-1 cursor-pointer rounded overflow-hidden text-center"
22 >
23 <p className="text-foreground">
24 Hover me{" "}
25 <span className="text-sm text-muted-foreground">{label}</span>
26 </p>
27 </BorderHoverLink>
28 ))}
29 </div>
30 </div>
31);
32}
33Hover me Primary
Hover me Muted
Hover me Success
Hover me Warning
1"use client";
2
3import BorderHoverLink from "@/components/component-x/border-hover-link";
4
5export function BorderHoverColors() {
6const colors = [
7 { label: 'Primary', value: 'hsl(var(--primary))' },
8 { label: 'Muted', value: 'hsl(var(--muted-foreground))' },
9 { label: 'Success', value: 'hsl(142, 71%, 45%)' },
10 { label: 'Warning', value: 'hsl(38, 92%, 50%)' },
11];
12
13return (
14 <div className="w-full h-full overflow-y-auto flex items-center justify-center">
15 <div className="flex flex-col gap-4 w-fit">
16 {colors.map(({ label, value }) => (
17 <BorderHoverLink
18 key={label}
19 borderPosition="bottom"
20 borderColor={value}
21 duration={700}
22 className="bg-background px-3 py-1 cursor-pointer rounded overflow-hidden text-center"
23 >
24 <p className="text-foreground ">
25 Hover me{" "}
26 <span style={{ color: value }}>
27 {label}
28 </span>
29 </p>
30 </BorderHoverLink>
31 ))}
32 </div>
33 </div>
34);
35}
36