Componentes de Components

Componentes de Components listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.

• RainbowButton — Botón CTA con un degradado arcoíris que se desplaza sin fin y un halo del mismo degradado difuminado detrás. Llamativo sin ser hortera, ideal para la acción principal. Solo CSS, sin librerías.
• SpecCallout — Componente Components clean-room, sin dependencias.
• ZoomCanvas — Componente Components clean-room, sin dependencias.
• TumbleBox — Componente Components clean-room, sin dependencias.
• LiquidFill — Componente Components clean-room, sin dependencias.
• CubeReel — Componente Components clean-room, sin dependencias.
• ThemeMorph — Interruptor claro/oscuro con transición de revelado circular entre un sol y una luna dibujados a medida (View Transitions con fallback). Cambia su propio panel, sin tocar el tema global de la página.
• ReorderList — Lista reordenable arrastrando: el elemento sigue al cursor y los vecinos se apartan con animación FLIP propia (sin librerías). Con asa de arrastre opcional.
• PulseButton — Botón con un halo que late en bucle para atraer la atención sin ser intrusivo. Ideal en llamadas a la acción destacadas.
• ProgressRing — Indicador de progreso circular (anillo SVG) con el porcentaje contando en el centro. Para cargas, métricas o gauges de dashboard.
• PhoneFrame — Maqueta de móvil genérica (marco, bisel, cámara perforada) para enmarcar capturas o demos en heros de landing. Diseño propio, sin marca.
• InkButton — Botón con onda de tinta tipo Material que se expande desde el punto exacto del clic y se desvanece. Feedback táctil clásico.
• HoldToConfirm — Botón de «mantener pulsado para confirmar»: una barra se rellena durante el tiempo configurado y al completarse dispara la acción; soltar antes cancela. Evita confirmaciones accidentales en acciones destructivas.
• GleamButton — Botón con un destello que recorre el borde en bucle (gradiente cónico giratorio recortado a la orla). Reclamo para CTAs principales.
• FileTree — Árbol de archivos colapsable con iconos de carpeta y archivo, construido desde una simple lista de rutas. Completa el set de componentes «dev-tool».
• CommandBar — Barra de búsqueda que al enfocarse despliega un panel de acciones filtrables, navegable con teclado (flechas, Enter, Escape). Estética de command palette SaaS/AI.
• CodeDiff — Comparador de código antes/después con un divisor arrastrable y resaltado de sintaxis (mismo tokenizador que CodeBlock). Para mostrar cambios o refactors.
• BrowserFrame — Ventana de navegador genérica con barra de puntos, campo de URL y tema claro/oscuro, para presentar la captura de una web o app. Diseño propio, sin logos.
• AvatarRing — Fila de avatares solapados con un contador «+N» de prueba social; al pasar el ratón cada avatar se eleva. Para testimonios y secciones de precios.
• TrailMenu — Componente Components clean-room, sin dependencias.
• ScrollMosaic — Componente Components clean-room, sin dependencias.
• RubberGrid — Componente Components clean-room, sin dependencias.
• RevealGrid — Componente Components clean-room, sin dependencias.
• PushGrid — Componente Components clean-room, sin dependencias.
• EchoExpand — Componente Components clean-room, sin dependencias.
• DriftGrid — Componente Components clean-room, sin dependencias.
• WorldMap — Componente Components clean-room, sin dependencias.
• VanishInput — Componente Components clean-room, sin dependencias.
• TextRevealCard — Componente Components clean-room, sin dependencias.
• Terminal — Componente Components clean-room, sin dependencias.
• StickyBanner — Componente Components clean-room, sin dependencias.
• StatefulButton — Componente Components clean-room, sin dependencias.
• Sidebar — Componente Components clean-room, sin dependencias.
• ResizableNavbar — Componente Components clean-room, sin dependencias.
• RailNav — Componente Components clean-room, sin dependencias.
• Pin3D — Componente Components clean-room, sin dependencias.
• Notch — Componente Components clean-room, sin dependencias.
• NavbarMenu — Componente Components clean-room, sin dependencias.
• MultiStepLoader — Componente Components clean-room, sin dependencias.
• Marquee3D — Componente Components clean-room, sin dependencias.
• Loaders — Componente Components clean-room, sin dependencias.
• Lens — Componente Components clean-room, sin dependencias.
• LayoutGrid — Componente Components clean-room, sin dependencias.
• Keyboard — Componente Components clean-room, sin dependencias.
• ImagesSlider — Componente Components clean-room, sin dependencias.
• ImagesBadge — Componente Components clean-room, sin dependencias.
• HoverBorderGradient — Componente Components clean-room, sin dependencias.
• GooeyInput — Componente Components clean-room, sin dependencias.
• GlareCard — Componente Components clean-room, sin dependencias.
• FocusCards — Componente Components clean-room, sin dependencias.
• FloatingNavbar — Componente Components clean-room, sin dependencias.
• FlipCardStack — Componente Components clean-room, sin dependencias.
• FileUpload — Componente Components clean-room, sin dependencias.
• ExpandableCard — Componente Components clean-room, sin dependencias.
• DraggableCard — Componente Components clean-room, sin dependencias.
• DirectionHover — Componente Components clean-room, sin dependencias.
• Compare — Componente Components clean-room, sin dependencias.
• CometCard — Componente Components clean-room, sin dependencias.
• CodeBlock — Componente Components clean-room, sin dependencias.
• CardsCarousel — Componente Components clean-room, sin dependencias.
• AnimatedTestimonials — Componente Components clean-room, sin dependencias.
• AnimatedTabs — Componente Components clean-room, sin dependencias.
• AnimatedModal — Componente Components clean-room, sin dependencias.
• WobbleCard — Componente Components clean-room, sin dependencias.
• TiltedCard — Componente Components clean-room, sin dependencias.
• TiltTooltip — Componente Components clean-room, sin dependencias.
• Stepper — Componente Components clean-room, sin dependencias.
• StaggeredMenu — Componente Components clean-room, sin dependencias.
• Stack — Componente Components clean-room, sin dependencias.
• SpotlightCard — Componente Components clean-room, sin dependencias.
• ScrollStack — Componente Components clean-room, sin dependencias.
• ReflectiveCard — Componente Components clean-room, sin dependencias.
• ProfileCard — Componente Components clean-room, sin dependencias.
• PointerFollow — Componente Components clean-room, sin dependencias.
• PixelCard — Componente Components clean-room, sin dependencias.
• PillNav — Componente Components clean-room, sin dependencias.
• ModelViewer — Componente Components clean-room, sin dependencias.
• Masonry — Componente Components clean-room, sin dependencias.
• MagicBento — Componente Components clean-room, sin dependencias.
• Lanyard — Componente Components clean-room, sin dependencias.
• InfiniteMenu — Componente Components clean-room, sin dependencias.
• HoverRevealCards — Componente Components clean-room, sin dependencias.
• GooeyNav — Componente Components clean-room, sin dependencias.
• GlassSurface — Componente Components clean-room, sin dependencias.
• GlassIcons — Componente Components clean-room, sin dependencias.
• Folder — Componente Components clean-room, sin dependencias.
• FlyingPosters — Componente Components clean-room, sin dependencias.
• FluidGlass — Componente Components clean-room, sin dependencias.
• FlowingMenu — Componente Components clean-room, sin dependencias.
• ElasticSlider — Componente Components clean-room, sin dependencias.
• DomeGallery — Componente Components clean-room, sin dependencias.
• Dock — Componente Components clean-room, sin dependencias.
• DecayCard — Componente Components clean-room, sin dependencias.
• Counter — Componente Components clean-room, sin dependencias.
• CircularGallery — Componente Components clean-room, sin dependencias.
• CipherCard — Componente Components clean-room, sin dependencias.
• ChromaGrid — Componente Components clean-room, sin dependencias.
• Carousel — Componente Components clean-room, sin dependencias.
• CardSwap — Componente Components clean-room, sin dependencias.
• CardNav — Componente Components clean-room, sin dependencias.
• BubbleMenu — Componente Components clean-room, sin dependencias.
• BounceCards — Componente Components clean-room, sin dependencias.
• BorderGlow — Componente Components clean-room, sin dependencias.
• AnimatedList — Componente Components clean-room, sin dependencias.