Forem: Mudunuri bhaskara karthikeya varma

Building Modern Web UIs with Eldora UI — Animated, Functional, and Beautiful

Mudunuri bhaskara karthikeya varma — Tue, 07 Oct 2025 20:27:13 +0000

Building Modern Web UIs with Eldora UI — Animated, Functional, and Beautiful

Hey developers 👋

I’ve been working on Eldora UI, an open-source React + Tailwind component library built for modern web interfaces.

It’s fast, responsive, and filled with delightful animations. 💫

Here are a few of my favorite new components 👇

⚡ Animated Framework

🔐 OTP Verification with Clerk

🗺️ Animated Badge Component

Each component is fully customizable and optimized for Next.js and Tailwind CSS.

Eldora UI makes building visually rich, accessible interfaces incredibly simple.

If you’re into frontend innovation, open-source contributions, or just love beautiful UI,

give it a try and share your feedback — I’d love to hear what you think! 🚀

👉 Explore it here: Eldora UI

💚 Made by Mudunuri Bhaskara Karthikeya Varma

webdev #react #nextjs #frontend #opensource

EldoraUI : New CLI, SaaS Template & More!

Mudunuri bhaskara karthikeya varma — Tue, 17 Jun 2025 19:32:31 +0000

The wait is over! 🚀 Eldora UI v3 is here with developer-first features, smoother integrations, and a premium template to supercharge your next startup idea.

✨ What's New in Eldora UI v3?

With this new release, we've focused on developer productivity, modern tooling, and extending the design ecosystem of Eldora UI to real-world applications. Here's what’s packed in:

1. 🧪 CLI Integration (Powered by shadcn)

Setting up UI components just got easier. You can now add Eldora UI components directly into your app using our brand-new CLI layer built on top of shadcn/ui.

🔧 One-liner Setup:

npx shadcn@latest add "https://eldoraui.site/r/bentogrid"

It automatically pulls components from Eldora’s registry, respecting your existing configuration and project setup. Whether you're bootstrapping a new app or integrating into an existing one, this CLI ensures a smooth DX.

👉 See CLI Docs →

2. ⚙️ Support for shadcn/ui v0

We now support shadcn/ui v0 — meaning you get all the power and customization of the latest version, combined with Eldora’s design language.

You can:

Mix-and-match Eldora UI components with shadcn's primitives
Enjoy typed components in TypeScript
Maintain full styling control via Tailwind

3. 🧩 Premium SaaS Template (For Sale)

Looking to build your next SaaS startup, MVP, or landing page? Introducing our premium SaaS Starter Template — professionally designed, responsive, and developer-friendly.

Built using:

Next.js
TypeScript
Tailwind CSS
Shadcn UI
Framer Motion

This template gives you:

Hero sections, pricing grids, testimonials
Built-in responsiveness and animations
Easily customizable layout with clean code

👉 Preview & Buy Now:

eldoraui.site/docs/templates/saas

🛠 Why Eldora UI?

🎨 Aesthetic out of the box
⚡ Performance-focused
📦 Component-rich and scalable
🤝 Friendly with shadcn/ui, MDX, Tailwind & more

Eldora UI is growing as a versatile UI layer built for speed, scale, and style. We’re just getting started — and v3 marks the beginning of a new phase.

Enhance Your Web Projects with Sphere Animations Using EldoraUI 🚀

Mudunuri bhaskara karthikeya varma — Tue, 07 Jan 2025 10:08:29 +0000

Introduction

Animations have become an essential part of modern web design, adding life and interactivity to static interfaces. In this post, I’ll walk you through creating a Sphere Animation component using the lightweight and versatile Anime.js library. Whether you're a beginner or an experienced developer, this guide will help you integrate visually captivating animations into your projects.

Prerequisites

Before diving into the implementation, ensure you have the following:

Basic understanding of React.js and TypeScript.
Node.js installed on your system.

Getting Started

Step 1: Install Dependencies

First, install animejs and its TypeScript types using npm:

npm install --save-dev animejs @types/animejs

Step 2: Add the Component

Create a new file named sphereanimation.tsx inside your components directory and paste the following code:

import React, { useEffect } from 'react';
import anime from 'animejs';

const SphereAnimation = () => {
  useEffect(() => {
    anime({
      targets: '.sphere',
      translateY: [-40, 40],
      direction: 'alternate',
      loop: true,
      easing: 'easeInOutSine',
    });
  }, []);

  return (
    <svg className="sphere" width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="skyblue" />
    </svg>
  );
};

export default SphereAnimation;

This component renders an SVG circle and animates it vertically using Anime.js.

Step 3: Integrate into Your Project

Now, import the SphereAnimation component into your application and use it:

import SphereAnimation from './components/sphereanimation';

function App() {  
  return (  
    <div style={{ textAlign: 'center', marginTop: '2rem' }}>  
      <h1>Dynamic Sphere Animation</h1>  
      <SphereAnimation />  
    </div>  
  );  
}  

export default App;

Customization

