Chapter 9: Loaders, Modals & Tabs

Core Idea

State-transition and overlay components — loading indicators, modals, tabs, and tooltips that communicate app state changes.

Name	Purpose	Install
Loaders	A set of minimal loading-screen spinners	`npx shadcn@latest add @aceternity/loader`
Multi Step Loader	Step-by-step loader for long-running screens	`npx shadcn@latest add @aceternity/multi-step-loader`
Animated Modal	Compound modal component with animated open/close transitions	`npx shadcn@latest add @aceternity/animated-modal`
Animated Tabs	Tabs with an animated background indicator on selection	`npx shadcn@latest add @aceternity/tabs`
Animated Tooltip	Tooltip that follows the mouse pointer on hover	`npx shadcn@latest add @aceternity/animated-tooltip`
Tooltip Card	Larger tooltip-style card that follows the pointer	`npx shadcn@latest add @aceternity/tooltip-card`
Meteor Effect	Group of animated beams resembling meteors, for backgrounds	`npx shadcn@latest add @aceternity/meteors`

Multi Step Loader vs Loaders: use Multi Step Loader when the wait genuinely has discrete stages to communicate (e.g. multi-request onboarding flow); plain Loaders for a generic short wait.
Animated Modal is compound (multiple sub-parts) rather than a single component — check its anatomy before wiring custom open/close logic around it.
Animated Tooltip and Tooltip Card differ in scale: Animated Tooltip is a small hover label, Tooltip Card is a larger content preview.

ch006 (Navigation): Notch, a related pointer-following/animated-indicator component.