# RareUI ## Docs - [Book 3D](https://mintlify.wiki/Codewithswappy/RareUI/3d-elements/book-3d.md): A CSS 3D interactive book component with a flipping cover, page-turning animations, and fully customizable content — powered by Framer Motion. - [Liquid Metal](https://mintlify.wiki/Codewithswappy/RareUI/3d-elements/liquid-metal.md): A WebGL2 shader-based component that renders text or images with a flowing liquid metal effect using GLSL fragment shaders. - [Animated Tab](https://mintlify.wiki/Codewithswappy/RareUI/components/animated-tab.md): A controlled tab strip with a spring-animated active pill that glides between tabs, rendered on a frosted-glass container. - [Floating Navigation](https://mintlify.wiki/Codewithswappy/RareUI/components/floating-navigation.md): A fixed bottom navigation bar with per-icon micro-animations, hover tooltips, and a glowing active pill. - [Glass Shimmer Button](https://mintlify.wiki/Codewithswappy/RareUI/components/glass-shimmer-button.md): A glassmorphism button with a continuous shimmer sweep animation and hover scale effects. - [Liquid Button](https://mintlify.wiki/Codewithswappy/RareUI/components/liquid-button.md): A button with a physics-based liquid gooey drip effect that reacts to mouse movement. - [Liquid Tooltip](https://mintlify.wiki/Codewithswappy/RareUI/components/liquid-tooltip.md): A tooltip with spring physics that wobbles and tracks mouse position, giving content a satisfying liquid-like feel. - [Loading Spinner](https://mintlify.wiki/Codewithswappy/RareUI/components/loading-spinner.md): A minimal animated spinner with a sweeping arc and a shimmer loading text, built with Framer Motion SVG. - [Neumorphism 3D Button](https://mintlify.wiki/Codewithswappy/RareUI/components/neumorphism3DButton.md): A 3D neumorphic button with multi-layer shadows, gradient text, and a realistic press animation. - [Particle Card](https://mintlify.wiki/Codewithswappy/RareUI/components/particle-card.md): An interactive profile card that explodes into animated particles on hover, revealing detailed bio and tags. - [Premium Button](https://mintlify.wiki/Codewithswappy/RareUI/components/premium-button.md): A bold gradient button with an animated lime-green background shift and a built-in crown SVG icon. - [Premium Profile Card](https://mintlify.wiki/Codewithswappy/RareUI/components/premium-profile-card.md): A high-end, self-contained profile card with 3D mouse-tracking tilt, a flip animation to reveal contact details, and a spinning gradient border. - [Retro Pixel Button](https://mintlify.wiki/Codewithswappy/RareUI/components/retro-pixel-button.md): A retro-styled animated button with a spring-driven sliding pixel block, rotating pixel arrow, and text morph effect. - [Soft Button](https://mintlify.wiki/Codewithswappy/RareUI/components/soft-button.md): A neumorphic button with multi-layer soft shadows, letter-spacing animation, and a glow effect on hover. - [Toast Tabs](https://mintlify.wiki/Codewithswappy/RareUI/components/toast-tabs.md): An avatar-switcher tab component that presents active content in a toast-style card with an animated progress ring and autoplay. - [Add Utilities](https://mintlify.wiki/Codewithswappy/RareUI/installation/add-utilities.md): Install the dependencies and utility functions used by all RareUI components — framer-motion, clsx, tailwind-merge, and the cn() helper. - [CLI](https://mintlify.wiki/Codewithswappy/RareUI/installation/cli.md): Full reference for the RareUI CLI — init, add, and diff commands with all options, package manager variants, and FAQ. - [Install Next.js](https://mintlify.wiki/Codewithswappy/RareUI/installation/install-nextjs.md): Create a new Next.js project with TypeScript, Tailwind CSS, and the App Router — the recommended foundation for RareUI. - [Install Tailwind CSS](https://mintlify.wiki/Codewithswappy/RareUI/installation/install-tailwind.md): Tailwind CSS 4 is included in the default Next.js setup. This page covers verification, manual configuration, and dark mode CSS variables. - [Liquid Wave](https://mintlify.wiki/Codewithswappy/RareUI/interactive-background/liquid-wave.md): A full-bleed interactive fluid dynamics background powered by Three.js WebGL, with mouse-driven waves and multi-color gradient palettes. - [Introduction](https://mintlify.wiki/Codewithswappy/RareUI/introduction.md): RareUI is a free, open-source React component library with 100+ premium animated components — copy-paste ready and built on React 19, Next.js 16, Tailwind CSS 4, and Framer Motion 12. - [Quickstart](https://mintlify.wiki/Codewithswappy/RareUI/quickstart.md): Add your first RareUI component in under 5 minutes. Choose between the CLI (recommended) or manual copy-paste. - [Image Expand Testimonial](https://mintlify.wiki/Codewithswappy/RareUI/sections/image-expand-testimonial.md): A responsive testimonial section where reviewer photos expand with smooth spring animations as you navigate between reviews, with autoplay support. - [Magnetic Scatter Text](https://mintlify.wiki/Codewithswappy/RareUI/text-animation/magnetic-scatterText.md): An interactive text animation that scatters characters on hover with magnetic spring physics, powered by Framer Motion. - [Sound Text](https://mintlify.wiki/Codewithswappy/RareUI/text-animation/sound-text.md): An interactive text component that plays Web Audio API tones on hover, mapping each character to a pentatonic scale frequency. - [Vapor Smoke Text](https://mintlify.wiki/Codewithswappy/RareUI/text-animation/vapor-smokeText.md): An ethereal text animation that reveals characters through dissolving smoke and blur effects, powered by Framer Motion spring physics. - [Word Magnet](https://mintlify.wiki/Codewithswappy/RareUI/text-animation/word-magnet.md): A physics-based text component where words are repelled by the cursor and snap back to their original positions using spring animations. ## OpenAPI Specs - [openapi](https://mintlify.wiki/Codewithswappy/RareUI/api-reference/openapi.json)