Anime.js makes it incredibly easy to customize animations. You can tweak properties like duration, easing, or even add additional effects like rotation or color changes. For example:

anime({  
  targets: '.sphere',  
  translateY: [-40, 40],  
  scale: [1, 1.5],  
  direction: 'alternate',  
  loop: true,  
  easing: 'easeInOutSine',  
});

Why Use Sphere Animation?

Simplicity: Adding animations doesn’t need to be complicated.
Customization: Tailor animations to match your project’s theme.
Lightweight: Anime.js is optimized for performance, ensuring smooth animations.
TypeScript-Friendly: With type definitions, you get a better developer experience.

Demo

Check out a live demo of the Sphere Animation here.

Final Thoughts

Animations elevate the user experience by adding polish to your application. The Sphere Animation component is just the beginning—Anime.js can handle much more complex animations. Start small, experiment, and bring your designs to life!

If you found this guide helpful, feel free to share your thoughts or showcase your animations in the comments. Happy coding! 🎉

About the Author

Hi, I’m Karthikeya Varma, a passionate full-stack developer exploring the intersection of creativity and code. Check out more of my work at GitHub.

Introducing EldoraUI 2.0 🚀

Mudunuri bhaskara karthikeya varma — Sat, 14 Dec 2024 14:43:32 +0000

🚀 Introducing Eldora UI 2.0

We are thrilled to announce the release of Eldora UI 2.0, a major milestone in the journey of our open-source UI component library. With this version, we’ve introduced new features, improved performance, and ensured that Eldora UI continues to empower developers in building modern, responsive, and accessible web applications effortlessly.

🌟 What's New in Version 2.0

1. Revamped Component Library

Our components have been redesigned and optimized for better performance and enhanced usability. With React, TypeScript, and Tailwind CSS as our foundation, you can expect:

Aesthetic and customizable components.
Improved responsiveness for all screen sizes.
Accessibility enhancements to meet WCAG standards.

2. New Animations and Effects

Building on feedback, we've added:

13 new text animation components, perfect for captivating user interfaces.
Interactive hover effects for cards and buttons.
Seamless integration with libraries like Framer Motion.

3. Improved Documentation

Version 2.0 features:

Comprehensive, user-friendly documentation.
Live examples and code snippets for quick implementation.
A new blog section to keep you updated on best practices and releases.

4. Dark Mode Support

All components now include dark mode styles by default, ensuring your applications look great in both light and dark themes.

5. Performance Boost

Reduced bundle size for faster load times.
Better tree-shaking to include only what you need.
Optimized CSS and JS for improved performance.

🎯 Why Choose Eldora UI 2.0?

Eldora UI is crafted for developers who value simplicity, customization, and cutting-edge design. With the latest updates, Eldora UI 2.0 makes it easier than ever to:

Build beautiful, functional interfaces.
Streamline development with reusable components.
Stay future-proof with modern web technologies.

💡 What’s Next?

Our roadmap for Eldora UI includes:

Expanding the component library with more advanced and niche components.
Adding pre-built themes for quick customization.
Enhancing developer tools for better integration with popular frameworks.

🚀 Join the Community

Eldora UI is open-source, and your contributions are welcome! Share your feedback, report issues, or suggest features on our GitHub repository. Let’s build something amazing together.

🙏 A Note of Thanks

This release wouldn’t have been possible without the support of our users, contributors, and the developer community. A heartfelt thank you to everyone who believed in Eldora UI and helped it grow.

Start building with Eldora UI 2.0 today. We can't wait to see the incredible projects you’ll create!

🚀 Coming Soon: Eldora 2.0 – The Future of Page Design

Mudunuri bhaskara karthikeya varma — Thu, 21 Nov 2024 15:54:51 +0000

We’re excited to announce that Eldora 2.0 is on the horizon! This highly anticipated update will revolutionize how you design and build web pages, introducing a suite of powerful components that bring creativity, functionality, and interactivity to the forefront.

Here’s an exclusive sneak peek into what’s coming in Eldora 2.0.

Before hovering on map

After hovering on map

Why Eldora 2.0?

Eldora 2.0 isn’t just an update—it’s a toolkit designed to empower developers and designers to create breathtaking webpages effortlessly. With new components and enhanced features, you’ll have everything you need to craft immersive user experiences and eye-catching designs.

✨ What’s New in Eldora 2.0?

1. Enhanced Layouts with New Sections

Build compelling and structured layouts using our latest Sections:

Header: Create impactful headers that leave a lasting impression.
Bento Grid: Present your content in beautifully structured grids.
Testimonials: Showcase authentic user feedback with a professional touch.
Gradient Pricing: Add a modern flair to pricing tables with gradient effects.

2. Game-Changing Components

Eldora 2.0 introduces a wide range of new components designed to elevate your designs:

