> ## Documentation Index
> Fetch the complete documentation index at: https://docs.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Homepage

export const ReleaseItem = ({title, date, badgeText, badgeVariant = "gray", secondaryBadgeText, secondaryBadgeVariant = "gray", href}) => {
  const badgeConfig = {
    gray: {
      bg: "#3F4042",
      text: "#FFFFFF"
    },
    blue: {
      bg: "#0061D5",
      text: "#FFFFFF"
    },
    orange: {
      bg: "#FF9900",
      text: "#FFFFFF"
    },
    yellow: {
      bg: "#FFC900",
      text: "#000000"
    },
    purple: {
      bg: "#9D4CFF",
      text: "#FFFFFF"
    },
    black: {
      bg: "#000000",
      text: "#FFFFFF"
    }
  };
  const badges = [];
  if (badgeText) {
    badges.push({
      text: badgeText,
      style: badgeConfig[badgeVariant] || badgeConfig.gray
    });
  }
  if (secondaryBadgeText) {
    badges.push({
      text: secondaryBadgeText,
      style: badgeConfig[secondaryBadgeVariant] || badgeConfig.gray
    });
  }
  return <a href={href || "#"} className="block group !no-underline !shadow-none mb-6 last:mb-0 border-b border-gray-100 dark:border-gray-800 last:border-b-0 pb-6 last:pb-0" style={{
    maxWidth: "482px",
    minHeight: "111px"
  }}>
      <div className="flex flex-col justify-center gap-2">
        {badges.length > 0 && <div className="self-start flex flex-row flex-wrap items-center gap-2">
            {badges.map(({text, style: currentStyle}) => <span key={text} className="inline-flex items-center justify-center uppercase" style={{
    backgroundColor: currentStyle.bg,
    color: currentStyle.text,
    minWidth: "100px",
    height: "20px",
    borderRadius: "133.33px",
    fontFamily: "Inter Display, Inter, sans-serif",
    fontWeight: 600,
    fontSize: "10.67px",
    lineHeight: 1,
    letterSpacing: "0px",
    textAlign: "center"
  }}>
                <span style={{
    display: "block",
    transform: "translateY(0.5px)"
  }}>
                  {text}
                </span>
              </span>)}
          </div>}
        <h4 className="!mt-0 !mb-0 text-[16px] font-bold text-[#151F26] dark:text-white group-hover:underline leading-snug">
          {title}
        </h4>
        <p className="!mt-0 !mb-0 text-[#5D656B] dark:text-gray-400 text-[14px]">
          {date}
        </p>
      </div>
    </a>;
};

export const HidePageTitle = () => {
  React.useEffect(() => {
    const hidePageTitle = () => {
      const pageTitle = document.getElementById("page-title");
      if (pageTitle) {
        pageTitle.style.display = "none";
      }
    };
    hidePageTitle();
    const observer = new MutationObserver(hidePageTitle);
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
    return () => observer.disconnect();
  }, []);
  return null;
};

