5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T65c,

Add people, type who they report to, and Org Chart builds the whole hierarchy for you. Cards, connector lines and spacing are laid out automatically. No manual positioning, no nested frames. Perfect for About, Team and Company pages.

What you can customize

- People: name, role, photo, "Reports To" and team color

- Direction: vertical (top-down) or horizontal (left-to-right)

- Lines: elbow or curved connectors

- Expanded Levels: how many levels are open on load

- Collapsible: click a card to expand or collapse its team (+N badge shows hidden people)

- Overflow: Fit, Shrink or Scroll, so large teams never break on mobile

- Layout, colors, radius, shadow and separate name/role fonts

Why it's different

- Built from a flat list: just type the manager's name and the tree updates itself.

- Big org? Collapse teams and let Fit/Shrink keep everything readable on any screen.

- No photo? Initials avatars in each team's color are generated automatically.

How to install: copy the Component URL and paste it onto your Framer canvas (Cmd/Ctrl + V).

Built with code but fully customizable via property controls, no coding needed. Unlink is not provided so we can keep shipping updates. When an update is available, just click Update on the component.

Made by BrandingUp.

■ Need help?

Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.

More components from BrandingUp: https://brandingupstudio.com

5a:[["$","$L5d",null,{"post":{"id":"01a0eb14-9b6d-7270-8af8-4bcd9060fcfd","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[],"resources":[{"id":"GMjW4e83XXSMb1isubyx","resolved":true,"title":"01 Team Org Chart","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add people, type who they report to, and Org Chart builds the whole hierarchy for you. Cards, connector lines and spacing are laid out automatically. No manual positioning, no nested frames. Perfect for About, Team and Company pages."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"- People: name, role, photo, \"Reports To\" and team color"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direction: vertical (top-down) or horizontal (left-to-right)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Lines: elbow or curved connectors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Expanded Levels: how many levels are open on load"}]},{"type":"paragraph","content":[{"type":"text","text":"- Collapsible: click a card to expand or collapse its team (+N badge shows hidden people)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Overflow: Fit, Shrink or Scroll, so large teams never break on mobile"}]},{"type":"paragraph","content":[{"type":"text","text":"- Layout, colors, radius, shadow and separate name/role fonts"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Why it's different"}]},{"type":"paragraph","content":[{"type":"text","text":"- Built from a flat list: just type the manager's name and the tree updates itself."}]},{"type":"paragraph","content":[{"type":"text","text":"- Big org? Collapse teams and let Fit/Shrink keep everything readable on any screen."}]},{"type":"paragraph","content":[{"type":"text","text":"- No photo? Initials avatars in each team's color are generated automatically."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"How to install: copy the Component URL and paste it onto your Framer canvas (Cmd/Ctrl + V)."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Built with code but fully customizable via property controls, no coding needed. Unlink is not provided so we can keep shipping updates. When an update is available, just click Update on the component."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Made by BrandingUp."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr."}]},{"type":"paragraph","content":[{"type":"text","text":"More components from BrandingUp: https://brandingupstudio.com"}]}]},"introduction":"Auto-layout collapsible team tree","slug":"01-team-org-chart","author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a0eb10-cfb2-739d-bd0c-50b9d91f1397.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T02:53:10.757Z","updatedAt":"2026-10-03T08:12:05.388Z","publishedAt":"2026-09-29T02:53:10.755Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/OrgChart-NYpTmq.js@RUykuukL11m0osbc5GAJ","previewUrl":"https://small-convention-270138.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"RUykuukL11m0osbc5GAJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T02:53:11.405Z","updatedAt":"2026-09-29T02:53:11.405Z","reported":false}}],"$L5f"]

Suggested for you