{"success":true,"data":{"block":{"id":"link-tree-block","name":"Link Tree Block","title":"Link Tree Block","category":"Link Page","categorySlug":"link-page","description":"A customizable link-in-bio style page component with three theme variations (light, dark, glass). Features brand header with avatar and verified badge, customizable link list with icons, descriptions, badges and featured states, media gallery for images and videos, social media links, and background pattern customization. Ideal for creators, influencers, and businesses needing a comprehensive link page.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306295/an5cx8unhvpjs0mzy927rhe6mcxj/link-tree-block-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306296/9q68brz8mc8bl62ist21jicdwcvn/link-tree-block-mobile.jpg"},"componentPath":"blocks/link-page/link-tree-block.tsx","code":"import { LinkTreeBlock } from \"@opensite/ui/blocks/link-page/link-tree-block\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <LinkTreeBlock\n      brandName=\"Creative Studio\"\n      brandTagline=\"Award-winning design & branding agency\"\n      brandAvatar={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Creative Studio\",\n      }}\n      logo={{\n        src: \"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png\",\n        alt: \"Creative Studio\",\n      }}\n      brandVerified={false}\n      socialLinks={[\n        {\n          href: \"https://instagram.com/@client-username\",\n        },\n        {\n          href: \"https://x.com/client-username\",\n        },\n        {\n          href: \"https://linkedin.com/:client-linkedin\",\n        },\n        {\n          href: \"https://youtube.com/@client-channel\",\n        },\n      ]}\n      links={[\n        {\n          id: \"1\",\n          label: \"Featured Project\",\n          description: \"New Brand Identity Launch\",\n          href: \"#\",\n          iconName: \"lucide/star\",\n          featured: true,\n          badge: \"New\",\n        },\n        {\n          id: \"2\",\n          label: \"Our Portfolio\",\n          description: \"View our latest work\",\n          href: \"#\",\n          iconName: \"lucide/briefcase\",\n        },\n        {\n          id: \"3\",\n          label: \"Services & Pricing\",\n          description: \"Discover what we offer\",\n          href: \"#\",\n          iconName: \"lucide/package\",\n        },\n        {\n          id: \"4\",\n          label: \"Client Testimonials\",\n          description: \"Hear from our clients\",\n          href: \"#\",\n          iconName: \"lucide/message-circle\",\n        },\n        {\n          id: \"5\",\n          label: \"Free Consultation\",\n          description: \"Book a 30-minute call\",\n          href: \"#\",\n          iconName: \"lucide/calendar\",\n          badge: \"Limited\",\n        },\n        {\n          id: \"6\",\n          label: \"Contact Us\",\n          description: \"Get in touch\",\n          href: \"#\",\n          iconName: \"lucide/mail\",\n        },\n      ]}\n      mediaGalleryTitle=\"Recent Work\"\n      mediaGallery={[\n        {\n          id: \"1\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt\",\n          alt: \"Project showcase 1\",\n          href: \"https://example.com/project1\",\n        },\n        {\n          id: \"2\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa\",\n          alt: \"Project showcase 2\",\n          href: \"https://example.com/project2\",\n        },\n        {\n          id: \"3\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606\",\n          alt: \"Project showcase 3\",\n          href: \"https://example.com/project3\",\n        },\n        {\n          id: \"4\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/fokd3hxzvdtsomagbfhqooyvndyv\",\n          alt: \"Project showcase 4\",\n          href: \"https://example.com/project4\",\n        },\n        {\n          id: \"5\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u\",\n          alt: \"Project showcase 5\",\n          href: \"#\",\n        },\n        {\n          id: \"6\",\n          type: \"image\",\n          src: \"https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t\",\n          alt: \"Project showcase 6\",\n          href: \"#\",\n        },\n      ]}\n      footerAction={{\n        label: \"Powered by OpenSite\",\n        href: \"https://opensite.ai\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-up-right\" size={16} />,\n      }}\n      spacing=\"xl\"\n      patternOpacity={0.33}\n      pattern=\"diagonalCrossFadeCenter\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"brandName":{"type":"object","description":"Brand/profile name displayed at the top","typeLabel":"React.ReactNode","required":true,"maxLength":60},"brandTagline":{"type":"object","description":"Optional tagline or bio displayed below the name","typeLabel":"React.ReactNode","required":false,"maxLength":120},"brandLogo":{"type":"object","description":"Optional logo image (used if no avatar is provided)","typeLabel":"ImageItem | string","required":false},"brandAvatar":{"type":"object","description":"Optional avatar image (takes precedence over logo)","typeLabel":"ImageItem | string","required":false,"mediaHints":{"path":"brandAvatar.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand avatar or profile logo displayed in the header. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"brandVerified":{"type":"boolean","description":"Whether to show a verified badge next to the name","required":false},"verifiedIcon":{"type":"object","description":"Custom verified icon","typeLabel":"React.ReactNode","required":false},"brandSlot":{"type":"object","description":"Custom slot for rendering brand header","typeLabel":"React.ReactNode","required":false},"logo":{"type":"object","description":"Optional LogoConfig for BrandLogo rendering (takes priority over avatar)","fields":{"url":{"type":"string","description":"URL to navigate to when logo is clicked","required":false},"src":{"type":"string","description":"Image source for the logo","required":false},"alt":{"type":"string","description":"Alt text for the logo image","required":false},"title":{"type":"object","description":"Text title to display (alternative to image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo","required":false}},"typeLabel":"LogoConfig","required":false},"logoSlot":{"type":"object","description":"Custom slot for the logo/avatar (takes priority over logo and avatar)","typeLabel":"React.ReactNode","required":false},"logoClassName":{"type":"string","description":"Additional CSS classes for the logo image","required":false},"links":{"type":"array","description":"Array of links to display","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false},"id":{"type":"string","description":"","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"featured":{"type":"boolean","description":"","required":false},"badge":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"badgeVariant":{"type":"string","description":"","typeLabel":"\"default\" | \"secondary\" | \"destructive\" | \"outline\"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"LinkTreeLink"},"typeLabel":"LinkTreeLink[]","required":false},"linksSlot":{"type":"object","description":"Custom slot for rendering links (overrides links array)","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social media links","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false},"id":{"type":"string","description":"","required":false},"iconName":{"type":"string","description":"","required":false}},"typeLabel":"SocialLink"},"typeLabel":"SocialLink[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","typeLabel":"React.ReactNode","required":false},"mediaGallery":{"type":"array","description":"Array of media items for the gallery section","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":false},"type":{"type":"string","description":"","typeLabel":"\"image\" | \"video\"","required":true},"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":false},"href":{"type":"string","description":"","required":false},"poster":{"type":"string","description":"","required":false},"className":{"type":"string","description":"","required":false},"mediaClassName":{"type":"string","description":"","required":false}},"typeLabel":"MediaGalleryItem"},"typeLabel":"MediaGalleryItem[]","required":false,"mediaHints":{"path":"mediaGallery[].src","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"1:1","note":"Gallery thumbnail image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"mediaGallerySlot":{"type":"object","description":"Custom slot for rendering media gallery (overrides mediaGallery array)","typeLabel":"React.ReactNode","required":false},"mediaGalleryTitle":{"type":"object","description":"Title for the media gallery section","typeLabel":"React.ReactNode","required":false},"mediaGalleryLimit":{"type":"number","description":"Maximum number of media items to show","required":false},"footerAction":{"type":"object","description":"Footer action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"footerSlot":{"type":"object","description":"Custom slot for rendering footer content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the outer wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the inner content container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the brand header","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the brand name","required":false},"taglineClassName":{"type":"string","description":"Additional CSS classes for the brand tagline","required":false},"verifiedBadgeClassName":{"type":"string","description":"Additional CSS classes for the verified badge container","required":false},"verifiedIconClassName":{"type":"string","description":"Additional CSS classes for the verified icon","required":false},"linksClassName":{"type":"string","description":"Additional CSS classes for the links container","required":false},"linkClassName":{"type":"string","description":"Additional CSS classes for link items","required":false},"featuredLinkClassName":{"type":"string","description":"Additional CSS classes for featured link items","required":false},"linkIconClassName":{"type":"string","description":"Additional CSS classes for link icons","required":false},"linkLabelClassName":{"type":"string","description":"Additional CSS classes for link labels","required":false},"linkDescriptionClassName":{"type":"string","description":"Additional CSS classes for link descriptions","required":false},"linkBadgeClassName":{"type":"string","description":"Additional CSS classes for link badges","required":false},"linkChevronClassName":{"type":"string","description":"Additional CSS classes for link chevron icon","required":false},"mediaGalleryClassName":{"type":"string","description":"Additional CSS classes for the media gallery section","required":false},"mediaGalleryTitleClassName":{"type":"string","description":"Additional CSS classes for the media gallery title","required":false},"mediaGalleryGridClassName":{"type":"string","description":"Additional CSS classes for the media gallery grid","required":false},"mediaGalleryItemClassName":{"type":"string","description":"Additional CSS classes for media gallery items","required":false},"mediaGalleryMediaClassName":{"type":"string","description":"Additional CSS classes for media elements","required":false},"mediaGalleryOverlayClassName":{"type":"string","description":"Additional CSS classes for media overlay","required":false},"mediaGalleryPlayIconClassName":{"type":"string","description":"Additional CSS classes for media play icon","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"socialLinkClassName":{"type":"string","description":"Additional CSS classes for each social link","required":false},"socialIconClassName":{"type":"string","description":"Additional CSS classes for social icons","required":false},"footerClassName":{"type":"string","description":"Additional CSS classes for the footer","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"backgroundPattern":{"type":"object","description":"Background pattern URL (legacy)","fields":{},"typeLabel":"PatternName","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"links[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":12},"links[].label":{"type":"object","description":"","required":true,"maxLength":50},"links[].description":{"type":"object","description":"","required":false,"maxLength":80},"links[].href":{"type":"object","description":"","required":true},"links[].iconName":{"type":"object","description":"","required":false},"links[].featured":{"type":"object","description":"","required":false},"links[].badge":{"type":"object","description":"","required":false,"maxLength":20},"mediaGallery[]":{"type":"object","description":"","required":false,"minItems":3,"maxItems":6},"mediaGallery[].src":{"type":"object","description":"","required":true},"mediaGallery[].type":{"type":"object","description":"","required":true},"socialLinks[]":{"type":"object","description":"","required":false,"minItems":1,"maxItems":8},"socialLinks[].href":{"type":"object","description":"","required":true}},"exampleProps":{"brandName":"Creative Studio","brandTagline":"Award-winning design & branding agency","brandAvatar":{"src":"https://cdn.ing/assets/i/r/287634/e4cmvu8nbwoqy2qer90t4gpap0ed/logo-light.png","alt":"Creative Studio"},"brandVerified":false,"socialLinks":[{"href":"https://instagram.com/@handle"},{"href":"https://x.com/handle"},{"href":"https://linkedin.com/company/handle"}],"links":[{"id":"1","label":"Featured Project","description":"New Brand Identity Launch","href":"https://example.com/project","iconName":"lucide/star","featured":true,"badge":"New"},{"id":"2","label":"Our Portfolio","description":"View our latest work","href":"https://example.com/portfolio","iconName":"lucide/briefcase"},{"id":"3","label":"Services & Pricing","description":"Discover what we offer","href":"https://example.com/services","iconName":"lucide/package"},{"id":"4","label":"Free Consultation","description":"Book a 30-minute call","href":"https://example.com/consult","iconName":"lucide/calendar","badge":"Limited"}],"mediaGalleryTitle":"Recent Work","mediaGallery":[{"id":"1","type":"image","src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Project showcase 1"},{"id":"2","type":"image","src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Project showcase 2"},{"id":"3","type":"image","src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Project showcase 3"}],"footerAction":{"label":"Powered by OpenSite","href":"https://opensite.ai"},"background":"dark","pattern":"diagonalCrossFadeCenter","patternOpacity":0.33},"dependencies":["@opensite/ui"],"tags":["link-page","link-tree","bio-link","linktree","profile","creator","influencer","social","media-gallery","links"],"performance":{},"importantUsageNotes":"Full-featured link-in-bio page. The brandAvatar/brandLogo prop accepts an ImageItem object with an absolute src URL — it is typically a logo or profile image. links[] items support featured highlighting, badges, icons, and descriptions. mediaGallery[] renders a 3-column grid of images or videos. socialLinks[] are resolved automatically from the href domain. Provide at least 3 links for a useful layout; gallery is optional.","usageRequirements":{"requiredProps":["brandName"],"propConstraints":{"brandName":{"required":true,"maxLength":60},"brandTagline":{"required":false,"maxLength":120},"links[]":{"required":false,"minItems":1,"maxItems":12},"links[].label":{"required":true,"maxLength":50},"links[].description":{"required":false,"maxLength":80},"links[].href":{"required":true},"links[].iconName":{"required":false,"note":"Iconify icon name, e.g. lucide/globe"},"links[].featured":{"required":false,"note":"Highlights the link with primary styling"},"links[].badge":{"required":false,"maxLength":20},"mediaGallery[]":{"required":false,"minItems":3,"maxItems":6},"mediaGallery[].src":{"required":true},"mediaGallery[].type":{"required":true,"note":"Must be 'image' or 'video'"},"socialLinks[]":{"required":false,"minItems":1,"maxItems":8},"socialLinks[].href":{"required":true,"note":"Platform inferred from URL"}},"mediaSlots":{"brandAvatar":{"path":"brandAvatar.src","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Brand avatar or profile logo displayed in the header. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"mediaGallery[].src":{"path":"mediaGallery[].src","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"1:1","note":"Gallery thumbnail image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","brandAvatar and brandLogo accept ImageItem ({ src, alt }) or a plain string URL.","mediaGallery items with type 'video' should provide a poster URL for the thumbnail."]}}},"timestamp":"2026-06-27T19:55:07.734Z"}