@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.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://systaliko-ui.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://systaliko-ui.vercel.app/r/registry.json

bun bunx shadcn@latest add https://systaliko-ui.vercel.app/r/registry.json

fetch registry curl -s https://systaliko-ui.vercel.app/r/registry.json

Components

60 total

index style

npx shadcn@latest add https://systaliko-ui.vercel.app/r/index.json

Animated Menu block

Animated menu, with orchestrated children animation, fully customizable.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/animated-menu.json

Stagger Animations 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 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 block

Globe map with optional map pins.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/globe.json

Grid Bento block

Bento Grid, layout with multiple variants and displays.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/grid-bento.json

Header 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 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 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 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 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 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 ui

Card component with variants.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/card.json

Curtain Reveal Card 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

3d Flip Card 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

Hover Reveal Details Card 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 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 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 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 ui

Checkbox field with label.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/checkbox-field.json

Custom Cursor 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 ui

Pulse effect for attracting user attention.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/pulse.json

Rating Stars 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 ui

reveal mask animation effect.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/reveal-mask.json

spotlight-list 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 block

Demo showing animated menu component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/animated-menu-demo.json

Animated Menu 2 Demo block

another demo showing animated menu component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/animated-menu-2-demo.json

Animated Menu Demo 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

Stagger Container Demo block

Demo showing stagger container component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/container-stagger-demo.json

Container Stagger Demo 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 Demo 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 block

Demo showing Globe component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/globe-demo.json

Grid Bento Demos block

Grid Bento Demo with multiple variants.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/grid-bento-demo.json

Grid Bento Demos 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 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 block

Demo showing Header component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/header-demo.json

Image Player Demo 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 block

Demo showing shader component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/shader-demo.json

Shader Hurricane Demo block

Demo showing hurricane shader component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/shader-hurricane-demo.json

Slideshow Demo block

Demo showing how to use slideshow component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/slideshow-demo.json

Story Demo block

Demo showing how to use story component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/story-demo.json

Timeline Demo block

Demo showing timeline component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/timeline-demo.json

Card Curtain Reveal Demo ui

Demo showing Card Curtain Reveal Component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-curtain-reveal-demo.json

Flip Card Demo ui

Demo showing Flip Card Component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-flip-demo.json

Card Hover Reveal Demo 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 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 ui

Demo showing Card Testimonial Component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-testimonial-demo.json

Card Testimonial Demo ui

Demo showing Card Testimonial Component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/card-testimonial-2-demo.json

Sticky Cards stack Demo block

Demo of sticky cards stack.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-demo.json

Stack small cards Demo 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 block

Demo showing Cards Stack Rotated component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/cards-stack-rotated-demo.json

Stack small cards Demo 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 screen Demo 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 ui

Demo showing usage of hover preview component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/hover-preview-demo.json

Input Field Demo ui

Demo showing Input field component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/checkbox-field-demo.json

Custom Cursor Demo ui

Demo showing Custom Cursor component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/custom-cursor-demo.json

Custom Cursor 2 Demo 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 ui

Demo showing Rating stars component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/rating-stars-demo.json

Reveal Mask Demo ui

Demo showing Reveal mask component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/reveal-mask-demo.json

Spotlight List Demo ui

Demo showing Spotlight list component.

npx shadcn@latest add https://systaliko-ui.vercel.app/r/spotlight-list-demo.json