Collapsible content sections with smooth animations
Basic Usage
The most basic accordion with multiple items:
blade
Neura is a comprehensive multi-tenant SaaS starter kit built with Laravel and Livewire.
It includes everything you need to launch your product quickly.
We offer three pricing tiers: Starter, Pro, and Enterprise. All plans include
full source code access and updates. Choose the plan that fits your needs.
Yes! All plans include support. Starter gets 6 months, Pro gets 1 year,
and Enterprise gets lifetime priority support.
<neura::accordion>
<neura::accordion.item>
<neura::accordion.trigger>
Question title
</neura::accordion.trigger>
<neura::accordion.content>
Answer content here
</neura::accordion.content>
</neura::accordion.item>
</neura::accordion>
Simplified Syntax
Use the trigger attribute for shorter syntax:
blade
<p class="text-sm text-neutral-600 dark:text-neutral-400">
Neura is built with Laravel 12, Livewire 4, Tailwind CSS 4, and Alpine.js.
All modern and production-ready technologies.
</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400">
Absolutely! The entire UI is built with Tailwind CSS utility classes,
making it easy to customize colors, spacing, and styles.
</p>
<neura::accordion.item trigger="Question title">
Answer content here
</neura::accordion.item>
Expanded by Default
Open an item by default with the expanded attribute:
blade
<p class="text-sm text-neutral-600 dark:text-neutral-400">
This section is expanded by default. Great for highlighting important information
or ensuring users see key content immediately.
</p>
<p class="text-sm text-neutral-600 dark:text-neutral-400">
This section starts collapsed and can be opened by clicking.
</p>
<neura::accordion.item trigger="Title" expanded>
Content visible by default
</neura::accordion.item>
Disabled Items
Disable items with the disabled attribute:
blade
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
This item is active and can be toggled.
</div>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
This content cannot be accessed.
</div>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
This item works normally.
</div>
<neura::accordion.item trigger="Title" disabled>
Content not accessible
</neura::accordion.item>
Styled Accordions
Customize the appearance with Tailwind classes:
blade
Multi-tenant architecture
Stripe integration
Team management
We offer flexible pricing starting at $149. All plans include full source code
and regular updates.
<div class="space-y-3">
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
Getting started is easy! Follow these steps:
</div> <ol class="list-decimal list-inside space-y-2 text-sm">
<li>Clone the repository</li>
<li>Install dependencies with composer and npm</li>
<li>Configure your environment</li>
<li>Run migrations</li>
<li>Start building!</li>
</ol>
</div>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
We accept all major credit cards (Visa, MasterCard, American Express) and PayPal.
All payments are processed securely through Stripe.
</div>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
Yes! We offer a 30-day money-back guarantee. If you're not satisfied with Neura
for any reason, contact us for a full refund.
</div>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
Absolutely! Support duration varies by plan: 6 months for Starter, 1 year for Pro,
and lifetime priority support for Enterprise.
</div>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
Yes! You can use Neura to build unlimited client projects. The license allows
you to create as many projects as you need.
</div>
<neura::accordion>
<neura::accordion.item trigger="Question?" expanded>
Answer here
</neura::accordion.item>
<neura::accordion.item trigger="Another question?">
Another answer
</neura::accordion.item>
</neura::accordion>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
Update your .env file with database credentials and application settings.
Make sure to set your APP_URL and database connection details.
</div>
<div
class="text-neutral-700 dark:text-neutral-300 [:where(&)]:leading-relaxed text-base"
data-slot="text"
>
Deploy to any server that supports Laravel. We recommend using Laravel Forge
or Ploi for easy deployment and management.
</div>
Best Practices
Use for optional content
Accordions are perfect for content that users can choose to view
Limit the number of items
Maximum 5-7 items for better user experience
Use clear titles
Triggers should be descriptive so users know what they'll find
Avoid critical content
Don't hide essential information in accordions
Expand important sections
Use expanded to open the most relevant sections by default
