Logo
Neura UI
Loading…

Neura UI

Composable Laravel UI
MIT licensed

Own every layer of your Laravel UI

Neura UI ships composable Blade components with Livewire and Alpine ergonomics — built to scale in production apps, not just demos.
Get started
Browse components
composer require neura-ui/neura-kit
60+
Components
11–13
Laravel
8.2+
PHP
MIT
No license key
01 Features

Everything you need to ship a serious UI

Built for real Laravel apps: consistent design, predictable behaviour, and components that stay out of your way.
01

Token-driven theming

One source of truth for color, radius, spacing and elevation — light and dark ship together, and every variant inherits them.
600
500
400
300
200
sm
md
lg
xl
full
02

Accessible defaults

Focus rings, keyboard paths and ARIA are wired in before you touch a prop.
  • Keyboard navigable
  • ARIA labels
  • Visible focus rings
03

Composable primitives

Stack, Box, Grid and Flow compose into any layout — no magic markup.
Stack
Box
Grid
Flow
04

Livewire-first

Predictable DOM and minimal JS, so wire:model just works. 
<neura::input
  wire:model.live="email"
/>
05

Readable Blade

Clean APIs you override with a class, not a fork. 
<neura::button
  variant="primary"
  class="w-full"
/>
02 Live preview

See the code. See the result.

Drag the divider to compare. Everything on the right is rendered by the components on the left — no screenshots.
login.blade.php 
<neura::container size="xs">
  <neura::stack
    padding="xl"
    gap="md"
    rounded="3xl"
    class="bg-white dark:bg-neutral-900"
  >

  <neura::box variant="card">
    <neura::icon
      name="lock-closed"
      class="size-7 text-primary-600"
    />
  </neura::box>

  <neura::heading
    level="h1"
    size="2xl"
    align="center"
  >
    Welcome back
  </neura::heading>

  <neura::text
    size="sm"
    align="center"
  >
    Sign in to your account
  </neura::text>

  <neura::form wire:submit="login">
    <neura::field required>
      <neura::label>Email</neura::label>
      <neura::input
        type="email"
        placeholder="you@example.com"
      />
    </neura::field>

    <neura::field required>
      <neura::label>Password</neura::label>
      <neura::input
        type="password"
        revealable
      />
    </neura::field>

    <neura::checkbox label="Remember me" />

    <neura::button
      variant="primary"
      size="lg"
      class="w-full"
    >
      Sign in
    </neura::button>
  </neura::form>

  </neura::stack>
</neura::container>
Preview
Live

Welcome back

Sign in to your account to continue
Email address
Password
Forgot password?
Don't have an account? Sign up
03 Components

A library you can actually build with

Polished primitives and production-ready patterns — consistent tokens, dark mode, and defaults you rarely need to override.

Buttons

Primary, soft, outline, ghost — consistent states.
Variants • Sizes • Icons

Badges

Status + labels with accessible defaults.
Soft • Outline • Solid

Cards & Panels

Surfaces, elevation, borders, and layout primitives.
Card
Muted
Card • Muted • Bordered

Forms

Inputs, labels, validation states — predictable UX.
Input • Select • Toggle

Navigation

Tabs, breadcrumbs, pagination — keyboard-friendly.
Tabs • Pager • Breadcrumbs

Feedback

Toasts, alerts, modals — polished motion + a11y.
Action completed
Alert • Toast • Modal
Sixty more where these came from — every one documented with live examples.
View all components Changelog
04 Installation

Three steps, then you are building

Neura UI installs like any Composer package and compiles with your existing Vite pipeline.
  1. 01

    Install the package

    One Composer requirement. No license key, no vendor dashboard.
    bash 
    composer require neura-ui/neura-kit:^2.0
  2. 02

    Register the Vite plugin

    Neura Kit compiles alongside your own assets.
    vite.config.js 
    import neuraKit from
  './vendor/neura-ui/neura-kit';

plugins: [laravel(), neuraKit()],
  3. 03

    Enable the runtime

    Modals, sideovers and spotlight register themselves globally.
    app.blade.php 
    @neuraKit
</body>