# Calamansi UI > Calamansi UI is a free, open-source registry of animated React components with a little sour. A tiny citrus UI kit for React and Next.js, built with Tailwind CSS, Motion, and the shadcn CLI. Canonical site: https://calamansi-ui.com Source repository: https://github.com/fujiDevv/calamansi-ui Component registry: https://github.com/fujiDevv/calamansi-ui Components index: https://calamansi-ui.com/components Sitemap: https://calamansi-ui.com/sitemap.xml Install any component into a React / Next.js project: ``` npx shadcn@latest add fujiDevv/calamansi-ui/ ``` Source code for all components: https://github.com/fujiDevv/calamansi-ui ## Components ### Calamansi mascot - Page: https://calamansi-ui.com/components/calamansi - Description: A tiny citrus fruit that blinks, follows your cursor, blushes when you pet it, and goes tart if you poke it too much. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/calamansi` - Registry JSON: https://calamansi-ui.com/r/calamansi.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/calamansi.tsx - Interaction: It blinks on its own and its eyes track your cursor. Drag the pointer back and forth across it a few times to make it blush. Poke it five times in quick succession and it turns tart for a few seconds. Press and hold to squish it. - Dependencies: gsap ### Spotlight card - Page: https://calamansi-ui.com/components/spotlight-card - Description: The plain Calamansi surface as a card, in white or the Calamansi, Slate and Citrus palettes. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/spotlight-card` - Registry JSON: https://calamansi-ui.com/r/spotlight-card.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/spotlight-card.tsx - Interaction: Nothing moves: the card is the branding itself. Pick a palette, pass cornerRadius and cornerSmoothing to reshape the corner, and drop any content inside it. ### Tilt card - Page: https://calamansi-ui.com/components/tilt-card - Description: A Calamansi card that leans towards your pointer, with a light sheen that follows the tilt. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/tilt-card` - Registry JSON: https://calamansi-ui.com/r/tilt-card.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/tilt-card.tsx - Interaction: Move the pointer over the card and it leans towards it, tracking continuously through springs. Let go and it settles back to flat. - Dependencies: motion ### Marquee - Page: https://calamansi-ui.com/components/marquee - Description: An infinite marquee that loops seamlessly, fades its edges, pauses on hover and takes a palette accent. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/marquee` - Registry JSON: https://calamansi-ui.com/r/marquee.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/marquee.tsx - Interaction: Hover the marquee to hold the loop in place, then move away and it carries on from where it stopped. It stays bare, so the palette is an ink rather than a surface: anything inside that styles from currentColor picks the accent up. ### Number ticker - Page: https://calamansi-ui.com/components/number-ticker - Description: An odometer-style number that rolls each digit to the next value. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/number-ticker` - Registry JSON: https://calamansi-ui.com/r/number-ticker.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/number-ticker.tsx - Interaction: Change the value and every digit slides to its new position, the columns settling one after another. - Dependencies: motion ### Dock - Page: https://calamansi-ui.com/components/dock - Description: A dock that magnifies the icon under the pointer, the way a desktop one does. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/dock` - Registry JSON: https://calamansi-ui.com/r/dock.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/dock.tsx - Interaction: Glide the pointer along the dock and the nearby icons rise to meet it, springing back as it moves on. Each icon shows its label on hover. - Dependencies: motion ### Dynamic island - Page: https://calamansi-ui.com/components/dynamic-island - Description: A Calamansi island that eases between a compact bar and an expanded slab when tapped, and glows when it alerts. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/dynamic-island` - Registry JSON: https://calamansi-ui.com/r/dynamic-island.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/dynamic-island.tsx - Interaction: Click the island to expand it into rich content. Compact and idle hold the brand corner rather than a stadium — the box is short enough that a flat 28px would be clamped to half its height — and the expanded slab takes the kit's 28px outright. In alert it pulses with an alert glow and a tap badge hint. - Dependencies: motion ### Gooey nav - Page: https://calamansi-ui.com/components/gooey-nav - Description: A Calamansi nav whose active item pulls out of the tray on a real liquid thread, and merges back when you pick another. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/gooey-nav` - Registry JSON: https://calamansi-ui.com/r/gooey-nav.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/gooey-nav.tsx - Interaction: Pick an item and the seams either side of it spring open by pulling the surface back, not by moving the layout — the labels never shift and the bar never changes width. In the gap a thread forms by itself: the blur spreads each surface's alpha into the seam, the ramp at half-alpha turns that bleed into solid material, and because the bar has a height the bridge is starved at its midline — it pinches from the full bar down to a few pixels and then severs at 1.234 of the blur radius, which is where the bead swells to full size and dissolves. Raise the viscosity and the thread reaches further and parts later; lower the threshold and the fused edge softens. Sealing runs the same thread backwards — the neck thickens back into the joint, the bead falls back in — and every drop wears the material of its own seam, the palette where the pill is one of the two surfaces meeting there and the tray's own colour where neither is, so a seam between two quiet items closes with a drop of tray rather than a dot of a palette that is nowhere near it. The swallow that hides the seam only arrives once the two surfaces have met, because it is five times longer than the gap you can see and on one spring a re-merge crossed that whole gap in the frames where a spring is moving fastest, which left the neck living a fifth as long shutting as it did opening. Sealed seams are one continuous bar: every surface keeps the brand corner and extends two radii under its neighbour, so the tray reads as a single shape rather than a row of boxes. - Dependencies: motion, figma-squircle, react-use-measure ### Duration picker - Page: https://calamansi-ui.com/components/duration-picker - Description: A Calamansi duration field: hours, minutes and a save button in one bar that pulls apart on a real liquid thread when you press the pen. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/duration-picker` - Registry JSON: https://calamansi-ui.com/r/duration-picker.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/duration-picker.tsx - Interaction: At rest both seams are sealed, so the bar reads as one piece of material: the fields collapse to their digits and the whole thing says "1 Hr. 30 Min.". Press the pen and the seams open by pulling the surfaces apart rather than moving the layout — the fields keep their place, the numbers spring from their collapsed width to a fixed one, and the units lean into the split. The thread between the pieces is real metaball geometry: the stage is blurred, the blur is pushed through a steep alpha ramp so any bleed becomes solid material, and the crisp stage is drawn back over the top. Because the bar has a height the bridge is starved at its midline — it pinches from the full bar down to a few pixels and then severs at 1.234 of the blur radius, which is where the bead swells to full size and dissolves. Committing with the tick, or Enter in either field, merges the pieces back on the same thread in reverse — the surfaces meet, the neck thickens into the joint, and the swallow that seals them waits until they have touched — and fires `onConfirm`; a number past the ceiling is refused with a nudge and taken as the nearest legal value. - Dependencies: motion, figma-squircle, react-use-measure ### Task widget - Page: https://calamansi-ui.com/components/task-widget - Description: An iOS-inspired glass widget with a live clock, weather and task cards you can tick off — on its own radius or the Calamansi corner. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/task-widget` - Registry JSON: https://calamansi-ui.com/r/task-widget.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/task-widget.tsx - Interaction: Click any task card to focus and toggle completion with tactile spring physics. Scroll through tasks to watch the symmetrical bottom progress bar dynamically expand. - Dependencies: motion, lucide-react, figma-squircle, react-use-measure ### Morning widget - Page: https://calamansi-ui.com/components/morning-widget - Description: A Calamansi card with a drifting sunrise mesh that greets you by name, keeps a live clock and cycles motivational lines. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/morning-widget` - Registry JSON: https://calamansi-ui.com/r/morning-widget.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/morning-widget.tsx - Interaction: Move the pointer over the card and it leans towards it. The line advances on its own every few seconds, or straight away when you click the card. Hovering holds the rotation so you can finish reading, and on a phone the whole widget scales to the width it is given. - Dependencies: motion, lucide-react, figma-squircle, react-use-measure ### GitHub activity - Page: https://calamansi-ui.com/components/github-activity - Description: A Calamansi calendar that plots a year of GitHub contributions, with a drawer of the busiest repositories. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/github-activity` - Registry JSON: https://calamansi-ui.com/r/github-activity.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/github-activity.tsx - Interaction: Hover any day to read its exact count. Press the chevron on the repository drawer to expand it over the calendar, and give the component a username and it fetches the calendar and recent pushes in the browser. - Dependencies: motion ### Matrix orb - Page: https://calamansi-ui.com/components/matrix-orb - Description: A liquid orb that breathes while idle, ripples while listening and churns up droplets while it thinks. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/matrix-orb` - Registry JSON: https://calamansi-ui.com/r/matrix-orb.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/matrix-orb.tsx - Interaction: The body is plain circles and a filter: the stage is blurred, that blur is pushed through a steep alpha ramp so any bleed between the circles becomes solid matter, and the crisp circles are drawn back over the top — so the lobes read as one body whose necks stretch and part. Every state moves the satellites' orbit and radius, which is what merges them into a ball or pulls them off as droplets: idle breathes slowly, listening ripples outward from the core until the lobes detach, and thinking runs each lobe on its own clock so they lap one another. Changing state retargets mid-pulse rather than restarting, blending from what is on screen. Hand it a level from 0 to 1 to drive the amplitude and swell the body from your own audio, turn the fuse off to see the circles underneath, and it holds a still frame when the reader prefers reduced motion. - Dependencies: motion, figma-squircle, react-use-measure ### Sidebar - Page: https://calamansi-ui.com/components/sidebar - Description: A sidebar of sections whose single active marker arcs between rows and crossfades out of one section's ink into the next, as a static rail or as the same panel in a drawer. - Install: `npx shadcn@latest add fujiDevv/calamansi-ui/sidebar` - Registry JSON: https://calamansi-ui.com/r/sidebar.json - Source: https://github.com/fujiDevv/calamansi-ui/blob/main/components/ui/sidebar.tsx - Interaction: One marker serves the whole list, so picking a row reads as it travelling rather than a second row lighting up, and the path is not a straight line — the marker bows out to the left, and the bow scales with how far it is going, so adjacent hops barely bend and a jump across the nav swings wide. It lands carrying the ink of the section it arrived in, crossfading out of the one it left on the way, which is what makes a jump between sections a different gesture from a step within one. When the arc closes the label is shoved aside, so the label reads as pushed by the marker rather than moving on its own. The drawer is the same panel, not a second implementation of it, so nothing about the list has to be kept in step between the two. - Dependencies: motion, lucide-react ## Common Questions ### What is Calamansi UI? Calamansi UI is a free, open-source registry of animated React components with a little sour, installed with the shadcn CLI. ### Is Calamansi UI free? Yes. Calamansi UI components are free to use and modify in personal and commercial React or Next.js projects. ### How do I install a Calamansi UI component? Run npx shadcn@latest add fujiDevv/calamansi-ui/, replacing with the component registry name. ### What is Calamansi UI built with? Calamansi UI components are built for React with TypeScript, Tailwind CSS, Motion, GSAP, and shadcn/ui conventions. ### Does Calamansi UI work with Next.js? Yes. Calamansi UI components are React components and the examples are designed to fit naturally into Next.js projects. ### Can I customize Calamansi UI components? Yes. Components are copied into your project, so you can edit the source, Tailwind classes, props, and behavior after installation. ## Notes - Components follow shadcn/ui conventions: cn helper, className merging, prop spreading, and data-slot attributes. - Components are copied into user projects and can be modified after installation. - Calamansi is free to use and modify in personal and commercial projects.