Documentation
Introduction
A free, open-source registry of animated React components with a citrus zest, crafted for Next.js, React 19, Tailwind CSS v4, and the shadcn CLI.
What is Calamansi UI?
Calamansi UI is not a monolithic npm dependency. Instead, it is an open-source collection of standalone, single-file animated components inspired by the tart, energetic personality of the calamansi fruit.
Every component is designed to be installed directly into your repository with a single command, giving you full control to customize colors, spring physics, animation durations, and layout.
Single-file architecture
Zero package lock-in. Every component lives in its own file within your project.
shadcn CLI distribution
Install any component with npx shadcn@latest add, then own the source.
Tailwind CSS v4, React 19
Modern CSS properties, CSS motion paths and native dark mode support.
Physics-based motion
Realistic springs, smooth hover sheens and pointer tracking, powered by Motion and GSAP.