diff --git a/__tests__/ApiLayout_.test.res b/__tests__/ApiLayout_.test.res
new file mode 100644
index 000000000..3b941f61d
--- /dev/null
+++ b/__tests__/ApiLayout_.test.res
@@ -0,0 +1,87 @@
+open ReactRouter
+open Vitest
+
+let mockCategories: array<SidebarLayout.Sidebar.Category.t> = [
+  {
+    name: "Stdlib",
+    items: [
+      {name: "Array", href: "/docs/manual/api/stdlib/array"},
+      {name: "String", href: "/docs/manual/api/stdlib/string"},
+      {name: "Option", href: "/docs/manual/api/stdlib/option"},
+    ],
+  },
+  {
+    name: "Belt",
+    items: [
+      {name: "Belt.Array", href: "/docs/manual/api/belt/array"},
+      {name: "Belt.Map", href: "/docs/manual/api/belt/map"},
+    ],
+  },
+]
+
+test("desktop API layout shows sidebar categories and version select", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/manual/api/stdlib/array"]>
+      <div dataTestId="api-layout-wrapper">
+        <ApiLayout categories=mockCategories>
+          <div> {React.string("API documentation for Array module.")} </div>
+        </ApiLayout>
+      </div>
+    </MemoryRouter>,
+  )
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->toBeVisible
+
+  let belt = await screen->getByTextExact("Belt")
+  await element(belt)->toBeVisible
+
+  let array = await screen->getByTextExact("Array")
+  await element(array)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-api-layout")
+})
+
+test("mobile API layout hides sidebar", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/manual/api/stdlib/array"]>
+      <div dataTestId="api-layout-wrapper">
+        <ApiLayout categories=mockCategories>
+          <div> {React.string("API documentation for Array module.")} </div>
+        </ApiLayout>
+      </div>
+    </MemoryRouter>,
+  )
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->notToBeVisible
+
+  let content = await screen->getByTestId("side-layout-children")
+  await element(content)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-api-layout")
+})
+
+test("old docs warning shows version info", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="old-docs-warning-wrapper">
+        <ApiLayout.OldDocsWarning version="v11.0.0" route=%raw(`"/docs/manual/v11.0.0/api"`) />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let warningText = await screen->getByText("here")
+  await element(warningText)->toBeVisible
+
+  let wrapper = await screen->getByTestId("old-docs-warning-wrapper")
+  await element(wrapper)->toMatchScreenshot("api-old-docs-warning")
+})
diff --git a/__tests__/ApiOverviewLayout_.test.res b/__tests__/ApiOverviewLayout_.test.res
new file mode 100644
index 000000000..5e16689cf
--- /dev/null
+++ b/__tests__/ApiOverviewLayout_.test.res
@@ -0,0 +1,112 @@
+open ReactRouter
+open Vitest
+
+test("desktop API overview shows sidebar categories and content", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div> {React.string("API documentation content.")} </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let overview = await screen->getByText("Overview")
+  await element(overview)->toBeVisible
+
+  let introduction = await screen->getByText("Introduction")
+  await element(introduction)->toBeVisible
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->toBeVisible
+
+  let additionalLibraries = await screen->getByText("Additional Libraries")
+  await element(additionalLibraries)->toBeVisible
+
+  let belt = await screen->getByText("Belt")
+  await element(belt)->toBeVisible
+
+  let dom = await screen->getByText("Dom")
+  await element(dom)->toBeVisible
+
+  let mainContent = await screen->getByTestId("side-layout-children")
+  await element(mainContent)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-api-overview")
+})
+
+test("mobile API overview hides sidebar", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div> {React.string("API documentation content.")} </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let introduction = await screen->getByText("Introduction")
+  await element(introduction)->notToBeVisible
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->notToBeVisible
+
+  let belt = await screen->getByText("Belt")
+  await element(belt)->notToBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-api-overview")
+})
+
+test("desktop API overview shows all category items", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div>
+            <Markdown.H1> {React.string("API Reference")} </Markdown.H1>
+            <Markdown.P> {React.string("Welcome to the ReScript API documentation.")} </Markdown.P>
+          </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let apiTitle = await screen->getByText("API Reference")
+  await element(apiTitle)->toBeVisible
+
+  let apiDescription = await screen->getByText("Welcome to the ReScript API documentation.")
+  await element(apiDescription)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-api-overview-with-content")
+})
+
+test("tablet API overview", async () => {
+  await viewport(900, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div> {React.string("API documentation content.")} </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let overview = await screen->getByText("Overview")
+  await element(overview)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("tablet-api-overview")
+})
diff --git a/__tests__/Banner_.test.res b/__tests__/Banner_.test.res
new file mode 100644
index 000000000..8ff499abd
--- /dev/null
+++ b/__tests__/Banner_.test.res
@@ -0,0 +1,33 @@
+open Vitest
+
+test("renders banner with content", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="banner-wrapper">
+      <Banner> {React.string("ReScript v12 is now available!")} </Banner>
+    </div>,
+  )
+
+  let text = await screen->getByText("ReScript v12 is now available!")
+  await element(text)->toBeVisible
+
+  let wrapper = await screen->getByTestId("banner-wrapper")
+  await element(wrapper)->toMatchScreenshot("banner-with-content")
+})
+
+test("mobile banner", async () => {
+  await viewport(600, 500)
+
+  let screen = await render(
+    <div dataTestId="banner-wrapper">
+      <Banner> {React.string("ReScript v12 is now available!")} </Banner>
+    </div>,
+  )
+
+  let text = await screen->getByText("ReScript v12 is now available!")
+  await element(text)->toBeVisible
+
+  let wrapper = await screen->getByTestId("banner-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-banner")
+})
diff --git a/__tests__/BlogArticle_.test.res b/__tests__/BlogArticle_.test.res
new file mode 100644
index 000000000..c71e37459
--- /dev/null
+++ b/__tests__/BlogArticle_.test.res
@@ -0,0 +1,201 @@
+open ReactRouter
+open Vitest
+
+let mockAuthor: BlogFrontmatter.author = {
+  username: "test-author",
+  fullname: "Test Author",
+  role: "Developer",
+  imgUrl: "https://rescript-lang.org/brand/rescript-brandmark.svg",
+  social: X("testauthor"),
+}
+
+let mockFrontmatter: BlogFrontmatter.t = {
+  author: mockAuthor,
+  co_authors: [],
+  date: DateStr.fromString("2025-01-15"),
+  previewImg: Nullable.null,
+  articleImg: Nullable.null,
+  title: "Test Blog Post Title",
+  badge: Nullable.null,
+  description: Nullable.Value("A short description of the blog post for testing."),
+}
+
+test("desktop blog article renders header, author, date, and body", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-article-wrapper">
+        <BlogArticle frontmatter=mockFrontmatter isArchived=false path="/blog/test-article">
+          <div> {React.string("This is the blog post body content for testing.")} </div>
+        </BlogArticle>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let title = await screen->getByText("Test Blog Post Title")
+  await element(title)->toBeVisible
+
+  let authorName = await screen->getByText("Test Author")
+  await element(authorName)->toBeVisible
+
+  let description = await screen->getByText("A short description of the blog post for testing.")
+  await element(description)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-article-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-article")
+})
+
+test("desktop archived blog article shows warning banner", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-article-wrapper">
+        <BlogArticle frontmatter=mockFrontmatter isArchived=true path="/blog/test-article">
+          <div> {React.string("This is the blog post body content for testing.")} </div>
+        </BlogArticle>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let important = await screen->getByText("Important:")
+  await element(important)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-article-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-article-archived")
+})
+
+test("mobile blog article", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-article-wrapper">
+        <BlogArticle frontmatter=mockFrontmatter isArchived=false path="/blog/test-article">
+          <div> {React.string("This is the blog post body content for testing.")} </div>
+        </BlogArticle>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let title = await screen->getByText("Test Blog Post Title")
+  await element(title)->toBeVisible
+
+  let authorName = await screen->getByText("Test Author")
+  await element(authorName)->toBeVisible
+
+  let description = await screen->getByText("A short description of the blog post for testing.")
+  await element(description)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-article-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-blog-article")
+})
+
+let mockCoAuthor: BlogFrontmatter.author = {
+  username: "co-author",
+  fullname: "Co Author",
+  role: "Contributor",
+  imgUrl: "https://rescript-lang.org/brand/rescript-brandmark.svg",
+  social: Bluesky("coauthor.bsky.social"),
+}
+
+let mockFrontmatterWithCoAuthors: BlogFrontmatter.t = {
+  author: mockAuthor,
+  co_authors: [mockCoAuthor],
+  date: DateStr.fromString("2025-03-20"),
+  previewImg: Nullable.null,
+  articleImg: Nullable.null,
+  title: "Collaborative Blog Post",
+  badge: Nullable.Value(Release),
+  description: Nullable.Value("A post written by multiple authors."),
+}
+
+test("desktop blog article with co-authors shows all authors", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-article-wrapper">
+        <BlogArticle
+          frontmatter=mockFrontmatterWithCoAuthors isArchived=false path="/blog/collab-post"
+        >
+          <div> {React.string("Collaborative content.")} </div>
+        </BlogArticle>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let mainAuthor = await screen->getByText("Test Author")
+  await element(mainAuthor)->toBeVisible
+
+  let coAuthor = await screen->getByText("Co Author")
+  await element(coAuthor)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-article-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-article-coauthors")
+})
+
+let mockFrontmatterWithArticleImg: BlogFrontmatter.t = {
+  author: mockAuthor,
+  co_authors: [],
+  date: DateStr.fromString("2025-06-01"),
+  previewImg: Nullable.null,
+  articleImg: Nullable.Value("https://rescript-lang.org/brand/rescript-brandmark.svg"),
+  title: "Blog Post With Article Image",
+  badge: Nullable.Value(Release),
+  description: Nullable.Value("A post with an article image."),
+}
+
+test("desktop blog article with article image shows image", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-article-wrapper">
+        <BlogArticle
+          frontmatter=mockFrontmatterWithArticleImg isArchived=false path="/blog/image-post"
+        >
+          <div> {React.string("Content below the article image.")} </div>
+        </BlogArticle>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let title = await screen->getByText("Blog Post With Article Image")
+  await element(title)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-article-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-article-with-image")
+})
+
+let mockFrontmatterNoDescription: BlogFrontmatter.t = {
+  author: mockAuthor,
+  co_authors: [],
+  date: DateStr.fromString("2025-02-10"),
+  previewImg: Nullable.null,
+  articleImg: Nullable.null,
+  title: "Blog Post Without Description",
+  badge: Nullable.null,
+  description: Nullable.null,
+}
+
+test("desktop blog article without description", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-article-wrapper">
+        <BlogArticle frontmatter=mockFrontmatterNoDescription isArchived=false path="/blog/no-desc">
+          <div> {React.string("Content without a description above.")} </div>
+        </BlogArticle>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let title = await screen->getByText("Blog Post Without Description")
+  await element(title)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-article-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-article-no-description")
+})
diff --git a/__tests__/Blog_.test.res b/__tests__/Blog_.test.res
new file mode 100644
index 000000000..66c62d518
--- /dev/null
+++ b/__tests__/Blog_.test.res
@@ -0,0 +1,223 @@
+open ReactRouter
+open Vitest
+
+let mockAuthor: BlogFrontmatter.author = {
+  username: "rescript-team",
+  fullname: "ReScript Team",
+  role: "Core Development",
+  imgUrl: "https://rescript-lang.org/brand/rescript-brandmark.svg",
+  social: X("rescriptlang"),
+}
+
+let mockPosts: array<BlogApi.post> = [
+  {
+    path: "blog/release-12-0-0",
+    archived: false,
+    frontmatter: {
+      author: mockAuthor,
+      co_authors: [],
+      date: DateStr.fromString("2025-11-25"),
+      previewImg: Nullable.null,
+      articleImg: Nullable.null,
+      title: "Announcing ReScript 12",
+      badge: Nullable.Value(Release),
+      description: Nullable.Value("ReScript 12 arrives with a redesigned build toolchain."),
+    },
+  },
+  {
+    path: "blog/release-11-1-0",
+    archived: false,
+    frontmatter: {
+      author: mockAuthor,
+      co_authors: [],
+      date: DateStr.fromString("2024-06-15"),
+      previewImg: Nullable.null,
+      articleImg: Nullable.null,
+      title: "ReScript 11.1",
+      badge: Nullable.Value(Release),
+      description: Nullable.Value("Tagged template literals, import attributes, and more."),
+    },
+  },
+  {
+    path: "blog/improving-interop",
+    archived: false,
+    frontmatter: {
+      author: mockAuthor,
+      co_authors: [],
+      date: DateStr.fromString("2024-03-01"),
+      previewImg: Nullable.null,
+      articleImg: Nullable.null,
+      title: "Improving Interop",
+      badge: Nullable.null,
+      description: Nullable.Value("Better JavaScript interoperability in ReScript."),
+    },
+  },
+]
+
+test("desktop blog index shows featured post and cards", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-wrapper">
+        <Blog posts=mockPosts category=All />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let featured = await screen->getByText("Announcing ReScript 12")
+  await element(featured)->toBeVisible
+
+  let card1 = await screen->getByText("ReScript 11.1")
+  await element(card1)->toBeVisible
+
+  let card2 = await screen->getByText("Improving Interop")
+  await element(card2)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-index")
+})
+
+test("desktop blog shows category selector", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-wrapper">
+        <Blog posts=mockPosts category=All />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let allTab = await screen->getByText("All")
+  await element(allTab)->toBeVisible
+
+  let archivedTab = await screen->getByText("Archived")
+  await element(archivedTab)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-category-selector")
+})
+
+test("mobile blog index", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-wrapper">
+        <Blog posts=mockPosts category=All />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let featured = await screen->getByText("Announcing ReScript 12")
+  await element(featured)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-blog-index")
+})
+
+test("blog shows empty state when no posts", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-empty-wrapper">
+        <Blog posts=[] category=All />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let emptyMsg = await screen->getByText("Blog not yet available")
+  await element(emptyMsg)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-empty-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-empty")
+})
+
+let mockArchivedPosts: array<BlogApi.post> = [
+  {
+    path: "blog/old-post-2020",
+    archived: true,
+    frontmatter: {
+      author: mockAuthor,
+      co_authors: [],
+      date: DateStr.fromString("2020-03-15"),
+      previewImg: Nullable.null,
+      articleImg: Nullable.null,
+      title: "An Old Archived Post",
+      badge: Nullable.null,
+      description: Nullable.Value("This post is from the archives."),
+    },
+  },
+  {
+    path: "blog/old-post-2019",
+    archived: true,
+    frontmatter: {
+      author: mockAuthor,
+      co_authors: [],
+      date: DateStr.fromString("2019-11-01"),
+      previewImg: Nullable.null,
+      articleImg: Nullable.null,
+      title: "Another Archived Post",
+      badge: Nullable.null,
+      description: Nullable.Value("Another old post from the archives."),
+    },
+  },
+]
+
+test("desktop blog shows archived posts", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-wrapper">
+        <Blog posts=mockArchivedPosts category=Archived />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let post1 = await screen->getByText("An Old Archived Post")
+  await element(post1)->toBeVisible
+
+  let post2 = await screen->getByText("Another Archived Post")
+  await element(post2)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-archived")
+})
+
+test("desktop blog with single post", async () => {
+  await viewport(1440, 900)
+
+  let singlePost: array<BlogApi.post> = [
+    {
+      path: "blog/only-post",
+      archived: false,
+      frontmatter: {
+        author: mockAuthor,
+        co_authors: [],
+        date: DateStr.fromString("2025-12-01"),
+        previewImg: Nullable.null,
+        articleImg: Nullable.null,
+        title: "The Only Post",
+        badge: Nullable.Value(Release),
+        description: Nullable.Value("This is the only blog post."),
+      },
+    },
+  ]
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="blog-wrapper">
+        <Blog posts=singlePost category=All />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let post = await screen->getByText("The Only Post")
+  await element(post)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blog-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-single-post")
+})
diff --git a/__tests__/Button_.test.res b/__tests__/Button_.test.res
new file mode 100644
index 000000000..7dfbaa4c8
--- /dev/null
+++ b/__tests__/Button_.test.res
@@ -0,0 +1,82 @@
+open Vitest
+
+test("renders PrimaryRed button", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="button-wrapper">
+      <Button kind=PrimaryRed> {React.string("Click Me")} </Button>
+    </div>,
+  )
+
+  let btn = await screen->getByText("Click Me")
+  await element(btn)->toBeVisible
+
+  let wrapper = await screen->getByTestId("button-wrapper")
+  await element(wrapper)->toMatchScreenshot("button-primary-red")
+})
+
+test("renders PrimaryBlue button", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="button-wrapper">
+      <Button kind=PrimaryBlue> {React.string("Blue Action")} </Button>
+    </div>,
+  )
+
+  let btn = await screen->getByText("Blue Action")
+  await element(btn)->toBeVisible
+
+  let wrapper = await screen->getByTestId("button-wrapper")
+  await element(wrapper)->toMatchScreenshot("button-primary-blue")
+})
+
+test("renders SecondaryRed button", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="button-wrapper">
+      <Button kind=SecondaryRed> {React.string("Secondary")} </Button>
+    </div>,
+  )
+
+  let btn = await screen->getByText("Secondary")
+  await element(btn)->toBeVisible
+
+  let wrapper = await screen->getByTestId("button-wrapper")
+  await element(wrapper)->toMatchScreenshot("button-secondary-red")
+})
+
+test("renders Small button", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="button-wrapper">
+      <Button size=Small> {React.string("Small Button")} </Button>
+    </div>,
+  )
+
+  let btn = await screen->getByText("Small Button")
+  await element(btn)->toBeVisible
+
+  let wrapper = await screen->getByTestId("button-wrapper")
+  await element(wrapper)->toMatchScreenshot("button-small")
+})
+
+test("calls onClick when clicked", async () => {
+  await viewport(1440, 500)
+
+  let handleClick = fn()
+
+  let screen = await render(
+    <div dataTestId="button-wrapper">
+      <Button onClick=handleClick> {React.string("Clickable")} </Button>
+    </div>,
+  )
+
+  let btn = await screen->getByText("Clickable")
+  await btn->click
+
+  expect(handleClick)->toHaveBeenCalled
+})
diff --git a/__tests__/CodeExample_.test.res b/__tests__/CodeExample_.test.res
new file mode 100644
index 000000000..2497fb025
--- /dev/null
+++ b/__tests__/CodeExample_.test.res
@@ -0,0 +1,114 @@
+open ReactRouter
+open Vitest
+
+test("renders code block with language label", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="code-example-wrapper">
+      <CodeExample code="let x = 42" lang="res" />
+    </div>,
+  )
+
+  let label = await screen->getByText("RES")
+  await element(label)->toBeVisible
+
+  let wrapper = await screen->getByTestId("code-example-wrapper")
+  await element(wrapper)->toMatchScreenshot("code-example-rescript")
+})
+
+test("renders code block without label when showLabel is false", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="code-example-wrapper">
+      <CodeExample code="let x = 42" lang="res" showLabel=false />
+    </div>,
+  )
+
+  let wrapper = await screen->getByTestId("code-example-wrapper")
+  await element(wrapper)->toMatchScreenshot("code-example-no-label")
+})
+
+test("renders code block with highlighted lines", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="code-example-wrapper">
+      <CodeExample code="let x = 1\nlet y = 2\nlet z = 3" lang="res" highlightedLines=[2] />
+    </div>,
+  )
+
+  let wrapper = await screen->getByTestId("code-example-wrapper")
+  await element(wrapper)->toMatchScreenshot("code-example-highlighted")
+})
+
+test("renders toggle with multiple tabs", async () => {
+  await viewport(1440, 500)
+
+  let tabs: array<CodeExample.Toggle.tab> = [
+    {
+      highlightedLines: None,
+      label: Some("ReScript"),
+      lang: Some("res"),
+      code: "let greeting = \"hello\"",
+    },
+    {
+      highlightedLines: None,
+      label: Some("JavaScript"),
+      lang: Some("js"),
+      code: "var greeting = \"hello\";",
+    },
+  ]
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="toggle-wrapper">
+        <CodeExample.Toggle tabs />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let resTab = await screen->getByText("ReScript")
+  await element(resTab)->toBeVisible
+
+  let jsTab = await screen->getByText("JavaScript")
+  await element(jsTab)->toBeVisible
+
+  let wrapper = await screen->getByTestId("toggle-wrapper")
+  await element(wrapper)->toMatchScreenshot("code-toggle-tabs")
+})
+
+test("toggle switches between tabs on click", async () => {
+  await viewport(1440, 500)
+
+  let tabs: array<CodeExample.Toggle.tab> = [
+    {
+      highlightedLines: None,
+      label: Some("ReScript"),
+      lang: Some("res"),
+      code: "let greeting = \"hello\"",
+    },
+    {
+      highlightedLines: None,
+      label: Some("JavaScript"),
+      lang: Some("js"),
+      code: "var greeting = \"hello\";",
+    },
+  ]
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="toggle-wrapper">
+        <CodeExample.Toggle tabs />
+      </div>
+    </BrowserRouter>,
+  )
+
+  // Click the JavaScript tab
+  let jsTab = await screen->getByText("JavaScript")
+  await jsTab->click
+
+  let wrapper = await screen->getByTestId("toggle-wrapper")
+  await element(wrapper)->toMatchScreenshot("code-toggle-js-selected")
+})
diff --git a/__tests__/CommunityLayout_.test.res b/__tests__/CommunityLayout_.test.res
new file mode 100644
index 000000000..9d1725afa
--- /dev/null
+++ b/__tests__/CommunityLayout_.test.res
@@ -0,0 +1,130 @@
+open ReactRouter
+open Vitest
+
+let mockCategories: array<SidebarLayout.Sidebar.Category.t> = [
+  {
+    name: "Resources",
+    items: [
+      {name: "Overview", href: "/community/overview"},
+      {name: "Code of Conduct", href: "/community/code-of-conduct"},
+      {name: "Roadmap", href: "/community/roadmap"},
+    ],
+  },
+]
+
+let mockEntries: array<TableOfContents.entry> = [
+  {header: "Official Channels", href: "#official-channels"},
+  {header: "Community Projects", href: "#community-projects"},
+]
+
+test("desktop community layout shows sidebar and content", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="community-layout-wrapper">
+        <CommunityLayout categories=mockCategories entries=mockEntries>
+          <div> {React.string("Community content goes here.")} </div>
+        </CommunityLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let resources = await screen->getByText("Resources")
+  await element(resources)->toBeVisible
+
+  let overview = await screen->getByText("Overview")
+  await element(overview)->toBeVisible
+
+  let content = await screen->getByTestId("side-layout-children")
+  await element(content)->toBeVisible
+
+  let wrapper = await screen->getByTestId("community-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-community-layout")
+})
+
+test("mobile community layout hides sidebar", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="community-layout-wrapper">
+        <CommunityLayout categories=mockCategories entries=mockEntries>
+          <div> {React.string("Community content goes here.")} </div>
+        </CommunityLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let resources = await screen->getByText("Resources")
+  await element(resources)->notToBeVisible
+
+  let overview = await screen->getByText("Overview")
+  await element(overview)->notToBeVisible
+
+  let wrapper = await screen->getByTestId("community-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-community-layout")
+})
+
+let mockMultipleCategories: array<SidebarLayout.Sidebar.Category.t> = [
+  {
+    name: "Resources",
+    items: [
+      {name: "Overview", href: "/community/overview"},
+      {name: "Code of Conduct", href: "/community/code-of-conduct"},
+    ],
+  },
+  {
+    name: "Get Involved",
+    items: [
+      {name: "Contributing", href: "/community/contributing"},
+      {name: "Events", href: "/community/events"},
+    ],
+  },
+]
+
+test("desktop community layout with multiple categories", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="community-layout-wrapper">
+        <CommunityLayout categories=mockMultipleCategories entries=mockEntries>
+          <div> {React.string("Community content with multiple categories.")} </div>
+        </CommunityLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let resources = await screen->getByText("Resources")
+  await element(resources)->toBeVisible
+
+  let getInvolved = await screen->getByText("Get Involved")
+  await element(getInvolved)->toBeVisible
+
+  let contributing = await screen->getByText("Contributing")
+  await element(contributing)->toBeVisible
+
+  let wrapper = await screen->getByTestId("community-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-community-layout-multi-categories")
+})
+
+test("tablet community layout", async () => {
+  await viewport(900, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="community-layout-wrapper">
+        <CommunityLayout categories=mockCategories entries=mockEntries>
+          <div> {React.string("Community content goes here.")} </div>
+        </CommunityLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let resources = await screen->getByText("Resources")
+  await element(resources)->toBeVisible
+
+  let wrapper = await screen->getByTestId("community-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("tablet-community-layout")
+})
diff --git a/__tests__/DocsLayout_.test.res b/__tests__/DocsLayout_.test.res
new file mode 100644
index 000000000..31aaea32f
--- /dev/null
+++ b/__tests__/DocsLayout_.test.res
@@ -0,0 +1,160 @@
+open ReactRouter
+open Vitest
+
+let mockCategories: array<SidebarLayout.Sidebar.Category.t> = [
+  {
+    name: "Overview",
+    items: [
+      {name: "Introduction", href: "/docs/manual/introduction"},
+      {name: "Installation", href: "/docs/manual/installation"},
+    ],
+  },
+  {
+    name: "Language Features",
+    items: [
+      {name: "Primitive Types", href: "/docs/manual/primitive-types"},
+      {name: "Record", href: "/docs/manual/record"},
+      {name: "Object", href: "/docs/manual/object"},
+    ],
+  },
+]
+
+let mockToc: TableOfContents.t = {
+  title: "Introduction",
+  entries: [
+    {header: "What is ReScript", href: "#what-is-rescript"},
+    {header: "Prerequisites", href: "#prerequisites"},
+    {header: "Getting Started", href: "#getting-started"},
+  ],
+}
+
+test("desktop docs layout shows sidebar with categories", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="docs-layout-wrapper">
+        <DocsLayout categories=mockCategories activeToc=mockToc>
+          <div> {React.string("This is the documentation content.")} </div>
+        </DocsLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let overviewHeading = await screen->getByText("Overview")
+  await element(overviewHeading)->toBeVisible
+
+  let languageFeaturesHeading = await screen->getByText("Language Features")
+  await element(languageFeaturesHeading)->toBeVisible
+
+  let introItem = await screen->getByText("Introduction")
+  await element(introItem)->toBeVisible
+
+  let mainContent = await screen->getByTestId("side-layout-children")
+  await element(mainContent)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-layout")
+})
+
+test("desktop docs layout shows table of contents entries", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="docs-layout-wrapper">
+        <DocsLayout categories=mockCategories activeToc=mockToc>
+          <div> {React.string("This is the documentation content.")} </div>
+        </DocsLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  // The TOC entries render inside the sidebar under the active nav item.
+  // Since the test isn't at a matching route, the TOC appears for the first
+  // category item that matches the current location. Verify the layout
+  // renders with the activeToc data by checking sidebar and content are present.
+  let overviewHeading = await screen->getByText("Overview")
+  await element(overviewHeading)->toBeVisible
+
+  let mainContent = await screen->getByTestId("side-layout-children")
+  await element(mainContent)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-layout-with-toc")
+})
+
+test("mobile docs layout hides sidebar by default", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="docs-layout-wrapper">
+        <DocsLayout categories=mockCategories activeToc=mockToc>
+          <div> {React.string("This is the documentation content.")} </div>
+        </DocsLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let introItem = await screen->getByText("Introduction")
+  await element(introItem)->notToBeVisible
+
+  let mainContent = await screen->getByTestId("side-layout-children")
+  await element(mainContent)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-docs-layout")
+})
+
+test("desktop docs layout highlights active nav item", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/manual/installation"]>
+      <div dataTestId="docs-layout-wrapper">
+        <DocsLayout categories=mockCategories activeToc=mockToc>
+          <div> {React.string("This is the documentation content.")} </div>
+        </DocsLayout>
+      </div>
+    </MemoryRouter>,
+  )
+
+  let sidebar = await screen->getByTestId("sidebar-content")
+
+  let installItem = await sidebar->getByText("Installation")
+  await element(installItem)->toBeVisible
+
+  let introItem = await sidebar->getByText("Introduction")
+  await element(introItem)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-layout-active-item")
+})
+
+test("desktop docs layout shows pagination (prev/next)", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/manual/installation"]>
+      <div dataTestId="docs-layout-wrapper">
+        <DocsLayout categories=mockCategories activeToc=mockToc>
+          <div> {React.string("Installation documentation content.")} </div>
+        </DocsLayout>
+      </div>
+    </MemoryRouter>,
+  )
+
+  // When at "Installation" (second item), there should be a "Previous" link to "Introduction"
+  // and a "Next" link to "Primitive Types"
+  let content = await screen->getByTestId("side-layout-children")
+
+  let prevLink = await content->getByText("Introduction")
+  await element(prevLink)->toBeVisible
+
+  let nextLink = await content->getByText("Primitive Types")
+  await element(nextLink)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-layout-pagination")
+})
diff --git a/__tests__/DocsOverview_.test.res b/__tests__/DocsOverview_.test.res
new file mode 100644
index 000000000..b8e6eb05f
--- /dev/null
+++ b/__tests__/DocsOverview_.test.res
@@ -0,0 +1,71 @@
+open ReactRouter
+open Vitest
+
+test("desktop docs overview shows all section cards", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs"]>
+      <div dataTestId="docs-overview-wrapper">
+        <DocsOverview.default />
+      </div>
+    </MemoryRouter>,
+  )
+
+  let docsHeading = await screen->getByText("Docs")
+  await element(docsHeading)->toBeVisible
+
+  let languageManual = await screen->getByText("Language Manual")
+  await element(languageManual)->toBeVisible
+
+  let ecosystem = await screen->getByText("Ecosystem")
+  await element(ecosystem)->toBeVisible
+
+  let tools = await screen->getByText("Tools")
+  await element(tools)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-overview")
+})
+
+test("desktop docs overview shows ecosystem links", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs"]>
+      <div dataTestId="docs-overview-wrapper">
+        <DocsOverview.default />
+      </div>
+    </MemoryRouter>,
+  )
+
+  let packageIndex = await screen->getByText("Package Index")
+  await element(packageIndex)->toBeVisible
+
+  let rescriptReact = await screen->getByText("rescript-react")
+  await element(rescriptReact)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-overview-ecosystem")
+})
+
+test("mobile docs overview", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs"]>
+      <div dataTestId="docs-overview-wrapper">
+        <DocsOverview.default />
+      </div>
+    </MemoryRouter>,
+  )
+
+  let docsHeading = await screen->getByText("Docs")
+  await element(docsHeading)->toBeVisible
+
+  let languageManual = await screen->getByText("Language Manual")
+  await element(languageManual)->toBeVisible
+
+  let wrapper = await screen->getByTestId("docs-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-docs-overview")
+})
diff --git a/__tests__/Footer_.test.res b/__tests__/Footer_.test.res
new file mode 100644
index 000000000..2b1d6aa6a
--- /dev/null
+++ b/__tests__/Footer_.test.res
@@ -0,0 +1,50 @@
+open ReactRouter
+open Vitest
+
+test("desktop footer shows all sections and links", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="footer-wrapper">
+        <Footer />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let community = await screen->getByText("Community")
+  await element(community)->toBeVisible
+
+  let association = await screen->getByText("ReScript Association")
+  await element(association)->toBeVisible
+
+  let aboutSection = await screen->getByText("About")
+  await element(aboutSection)->toBeVisible
+
+  let findUsSection = await screen->getByText("Find us on")
+  await element(findUsSection)->toBeVisible
+
+  let wrapper = await screen->getByTestId("footer-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-footer")
+})
+
+test("mobile footer stacks sections vertically", async () => {
+  await viewport(600, 800)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="footer-wrapper">
+        <Footer />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let community = await screen->getByText("Community")
+  await element(community)->toBeVisible
+
+  let association = await screen->getByText("ReScript Association")
+  await element(association)->toBeVisible
+
+  let wrapper = await screen->getByTestId("footer-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-footer")
+})
diff --git a/__tests__/MainLayout_.test.res b/__tests__/MainLayout_.test.res
new file mode 100644
index 000000000..670d180c0
--- /dev/null
+++ b/__tests__/MainLayout_.test.res
@@ -0,0 +1,45 @@
+open ReactRouter
+open Vitest
+
+test("desktop main layout renders children and footer", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="main-layout-wrapper">
+        <MainLayout>
+          <div dataTestId="main-content"> {React.string("Main page content goes here.")} </div>
+        </MainLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let content = await screen->getByTestId("main-content")
+  await element(content)->toBeVisible
+
+  let community = await screen->getByText("Community")
+  await element(community)->toBeVisible
+
+  let wrapper = await screen->getByTestId("main-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-main-layout")
+})
+
+test("mobile main layout", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="main-layout-wrapper">
+        <MainLayout>
+          <div dataTestId="main-content"> {React.string("Main page content goes here.")} </div>
+        </MainLayout>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let content = await screen->getByTestId("main-content")
+  await element(content)->toBeVisible
+
+  let wrapper = await screen->getByTestId("main-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-main-layout")
+})
diff --git a/__tests__/MarkdownComponents_.test.res b/__tests__/MarkdownComponents_.test.res
new file mode 100644
index 000000000..2d7a21efd
--- /dev/null
+++ b/__tests__/MarkdownComponents_.test.res
@@ -0,0 +1,374 @@
+open ReactRouter
+open Vitest
+
+test("renders headings h1 through h5", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="headings-wrapper">
+      <Markdown.H1> {React.string("Heading Level 1")} </Markdown.H1>
+      <Markdown.H2 id="heading-2"> {React.string("Heading Level 2")} </Markdown.H2>
+      <Markdown.H3 id="heading-3"> {React.string("Heading Level 3")} </Markdown.H3>
+      <Markdown.H4 id="heading-4"> {React.string("Heading Level 4")} </Markdown.H4>
+      <Markdown.H5 id="heading-5"> {React.string("Heading Level 5")} </Markdown.H5>
+    </div>,
+  )
+
+  let heading1 = await screen->getByText("Heading Level 1")
+  await element(heading1)->toBeVisible
+
+  let wrapper = await screen->getByTestId("headings-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-headings")
+})
+
+test("renders paragraph, strong, and intro", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="text-wrapper">
+      <Markdown.Intro> {React.string("This is an introduction paragraph.")} </Markdown.Intro>
+      <Markdown.P>
+        {React.string("This is a regular paragraph with ")}
+        <Markdown.Strong> {React.string("bold text")} </Markdown.Strong>
+        {React.string(" inside it.")}
+      </Markdown.P>
+    </div>,
+  )
+
+  let intro = await screen->getByText("This is an introduction paragraph.")
+  await element(intro)->toBeVisible
+
+  let wrapper = await screen->getByTestId("text-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-text-elements")
+})
+
+test("renders Info and Warn admonitions", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="admonitions-wrapper">
+      <Markdown.Info>
+        <Markdown.P> {React.string("This is an informational message.")} </Markdown.P>
+      </Markdown.Info>
+      <Markdown.Warn>
+        <Markdown.P> {React.string("This is a warning message.")} </Markdown.P>
+      </Markdown.Warn>
+    </div>,
+  )
+
+  let infoMsg = await screen->getByText("This is an informational message.")
+  await element(infoMsg)->toBeVisible
+
+  let warnMsg = await screen->getByText("This is a warning message.")
+  await element(warnMsg)->toBeVisible
+
+  let wrapper = await screen->getByTestId("admonitions-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-admonitions")
+})
+
+test("renders Cite with author", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="cite-wrapper">
+      <Markdown.Cite author=Some("Jane Doe")>
+        {React.string("ReScript is the future of typed JavaScript.")}
+      </Markdown.Cite>
+    </div>,
+  )
+
+  let author = await screen->getByText("Jane Doe")
+  await element(author)->toBeVisible
+
+  let quote = await screen->getByText("ReScript is the future of typed JavaScript.")
+  await element(quote)->toBeVisible
+
+  let wrapper = await screen->getByTestId("cite-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-cite")
+})
+
+test("renders blockquote", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="blockquote-wrapper">
+      <Markdown.Blockquote>
+        <Markdown.P> {React.string("This is a blockquote with some important text.")} </Markdown.P>
+      </Markdown.Blockquote>
+    </div>,
+  )
+
+  let text = await screen->getByText("This is a blockquote with some important text.")
+  await element(text)->toBeVisible
+
+  let wrapper = await screen->getByTestId("blockquote-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-blockquote")
+})
+
+test("renders lists", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="lists-wrapper">
+      <Markdown.Ul>
+        <Markdown.Li> {React.string("Apple")} </Markdown.Li>
+        <Markdown.Li> {React.string("Banana")} </Markdown.Li>
+      </Markdown.Ul>
+      <Markdown.Ol>
+        <Markdown.Li> {React.string("First step")} </Markdown.Li>
+        <Markdown.Li> {React.string("Second step")} </Markdown.Li>
+      </Markdown.Ol>
+    </div>,
+  )
+
+  let unorderedItem = await screen->getByText("Apple")
+  await element(unorderedItem)->toBeVisible
+
+  let orderedItem = await screen->getByText("First step")
+  await element(orderedItem)->toBeVisible
+
+  let wrapper = await screen->getByTestId("lists-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-lists")
+})
+
+test("renders table", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="table-wrapper">
+      <Markdown.Table>
+        <Markdown.Thead>
+          <tr>
+            <Markdown.Th> {React.string("Name")} </Markdown.Th>
+            <Markdown.Th> {React.string("Type")} </Markdown.Th>
+          </tr>
+        </Markdown.Thead>
+        <tbody>
+          <tr>
+            <Markdown.Td> {React.string("foo")} </Markdown.Td>
+            <Markdown.Td> {React.string("string")} </Markdown.Td>
+          </tr>
+          <tr>
+            <Markdown.Td> {React.string("bar")} </Markdown.Td>
+            <Markdown.Td> {React.string("int")} </Markdown.Td>
+          </tr>
+        </tbody>
+      </Markdown.Table>
+    </div>,
+  )
+
+  let nameHeader = await screen->getByText("Name")
+  await element(nameHeader)->toBeVisible
+
+  let fooCell = await screen->getByText("foo")
+  await element(fooCell)->toBeVisible
+
+  let wrapper = await screen->getByTestId("table-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-table")
+})
+
+test("renders links", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="links-wrapper">
+        <Markdown.P>
+          <Markdown.A href="https://rescript-lang.org">
+            {React.string("External link")}
+          </Markdown.A>
+        </Markdown.P>
+        <Markdown.P>
+          <Markdown.A href="/docs/manual/introduction">
+            {React.string("Internal link")}
+          </Markdown.A>
+        </Markdown.P>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let externalLink = await screen->getByText("External link")
+  await element(externalLink)->toBeVisible
+
+  let internalLink = await screen->getByText("Internal link")
+  await element(internalLink)->toBeVisible
+
+  let wrapper = await screen->getByTestId("links-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-links")
+})
+
+test("renders Image with caption", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="image-wrapper">
+      <Markdown.Image
+        src="https://rescript-lang.org/brand/rescript-brandmark.svg" caption="The ReScript logo"
+      />
+    </div>,
+  )
+
+  let caption = await screen->getByText("The ReScript logo")
+  await element(caption)->toBeVisible
+
+  let wrapper = await screen->getByTestId("image-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-image")
+})
+
+test("renders Video with caption", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="video-wrapper">
+      <Markdown.Video src="https://player.vimeo.com/video/477758754" caption="A sample video" />
+    </div>,
+  )
+
+  let caption = await screen->getByText("A sample video")
+  await element(caption)->toBeVisible
+
+  let wrapper = await screen->getByTestId("video-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-video")
+})
+
+test("renders horizontal rule", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="hr-wrapper">
+      <Markdown.P> {React.string("Content above the rule.")} </Markdown.P>
+      <Markdown.Hr />
+      <Markdown.P> {React.string("Content below the rule.")} </Markdown.P>
+    </div>,
+  )
+
+  let above = await screen->getByText("Content above the rule.")
+  await element(above)->toBeVisible
+
+  let below = await screen->getByText("Content below the rule.")
+  await element(below)->toBeVisible
+
+  let wrapper = await screen->getByTestId("hr-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-hr")
+})
+
+test("renders inline code", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="inline-code-wrapper">
+      <Markdown.P>
+        {React.string("Use ")}
+        <code
+          className="md-inline-code px-2 py-0.5 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90/5"
+        >
+          {React.string("Array.map")}
+        </code>
+        {React.string(" to transform elements.")}
+      </Markdown.P>
+    </div>,
+  )
+
+  let code = await screen->getByText("Array.map")
+  await element(code)->toBeVisible
+
+  let wrapper = await screen->getByTestId("inline-code-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-inline-code")
+})
+
+test("renders Anchor with link icon", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="anchor-wrapper">
+      <Markdown.H2 id="test-section"> {React.string("Test Section")} </Markdown.H2>
+    </div>,
+  )
+
+  let heading = await screen->getByText("Test Section")
+  await element(heading)->toBeVisible
+
+  let wrapper = await screen->getByTestId("anchor-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-anchor")
+})
+
+test("renders Image with small size", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="image-small-wrapper">
+      <Markdown.Image
+        src="https://rescript-lang.org/brand/rescript-brandmark.svg"
+        size=#small
+        caption="Small image"
+      />
+    </div>,
+  )
+
+  let caption = await screen->getByText("Small image")
+  await element(caption)->toBeVisible
+
+  let wrapper = await screen->getByTestId("image-small-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-image-small")
+})
+
+test("renders Cite without author", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="cite-no-author-wrapper">
+      <Markdown.Cite author=None>
+        {React.string("An anonymous quote about functional programming.")}
+      </Markdown.Cite>
+    </div>,
+  )
+
+  let quote = await screen->getByText("An anonymous quote about functional programming.")
+  await element(quote)->toBeVisible
+
+  let wrapper = await screen->getByTestId("cite-no-author-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-cite-no-author")
+})
+
+test("renders nested list (ul inside li)", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="nested-list-wrapper">
+      <Markdown.Ul>
+        <Markdown.Li> {React.string("Parent item")} </Markdown.Li>
+      </Markdown.Ul>
+      <Markdown.Ol>
+        <Markdown.Li> {React.string("Numbered item")} </Markdown.Li>
+      </Markdown.Ol>
+    </div>,
+  )
+
+  let parentItem = await screen->getByText("Parent item")
+  await element(parentItem)->toBeVisible
+
+  let numberedItem = await screen->getByText("Numbered item")
+  await element(numberedItem)->toBeVisible
+
+  let wrapper = await screen->getByTestId("nested-list-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-nested-lists")
+})
+
+test("renders Strong text", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <div dataTestId="strong-wrapper">
+      <Markdown.P>
+        <Markdown.Strong> {React.string("Bold text")} </Markdown.Strong>
+        {React.string(" and normal text")}
+      </Markdown.P>
+    </div>,
+  )
+
+  let bold = await screen->getByText("Bold text")
+  await element(bold)->toBeVisible
+
+  let wrapper = await screen->getByTestId("strong-wrapper")
+  await element(wrapper)->toMatchScreenshot("markdown-strong")
+})
diff --git a/__tests__/NavbarSecondary_.test.res b/__tests__/NavbarSecondary_.test.res
new file mode 100644
index 000000000..4746c83ca
--- /dev/null
+++ b/__tests__/NavbarSecondary_.test.res
@@ -0,0 +1,57 @@
+open ReactRouter
+open Vitest
+
+test("desktop secondary navbar shows all doc section links", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <BrowserRouter>
+      <NavbarSecondary />
+    </BrowserRouter>,
+  )
+
+  let navbar = await screen->getByTestId("navbar-secondary")
+
+  await element(await navbar->getByText("Language Manual"))->toBeVisible
+  await element(await navbar->getByText("API"))->toBeVisible
+  await element(await navbar->getByText("Syntax Lookup"))->toBeVisible
+  await element(await navbar->getByText("React"))->toBeVisible
+
+  await element(navbar)->toMatchScreenshot("desktop-navbar-secondary")
+})
+
+test("mobile secondary navbar shows all links", async () => {
+  await viewport(600, 500)
+
+  let screen = await render(
+    <BrowserRouter>
+      <NavbarSecondary />
+    </BrowserRouter>,
+  )
+
+  let navbar = await screen->getByTestId("navbar-secondary")
+
+  await element(await navbar->getByText("Language Manual"))->toBeVisible
+  await element(await navbar->getByText("API"))->toBeVisible
+  await element(await navbar->getByText("Syntax Lookup"))->toBeVisible
+  await element(await navbar->getByText("React"))->toBeVisible
+
+  await element(navbar)->toMatchScreenshot("mobile-navbar-secondary")
+})
+
+test("secondary navbar highlights active section", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/react/introduction"]>
+      <NavbarSecondary />
+    </MemoryRouter>,
+  )
+
+  let navbar = await screen->getByTestId("navbar-secondary")
+
+  await element(await navbar->getByText("React"))->toBeVisible
+  await element(await navbar->getByText("Language Manual"))->toBeVisible
+
+  await element(navbar)->toMatchScreenshot("desktop-navbar-secondary-react-active")
+})
diff --git a/__tests__/SearchBox_.test.res b/__tests__/SearchBox_.test.res
new file mode 100644
index 000000000..bd53cc7cd
--- /dev/null
+++ b/__tests__/SearchBox_.test.res
@@ -0,0 +1,29 @@
+open Vitest
+
+test("renders with placeholder text", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="searchbox-wrapper">
+      <SearchBox
+        value="" placeholder="Search for something..." onClear={() => ()} onValueChange={_ => ()}
+      />
+    </div>,
+  )
+
+  let wrapper = await screen->getByTestId("searchbox-wrapper")
+  await element(wrapper)->toMatchScreenshot("searchbox-empty")
+})
+
+test("renders with a value", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="searchbox-wrapper">
+      <SearchBox value="@as" placeholder="Search..." onClear={() => ()} onValueChange={_ => ()} />
+    </div>,
+  )
+
+  let wrapper = await screen->getByTestId("searchbox-wrapper")
+  await element(wrapper)->toMatchScreenshot("searchbox-with-value")
+})
diff --git a/__tests__/SidebarLayout_.test.res b/__tests__/SidebarLayout_.test.res
new file mode 100644
index 000000000..f0aa5906f
--- /dev/null
+++ b/__tests__/SidebarLayout_.test.res
@@ -0,0 +1,191 @@
+open ReactRouter
+open Vitest
+
+let mockCategory: SidebarLayout.Sidebar.Category.t = {
+  name: "Overview",
+  items: [
+    {name: "Introduction", href: "/docs/manual/introduction"},
+    {name: "Installation", href: "/docs/manual/installation"},
+    {name: "Getting Started", href: "/docs/manual/getting-started"},
+  ],
+}
+
+let mockBreadcrumbs: list<Url.breadcrumb> = list{
+  {Url.name: "Docs", href: "/docs/"},
+  {Url.name: "Language Manual", href: "/docs/manual/introduction"},
+}
+
+test("sidebar category renders title and nav items", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="category-wrapper">
+        <SidebarLayout.Sidebar.Category category=mockCategory onClick={_ => ()} />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let introduction = await screen->getByText("Introduction")
+  await element(introduction)->toBeVisible
+
+  let installation = await screen->getByText("Installation")
+  await element(installation)->toBeVisible
+
+  let gettingStarted = await screen->getByText("Getting Started")
+  await element(gettingStarted)->toBeVisible
+
+  let wrapper = await screen->getByTestId("category-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-category")
+})
+
+test("sidebar category highlights active item", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="category-wrapper">
+        <SidebarLayout.Sidebar.Category
+          category=mockCategory
+          isItemActive={item => item.href == "/docs/manual/introduction"}
+          onClick={_ => ()}
+        />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let introduction = await screen->getByText("Introduction")
+  await element(introduction)->toBeVisible
+
+  let wrapper = await screen->getByTestId("category-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-category-active-item")
+})
+
+test("breadcrumbs render path segments", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="breadcrumbs-wrapper">
+        <SidebarLayout.BreadCrumbs crumbs=mockBreadcrumbs />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let docs = await screen->getByText("Docs")
+  await element(docs)->toBeVisible
+
+  let languageManual = await screen->getByText("Language Manual")
+  await element(languageManual)->toBeVisible
+
+  let wrapper = await screen->getByTestId("breadcrumbs-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-breadcrumbs")
+})
+
+let mockTocEntries: TableOfContents.t = {
+  title: "Introduction",
+  entries: [
+    {header: "What is ReScript", href: "#what-is-rescript"},
+    {header: "Basic Usage", href: "#basic-usage"},
+    {header: "Advanced", href: "#advanced"},
+  ],
+}
+
+test("sidebar category with active TOC renders entries", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
+      <div dataTestId="toc-wrapper">
+        <SidebarLayout.Sidebar.Category
+          category=mockCategory
+          isItemActive={item => item.href == "/docs/manual/introduction"}
+          getActiveToc={item =>
+            if item.href == "/docs/manual/introduction" {
+              Some(mockTocEntries)
+            } else {
+              None
+            }}
+          onClick={() => ()}
+        />
+      </div>
+    </MemoryRouter>,
+  )
+
+  let overview = await screen->getByText("What is ReScript")
+  await element(overview)->toBeVisible
+
+  let basicUsage = await screen->getByText("Basic Usage")
+  await element(basicUsage)->toBeVisible
+
+  let advanced = await screen->getByText("Advanced")
+  await element(advanced)->toBeVisible
+
+  let wrapper = await screen->getByTestId("toc-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-category-with-toc")
+})
+
+test("sidebar category with many items", async () => {
+  await viewport(1440, 900)
+
+  let largeCategory: SidebarLayout.Sidebar.Category.t = {
+    name: "All Types",
+    items: [
+      {name: "String", href: "/docs/manual/string"},
+      {name: "Int", href: "/docs/manual/int"},
+      {name: "Float", href: "/docs/manual/float"},
+      {name: "Bool", href: "/docs/manual/bool"},
+      {name: "Array", href: "/docs/manual/array"},
+      {name: "List", href: "/docs/manual/list"},
+      {name: "Option", href: "/docs/manual/option"},
+      {name: "Result", href: "/docs/manual/result"},
+    ],
+  }
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="category-wrapper">
+        <SidebarLayout.Sidebar.Category category=largeCategory onClick={_ => ()} />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let stringItem = await screen->getByText("String")
+  await element(stringItem)->toBeVisible
+
+  let resultItem = await screen->getByText("Result")
+  await element(resultItem)->toBeVisible
+
+  let wrapper = await screen->getByTestId("category-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-category-many-items")
+})
+
+test("breadcrumbs with deep path", async () => {
+  await viewport(1440, 900)
+
+  let deepBreadcrumbs: list<Url.breadcrumb> = list{
+    {Url.name: "Docs", href: "/docs/"},
+    {Url.name: "Language Manual", href: "/docs/manual/introduction"},
+    {Url.name: "Advanced", href: "/docs/manual/advanced"},
+  }
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="breadcrumbs-wrapper">
+        <SidebarLayout.BreadCrumbs crumbs=deepBreadcrumbs />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let docs = await screen->getByText("Docs")
+  await element(docs)->toBeVisible
+
+  let languageManual = await screen->getByText("Language Manual")
+  await element(languageManual)->toBeVisible
+
+  let advanced = await screen->getByText("Advanced")
+  await element(advanced)->toBeVisible
+
+  let wrapper = await screen->getByTestId("breadcrumbs-wrapper")
+  await element(wrapper)->toMatchScreenshot("sidebar-breadcrumbs-deep")
+})
diff --git a/__tests__/SyntaxLookup_.test.res b/__tests__/SyntaxLookup_.test.res
new file mode 100644
index 000000000..38b3bb864
--- /dev/null
+++ b/__tests__/SyntaxLookup_.test.res
@@ -0,0 +1,173 @@
+open ReactRouter
+open Vitest
+
+let mockItems: array<SyntaxLookup.item> = [
+  {
+    id: "as-decorator",
+    keywords: ["as", "decorator"],
+    name: "@as",
+    summary: "This is the `@as` decorator.",
+    category: Decorators,
+    status: Active,
+    href: "decorator_as",
+  },
+  {
+    id: "module-decorator",
+    keywords: ["module", "decorator"],
+    name: "@module",
+    summary: "This is the `@module` decorator.",
+    category: Decorators,
+    status: Active,
+    href: "decorator_module",
+  },
+  {
+    id: "pipe-operator",
+    keywords: ["pipe", "operator"],
+    name: "->",
+    summary: "The pipe operator.",
+    category: Operators,
+    status: Active,
+    href: "operators_pipe",
+  },
+  {
+    id: "deprecated-send-pipe",
+    keywords: ["send", "pipe", "deprecated"],
+    name: "|>",
+    summary: "The deprecated pipe operator.",
+    category: Operators,
+    status: Deprecated,
+    href: "operators_deprecated_pipe",
+  },
+]
+
+test("desktop syntax lookup renders categories and tags", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="syntax-lookup-wrapper">
+        <SyntaxLookup mdxSources=mockItems />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let decoratorsHeading = await screen->getByText("Decorators")
+  await element(decoratorsHeading)->toBeVisible
+
+  let asTag = await screen->getByText("@as")
+  await element(asTag)->toBeVisible
+
+  let moduleTag = await screen->getByText("@module")
+  await element(moduleTag)->toBeVisible
+
+  let operatorsHeading = await screen->getByText("Operators")
+  await element(operatorsHeading)->toBeVisible
+
+  let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-syntax-lookup")
+})
+
+test("desktop syntax lookup with active item shows detail box", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="syntax-lookup-wrapper">
+        <SyntaxLookup mdxSources=mockItems activeItem={mockItems->Array.getUnsafe(0)}>
+          <div> {React.string("Detail content for @as decorator.")} </div>
+        </SyntaxLookup>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let detail = await screen->getByText("Detail content for @as decorator.")
+  await element(detail)->toBeVisible
+
+  let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-syntax-lookup-active")
+})
+
+test("mobile syntax lookup", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="syntax-lookup-wrapper">
+        <SyntaxLookup mdxSources=mockItems />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let decoratorsHeading = await screen->getByText("Decorators")
+  await element(decoratorsHeading)->toBeVisible
+
+  let asTag = await screen->getByText("@as")
+  await element(asTag)->toBeVisible
+
+  let moduleTag = await screen->getByText("@module")
+  await element(moduleTag)->toBeVisible
+
+  let operatorsHeading = await screen->getByText("Operators")
+  await element(operatorsHeading)->toBeVisible
+
+  let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-syntax-lookup")
+})
+
+test("deprecated items show with line-through styling", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="syntax-lookup-wrapper">
+        <SyntaxLookup mdxSources=mockItems />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let deprecatedTag = await screen->getByText("|>")
+  await element(deprecatedTag)->toBeVisible
+
+  let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-syntax-lookup-deprecated")
+})
+
+test("syntax lookup detail box shows summary", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="syntax-lookup-wrapper">
+        <SyntaxLookup mdxSources=mockItems activeItem={mockItems->Array.getUnsafe(2)}>
+          <div> {React.string("Detailed documentation about the pipe operator.")} </div>
+        </SyntaxLookup>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let detail = await screen->getByText("Detailed documentation about the pipe operator.")
+  await element(detail)->toBeVisible
+
+  let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-syntax-lookup-pipe-detail")
+})
+
+test("mobile syntax lookup with active item", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="syntax-lookup-wrapper">
+        <SyntaxLookup mdxSources=mockItems activeItem={mockItems->Array.getUnsafe(0)}>
+          <div> {React.string("Detail content for @as decorator.")} </div>
+        </SyntaxLookup>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let detail = await screen->getByText("Detail content for @as decorator.")
+  await element(detail)->toBeVisible
+
+  let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-syntax-lookup-active")
+})
diff --git a/__tests__/Tag_.test.res b/__tests__/Tag_.test.res
new file mode 100644
index 000000000..8761cb663
--- /dev/null
+++ b/__tests__/Tag_.test.res
@@ -0,0 +1,41 @@
+open Vitest
+
+test("renders subtle tag with text", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="tag-wrapper">
+      <Tag text="ReScript" />
+    </div>,
+  )
+
+  let tag = await screen->getByText("ReScript")
+  await element(tag)->toBeVisible
+
+  let wrapper = await screen->getByTestId("tag-wrapper")
+  await element(wrapper)->toMatchScreenshot("tag-subtle")
+})
+
+test("renders multiple tags side by side", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="tags-wrapper" className="flex gap-2">
+      <Tag text="v12" />
+      <Tag text="Release" />
+      <Tag text="Featured" />
+    </div>,
+  )
+
+  let v12 = await screen->getByText("v12")
+  await element(v12)->toBeVisible
+
+  let release = await screen->getByText("Release")
+  await element(release)->toBeVisible
+
+  let featured = await screen->getByText("Featured")
+  await element(featured)->toBeVisible
+
+  let wrapper = await screen->getByTestId("tags-wrapper")
+  await element(wrapper)->toMatchScreenshot("tags-multiple")
+})
diff --git a/__tests__/__screenshots__/ApiLayout_.test.jsx/api-old-docs-warning-chromium-linux.png b/__tests__/__screenshots__/ApiLayout_.test.jsx/api-old-docs-warning-chromium-linux.png
new file mode 100644
index 000000000..a2747703c
Binary files /dev/null and b/__tests__/__screenshots__/ApiLayout_.test.jsx/api-old-docs-warning-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/ApiLayout_.test.jsx/desktop-API-layout-shows-sidebar-categories-and-version-select-1.png b/__tests__/__screenshots__/ApiLayout_.test.jsx/desktop-API-layout-shows-sidebar-categories-and-version-select-1.png
new file mode 100644
index 000000000..b751321f8
Binary files /dev/null and b/__tests__/__screenshots__/ApiLayout_.test.jsx/desktop-API-layout-shows-sidebar-categories-and-version-select-1.png differ
diff --git a/__tests__/__screenshots__/ApiLayout_.test.jsx/desktop-api-layout-chromium-linux.png b/__tests__/__screenshots__/ApiLayout_.test.jsx/desktop-api-layout-chromium-linux.png
new file mode 100644
index 000000000..26d30b972
Binary files /dev/null and b/__tests__/__screenshots__/ApiLayout_.test.jsx/desktop-api-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/ApiLayout_.test.jsx/mobile-API-layout-hides-sidebar-1.png b/__tests__/__screenshots__/ApiLayout_.test.jsx/mobile-API-layout-hides-sidebar-1.png
new file mode 100644
index 000000000..80c3ddc0c
Binary files /dev/null and b/__tests__/__screenshots__/ApiLayout_.test.jsx/mobile-API-layout-hides-sidebar-1.png differ
diff --git a/__tests__/__screenshots__/ApiLayout_.test.jsx/mobile-api-layout-chromium-linux.png b/__tests__/__screenshots__/ApiLayout_.test.jsx/mobile-api-layout-chromium-linux.png
new file mode 100644
index 000000000..b44221c1f
Binary files /dev/null and b/__tests__/__screenshots__/ApiLayout_.test.jsx/mobile-api-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/ApiLayout_.test.jsx/old-docs-warning-shows-version-info-1.png b/__tests__/__screenshots__/ApiLayout_.test.jsx/old-docs-warning-shows-version-info-1.png
new file mode 100644
index 000000000..f993aad86
Binary files /dev/null and b/__tests__/__screenshots__/ApiLayout_.test.jsx/old-docs-warning-shows-version-info-1.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-API-overview-shows-all-category-items-1.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-API-overview-shows-all-category-items-1.png
new file mode 100644
index 000000000..e83429f07
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-API-overview-shows-all-category-items-1.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-API-overview-shows-sidebar-categories-and-content-1.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-API-overview-shows-sidebar-categories-and-content-1.png
new file mode 100644
index 000000000..bd9d90404
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-API-overview-shows-sidebar-categories-and-content-1.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-api-overview-chromium-linux.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-api-overview-chromium-linux.png
new file mode 100644
index 000000000..43f4859b1
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-api-overview-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-api-overview-with-content-chromium-linux.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-api-overview-with-content-chromium-linux.png
new file mode 100644
index 000000000..0a61d1169
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/desktop-api-overview-with-content-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/mobile-API-overview-hides-sidebar-1.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/mobile-API-overview-hides-sidebar-1.png
new file mode 100644
index 000000000..3f1b3f67b
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/mobile-API-overview-hides-sidebar-1.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/mobile-api-overview-chromium-linux.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/mobile-api-overview-chromium-linux.png
new file mode 100644
index 000000000..b5d5dd61e
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/mobile-api-overview-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/tablet-API-overview-1.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/tablet-API-overview-1.png
new file mode 100644
index 000000000..72019c22f
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/tablet-API-overview-1.png differ
diff --git a/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/tablet-api-overview-chromium-linux.png b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/tablet-api-overview-chromium-linux.png
new file mode 100644
index 000000000..b3102909b
Binary files /dev/null and b/__tests__/__screenshots__/ApiOverviewLayout_.test.jsx/tablet-api-overview-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Banner_.test.jsx/banner-with-content-chromium-linux.png b/__tests__/__screenshots__/Banner_.test.jsx/banner-with-content-chromium-linux.png
new file mode 100644
index 000000000..9efa58ea3
Binary files /dev/null and b/__tests__/__screenshots__/Banner_.test.jsx/banner-with-content-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Banner_.test.jsx/mobile-banner-1.png b/__tests__/__screenshots__/Banner_.test.jsx/mobile-banner-1.png
new file mode 100644
index 000000000..70886689f
Binary files /dev/null and b/__tests__/__screenshots__/Banner_.test.jsx/mobile-banner-1.png differ
diff --git a/__tests__/__screenshots__/Banner_.test.jsx/mobile-banner-chromium-linux.png b/__tests__/__screenshots__/Banner_.test.jsx/mobile-banner-chromium-linux.png
new file mode 100644
index 000000000..66872c905
Binary files /dev/null and b/__tests__/__screenshots__/Banner_.test.jsx/mobile-banner-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Banner_.test.jsx/renders-banner-with-content-1.png b/__tests__/__screenshots__/Banner_.test.jsx/renders-banner-with-content-1.png
new file mode 100644
index 000000000..ac79539d8
Binary files /dev/null and b/__tests__/__screenshots__/Banner_.test.jsx/renders-banner-with-content-1.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-archived-blog-article-shows-warning-banner-1.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-archived-blog-article-shows-warning-banner-1.png
new file mode 100644
index 000000000..22cb38495
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-archived-blog-article-shows-warning-banner-1.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-archived-chromium-linux.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-archived-chromium-linux.png
new file mode 100644
index 000000000..868c9a352
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-archived-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-chromium-linux.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-chromium-linux.png
new file mode 100644
index 000000000..7cf614e29
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-coauthors-chromium-linux.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-coauthors-chromium-linux.png
new file mode 100644
index 000000000..1b4243d6a
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-coauthors-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-no-description-chromium-linux.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-no-description-chromium-linux.png
new file mode 100644
index 000000000..76f02e0ac
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-no-description-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-renders-header--author--date--and-body-1.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-renders-header--author--date--and-body-1.png
new file mode 100644
index 000000000..4eda750d1
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-renders-header--author--date--and-body-1.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-article-image-shows-image-1.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-article-image-shows-image-1.png
new file mode 100644
index 000000000..7af51cf47
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-article-image-shows-image-1.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-co-authors-shows-all-authors-1.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-co-authors-shows-all-authors-1.png
new file mode 100644
index 000000000..185153fcb
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-co-authors-shows-all-authors-1.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-image-chromium-linux.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-image-chromium-linux.png
new file mode 100644
index 000000000..5cb517d34
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-with-image-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-without-description-1.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-without-description-1.png
new file mode 100644
index 000000000..4c2cc165d
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/desktop-blog-article-without-description-1.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/mobile-blog-article-1.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/mobile-blog-article-1.png
new file mode 100644
index 000000000..5912562dd
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/mobile-blog-article-1.png differ
diff --git a/__tests__/__screenshots__/BlogArticle_.test.jsx/mobile-blog-article-chromium-linux.png b/__tests__/__screenshots__/BlogArticle_.test.jsx/mobile-blog-article-chromium-linux.png
new file mode 100644
index 000000000..84c53e8d3
Binary files /dev/null and b/__tests__/__screenshots__/BlogArticle_.test.jsx/mobile-blog-article-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-archived-chromium-linux.png b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-archived-chromium-linux.png
new file mode 100644
index 000000000..2ed1fea9b
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-archived-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-category-selector-chromium-linux.png b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-category-selector-chromium-linux.png
new file mode 100644
index 000000000..02ba54518
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-category-selector-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-empty-chromium-linux.png b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-empty-chromium-linux.png
new file mode 100644
index 000000000..6acf2ac4a
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-empty-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-index-chromium-linux.png b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-index-chromium-linux.png
new file mode 100644
index 000000000..02ba54518
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-index-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-shows-archived-posts-1.png b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-shows-archived-posts-1.png
new file mode 100644
index 000000000..1e1455afe
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-shows-archived-posts-1.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-single-post-chromium-linux.png b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-single-post-chromium-linux.png
new file mode 100644
index 000000000..593f308cd
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-single-post-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-with-single-post-1.png b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-with-single-post-1.png
new file mode 100644
index 000000000..c0fe2ebc1
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/desktop-blog-with-single-post-1.png differ
diff --git a/__tests__/__screenshots__/Blog_.test.jsx/mobile-blog-index-chromium-linux.png b/__tests__/__screenshots__/Blog_.test.jsx/mobile-blog-index-chromium-linux.png
new file mode 100644
index 000000000..33e5ebc84
Binary files /dev/null and b/__tests__/__screenshots__/Blog_.test.jsx/mobile-blog-index-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/button-primary-blue-chromium-linux.png b/__tests__/__screenshots__/Button_.test.jsx/button-primary-blue-chromium-linux.png
new file mode 100644
index 000000000..3e12d3c11
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/button-primary-blue-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/button-primary-red-chromium-linux.png b/__tests__/__screenshots__/Button_.test.jsx/button-primary-red-chromium-linux.png
new file mode 100644
index 000000000..c75d540fd
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/button-primary-red-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/button-secondary-red-chromium-linux.png b/__tests__/__screenshots__/Button_.test.jsx/button-secondary-red-chromium-linux.png
new file mode 100644
index 000000000..9dd6f1c29
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/button-secondary-red-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/button-small-chromium-linux.png b/__tests__/__screenshots__/Button_.test.jsx/button-small-chromium-linux.png
new file mode 100644
index 000000000..713da162f
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/button-small-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/renders-PrimaryBlue-button-1.png b/__tests__/__screenshots__/Button_.test.jsx/renders-PrimaryBlue-button-1.png
new file mode 100644
index 000000000..f96acbe35
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/renders-PrimaryBlue-button-1.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/renders-PrimaryRed-button-1.png b/__tests__/__screenshots__/Button_.test.jsx/renders-PrimaryRed-button-1.png
new file mode 100644
index 000000000..23ce58ce2
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/renders-PrimaryRed-button-1.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/renders-SecondaryRed-button-1.png b/__tests__/__screenshots__/Button_.test.jsx/renders-SecondaryRed-button-1.png
new file mode 100644
index 000000000..f022fb79b
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/renders-SecondaryRed-button-1.png differ
diff --git a/__tests__/__screenshots__/Button_.test.jsx/renders-Small-button-1.png b/__tests__/__screenshots__/Button_.test.jsx/renders-Small-button-1.png
new file mode 100644
index 000000000..370ea8fff
Binary files /dev/null and b/__tests__/__screenshots__/Button_.test.jsx/renders-Small-button-1.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-highlighted-chromium-linux.png b/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-highlighted-chromium-linux.png
new file mode 100644
index 000000000..a4c63f0cd
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-highlighted-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-no-label-chromium-linux.png b/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-no-label-chromium-linux.png
new file mode 100644
index 000000000..f7eb775e4
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-no-label-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-rescript-chromium-linux.png b/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-rescript-chromium-linux.png
new file mode 100644
index 000000000..79afabe65
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/code-example-rescript-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/code-toggle-js-selected-chromium-linux.png b/__tests__/__screenshots__/CodeExample_.test.jsx/code-toggle-js-selected-chromium-linux.png
new file mode 100644
index 000000000..145affb31
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/code-toggle-js-selected-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/code-toggle-tabs-chromium-linux.png b/__tests__/__screenshots__/CodeExample_.test.jsx/code-toggle-tabs-chromium-linux.png
new file mode 100644
index 000000000..dbc4350eb
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/code-toggle-tabs-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-with-highlighted-lines-1.png b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-with-highlighted-lines-1.png
new file mode 100644
index 000000000..d9ac8de5d
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-with-highlighted-lines-1.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-with-language-label-1.png b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-with-language-label-1.png
new file mode 100644
index 000000000..7a34b7c9c
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-with-language-label-1.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-without-label-when-showLabel-is-false-1.png b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-without-label-when-showLabel-is-false-1.png
new file mode 100644
index 000000000..52833d29e
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-code-block-without-label-when-showLabel-is-false-1.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/renders-toggle-with-multiple-tabs-1.png b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-toggle-with-multiple-tabs-1.png
new file mode 100644
index 000000000..c53aad15f
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/renders-toggle-with-multiple-tabs-1.png differ
diff --git a/__tests__/__screenshots__/CodeExample_.test.jsx/toggle-switches-between-tabs-on-click-1.png b/__tests__/__screenshots__/CodeExample_.test.jsx/toggle-switches-between-tabs-on-click-1.png
new file mode 100644
index 000000000..3d0be472f
Binary files /dev/null and b/__tests__/__screenshots__/CodeExample_.test.jsx/toggle-switches-between-tabs-on-click-1.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-chromium-linux.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-chromium-linux.png
new file mode 100644
index 000000000..d41b08a8b
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-multi-categories-chromium-linux.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-multi-categories-chromium-linux.png
new file mode 100644
index 000000000..fa22388eb
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-multi-categories-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-shows-sidebar-and-content-1.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-shows-sidebar-and-content-1.png
new file mode 100644
index 000000000..c400e4c93
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-shows-sidebar-and-content-1.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-with-multiple-categories-1.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-with-multiple-categories-1.png
new file mode 100644
index 000000000..404ed6794
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/desktop-community-layout-with-multiple-categories-1.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/mobile-community-layout-chromium-linux.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/mobile-community-layout-chromium-linux.png
new file mode 100644
index 000000000..76536f650
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/mobile-community-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/mobile-community-layout-hides-sidebar-1.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/mobile-community-layout-hides-sidebar-1.png
new file mode 100644
index 000000000..462bb857f
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/mobile-community-layout-hides-sidebar-1.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/tablet-community-layout-1.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/tablet-community-layout-1.png
new file mode 100644
index 000000000..aebf5cda8
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/tablet-community-layout-1.png differ
diff --git a/__tests__/__screenshots__/CommunityLayout_.test.jsx/tablet-community-layout-chromium-linux.png b/__tests__/__screenshots__/CommunityLayout_.test.jsx/tablet-community-layout-chromium-linux.png
new file mode 100644
index 000000000..314380e9b
Binary files /dev/null and b/__tests__/__screenshots__/CommunityLayout_.test.jsx/tablet-community-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-active-item-chromium-linux.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-active-item-chromium-linux.png
new file mode 100644
index 000000000..071ba26e7
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-active-item-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-chromium-linux.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-chromium-linux.png
new file mode 100644
index 000000000..43a8f6119
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-highlights-active-nav-item-1.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-highlights-active-nav-item-1.png
new file mode 100644
index 000000000..e5b21d679
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-highlights-active-nav-item-1.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-pagination-chromium-linux.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-pagination-chromium-linux.png
new file mode 100644
index 000000000..54487764c
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-pagination-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-pagination--prev-next--1.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-pagination--prev-next--1.png
new file mode 100644
index 000000000..8515a1585
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-pagination--prev-next--1.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-sidebar-with-categories-1.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-sidebar-with-categories-1.png
new file mode 100644
index 000000000..1fe3ddeb5
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-sidebar-with-categories-1.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-table-of-contents-entries-1.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-table-of-contents-entries-1.png
new file mode 100644
index 000000000..1fe3ddeb5
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-shows-table-of-contents-entries-1.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-with-toc-chromium-linux.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-with-toc-chromium-linux.png
new file mode 100644
index 000000000..43a8f6119
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/desktop-docs-layout-with-toc-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/mobile-docs-layout-chromium-linux.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/mobile-docs-layout-chromium-linux.png
new file mode 100644
index 000000000..329b22d83
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/mobile-docs-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsLayout_.test.jsx/mobile-docs-layout-hides-sidebar-by-default-1.png b/__tests__/__screenshots__/DocsLayout_.test.jsx/mobile-docs-layout-hides-sidebar-by-default-1.png
new file mode 100644
index 000000000..fa7845427
Binary files /dev/null and b/__tests__/__screenshots__/DocsLayout_.test.jsx/mobile-docs-layout-hides-sidebar-by-default-1.png differ
diff --git a/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-chromium-linux.png b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-chromium-linux.png
new file mode 100644
index 000000000..31ff4b5dd
Binary files /dev/null and b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-ecosystem-chromium-linux.png b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-ecosystem-chromium-linux.png
new file mode 100644
index 000000000..31ff4b5dd
Binary files /dev/null and b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-ecosystem-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-shows-all-section-cards-1.png b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-shows-all-section-cards-1.png
new file mode 100644
index 000000000..a6394633f
Binary files /dev/null and b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-shows-all-section-cards-1.png differ
diff --git a/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-shows-ecosystem-links-1.png b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-shows-ecosystem-links-1.png
new file mode 100644
index 000000000..a6394633f
Binary files /dev/null and b/__tests__/__screenshots__/DocsOverview_.test.jsx/desktop-docs-overview-shows-ecosystem-links-1.png differ
diff --git a/__tests__/__screenshots__/DocsOverview_.test.jsx/mobile-docs-overview-1.png b/__tests__/__screenshots__/DocsOverview_.test.jsx/mobile-docs-overview-1.png
new file mode 100644
index 000000000..bf6897b24
Binary files /dev/null and b/__tests__/__screenshots__/DocsOverview_.test.jsx/mobile-docs-overview-1.png differ
diff --git a/__tests__/__screenshots__/DocsOverview_.test.jsx/mobile-docs-overview-chromium-linux.png b/__tests__/__screenshots__/DocsOverview_.test.jsx/mobile-docs-overview-chromium-linux.png
new file mode 100644
index 000000000..5b60a3d02
Binary files /dev/null and b/__tests__/__screenshots__/DocsOverview_.test.jsx/mobile-docs-overview-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Footer_.test.jsx/desktop-footer-chromium-linux.png b/__tests__/__screenshots__/Footer_.test.jsx/desktop-footer-chromium-linux.png
new file mode 100644
index 000000000..77e8e933c
Binary files /dev/null and b/__tests__/__screenshots__/Footer_.test.jsx/desktop-footer-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Footer_.test.jsx/desktop-footer-shows-all-sections-and-links-1.png b/__tests__/__screenshots__/Footer_.test.jsx/desktop-footer-shows-all-sections-and-links-1.png
new file mode 100644
index 000000000..110fcffb2
Binary files /dev/null and b/__tests__/__screenshots__/Footer_.test.jsx/desktop-footer-shows-all-sections-and-links-1.png differ
diff --git a/__tests__/__screenshots__/Footer_.test.jsx/mobile-footer-chromium-linux.png b/__tests__/__screenshots__/Footer_.test.jsx/mobile-footer-chromium-linux.png
new file mode 100644
index 000000000..f7d743b86
Binary files /dev/null and b/__tests__/__screenshots__/Footer_.test.jsx/mobile-footer-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Footer_.test.jsx/mobile-footer-stacks-sections-vertically-1.png b/__tests__/__screenshots__/Footer_.test.jsx/mobile-footer-stacks-sections-vertically-1.png
new file mode 100644
index 000000000..57e8570d1
Binary files /dev/null and b/__tests__/__screenshots__/Footer_.test.jsx/mobile-footer-stacks-sections-vertically-1.png differ
diff --git a/__tests__/__screenshots__/MainLayout_.test.jsx/desktop-main-layout-chromium-linux.png b/__tests__/__screenshots__/MainLayout_.test.jsx/desktop-main-layout-chromium-linux.png
new file mode 100644
index 000000000..692dd68a1
Binary files /dev/null and b/__tests__/__screenshots__/MainLayout_.test.jsx/desktop-main-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MainLayout_.test.jsx/desktop-main-layout-renders-children-and-footer-1.png b/__tests__/__screenshots__/MainLayout_.test.jsx/desktop-main-layout-renders-children-and-footer-1.png
new file mode 100644
index 000000000..64ce5a766
Binary files /dev/null and b/__tests__/__screenshots__/MainLayout_.test.jsx/desktop-main-layout-renders-children-and-footer-1.png differ
diff --git a/__tests__/__screenshots__/MainLayout_.test.jsx/mobile-main-layout-1.png b/__tests__/__screenshots__/MainLayout_.test.jsx/mobile-main-layout-1.png
new file mode 100644
index 000000000..6d5674b79
Binary files /dev/null and b/__tests__/__screenshots__/MainLayout_.test.jsx/mobile-main-layout-1.png differ
diff --git a/__tests__/__screenshots__/MainLayout_.test.jsx/mobile-main-layout-chromium-linux.png b/__tests__/__screenshots__/MainLayout_.test.jsx/mobile-main-layout-chromium-linux.png
new file mode 100644
index 000000000..98e9d5a99
Binary files /dev/null and b/__tests__/__screenshots__/MainLayout_.test.jsx/mobile-main-layout-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-admonitions-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-admonitions-chromium-linux.png
new file mode 100644
index 000000000..7b8821c15
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-admonitions-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-anchor-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-anchor-chromium-linux.png
new file mode 100644
index 000000000..a4a16ddf2
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-anchor-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-blockquote-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-blockquote-chromium-linux.png
new file mode 100644
index 000000000..7becb754f
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-blockquote-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-cite-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-cite-chromium-linux.png
new file mode 100644
index 000000000..efdd94609
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-cite-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-cite-no-author-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-cite-no-author-chromium-linux.png
new file mode 100644
index 000000000..239076cf7
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-cite-no-author-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-headings-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-headings-chromium-linux.png
new file mode 100644
index 000000000..88e6749ec
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-headings-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-hr-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-hr-chromium-linux.png
new file mode 100644
index 000000000..cf42ba528
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-hr-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-image-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-image-chromium-linux.png
new file mode 100644
index 000000000..cea55eff3
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-image-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-image-small-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-image-small-chromium-linux.png
new file mode 100644
index 000000000..654773dd5
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-image-small-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-inline-code-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-inline-code-chromium-linux.png
new file mode 100644
index 000000000..86c248361
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-inline-code-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-links-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-links-chromium-linux.png
new file mode 100644
index 000000000..2cbd2707e
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-links-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-lists-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-lists-chromium-linux.png
new file mode 100644
index 000000000..6e3d0ab57
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-lists-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-nested-lists-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-nested-lists-chromium-linux.png
new file mode 100644
index 000000000..0d0db400a
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-nested-lists-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-strong-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-strong-chromium-linux.png
new file mode 100644
index 000000000..1b988b4ee
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-strong-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-table-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-table-chromium-linux.png
new file mode 100644
index 000000000..c3a297951
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-table-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-text-elements-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-text-elements-chromium-linux.png
new file mode 100644
index 000000000..d5f95e028
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-text-elements-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-video-chromium-linux.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-video-chromium-linux.png
new file mode 100644
index 000000000..067090d24
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/markdown-video-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Anchor-with-link-icon-1.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Anchor-with-link-icon-1.png
new file mode 100644
index 000000000..fc4b67bdf
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Anchor-with-link-icon-1.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Cite-without-author-1.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Cite-without-author-1.png
new file mode 100644
index 000000000..924936093
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Cite-without-author-1.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Image-with-small-size-1.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Image-with-small-size-1.png
new file mode 100644
index 000000000..7b4b2a8fc
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Image-with-small-size-1.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Strong-text-1.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Strong-text-1.png
new file mode 100644
index 000000000..964b64ac3
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-Strong-text-1.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-inline-code-1.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-inline-code-1.png
new file mode 100644
index 000000000..574d95c4e
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-inline-code-1.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-lists-1.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-lists-1.png
new file mode 100644
index 000000000..a59fef67a
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-lists-1.png differ
diff --git a/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-nested-list--ul-inside-li--1.png b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-nested-list--ul-inside-li--1.png
new file mode 100644
index 000000000..4f4afe78f
Binary files /dev/null and b/__tests__/__screenshots__/MarkdownComponents_.test.jsx/renders-nested-list--ul-inside-li--1.png differ
diff --git a/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-navbar-secondary-chromium-linux.png b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-navbar-secondary-chromium-linux.png
new file mode 100644
index 000000000..bc51442ee
Binary files /dev/null and b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-navbar-secondary-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-navbar-secondary-react-active-chromium-linux.png b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-navbar-secondary-react-active-chromium-linux.png
new file mode 100644
index 000000000..b9e9a6133
Binary files /dev/null and b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-navbar-secondary-react-active-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-secondary-navbar-shows-all-doc-section-links-1.png b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-secondary-navbar-shows-all-doc-section-links-1.png
new file mode 100644
index 000000000..68e650f4f
Binary files /dev/null and b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/desktop-secondary-navbar-shows-all-doc-section-links-1.png differ
diff --git a/__tests__/__screenshots__/NavbarSecondary_.test.jsx/mobile-navbar-secondary-chromium-linux.png b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/mobile-navbar-secondary-chromium-linux.png
new file mode 100644
index 000000000..5ba05892c
Binary files /dev/null and b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/mobile-navbar-secondary-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/NavbarSecondary_.test.jsx/mobile-secondary-navbar-shows-all-links-1.png b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/mobile-secondary-navbar-shows-all-links-1.png
new file mode 100644
index 000000000..b68ce07da
Binary files /dev/null and b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/mobile-secondary-navbar-shows-all-links-1.png differ
diff --git a/__tests__/__screenshots__/NavbarSecondary_.test.jsx/secondary-navbar-highlights-active-section-1.png b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/secondary-navbar-highlights-active-section-1.png
new file mode 100644
index 000000000..89bc240df
Binary files /dev/null and b/__tests__/__screenshots__/NavbarSecondary_.test.jsx/secondary-navbar-highlights-active-section-1.png differ
diff --git a/__tests__/__screenshots__/SearchBox_.test.jsx/renders-with-a-value-1.png b/__tests__/__screenshots__/SearchBox_.test.jsx/renders-with-a-value-1.png
new file mode 100644
index 000000000..210666bc7
Binary files /dev/null and b/__tests__/__screenshots__/SearchBox_.test.jsx/renders-with-a-value-1.png differ
diff --git a/__tests__/__screenshots__/SearchBox_.test.jsx/renders-with-placeholder-text-1.png b/__tests__/__screenshots__/SearchBox_.test.jsx/renders-with-placeholder-text-1.png
new file mode 100644
index 000000000..345e0e81e
Binary files /dev/null and b/__tests__/__screenshots__/SearchBox_.test.jsx/renders-with-placeholder-text-1.png differ
diff --git a/__tests__/__screenshots__/SearchBox_.test.jsx/searchbox-empty-chromium-linux.png b/__tests__/__screenshots__/SearchBox_.test.jsx/searchbox-empty-chromium-linux.png
new file mode 100644
index 000000000..6e3c1c837
Binary files /dev/null and b/__tests__/__screenshots__/SearchBox_.test.jsx/searchbox-empty-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SearchBox_.test.jsx/searchbox-with-value-chromium-linux.png b/__tests__/__screenshots__/SearchBox_.test.jsx/searchbox-with-value-chromium-linux.png
new file mode 100644
index 000000000..36b3ff6be
Binary files /dev/null and b/__tests__/__screenshots__/SearchBox_.test.jsx/searchbox-with-value-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/breadcrumbs-render-path-segments-1.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/breadcrumbs-render-path-segments-1.png
new file mode 100644
index 000000000..6bbd23878
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/breadcrumbs-render-path-segments-1.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/breadcrumbs-with-deep-path-1.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/breadcrumbs-with-deep-path-1.png
new file mode 100644
index 000000000..a3e7c46aa
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/breadcrumbs-with-deep-path-1.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-breadcrumbs-chromium-linux.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-breadcrumbs-chromium-linux.png
new file mode 100644
index 000000000..d3fddde22
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-breadcrumbs-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-breadcrumbs-deep-chromium-linux.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-breadcrumbs-deep-chromium-linux.png
new file mode 100644
index 000000000..a28c1ef26
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-breadcrumbs-deep-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-active-item-chromium-linux.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-active-item-chromium-linux.png
new file mode 100644
index 000000000..a164ae6c9
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-active-item-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-chromium-linux.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-chromium-linux.png
new file mode 100644
index 000000000..c1c4cdab3
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-highlights-active-item-1.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-highlights-active-item-1.png
new file mode 100644
index 000000000..b5d9f7416
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-highlights-active-item-1.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-many-items-chromium-linux.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-many-items-chromium-linux.png
new file mode 100644
index 000000000..ee247dab5
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-many-items-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-renders-title-and-nav-items-1.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-renders-title-and-nav-items-1.png
new file mode 100644
index 000000000..76d010528
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-renders-title-and-nav-items-1.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-active-TOC-renders-entries-1.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-active-TOC-renders-entries-1.png
new file mode 100644
index 000000000..2ac0bb615
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-active-TOC-renders-entries-1.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-many-items-1.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-many-items-1.png
new file mode 100644
index 000000000..7999cec54
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-many-items-1.png differ
diff --git a/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-toc-chromium-linux.png b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-toc-chromium-linux.png
new file mode 100644
index 000000000..9e27eef58
Binary files /dev/null and b/__tests__/__screenshots__/SidebarLayout_.test.jsx/sidebar-category-with-toc-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/deprecated-items-show-with-line-through-styling-1.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/deprecated-items-show-with-line-through-styling-1.png
new file mode 100644
index 000000000..5cf8af1c0
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/deprecated-items-show-with-line-through-styling-1.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-active-chromium-linux.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-active-chromium-linux.png
new file mode 100644
index 000000000..749243bcc
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-active-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-chromium-linux.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-chromium-linux.png
new file mode 100644
index 000000000..369b2b8b5
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-deprecated-chromium-linux.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-deprecated-chromium-linux.png
new file mode 100644
index 000000000..369b2b8b5
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-deprecated-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-pipe-detail-chromium-linux.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-pipe-detail-chromium-linux.png
new file mode 100644
index 000000000..8d03cdcb9
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-pipe-detail-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-renders-categories-and-tags-1.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-renders-categories-and-tags-1.png
new file mode 100644
index 000000000..5cf8af1c0
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-renders-categories-and-tags-1.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-with-active-item-shows-detail-box-1.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-with-active-item-shows-detail-box-1.png
new file mode 100644
index 000000000..049ff22ce
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/desktop-syntax-lookup-with-active-item-shows-detail-box-1.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-1.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-1.png
new file mode 100644
index 000000000..d5c7ce17a
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-1.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-active-chromium-linux.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-active-chromium-linux.png
new file mode 100644
index 000000000..4515fdf68
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-active-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-chromium-linux.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-chromium-linux.png
new file mode 100644
index 000000000..c0df11629
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-with-active-item-1.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-with-active-item-1.png
new file mode 100644
index 000000000..8a6257e68
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/mobile-syntax-lookup-with-active-item-1.png differ
diff --git a/__tests__/__screenshots__/SyntaxLookup_.test.jsx/syntax-lookup-detail-box-shows-summary-1.png b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/syntax-lookup-detail-box-shows-summary-1.png
new file mode 100644
index 000000000..0642aa1fd
Binary files /dev/null and b/__tests__/__screenshots__/SyntaxLookup_.test.jsx/syntax-lookup-detail-box-shows-summary-1.png differ
diff --git a/__tests__/__screenshots__/Tag_.test.jsx/renders-multiple-tags-side-by-side-1.png b/__tests__/__screenshots__/Tag_.test.jsx/renders-multiple-tags-side-by-side-1.png
new file mode 100644
index 000000000..17f02a83b
Binary files /dev/null and b/__tests__/__screenshots__/Tag_.test.jsx/renders-multiple-tags-side-by-side-1.png differ
diff --git a/__tests__/__screenshots__/Tag_.test.jsx/renders-subtle-tag-with-text-1.png b/__tests__/__screenshots__/Tag_.test.jsx/renders-subtle-tag-with-text-1.png
new file mode 100644
index 000000000..a052ecada
Binary files /dev/null and b/__tests__/__screenshots__/Tag_.test.jsx/renders-subtle-tag-with-text-1.png differ
diff --git a/__tests__/__screenshots__/Tag_.test.jsx/tag-subtle-chromium-linux.png b/__tests__/__screenshots__/Tag_.test.jsx/tag-subtle-chromium-linux.png
new file mode 100644
index 000000000..3d94db1ce
Binary files /dev/null and b/__tests__/__screenshots__/Tag_.test.jsx/tag-subtle-chromium-linux.png differ
diff --git a/__tests__/__screenshots__/Tag_.test.jsx/tags-multiple-chromium-linux.png b/__tests__/__screenshots__/Tag_.test.jsx/tags-multiple-chromium-linux.png
new file mode 100644
index 000000000..c76fad15f
Binary files /dev/null and b/__tests__/__screenshots__/Tag_.test.jsx/tags-multiple-chromium-linux.png differ
diff --git a/src/bindings/ReactRouter.res b/src/bindings/ReactRouter.res
index 796fb32eb..9aa991f79 100644
--- a/src/bindings/ReactRouter.res
+++ b/src/bindings/ReactRouter.res
@@ -123,3 +123,9 @@ module BrowserRouter = {
   @react.component @module("react-router")
   external make: (~children: React.element) => React.element = "BrowserRouter"
 }
+
+module MemoryRouter = {
+  @react.component @module("react-router")
+  external make: (~children: React.element, ~initialEntries: array<string>=?) => React.element =
+    "MemoryRouter"
+}
diff --git a/src/bindings/Vitest.res b/src/bindings/Vitest.res
index 53ae92b80..b8f20fef8 100644
--- a/src/bindings/Vitest.res
+++ b/src/bindings/Vitest.res
@@ -39,6 +39,11 @@ external getByTestId: (element, string) => promise<element> = "getByTestId"
 @send
 external getByText: (element, string) => promise<element> = "getByText"
 
+@send
+external getByTextWithOptions: (element, string, {"exact": bool}) => promise<element> = "getByText"
+
+let getByTextExact = (element, text) => getByTextWithOptions(element, text, {"exact": true})
+
 @send
 external getByLabelText: (element, string) => promise<element> = "getByLabelText"
 
diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index e94309592..85e69f4f0 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -156,6 +156,7 @@ module Sidebar = {
       >
         <aside
           id="sidebar-content"
+          dataTestId="sidebar-content"
           className="h-full relative top-0 px-4 w-full block md:top-40 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-10rem)] pt-8"
         >
           <button