Dev Design Library

Skecher UI components

motion component library on top of shadcn cli.

Components
28
Framework
React
Stack
React, TypeScript, Tailwind
GitHub stars
14
Source
https://github.com/CoDesign-Spa27/skecher-ui
Website
https://skecher-ui.com
Install
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/{name}

All Skecher UI components

  • 3D Wheel Carousel: A reusable, drag-controlled 3D card carousel with auto-rotation, keyboard navigation, blur depth, and reduced-motion support.
  • Add to Cart: An interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total.
  • AI Chat Box: A polished AI prompt composer with model controls, attachments, and animated interaction states.
  • AI Orb: An interactive Three.js orb for AI assistants, voice interfaces, and ambient status surfaces.
  • Animated Book: A reusable 3D book preview that opens on hover or focus and supports controlled state, keyboard input, and reduced motion.
  • Apple Mail Tabs: A colorful, horizontally scrollable mail category selector with compact inactive tabs and an expanded active tab.
  • Cookie Consent: A paper-and-cobalt cookie notice with an isometric cookie break animation, confirm-and-undo controls, and reduced-motion support.
  • Dither Credit Card: A pointer-responsive payment card with a restrained dithering shader and spring-smoothed depth.
  • Dock: A macOS-style magnifying dock powered by shared motion values and spring-smoothed icon sizing.
  • Expandable Mobile Nav: A bottom-anchored navigation shell with expandable labels and composable per-item panels.
  • Gooey Toolbar: A compact action toolbar with configurable liquid merging effects and accessible controls.
  • Image Density Grid: A percentage-controlled image grid with animated density changes, soft focus, and optional controls.
  • Image Glide: An image viewer with pointer depth, soft image transitions, and a compact thumbnail rail.
  • Interactive Grid Hero: A full-page field of square cells that locally soften and round around a fine pointer.
  • Liquid Glass Social: A responsive social-link cluster with focused liquid-glass motion and clear interaction feedback.
  • Liquid Morphology Slideshow: A WebGL image slideshow with liquid, frost, ripple, plasma, and timeshift transitions.
  • Magazine Scroller: A velocity-aware poster scroller with drag, wheel, spring, and progressive-blur treatments.
  • Morph Menu: A measured action menu that morphs between compact and expanded states with configurable directional movement.
  • Morph Stack: A composable three-plate stack with spring-driven perspective and layered hover motion.
  • Morphing Action Dock: A floating action dock that merges into one surface and expands into contextual actions.
  • Scroll Reveal Text: A scroll-linked text reveal with spring-smoothed progress and reduced-motion support.
  • Sliding Panel: A direction-aware panel transition with interruptible motion and reduced-motion fallbacks.
  • Snap Text: A spring-driven text interaction that reacts to pointer movement and settles cleanly.
  • Spring Slider: A pill-track slider with a spring-driven fill and thumb, tick markers, and a tooltip that blurs in and out.
  • Streaming Text: A soft word-by-word text reveal for hero copy, onboarding, and editorial interfaces.
  • Table of Content: A reading-aware page outline with an animated active marker, expandable subsections, and a progress rail.
  • Text Morphing: An animated text replacement primitive for status messages, hero copy, and compact state changes.
  • Velocity Tabs: An accessible tab selector with a spring indicator that stretches in response to movement velocity.

Browse by category