Team Section Blocks based on shadcn/ui
Putting faces on your about page builds more trust than another paragraph about your mission. These shadcn/ui team blocks give you the member grids ready to fill: photo, name, role, a short bio, and social links, spaced evenly so the section looks intentional whether you have four people or forty.
They are built with shadcn/ui and Tailwind and reflow cleanly on mobile. Copy the code or run one npx shadcn add command, then drop in your team's photos and details. The grid keeps its rhythm as you add people, so it grows with the company.
Pick a team layout below that fits, a simple card grid, profiles with bios, a leadership row, and start from a finished section instead of aligning avatars by hand.
Permissions matrix for team roles with full, limited, and no-access states. Includes approval and security policy toggles for billing, role edits, MFA, and session controls.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROTeam Permissions Matrix
Define role access across billing, projects, and security.
| Role | Projects | Deployments | Billing | API Keys | Team |
|---|---|---|---|---|---|
Owner SystemFull access to company data and billing. | |||||
Admin SystemManage products, releases, and team settings. | |||||
Developer CustomBuild and deploy with scoped access. | |||||
Viewer SystemRead-only access for stakeholders. |
Approval rules
Require confirmation for high-impact changes.
Billing changes
Owner approval required.
Role edits
Two admins must approve.
Security policies
Apply workspace-wide access controls.
Enforce MFA
Required for admins and owners.
Session timeout
Sign out after 12 hours.
import TeamPermissionsMatrix from "@/components/creative-tim/blocks/team-permissions-matrix"
export default function Page() {
return <TeamPermissionsMatrix />
}
A team section showcasing members with profile images, names, locations, and contribution metrics (projects, hours, support). Uses a three-column grid layout with elegant card design.
Meet Our Expert Team
Dedicated professionals committed to delivering exceptional results. Our team combines expertise with passion to bring your vision to life.
Sarah Johnson
📍 San Francisco, CA
323
Projects
500+
Hours
24/7
Support
Michael Chen
📍 New York, NY
450
Projects
500+
Hours
24/7
Support
Emma Williams
📍 Austin, TX
750
Projects
800+
Hours
24/7
Support
import Team01 from "@/components/creative-tim/blocks/team-01"
export default function Page() {
return <Team01 />
}
Clean and simple team section with centered layout featuring rounded profile images, member names, and positions. Ideal for professional team showcases.
Meet Us
Our Awesome Team
We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment.
Sarah Johnson
Chief Technology Officer
Michael Chen
Lead Developer
Emma Williams
UI/UX Designer
import Team02 from "@/components/creative-tim/blocks/team-02"
export default function Page() {
return <Team02 />
}
A dark-themed executive team section with horizontal card layout featuring profile images, names, positions, and detailed descriptions. Perfect for highlighting key team members.
The Executive Team
Meet the visionaries behind our success. Our leadership team brings together decades of experience and a shared passion for innovation.
Sarah Johnson
Chief Technology Officer
Passionate about building scalable solutions and leading innovative teams. Over 10 years of experience in tech leadership.
Michael Chen
Lead Developer
Full-stack developer specializing in modern web technologies. Dedicated to creating exceptional user experiences.
Emma Williams
UI/UX Designer
Award-winning designer with a focus on user-centered design. Creating beautiful and intuitive digital experiences.
import Team03 from "@/components/creative-tim/blocks/team-03"
export default function Page() {
return <Team03 />
}
Modern dark-themed team section with compact avatar cards, social media links (Facebook, Twitter, GitHub), and a distinctive icon header. Three-column grid layout perfect for larger teams.
Our Awesome Team
Talented individuals working together to create exceptional experiences. Connect with our team members and explore their expertise.
Ryan Samuel
Financial Examiner
Jordan Michael
Frond End Developer
Nora Hazel
UI Designer
Emma Roberts
UI Designer
William Pearce
Web Developer
Bruce Mars
UI/UX Designer
import Team04 from "@/components/creative-tim/blocks/team-04"
export default function Page() {
return <Team04 />
}
Four-column team layout featuring square profile images, member descriptions, and social media links. Ideal for showcasing executive teams with detailed member bios.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOur Team
The Executive Team
Meet the leadership team driving innovation and excellence. Together, we're building the future with passion and expertise.
Sarah Johnson
Co-Founder & CEO
Visionary leader with 15+ years of experience building innovative tech companies and driving growth.
Michael Chen
Chief Technology Officer
Technology enthusiast specializing in scalable architectures and cutting-edge development practices.
Emma Williams
Head of Design
Award-winning designer passionate about creating intuitive and beautiful user experiences.
Alex Rivera
Marketing Director
Strategic marketer driving brand growth through data-driven campaigns and creative storytelling.
import Team05 from "@/components/creative-tim/blocks/team-05"
export default function Page() {
return <Team05 />
}
Minimalist team presentation with centered circular avatars and social links (Twitter, LinkedIn, GitHub). Clean four-column grid layout perfect for professional teams.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROThe Executive Team
This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.
Ryan Samuel
Co-founder
Jordan Michael
Front-End Developer
Nora Hazel
UI/UX Designer
Otto Gonzalez
Marketing Specialist
import Team06 from "@/components/creative-tim/blocks/team-06"
export default function Page() {
return <Team06 />
}
Team section with distinctive icon header and horizontal card layout combining profile images with detailed member information. Two-column grid layout for balanced presentation.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROThe Executive Team
Experienced leaders committed to excellence and innovation. Together, we drive our vision forward and create meaningful impact in everything we do.
Sarah Johnson
Chief Executive Officer
Passionate leader with expertise in digital transformation and strategic growth. Building innovative solutions for tomorrow's challenges.
Michael Chen
VP of Engineering
Tech visionary specializing in scalable architecture and team leadership. Committed to engineering excellence and innovation.
Emma Williams
Creative Director
Design expert crafting beautiful, user-centric experiences. Bridging creativity and functionality to deliver exceptional products.
Alex Rivera
Head of Strategy
Strategic thinker driving business growth and market expansion. Transforming vision into actionable roadmaps for success.
import Team07 from "@/components/creative-tim/blocks/team-07"
export default function Page() {
return <Team07 />
}
Comprehensive team showcase supporting large teams with centered avatar cards and social links. Features a four-column grid layout perfect for displaying 8+ team members.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROMeet the Team
Behind the Success: Our Dedicated Team
From visionary leadership to creative talent, and technical wizards, each team member plays a pivotal role in delivering the exceptional service and innovative solutions.
Ryan Samuel
Co-founder
Jordan Michael
Front-End Developer
Nora Hazel
UI/UX Designer
Otto Gonzalez
Marketing Specialist
Ryan Samuel
Co-founder
Jordan Michael
Front-End Developer
Nora Hazel
UI/UX Designer
Otto Gonzalez
Marketing Specialist
import Team08 from "@/components/creative-tim/blocks/team-08"
export default function Page() {
return <Team08 />
}
Modern team section with circular avatars, member descriptions, and social links. Three-column grid layout perfect for medium-sized teams with detailed bios.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROMeet Us
Our Awesome Team
Talented individuals working together to create exceptional experiences. Meet the people behind our success and innovation.
Sarah Johnson
Co-Founder & CEO
Visionary leader passionate about innovation and empowering teams to achieve extraordinary results.
Michael Chen
Chief Technology Officer
Tech enthusiast driving digital transformation through cutting-edge solutions and engineering excellence.
Emma Williams
Head of Design
Creative designer crafting beautiful experiences that blend aesthetics with functionality.
Alex Rivera
Marketing Director
Strategic marketer building brands and driving growth through data-driven campaigns.
Jessica Martinez
Frontend Developer
Passionate developer creating seamless user interfaces with modern web technologies.
David Kim
Full Stack Developer
Versatile engineer building robust applications from concept to deployment.
import Team09 from "@/components/creative-tim/blocks/team-09"
export default function Page() {
return <Team09 />
}
Executive team section with icon header, square profile images, detailed descriptions, and social media links. Three-column layout for professional team presentation.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROThe Executive Team
Meet the visionary leaders driving our company forward. Our executive team combines decades of experience with a passion for innovation and excellence.
Sarah Johnson
Chief Executive Officer
Visionary leader with 15+ years driving innovation and building high-performing teams.
Michael Chen
Chief Technology Officer
Technology strategist specializing in scalable solutions and digital transformation.
Emma Williams
Chief Design Officer
Award-winning designer creating exceptional user experiences that blend form and function.
import Team10 from "@/components/creative-tim/blocks/team-10"
export default function Page() {
return <Team10 />
}
Team showcase with icon header and horizontal card layout featuring profile images with social links (Facebook, Twitter, GitHub). Three-column grid perfect for team pages.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOur Awesome Team
Passionate professionals dedicated to excellence. Our diverse team brings together expertise across design, development, and strategy to deliver exceptional results.
Sarah Johnson
Product Manager
Michael Chen
Senior Developer
Emma Williams
Lead Designer
Alex Rivera
Marketing Director
Jessica Martinez
DevOps Engineer
David Kim
Data Scientist
import Team11 from "@/components/creative-tim/blocks/team-11"
export default function Page() {
return <Team11 />
}
Dark-themed executive team section with centered circular avatars and social links. Four-column minimalist layout for professional team displays.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROThe Executive Team
This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.
Ryan Samuel
Co-founder
Jordan Michael
Front-End Developer
Nora Hazel
UI/UX Designer
Otto Gonzalez
Marketing Specialist
import Team12 from "@/components/creative-tim/blocks/team-12"
export default function Page() {
return <Team12 />
}
Asymmetric team layout with icon header in sidebar and compact member tiles. Two-column layout perfect for teams with 4-6 members.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROOur Awesome Team
Collaboration and creativity drive everything we do. Our team members bring unique perspectives and expertise to every project.
Sarah Johnson
Operations Manager
Michael Chen
Lead Engineer
Emma Williams
Creative Director
Alex Rivera
Brand Strategist
import Team13 from "@/components/creative-tim/blocks/team-13"
export default function Page() {
return <Team13 />
}
Elegant dark-themed team section with tall profile image cards and centered text. Three-column grid layout perfect for portfolio-style team pages.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROMeet Us
Our Awesome Team
We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment.
Ryan Samuel
financial examiner
Annie Spratt
web developer
Ryan Samuel
ui/ux designer
import Team14 from "@/components/creative-tim/blocks/team-14"
export default function Page() {
return <Team14 />
}
Modern team section featuring full-width profile images with circular social media buttons. Three-column layout ideal for creative team presentations.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROMeet Us
The Awesome Team
Meet the visionaries behind our success. Our leadership team combines decades of experience with a passion for innovation and excellence.
Sarah Johnson
Co-Founder & CEO
Michael Chen
Chief Technology Officer
Emma Williams
Head of Design
import Team15 from "@/components/creative-tim/blocks/team-15"
export default function Page() {
return <Team15 />
}
Dynamic team layout with sidebar description and gradient overlay profile cards. Features white text over dark gradient for dramatic visual impact. Perfect for creative agencies.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROMeet Us
The Heart of Our Excellence
This section celebrates the unique stories, skills, and passions of our team members. From strategic thinkers to creative innovators, each person contributes to our vibrant culture.
Sarah Johnson
Product Manager
Michael Chen
Lead Developer
Emma Williams
UX Designer
Alex Rivera
Content Strategist
Jessica Martinez
Growth Manager
David Kim
Analytics Lead
import Team16 from "@/components/creative-tim/blocks/team-16"
export default function Page() {
return <Team16 />
}
Intimate team section designed for small teams or co-founders. Horizontal card layout with profile images, detailed descriptions, and social links. Two-column layout.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROThe Executive Team
This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.
Ryan Samuel
Co-founder
Artist is a term applied to a person who engages in an activity deemed to be an art.
Jordan Michael
Front-End Developer
And I love you like Kanye loves Kanye. We need to restart the human foundation.
import Team17 from "@/components/creative-tim/blocks/team-17"
export default function Page() {
return <Team17 />
}
Frequently asked questions
Are these team blocks free?
Yes, the free ones are copy-paste with no account and fine for commercial sites. A couple of richer profile layouts are PRO and marked.
Can I add photos, roles, and social links?
Yes. Each card holds an image, name, role, bio, and social icons, so you fill in your team's details and the layout handles the rest.
Does the grid handle any number of people?
Yes. The grid reflows for the number of members you add, from a small founding team to a large directory, and stays even on mobile.
How do I install a team section?
Copy the code into your page, or run the npx shadcn add command on the block. It becomes an editable component in your project.
Do they work with Next.js?
Yes, they are React components for Next.js and Tailwind, and they work in any React project with shadcn/ui installed.