Docs Docs Templates Templates Changelog Changelog Services Services
Systaliko UITemplates

Templates

Abla Studio TemplateCognify TemplateEnera TemplatePortfolio TemplateEcommerce Product pageVeo Agency Template

Blocks

AI Conversation LoopAnimated MenuFloating ElementsBento GridFull screen navigation menuGlobeHeaderImage PlayerMagnetic Grid newShaderSlideshowStagger AnimationsStoryTimeline

Ecommerce

Custom PricingExpandable Grid updatedImage ZoomInfinite ScrollQuantity configPricePricingProduct CarouselToggle Layout

Scroll Animations

Circle CardsDistributed CardsParallaxScroll AnimationsScroll AutoplayScroll Reverse AnimationScroll Rotation AnimationScroll X Carousel updatedVideo SectionWavy Block

Cards

3D Flip CardCurtain Reveal CardHover Preview CardHover Reveal Details CardRotated Cards StackSticky Cards StackTestimonial Card

Components

Animated BorderCheckbox FieldCursor TrailCustom CursorRating StarsReveal MaskSpotlight List

Text

Sliding NumberText Scroll ReadText Stagger HoverText Stagger IntervalText Stagger InviewText VerticalWavy Text

Utils

Animation VariantsClip Path Animation VariantsStagger Direction

Animated Border

Create an animated border that moves infinitely around the element.

Open in 21st dev
Loading...

Installation

Usage

<div className="rounded relative bg-card size-60  overflow-hidden">
  <AnimatedBorder
    color="#DE6449"
    className="absolute inset-0  border border-[#DE6449]/20"
  />
</div>

Props

PropTypeDefault
color?
string
var(--primary)

Testimonial Card

Testimonial card with rating, block quote, and author's informations.

Checkbox Field

Checkbox field with label.

On this page

InstallationUsageProps