Tutorial · VelinStyle · 05.07.2026

VelinStyle installieren (npm, CDN, Offline)

Installieren Sie VelinStyle per npm, CDN oder Offline-Bundle und prüfen Sie CSS sowie Komponenten end-to-end.

VelinStyle Setup · Teil 1

VelinStyle installieren (npm, CDN, Offline)

Serie VelinStyle Setup · 1/28

Installieren Sie VelinStyle per npm, CDN oder Offline-Bundle und prüfen Sie CSS sowie Komponenten end-to-end.

Voraussetzungen

Node.js 18+ · npm oder pnpm — Schwierigkeit: beginner.

Warum Installation der richtige Start ist

VelinStyle ist das UI-Framework hinter vielen BirdAPI-Oberflächen: CSS-Utilities, Design Tokens und Web Components greifen ineinander. Bevor Sie Komponenten bauen, muss die Basis sitzen — sonst raten Sie später an falschen Stellen.

In diesem ersten Teil der Serie lernen Sie drei Installationswege kennen und prüfen danach mit einem kurzen Smoke-Test, ob Styles und Komponenten wirklich geladen sind. Nehmen Sie sich Zeit für den npm-Weg: Er ist der Standard für Vite und Laravel.

Parallel lohnt ein Blick in die offizielle Einführung und den Download-Guide. Dort finden Sie Versionen, Bundle-Namen und Hinweise zu Offline-Paketen.
Ohne saubere Basis sehen Utilities ‚kaputt‘ aus und Web Components bleiben stumm. Klären Sie deshalb früh: Welcher Bundler? Welches CSS-Entry? Brauchen Sie Offline-Kopien für Staging?

Schreiben Sie die Entscheidungen kurz auf — das spart später Diskussionen im Team.

npm-Installation im Detail

Der npm-Weg ist Standard für Vite und Laravel. Nach dem Install importieren Sie CSS und booten Components einmal zentral — nicht auf jeder Seite einzeln.

Prüfen Sie anschließend im Netzwerk-Tab, dass CSS und JS mit 200 laden und keine doppelten Bundles existieren.
npm install @birdapi/velinstyle
# oder: pnpm add @birdapi/velinstyle
resources/js/app.js javascript 
import '@birdapi/velinstyle/velinstyle.min.css';
import { bootFromDOM } from '@birdapi/velinstyle/bundle';

document.addEventListener('DOMContentLoaded', () => {
  bootFromDOM();
});

CDN und Offline

CDN eignet sich für Prototypen. Offline-Bundles kopieren Sie nach public/vendor und referenzieren lokal — wichtig für air-gapped Server.

Vermeiden Sie Mix aus alter und neuer Version; das erzeugt schwer reproduzierbare UI-Bugs.
<link rel="stylesheet" href="/vendor/velinstyle/velinstyle.min.css">
<script type="module" src="/vendor/velinstyle/velinstyle-components.min.js"></script>

Smoke-Test

Ein Primary-Button reicht als erster Nachweis. Danach optional ein Mini-Modal öffnen. Wenn beides wirkt, ist die Basis grün.
<button class="velin-btn velin-btn--primary">VelinStyle läuft</button>

Checkliste Teil 1

  • Paket oder Vendor-Dateien vorhanden
  • CSS einmal global geladen
  • bootFromDOM / Components-Script aktiv
  • Button sichtbar und styled
  • Keine 404 im Netzwerk-Tab

So gehen Sie vor

  1. Lesen

    Kapiteltext vollständig lesen und Docs-Link öffnen.

  2. Nachbauen

    Codebeispiele lokal umsetzen und speichern.

  3. Prüfen

    Checkliste abarbeiten, Mobile und Tastatur kurz testen.

  4. Weiter

    Nächstes Serienteil erst starten, wenn die Checkliste grün ist.

Offizielle Dokumentation

Vertiefen Sie „VelinStyle installieren (npm, CDN, Offline)“ hier: https://velinstyle.info/docs/getting-started/download.html — sowie weitere Leitfäden unter https://velinstyle.info/docs/.

Teil 1 von 28 — als Nächstes der folgende Schritt der VelinStyle-Setup-Serie.

Nächstes Tutorial