soonish

Overview

soonish is a collection of 91 loading animations for React by Rushikesh Mahajan. Every loader uses the same 5x5 grid of dots; only the timing and the order in which the dots light up change. The animations are plain CSS with no runtime, and the code is copied into components/soonish with the shadcn CLI.

The Loader component has no hooks, so it works in React Server Components and fits naturally in a Next.js loading.tsx. Each loader is its own registry item, or the whole set can be installed at once. The project is MIT licensed and supports React 18 and later.

Features

• 91 loaders: All on a 25-dot grid, selected by a typed name prop with editor autocomplete
• Pulse wave family: 27 loaders such as sweep, ripple, rain, spiral and snake
• AI and process states: 10 loaders named for agent states, including thinking, searching, streaming and reasoning
• Scale and mandala families: 16 scale loaders (twist, jelly, zigzag) and 18 symmetric mandalas (snowflake, gear, lotus)
• Patterns and fields: 20 more, including sonar, pinwheel, neon drift, firefly and halo
• Props: color (any CSS color or token), size, dotSize, cellPadding and speed
• Server Component ready: No hooks and no JavaScript animation runtime

Tech stack

• React 18+, TypeScript
• Plain CSS animations

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @soonish/component-name