v2.0 ist verfügbar

Weniger HTML.
Mehr Laravel.

Die brückenschlagende Lösung zwischen Bootstrap 5 und Laravel Blade. Generiere komplexe, validierte Formulare mit einer einfachen Syntax und spare 40% deiner Entwicklungszeit im Frontend.

Dokumentation starten Live Demo
> composer require lbc/components
Input Component
<x-input name="email" />
Terminal
✔ Package installed successfully.
Publishing assets...
Done.
# Ready to build amazing UIs
> _
Der Workflow

Warum kompliziert, wenn es einfach geht?

Bootstrap ist mächtig, aber geschwätzig. LBC abstrahiert die Wiederholung weg, damit du dich auf die Logik konzentrieren kannst.

Dein Blade Code Sauber
auth/register.blade.php
<x-form :action="route('register')">

  // Eine Zeile für das komplette Feld
  <x-input
    name="email"
    label="E-Mail Adresse"
    icon="fas fa-envelope"
    required />

  <x-submit>Registrieren</x-submit>

</x-form>
Browser Output Automatisch generiert
View Source
<form method="POST"...>
  <div class="mb-3">
    <label class="form-label">E-Mail Adresse</label>
    <div class="input-group">
      <span class="input-group-text">
        <i class="fas fa-envelope"></i>
      </span>
      <!-- Auto-Validation State -->
      <input class="form-control is-invalid"...>     </div>
    <div class="invalid-feedback">Ungültige E-Mail.</div>
  </div>
</form>

Warum Entwickler LBC lieben

LBC ist nicht nur ein Wrapper. Es ist ein intelligentes System, das den Kontext deiner Laravel-Applikation versteht.

Old-Value Repopulation

Nach einem Validierungsfehler das Formular neu auszufüllen ist nervig. LBC übernimmt das automatisch. Kein value="" mehr schreiben. Das Feld erinnert sich von selbst.

Zero-Config Validation

Wenn dein Controller $request->validate() fehlschlägt, erkennt die Komponente den Fehler im $errors Bag. Sie färbt den Rahmen rot und zeigt die Fehlermeldung unter dem Input an.

Theming & Anpassung

Du willst, dass alle Inputs standardmäßig rounded-0 sind? Ändere es einmal in der zentralen LBC-Konfigurationsdatei oder im Blade-Theme, und es gilt global für das ganze Projekt.

Grid System Integration

Nutze Attribute wie col="6" oder grid="sm-6 lg-4" direkt an der Komponente. LBC baut die umgebenden Div-Wrapper automatisch für dich auf.

Label & Floating Labels

Wechsle zwischen Standard-Labels und Modernen Floating-Labels einfach durch das Setzen eines Attributs. Die Barrierefreiheit (Accessibility) wird dabei automatisch berücksichtigt.

Erweiterbar

Erstelle eigene Komponenten, die auf LBC aufbauen, oder überschreibe vorhandene Slots, um spezifische HTML-Strukturen einzufügen, wo immer du sie brauchst.