Eigenständige Komponenten, live gerendert

Komponenten, die sich schon bewegen.

Eine Bibliothek eigens entwickelter Oberflächenkomponenten. Jede läuft hier in React, reagiert auf deine Eingaben und bietet Versionen für Vue, Svelte, Astro und HTML. Wir prüfen ihr Design anhand von dreißig Kriterien.

Komponenten entdecken Verbinde deinen Agenten

1,318 Komponenten · 19 Kategorien · 5,186 geprüfte Versionen

Jede Vorschau ist aktiv. Wische oder nutze die Pfeile zum Blättern; tippe zum Anhalten.

Schaltflächen

442

Schaltflächen, Umschalter und Handlungsaufforderungen, die auf den Zeiger reagieren.

Alle anzeigen

2466Add Then Confirm ChipSchaltflächenEin dunkler Chip mit einem warmen Etikett, dessen Plus beim Schweben hin und her wackelt, sich dann in ein Häkchen verwandelt und meldet, dass das Element hinzugefügt wurde.

2707Amber upload pillSchaltflächenEin warmer Farbverlaufs-Upload-Pill mit einem hellen Rand, der den Farbstich verbreitert und das Etikett beim Schweben von hinten beleuchtet.

2625Anaglyph wobble buttonSchaltflächenEin Knopf, der in einer langsamen 3D-Schwingung hängt und beim Schweben oder Fokussieren warme und kühle Duplikate seiner selbst mit einem überschießenden Wackeln aus dem Register wirft.

2518Annotated anatomy buttonSchaltflächenEine Schaltfläche, die sich von selbst erklärt: Wenn Sie den Mauszeiger darüber bewegen, werden Messmarkierungen und Führungslinien angezeigt, die den Abstand, die Füllung, den Eckenradius und den Symbolplatz benennen.

Eingabefelder

104

Felder, Codes, Auswahlfelder und Schalter mit klaren Zuständen.

Alle anzeigen

2297Addon Input GroupEingabefelderEin Textfeld, das von einer umrandeten Hülle umgeben ist, die ein führendes Symbol, eine nachgestellte Schaltfläche oder Text enthalten kann und einen gemeinsamen Fokusring für die gesamte Gruppe aufweist.

2108Appointment Range CardEingabefelderEine Karte, die ein Datumsraster für einen Monat mit einem Feld für Startzeit und Endzeit darunter kombiniert, um einen Tag und ein Zeitfenster in einem kompakten Block auszuwählen.

2109Appointment Scheduler CardEingabefelderEine einzelne Datumsauswahl, eingerahmt in einer betitelten Karte mit einer Schaltfläche „Zu heute springen“ in der Ecke, gestaltet für die Buchung eines Termins.

2792Auto Grow TextareaEingabefelderEin mehrzeiliges Textfeld, das größer wird, wenn die Person mehr tippt, anstatt in einem festen Feld zu scrollen.

Hintergründe

Leinwände und Flächen als Hintergrund für Inhalte.

Alle anzeigen

1665Assistant Ripple GlowHintergründeEine ringförmige Welle breitet sich nach außen über ein Duplikat des eigenen Inhalts eines Panels aus, während der Rand so lange aufleuchtet, wie eine Aufgabe ausgeführt wird.

2110Aurora band glowHintergründeEin weiches Lichtband, das über einen dunklen Rahmen liegt, dessen Rand auf geschichtetem Rauschen wandert, während die Farbe über seine Länge wandert.

1666Aurora curtainHintergründeAm oberen Rand hängt ein weicher Lichtvorhang, dessen unterer Saum sich auf einer langsamen Rauschwelle hebt und senkt, während sich seine Farbe über die Breite ändert.

1526Aurora veilHintergründeEin randloser Hintergrund aus drei wandernden Lichtbändern, die sich dort kreuzen, wo sie sich kreuzen, auf einem dunklen Grund, mit einer Beschriftungsebene, die lesbar bleibt.

