saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Border Trail

Border Trail

Animated border trail effect.

Loading...

Installation

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

Usage

import { BorderTrail } from "@/components/ui/border-trail"
<div className="relative">
  <BorderTrail />
  Content here
</div>

Examples

Loading State

Loading...
Border trail with skeleton.

Custom Colors

Loading...
Custom gradient colors.

Button

Loading...
Border trail on a button.

API Reference

PropTypeDefaultDescription
sizenumber60Size of the trail element.
durationnumber5Animation duration in seconds.

On This Page

  • Installation
  • Usage
  • Examples
  • Loading State
  • Custom Colors
  • Button
  • API Reference

Animated Border

Hover to see the trail

Teal Gradient
Warm Gradient
Purple-Pink