Border Glide

Modern UI cards with a moving border and smooth transitions.

Installation

npx shadcn@latest add @scrollxui/border-glide

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.