1 GitHub star = 1 new component.

Star the repo
Data Displayavatardatagroup

Overlapping Avatars

Overlapping avatars with overflow count indicator.

AJ
MK
SL
+4

Usage

Copy and paste this code into your React component:

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

<AvatarGroupStack>Content</AvatarGroupStack>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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; }

Quick Info

Category
Data Display
Filename
AvatarGroupStack.tsx
Dependencies
None โ€” pure React + CSS
Tags
avatardatagroup