← Back to the demo
Guide
1
Add the component
In Framer, open Assets → Code, create a new file named TeamDirectory and paste the contents of TeamDirectory.tsx from your download. Then drag Team Directory onto your page and set its width to 100% so it fills the section.
2
Add your people
Select the component and open Members in the right-hand panel. Each member has a name, role, department, location, photo, bio, skills (comma-separated) and social links. Photos are cropped automatically; missing photos show initials.
3
Pick a style
Choose Directory (grid or list) or Carousel under Style. In Layout set grid or list and columns per breakpoint. In Carousel set slides per breakpoint, arrows and autoplay.
4
Turn filters on or off
In Filters enable search, department pills or a dropdown, location filter, sorting and the result count. Everything works on the published site with no extra setup.
5
Match your brand
Under Light colors and Dark colors set background, card, text, muted, accent and border. In Cards adjust photo ratio, radius, padding, gap and hover effect. Use Container padding and radius to place it inside a rounded panel.
6
Set the color mode
Choose Light, Dark or Auto. Auto follows the visitor’s system theme with no flash on load. Turn on Show theme toggle to give visitors a sun/moon switch (remembered in their browser). Publish when done.
Reference
Controls are grouped into collapsible sections.
Members
Name, role, department, location, photo, bio, skills and social links per person.
Layout
Grid or list, visitor layout toggle, columns on desktop, tablet and phone.
Carousel
Slides per breakpoint, arrows, autoplay and delay.
Cards
Photo ratio, fit and position, bio, skills, location, socials, hover effect, radius, padding, gap, container padding and radius.
Filters
Search, department pills or dropdown, location, sort and result count.
Light / Dark colors
Background, card, text, muted, accent and border for each theme.
Behavior
Profile pop-up or none, animation and stagger, default department, URL sync, JSON data URL.
Text labels
Every built-in string is editable, so you can translate it.
FAQ
Can I load people from a spreadsheet?
Yes. Set a JSON URL under Behavior. It works with Airtable, Sheets or Notion proxies that allow CORS. If the fetch fails, the Members list is used.
Does it work with the Framer CMS?
CMS collections can’t be bound to a code component’s member list, so people are managed in the property panel or via the JSON URL.
Can visitors share a filtered view?
Turn on Sync to URL under Behavior to add ?q=, ?team= and ?loc= to the address.
Is it accessible?
Yes: keyboard navigation, focus trap in the pop-up, labelled controls, live result count and reduced-motion support.
Is the license single-use?
One license covers one project owner. Redistribution or resale of the component is not allowed.
Get Team Directory Pro — $19
Single-use license · includes the component source, README and sample photos.