How do I install Team Section With Light Background?

Run npx shadcn@latest add @aceternity/team-section-with-light-background in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Team Section With Light Background responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Team Section With Light Background is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Team Sections

4 / 5

Team Section With Light Background

A responsive team grid with portrait cards on soft gray surfaces, names and roles, and a dotted divider before each short bio.

A team who is not afraid to take risks and bet on themselves.

Meet the creators, strategists, and makers who move our mission forward, combining design, code, and vision to achieve remarkable results.

Manu Arora

Founder & CEO

Builder of digital products and founder at Aceternity, Manu focuses on product innovation and cross-disciplinary leadership.

John Doe

Co-Founder & CTO

Architects scalable infrastructures and leads our technology vision, with a passion for mentoring the engineering team.

Glennfiddich Doe

Software Engineer

Specializes in frontend frameworks and UI systems—Glennfiddich crafts seamless and accessible user interfaces.

Jameson Beam

Designer

Designs clear, elegant digital experiences, blending visual storytelling with empathetic user research.

Johnny Walker

Marketing Manager

Drives brand growth through creative campaigns and analytics, always seeking meaningful community engagement.

Jack Daniels

HR & Management

Fosters company culture and supports team wellbeing, ensuring seamless operations and professional development.

Samantha Rives

Product Manager

Bridges vision and execution, keeping projects on track and fostering collaboration across all disciplines.

Evelyn Martinez

QA Lead

Ensures every release meets rigorous quality standards, blending keen attention to detail with a love for process improvement.

Use this block on About pages or culture sections when you want a clean, light look without grid lines. Each card shows a photo, name, role, and a short excerpt separated by a subtle dotted line.

The layout is responsive: one column on small screens, two on medium, and four on large. Replace the sample team data with your own people and copy.

More from Team Sections

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Team Section With Scales Team Sections

About this block

Use this block on About pages or culture sections when you want a clean, light look without grid lines. Each card shows a photo, name, role, and a short excerpt separated by a subtle dotted line.

The layout is responsive: one column on small screens, two on medium, and four on large. Replace the sample team data with your own people and copy.