fix(design): reduce design-system doctor warnings

apps/registry/app/components/[slug]/page.tsx

@@ -10,11 +10,7 @@ import { notFound } from "next/navigation";
 import { QuickAdd } from "@/components/quick-add";
 import { StorybookEmbed } from "@/components/storybook-embed";
 import componentMetadata from "@/lib/component-metadata.json";
-import {
-  breadcrumbLd,
-  jsonLdScript,
-  softwareSourceCodeLd,
-} from "@/lib/jsonld";
+import { breadcrumbLd, jsonLdScript, softwareSourceCodeLd } from "@/lib/jsonld";
 import { generateOGMetadata, generateTwitterMetadata } from "@/lib/og";
 import { canonical } from "@/lib/seo";
 import {
@@ -166,8 +162,7 @@ export default async function ComponentPage(props: Props) {
       : []),
   ] as { id: string; title: string }[];
 
-  const SITE_URL =
-    process.env.NEXT_PUBLIC_SITE_URL ?? "https://ui.vllnt.ai";
+  const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://ui.vllnt.ai";
 
   return (
     <>
@@ -256,7 +251,7 @@ export default async function ComponentPage(props: Props) {
                     target="_blank"
                   >
                     View in Storybook
-                    <ExternalLink className="h-4 w-4" />
+                    <ExternalLink className="size-4" />
                   </Link>
                   {meta.stories.length > 1 ? (
                     <div className="mt-4">
@@ -310,7 +305,7 @@ export default async function ComponentPage(props: Props) {
                               rel="noopener noreferrer"
                               target="_blank"
                             >
-                              <ExternalLink className="h-3 w-3" />
+                              <ExternalLink className="size-3" />
                             </Link>
                           </li>
                         );

apps/registry/app/docs/page.tsx

@@ -52,10 +52,7 @@ export default async function DocumentationPage() {
           <div className="mb-8">
             <Breadcrumb
               className="mb-4 text-muted-foreground"
-              items={[
-                { href: "/", label: "Home" },
-                { label: "Docs" },
-              ]}
+              items={[{ href: "/", label: "Home" }, { label: "Docs" }]}
             />
             <h1 className="text-4xl font-semibold mb-4">Documentation</h1>
             <p className="text-muted-foreground text-lg">
@@ -64,7 +61,7 @@ export default async function DocumentationPage() {
           </div>
 
           <div className="prose prose-lg dark:prose-invert max-w-none">
-            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.3rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
+            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.3rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
               <MDXContent content={content} />
             </div>
           </div>

apps/registry/app/philosophy/page.tsx

@@ -43,7 +43,7 @@ export default async function PhilosophyPage() {
           </div>
 
           <div className="prose prose-lg dark:prose-invert max-w-none">
-            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l-2 prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-black prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
+            <div className="prose prose-lg dark:prose-invert max-w-none prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg dark:prose-headings:text-white prose-p:leading-7 prose-blockquote:mt-6 prose-blockquote:border-l prose-blockquote:pl-6 prose-blockquote:italic prose-ul:my-6 prose-ul:ml-6 prose-ul:list-disc prose-ol:my-6 prose-ol:ml-6 prose-ol:list-decimal prose-code:relative prose-code:rounded prose-code:bg-muted prose-code:px-[0.3rem] prose-code:py-[0.2rem] prose-code:text-sm  prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:border prose-pre:bg-zinc-950 prose-pre:py-4  prose-pre:text-sm prose-pre:text-white prose-pre:shadow-lg dark:prose-pre:bg-zinc-900 prose-hr:my-8 prose-hr:border-border prose-table:w-full prose-table:border-collapse prose-table:border prose-table:border-border prose-th:border prose-th:border-border prose-th:bg-muted prose-th:p-2 prose-th:text-left prose-th:font-medium prose-td:border prose-td:border-border prose-td:p-2 prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:shadow-lg prose-a:font-medium prose-a:text-primary prose-a:underline prose-a:underline-offset-4 hover:prose-a:text-primary/80 prose-strong:font-semibold prose-em:italic prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground">
               <MDXContent content={content} />
             </div>
           </div>

apps/registry/components/component-preview/component-preview.tsx

@@ -537,13 +537,13 @@ function CalloutPreview() {
 function CheckboxPreview() {
   return (
     <div className="space-y-2">
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <Checkbox id="terms" />
         <label className="text-sm" htmlFor="terms">
           Accept terms
         </label>
       </div>
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <Checkbox defaultChecked id="marketing" />
         <label className="text-sm" htmlFor="marketing">
           Receive emails
@@ -994,7 +994,7 @@ function FloatingActionButtonPreview() {
         }}
         position="bottom-right"
       >
-        <Plus className="h-5 w-5" />
+        <Plus className="size-5" />
       </FloatingActionButton>
     </div>
   );
@@ -1231,13 +1231,13 @@ function SelectPreview() {
 function RadioGroupPreview() {
   return (
     <RadioGroup defaultValue="option-one">
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <RadioGroupItem id="option-one" value="option-one" />
         <label className="text-sm" htmlFor="option-one">
           Option One
         </label>
       </div>
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center gap-x-2">
         <RadioGroupItem id="option-two" value="option-two" />
         <label className="text-sm" htmlFor="option-two">
           Option Two
@@ -1259,13 +1259,13 @@ function TogglePreview() {
   return (
     <div className="flex gap-2">
       <Toggle aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
+        <Bold className="size-4" />
       </Toggle>
       <Toggle aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
+        <Italic className="size-4" />
       </Toggle>
       <Toggle aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
+        <Underline className="size-4" />
       </Toggle>
     </div>
   );
@@ -1275,13 +1275,13 @@ function ToggleGroupPreview() {
   return (
     <ToggleGroup type="multiple">
       <ToggleGroupItem aria-label="Toggle bold" value="bold">
-        <Bold className="h-4 w-4" />
+        <Bold className="size-4" />
       </ToggleGroupItem>
       <ToggleGroupItem aria-label="Toggle italic" value="italic">
-        <Italic className="h-4 w-4" />
+        <Italic className="size-4" />
       </ToggleGroupItem>
       <ToggleGroupItem aria-label="Toggle underline" value="underline">
-        <Underline className="h-4 w-4" />
+        <Underline className="size-4" />
       </ToggleGroupItem>
     </ToggleGroup>
   );
@@ -1697,8 +1697,8 @@ function DataTablePreview() {
 
 function SkeletonPreview() {
   return (
-    <div className="flex items-center space-x-4">
-      <Skeleton className="h-12 w-12 rounded-full" />
+    <div className="flex items-center gap-x-4">
+      <Skeleton className="size-12 rounded-full" />
       <div className="space-y-2">
         <Skeleton className="h-4 w-[200px]" />
         <Skeleton className="h-4 w-[150px]" />
@@ -1715,7 +1715,7 @@ function SeparatorPreview() {
         <p className="text-sm text-muted-foreground">A component library.</p>
       </div>
       <Separator />
-      <div className="flex h-5 items-center space-x-4 text-sm">
+      <div className="flex h-5 items-center gap-x-4 text-sm">
         <div>Docs</div>
         <Separator orientation="vertical" />
         <div>Source</div>
@@ -1730,7 +1730,7 @@ function AlertPreview() {
   return (
     <div className="space-y-4 w-full max-w-md">
       <Alert>
-        <TerminalIcon className="h-4 w-4" />
+        <TerminalIcon className="size-4" />
         <AlertTitle>Heads up!</AlertTitle>
         <AlertDescription>
           You can add components using the CLI.
@@ -1799,11 +1799,11 @@ function CollapsiblePreview() {
       onOpenChange={setIsOpen}
       open={isOpen}
     >
-      <div className="flex items-center justify-between space-x-4">
+      <div className="flex items-center justify-between gap-x-4">
         <h4 className="text-sm font-semibold">Collapsible Section</h4>
         <CollapsibleTrigger asChild>
           <Button size="sm" variant="ghost">
-            <ChevronsUpDown className="h-4 w-4" />
+            <ChevronsUpDown className="size-4" />
           </Button>
         </CollapsibleTrigger>
       </div>

apps/registry/components/github-mark.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function GitHubMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        d="M12 .3c-6.6 0-12 5.4-12 12 0 5.3 3.4 9.8 8.2 11.4.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.5-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.6 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.8-1.6 8.2-6.1 8.2-11.4C24 5.7 18.6.3 12 .3Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

apps/registry/components/header/header.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { NavbarSaas, SearchDialog } from "@vllnt/ui";
-import { Github } from "lucide-react";
 import { useRouter } from "next/navigation";
 
+import { GitHubMark } from "@/components/github-mark";
 import registryData from "@/registry.json";
 
 const GITHUB_URL = "https://github.com/vllnt/ui";
@@ -48,12 +48,12 @@ export function Header() {
           />
           <a
             aria-label="VLLNT UI on GitHub"
-            className="inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+            className="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
             href={GITHUB_URL}
             rel="noreferrer"
             target="_blank"
           >
-            <Github className="h-4 w-4" />
+            <GitHubMark className="size-4" />
           </a>
         </div>
       }

apps/registry/components/landing/landing.tsx

@@ -1,13 +1,9 @@
 import { CodeBlock } from "@vllnt/ui";
-import {
-  ArrowRight,
-  Github,
-  Sparkles,
-  Terminal,
-} from "lucide-react";
+import { ArrowRight, Sparkles, Terminal } from "lucide-react";
 import Link from "next/link";
 
 import { Footer } from "@/components/footer/footer";
+import { GitHubMark } from "@/components/github-mark";
 import {
   getCategoryCount,
   getComponentCount,
@@ -20,6 +16,8 @@ const GITHUB_URL = "https://github.com/vllnt/ui";
 const STORYBOOK_URL = "https://storybook.vllnt.ai";
 const REQUEST_URL =
   "https://github.com/vllnt/ui/issues/new?template=feature_request.yml&labels=enhancement,component";
+const INSTALL_COMMAND =
+  "pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json";
 
 const TRUST_BADGES = [
   { label: "MIT" },
@@ -53,9 +51,7 @@ function Hero({
         </p>
 
         <div className="mt-8">
-          <CodeBlock language="bash">
-            {`pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json`}
-          </CodeBlock>
+          <CodeBlock language="bash">{INSTALL_COMMAND}</CodeBlock>
         </div>
 
         <div className="mt-6 flex flex-wrap gap-3">
@@ -64,7 +60,7 @@ function Hero({
             href="/components"
           >
             Browse {componentCount} components
-            <ArrowRight className="h-4 w-4" />
+            <ArrowRight className="size-4" />
           </Link>
           <Link
             className="inline-flex h-11 items-center gap-2 rounded-md border border-border px-5 text-sm font-medium hover:bg-muted"
@@ -78,7 +74,7 @@ function Hero({
             rel="noreferrer"
             target="_blank"
           >
-            <Github className="h-4 w-4" />
+            <GitHubMark className="size-4" />
             GitHub
           </a>
         </div>
@@ -140,17 +136,16 @@ function AgentCallout() {
     <section className="border-b border-border">
       <div className="mx-auto max-w-7xl px-4 py-16 lg:px-8">
         <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-          <Sparkles className="h-4 w-4" />
+          <Sparkles className="size-4" />
           Agent-first
         </div>
         <h2 className="mt-2 text-3xl font-semibold">
           Built so AI coding agents can use it directly.
         </h2>
         <p className="mt-4 max-w-2xl text-lg text-muted-foreground">
-          Every component ships as a machine-readable JSON descriptor with
-          name, version, stability, accessibility schema, usage examples,
-          and prop definitions. Agents discover the registry through three
-          surfaces.
+          Every component ships as a machine-readable JSON descriptor with name,
+          version, stability, accessibility schema, usage examples, and prop
+          definitions. Agents discover the registry through three surfaces.
         </p>
 
         <div className="mt-8 grid gap-4 md:grid-cols-3">
@@ -192,13 +187,13 @@ function AgentCard({
       target="_blank"
     >
       <div className="flex items-center gap-2 text-sm font-mono">
-        <Terminal className="h-4 w-4 text-muted-foreground" />
+        <Terminal className="size-4 text-muted-foreground" />
         <span>{title}</span>
       </div>
       <p className="mt-3 text-sm text-muted-foreground">{description}</p>
       <p className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-foreground">
         Open
-        <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
+        <ArrowRight className="size-3 transition-transform group-hover:translate-x-0.5" />
       </p>
     </a>
   );
@@ -213,7 +208,10 @@ function FeaturedComponents() {
         <h2 className="text-2xl font-semibold">Featured components</h2>
         <p className="mt-2 text-muted-foreground">
           A few favourites. Browse all {getComponentCount()} from{" "}
-          <Link className="font-medium text-foreground underline" href="/components">
+          <Link
+            className="font-medium text-foreground underline"
+            href="/components"
+          >
             /components
           </Link>
           .
@@ -255,7 +253,7 @@ function CommunityCTA() {
             rel="noreferrer"
             target="_blank"
           >
-            <Github className="h-4 w-4" />
+            <GitHubMark className="size-4" />
             Star on GitHub
           </a>
           <a

apps/registry/components/quick-add/quick-add.tsx

@@ -33,12 +33,12 @@ export function QuickAdd({ componentName }: QuickAddProps) {
       >
         {copied ? (
           <>
-            <Check className="h-3 w-3" />
+            <Check className="size-3" />
             Copied!
           </>
         ) : (
           <>
-            <Copy className="h-3 w-3" />
+            <Copy className="size-3" />
             Copy install command
           </>
         )}
@@ -50,7 +50,7 @@ export function QuickAdd({ componentName }: QuickAddProps) {
         variant="outline"
       >
         Add to v0.dev
-        <ExternalLink className="h-3 w-3" />
+        <ExternalLink className="size-3" />
       </Button>
     </div>
   );

apps/registry/components/storybook-embed/storybook-embed.tsx

@@ -120,7 +120,9 @@ function StorybookIframe({
           className="flex animate-pulse items-center justify-center rounded-b-lg bg-muted"
           style={{ height, inset: 0, position: "absolute", zIndex: 1 }}
         >
-          <p className="text-sm text-muted-foreground">Loading preview...</p>
+          <p className="text-sm text-muted-foreground">
+            Loading preview&hellip;
+          </p>
         </div>
       )}
       <iframe

apps/registry/registry.json

@@ -4492,5 +4492,5 @@
     }
   ],
   "version": "0.2.1",
-  "generatedAt": "2026-05-10T19:14:31.709Z"
+  "generatedAt": "2026-05-10T19:24:44.361Z"
 }