{"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 { imagePlaceholders, logoPlaceholders } from \"@/lib/media\";\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: logoPlaceholders.lightHorizontalLogo,\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: imagePlaceholders[125],\n          alt: \"Project showcase 1\",\n          href: \"https://example.com/project1\",\n        },\n        {\n          id: \"2\",\n          type: \"image\",\n          src: imagePlaceholders[126],\n          alt: \"Project showcase 2\",\n          href: \"https://example.com/project2\",\n        },\n        {\n          id: \"3\",\n          type: \"image\",\n          src: imagePlaceholders[127],\n          alt: \"Project showcase 3\",\n          href: \"https://example.com/project3\",\n        },\n        {\n          id: \"4\",\n          type: \"image\",\n          src: imagePlaceholders[128],\n          alt: \"Project showcase 4\",\n          href: \"https://example.com/project4\",\n        },\n        {\n          id: \"5\",\n          type: \"image\",\n          src: imagePlaceholders[129],\n          alt: \"Project showcase 5\",\n          href: \"#\",\n        },\n        {\n          id: \"6\",\n          type: \"image\",\n          src: imagePlaceholders[130],\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":false},"brandTagline":{"type":"object","description":"Optional tagline or bio displayed below the name","typeLabel":"React.ReactNode","required":false},"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},"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},"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":{"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"iconName":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","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},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["link-page","link-tree","bio-link","linktree","profile","creator","influencer","social","media-gallery","links"],"performance":{},"importantUsageNotes":"Only supply 'socialLinks' that are the links from the website's valid social accounts. Ensure you only use 'links' with valid href values (use only internal and important external urls). Only populate the 'mediaGallery' prop if you have brand photos/videos (do not use stock photos for this block) - and only use 3, 6, or 9 mediaGallery items since it's a 3 column grid. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:40:40.340Z"}