Framer Team Directory Component

The team directory your site deserves.

The team directory your site deserves.

The team directory your site deserves.

Grid, list or carousel. Search, filters, profile pop-ups and light & dark themes, all in one responsive Framer component.

Grid, list or carousel. Search, filters, profile pop-ups and light & dark themes, all in one responsive Framer component.

Grid, list or carousel. Search, filters, profile pop-ups and light & dark themes, all in one responsive Framer component.

Directory grid

List view

Carousel

Light · Dark · Auto

Search & filters

Profile modal

Fully responsive

01 · Directory

A searchable grid with filters built in.

A searchable grid with filters built in.

A searchable grid with filters built in.

Visitors can search by name, role or skill, filter by team and location, and open a full profile in one click.

Showing 8 of 8 people
Maya OkaforLeadership

Maya Okafor

Founder & CEO
Lagos

Maya started the company to make good tooling accessible to every small team. She spends her days on strategy, partnerships and the occasional customer call.

strategypartnershipsfundraising
Daniel ReyesEngineering

Daniel Reyes

Head of Engineering
Madrid

Daniel leads a distributed team of engineers and cares deeply about boring, reliable infrastructure and kind code reviews.

typescriptinfrastructurementoring
Priya NairDesign

Priya Nair

Senior Product Designer
Bengaluru

Priya shapes the product experience end to end, from first sketch to polished interaction details.

uisystemsprototyping
Lukas BrandtEngineering

Lukas Brandt

Full-stack Engineer
Berlin

Lukas ships features across the stack and keeps the build pipeline fast enough that nobody has time to get coffee.

reactnodeperformance
Aiko TanakaDesign

Aiko Tanaka

Brand Designer
Tokyo

Aiko builds the visual language of the brand, from logo systems to campaign art direction.

brandingillustrationmotion
Sofia MarchettiMarketing

Sofia Marchetti

Growth Marketing Lead
Milan

Sofia runs experiments across channels and turns messy data into clear next steps for the team.

seolifecycleanalytics
Omar HaddadSupport

Omar Haddad

Customer Success Manager
Dubai

Omar makes sure every customer gets a fast, human answer and turns recurring questions into product improvements.

onboardingsupportfeedback
Chloe BennettLeadership

Chloe Bennett

People & Culture Partner
London

Chloe looks after hiring, growth and the everyday rituals that make the team a good place to do great work.

hiringculturecoaching

02 · List

Prefer rows? Flip to the list view.

Prefer rows? Flip to the list view.

Prefer rows? Flip to the list view.

A compact layout for long teams and mobile screens. Let visitors switch between grid and list, or lock the one you want.

Showing 8 of 8 people
Maya Okafor

Maya Okafor

Leadership
Founder & CEO
Lagos
strategypartnershipsfundraising
Daniel Reyes

Daniel Reyes

Engineering
Head of Engineering
Madrid
typescriptinfrastructurementoring
Priya Nair

Priya Nair

Design
Senior Product Designer
Bengaluru
uisystemsprototyping
Lukas Brandt

Lukas Brandt

Engineering
Full-stack Engineer
Berlin
reactnodeperformance
Aiko Tanaka

Aiko Tanaka

Design
Brand Designer
Tokyo
brandingillustrationmotion
Sofia Marchetti

Sofia Marchetti

Marketing
Growth Marketing Lead
Milan
seolifecycleanalytics
Omar Haddad

Omar Haddad

Support
Customer Success Manager
Dubai
onboardingsupportfeedback
Chloe Bennett

Chloe Bennett

Leadership
People & Culture Partner
London
hiringculturecoaching

03 · Themes

Light, dark or automatic. Try the toggle.

Light, dark or automatic. Try the toggle.

Light, dark or automatic. Try the toggle.

Match your site, follow the visitor’s system theme with no flash, or give people a switch. Every color is editable.

Everything included

Built to be sold, built to be loved.

Built to be sold, built to be loved.

Built to be sold, built to be loved.

The details that make a component feel like a product.

01

Three display styles

Directory grid, compact list or a swipeable carousel. Switch with a single control.

02

Search & smart filters

Instant search across names, roles, skills and bios, plus team and location filters.

03

Profile pop-ups

Click any card for a full profile with bio, skills, socials and keyboard navigation.

04

Light, dark & auto

Follows the visitor’s theme with no flash, or lets them switch with a built-in toggle.

05

Responsive by design

Columns and slides adapt to the container, not the screen, so it works in any layout.

06

No layout shift

Pure-CSS responsive layout means the very first paint is already correct. No jumping.

Ship your team page today.

Ship your team page today.

Ship your team page today.

Drop the component onto any page, add your people, and you’re done. No code, no plugins, no layout fiddling.

Get Team Directory

Team Directory · a responsive code component for Framer

How to use the component →

Create a free website with Framer, the website builder loved by startups, designers and agencies.