{"success":true,"data":{"block":{"id":"carousel-tabs-content","name":"Carousel Tabs Content","title":"Carousel Tabs Content","category":"Gallery","categorySlug":"gallery","description":"A carousel with animated tab navigation synced to slides. Features a tab bar with animated underline indicator that follows the active slide. Ideal for categorized content, product features, or any content that benefits from tab-based navigation with visual previews.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290108/13fsumid4t9l2ovi1cyzofyn98z4/carousel-tabs-content-desktop.png","mobile":"https://cdn.ing/assets/i/r/290107/7lt970k4bza0nv6wmazp59dvhl7n/carousel-tabs-content-mobile.png"},"componentPath":"blocks/gallery/carousel-tabs-content.tsx","code":"import { CarouselTabsContent } from \"@opensite/ui/blocks/gallery/carousel-tabs-content\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselTabsContent\n      title=\"Explore Our Spaces\"\n      description=\"Discover a variety of environments tailored to your needs, from collaborative workspaces to serene relaxation areas. Each space is designed to inspire creativity and productivity.\"\n      items={[\n        {\n          title: \"Enterprise Platform\",\n          description:\n            \"A comprehensive enterprise solution designed to handle complex workflows, large-scale data processing, and multi-tenant architectures. Built with scalability and reliability at its core.\",\n          note: \"Trusted by Fortune 500 companies worldwide\",\n          image: imagePlaceholders[100],\n          imageAlt: \"Enterprise platform dashboard\",\n          category: \"Enterprise\",\n        },\n        {\n          title: \"Startup Suite\",\n          description:\n            \"Fast-track your startup growth with our all-in-one platform. From MVP to scale, we provide the tools and infrastructure you need to succeed without breaking the bank.\",\n          note: \"Launch your product in days, not months\",\n          image: imagePlaceholders[101],\n          imageAlt: \"Startup suite interface\",\n          category: \"Startup\",\n        },\n        {\n          title: \"Developer Tools\",\n          description:\n            \"Powerful developer tools including CLI, SDKs, and comprehensive APIs. Build, test, and deploy with confidence using our modern development environment and extensive documentation.\",\n          note: \"Loved by 50,000+ developers\",\n          image: imagePlaceholders[102],\n          imageAlt: \"Developer tools interface\",\n          category: \"Developers\",\n        },\n        {\n          title: \"Analytics Pro\",\n          description:\n            \"Advanced analytics platform with real-time data processing, custom dashboards, and AI-powered insights. Turn your data into your competitive advantage.\",\n          note: \"Process billions of events daily\",\n          image: imagePlaceholders[103],\n          imageAlt: \"Analytics dashboard\",\n          category: \"Analytics\",\n        },\n        {\n          title: \"Integration Hub\",\n          description:\n            \"Connect with 200+ enterprise applications through our universal integration platform. Pre-built connectors, custom workflows, and real-time data synchronization.\",\n          note: \"Seamless integration in minutes\",\n          image: imagePlaceholders[104],\n          imageAlt: \"Integration hub interface\",\n          category: \"Integration\",\n        },\n      ]}\n      background=\"white\"\n      spacing=\"lg\"\n      pattern=\"crossPattern\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below title","typeLabel":"React.ReactNode","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"items":{"type":"array","description":"Array of content items to display","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Title content (supports ReactNode for gradient text effects)","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Description content (supports ReactNode for lists, paragraphs)","typeLabel":"React.ReactNode","required":true},"note":{"type":"object","description":"Note text displayed at the bottom","typeLabel":"React.ReactNode","required":true},"image":{"type":"string","description":"Image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the image","required":false},"category":{"type":"string","description":"Category label used for tab navigation","required":true},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"CarouselTabsContentItem"},"typeLabel":"CarouselTabsContentItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"tabsSlot":{"type":"object","description":"Custom slot for rendering the tabs","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"tabClassName":{"type":"string","description":"Additional CSS classes for each tab button","required":false},"indicatorClassName":{"type":"string","description":"Additional CSS classes for the tab indicator","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the navigation controls","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"carouselContentClassName":{"type":"string","description":"Additional CSS classes for the carousel content","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for each carousel item","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","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},"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":["gallery","carousel","tabs","animated","underline","categories","navigation","synced"],"performance":{},"importantUsageNotes":"Provide 4-6 items in the 'items' array for this tabbed-carousel; the demo uses 5. Each item requires a real image from the media library. DO NOT USE this block unless you have at least 4 real images from the media library. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:10.274Z"}