$ show karthikmudunuri/eldoraui
EldoraUI is a modern, open-source React/Next.js component library distributed via a shadcn/ui-style registry. It provides over 40 animated UI components, including text animations, device mockups, 3D globes, interactive cards, and full-page blocks (headers, CTAs, pricing tables, testimonials). The repository is a monorepo with a Next.js documentation site that showcases each component with live previews, code examples, and MDX-based guides. Components are designed for copy-paste installation via CLI (`npx shadcn add`) and rely on Tailwind CSS, Motion (Framer Motion), Three.js, and Radix UI primitives. The library targets 'design engineers' building modern, animated interfaces. While the codebase is actively maintained and demonstrates strong craftsmanship in several complex components (e.g., Browser, CobeGlobe, TextAnimate), it exhibits some technical drift: pervasive typos in block names ('testimonal'), fragile DOM coupling in the table of contents, outdated TODO comments, and potential registry duplication. Overall, it is a solid, production-quality component library with high reusability.
The LLM identified 5 files worth highlighting for reuse:
A fully-featured browser mockup component with tab management, bookmarks, history, download simulation, and settings panel. It accepts over 25 optional props for customization and is self-contained, importing only shared utilities and icons. This component demonstrates high craftsmanship in composable UI design and could be extracted for use in product demos or interactive documentation.
An interactive 3D globe built with the `cobe` library and `react-spring`. It supports multiple variants: draggable, auto-rotating, and rotate-to-location (using OpenStreetMap Nominatim geocoding). The component is isolated and demonstrates non-obvious skill in combining WebGL rendering with spring physics and external API integration. Reusable for any project needing a globe visualization.
A memoized, accessible text animation component that splits text into words, characters, or lines and applies fade, blur, slide, or scale effects using `motion/react`. It uses `React.memo` and `useMemo` for performance and includes proper ARIA attributes. This component is a clean, reusable pattern for any text animation need and demonstrates thoughtful engineering beyond simple framer-motion usage.
A highly configurable sidebar component with nested sub-components (SidebarMenu, SidebarMenuButton, SidebarGroup, etc.), responsive mobile/desktop variants, collapsible states, and keyboard shortcut support. It uses React context for state management and is built on Radix UI primitives. This is a well-architected, reusable UI pattern that could be extracted for any application needing a sidebar navigation.
A WebGL-based photon beam effect using Three.js EffectComposer and UnrealBloomPass. It renders a glowing beam with customizable colors and intensity. The component is self-contained and demonstrates advanced graphics programming skills. It can be reused as a decorative background effect in landing pages or interactive experiences.