1 GitHub star = 1 new component.

Star the repo
Data Displayuserlistdata

Directory Card

User list item with avatar, role, and action menu.

JS
John Doe

Software Engineer

Online

Usage

Copy and paste this code into your React component:

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

<UserDirectoryItem>Content</UserDirectoryItem>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: src/components/UserDirectoryItem.tsx + UserDirectoryItem.css:

UserDirectoryItem.tsx
'use client';

import './UserDirectoryItem.css';

/** UserDirectoryItem โ€” ported from astro-component-kit. */
export interface UserDirectoryItemProps {
}

export function UserDirectoryItem({}: UserDirectoryItemProps) {
  return (
    <>
      <div className="u-item" data-rk-2f9e54="">
        <div className="u-pic" data-rk-2f9e54="">JS</div>
        <div className="u-info" data-rk-2f9e54=""><h5 data-rk-2f9e54="">John Doe</h5><p data-rk-2f9e54="">Software Engineer</p></div>
        <div className="u-stat" data-rk-2f9e54="">Online</div>
      </div>
    </>
  );
}

export default UserDirectoryItem;
UserDirectoryItem.css
/* UserDirectoryItem โ€” ported from astro-component-kit (data/UserDirectoryItem.astro) */

.u-item:where([data-rk-2f9e54]) { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.2s; }
.u-item:hover:where([data-rk-2f9e54]) { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.05); }
.u-pic:where([data-rk-2f9e54]) { width: 42px; height: 42px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.8rem; }
.u-info:where([data-rk-2f9e54]) h5:where([data-rk-2f9e54]) { margin: 0; color: #fff; font-size: 1rem; }
.u-info:where([data-rk-2f9e54]) p:where([data-rk-2f9e54]) { margin: 2px 0 0; font-size: 0.75rem; color: #64748b; }
.u-stat:where([data-rk-2f9e54]) { margin-left: auto; font-size: 0.65rem; color: #34d399; font-weight: 800; text-transform: uppercase; background: rgba(52, 211, 153, 0.1); padding: 2px 8px; border-radius: 4px; }

Quick Info

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