Polished components for modern web
A free collection of React and Next.js components built with Tailwind CSS, Motion, GSAP, and Three.js. Copy the source or install with the shadcn CLI — the code is yours.
Featured
Highlights
A selection of the strongest components from the beta catalog.
Browse
Categories
Explore components by purpose.
Backgrounds & Effects
Animated backgrounds, noise textures, particle fields, and visual effects.
Heroes
Full-featured hero sections with animation, typography, and visual depth.
Navigation
Navbars, sidebars, and navigation patterns built for modern web apps.
CTA Sections
Call-to-action sections that convert — clean layouts with strong visual hierarchy.
Cards
Feature cards, product cards, and interactive display cards.
Text Animations
Reveal animations, typewriter effects, and typographic motion.
Scroll & Parallax
Scroll-driven animations, horizontal scrollers, and parallax sections.
Buttons
Animated and interactive button variants — magnetic, gradient, and more.
Footers
Minimal and creative footer layouts ready for production use.
3D Experiments
Three.js and React Three Fiber components for immersive visual experiences.
Get started
Two ways to install
Copy the source directly into your project or use the shadcn CLI. Either way, you own the code.
CLI installation
$ npx shadcn@latest add @mridha/animated-gradient-buttonAdd the registry to your components.json and install any component with one command.
Manual copy
Every component page includes a code tab with the complete source. Copy it, paste it, and customize it — no build step required.
Dependencies are listed clearly. Install only what each component actually needs.
Installation guidePhilosophy
Why Mridha UI
Built for developers who care about what's inside the component, not just how it looks.
Source code ownership
You get the actual source file — not a wrapper around a private package. Read it, modify it, delete it.
Accessible defaults
Every component includes keyboard navigation, visible focus states, semantic HTML, and reduced-motion support.
Responsive by design
Built mobile-first. Preview each component at desktop, tablet, and mobile breakpoints before you copy.
Performance discipline
CSS for simple effects, Motion for UI animation, GSAP for scroll choreography, Three.js only when it matters.