Skecher UI

Overview

Skecher UI is an open-source registry of motion-focused React components installed with the shadcn CLI. Each component has a live preview, full source and a dependency list in the docs, and the code is copied into the project so it can be edited freely.

The registry holds 28 items, nearly all animated with Motion. They range from interface pieces like a dock, morph menu and velocity tabs to visual pieces such as a 3D wheel carousel, an animated book and a dithered credit card. A few components use Three.js or Paper Shaders for 3D and shader effects.

Features

• Navigation and menus: Dock, morph menu, morphing action dock, expandable mobile nav, gooey toolbar and table of contents
• Tabs and panels: Apple Mail style tabs, velocity tabs and a sliding panel
• Carousels and galleries: 3D wheel carousel, image glide, image density grid, magazine scroller and liquid morphology slideshow
• Text effects: Scroll reveal text, snap text, streaming text and text morphing
• AI pieces: AI chat box and an AI orb
• Commerce and UI details: Add-to-cart, cookie consent, spring slider and liquid glass social buttons
• Dry-run installs: README shows previewing files with --dry-run before adding

Tech stack

• React, Tailwind CSS v4
• Motion, Three.js, Paper Shaders, Number Flow

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @skecher-ui/component-name