ActiveAnimated components23
@systaliko-ui
Animated components · MIT · data updated 2026-07-28
A beta shadcn/ui registry offering UI components, layout blocks, and utilities built for flexibility and multi-variant scaling. Categories observed include cards (curtain reveal, flip, hover reveal, testimonial, stack), full-screen navigation menus, globes, grid bentos, image players, shaders, slideshows, timelines, spotlight lists, custom cursors, rating stars, and reveal masks. Built with React, Next.js, and Tailwind CSS. Open source under MIT; currently in beta. Use for: projects that need creative, heavily-animated page sections and cards beyond the standard shadcn/ui component set.
3daccessibilityaestheticanimationaudiobackgroundsblocksbuttonscardsdesign-systemeditorhooksmapsmarketingmedianavigation
Install
npx shadcn@latest add https://systaliko-ui.vercel.app/r/registry.jsonHealth
StatusActive
Last commit2 months ago
LicenseMIT
Open issues1
ArchivedNo
Stars23
Components (155)
indexanimated-menucontainer-staggerfull-screen-navigation-menuglobegrid-bentoheaderimage-playershaderslideshowstorytimelinecardcard-curtain-revealcard-flipcard-hover-revealcard-testimonialcards-stackcards-stack-rotatedcheckbox-fieldcustom-cursorpulserating-starsreveal-maskspotlight-listanimated-menu-demoanimated-menu-2-demoanimated-menu-full-screen-democontainer-stagger-democontainer-stagger-2-demofull-screen-navigation-menu-demoglobe-demogrid-bento-demogrid-bento-four-cells-demogrid-bento-three-cells-demoheader-demoimage-player-demoshader-demoshader-hurricane-demoslideshow-demostory-demotimeline-democard-curtain-reveal-democard-flip-democard-hover-reveal-democard-hover-reveal-full-democard-testimonial-democard-testimonial-2-democards-stack-democards-stack-achievements-democards-stack-rotated-democards-stack-rotated-recognitions-democards-stack-full-demohover-preview-democheckbox-field-democustom-cursor-democustom-cursor-2-demorating-stars-demoreveal-mask-demospotlight-list-demo
Components: index, animated-menu, container-stagger, full-screen-navigation-menu, globe, grid-bento, header, image-player, shader, slideshow, story, timeline, card, card-curtain-reveal, card-flip, card-hover-reveal, card-testimonial, cards-stack, cards-stack-rotated, checkbox-field, custom-cursor, pulse, rating-stars, reveal-mask, spotlight-list, animated-menu-demo, animated-menu-2-demo, animated-menu-full-screen-demo, container-stagger-demo, container-stagger-2-demo, full-screen-navigation-menu-demo, globe-demo, grid-bento-demo, grid-bento-four-cells-demo, grid-bento-three-cells-demo, header-demo, image-player-demo, shader-demo, shader-hurricane-demo, slideshow-demo, story-demo, timeline-demo, card-curtain-reveal-demo, card-flip-demo, card-hover-reveal-demo, card-hover-reveal-full-demo, card-testimonial-demo, card-testimonial-2-demo, cards-stack-demo, cards-stack-achievements-demo, cards-stack-rotated-demo, cards-stack-rotated-recognitions-demo, cards-stack-full-demo, hover-preview-demo, checkbox-field-demo, custom-cursor-demo, custom-cursor-2-demo, rating-stars-demo, reveal-mask-demo, spotlight-list-demo, spotlight-list-2-demo, custom-pricing-design-demo, expandable-grid-demo, image-zoom-demo, infinite-scroll-demo, price-demo, pricing-demo, pricing-2-demo, product-carousel-demo, product-carousel-2-demo, product-carousel-3-demo, quantity-demo, toggle-layout-demo, circle-cards-demo, distributed-cards-demo, distributed-cards-2-demo, parallax-demo, scroll-animation-combo-demo, scroll-animation-inset-demo, scroll-animation-inset-x-demo, scroll-animation-inset-y-demo, scroll-animation-radius-demo, scroll-animation-rotate-demo, scroll-animation-rotate-x-demo, scroll-animation-rotate-y-demo, scroll-animation-scale-demo, scroll-animation-translate-x-demo, scroll-autoplay-demo, scroll-reverse-scale-animation-demo, scroll-x-carousel-demo, scroll-x-carousel-reverse-demo, team-demo, wavy-block-demo, wavy-block-y-demo, sliding-number-demo, text-scroll-read-demo, text-stagger-hover-demo, text-stagger-interval-demo, text-stagger-inview-demo, text-stagger-inview-waves-demo, text-vertical-demo, text-wavy-demo, animation-variants-demo, set-stagger-direction-demo, custom-pricing, expandable-grid, image-zoom, infinite-scroll, price, pricing, product-carousel, quantity, toggle-layout, circle-cards, distributed-cards, parallax, scroll-animation, scroll-animation-rotate, scroll-autoplay, scroll-x-carousel, wavy-block, avatar, badge, badge, dialog, drawer, empty, field, input, label, avatar, scroll-area, select, slider, spinner, switch, sliding-number, text-flip, text-scroll-read, text-stagger-hover, text-stagger-interval, text-stagger-inview, text-vertical, text-wavy, word-stagger, animation-variants, custom-pricing-utils, set-stagger-direction, split-text, svg-globe-path, transitions, use-follow-mouse, use-is-scrolled, use-mobile, use-toggle-onscrollPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.