---
name: "@systaliko-ui"
slug: "systaliko-ui"
description: "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."
category: "Animated components"
tags: ["3d", "accessibility", "aesthetic", "animation", "audio", "backgrounds", "blocks", "buttons", "cards", "design-system", "editor", "hooks", "maps", "marketing", "media", "navigation"]
framework: "react"
license: "MIT"
author: "YoucefBnm"
website: "https://systaliko-ui.vercel.app"
github: "https://github.com/YoucefBnm/systaliko-ui"
registry: "https://systaliko-ui.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 23
component_count: 155
generated_at: "2026-07-28T08:59:05.895Z"
---

# @systaliko-ui

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.

## Links

- Website: https://systaliko-ui.vercel.app
- GitHub: https://github.com/YoucefBnm/systaliko-ui
- Registry JSON: https://systaliko-ui.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/systaliko-ui
- This file: https://sh4dcn.vercel.app/md/systaliko-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://systaliko-ui.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://systaliko-ui.vercel.app/r/registry.json
bunx shadcn@latest add https://systaliko-ui.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/YoucefBnm/systaliko-ui.git
# fetch the raw registry index
curl -s https://systaliko-ui.vercel.app/r/registry.json
```

## Components (155)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/index.json` |
| animated-menu | registry:block | Animated menu, with orchestrated children animation, fully customizable. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/animated-menu.json` |
| container-stagger | registry:block | Animated Block with orchestrated stagger animations, for your motion components, the animations are triggered by view. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/container-stagger.json` |
| full-screen-navigation-menu | registry:block | Transforming Shadcn navigation menu into a full screen menu. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/full-screen-navigation-menu.json` |
| globe | registry:block | Globe map with optional map pins. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/globe.json` |
| grid-bento | registry:block | Bento Grid, layout with multiple variants and displays. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/grid-bento.json` |
| header | registry:block | Responsive Header, with a logo and navigation links, supporting both desktop and mobile layouts, and toggles on scroll. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/header.json` |
| image-player | registry:block | Create your own image player GIF/video, with image player component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/image-player.json` |
| shader | registry:block | Shader component with two variants for gradient and hurricane both can be configured. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/shader.json` |
| slideshow | registry:block | Display the active image and activate the next image with hovering the text indicator. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/slideshow.json` |
| story | registry:block | Simillar to IG story, Story is a component that allows you to display a collection of components in a single view. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/story.json` |
| timeline | registry:block | Timeline, where you can showcase history (like your work) or a process (like a project). | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/timeline.json` |
| card | registry:ui | Card component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card.json` |
| card-curtain-reveal | registry:ui | Interactive card component with open curtain to see content on hover gesture. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-curtain-reveal.json` |
| card-flip | registry:ui | An interactive card component that flips on hover with smooth 3D transitions. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-flip.json` |
| card-hover-reveal | registry:ui | Animated card with gesture animations, Reveals hidden content and scale main image on hover. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-hover-reveal.json` |
| card-testimonial | registry:ui | Card Testimonial, with rating, block quote, and author's informations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-testimonial.json` |
| cards-stack | registry:block | Stack of cards to showcase a related set of element, like your services, your work, features, process of work, timeline, etc. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack.json` |
| cards-stack-rotated | registry:block | Stack of cards rotated by a defined index value to rotate in sequence, it show one card at a time depending on the scroll position. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-rotated.json` |
| checkbox-field | registry:ui | Checkbox field with label. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/checkbox-field.json` |
| custom-cursor | registry:ui | Turn your cursor into any element your want, text, image, video, or a shape. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/custom-cursor.json` |
| pulse | registry:ui | Pulse effect for attracting user attention. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/pulse.json` |
| rating-stars | registry:ui | Stars rating component with customizable color, depending on average rating. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/rating-stars.json` |
| reveal-mask | registry:ui | reveal mask animation effect. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/reveal-mask.json` |
| spotlight-list | registry:ui | Spotlight list, when hovering an item it will highlight it by decreasing the visiblity of the other items. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/spotlight-list.json` |
| animated-menu-demo | registry:block | Demo showing animated menu component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/animated-menu-demo.json` |
| animated-menu-2-demo | registry:block | another demo showing animated menu component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/animated-menu-2-demo.json` |
| animated-menu-full-screen-demo | registry:block | another demo showing animated menu component in full screen mode. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/animated-menu-full-screen-demo.json` |
| container-stagger-demo | registry:block | Demo showing stagger container component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/container-stagger-demo.json` |
| container-stagger-2-demo | registry:block | Demo showing another use case for container stagger with your motion components. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/container-stagger-2-demo.json` |
| full-screen-navigation-menu-demo | registry:block | Demo showing Full screen navigation component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/full-screen-navigation-menu-demo.json` |
| globe-demo | registry:block | Demo showing Globe component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/globe-demo.json` |
| grid-bento-demo | registry:block | Grid Bento Demo with multiple variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/grid-bento-demo.json` |
| grid-bento-four-cells-demo | registry:block | Grid Bento Demo with multiple variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/grid-bento-four-cells-demo.json` |
| grid-bento-three-cells-demo | registry:block | Demo showing another variant of grid bento component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/grid-bento-three-cells-demo.json` |
| header-demo | registry:block | Demo showing Header component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/header-demo.json` |
| image-player-demo | registry:block | Demo showing how to use image player component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/image-player-demo.json` |
| shader-demo | registry:block | Demo showing shader component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/shader-demo.json` |
| shader-hurricane-demo | registry:block | Demo showing hurricane shader component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/shader-hurricane-demo.json` |
| slideshow-demo | registry:block | Demo showing how to use slideshow component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/slideshow-demo.json` |
| story-demo | registry:block | Demo showing how to use story component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/story-demo.json` |
| timeline-demo | registry:block | Demo showing timeline component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/timeline-demo.json` |
| card-curtain-reveal-demo | registry:ui | Demo showing Card Curtain Reveal Component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-curtain-reveal-demo.json` |
| card-flip-demo | registry:ui | Demo showing Flip Card Component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-flip-demo.json` |
| card-hover-reveal-demo | registry:ui | Demo showing Card Hover Reveal Component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-hover-reveal-demo.json` |
| card-hover-reveal-full-demo | registry:ui | Demo showing another usecase of Card Hover Reveal Component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-hover-reveal-full-demo.json` |
| card-testimonial-demo | registry:ui | Demo showing Card Testimonial Component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-testimonial-demo.json` |
| card-testimonial-2-demo | registry:ui | Demo showing Card Testimonial Component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-testimonial-2-demo.json` |
| cards-stack-demo | registry:block | Demo of sticky cards stack. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-demo.json` |
| cards-stack-achievements-demo | registry:block | Demo showing different usecase of Cards Stack component with smaller cards. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-achievements-demo.json` |
| cards-stack-rotated-demo | registry:block | Demo showing Cards Stack Rotated component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-rotated-demo.json` |
| cards-stack-rotated-recognitions-demo | registry:block | Demo showing different usecase of Cards Rotated Stack component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-rotated-recognitions-demo.json` |
| cards-stack-full-demo | registry:block | Demo showing different usecase of Cards Stack component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-full-demo.json` |
| hover-preview-demo | registry:ui | Demo showing usage of hover preview component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/hover-preview-demo.json` |
| checkbox-field-demo | registry:ui | Demo showing Input field component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/checkbox-field-demo.json` |
| custom-cursor-demo | registry:ui | Demo showing Custom Cursor component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/custom-cursor-demo.json` |
| custom-cursor-2-demo | registry:ui | Demo showing another usecase of Custom Cursor component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/custom-cursor-2-demo.json` |
| rating-stars-demo | registry:ui | Demo showing Rating stars component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/rating-stars-demo.json` |
| reveal-mask-demo | registry:ui | Demo showing Reveal mask component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/reveal-mask-demo.json` |
| spotlight-list-demo | registry:ui | Demo showing Spotlight list component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/spotlight-list-demo.json` |
| spotlight-list-2-demo | registry:ui | Demo showing Spotlight list component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/spotlight-list-2-demo.json` |
| custom-pricing-design-demo | registry:block | Demo showing custom pricing component for a design service. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/custom-pricing-design-demo.json` |
| expandable-grid-demo | registry:block | Demo showing expandable product grid component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/expandable-grid-demo.json` |
| image-zoom-demo | registry:block | Demo showing image zoom component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/image-zoom-demo.json` |
| infinite-scroll-demo | registry:block | Demo showing infinite scroll component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/infinite-scroll-demo.json` |
| price-demo | registry:block | Demo showing price component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/price-demo.json` |
| pricing-demo | registry:block | Demo showing pricing component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/pricing-demo.json` |
| pricing-2-demo | registry:block | Demo showing pricing-2 component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/pricing-2-demo.json` |
| product-carousel-demo | registry:block | Demo showing product carousel component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/product-carousel-demo.json` |
| product-carousel-2-demo | registry:block | Another Demo showing product carousel component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/product-carousel-2-demo.json` |
| product-carousel-3-demo | registry:block | Another Demo showing product carousel component with different thumbs. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/product-carousel-3-demo.json` |
| quantity-demo | registry:block | Demo showing Quantity component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/quantity-demo.json` |
| toggle-layout-demo | registry:block | Demo showing toggle layout view component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/toggle-layout-demo.json` |
| circle-cards-demo | registry:block | Demo showing circle cards component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/circle-cards-demo.json` |
| distributed-cards-demo | registry:block | Demo showing distributed cards component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/distributed-cards-demo.json` |
| distributed-cards-2-demo | registry:block | Another Demo showing distributed cards component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/distributed-cards-2-demo.json` |
| parallax-demo | registry:block | Demo showing parallax component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/parallax-demo.json` |
| scroll-animation-combo-demo | registry:block | Demo showing scroll-animation-combo component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-combo-demo.json` |
| scroll-animation-inset-demo | registry:block | Demo showing how to implement scroll triggred animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-inset-demo.json` |
| scroll-animation-inset-x-demo | registry:block | Demo showing how to implement scroll triggred animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-inset-x-demo.json` |
| scroll-animation-inset-y-demo | registry:block | Demo showing how to implement scroll triggred animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-inset-y-demo.json` |
| scroll-animation-radius-demo | registry:block | Demo showing how to use scroll animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-radius-demo.json` |
| scroll-animation-rotate-demo | registry:block | Demo showing how to use scroll rotate animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-rotate-demo.json` |
| scroll-animation-rotate-x-demo | registry:block | Demo showing how to use scroll rotate animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-rotate-x-demo.json` |
| scroll-animation-rotate-y-demo | registry:block | Demo showing how to use scroll rotate animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-rotate-y-demo.json` |
| scroll-animation-scale-demo | registry:block | Demo showing how to implement scroll triggred animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-scale-demo.json` |
| scroll-animation-translate-x-demo | registry:block | Demo showing how to implement scroll triggred animations. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-translate-x-demo.json` |
| scroll-autoplay-demo | registry:block | Demo showing scroll-autoplay component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-autoplay-demo.json` |
| scroll-reverse-scale-animation-demo | registry:block | Demo scroll animations component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-reverse-scale-animation-demo.json` |
| scroll-x-carousel-demo | registry:block | Demo showing how to use scroll x carousel component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-x-carousel-demo.json` |
| scroll-x-carousel-reverse-demo | registry:block | another Demo showing how to use scroll x carousel component in a reversed. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-x-carousel-reverse-demo.json` |
| team-demo | registry:block | Demo showing team component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/team-demo.json` |
| wavy-block-demo | registry:block | Demo showing Wavy Block component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/wavy-block-demo.json` |
| wavy-block-y-demo | registry:block | Demo showing another usage of Wavy Block component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/wavy-block-y-demo.json` |
| sliding-number-demo | registry:ui | Demo showing Sliding number component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/sliding-number-demo.json` |
| text-scroll-read-demo | registry:ui | Demo showing Text scroll read component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-scroll-read-demo.json` |
| text-stagger-hover-demo | registry:ui | Demo showing a split text with stagger animation on hover. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-stagger-hover-demo.json` |
| text-stagger-interval-demo | registry:ui | Demo showing text with stagger animation interval. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-stagger-interval-demo.json` |
| text-stagger-inview-demo | registry:ui | Demo showing a split text with stagger animation. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-stagger-inview-demo.json` |
| text-stagger-inview-waves-demo | registry:ui | Demo showing another use of text stagger in view demo with waves. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-stagger-inview-waves-demo.json` |
| text-vertical-demo | registry:ui | Demo showing a vertical text. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-vertical-demo.json` |
| text-wavy-demo | registry:ui | Demo showing text wavy component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-wavy-demo.json` |
| animation-variants-demo | registry:hook | Demo showing how to use animation-variants hook. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/animation-variants-demo.json` |
| set-stagger-direction-demo | registry:hook | Demo showing how to use set-stagger-direction utility. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/set-stagger-direction-demo.json` |
| custom-pricing | registry:block | Flexible custom pricing component with with set of tools that allow to update the price depending on quantity unit and if or not is checked. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/custom-pricing.json` |
| expandable-grid | registry:block | expandable grid for previewing clicked item. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/expandable-grid.json` |
| image-zoom | registry:block | zoom in and out with detect touch event. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/image-zoom.json` |
| infinite-scroll | registry:block | infinite scroll container instead of pagination, for large lists and fetching data. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/infinite-scroll.json` |
| price | registry:block | Flexible price component with customizable features and options to display the amount and currency. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/price.json` |
| pricing | registry:block | Flexible pricing component with customizable features and options. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/pricing.json` |
| product-carousel | registry:block | Showcase your products with preview image for each product and display your different product colors. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/product-carousel.json` |
| quantity | registry:block | Quantity config for ecommerce products. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/quantity.json` |
| toggle-layout | registry:block | Toggle list layout, toggling between a list and a grid view. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/toggle-layout.json` |
| circle-cards | registry:block | circle cards, animated on scroll with circle movement. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/circle-cards.json` |
| distributed-cards | registry:block | Distributed cards, same as soliter, starts all at one position then animates to its position. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/distributed-cards.json` |
| parallax | registry:block | Parallax block, creates a parallax effect. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/parallax.json` |
| scroll-animation | registry:block | Collection of scroll triggered animations, Triggering the animation by scroll event. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation.json` |
| scroll-animation-rotate | registry:block | Collection of scroll rotation animations, Triggering the animation by scroll event. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-rotate.json` |
| scroll-autoplay | registry:block | Displaying different content depending on order and scroll position. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-autoplay.json` |
| scroll-x-carousel | registry:block | Scroll carousel on x axis, with optional progress indicator. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-x-carousel.json` |
| wavy-block | registry:block | block animates its children in waves pattern. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/wavy-block.json` |
| avatar | registry:ui | avatar component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/avatar.json` |
| badge | registry:ui | Badge component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/badge.json` |
| badge | registry:ui | Button component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/badge.json` |
| dialog | registry:ui | Dialog component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/dialog.json` |
| drawer | registry:ui | drawer component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/drawer.json` |
| empty | registry:ui | empty component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/empty.json` |
| field | registry:ui | field component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/field.json` |
| input | registry:ui | input component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/input.json` |
| label | registry:ui | label component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/label.json` |
| avatar | registry:ui | avatar component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/avatar.json` |
| scroll-area | registry:ui | Scroll Area component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-area.json` |
| select | registry:ui | Select component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/select.json` |
| slider | registry:ui | slider component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/slider.json` |
| spinner | registry:ui | spinner component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/spinner.json` |
| switch | registry:ui | switch component with variants. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/switch.json` |
| sliding-number | registry:ui | Number value with splitted animation. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/sliding-number.json` |
| text-flip | registry:ui | Flipped text animation, flips the text | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-flip.json` |
| text-scroll-read | registry:ui | Text component allows you to read the text by scrolling. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-scroll-read.json` |
| text-stagger-hover | registry:ui | Splitted text animation with staggered effect triggered by hover gesture, You can easily customize by controlling the animation property (transform, opacity, b… | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-stagger-hover.json` |
| text-stagger-interval | registry:ui | Staggered text display that cycles through a list of words at a specified interval. Pause the animation by hovering over the component. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-stagger-interval.json` |
| text-stagger-inview | registry:ui | Splitted text animation with staggered reveal triggered by view, You can easily customize by controlling the animation property (transform, opacity, blur) and … | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-stagger-inview.json` |
| text-vertical | registry:ui | Text with vertical display, Can be used as a title or a subtitle. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-vertical.json` |
| text-wavy | registry:ui | Infinite text animation with wavy effect. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/text-wavy.json` |
| word-stagger | registry:ui | Alternative to text-stagger-inview and text-stagger-hover, in case you have one word or you want more custom text animations, use this component, it is used in… | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/word-stagger.json` |
| animation-variants | registry:item | animation variants, for your motion components, allows to animate component with transforms, opacity, and blur. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/animation-variants.json` |
| custom-pricing-utils | registry:item | Custom pricing utils types and reducer store. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/custom-pricing-utils.json` |
| set-stagger-direction | registry:lib | stagger direction, Allow to animate in orchestrated order depending on the order, can animate from the start item, middle item, last item. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/set-stagger-direction.json` |
| split-text | registry:lib | split text utility function, allows to split text into characters, words, returns (characters, words, characterCount, wordCount). | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/split-text.json` |
| svg-globe-path | registry:item | Svg globe path. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/svg-globe-path.json` |
| transitions | registry:item | Multiple transitions for your motion components, to animate depending on the animated property. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/transitions.json` |
| use-follow-mouse | registry:hook | As the name suggests, this hook will follow the mouse position. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/use-follow-mouse.json` |
| use-is-scrolled | registry:hook | use is scrolled hook to detect if the user has scrolled to the bottom of the page. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/use-is-scrolled.json` |
| use-mobile | registry:hook | use mobile hook allows you to check if the user is on a mobile device. | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/use-mobile.json` |
| use-toggle-onscroll | registry:hook | use toggle onscroll hook allows to toggle element position on scroll (down hide, up show). | `npx shadcn@latest add https://systaliko-ui.vercel.app/r/use-toggle-onscroll.json` |

## For AI agents

```text
You are adding components from @systaliko-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/systaliko-ui.md) for the component list.
2. Fetch the machine-readable index: https://systaliko-ui.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: systaliko-ui).
```