Highlight projects built with Nativewind

app/(home)/AdoptersSection.tsx

@@ -0,0 +1,113 @@
+import type { ReactNode } from "react";
+import Image from "next/image";
+import { ArrowUpRight } from "lucide-react";
+
+import Folo from "../assets/adopters/folo.svg";
+import GluestackDark from "../assets/adopters/gluestack-dark.svg";
+import GluestackLight from "../assets/adopters/gluestack-light.svg";
+import KarakeepDark from "../assets/adopters/karakeep-dark.svg";
+import KarakeepLight from "../assets/adopters/karakeep-light.svg";
+import Linkwarden from "../assets/adopters/linkwarden.png";
+import OnyxDark from "../assets/adopters/onyx-dark.png";
+import OnyxLight from "../assets/adopters/onyx-light.png";
+import PolarDark from "../assets/adopters/polar-dark.svg";
+import PolarLight from "../assets/adopters/polar-light.svg";
+import PostHog from "../assets/adopters/posthog.svg";
+import ReusablesDark from "../assets/adopters/react-native-reusables-dark.svg";
+import ReusablesLight from "../assets/adopters/react-native-reusables-light.svg";
+import Streamyfin from "../assets/adopters/streamyfin.png";
+import adopters from "./adopters.json";
+
+// Use the source colors and supplied theme variants. Do not recolor project marks.
+// See app/assets/adopters/provenance.json for their sources and transformations.
+const marks: Record<string, ReactNode> = {
+  posthog: (
+    <span className="flex h-8 w-12 items-center justify-center rounded-md bg-white px-1.5">
+      <PostHog className="h-auto w-full" />
+    </span>
+  ),
+  folo: <Folo className="size-8" />,
+  onyx: (
+    <>
+      <Image src={OnyxLight} alt="" className="size-8 dark:hidden" sizes="32px" />
+      <Image src={OnyxDark} alt="" className="hidden size-12 dark:block" sizes="48px" />
+    </>
+  ),
+  karakeep: (
+    <>
+      <KarakeepLight className="size-8 dark:hidden" />
+      <KarakeepDark className="hidden size-8 dark:block" />
+    </>
+  ),
+  linkwarden: <Image src={Linkwarden} alt="" className="size-8" sizes="32px" />,
+  polar: (
+    <>
+      <PolarLight viewBox="0 0 300 300" className="size-8 dark:hidden" />
+      <PolarDark viewBox="0 0 300 300" className="hidden size-8 dark:block" />
+    </>
+  ),
+  "react-native-reusables": (
+    <>
+      <ReusablesLight className="size-8 dark:hidden" />
+      <ReusablesDark className="hidden size-8 dark:block" />
+    </>
+  ),
+  gluestack: (
+    <>
+      <GluestackLight className="size-9 dark:hidden" />
+      <GluestackDark className="hidden size-9 dark:block" />
+    </>
+  ),
+  streamyfin: <Image src={Streamyfin} alt="" className="size-9 rounded-lg" sizes="36px" />,
+};
+
+export default function AdoptersSection() {
+  return (
+    <section aria-labelledby="built-with-nativewind" className="relative border-t border-dashed">
+      <div className="mx-auto w-full max-w-fd-container">
+        <div className="flex flex-col gap-5 px-4 pb-7 pt-10 text-left sm:px-8 lg:flex-row lg:items-end lg:justify-between lg:px-0">
+          <div>
+            <p className="mb-3 font-mono text-[11px] uppercase tracking-[0.16em] text-cyan-800 dark:text-cyan-300">
+              The Nativewind ecosystem
+            </p>
+            <h2 id="built-with-nativewind" className="scroll-mt-24 text-2xl font-medium tracking-tight sm:text-3xl">
+              Built with Nativewind
+            </h2>
+            <p className="mt-2 max-w-[55ch] text-sm leading-relaxed text-fd-muted-foreground">
+              Powering open source apps and the tools developers build with.
+            </p>
+          </div>
+          <a
+            href="#showcase"
+            className="flex w-fit items-center gap-1.5 rounded-sm text-sm text-fd-muted-foreground underline-offset-4 hover:text-fd-foreground hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-cyan-600 dark:focus-visible:outline-cyan-300"
+          >
+            Explore the showcase
+            <ArrowUpRight aria-hidden="true" className="size-4" />
+          </a>
+        </div>
+        <ul className="grid grid-cols-2 border-t border-dashed text-left lg:grid-cols-5">
+          {adopters.map((adopter) => (
+            <li
+              key={adopter.id}
+              className="min-w-0 border-b border-r border-dashed even:border-r-0 lg:even:border-r lg:[&:nth-child(5n)]:border-r-0"
+            >
+              <a
+                href={adopter.url}
+                className="group flex min-h-28 h-full flex-col sm:flex-row items-center justify-center gap-3 px-4 py-5 transition-colors hover:bg-cyan-50/60 focus-visible:relative focus-visible:z-10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-600 dark:hover:bg-cyan-950/20 dark:focus-visible:outline-cyan-300 motion-reduce:transition-none"
+              >
+                {marks[adopter.id] && (
+                  <span aria-hidden="true" className="flex size-12 shrink-0 items-center justify-center">
+                    {marks[adopter.id]}
+                  </span>
+                )}
+                <span className="min-w-0 max-w-28 text-center sm:text-left text-sm font-medium leading-snug tracking-tight underline-offset-4 group-hover:underline">
+                  {adopter.name}
+                </span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}

app/(home)/adopters.json

@@ -0,0 +1,132 @@
+[
+  {
+    "id": "posthog",
+    "name": "PostHog",
+    "url": "https://github.com/PostHog/posthog",
+    "usage": "Mobile app",
+    "evidence": {
+      "manifest_url": "https://github.com/PostHog/posthog/blob/854a4262ec8b23513b91a3c4d3659ec9b1e9cd90/products/desktop/apps/mobile/package.json",
+      "manifest_sha256": "ba8c64cff5d02ab7059d795fbacd4c9f680d042e67a2502385048884e1ce73e7",
+      "nativewind_version": "^4.2.1",
+      "verified_at": "2026-09-22T00:39:15.968858+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "folo",
+    "name": "Folo",
+    "url": "https://github.com/RSSNext/Folo",
+    "usage": "Mobile app",
+    "evidence": {
+      "manifest_url": "https://github.com/RSSNext/Folo/blob/379a6e6daf3f7b986c6221a4aba30f022ecc04f9/apps/mobile/package.json",
+      "manifest_sha256": "f054ec3bbf0c3cfac6357234597a2b9a6ca32756f228bf76e9cec0ddc7309ca1",
+      "nativewind_version": "4.2.6",
+      "verified_at": "2026-09-22T00:39:14.981412+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "onyx",
+    "name": "Onyx",
+    "url": "https://github.com/onyx-dot-app/onyx",
+    "usage": "Mobile app",
+    "evidence": {
+      "manifest_url": "https://github.com/onyx-dot-app/onyx/blob/e8709da3874761c227eb4c12f4071107506677a2/mobile/package.json",
+      "manifest_sha256": "db9a40de2fc5df3ba4d1fee7a6eb376b9c81b9e2755b6839982bde04c51ffcbd",
+      "nativewind_version": "^4.2.6",
+      "verified_at": "2026-09-22T00:39:14.960219+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "karakeep",
+    "name": "Karakeep",
+    "url": "https://github.com/karakeep-app/karakeep",
+    "usage": "Mobile app",
+    "evidence": {
+      "manifest_url": "https://github.com/karakeep-app/karakeep/blob/2d58d906c89e5f6b08a28f9d45a3c617d506a4b4/apps/mobile/package.json",
+      "manifest_sha256": "ccaf0d730681ad4bbb496072ce227cc526ee6b10d976e630f211096f4d361707",
+      "nativewind_version": "^4.2.6",
+      "verified_at": "2026-09-22T00:39:15.121579+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "suna",
+    "name": "Suna",
+    "url": "https://github.com/kortix-ai/suna",
+    "usage": "Mobile app",
+    "evidence": {
+      "manifest_url": "https://github.com/kortix-ai/suna/blob/0479379dbefc7996be4a933c596599b1e8cbaec3/apps/mobile/package.json",
+      "manifest_sha256": "4b39f184612bf5bb88eb6ce2cb0123d501ead55e99d8ee4b2a4403d655377d36",
+      "nativewind_version": "^4.2.1",
+      "verified_at": "2026-09-22T00:39:15.000939+00:00"
+    },
+    "presentation_note": "Name retained from the selected research list. The repository now presents Kortix branding; plain text is used to avoid mislabeling a Kortix logo."
+  },
+  {
+    "id": "linkwarden",
+    "name": "Linkwarden",
+    "url": "https://github.com/linkwarden/linkwarden",
+    "usage": "Mobile app",
+    "evidence": {
+      "manifest_url": "https://github.com/linkwarden/linkwarden/blob/952ac4540657cae3a67c3ca59433899d2fda8374/apps/mobile/package.json",
+      "manifest_sha256": "2831fd754673c3c474572b2cd1c28c1baf277b86361adae97bf6c2088e6ee769",
+      "nativewind_version": "^4.2.1",
+      "verified_at": "2026-09-22T00:39:15.031266+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "polar",
+    "name": "Polar",
+    "url": "https://github.com/polarsource/polar",
+    "usage": "App",
+    "evidence": {
+      "manifest_url": "https://github.com/polarsource/polar/blob/e011302f038694212340da13dfd8df4da97dd6a1/clients/apps/app/package.json",
+      "manifest_sha256": "b1e4d8d7dfc4e5f0e9a86407cc3b8ae4287f120a52818da7b74c0099e670a420",
+      "nativewind_version": "^4.2.1",
+      "verified_at": "2026-09-22T00:39:14.971371+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "react-native-reusables",
+    "name": "React Native Reusables",
+    "url": "https://github.com/founded-labs/react-native-reusables",
+    "usage": "Component registry",
+    "evidence": {
+      "manifest_url": "https://github.com/founded-labs/react-native-reusables/blob/a477f2c9e78956675f228d403b99d7da56b79e68/packages/registry/package.json",
+      "manifest_sha256": "73b1d1034ccef749a44f3fdd3f968a97a8f5592451d7625c86460ccbd8e9ea77",
+      "nativewind_version": "^4.2.2",
+      "verified_at": "2026-09-22T00:39:15.002865+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "gluestack",
+    "name": "gluestack UI",
+    "url": "https://github.com/gluestack/gluestack-ui",
+    "usage": "Component library",
+    "evidence": {
+      "manifest_url": "https://github.com/gluestack/gluestack-ui/blob/b712c8541c85d57becbd1a1b2ba150a369223eb6/packages/gluestack-ui/package.json",
+      "manifest_sha256": "eb1374f316233310debf45ae9d3a3067addd022699f45aaf5208b2f212750d9e",
+      "nativewind_version": "^4.1.23",
+      "verified_at": "2026-09-22T00:39:14.978193+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  },
+  {
+    "id": "streamyfin",
+    "name": "Streamyfin",
+    "url": "https://github.com/streamyfin/streamyfin",
+    "usage": "App",
+    "evidence": {
+      "manifest_url": "https://github.com/streamyfin/streamyfin/blob/7fb905d1e887377ba80ca49b62582690729f77bf/package.json",
+      "manifest_sha256": "ad714dc7a0f47259bf63c3d4540cb85df48f25f02d488f98796699405b94a364",
+      "nativewind_version": "^2.0.11",
+      "verified_at": "2026-09-22T00:39:14.967095+00:00"
+    },
+    "presentation_note": "Official project asset; source and transformations are recorded in app/assets/adopters/provenance.json."
+  }
+]

app/(home)/page.tsx

@@ -1,3 +1,4 @@
+import AdoptersSection from "./AdoptersSection";
 import ComponentKitsSection from "./ComponentKitsSection";
 import FooterSection from "./FooterSection";
 import HeroSection from "./HeroSection";
@@ -11,6 +12,7 @@ export default function HomePage() {
       <main className="flex flex-1 flex-col justify-center text-center border-x border-dashed">
         <div className="fixed max-w-fd-container lg:w-[calc(100%-1rem)] box-content lg:border-x border-dashed top-0 left-1/2 -translate-x-1/2 h-screen pointer-events-none" />
         <HeroSection />
+        <AdoptersSection />
         <WhyNativewindSection />
         <TestimonialsSection>
           <TestimonialsSectionContents />

app/assets/adopters/README.md

@@ -0,0 +1,15 @@
+# Nativewind adoption section assets
+
+These third party marks identify the projects featured in `app/(home)/AdoptersSection.tsx`. They belong to their respective owners and are not part of the Nativewind visual identity. Their inclusion describes repository adoption; it does not imply endorsement, sponsorship, or a commercial relationship.
+
+`provenance.json` records the official repository, pinned asset URL, original SHA256, shipped SHA256, verification time, transformations, and the dependency manifest establishing Nativewind usage. The section data in `app/(home)/adopters.json` records each manifest hash and the Nativewind dependency version. All ten selected projects were rechecked on September 21, 2026. The list comes from the existing filtered research, `top-twenty-products-verified.json`; selection order is retained, with no popularity claims on the public page.
+
+## Presentation
+
+Use original project colors. Use the supplied light and dark variants for Onyx, Karakeep, Polar, and gluestack UI. React Native Reusables supplies one favicon with black and white strokes selected through a color scheme media query; its two local variants retain those exact colors while selecting by the website theme. This also prevents the source favicon's global `path` rule from affecting other inline SVGs. PostHog is placed on a small white backing to preserve its dark body in both themes. App icons keep their own backgrounds.
+
+SVG sources were parsed, active content and external references were checked, and the standard Karakeep SVG 1.1 DOCTYPE was removed without loading it. Geometry and colors were preserved. Raster assets are unchanged source bytes. Use this folder only for the adoption section; these are not Nativewind or NativewindUI assets.
+
+Suna intentionally has no logo asset. Its selected repository now identifies the product as Kortix. The section retains the requested research name as plain text rather than putting a Kortix mark beside a Suna label. Revisit the public name and mark together if the shortlist is revised.
+
+Official source provenance is established. Nativewind designers have not yet approved this section's composition or optical logo sizing.