export const CustomCard = ({href, icon, darkIcon, title, description, image, darkImage, tagTitle, linkText, lang}) => {
  const translations = {
    ja: "詳細を表示",
    fr: "En savoir plus"
  };
  const isLarge = !!image;
  const linkLabel = linkText || translations[lang] || "Learn more";
  const measureRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [truncatedDesc, setTruncatedDesc] = React.useState(description);
  React.useEffect(() => {
    const measure = measureRef.current;
    const container = containerRef.current;
    if (!measure || !container || !description) return;
    const maxLines = 3;
    const update = () => {
      const width = container.getBoundingClientRect().width;
      measure.style.width = width + "px";
      measure.textContent = description;
      const style = window.getComputedStyle(measure);
      const lineHeight = parseFloat(style.lineHeight);
      const maxHeight = lineHeight * maxLines;
      if (measure.scrollHeight <= Math.ceil(maxHeight)) {
        setTruncatedDesc(description);
        return;
      }
      const isCJK = (/[\u3000-\u9FFF\uF900-\uFAFF]/).test(description);
      const units = isCJK ? [...description] : description.split(/\s+/);
      const joiner = isCJK ? "" : " ";
      let lo = 0;
      let hi = units.length;
      while (lo < hi) {
        const mid = Math.ceil((lo + hi) / 2);
        measure.textContent = units.slice(0, mid).join(joiner) + "...";
        if (measure.scrollHeight > Math.ceil(maxHeight)) {
          hi = mid - 1;
        } else {
          lo = mid;
        }
      }
      setTruncatedDesc(lo > 0 ? units.slice(0, lo).join(joiner) + "..." : description);
    };
    update();
    const observer = new ResizeObserver(update);
    observer.observe(container);
    return () => observer.disconnect();
  }, [description]);
  if (isLarge) {
    return <a href={href} className="custom-card-wrapper block group !no-underline !border-none !shadow-none !m-0 !p-0">
        <div className="h-full flex flex-col border border-gray-200 dark:border-gray-800 rounded-[32px] overflow-hidden bg-white dark:bg-[#0b0b0b] transition-all hover:shadow-lg">
          <div className="h-[262px] w-full relative overflow-hidden !m-0 !p-0 leading-[0] !-mt-px">
            {image && <>
                <img src={image} alt={title} noZoom className={`block w-full h-full object-cover !mt-1 !p-1 !rounded-t-[36px] !border-none ${darkImage ? "dark:hidden" : ""}`} />
                {darkImage && <img src={darkImage} alt={title} noZoom className="block w-full h-full object-cover !mt-1 !p-1 !rounded-t-[36px] !border-none hidden dark:block" />}
              </>}
          </div>
          <div className="flex-1 flex flex-col">
            <div className="p-6 flex-1">
              <div className="flex items-center gap-2 mb-1">
                <div className="flex items-center gap-2 border-[0.5px] border-gray-200 dark:border-gray-600 rounded-full px-3 py-1">
                  <span className="w-4 h-4 flex items-center justify-center text-gray-900 dark:text-white">
                    {icon && <>
                        <img src={icon} alt="" noZoom className={`w-full m-0 h-full object-contain ${darkIcon ? "block dark:hidden" : ""}`} />
                        {darkIcon && <img src={darkIcon} alt="" noZoom className="w-full h-full m-0 object-contain hidden dark:block" />}
                      </>}
                  </span>
                  {tagTitle && <span className="text-xs font-semibold text-gray-700 dark:text-gray-300">
                      {tagTitle}
                    </span>}
                </div>
              </div>
              <h3 className="text-2xl mt-4 font-bold text-gray-900 dark:text-white mb-2">
                {title}
              </h3>
            </div>

            <div className="px-6 pb-6 pt-4 border-t border-gray-200 dark:border-gray-800 mt-auto">
              <div className="flex items-center justify-end text-[#0061D5] dark:text-white font-semibold text-sm">
                {linkLabel}
                <Icon icon="arrow-up-right" size={14} className="link-icon pl-6" />
              </div>
            </div>
          </div>
        </div>
      </a>;
  }
  return <a href={href} className="custom-card-wrapper block not-prose font-normal group !no-underline !border-none !shadow-none !m-0 !p-0 w-full">
      <div className="h-full flex flex-col rounded-[20px] bg-white dark:bg-[#18191a] transition-all hover:shadow-lg" style={{
    border: "1px solid #F0F1F2",
    overflow: "hidden"
  }}>
        <style>{`
          .dark .custom-card-wrapper > div {
            border: 0.93px solid #FFFFFF1A !important;
          }
          .dark .custom-card-wrapper:hover > div {
            border: 0.93px solid #FFFFFF4D !important;
          }
        `}</style>
        {icon && <div className="leading-[0]">
            <img src={icon} alt={title} noZoom className="block w-full aspect-video object-cover m-0 p-0 border-none shadow-none" />
          </div>}
        <div className="px-6 py-5">
          <h3 className="mt-0 text-base font-semibold text-gray-900 dark:text-white">
            {title}
          </h3>
          <p ref={containerRef} className="mt-1 mb-0 text-[#4B5258] dark:text-gray-300 font-normal text-sm leading-relaxed">
            {truncatedDesc}
          </p>
          <p ref={measureRef} className="text-[#4B5258] font-normal text-sm leading-relaxed m-0" style={{
    position: "absolute",
    visibility: "hidden",
    height: "auto",
    whiteSpace: "normal"
  }} aria-hidden="true" />
        </div>
      </div>
    </a>;
};

