Border Glide

Modern UI cards with a moving border and smooth transitions.

Isabelle Carlos

@isabellecarlos

"ScrollX UI has completely transformed how I build interfaces."

Installation

npx shadcn@latest add https://scrollxui.dev/registry/border-glide.json

Usage

import { 
  BorderGlide, 
  BorderGlideCard, 
  BorderGlideContent, 
  BorderGlideHeader, 
  BorderGlideFooter, 
  BorderGlideTitle, 
  BorderGlideDescription 
} from "@/components/ui/border-glide"

<BorderGlide>
  <BorderGlideCard>
    <BorderGlideContent>
      <BorderGlideHeader>
        <BorderGlideTitle>Title One</BorderGlideTitle>
        <BorderGlideDescription>Description text</BorderGlideDescription>
      </BorderGlideHeader>
      <BorderGlideFooter>Footer content</BorderGlideFooter>
    </BorderGlideContent>
  </BorderGlideCard>
</BorderGlide>

API Reference

Border Glide

Modern UI cards with a moving border and smooth transitions.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	Content to be rendered inside BorderGlide or its subcomponents.
`className`	string	`-`	Additional Tailwind CSS classes to style the component container.
`autoPlayInterval`	number	`5000`	Time in ms before automatically sliding to the next card. Set 0 to disable autoplay.
`borderDuration`	number	`3000`	Duration in ms for the moving border animation to complete one cycle.
`borderColor`	string	`#3b82f6`	Accepts Tailwind color hex, CSS color, or gradient.
`borderWidth`	string	`6rem`	Width of the moving border element.
`borderHeight`	string	`6rem`	Height of the moving border element.
`borderOpacity`	number	`0.8`	Opacity of the animated border.