Texteffekte

Wörter, die erscheinen, sich verwandeln, zählen oder fließen.

Alle anzeigen

2301Ascii Art HeadingTexteffekteEin großes Wort wird als Mosaik aus monospaced-Zeichen dargestellt, deren Dichte die Buchstabenformen nachahmt und sich sanft kräuselt und zum Zeiger hin neigt.

1915Aurora glow headingTexteffekteEine Überschrift, in der ein Wort eine langsam wandernde, mehrfarbige Farbverlaufsfüllung trägt, die auf die Buchstabenformen zugeschnitten ist, wie ein Polarlicht, das hinter der Schrift leuchtet.

1921Binary Decode TextTexteffekteJeder Buchstabe flackert kurz in eine leuchtende Binärziffer auf, bevor er wieder in seinen wahren Charakter entschlüsselt wird und von links nach rechts über das Wort wandert.

2307Blur in word revealTexteffekteWörter in einem Satz lösen sich nacheinander von einer sanften Unschärfe in einen scharfen Fokus auf, während der Satz ins Blickfeld gescrollt wird.

Diagramme

Linien, Flächen, Balken und Ringe, in SVG gezeichnet.

Alle anzeigen

1840Activity cell heatmapDiagrammeEin Kalenderraster aus kleinen getönten Quadraten, das in einer diagonalen Welle verläuft und es einem ebenen Streifen ermöglicht, jeweils eine Intensität zu isolieren.

2104Animated Time AxisDiagrammeEine Reihe von Datumsbeschriftungen unter einem Liniendiagramm, das automatisch eine gleichmäßig verteilte Teilmenge auswählt, um Überfüllung zu vermeiden, und Beschriftungen in der Nähe des schwebenden Punkts ausblendet.

2097Animated Value AxisDiagrammeEine Spalte mit Wertebeschriftungen neben einem Diagramm, die große Zahlen abkürzt und sanft zu neuen Positionen gleitet, wenn sich der Datenbereich des Diagramms ändert.

1525Area chart liteDiagrammeEin reaktionsfähiges SVG-Flächendiagramm mit runden Achsenstrichen, einer Verlaufsfüllung, einem Fadenkreuz, das das Muster unter dem Zeiger liest, und einem Wischtuch zum Zeichnen.

Symbole

Handgezeichnete animierte Symbole und Ladeanzeigen.

Alle anzeigen

1585Accessibility iconSymboleEine stehende Figur mit offenen Armen und breiter Haltung, die mit langsamem Puls atmet.

1612Activity iconSymboleEine Vitalzeichenkurve, die sich von links nach rechts über eine flache Linie zieht, einmal spitzt und dann wieder abflacht.

1586Airplay iconSymboleEin Display mit einer Lücke am unteren Rand und einem Dreieck darunter, das nach unten und hinten gleitet und das Bild ausstrahlt.

1613Alarm clock iconSymboleEin Wecker mit zwei Glocken, der auf seinen Füßen klingelt, während die Zeiger einen halben Schlag hinter dem Gehäuse zurückbleiben.

Gesamtes Verzeichnis öffnen

So prüfen wir Komponenten

Dreißig Merkmale

Wir bewerten Komponenten und Seiten anhand der Muster, die ein Design automatisch erzeugt wirken lassen. Die Bewertungen entsprechen den Regeln im Leitfaden und im Prüfwerkzeug.

Für Programmieragenten

Wähle eine Komponente. Dein Agent setzt sie um.

Entdecke den Katalog, wähle eine Komponente und gib deinem Agenten ihre Nummer. Über Fieldbook MCP kann er Komponente, Eigenschaften und Versionen für die fünf Frameworks abrufen. Die Einrichtung steht in der MCP-Dokumentation.

Terminal · eine Zeile

claude mcp add --transport http fieldbook https://fieldbook.lizardi.mx/api/mcp --header "Authorization: Bearer <your-key>"