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

Authenticate with the repository

Add your access token to Composer to authenticate against the private Neura repository. You can generate a token from your license dashboard.

composer config bearer.api.neuraui.dev "YOUR_TOKEN"

Replace YOUR_TOKEN with the access token from your license dashboard .

Register the Composer repository

Add the private Neura repository URL to your project's Composer configuration:

composer config repositories.neuraui composer https://api.neuraui.dev

Install Neura Package

Install Neura Kit via Composer from your project root:

composer require neura-ui/neura-kit

Set your license key

Add your license key to your .env file:

NEURA_KIT_LICENSE_KEY=your-license-key

Your license key is available in your license dashboard .

Activate your license

Validate your license key and register your project:

php artisan neura-kit:activate

This verifies your license key against the Neura server and registers your project. You'll see a confirmation with your license details.

Run 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.

Learn more about customizing Neura →

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.

Neura UI