Border Trail - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/border-trail

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { BorderTrail } from "@/components/ui/border-trail"

<div className="relative">
  <BorderTrail />
  Content here
</div>

Examples

Loading State

Border trail with skeleton.

Custom Colors

Custom gradient colors.

Button

Border trail on a button.

API Reference

Prop	Type	Default	Description
`size`	`number`	`60`	Size of the trail element.
`duration`	`number`	`5`	Animation duration in seconds.

Animated Border

Hover to see the trail