Kinetic UI | The Creative Motion Component Library

The TeamSection component is designed for "About Us" pages. It features multiple high-end layouts including minimal lists, grids, and glassmorphic interactive cards with integrated social links.

Live Preview

Team Section

Meet Our Team

The brilliant minds behind our success.

Alex Rivera

Lead Interactive Developer

Sarah Connor

Creative Director

Emily Chen

UX Architect

Marcus Johnson

Frontend Engineer

Installation

npx kinetic-ui-cli@latest add team-section

Props

Prop	Type	Default	Description
`members`	`TeamMember[]`	-	Array of team member objects (id, name, role, avatar, bio, socials).
`title`	`string`	`'Meet Our Team'`	Heading text for the section.
`description`	`string`	`'The brilliant minds behind our success.'`	Subtitle or descriptive paragraph below the title.
`variant`	`'default' \| 'cards' \| 'minimal'`	`'default'`	The visual style and layout of the team grid.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { TeamSection } from "@/components/creative/team-section";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { TeamSection } from "@/components/creative/team-section";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <TeamSection
        members{/* value */}
        title="example"
        description="example"
      />
    </div>
  );
}

Frequently Used With