<div className="article_labels_list" style={{display: 'none'}} dangerouslySetInnerHTML={{__html: "End User , Overview , Article , Product Utilization , Established"}} />

<HidePageTitle />

<div className="hero-content w-full flex flex-col items-center py-[0] pb-[2.5rem] px-10">
  <h1
    className="text-center mb-[10px] text-[#151F26] dark:text-white"
    style={{
  fontWeight: 600,
  fontSize: "32px",
  lineHeight: "37.96px",
  letterSpacing: "0px",
}}
  >
    How can we help?
  </h1>

  <p
    className="text-justify md:text-center text-[#3F4448] dark:text-white max-w-2xl mx-auto mb-10"
    style={{
  fontWeight: 400,
  fontSize: "18px",
  lineHeight: "25.31px",
  letterSpacing: "0px",
}}
  >
    Explore our product documentation or ask Docs AI to learn about intelligent
    content management, secure collaboration, and automated workflows in Box.
  </p>
</div>

<div className="homepage_max_width w-full" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
  <div className="pb-[80px] px-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-[1210px] mx-auto">
    <CustomCard href="/en/box-fundamentals/for-users/getting-started/the-basics-of-box" icon="/images/home/Thumbnail_16x9-Fundamentals.jpg" title="Box Fundamentals" description="Get started with Box and learn how to organize, collaborate, and secure your content effectively." />

    <CustomCard href="/en/box-admin-tools" icon="/images/home/Thumbnail_16x9-Admin.jpg" title="Box Admin Tools" description="One central place with access controls, settings, and visibility to keep your enterprise secure." />

    <CustomCard href="/en/box-ai/getting-started/what-is-box-ai" icon="/images/home/Thumbnail_16x9-BoxAI.jpg" title="Box AI" description="Box AI taps into the wealth of knowledge within your enterprise content - making every person in your company smarter and more productive - all while maintaining enterprise-grade security, compliance, and privacy standards. Ask Box AI anything and get answers in seconds — from drafting meeting notes to uncovering key findings inside a lengthy research study. With AI-powered insights, you can make mission-critical decisions faster and with confidence." />

    <CustomCard href="/en/box-apps/box-apps-for-box-admins/about-box-apps" icon="/images/home/Thumbnail–BoxApps.jpg" title="Box Apps" description="Empower your teams to easily create intelligent applications with custom dashboards, metadata views, and integrated workflows." />

    <CustomCard href="/en/box-archive/getting-started/introducing-box-archive" icon="/images/home/Thumbnail_16x9-BoxArchive.jpg" title="Box Archive" description="Box Archive helps you streamline compliance with long-term content preservation. Whether you need a digital content archiving solution to achieve business goals or meet compliance obligations, Box Archive makes archiving your content simple and secure." />

    <CustomCard href="/en/box-automate" icon="/images/home/Thumbnail_16x9-BoxAutomate.jpg" title="Box Automate" description="Design and manage agentic workflows on Box with a visual builder, branching logic, and native integrations with Box AI, Sign, Doc Gen, Forms, and more." />

    <CustomCard href="/en/box-canvas/box-canvas-for-admins/introducing-box-canvas" icon="/images/home/Thumbnail_16x9-Canvas.jpg" title="Box Canvas" description="Box Canvas is a flexible, digital whiteboarding environment with infinite space and an intuitive, easy-to-use toolset for visual collaboration. With Canvas, your teams can take their ideas from brainstorming to execution, securely within Box." />

    <CustomCard href="/en/box-compliance/keysafe/about-keysafe" icon="/images/home/Thumbnail_16x9-Compliance.jpg" title="Box Compliance" description="Meet your data compliance and regulatory needs — GDPR, HIPAA, ITAR, and more." />

    <CustomCard href="/en/box-doc-gen/about-box-doc-gen/introducing-box-doc-gen" icon="/images/home/Thumbnail_16x9-BoxDocGen.jpg" title="Box Doc Gen" description="Dynamically generate custom documents natively in Box via Box Relay, in Salesforce, and in third party and custom apps with Box Doc Gen." />

    <CustomCard href="/en/box-drive/getting-started-with-box-drive/about-box-drive" icon="/images/home/Thumbnail_16x9-Drive.jpg" title="Box Drive" description="Access all of your Box files (even terabytes of data) right on your desktop from Windows Explorer or Mac Finder. Use Box Drive to easily create and collaborate on files, with all changes automatically saved to Box. Co-author documents simultaneously with colleagues while in desktop productivity suites like Microsoft Office or Apple iWork, and more. And keep the enterprise-grade security protecting everything you do." />

    <CustomCard href="/en/box-extract/about-box-extract" icon="/images/home/Thumbnail_16x9-Extract.jpg" title="Box Extract" description="Box Extract delivers AI-powered data extraction by combining the latest AI models to understand unstructured data with advanced OCR capabilities and agentic extraction approaches to automatically and accurately extract information from content and save it as metadata in Box. This metadata helps accelerate workflow automation, power faster content discovery, improve decision-making, and enables teams to work on content-driven processes effectively, efficiently and at scale." />

    <CustomCard href="/en/box-forms/about-box-forms" icon="/images/home/Thumbnail_16x9-Box Forms.jpg" title="Box Forms" description="Easily create engaging web and mobile forms to securely collect information and seamlessly trigger downstream actions to initiate business processes." />

    <CustomCard href="/en/box-governance/retention/about-retention-and-retention-policies" icon="/images/home/Thumbnail_16x9-Governance.jpg" title="Box Governance" description="Box Governance allows organizations to manage their content's lifecycle by powering business processes with flexible retention schedules, preserving content for defensible discovery, and managing the disposition of content. Get the content lifecycle management your organization needs to reduce risk and stay compliant, all while keeping productivity high." />

    <CustomCard href="/en/box-hubs/box-hubs-for-admins/about-box-hubs" icon="/images/home/Thumbnail_16x9-Box Hubs.jpg" title="Box Hubs" description="Box Hubs are intelligent portals that help you securely curate, organize and publish content, no matter what file type, or where it lives. That way you can put the right content into the right teammates' hands, when they need it. And, with Box AI for Hubs, you can ask questions across multiple documents curated in a Hub and get answers in seconds." />

    <CustomCard href="/en/box-mobile" icon="/images/home/Thumbnail_16x9-BoxMobile.jpg" title="Box Mobile" description="Capture, view, and share all your content securely from your phone or tablet." />

    <CustomCard href="/en/box-mcp/about-box-mcp-server" icon="/images/home/Thumbnail-BoxMCP.jpg" title="Box MCP Server" description="Securely connect AI agents to enterprise content." />

    <CustomCard href="/en/box-notes/creating-and-editing-box-notes/introducing-box-notes" icon="/images/home/Thumbnail_16x9-BoxNotes.jpg" title="Box Notes" description="Work together real-time to create plans, notes, and more in real time from any device." />

    <CustomCard href="/en/box-platform/box-platform-for-developers/box-platform-overview-and-resources" icon="/images/home/Thumbnail_16x9-Platform.jpg" title="Box Platform" description="Box APIs allow you to extend Box to meet you custom needs while maintaining necessary content security & compliance standards. Our comprehensive API reference documentation and robust developer toolkit empower you with the tools you need to build from the ground up with confidence." />

    <CustomCard href="/en/box-relay/about-relay/introducing-box-relay" icon="/images/home/Thumbnail_16x9-RelayAutomate.jpg" title="Box Relay" description="Automate content workflows and collaborative processes with a simple, no-code builder." />

    <CustomCard href="/en/box-shield/using-box-shield/introducing-box-shield" icon="/images/home/Thumbnail_16x9-BoxShield.jpg" title="Box Shield" description="Box Shield is our advanced security offering that helps organizations reduce risk and protect the flow of information. Shield helps you quickly and intelligently classify your content, apply flexible and frictionless security controls, and detect even the most sophisticated malware attacks." />

    <CustomCard href="/en/box-sign/box-sign-for-admins/introducing-box-sign" icon="/images/home/Thumbnail_16x9-BoxSign.jpg" title="Box Sign" description="Box Sign provides seamless, secure e-signatures right where you content lives. Simplify your e-sign workflows by integrating Box Sign with business applications, like Salesforce, and extend with power of Box Sign in custom applications with the Box Sign API. Empower your entire organization with unlimited e-signatures at no additional cost." />

    <CustomCard href="/en/box-shuttle/about-box-shuttle/introducing-box-shuttle" icon="/images/home/Thumbnail_16x9-Shuttle.jpg" title="Box Shuttle" description="Box Shuttle empowers admins and co-admins to migrate content into Box at petabyte scale. Built-in tools allow for analysis and planning, configuration and simulation, and migration and reporting. With more than 10 source systems to choose from, begin your data migration today." />

    <CustomCard href="/en/box-sync/using-box-sync/about-box-sync" icon="/images/home/Thumbnail_16x9-.jpg" title="Box Sync" description="Sync your desktop files with Box. We recommend migrating to Box Drive." />

    <CustomCard href="/en/box-tools/using-box-tools/installing-box-tools" icon="/images/home/Thumbnail_16x9-Tools.jpg" title="Box Tools" description="Use Box Tools to edit Box files from your desktop application." />
  </div>
