Profile Section

A compact profile component displaying a user's avatar, name, and role, with neobrutalism styling. Ideal for headers and user dashboards.

J
John Doe
Product Designer
⚙

Usage

import ProfileSection from '@/components/ProfileSection';

export default function MyPage() {
  return (
    <ProfileSection 
      name="John Doe"
      role="Product Designer"
      avatar="JD"
    />
  );
}

Examples

Default Profile Section

A profile section with default values.

Q
Quadeer
Finance/Manager
⚙
<ProfileSection />

Custom User Profile

Customized with specific user details.

J
John Doe
Product Designer
⚙
<ProfileSection 
  name="John Doe"
  role="Product Designer"
  avatar="J"
/>

Team Member Profile

Profile configured for a team member with a longer name.

A
Alexandra Smith
Lead Developer
⚙
<ProfileSection 
  name="Alexandra Smith"
  role="Lead Developer"
  avatar="A"
/>