Installation
Neura is a robust, hand-crafted, UI component library for your Laravel + Livewire applications. It's built
using Tailwind CSS and provides a set of components that are easy to use and customize.
Prerequisites
Neura requires the following before installing:
Getting started
Install Neura Package
Install Neura Kit via Composer from your project root:
composer require neura-ui/neura-kitRun Installation Command
Execute the install command to automatically configure Vite and Tailwind:
php artisan neura-kit:install
This command automatically performs the following configuration:
1. Configures Vite Plugin
Adds the neuraKit plugin import and configuration to
vite.config.js:
import neuraKit from './vendor/neura-ui/neura-kit/vite-plugin-neura-kit.js';
// In plugins array:
plugins: [
neuraKit({
colors: {
primary: 'blue',
secondary: 'slate',
success: 'green',
warning: 'amber',
danger: 'red',
info: 'cyan',
}
}),
// ... other plugins
]
2. Configures Tailwind Source
Adds the Tailwind source directive to
resources/css/app.css:
@source '../../vendor/neura-ui/neura-kit/**/*.{js,ts,vue,blade.php,php}';
3. Automatic Asset Injection
Assets are automatically injected via Vite without modifying
app.css
or app.js.
No manual Blade directives needed.
Add Neura Directive to Layout
Include the @neuraKit Blade directive in your base layout template to enable Neura components:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
@yield('content')
@neuraKit
</body>
</html>
The
@neuraKit directive initializes core functionality like modals, toasts, and component managers. Place it right after the opening <body> tag.
Install Optional Dependencies
Install optional JavaScript dependencies for enhanced features (charts, animations, rich text editor):
php artisan neura-kit:install-deps
This command detects your package manager (npm, yarn, or pnpm) and installs missing dependencies
such as:
- chart.js - For chart components
- lottie-web - For animations
- @tiptap/* - For rich text editor components
Customizing Neura Templates
Neura components work great out of the box, but you can customize them to match your project's design. There
are two main ways to customize Neura:
CSS Variables
Customize colors, spacing, and design tokens using CSS variables in your stylesheet
Publish Views
Publish component Blade templates to your project for complete customization control
The easiest way to customize colors is through the
neuraKit Vite plugin:
// vite.config.js
neuraKit({
colors: {
primary: 'indigo', // Map to any Tailwind color
secondary: 'slate',
danger: 'rose',
}
})
For more advanced customization, add a
@theme block in your
resources/css/app.css
file:
@theme {
/* Custom typography, radius, etc. */
--font-sans: 'Your Font', ui-sans-serif, system-ui;
--radius-field: 0.375rem;
}
To publish Neura component views into your project, run the following Artisan command:
php artisan vendor:publish --tag=neura-kit-views
This will copy all Neura component views to
resources/views/vendor/neura-kit.
Once published, you can modify these views to match your design requirements. Laravel will automatically use
your published views instead of the package views.
Keeping Neura updated
To ensure you have the latest version of Neura, regularly update your composer dependencies:
composer update neura-ui/neura-kit
If you've published Neura components, make sure to check the changelog for any breaking changes before
updating.