Efferd Ui logo

Component

About

Efferd Ui logo

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Efferd Ui logo to your project and fits it to your theme.

Code

How Efferd Ui logo is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Logo, LogoIcon } from "@/components/ui/efferd-ui-logo";

  export default function DemoOne() {
    return (                                                      
      <div className="flex flex-col gap-8 p-8">
        {/* Full wordmark, default size (text-foreground inherits) */}
        <div className="flex items-center gap-6">
          <Logo className="h-6" />
          <Logo className="h-8" />
          <Logo className="h-10" />
        </div>

        {/* Icon only */}
        <div className="flex items-center gap-6">                 
          <LogoIcon className="h-5 w-5" />
          <LogoIcon className="h-8 w-8" />
          <LogoIcon className="h-12 w-12" />
        </div>

        {/* Colored variants — currentColor inherits */}
        <div className="flex items-center gap-6">
          <Logo className="h-8 text-primary" />
          <Logo className="h-8 text-muted-foreground" />
          <Logo className="h-8 text-destructive" />
        </div> 
      </div>
    );
  }