JetBrains IDE-Plugin

Flexible for Daisy UI: Autocomplete und Komponenten-Browser

Vervollständigen Sie daisyUI-Klassen und fügen Sie fertige Komponenten aus einem Browser mit Live-Vorschau ein, direkt in Ihrer JetBrains IDE.

Auf dem Marketplace holen Preise ansehen

IntelliJ IDEA · PyCharm · WebStorm · CLion · + Alle JetBrains IDEs (2023.3+)

440+: daisyUI-Klassen mit Vervollständigung
65: Komponenten im Browser
35: Vorschau-Themes

Intelligente Autovervollständigung

Vervollständigen Sie mehr als 440 daisyUI-Klassen in HTML, JSX, Vue und CSS.

Komponenten-Klassengruppen: Tippen Sie btn und sehen Sie btn-primary, btn-secondary, btn-outline und alle Größenvarianten
Modifier-Klassen für Farbe, Größe, Form und Zustand, mit Dokumentation
Funktioniert in class-Attributen, className-Props, Template Literals und Tailwind-@apply

Komponenten-Browser

Durchsuchen Sie die daisyUI-Komponenten im Werkzeugfenster Daisy UI Components.

Filtern Sie nach Kategorie oder suchen Sie nach Namen
Wählen Sie eine Komponente, um ihre Darstellung zu sehen
Ziehen Sie sie in den Editor oder klicken Sie auf Insert

Das Werkzeugfenster Daisy UI Components mit Kategoriebaum und der Hero-Komponente in der Live-Vorschau samt HTML-Code

Live-Vorschau in 35 Themes

Sehen Sie genau, wie jede Komponente aussieht, bevor Sie sie einfügen. Wechseln Sie die Vorschau zwischen 35 eingebauten Themes, etwa light, dark, cyberpunk und synthwave.

Eine Card-Komponente mit Schuhbild in der Live-Vorschau, darunter der HTML-Schnipsel

Intelligentes Einfügen von Snippets

Das Plugin passt den eingefügten Schnipsel an die Datei an, die Sie bearbeiten.

HTML-Dateien: ergänzt die daisyUI-CDN-Links im Head und fügt den Schnipsel am Cursor ein
JSX- und TSX-Dateien: wandelt class in className und for in htmlFor um und schließt Void-Elemente selbst
Vue-Dateien: fügt im <template>-Bereich ein
CSS-Dateien: zeigt eine Warnung, statt rohes HTML einzufügen

Die Steps-Komponente in der Live-Vorschau mit vier Schritten: Register, Choose plan, Purchase und Receive Product

65 Komponenten in 7 Kategorien

Der Browser enthält 65 einsatzbereite Komponenten in 7 Kategorien: Actions, Data Display, Navigation, Feedback, Data Input, Layout und Mockup. Das Plugin bringt die komplette daisyUI-v5-Klassenbibliothek und die Komponentendefinitionen mit, Sie brauchen also keine Projekt-Konfiguration.

Die Modal-Komponente in der Live-Vorschau mit dem Titel Hello und einem Close-Button

Hover-Doku und Klassen-Inspektionen

Fahren Sie über eine daisyUI-Klasse oder drücken Sie Strg+Q, um ihre Beschreibung zu sehen und ob sie eine Komponente, ein Modifier oder ein Utility ist. Ein Link öffnet die offizielle daisyUI-Seite.

Die Inspektion für unbekannte Klassen markiert Tippfehler und Klassennamen, die es nicht gibt. Strg+Klick auf einen Klassennamen springt zur Dokumentation.

Einfache, transparente Preise

Flexible for Daisy UI ist ein Einmalkauf. Der Kauf erfolgt über den JetBrains Marketplace.

Einzelperson

Für Solo-Entwickler

$9.90einmalig

Einmalige Zahlung über den JetBrains Marketplace

440+ daisyUI-Klassen mit Vervollständigung
Komponenten-Browser mit 35 Vorschau-Themes
Intelligentes Einfügen für HTML, JSX und Vue
Hover-Doku und Inspektion unbekannter Klassen

Auf dem Marketplace holen

TEAMS

Organisation

Für Teams und Unternehmen

$19.90einmalig

Einmalige Zahlung über den JetBrains Marketplace

Alles aus Einzelperson
Für Teams und Unternehmen
Einmalkauf ohne Abo
Kauf über den JetBrains Marketplace

Auf dem Marketplace holen

Open-Source-Mitwirkende und Einzelentwickler: Kontaktieren Sie uns für Rabatte. Wir unterstützen die Community.

Wechseln Sie nicht mehr den Tab, um daisyUI-Doku zu lesen.

Auf dem Marketplace holen