1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datosavatardatagroup

Overlapping Avatars

Pila de avatares superpuestos con recuento numérico de miembros adicionales.

AJ
MK
SL
+4

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { AvatarGroupStack } from 'react-component-kit-ui/data';

<AvatarGroupStack>Content</AvatarGroupStack>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/AvatarGroupStack.tsx + AvatarGroupStack.css:

AvatarGroupStack.tsx
'use client';

import './AvatarGroupStack.css';

/** AvatarGroupStack — ported from astro-component-kit. */
export interface AvatarGroupStackProps {
}

export function AvatarGroupStack({}: AvatarGroupStackProps) {
  return (
    <>
      <div className="av-group" data-rk-99496b="">
        <div className="av" style={{ background: "#6366f1" }} data-rk-99496b="">AJ</div>
        <div className="av" style={{ background: "#8b5cf6" }} data-rk-99496b="">MK</div>
        <div className="av" style={{ background: "#ec4899" }} data-rk-99496b="">SL</div>
        <div className="av more" data-rk-99496b="">+4</div>
      </div>
    </>
  );
}

export default AvatarGroupStack;
AvatarGroupStack.css
/* AvatarGroupStack — ported from astro-component-kit (data/AvatarGroupStack.astro) */

.av-group:where([data-rk-99496b]) { display: flex; align-items: center; }
.av:where([data-rk-99496b]) { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #080b14; margin-left: -10px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 800; color: #fff; position: relative; transition: 0.2s; cursor: pointer; }
.av:first-child:where([data-rk-99496b]) { margin-left: 0; }
.av:hover:where([data-rk-99496b]) { transform: translateY(-4px); z-index: 10; }
.more:where([data-rk-99496b]) { background: #1e293b; color: #94a3b8; border-style: dashed; }

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
AvatarGroupStack.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
avatardatagroup