Docs
Border Trail

Border Trail

Displays a beautiful Border Trail.

Loading...

Usage

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.

Fold CardText Drop