Brand

Brand component for displaying logo and brand name in headers and navigation

Basic Usage

The most basic brand component with just a name:

<neura::brand name="Neura" />

With Logo Image

Add a logo with the logo attribute (URL string or slot):

Neura

<neura::brand name="Neura">
    <x-slot:logo>
        <img src="/path/to/logo.png" alt="Neura Logo" class="h-8 w-auto" />
    </x-slot:logo>
</neura::brand>

<!-- Or with URL string -->
<neura::brand
    name="Neura"
    logo="/path/to/logo.png"
    alt="Neura Logo"
/>

Light and Dark Mode Logos

Use different logos for light and dark modes with logoLight and logoDark props:

Neura

<neura::brand
    name="Neura"
    href="#"
    logoLight="/logo-light.svg"
    logoDark="/logo-dark.svg"
/>

With Logo Slots

You can also use slots for more complex logos:

Neura

<neura::brand name="Neura" href="#">
    <x-slot:logoLight>
        <img src="/logo-light.svg" alt="Neura Logo" class="h-8 w-auto" />
    </x-slot:logoLight>
    <x-slot:logoDark>
        <img src="/logo-dark.svg" alt="Neura Logo" class="h-8 w-auto" />
    </x-slot:logoDark>
</neura::brand>

Note: If only logoLight or logoDark is provided, the logo prop will be used as fallback for the missing mode.

With Logo Slot

Use a slot to pass a custom logo component:

Neura

<neura::brand name="Neura">
    <x-slot:logo>
        <div class="h-8 w-8 rounded-lg bg-blue-600">
            N
        </div>
    </x-slot:logo>
</neura::brand>

Logo Only

Display only the logo without name:

<neura::brand>
    <x-slot:logo>
        <img src="/path/to/logo.png" alt="Neura" class="h-10 w-10" />
    </x-slot:logo>
</neura::brand>

Custom Link

Customize the link with href and target:

Neura

External Link

<neura::brand
    name="Neura"
    href="https://docs.neuraui.dev"
/>

<neura::brand
    name="External Link"
    href="https://example.com"
    target="_blank"
/>

Custom Logo Styling

Customize logo size and style with CSS classes:

Small Logo

Large Logo

Rounded Logo

<neura::brand name="Custom Logo">
    <x-slot:logo>
        <div class="h-10 w-10 rounded-full bg-blue-600">
            <!-- Logo content -->
        </div>
    </x-slot:logo>
</neura::brand>

Use Cases

Common usage examples:

Navigation Header

Neura

Sidebar Brand

Neura

Navigation items...

Footer Brand

Neura

Building amazing applications with Neura

Different Styles

Style variations for different contexts:

Minimal Style

Bold Brand

Best Practices

Always use alt for logos

Add descriptive alternative text for accessibility

Ensure the link points to the home page

The brand typically serves as a link to the application's home page

Use high-quality logos

Logos should be sharp and visible in both light and dark modes

Keep visual consistency

Use the same brand style throughout the application

Test responsiveness

Verify that the brand displays correctly on all screens

Brand Component Improvements

Brand Usage & Features

The brand component supports logo images, slots, and light/dark mode variants. Always use alt for accessibility, and logoClass for custom styling. The href and target props make brands clickable and support external links. Use slots for advanced logo layouts and ensure visual consistency across your app.

Properties

Property	Type	Default	Description
href	string	#	Link URL for the brand
logo	string\|slot	null	Logo image URL or slot content
name	string	''	Brand name text
alt	string	''	Alt text for logo image
target	string	_self	Link target (_self, _blank, etc.)
logoLight	string\|slot	null	Logo for light mode (URL string or slot content)
logoDark	string\|slot	null	Logo for dark mode (URL string or slot content)
logoClass	string	''	Additional CSS classes for logo styling