Docs
Border Trail

Border Trail

Displays a beautiful Border Trail.

I am a border Trail

Installation

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
       keyframes: {
            trail: {
            "0%": { "--angle": "0deg" },
            "100%": { "--angle": "360deg" },
            },
        },
       animation: {
         trail: "trail var(--duration) linear infinite",
      },
    },
  },
}

Update CSS

Add the css to your globle.css file:

globle.css
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Border Trail code into your project.

API Reference

Props

PropTypeDescription
durationstringThe duration of the animation.
trailColorstringBorder Trail color.
trailSizestring"sm" | "md" | "lg"
contentClassNamestringAdditional classes for the Border Trail.
childrenReact.ReactNodeThe content of the Border Trail..
classNamestringAdditional classes for the Border Trail..

Usage

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>
  )
}
Wallet CardBuouNext Features