Usage
Learn how to use Neura components in your Laravel and Livewire applications
Basic Syntax
Neura components use Laravel's Blade component syntax. All components are prefixed with
neura:: to avoid conflicts with your own components.
The most basic usage is a self-closing tag:
<neura::button>Click me</neura::button>
Or with content between opening and closing tags:
<neura::card>
<neura::heading level="h2">Card Title</neura::heading>
<neura::text>Card content goes here</neura::text>
</neura::card>Props and Attributes
Components accept props (attributes) to customize their appearance and behavior. Props can be passed as HTML attributes:
<neura::button variant="primary" size="lg" href="/dashboard">
Go to Dashboard
</neura::button>
Boolean props can be passed without a value:
<neura::button disabled>Disabled Button</neura::button>
<neura::input required placeholder="Enter your name" />Slots
Many Neura components support named slots for more complex layouts. Use the
x-slot directive to define slot content:
Amount
$
USD
<neura::input type="text" placeholder="0.00">
<x-slot:prefix>
<neura::text>$</neura::text>
</x-slot:prefix>
<x-slot:suffix>
<neura::text>USD</neura::text>
</x-slot:suffix>
</neura::input>
Some components also support props for icons instead of slots. For example, buttons use
icon and iconAfter props:
<neura::button variant="primary" icon="check" iconAfter="arrow-right">
Save Changes
</neura::button>With Livewire
Neura components work seamlessly with Livewire. You can use Livewire directives directly on Neura components:
<neura::button wire:click="save" variant="primary">
Save
</neura::button>
<neura::input wire:model="name" placeholder="Enter your name" />
<neura::card wire:loading.class="opacity-50">
<neura::text>Content that dims while loading</neura::text>
</neura::card>
You can also use Livewire's entangle feature with Neura components:
<neura::switch wire:model="enabled" />
<neura::checkbox wire:model.live="terms">
I agree to the terms
</neura::checkbox>Custom Classes
You can add custom Tailwind CSS classes to any Neura component using the
class attribute:
<neura::button variant="primary" class="w-full md:w-auto">
Responsive Button
</neura::button>
<neura::card class="max-w-md mx-auto shadow-lg">
<neura::text>Centered card with shadow</neura::text>
</neura::card>Common Patterns
Here are some common patterns for using Neura components:
Form with Validation
<neura::form wire:submit="save">
<neura::field>
<neura::label>Name</neura::label>
<neura::input wire:model="name" />
<neura::description>Enter your full name</neura::description>
</neura::field>
<neura::button type="submit" variant="primary">
Save
</neura::button>
</neura::form>Card with Actions
<neura::card>
<neura::heading level="h3">Card Title</neura::heading>
<neura::text>Card content goes here</neura::text>
<div class="flex gap-2 mt-4">
<neura::button variant="primary">Save</neura::button>
<neura::button variant="outline">Cancel</neura::button>
</div>
</neura::card>Modal with Form
<neura::modal wire:model="showModal">
<x-slot:title>Edit User</x-slot:title>
<neura::form wire:submit="update">
<neura::input wire:model="name" />
<neura::button type="submit">Update</neura::button>
</neura::form>
</neura::modal>Best Practices
Do
- Use semantic HTML with Neura components for better accessibility
- Combine components to build complex UIs
- Use Tailwind classes for layout and spacing
- Leverage Livewire directives for reactive behavior
- Keep component props consistent across your application
Don't
- Don't override component internals with CSS unless necessary
- Don't nest components in ways that break accessibility
- Don't forget to test components in both light and dark modes
- Don't use inline styles when Tailwind classes are available
Next Steps
Now that you understand how to use Neura components, explore the component library: