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

# Blog

export const BlogPage = () => {
  const Tags = {
    Design: "Design",
    Engineering: "Engineering",
    Figma: "Figma",
    NewFeatures: "New Features",
    Web: "Web",
    Mobile: "Mobile",
    Newsletter: "Newsletter",
    HowTo: "How To",
    Accessibility: "Accessibility"
  };
  const blogPosts = [{
    title: "Introducing Tier 3 Design Tokens",
    href: "/blog/posts/2026-04-13-introducing-tier-3-tokens",
    description: "Anvil2 3.0 introduces component-level design tokens — the final layer in our 3-tier token architecture. Learn how the cascade works and how to customize component styles.",
    author: "Ben Ho",
    tags: [Tags.Engineering, Tags.Design, Tags.NewFeatures, Tags.Web],
    date: "04/13/2026",
    image: "/images/blog/introducing-tier-3-tokens/banner.svg"
  }, {
    title: "Anvil Insights - April 2026",
    href: "/blog/posts/2026-04-02-anvil-insights-q4-fy26",
    description: "Welcome to Q1 FY27! Last quarter we shipped the Anvil2 2.0 release plan, brought unit test coverage to 80%, and made significant progress on accessibility and contribution workflows.",
    author: "Jess Paris",
    tags: [Tags.Newsletter],
    date: "04/02/2026",
    image: "/images/blog/anvil-insights/anvil2-logo.png"
  }, {
    title: "More Info Tooltip Accessibility Improvements",
    href: "/blog/posts/2026-03-20-more-info-tooltip-accessibility",
    description: "We've updated how the moreInfo tooltip behaves across Anvil2 field components to fix several accessibility issues and lay the groundwork for upcoming AI-powered field annotations.",
    author: "Erica Gugliemella",
    tags: [Tags.Engineering, Tags.Web, Tags.Accessibility],
    date: "03/20/2026",
    image: "/images/blog/more-info-tooltip-updates/banner.png"
  }, {
    title: "Introducing Drilldown",
    href: "/blog/posts/2026-02-09-introducing-drilldown",
    description: "We've released a new Drilldown component for progressive disclosure inside Dialogs, Drawers, and Page Panels.",
    author: "James Coyle",
    tags: [Tags.Design, Tags.Engineering, Tags.NewFeatures, Tags.Web],
    date: "02/09/2026",
    image: "/images/docs/web/components/drilldown/overview-image.png"
  }, {
    title: "Introducing Toolbar Filters",
    href: "/blog/posts/2026-02-09-introducing-filters",
    description: "Anvil2 has released Toolbar Filters, available for immediate use. Five prebuilt filter types plus custom support.",
    author: "James Coyle",
    tags: [Tags.Design, Tags.Engineering, Tags.NewFeatures, Tags.Web],
    date: "02/09/2026",
    image: "/images/docs/web/components/toolbar-filter/overview-image.png"
  }, {
    title: "Introducing Adaptive Components",
    href: "/blog/posts/2026-02-03-introducing-adaptive-components",
    description: "What if components could determine the optimal experience automatically? That's where adaptiveness comes in.",
    author: "Adam Lantz",
    tags: [Tags.Engineering, Tags.Design, Tags.Web, Tags.Mobile],
    date: "02/03/2026",
    image: "/images/blog/introducing-adaptive-components/banner.png"
  }, {
    title: "Understanding Beta Features in Anvil2",
    href: "/blog/posts/2026-01-28-understanding-beta-features",
    description: "Beta isn't just a label for 'unfinished' work; it's a deliberate phase of collaborative development.",
    author: "Adam Lantz",
    tags: [Tags.Engineering, Tags.Design, Tags.Web],
    date: "01/28/2026",
    image: "/images/blog/understanding-beta-features/banner.png"
  }, {
    title: "Anvil2 2.0 is live!",
    href: "/blog/posts/2026-01-23-breaking-release",
    description: "We've released a breaking change to the Anvil Design System. This is a major change that will affect all users of the Anvil Design System.",
    author: "Jess Paris",
    tags: [Tags.Design, Tags.Engineering, Tags.NewFeatures, Tags.Web],
    date: "01/23/2026",
    image: "/images/blog/breaking-release/banner.png"
  }, {
    title: "Introducing Drag and Drop Components",
    href: "/blog/posts/2025-12-17-introducing-drag-and-drop",
    description: "Anvil2 has released a set of drag and drop components, available for immediate use.",
    author: "James Coyle",
    tags: [Tags.Design, Tags.Engineering, Tags.Figma, Tags.NewFeatures, Tags.Web],
    date: "12/17/2025",
    image: "/images/blog/dnd/dnd-preview.png"
  }, {
    title: "Anvil2 Extended Packages",
    href: "/blog/posts/2025-11-03-extended-packages",
    description: "We've created several new extended libraries to open up our contributions!",
    author: "Ryan De La Torre",
    tags: [Tags.Engineering, Tags.NewFeatures],
    date: "11/03/2025",
    image: null
  }, {
    title: "Anvil Insights | September 2025",
    href: "/blog/posts/2025-10-01-anvil-insights-q2",
    description: "Anvil Insights Anvil Design System | September 2025",
    author: "Jess Paris",
    tags: [Tags.Newsletter],
    date: "10/1/2025",
    image: "/images/blog/anvil-insights/anvil2-logo.png"
  }, {
    title: "Introducing Anvil Test Group",
    href: "/blog/posts/2025-08-25-introducing-anvil-test-group",
    description: "The Anvil Test Group is a partnership focused on quality. Join this collaborative initiative to ensure the quality and stability of our components by testing new features and bug fixes in real-world scenarios.",
    author: "Ben Ho",
    tags: [Tags.Engineering],
    date: "08/25/2025",
    image: null
  }, {
    title: "Team and Repo Updates",
    href: "/blog/posts/2025-05-13-team-and-repo-updates",
    description: "We're excited about our new team members and a new repo structure!",
    author: "Ryan De La Torre",
    tags: [Tags.Engineering, Tags.NewFeatures],
    date: "05/13/2025",
    image: "/images/blog/team-and-repo-updates/hammer-repo-readme.png"
  }, {
    title: "Engineering Support and Contributions",
    href: "/blog/posts/2025-04-15-dev-feedback",
    description: "Let's go over how you can ask for help and give your feedback to the Design System team!",
    author: "Ryan De La Torre",
    tags: [Tags.Engineering, Tags.HowTo, Tags.Web],
    date: "04/15/2025",
    image: "/images/blog/dev-feedback/idea-feature-request-board.png"
  }, {
    title: "Anvil Insights - March 2025",
    href: "/blog/posts/2025-03-27-anvil-insights-q1",
    description: "Anvil Insights Anvil Design System | March 2025",
    author: "Jess Paris",
    tags: [Tags.Newsletter],
    date: "03/27/2025",
    image: "/images/blog/anvil-insights/anvil2-logo.png"
  }, {
    title: "Combobox API Updates and Bug Fixes",
    href: "/blog/posts/2024-12-17-combobox-updates",
    description: "In case you missed it, as of version `1.16.8` of Anvil2, the `Combobox` has received quite a number of highly requested features and fixes!",
    author: "Ryan De La Torre",
    tags: [Tags.Engineering, Tags.NewFeatures, Tags.Web],
    date: "2/17/2024",
    image: "/images/blog/combobox-updates/combobox-selected-options.png"
  }, {
    title: "Update to our ghost Button visual and guidance",
    href: "/blog/posts/2024-08-28-ghost-button-style",
    description: "We've recently updated the visual of our lowest priority Button, ghost, from a blue color to black. We've also updated our pairing guidance to reflect the change.",
    author: "James Coyle",
    tags: [Tags.Design, Tags.Figma, Tags.Web],
    date: "08/28/2024",
    image: "/images/blog/ghost-button-style/ghost-button-main-image.png"
  }, {
    title: "Redefining Layout in Anvil2",
    href: "/blog/posts/2024-08-16-redefining-layout-in-anvil2",
    description: "In Anvil2, we have introduced new components and features to make creating dynamic, responsive page layouts a breeze. Read on to learn more!",
    author: "Derek Watson",
    tags: [Tags.Engineering, Tags.HowTo, Tags.Web],
    date: "08/16/2024",
    image: null
  }];
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedTag, setSelectedTag] = useState("");
  const [posts, setPosts] = useState(blogPosts);
  useEffect(() => {
    const filteredPosts = blogPosts.filter(post => {
      const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesTag = selectedTag === "" || post.tags.includes(selectedTag);
      return matchesSearch && matchesTag;
    });
    setPosts(filteredPosts);
  }, [searchTerm, selectedTag]);
  return <div className="my-10">
      <p className="mt-2 text-lg text-gray-600 dark:text-gray-400">
        The latest updates and tutorials from the Anvil Design System team.
      </p>

      <div className="flex gap-4 my-8">
        <div className="relative flex-1">
          <input type="search" placeholder="Search..." className="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-100 dark:bg-neutral-800/50 border border-gray-300 dark:border-neutral-700 focus:outline-none focus:border-blue-500" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
          <div className="absolute left-3 top-1/2 -translate-y-1/2">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="text-gray-400" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
            </svg>
          </div>
        </div>

        <div className="relative">
          <select value={selectedTag} onChange={e => setSelectedTag(e.target.value)} className="appearance-none pl-4 pr-10 py-2 rounded-lg bg-gray-100 dark:bg-neutral-800/50 border border-gray-300 dark:border-neutral-700 focus:outline-none focus:border-blue-500 text-gray-700 dark:text-gray-300 cursor-pointer">
            <option value="">All Tags</option>
            {Object.values(Tags).map(tag => <option key={tag} value={tag}>
                {tag}
              </option>)}
          </select>
          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="text-gray-500 dark:text-gray-400" viewBox="0 0 16 16">
              <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
            </svg>
          </div>
        </div>
      </div>

      <div className="space-y-12 mt-12">
        {posts.map(post => <a key={post.title} href={post.href} className="flex flex-col md:flex-row gap-6 border-b border-gray-200 dark:border-neutral-800 pb-12 group">
            <div className="w-full md:w-1/4">
              {post.image ? <img noZoom src={post.image} alt={post.title} className="rounded-lg w-full aspect-video object-cover my-0" /> : <div className="w-full aspect-video" />}
            </div>

            <div className="w-full md:w-3/4 flex flex-col gap-2">
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white my-0 group-hover:text-blue-500 transition-colors">
                {post.title}
              </h2>
              <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
                <span>
                  {Array.isArray(post.author) ? post.author.length === 2 ? `${post.author[0]} & ${post.author[1]}` : `${post.author.slice(0, -1).join(", ")}, & ${post.author[post.author.length - 1]}` : post.author}
                </span>
                <span>|</span>
                <span>{post.date}</span>
              </div>
              <p className="text-gray-600 dark:text-gray-400">
                {post.description}
              </p>
              <div className="flex gap-2">
                {post.tags.map(tag => <span key={tag} className="px-2 py-1 rounded bg-gray-100 dark:bg-neutral-800 text-xs">
                    {tag}
                  </span>)}
              </div>
            </div>
          </a>)}
      </div>
    </div>;
};

<BlogPage />