</div>

<div className="homepage_max_width latest_section flex flex-col w-full p-5">
  <div className="flex flex-col w-full" style={{ marginTop: '4rem', marginBottom: '2rem' }}>
    <h2
      className="text-gray-900 dark:text-gray-200 mx-auto mb-5"
      style={{
      fontSize: '2rem',
      fontWeight: '700',
    }}
    >
      What's new
    </h2>
  </div>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-2 sm:gap-3 md:gap-[22px] md:px-0 px-10">
    <div className="release-card border border-gray-100 rounded-3xl p-5 md:p-8 bg-white dark:bg-transparent shadow-sm">
      <h2 className="text-center text-xl md:text-2xl font-bold text-[#151F26] dark:text-white mt-0 border-b-0" style={{ paddingTop: '36px', paddingBottom: '46px' }}>New & updated</h2>

      <ReleaseItem title="About Box Automate" date="April 29, 2026" badgeText="NEW" badgeVariant="blue" href="/en/box-automate/about-box-automate" />

      <ReleaseItem title="Enabling Box Automate" date="April 29, 2026" badgeText="NEW" badgeVariant="blue" href="/en/box-automate/enabling-box-automate" />

      <ReleaseItem title="Creating workflows in Box Automate" date="April 29, 2026" badgeText="NEW" badgeVariant="blue" href="/en/box-automate/creating-workflows-in-box-automate" />

      <ReleaseItem title="Managing Workflows" date="April 29, 2026" badgeText="NEW" badgeVariant="blue" href="/en/box-automate/managing-workflows" />

      <ReleaseItem title="Differences Between Box Automate and Box Relay" date="April 29, 2026" badgeText="NEW" badgeVariant="blue" href="/en/box-automate/differences-between-box-automate-and-box-relay" />
    </div>

    <div className="release-card border border-gray-100 rounded-3xl p-5 md:p-8 bg-white dark:bg-transparent shadow-sm">
      <h2 className="text-center text-xl md:text-2xl font-bold text-[#151F26] dark:text-white mt-0 border-b-0" style={{ paddingTop: '36px', paddingBottom: '46px' }}>Most viewed</h2>

      <ReleaseItem title="About Box MCP Server" date="April 27, 2026" badgeText="NEW" badgeVariant="blue" href="/en/box-mcp/about-box-mcp-server" />

      <ReleaseItem title="About Box AI" date="April 1, 2026" badgeText="UPDATED" badgeVariant="orange" href="/en/box-ai/getting-started/what-is-box-ai" />

      <ReleaseItem title="Supported AI Platforms" date="April 27, 2026" badgeText="NEW" badgeVariant="blue" secondaryBadgeText="TOP RATED" secondaryBadgeVariant="purple" href="/en/box-mcp/supported-ai-platforms" />

      <ReleaseItem title="The Basics of Box" date="March 27, 2026" badgeText="UPDATED" badgeVariant="orange" href="/en/box-fundamentals/for-users/getting-started/the-basics-of-box" />

      <ReleaseItem title="Available Tools" date="April 27, 2026" badgeText="NEW" badgeVariant="blue" href="/en/box-mcp/tools" />
    </div>
  </div>
</div>

<ChatAssistantInit />