Framer components
A team page your visitors can search, filter and open.
Team Directory Pro is a Framer component with grid, list and carousel layouts, live search, department filters, profile pop-ups and light and dark themes. Paste it in and add your people.
- One-time payment
- No subscription
- Works in any Framer project
This is the real component. Search, filter, open a profile and flip the theme.
Built for the way people look for a teammate.
Grid, list or carousel
Show a full directory, a compact list or a swipeable carousel. Switch layout with one control, or let visitors flip between grid and list.
Search and filters
Instant search across names, roles, departments, locations, skills and bios, with team and location filters and sorting.
Profile pop-ups
A full profile with bio, skills and social links, plus keyboard navigation between people.
Light, dark and auto
Separate palettes with no flash on load and an optional visitor toggle.
Responsive by design
Columns and slides adapt to the container width, with no layout shift.
Your data, your way
Add people in the property panel or load them from a JSON URL. Sync search and filters to the page URL so a filtered view can be shared.
Live on your site in minutes.
No code to write. Everything is set in Framer’s property panel.
Paste the link
Copy the component link from your guide and paste it onto the Framer canvas.
Add your people
Enter names, roles, teams, photos and links in the property panel, or load them from a JSON URL.
Match your brand
Pick colors for light and dark, set fonts and corner radius, then publish.
Team Directory Pro
$19 one-time
Buy on GumroadSecure checkout on Gumroad. Instant access after purchase.
What’s included
- The Team Directory component link for Framer
- A START HERE guide with step-by-step setup
- A live Framer guide site with other ways to add it
- Light and dark palettes you can edit
- Single-use license, one-time payment
Single-use license: one license covers one project owner. Redistribution or resale is not allowed. Read the full details.
Questions before you buy
Still unsure? Open the live demo above and try it first.
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%.
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.
Does it support dark mode?
Yes. Choose Light, Dark or Auto. Auto follows the visitor’s system theme with no flash on load, and you can add a visitor theme toggle.
What does the license cover?
A single-use license: one license covers one project owner. Redistribution or resale of the component is not allowed.
Is it a subscription?
No. It is a one-time $19 payment on Gumroad.