# Rare UI > A shadcn registry of rare, animated React components — frosted-glass, springy, Apple-flavored UI built with Tailwind CSS and Motion (Framer Motion). Every component is free to use and installable with one command via the shadcn CLI. Install any component into a React / Next.js project: ``` npx shadcn@latest add swamimalode07/rare-ui/ ``` Source code for all components: https://github.com/swamimalode07/rare-ui ## Components ### Folder component - Page: https://rareui.com/components/foldercomponent - Description: An animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size (sm/md/lg) props. - Install: `npx shadcn@latest add swamimalode07/rare-ui/folder-component` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/folder-component.tsx - Dependencies: motion ### Bounce sidebar - Page: https://rareui.com/components/bouncesidebar - Description: A vertical navigation list with a bouncy, spring-animated active indicator. - Install: `npx shadcn@latest add swamimalode07/rare-ui/bounce-sidebar` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/bounce-sidebar.tsx - Dependencies: motion ### Hook Sidebar - Page: https://rareui.com/components/hooksidebar - Description: A vertical navigation list with a dashed rail that marks the active item. - Install: `npx shadcn@latest add swamimalode07/rare-ui/hook-sidebar` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/hook-sidebar.tsx - Dependencies: motion ### Proximity Sidebar - Page: https://rareui.com/components/proximitysidebar - Description: An interactive sidebar with proximity hover effects that appears while scrolling and responds to scroll intensity. - Install: `npx shadcn@latest add swamimalode07/rare-ui/proximity-sidebar` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/proximity-sidebar.tsx - Dependencies: motion ### Duration Picker - Page: https://rareui.com/components/durationpicker - Description: A gooey, spring-animated picker for entering a duration in hours and minutes. - Install: `npx shadcn@latest add swamimalode07/rare-ui/duration-picker` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/duration-picker.tsx - Dependencies: motion, figma-squircle, flubber, react-use-measure, @radix-ui/react-slot ### Fluid Orb - Page: https://rareui.com/components/fluidorb - Description: An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode. - Install: `npx shadcn@latest add swamimalode07/rare-ui/fluid-orb` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/fluid-orb.tsx ### Scroll Progress - Page: https://rareui.com/components/scrollprogressindicator - Description: A scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to. - Install: `npx shadcn@latest add swamimalode07/rare-ui/scroll-progress` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/scroll-progress.tsx - Dependencies: motion ### Code Block - Page: https://rareui.com/components/codeblock - Description: A clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest. - Install: `npx shadcn@latest add swamimalode07/rare-ui/code-block` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/code-block.tsx - Dependencies: motion, prism-react-renderer ### Gravity Letters - Page: https://rareui.com/components/gravityletters - Description: A playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects. - Install: `npx shadcn@latest add swamimalode07/rare-ui/gravity-letters` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/gravity-letters.tsx ### OTP Input - Page: https://rareui.com/components/otpinput - Description: A one-time-code input whose characters roll into place behind a caret that slides from slot to slot. - Install: `npx shadcn@latest add swamimalode07/rare-ui/otp-input` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/otp-input.tsx - Dependencies: motion ### GitHub activity - Page: https://rareui.com/components/githubactivity - Description: A contribution heatmap with a footer panel that expands over the grid to rank your top repositories. - Install: `npx shadcn@latest add swamimalode07/rare-ui/github-activity` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/github-activity.tsx - Dependencies: motion ### Emoji reaction - Page: https://rareui.com/components/emojireaction - Description: A tapback-style reaction button that opens a bar of Apple emoji and sends copies of your pick floating up out of it. - Install: `npx shadcn@latest add swamimalode07/rare-ui/emoji-reaction` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/emoji-reaction.tsx - Dependencies: motion, react-apple-emojis, lucide-react, @radix-ui/react-slot ### Notification bell - Page: https://rareui.com/components/notificationbell - Description: An iOS-style notification bell with an unread count badge. - Install: `npx shadcn@latest add swamimalode07/rare-ui/notification-bell` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/notification-bell.tsx - Dependencies: motion, @radix-ui/react-slot ### Step player - Page: https://rareui.com/components/stepplayer - Description: An iOS-style stepped progress track with a play, pause and replay control. The active step stretches into a bar that fills as it plays. - Install: `npx shadcn@latest add swamimalode07/rare-ui/step-player` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/step-player.tsx - Dependencies: motion, flubber ### Grid Reveal - Page: https://rareui.com/components/gridreveal - Description: A loading state for AI images that turns into the real picture when it arrives. - Install: `npx shadcn@latest add swamimalode07/rare-ui/grid-reveal` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/grid-reveal.tsx - Dependencies: motion ### Gooey nav - Page: https://rareui.com/components/gooeynav - Description: A gooey navigation bar that separates the selected item from the group. - Install: `npx shadcn@latest add swamimalode07/rare-ui/gooey-nav` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/gooey-nav.tsx - Dependencies: motion ### Delete button - Page: https://rareui.com/components/deletebutton - Description: A delete button that asks for confirmation in place, no dialog needed. - Install: `npx shadcn@latest add swamimalode07/rare-ui/delete-button` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/delete-button.tsx - Dependencies: motion ### Animated counter - Page: https://rareui.com/components/animatedcounter - Description: A number that counts to its new value on a wheel of digits, like an odometer. - Install: `npx shadcn@latest add swamimalode07/rare-ui/animated-counter` - Source: https://github.com/swamimalode07/rare-ui/blob/main/components/ui/animated-counter.tsx - Dependencies: motion ## Notes - Components are TypeScript + Tailwind CSS, following shadcn/ui conventions (cn + className merging, prop spreading, data-slot attributes). - Free for personal and commercial use. Attribution appreciated; please don't resell as your own kit.