Skip to content

Shadcn labs badge #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
radiumcoders merged 2 commits into from
Sep 27, 2026
Merged

Shadcn labs badge #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28da415
Credit Shadcn Labs as a backer on the landing and docs
radiumcoders Sep 27, 2026
a7ccbf8
Slim the landing's Backed by badge into a single-line chip
radiumcoders Sep 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion app/docs/[[...slug]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -107,7 +108,8 @@ export default async function DocsPage({ params }: DocsPageProps) {
<div className="docs-scroll flex max-h-[calc(100dvh-6rem)] flex-col gap-3 overflow-y-auto pr-2">
<p className="text-xs font-medium text-muted-foreground">On this page</p>
<PageToc />
<div className="mt-6">
<div className="mt-6 flex flex-col gap-2">
<ShadcnLabsCard />
<TracwellCard />
</div>
</div>
Expand Down
36 changes: 35 additions & 1 deletion components/landing/landing-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
"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";
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";
Expand Down Expand Up @@ -71,6 +81,29 @@ function Navbar() {
);
}

/** "Backed by" chip above the headline, in the same mono label voice as the showcase cards. */
function BackedBy() {
return (
<a
href={SHADCN_LABS_URL}
target="_blank"
rel="noopener"
aria-label="Backed by Shadcn Labs"
className="group mb-6 inline-flex h-7 items-center gap-2.5 rounded-full border border-foreground/10 bg-background/30 pr-2.5 pl-3.5 shadow-[inset_0_1px_0_rgb(255_255_255/0.06)] backdrop-blur-md transition-colors hover:border-foreground/20 hover:bg-background/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring short:mb-3"
>
<span className="font-mono text-[10px] font-medium tracking-[0.16em] text-muted-foreground uppercase transition-colors group-hover:text-foreground">
Backed by
</span>
<span aria-hidden className="h-3 w-px bg-foreground/15" />
<ShadcnLabsLogomark className="h-3 w-auto text-foreground transition-colors duration-200 group-hover:text-[#f06292]" />
<ArrowUpRight
weight="bold"
className="size-2.5 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
/>
</a>
);
}

function ShaderBackdrop() {
const theme = useAppTheme();
const [failed, setFailed] = useState(false);
Expand Down Expand Up @@ -138,6 +171,7 @@ export function LandingPage({ categories, children }: LandingPageProps) {
<Navbar />

<section className="mx-auto flex max-w-3xl shrink-0 flex-col items-center px-4 pt-[clamp(0.75rem,5dvh,4rem)] text-center">
<BackedBy />
<h1 className="text-4xl leading-[1.05] font-semibold tracking-[-0.03em] text-balance sm:text-6xl short:text-3xl short:sm:text-5xl">
Animated buttons, built with an{" "}
<span className="font-pixel-display font-normal text-brand [text-shadow:0_0_24px_color-mix(in_oklch,var(--brand)_45%,transparent)]">
Expand Down
56 changes: 56 additions & 0 deletions components/shadcn-labs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<svg viewBox="0 0 505 455" fill="currentColor" aria-hidden className={className}>
<path d="M155 45c0 5.523-4.477 10-10 10h-30c-5.523 0-10 4.477-10 10v30c0 5.523-4.477 10-10 10H65c-5.523 0-10 4.477-10 10v225c0 5.523 4.477 10 10 10h30c5.523 0 10 4.477 10 10v30c0 5.523 4.477 10 10 10h30c5.523 0 10 4.477 10 10v35c0 5.523-4.477 10-10 10h-35c-5.523 0-10-4.477-10-10v-30c0-5.523-4.477-10-10-10H60c-5.523 0-10-4.477-10-10v-30c0-5.523-4.477-10-10-10H10c-5.523 0-10-4.477-10-10V110c0-5.523 4.477-10 10-10h30c5.523 0 10-4.477 10-10V60c0-5.523 4.477-10 10-10h30c5.523 0 10-4.477 10-10V10c0-5.523 4.477-10 10-10h35c5.523 0 10 4.477 10 10zm250-5c0 5.523 4.477 10 10 10h30c5.523 0 10 4.477 10 10v30c0 5.523 4.477 10 10 10h30c5.523 0 10 4.477 10 10v235c0 5.523-4.477 10-10 10h-30c-5.523 0-10 4.477-10 10v30c0 5.523-4.477 10-10 10h-30c-5.523 0-10 4.477-10 10v30c0 5.523-4.477 10-10 10h-35c-5.523 0-10-4.477-10-10v-35c0 5.523 4.477-10 10-10h30c5.523 0 10-4.477 10-10v-30c0 5.523 4.477-10 10-10h30c5.523 0 10-4.477 10-10V115c0-5.523-4.477-10-10-10h-30c-5.523 0-10-4.477-10-10V65c0-5.523-4.477-10-10-10h-30c-5.523 0-10-4.477-10-10V10c0-5.523 4.477-10 10-10h35c5.523 0 10 4.477 10 10z" />
<path d="M305 90c0 5.523 4.477 10 10 10h30c5.523 0 10 4.477 10 10v35c0 5.523-4.477 10-10 10h-35c-5.523 0-10-4.477-10-10v-30c0-5.523-4.477-10-10-10h-75c-5.523 0-10 4.477-10 10v75c0 5.523 4.477 10 10 10h80c5.523 0 10 4.477 10 10v30c0 5.523 4.477 10 10 10h30c5.523 0 10 4.477 10 10v85c0 5.523-4.477 10-10 10h-30c-5.523 0-10 4.477-10 10v30c0 5.523-4.477 10-10 10h-85c-5.523 0-10-4.477-10-10v-30c0-5.523-4.477-10-10-10h-30c-5.523 0-10-4.477-10-10v-35c0 5.523 4.477-10 10-10h35c5.523 0 10 4.477 10 10v30c0 5.523 4.477 10 10 10h75c5.523 0 10-4.477 10-10v-75c0-5.523-4.477-10-10-10h-80c-5.523 0-10-4.477-10-10v-30c0-5.523-4.477-10-10-10h-30c-5.523 0-10-4.477-10-10v-85c0 5.523 4.477-10 10-10h30c5.523 0 10-4.477 10-10V60c0-5.523 4.477-10 10-10h85c5.523 0 10 4.477 10 10z" />
</svg>
);
}

/** The mark followed by the "shadcn labs" wordmark. */
export function ShadcnLabsLogotype({ className }: { className?: string }) {
return (
<svg viewBox="0 0 554 60" fill="currentColor" aria-hidden className={className}>
<path d="M19.237 0c.733 0 1.327.59 1.328 1.318v4.616c0 .728-.595 1.319-1.328 1.319h-3.98c-.732 0-1.326.59-1.326 1.318v3.956c0 .729-.595 1.319-1.327 1.319h-3.98c-.733 0-1.327.59-1.327 1.319v29.67c0 .728.594 1.32 1.327 1.32h3.98c.732 0 1.327.59 1.327 1.318v3.956c0 .728.594 1.318 1.327 1.318h3.98c.732 0 1.326.591 1.326 1.32v4.615c0 .728-.594 1.318-1.327 1.318h-4.643c-.733 0-1.326-.59-1.326-1.318v-3.956c0-.729-.595-1.32-1.328-1.32H7.96c-.733 0-1.326-.59-1.326-1.318v-3.956c0-.728-.595-1.319-1.327-1.319h-3.98A1.324 1.324 0 0 1 0 45.494V14.506c0-.728.594-1.32 1.327-1.32h3.98c.732 0 1.327-.59 1.327-1.318V7.912c0-.728.593-1.318 1.326-1.318h3.98c.733 0 1.328-.591 1.328-1.32V1.318A1.32 1.32 0 0 1 14.594 0zm33.169 0c.733 0 1.326.59 1.326 1.318v3.956c0 .729.595 1.32 1.328 1.32h3.98c.733 0 1.326.59 1.326 1.318v3.956c0 .728.595 1.319 1.327 1.319h3.98c.733 0 1.327.59 1.327 1.319v30.988c0 .728-.594 1.32-1.327 1.32h-3.98c-.732 0-1.327.59-1.327 1.318v3.956c0 .728-.593 1.318-1.326 1.318h-3.98c-.733 0-1.328.591-1.328 1.32v3.956c0 .728-.593 1.318-1.326 1.318h-4.643c-.733 0-1.327-.59-1.328-1.318v-4.616c0-.728.595-1.319 1.328-1.319h3.98c.732 0 1.326-.59 1.326-1.318v-3.956c0-.729.595-1.319 1.328-1.319h3.979c.733 0 1.327-.59 1.327-1.319v-29.67c0-.728-.594-1.32-1.327-1.32h-3.98c-.732 0-1.327-.59-1.327-1.318V8.571c0-.728-.594-1.318-1.327-1.318h-3.98a1.324 1.324 0 0 1-1.327-1.32V1.319A1.324 1.324 0 0 1 47.764 0zm65.713 0q6.554 0 11.166 2.426 4.693 2.425 7.363 6.63 2.751 4.206 3.399 9.624l-8.982.484q-.404-3.315-2.023-5.821a10.7 10.7 0 0 0-4.369-3.963q-2.751-1.455-6.716-1.455-5.016 0-7.93 2.345-2.832 2.263-2.832 6.064 0 2.426 1.133 4.124 1.214 1.617 4.208 2.83 3.075 1.214 8.657 2.588 7.444 1.698 11.814 4.205 4.45 2.426 6.311 5.741 1.862 3.316 1.862 7.52 0 5.096-2.67 8.895-2.59 3.72-7.283 5.741Q126.534 60 120.304 60q-6.877 0-11.976-2.507-5.017-2.506-7.93-6.954Q97.486 46.092 97 40.19l8.981-.566q.567 4.042 2.347 6.873 1.78 2.75 4.775 4.205 3.074 1.374 7.362 1.374 3.722 0 6.311-.89 2.67-.97 4.046-2.83t1.376-4.528q0-2.425-1.214-4.285-1.132-1.941-4.45-3.477-3.236-1.618-9.548-3.154-6.877-1.698-11.005-3.72-4.126-2.021-5.987-5.013-1.78-3.074-1.78-7.52 0-4.934 2.347-8.652 2.428-3.801 6.877-5.903Q111.889 0 118.119 0" />
<path fillRule="evenodd" clipRule="evenodd" d="M209.126 14.717q8.74 0 13.27 4.69 4.612 4.61 4.612 13.019v16.738q0 1.536.486 2.184.567.566 1.779.566h1.539v6.792q-.405.081-1.295.162t-1.862.081q-2.751 0-4.773-.89-1.942-.889-2.913-2.91-.59-1.28-.823-3.067a10.7 10.7 0 0 1-2.09 2.904q-2.105 2.184-5.421 3.478-3.237 1.213-7.04 1.213-6.717 0-10.762-3.074-3.965-3.072-3.965-8.652t3.318-8.652q3.398-3.154 10.438-4.529l14.808-2.83q0-5.013-2.347-7.439-2.346-2.507-6.959-2.507-4.126 0-6.474 1.86-2.346 1.78-3.236 5.337l-8.819-.566q1.213-6.468 5.987-10.189 4.855-3.72 12.542-3.72m-3.317 26.119q-3.884.728-5.502 2.345-1.538 1.536-1.538 3.962 0 2.748 1.861 4.286 1.942 1.455 5.341 1.455 3.883 0 6.634-1.455 2.751-1.537 4.289-4.205t1.538-6.065V38.41zm66.559 17.871h-8.01l-.243-6.469q-1.78 3.477-5.421 5.5-3.56 1.94-8.091 1.94-5.503 0-9.629-2.75-4.046-2.749-6.231-7.763-2.103-5.095-2.103-11.968t2.184-11.886q2.186-5.094 6.231-7.844 4.046-2.75 9.548-2.75 4.45 0 7.929 1.861t5.26 5.175V1.294h8.576zm-19.5-36.55q-5.178 0-8.253 4.043-3.075 3.963-3.075 10.997 0 6.955 3.075 10.998t8.253 4.043q3.48 0 5.906-1.779 2.428-1.778 3.723-5.175t1.295-8.087q0-4.852-1.295-8.167-1.295-3.395-3.723-5.093-2.427-1.78-5.906-1.78" />
<path d="M299.041 14.717q5.26 0 9.305 1.86 4.127 1.779 6.635 5.256 2.589 3.477 3.318 8.49l-8.982.486q-.647-4.205-3.398-6.388-2.751-2.265-6.878-2.265-5.421 0-8.496 4.043-2.994 3.963-2.994 10.997 0 7.035 2.994 11.08 3.075 3.96 8.496 3.961 4.127 0 6.878-2.264 2.751-2.345 3.398-7.035l8.982.485q-.729 4.932-3.318 8.571-2.508 3.64-6.635 5.661-4.046 2.022-9.305 2.022-6.15 0-10.762-2.75t-7.121-7.843q-2.508-5.095-2.508-11.888 0-6.792 2.508-11.805 2.509-5.095 7.121-7.844 4.612-2.83 10.762-2.83" />
<path fillRule="evenodd" clipRule="evenodd" d="M447.657 14.717q8.74 0 13.271 4.69 4.612 4.61 4.612 13.019v16.738q0 1.536.485 2.184.567.566 1.781.566h1.537v6.792q-.405.081-1.295.162t-1.86.081q-2.752 0-4.775-.89-1.942-.889-2.913-2.91-.59-1.28-.821-3.067a10.7 10.7 0 0 1-2.092 2.904q-2.104 2.184-5.421 3.478-3.237 1.213-7.04 1.213-6.716 0-10.762-3.074-3.965-3.072-3.965-8.652t3.318-8.652q3.398-3.154 10.438-4.529l14.808-2.83q0-5.013-2.347-7.439-2.346-2.507-6.959-2.507-4.126 0-6.472 1.86-2.347 1.78-3.238 5.337l-8.819-.566q1.214-6.468 5.987-10.189 4.856-3.72 12.542-3.72m-3.317 26.119q-3.883.728-5.502 2.345-1.537 1.536-1.537 3.962 0 2.748 1.86 4.286 1.942 1.455 5.341 1.455 3.884 0 6.635-1.455 2.751-1.537 4.289-4.205t1.537-6.065V38.41zm37.999-19.083q1.7-2.83 5.016-4.933 3.399-2.102 7.849-2.102 5.583 0 9.71 2.749 4.126 2.749 6.312 7.844 2.265 5.013 2.265 11.886t-2.265 11.968q-2.185 5.013-6.312 7.763t-9.71 2.75q-4.45 0-7.93-1.94a13.94 13.94 0 0 1-5.258-5.5l-.244 6.47h-8.01V1.293h8.577zm11.571.404q-3.64 0-6.23 1.78-2.59 1.779-3.965 5.174-1.376 3.316-1.376 8.086 0 4.61 1.376 8.006t3.965 5.256q2.59 1.78 6.149 1.78 4.935 0 7.849-3.963 2.913-4.043 2.913-11.079 0-7.035-2.913-10.997-2.913-4.043-7.768-4.043" />
<path d="M535.309 14.717q5.582 0 9.385 1.94 3.804 1.86 5.908 5.095 2.184 3.154 2.751 7.116l-8.82.486q-.405-2.265-1.618-3.882-1.133-1.698-3.075-2.588-1.942-.97-4.612-.97-4.126 0-6.15 1.617-2.022 1.617-2.022 4.205 0 1.94.889 3.154.972 1.212 3.076 2.021 2.103.728 5.583 1.294 6.715 1.132 10.518 2.83 3.803 1.617 5.341 4.043Q554 43.504 554 46.981q0 4.044-2.266 6.874t-6.23 4.366q-3.965 1.456-9.144 1.456-6.068 0-10.276-1.86-4.126-1.86-6.392-5.094-2.266-3.316-2.589-7.602l8.82-.404q.647 3.557 3.074 5.66 2.428 2.102 7.363 2.102 4.046.001 6.393-1.294t2.347-4.123q0-1.536-.81-2.587-.728-1.133-2.913-1.86-2.184-.81-6.473-1.537-6.392-1.213-10.034-2.83-3.64-1.617-5.178-4.124t-1.538-6.064q0-5.904 4.37-9.623 4.45-3.72 12.785-3.72m-378.704 7.175q.663-1.45 1.62-2.566a11.8 11.8 0 0 1 4.773-3.477q2.832-1.132 6.231-1.132 4.692 0 7.929 2.102 3.237 2.022 4.855 5.742 1.699 3.72 1.699 8.49v27.655h-8.576v-25.39q0-5.823-2.024-8.572-1.941-2.83-6.149-2.83-4.693 0-7.525 2.991-2.833 2.912-2.833 8.572v25.23h-8.576V1.293h8.576zm188.21-7.175q4.855 0 8.011 2.183 3.237 2.103 4.855 5.823 1.698 3.637 1.699 8.328v27.655h-8.577V33.64q0-3.8-.809-6.388t-2.671-3.963q-1.86-1.374-4.854-1.374-4.532 0-7.364 2.991t-2.832 8.734v25.067h-8.577V15.688h7.849l.209 7.412q.716-1.883 1.814-3.289 2.023-2.587 4.936-3.8 2.913-1.294 6.311-1.294m51.137 35.984h27.997v8.005h-36.735V1.294h8.738zM39.139 6.594c.732 0 1.327.59 1.327 1.318v3.956c0 .728.593 1.319 1.326 1.319h3.98c.733 0 1.327.59 1.327 1.319v4.615c0 .728-.594 1.318-1.326 1.319h-4.644c-.733 0-1.327-.59-1.327-1.319v-3.956c0-.728-.594-1.32-1.326-1.32h-9.952c-.732 0-1.326.592-1.326 1.32v9.89c0 .728.594 1.319 1.326 1.319H39.14c.732 0 1.327.59 1.327 1.318v3.956c0 .729.593 1.319 1.326 1.319h3.98c.733 0 1.327.59 1.327 1.32v11.207c0 .728-.594 1.32-1.326 1.32h-3.981c-.733 0-1.326.59-1.326 1.318v3.956c0 .728-.595 1.318-1.327 1.318H27.86c-.732 0-1.327-.59-1.327-1.318v-3.956c0-.728-.593-1.319-1.326-1.319h-3.98a1.323 1.323 0 0 1-1.327-1.319V40.88c0-.728.594-1.318 1.326-1.319h4.644c.733 0 1.327.59 1.327 1.319v3.956c0 .728.594 1.32 1.326 1.32h9.952c.732 0 1.326-.592 1.326-1.32v-9.89c0-.728-.594-1.319-1.326-1.319H27.86c-.732 0-1.327-.59-1.327-1.318v-3.956c0-.729-.593-1.319-1.326-1.319h-3.98a1.323 1.323 0 0 1-1.327-1.32V14.507c0-.728.594-1.32 1.326-1.32h3.981c.733 0 1.326-.59 1.326-1.318V7.912c0-.728.595-1.318 1.327-1.318z" />
</svg>
);
}

/** "Backed by Shadcn Labs" credit, the docs counterpart of TracwellCard. */
export function ShadcnLabsCard() {
return (
<a
href={SHADCN_LABS_URL}
target="_blank"
rel="noopener"
aria-label="Backed by Shadcn Labs"
className="group flex items-center gap-2 rounded-lg border border-border bg-linear-to-br from-[#f06292]/10 via-[#f06292]/4 to-transparent px-3 py-2.5 text-xs text-muted-foreground transition-colors hover:border-[#f06292]/35 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:from-[#f06292]/15 dark:via-[#f06292]/6"
>
<span className="flex min-w-0 flex-1 items-center gap-1.5">
<span className="shrink-0">Backed by</span>
<ShadcnLabsLogotype className="h-2.5 w-auto shrink-0 text-foreground" />
</span>
<ArrowUpRightIcon
size={12}
className="shrink-0 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
/>
</a>
);
}
Loading