Utility React components for the states between content: loading placeholders, skeletons and effects.
9 components · free and MIT-licensed · install with the shadcn CLI
Every component in the library, with everything each one pulls in.
The AvatarStack component overlaps a row of avatars into a single group, collapses everyone past a limit into a +N chip, and lifts an avatar clear of its neighbours on hover without the row changing width.
motion
The BentoGrid component arranges cards of different sizes into the asymmetric layout known as a bento box, with each cell declaring how many columns and rows it spans and every card collapsing to full width on small screens.
motion
The BorderBeam component wraps any content in a border traced by a travelling beam of light. It follows the container's rounded corners exactly, and nothing around it moves.
lucide-reactmotion
The Dock component recreates the macOS dock: items swell as the pointer approaches, and each one names itself in a tooltip on hover or focus.
lucide-reactmotion
The LiquidTabs component is a tab switcher whose selection pill flows between tabs, stretching in proportion to how fast it is travelling and settling back into shape as it lands.
motion
The Marquee component scrolls its children in a seamless, infinite loop, with pause-on-hover and faded edges.
motion
The ScratchToReveal component covers your content in a foil the user rubs away with a pointer, firing onComplete and dropping the rest of the foil once enough has been cleared.
motion
The ScrollProgress component fills a thin bar as the reader moves through a page or a panel, scaling a single transform rather than resizing an element so it costs nothing on the scroll frame.
motion
The ShimmerEffect component creates a shimmering animation, ideal for loading placeholders or skeleton screens.
motion
Every component here is installable with the shadcn CLI, which also resolves its npm dependencies.
npx shadcn@latest add https://uibeats.com/r/avatar-stack.json