Neura UI

Loading…

Neura UI Logo
Neura UI
See what's new

Own every layer of your Laravel UI

Composable Blade components for Laravel, with Livewire and Alpine built in. Themeable, accessible, and documented with a live preview beside every example.
Get started Browse components
composer require neura-ui/neura-kit:^3.0
  • neura::button
  • neura::input
  • neura::select
  • neura::switch
  • neura::rating
  • neura::slider
  • neura::otp
  • AM
    SL
    JB
    +4
    neura::avatar
60+
Components
11–13
Laravel
8.2+
PHP
MIT
No license key

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.

Token-driven theming

One source of truth for color, radius, spacing and elevation — light and dark ship together, and every variant inherits them.
primary
success
warning
danger
info
sm
md
lg
xl
full

Accessible defaults

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

Composable primitives

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

Livewire-first

Predictable DOM and minimal JS, so wire:model just works. 
wire:model.live="email"
email = ""

Readable Blade

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

See the code. See the result.

Drag the divider to compare. The form on the right is rendered live by the Blade on the left.
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

A library you can actually build with

Six of the more demanding components, running live on this page. Each one is a single Blade tag.

Time dial

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

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

Date reel

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

Activity rings

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

Chart

A quiet line. Labels stay inside the frame.
View docs

Confirm morph

One pill that asks, waits, and offers undo.
View docs

Kanban

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

The rest of the library is documented the same way, with a live preview beside the Blade.
View all components Changelog

Three steps, then you are building

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

    Install the package

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

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

    Enable the runtime

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