From 28da41584873593393391da5e43d8086bae418c0 Mon Sep 17 00:00:00 2001 From: radiumcoders Date: Sun, 27 Sep 2026 15:03:56 +0530 Subject: [PATCH 1/2] Credit Shadcn Labs as a backer on the landing and docs A "Backed by" pill with the Shadcn Labs logomark sits above the landing headline, and a Backed by card with the logotype sits above the Tracwell card in the docs sidebar. Marks come from shadcn-labs.com/brand, recolored to currentColor. Links carry utm_source=evilbuttons and keep the referrer (rel=noopener only) so the traffic shows up in their analytics. Co-Authored-By: Claude Opus 5.5 --- app/docs/[[...slug]]/page.tsx | 4 ++- components/landing/landing-page.tsx | 26 ++++++++++++++ components/shadcn-labs.tsx | 56 +++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 components/shadcn-labs.tsx diff --git a/app/docs/[[...slug]]/page.tsx b/app/docs/[[...slug]]/page.tsx index 8e86b20..3e994e5 100644 --- a/app/docs/[[...slug]]/page.tsx +++ b/app/docs/[[...slug]]/page.tsx @@ -7,6 +7,7 @@ import { DocsPageActions } from "@/components/docs-page-actions"; import { getMDXComponents } from "@/components/mdx"; import { PreviewCard } from "@/components/preview-card"; import { PageToc } from "@/components/page-toc"; +import { ShadcnLabsCard } from "@/components/shadcn-labs"; import { TracwellCard } from "@/components/tracwell-card"; import { JsonLd } from "@/components/seo/json-ld"; import { getPageMarkdown } from "@/lib/markdown"; @@ -107,7 +108,8 @@ export default async function DocsPage({ params }: DocsPageProps) {

On this page

-
+
+
diff --git a/components/landing/landing-page.tsx b/components/landing/landing-page.tsx index 2af766f..398af23 100644 --- a/components/landing/landing-page.tsx +++ b/components/landing/landing-page.tsx @@ -6,6 +6,10 @@ import Link from "next/link"; import { type ReactNode, useState } from "react"; import { EvilShader } from "@/components/landing/evil-shader"; import { ShowcaseCarousel } from "@/components/landing/showcase-carousel"; +import { + SHADCN_LABS_URL, + ShadcnLabsLogomark, +} from "@/components/shadcn-labs"; import { useAppTheme } from "@/hooks/use-app-theme"; import { siteConfig } from "@/lib/seo"; import { toggleTheme } from "@/lib/theme-preference"; @@ -71,6 +75,27 @@ function Navbar() { ); } +/** "Backed by" pill above the headline. */ +function BackedBy() { + return ( + + + Backed by + + + + + + + ); +} + function ShaderBackdrop() { const theme = useAppTheme(); const [failed, setFailed] = useState(false); @@ -138,6 +163,7 @@ export function LandingPage({ categories, children }: LandingPageProps) {
+

Animated buttons, built with an{" "} diff --git a/components/shadcn-labs.tsx b/components/shadcn-labs.tsx new file mode 100644 index 0000000..e3b207c --- /dev/null +++ b/components/shadcn-labs.tsx @@ -0,0 +1,56 @@ +import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr"; + +// Shadcn Labs marks from https://www.shadcn-labs.com/brand, recolored to +// currentColor so they follow the active theme. + +/** + * UTM-tagged so the visit shows up under evilbuttons in their analytics. Link + * with rel="noopener" only: noreferrer would drop the referrer too. + */ +export const SHADCN_LABS_URL = + "https://www.shadcn-labs.com/?utm_source=evilbuttons&utm_medium=referral&utm_campaign=backed_by"; + +/** The pixel-brace mark on its own. */ +export function ShadcnLabsLogomark({ className }: { className?: string }) { + return ( + + + + + ); +} + +/** The mark followed by the "shadcn labs" wordmark. */ +export function ShadcnLabsLogotype({ className }: { className?: string }) { + return ( + + + + + + + + ); +} + +/** "Backed by Shadcn Labs" credit, the docs counterpart of TracwellCard. */ +export function ShadcnLabsCard() { + return ( + + + Backed by + + + + + ); +} From a7ccbf854e1e19771ab82c269c6d9c7944a08420 Mon Sep 17 00:00:00 2001 From: radiumcoders Date: Sun, 27 Sep 2026 15:06:16 +0530 Subject: [PATCH 2/2] Slim the landing's Backed by badge into a single-line chip Drop the circled mark for a 28px chip: mono uppercase label like the showcase cards, a hairline divider, the bare logomark and a small arrow. The mark picks up Shadcn Labs pink on hover. Co-Authored-By: Claude Opus 5.5 --- components/landing/landing-page.tsx | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/components/landing/landing-page.tsx b/components/landing/landing-page.tsx index 398af23..0f94734 100644 --- a/components/landing/landing-page.tsx +++ b/components/landing/landing-page.tsx @@ -1,6 +1,12 @@ "use client"; -import { ArrowRight, GithubLogo, Moon, Sun } from "@phosphor-icons/react"; +import { + ArrowRight, + ArrowUpRight, + GithubLogo, + Moon, + Sun, +} from "@phosphor-icons/react"; import Image from "next/image"; import Link from "next/link"; import { type ReactNode, useState } from "react"; @@ -75,7 +81,7 @@ function Navbar() { ); } -/** "Backed by" pill above the headline. */ +/** "Backed by" chip above the headline, in the same mono label voice as the showcase cards. */ function BackedBy() { return ( - + Backed by - - - - + + + ); }