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:^3.0
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

The pieces worth opening the docs for, running live on this page — dials, reels, rings, boards, and charts.

01

Time dial

A fixed clock face. Drag the cursor and each city lands on its own hour.
Open

Drag around the dial or use the arrow keys in 15 minute steps. Page Up and Page Down move by an hour.

02

Date reel

Phone-style wheels. Flick a column and it settles on the nearest entry.
Open

03

Activity rings

Daily goals that sweep, count up, and trace a second lap past 100%.
Open

04

Chart

A quiet line. Labels stay inside the frame.
Open

05

Confirm morph

One pill that asks, waits, and offers undo.
Open

06

Kanban

Quiet lanes. Drag a card, or move it with the chevrons.
Open

The rest of the library is documented the same way, with a live preview beside the Blade.
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:^3.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>