Fieldbook ist ein Katalog eigenständiger UI-Komponenten für React, Vue, Svelte, Astro und HTML, entwickelt von Lizardi Studio in Mexiko-Stadt, mit einem MCP-Server für Coding-Agenten.

Bewege sie, passe sie an und hole dir React, Vue, Svelte, Astro oder HTML, oder gib die Komponentennummer an deinen Coding-Agenten weiter.

Komponenten ansehen Agenten verbinden

1.404 Komponenten21 Kategorien5.616 getestete Portierungen

Jede Vorschau läuft live.

Hier läuft die echte Komponente direkt in deinem Browser. Öffne eine Vorschau, um den Code mitzunehmen.

Standbild der UI-Komponente Jello squash button von Fieldbook aus der Kategorie Schaltflächen.

FB-2556Jello squash buttonelastic

Standbild der UI-Komponente Spring easing toggle von Fieldbook aus der Kategorie Animation.

FB-1808Spring easing toggleback-out

Standbild der UI-Komponente Elastic tug slider von Fieldbook aus der Kategorie Eingabefelder.

FB-2795Elastic tug sliderexpo-out

Standbild der UI-Komponente Three layer push button von Fieldbook aus der Kategorie Schaltflächen.

FB-2620Three layer push buttonbounce

Standbild der UI-Komponente Spring Push Collapsible von Fieldbook aus der Kategorie Datendarstellung.

FB-2052Spring Push Collapsibleease-in-out

Standbild der UI-Komponente Reflowing Notification Stack von Fieldbook aus der Kategorie Datendarstellung.

FB-2412Reflowing Notification Stacklinear

Alle Live-Komponenten ansehen

Stimme die Bewegung ab.

Wähle eine Kurve und erlebe sie an einem Button, einem Schalter und einer Karte. Viele Fieldbook Komponenten nehmen Eigenschaften für Dauer, Geschwindigkeit oder Beschleunigung an, damit du die Bewegung selbst abstimmen kannst.

Wie soll es ankommen?

t 0.00 · 900 ms · back-out

linear

ease-in-out

expo-out

back-out

bounce

elastic

back-out

Ein System, sechs Produktfamilien.

Buttons, Schalter, Schieberegler und Karten, nach deinem Vorhaben gruppiert, damit du passende Teile für deine Oberfläche findest.

Produktfamilien

button

1.404 Komponenten zum Installieren.

Suche nach deinem Vorhaben, filtere nach Produktfamilie und hole dir React, Vue, Svelte, Astro oder HTML.

Gesamten Index öffnen

Index durchsuchen

Dein Agent installiert sie.

Verbinde den Fieldbook MCP Server einmal. Frage nach einer Komponentennummer und dein Agent holt die Komponente, ihre Eigenschaften und ihre Portierungen.

terminal

codex mcp add fieldbook --url https://fieldbook.lizardi.mx/api/mcp --bearer-token-env-var FIELDBOOK_TOKEN

.mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "type": "http",
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${FIELDBOOK_TOKEN}"
      }
    }
  }
}

~/.grok/config.toml

[mcp_servers.fieldbook]
url = "https://fieldbook.lizardi.mx/api/mcp"
headers = { "Authorization" = "Bearer ${FIELDBOOK_TOKEN}" }

.cursor/mcp.json

{
  "mcpServers": {
    "fieldbook": {
      "url": "https://fieldbook.lizardi.mx/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:FIELDBOOK_TOKEN}"
      }
    }
  }
}

mcp

url        https://fieldbook.lizardi.mx/api/mcp
transport  streamable http
header     Authorization: Bearer $FIELDBOOK_TOKEN

fragen

Füge FB-2556 zum Speichern-Button in den Einstellungen hinzu.

abrufen

quellcode der komponente
eigenschaften und standardwerte
React, Vue, Svelte, Astro, HTML

nutzen

MCP Einrichtung lesen

Bring es in Bewegung.

Starte mit den offenen Komponenten oder wähle Pro für den gesamten Katalog für 14,99 USD pro Monat.

Komponenten ansehen Pro Preise ansehen

Komponenten, die sich bewegen.