Logo with Variants Creator

Creates logo components with variant support following the established pattern in Elements codebase.

When to use this Skill

User provides multiple SVG files for a logo (icon, wordmark, logo variants)
User mentions "variants", "light/dark modes", or references Clerk-style logos
User wants to add a new logo to the collection with multiple variants
User has SVG files in public/test/ or provides paths to logo files

Process

1. Analyze provided SVGs

Identify variant types (icon, logo, wordmark)
Detect light/dark mode versions (files ending in -dark.svg or -light.svg)
Extract viewBox, colors, and dimensions from each SVG
Note the brand guidelines if provided

2. Create component file

Location: src/components/ui/logos/{name}.tsx

Props interface:

{
  className?: string;
  variant?: "icon" | "logo" | "wordmark";
  mode?: "dark" | "light";
}

Structure:

Use conditional rendering based on variant prop
Configure colors for light/dark modes using a COLORS object pattern
Default to variant="wordmark" (primary logo)
Support theme-aware mode prop
Add proper TypeScript types

Reference implementation: Check src/components/ui/logos/clerk.tsx for the exact pattern to follow.

3. Convert SVG to JSX

For each SVG file:

Read the SVG file content
Convert SVG attributes to JSX (e.g., fill-rule → fillRule, stroke-width → strokeWidth)
Replace hardcoded colors with variables from COLORS object
Preserve viewBox and dimensions
Add title tag for accessibility

4. Create registry structure

Location: registry/default/blocks/logos/{name}-logo/

Files to create:

registry-item.json:

{
  "name": "{name}-logo",
  "type": "registry:block",
  "title": "{DisplayName} Logo",
  "description": "{Brand description}",
  "categories": ["logos"],
  "meta": {
    "hasVariants": true,
    "variants": [
      "icon-dark",
      "icon-light",
      "logo-dark",
      "logo-light",
      "wordmark-dark",
      "wordmark-light"
    ],
    "variantTypes": {
      "base": ["icon", "logo", "wordmark"],
      "modes": ["dark", "light"]
    }
  },
  "files": [
    {
      "path": "components/logos/{name}.tsx",
      "type": "registry:component"
    }
  ],
  "docs": "{Brand} logo with 3 base variants (icon, logo, wordmark) and 2 modes (dark, light) = 6 total combinations. Theme-aware: automatically adapts colors when you switch themes."
}

CRITICAL: The variants array MUST list ALL combinations explicitly in {base}-{mode} format (e.g., "icon-dark", "logo-light"). This is what makes the variant count badge (e.g., "6") appear correctly in the UI. Do NOT just list base names like ["icon", "logo", "wordmark"].

Copy component to: components/logos/{name}.tsx

5. Update registry/index.ts

CRITICAL STEP: The registry/index.ts file is the SOURCE OF TRUTH for the build process. You MUST add/update the logo entry in this file with the EXACT same metadata structure as the registry-item.json.

Location: registry/index.ts

Find the array of registry items and add your logo entry with the complete meta field:

{
  $schema: "https://ui.shadcn.com/schema/registry-item.json",
  name: "{name}-logo",
  type: "registry:block",
  title: "{DisplayName} Logo",
  description: "{Brand description}",
  registryDependencies: [],
  dependencies: [],
  categories: ["logos"],
  meta: {
    hasVariants: true,
    variants: [
      "icon-dark",
      "icon-light",
      "logo-dark",
      "logo-light",
      "wordmark-dark",
      "wordmark-light",
    ],
    variantTypes: {
      base: ["icon", "logo", "wordmark"],
      modes: ["dark", "light"],
    },
  },
  files: [
    {
      path: "registry/default/blocks/logos/{name}-logo/components/logos/{name}.tsx",
      type: "registry:component",
    },
  ],
  docs: "{Brand} logo with 3 base variants (icon, logo, wordmark) and 2 modes (dark, light) = 6 total combinations. Theme-aware: automatically adapts colors when you switch themes.",
}

If updating an existing logo: Search for the logo name in registry/index.ts and replace the entire entry with the new metadata including the meta field.

6. Update logos collection

Add to registry/default/blocks/logos/logos/registry-item.json:

Add new logo to the list
Ensure it's in the correct category (tech-giants, ai-services, etc.)

7. Build registry

Run:

bun run build:registry

This generates the public registry files.

Component Template Pattern

interface LogoProps {
  className?: string;
  variant?: "icon" | "logo" | "wordmark";
  mode?: "dark" | "light";
}

const COLORS = {
  dark: "#HEX_VALUE",
  light: "#HEX_VALUE",
};

export function BrandLogo({
  className,
  variant = "wordmark",
  mode = "dark",
}: LogoProps) {
  const color = COLORS[mode];

  if (variant === "icon") {
    return (
      <svg className={className} viewBox="...">
        {/* Icon SVG content */}
      </svg>
    );
  }

  if (variant === "logo") {
    return (
      <svg className={className} viewBox="...">
        {/* Logo SVG content */}
      </svg>
    );
  }

  // Default: wordmark
  return (
    <svg className={className} viewBox="...">
      {/* Wordmark SVG content */}
    </svg>
  );
}

Expected outcome

After completion:

Component is available at @/components/ui/logos/{name}
Logo appears in the logos page with variant badge
Context menu shows "View X Variants" option
Variants dialog displays all combinations (variants × modes)
All copy/download functions work for each variant
Can be installed via npx shadcn@latest add @elements/{name}-logo

Brand Guidelines Integration

If brand guidelines are provided:

Use exact brand colors specified
Follow naming conventions (e.g., Linear uses "Linear" not "linear")
Respect hierarchy (wordmark primary, logomark for tight layouts, icon for social)
Include usage notes in component comments

Files to reference

Template: src/components/ui/logos/clerk.tsx
Registry example: registry/default/blocks/logos/clerk-logo/
Variants dialog: src/app/docs/logos/logo-variants-dialog.tsx
Logos collection: registry/default/blocks/logos/logos/registry-item.json

Common pitfalls to avoid

Don't forget to copy component to both src/ and registry/ locations
Ensure hasVariants: true is set in registry metadata
Don't hardcode colors - use COLORS object for theme support
Remember to run build:registry after making changes
Test all variant combinations before committing

logo-with-variants