Nativewind page: use the tailwind website (https://tailwindcss.com/showcase) as inspiration to create a showcase of com…

[danstepanov]

Summary

Url} + width="72" + /> + + + +

+ <a + href={adopter.repositoryUrl} + target="_blank" + rel="noopener noreferrer" + className="group/link -m-1 inline-flex w-fit max-w-full items-start gap-1 rounded-sm p-1 font-medium leading-tight outline-none hover:text-fd-primary focus-visible:ring-2 focus-visible:ring-fd-primary focus-visible:ring-offset-2 focus-visible:ring-offset-fd-background" + > + {adopter.name} + <ArrowUpRight + aria-hidden="true" + className="mt-0.5 size-3.5 shrink-0 text-fd-muted-foreground transition-transform duration-200 motion-safe:group-hover/link:-translate-y-0.5 motion-safe:group-hover/link:translate-x-0.5 motion-reduce:transition-none" + /> + on GitHub, opens in a new tab + +

+ {adopter.usage} +

+ <a + href={adopter.manifestUrl} + target="_blank" + rel="noopener noreferrer" + className="mt-4 inline-flex w-fit items-center gap-1.5 rounded-sm font-mono text-[10px] text-fd-muted-foreground outline-none hover:text-fd-primary focus-visible:ring-2 focus-visible:ring-fd-primary focus-visible:ring-offset-2 focus-visible:ring-offset-fd-background" + aria-label={${adopter.name} Nativewind dependency ${adopter.dependency}, opens in a new tab} + > + + nativewind {adopter.dependency} + +

+ + ))} + + + </> + ); +} diff --git a/app/(home)/SectionTitle.tsx b/app/(home)/SectionTitle.tsx index e1f24901ef751a43668356ad75ee36aaf92ef8ff..04f16ea0026725a2787f286b16937639c43926fb --- a/app/(home)/SectionTitle.tsx +++ b/app/(home)/SectionTitle.tsx @​@​ -1,15 +1,27 @​@​ import SectionLink from "./SectionLink"; import { cn } from "@​/lib/cn"; -export default function SectionTitle({ id, title, className } : { id: string; title: string, className?: string }) { +export default function SectionTitle({ + id, + title, + className, + level = 1, +}: { + id: string; + title: string; + className?: string; + level?: 1 | 2; +}) { + const Heading = level === 1 ? "h1" : "h2"; + return ( - <h1 id={id} className={cn('text-2xl md:text-4xl font-medium max-lg:px-8 pt-8 pb-4 md:pt-12 border-b border-dashed backdrop-blur w-full dark:opacity-90 text-left', className)}> + <Heading id={id} className={cn('text-2xl md:text-4xl font-medium max-lg:px-8 pt-8 pb-4 md:pt-12 border-b border-dashed backdrop-blur w-full dark:opacity-90 text-left', className)}> <SectionLink className="z-30 md:hidden" href={#${id}} name="text-2xl px-8 pb-4 pt-8 " /> <SectionLink className="z-30 hidden md:block lg:hidden" href={#${id}} name="text-4xl px-4 pb-8 pt-12 " /> <SectionLink className="z-30 hidden lg:block" href={#${id}} name="text-4xl pb-8 pt-12 " />

{title}

- + ) -} \ No newline at end of file +} diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx index f3fac4fea5e9a90a43e02e3888f5abd00dba9187..1c399bfaedda28e3a519cc1079a04f81372f15f3 --- a/app/(home)/page.tsx +++ b/app/(home)/page.tsx @​@​ -1,8 +1,7 @​@​ +import AdoptersSection from "./AdoptersSection"; import ComponentKitsSection from "./ComponentKitsSection"; import FooterSection from "./FooterSection"; import HeroSection from "./HeroSection"; -import TestimonialsSection from "./TestimonialsSection"; -import TestimonialsSectionContents from "./TestimonialsSectionContents"; import WhyNativewindSection from "./WhyNativewindSection"; export default function HomePage() { @​@​ -12,9 +11,7 @​@​

- - - + dif…

Original design brief

use the tailwind website (https://tailwindcss.com/showcase) as inspiration to create a showcase of companies that use Nativewind. This would replace the existing content in the "Who is using Nativewind?" section. You can keep the header for that section, just swap out the companies. Don't get rid of the company data that you're replacing though, might use that later. You can use the "Find top Nativewind libraries" chat to identify which companies to showcase (start with 10).

Validation

Production build passed. Desktop and mobile, light and dark rendered without page errors or horizontal overflow. Visual design still requires human review.

Request context

Discord review: https://discord.com/channels/1458892941874692146/1552160136968015984

Brand commit: 8fedabcab4bb480b40a0d84002c12e32e03e6e23

Design input: 5a501b53f9d9d34f4783b4415a986620a460e74e26a223eec548b7053bc5ef47

This is draft implementation work. Human review is required before merging.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
nativewind	Ready	Preview	Sep 23, 2026 3:46am UTC