--- name: "@skecher-ui" slug: "skecher-ui" description: "React animated components that contains life, built with Tailwind CSS v4 and motion." category: "Animated components" tags: ["ai", "animation", "blocks", "cards", "e-commerce", "glassmorphism", "media", "mobile", "navigation"] framework: "react" license: null author: "CoDesign-Spa27" website: "https://skecher-ui.com" github: "https://github.com/CoDesign-Spa27/skecher-ui" registry: "https://skecher-ui.com/r/registry.json" pro: false pro_url: null github_stars: 9 component_count: 24 generated_at: "2026-09-21T01:50:16.753Z" --- # @skecher-ui React animated components that contains life, built with Tailwind CSS v4 and motion. ## Links - Website: https://skecher-ui.com - GitHub: https://github.com/CoDesign-Spa27/skecher-ui - Registry JSON: https://skecher-ui.com/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/skecher-ui - This file: https://sh4dcn.vercel.app/md/skecher-ui.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://skecher-ui.com/r/registry.json pnpm dlx shadcn@latest add https://skecher-ui.com/r/registry.json bunx shadcn@latest add https://skecher-ui.com/r/registry.json # clone the source repo git clone https://github.com/CoDesign-Spa27/skecher-ui.git # fetch the raw registry index curl -s https://skecher-ui.com/r/registry.json ``` ## Components (24) | name | type | description | install | | --- | --- | --- | --- | | apple-mail-tabs | registry:ui | A colorful, horizontally scrollable mail category selector with compact inactive tabs and an expanded active tab. | `npx shadcn@latest add https://skecher-ui.com/r/apple-mail-tabs.json` | | add-to-cart | registry:ui | An interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total. | `npx shadcn@latest add https://skecher-ui.com/r/add-to-cart.json` | | ai-chat-box | registry:ui | A polished AI prompt composer with model controls, attachments, and animated interaction states. | `npx shadcn@latest add https://skecher-ui.com/r/ai-chat-box.json` | | ai-orb | registry:ui | An interactive Three.js orb for AI assistants, voice interfaces, and ambient status surfaces. | `npx shadcn@latest add https://skecher-ui.com/r/ai-orb.json` | | dither-credit-card | registry:ui | A pointer-responsive payment card with a restrained dithering shader and spring-smoothed depth. | `npx shadcn@latest add https://skecher-ui.com/r/dither-credit-card.json` | | dock | registry:ui | A macOS-style magnifying dock powered by shared motion values and spring-smoothed icon sizing. | `npx shadcn@latest add https://skecher-ui.com/r/dock.json` | | expandable-mobile-nav | registry:ui | A bottom-anchored navigation shell with expandable labels and composable per-item panels. | `npx shadcn@latest add https://skecher-ui.com/r/expandable-mobile-nav.json` | | gooey-toolbar | registry:ui | A compact action toolbar with configurable liquid merging effects and accessible controls. | `npx shadcn@latest add https://skecher-ui.com/r/gooey-toolbar.json` | | image-density-grid | registry:ui | A percentage-controlled image grid with animated density changes, soft focus, and optional controls. | `npx shadcn@latest add https://skecher-ui.com/r/image-density-grid.json` | | image-glide | registry:ui | An image viewer with pointer depth, soft image transitions, and a compact thumbnail rail. | `npx shadcn@latest add https://skecher-ui.com/r/image-glide.json` | | interactive-grid-hero | registry:ui | A full-page field of square cells that locally soften and round around a fine pointer. | `npx shadcn@latest add https://skecher-ui.com/r/interactive-grid-hero.json` | | liquid-glass-social | registry:ui | A responsive social-link cluster with focused liquid-glass motion and clear interaction feedback. | `npx shadcn@latest add https://skecher-ui.com/r/liquid-glass-social.json` | | liquid-morphology-slideshow | registry:ui | A WebGL image slideshow with liquid, frost, ripple, plasma, and timeshift transitions. | `npx shadcn@latest add https://skecher-ui.com/r/liquid-morphology-slideshow.json` | | magazine-scroller | registry:ui | A velocity-aware poster scroller with drag, wheel, spring, and progressive-blur treatments. | `npx shadcn@latest add https://skecher-ui.com/r/magazine-scroller.json` | | morphing-action-dock | registry:ui | A floating action dock that merges into one surface and expands into contextual actions. | `npx shadcn@latest add https://skecher-ui.com/r/morphing-action-dock.json` | | morph-menu | registry:ui | A measured action menu that morphs between compact and expanded states with configurable directional movement. | `npx shadcn@latest add https://skecher-ui.com/r/morph-menu.json` | | morph-stack | registry:ui | A composable three-plate stack with spring-driven perspective and layered hover motion. | `npx shadcn@latest add https://skecher-ui.com/r/morph-stack.json` | | scroll-reveal-text | registry:ui | A scroll-linked text reveal with spring-smoothed progress and reduced-motion support. | `npx shadcn@latest add https://skecher-ui.com/r/scroll-reveal-text.json` | | sliding-panel | registry:ui | A direction-aware panel transition with interruptible motion and reduced-motion fallbacks. | `npx shadcn@latest add https://skecher-ui.com/r/sliding-panel.json` | | snap-text | registry:ui | A spring-driven text interaction that reacts to pointer movement and settles cleanly. | `npx shadcn@latest add https://skecher-ui.com/r/snap-text.json` | | spring-slider | registry:ui | A pill-track slider with a spring-driven fill and thumb, tick markers, and a tooltip that blurs in and out. | `npx shadcn@latest add https://skecher-ui.com/r/spring-slider.json` | | streaming-text | registry:ui | A soft word-by-word text reveal for hero copy, onboarding, and editorial interfaces. | `npx shadcn@latest add https://skecher-ui.com/r/streaming-text.json` | | text-morphing | registry:ui | An animated text replacement primitive for status messages, hero copy, and compact state changes. | `npx shadcn@latest add https://skecher-ui.com/r/text-morphing.json` | | velocity-tabs | registry:ui | An accessible tab selector with a spring indicator that stretches in response to movement velocity. | `npx shadcn@latest add https://skecher-ui.com/r/velocity-tabs.json` | ## For AI agents ```text You are adding components from @skecher-ui to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/skecher-ui.md) for the component list. 2. Fetch the machine-readable index: https://skecher-ui.com/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: skecher-ui). ```