Framer component
Team Directory Pro: a team page visitors can actually search.
Grid, list or carousel. Live search, filters, profile pop-ups and light and dark themes, all in one responsive Framer component.
What is included
Everything a team page needs.
Three display styles
Searchable grid, compact list or a swipeable carousel. Switch with one control.
Search and smart filters
Instant search across names, roles, skills and bios, plus department and location filters and sorting.
Profile pop-ups
Click a card for the full profile with bio, skill chips, social links and keyboard navigation.
Light, dark and auto
Separate palettes, no flash on load and an optional visitor theme toggle.
Responsive by design
Columns and slides adapt to the container width, so it works in any layout with no layout shift.
Compact property panel
Grouped, collapsible controls instead of one endless list.
Add it to your site in two minutes.
One-time $19 purchase. Includes the component link, a step-by-step guide and a live Framer guide site.
FAQ
Good to know
What do I get after purchase?
A START HERE guide with your Framer component link and step-by-step setup, plus a link to a live Framer guide site with a copy of the component and alternative ways to add it.
How do I install it?
Open your Framer project, paste the component link onto the canvas (or add it from the Assets panel), then drag Team Directory onto your page and set its width to 100%. The guide also covers copying the component code into a new code file.
Can I load people from a spreadsheet?
Yes. Set a JSON URL in the Behavior group. It works with Airtable, Google Sheets or Notion proxies that allow CORS.
Does it work with the Framer CMS?
CMS collections cannot be bound to a code component member list, so people are managed in the property panel or through the JSON URL.
What does the license cover?
A single-use license: one license covers one project owner. Redistribution or resale of the component is not allowed.