Testimonial Slider: Highlight client testimonials in a dynamic, scrolling slider.
Cobe Globe: Add a 3D interactive globe for data visualization or storytelling.
Dynamic Square: Incorporate visually engaging, animated square elements.
Code Snippet: Seamlessly display clean, styled code blocks for technical documentation.
Scratch to Reveal: Add an interactive “scratch-off” effect for hidden surprises.
Animated Card: Create engaging animated cards to grab attention.
Tweet Grid: Integrate tweets into your design with style and functionality.
Wrap Container: Simplify content organization with flexible containers.

3. Interactive Buttons

Buttons are key to user interaction, and Eldora 2.0 brings an exciting set of options:

Hover Me Button: Add hover effects that invite interaction.
Git Star Button: Encourage users to star your GitHub project.
Shimmer Button: Add sleek shimmer effects for a modern look.
Spotlight Button: Create a glowing spotlight effect for call-to-action buttons.

4. Text Animations that Amaze

Bring your content to life with new text animation effects:

Blur In: Smoothly reveal text with a blur effect.
Morphing Text: Transform text dynamically for creative storytelling.
Wavy Text: Add subtle wave animations for a playful touch.
Scroll-Based Velocity: Animate text based on scroll speed for immersive effects.

5. Stunning Backgrounds

Eldora 2.0 introduces Novatrix Background, a visually captivating background effect perfect for modern designs.

🚧 Stay Tuned

Eldora 2.0 is coming soon, and we can’t wait to see the incredible designs you’ll create with these new components. Follow us for updates, sneak peeks, and the official release announcement!

Let’s build the future of web design together. 🌟

Introducing the Swirl Component in Eldora UI

Mudunuri bhaskara karthikeya varma — Thu, 15 Aug 2024 11:18:05 +0000

Introducing the Swirl Component in Eldora UI

We are excited to unveil a new addition to the Eldora UI library—the Swirl component! This component introduces a captivating swirling background effect, designed to bring a touch of elegance and motion to your web projects.

What is the Swirl Component?

The Swirl component creates a dynamic, swirling animation that adds depth and visual interest to your designs. Perfect for backgrounds, overlays, or any section where you want to create a striking visual impact, the Swirl component combines style with functionality.

Key Features

Dynamic Animation: Enjoy a smooth and continuous swirling effect that captures attention and enhances your user interface.
Highly Customizable: Easily adjust parameters such as color, speed, and size using Tailwind CSS and Framer Motion to perfectly fit your design needs.
Responsive and Performance-Optimized: The Swirl component ensures a seamless experience across all devices without compromising performance.

How to Implement

Integrating the Swirl component into your project is straightforward. Visit the Swirl Component page on Eldora UI to view detailed documentation and examples.

🚀 New Release: SaaS Landing Page Template in Eldora UI! 🌟💻

Mudunuri bhaskara karthikeya varma — Thu, 25 Jul 2024 16:32:55 +0000

New Release: SaaS Landing Page Template in Eldora UI!

We are thrilled to announce the release of our latest addition to Eldora UI: the SaaS Landing Page Template! This template is designed to help you create a professional and compelling landing page for your SaaS product with ease.

What is the SaaS Landing Page Template? The SaaS Landing Page Template is a pre-designed, fully customizable template that enables you to showcase your SaaS product’s features, benefits, and value proposition effectively. Built with Eldora UI’s powerful and flexible components, this template ensures a seamless and cohesive design that can be tailored to your brand.

Key Features:

Modern and Clean Design: A sleek and contemporary layout that highlights your product’s key features and benefits. Responsive: Fully responsive design to ensure your landing page looks great on all devices, from desktops to mobile phones. Customizable: Easily modify the template to match your brand’s colors, fonts, and styles with simple customization options. Engaging Elements: Includes interactive elements such as feature sections, testimonials, pricing tables, and call-to-action buttons to engage and convert visitors. Optimized for Performance: Fast load times and smooth user experience to keep your visitors engaged.

Demo and Documentation: Check out our demo page to see the SaaS Landing Page Template in action and explore the documentation for detailed instructions on customization. Demo Link

Why Choose Eldora UI’s SaaS Landing Page Template?

Quick Setup: Get your landing page up and running quickly without starting from scratch. Professional Presentation: Present your SaaS product in a polished and attractive manner. Continuous Updates: Benefit from ongoing improvements and support from the Eldora UI community. Start creating an impactful landing page for your SaaS product with the new SaaS Landing Page Template from Eldora UI today! We can’t wait to see the amazing landing pages you’ll build. 🚀✨

Stay tuned for more templates and features coming soon. Happy coding!

Introducing Eldora UI

Mudunuri bhaskara karthikeya varma — Wed, 17 Jul 2024 12:26:57 +0000

Introducing Eldora UI, your go-to open-source UI library for creating stunning web interfaces. Leveraging the power of React, TypeScript, Tailwind CSS, and Framer Motion, our customizable, animated components enhance any project. Perfect for design engineers looking to build responsive, accessible, and visually appealing websites. Explore unique components like Cobeglobe and Spotlight Card, and join our active GitHub community to collaborate and innovate.

🌐 Explore more at Eldora UI