Displays a beautiful Border Trail.
tailwind.config.jsAdd the following animations to your tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
trail: {
"0%": { "--angle": "0deg" },
"100%": { "--angle": "360deg" },
},
},
animation: {
trail: "trail var(--duration) linear infinite",
},
},
},
}Add the css to your globle.css file:
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
| Prop | Type | Description |
|---|---|---|
| duration | string | The duration of the animation. |
| trailColor | string | Border Trail color. |
| trailSize | string | "sm" | "md" | "lg" |
| contentClassName | string | Additional classes for the Border Trail. |
| children | React.ReactNode | The content of the Border Trail.. |
| className | string | Additional classes for the Border Trail.. |
export function BorderTrail({ className }) {
const { resolvedTheme } = useTheme()
return (
<AnimatedBorderTrail
trailColor={resolvedTheme === "dark" ? "#ff0" : "purple"}
className={cn(
"border border-border bg-gray-100 dark:bg-zinc-500",
className
)}
contentClassName="bg-gray-100 dark:bg-zinc-700"
>
<div className="flex-1 p-3 w-[250px] h-[100px] flex items-center justify-center">
<span>I am a border Trail</span>
</div>
</AnimatedBorderTrail>
)
}