Composants originaux, rendus en direct

Des composants déjà en mouvement.

Créez une interface utile avec une identité propre. Explorez les composants interactifs, récupérez le code ou laissez votre agent obtenir la bonne version via MCP.

Explorer les composants Connectez votre agent

1,381 composants · 20 catégories · 5,524 versions testées

Chaque aperçu fonctionne. Balayez ou utilisez les flèches pour parcourir ; touchez pour mettre en pause.

Explorez les détails.

Des archives rythmées. Un enregistrement en relief. Un menu qui suit votre main. Essayez les composants ici même.

Explorer la bibliothèque

FB-1532 Masonry flow

Un peu d’ordre. Du caractère.

Faites défiler les archives pour découvrir leur composition changeante.

Voir le composant

Membres

FB-1545 Tilt card

Une profondeur sensible.

Survolez l’enregistrement et observez la lumière suivre le pointeur.

Voir le composant

FB-1528 Dock menu

Survolez ou sélectionnez une icône pour changer d’espace.

Voir le composant

Partez de ce que vous voulez créer

Choisissez une famille de produits pour trouver les composants adaptés, ou suivez un guide pour les réunir dans une interface complète.

Explorer les guides de création

Boutons

442

Boutons, interrupteurs et appels à l’action qui répondent au pointeur.

Tout voir

2466Add Then Confirm ChipBoutonsUne puce sombre avec une étiquette chaude dont le plus oscille d'un côté à l'autre au survol, puis se transforme en coche et signale l'élément ajouté.

2707Amber upload pillBoutonsUne pilule de téléchargement en dégradé chaud avec un bord brillant qui élargit sa dominante colorée et éclaire l'étiquette par derrière en survol.

2625Anaglyph wobble buttonBoutonsUn bouton qui se bloque dans un lent balancement 3D et, lorsqu'il est survolé ou focalisé, jette des doublons chauds et froids de lui-même hors du registre avec une oscillation excessive.

2518Annotated anatomy buttonBoutonsUn bouton qui s'explique tout seul : le survol fait apparaître des marques de mesure et des lignes de repère nommant son remplissage, son remplissage, son rayon de coin et son emplacement d'icône.

Champs de saisie

104

Champs, codes, sélecteurs et interrupteurs aux états explicites.

Tout voir

2297Addon Input GroupChamps de saisieUn champ de texte enveloppé dans une coque bordée qui peut porter une icône de début, un bouton ou un texte de fin, et partage un anneau de mise au point dans l'ensemble du groupe.

2108Appointment Range CardChamps de saisieUne carte qui associe une grille de date sur un mois avec un champ d'heure de début et d'heure de fin en dessous, pour choisir un jour plus une fenêtre horaire dans un bloc compact.

2109Appointment Scheduler CardChamps de saisieUn sélecteur de date unique encadré à l'intérieur d'une carte titrée avec un bouton de passage à aujourd'hui dans le coin, conçu pour prendre un rendez-vous.

2792Auto Grow TextareaChamps de saisieUn champ de texte multiligne qui s'agrandit à mesure que la personne tape davantage, au lieu de défiler à l'intérieur d'une zone fixe.

Arrière-plans

Toiles plein cadre, champs et aplats derrière le contenu.

Tout voir

1665Assistant Ripple GlowArrière-plansUne ondulation en forme d'anneau s'étend vers l'extérieur sur une copie du contenu d'un panneau tandis que son bord s'allume aussi longtemps qu'une tâche est en cours d'exécution.

2110Aurora band glowArrière-plansUn doux ruban de lumière s'étendant sur un cadre sombre, son bord errant sur un bruit superposé tandis que la couleur se déplace sur toute sa longueur.

1666Aurora curtainArrière-plansUn doux rideau de lumière suspendu au bord supérieur, son ourlet inférieur montant et descendant sur une lente onde sonore tandis que sa couleur change sur toute la largeur.

1526Aurora veilArrière-plansUn arrière-plan à fond perdu composé de trois rubans de lumière flottants qui s'additionnent là où ils se croisent, sur un fond sombre, avec un calque de légende qui reste lisible.

Effets de texte

Mots qui apparaissent, se mélangent, comptent ou défilent.

Tout voir

2301Ascii Art HeadingEffets de texteUn gros mot est rendu comme une mosaïque de caractères à espacement fixe dont la densité imite la forme des lettres, ondulant doucement et s'inclinant vers le pointeur.

1915Aurora glow headingEffets de texteUn titre dans lequel un mot porte un remplissage dégradé multicolore à dérive lente attaché à ses lettres, comme une aurore qui brille derrière le type.

1921Binary Decode TextEffets de texteChaque lettre scintille brièvement en un chiffre binaire lumineux avant de revenir à son caractère réel, parcourant le mot de gauche à droite.

2307Blur in word revealEffets de texteLes mots d’une phrase passent d’un léger flou à une netteté l’un après l’autre à mesure que la phrase défile.

Graphiques

Courbes, aires, barres et anneaux dessinés en SVG, sans bibliothèque de graphiques.

Tout voir

1840Activity cell heatmapGraphiquesUne grille de calendrier composée de petits carrés teintés qui balaye une onde diagonale et permet à une bande de niveau d'isoler une intensité à la fois.

2104Animated Time AxisGraphiquesUne rangée d'étiquettes de date sous un graphique linéaire qui sélectionne automatiquement un sous-ensemble régulièrement espacé pour éviter l'encombrement et atténue les étiquettes à proximité du point survolé.

2097Animated Value AxisGraphiquesColonne d'étiquettes de valeurs à côté d'un graphique qui abrége les grands nombres et glisse facilement vers de nouvelles positions chaque fois que la plage de données du graphique change.

1525Area chart liteGraphiquesUn graphique en aires SVG réactif avec des graduations à axe rond, un remplissage dégradé, un réticule qui lit l'échantillon sous le pointeur et un volet de dessin.

Icônes

Glyphes animés et indicateurs de chargement dessinés à la main.

Tout voir

1585Accessibility iconIcônesUne silhouette debout, les bras ouverts et une position large qui respire avec un pouls lent.

1612Activity iconIcônesUne trace de signes vitaux qui se dessine de gauche à droite sur une ligne plate, pointe une fois, puis s'aplatit à nouveau.

1586Airplay iconIcônesUn écran avec un espace sur son bord inférieur et un triangle en dessous qui glisse vers le bas et vers l'arrière, diffusant l'image.

1613Alarm clock iconIcônesUn réveil à double cloche qui tinte sur ses pieds tandis que les aiguilles traînent d'un demi-battement derrière le boîtier.

Ouvrir l’index complet

Comment les composants sont vérifiés

Trente signes

Chaque composant et chaque page sont évalués selon les habitudes qui donnent au design un aspect généré automatiquement. Les scores correspondent aux règles du conseils et le analyseur.

Pour les agents de programmation

Choisissez. Votre agent le construit.

Votre agent peut construire presque tout ; choisir l’apparence reste difficile. Explorez le catalogue, choisissez visuellement et donnez à l’agent le numéro de la fiche. Le MCP Fieldbook lui permet de récupérer le composant, ses propriétés et ses versions dans les cinq frameworks. La configuration est décrite dans la documentation MCP.

Codex · Terminal

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

Votre projet va au-delà de la bibliothèque ?

Travailler avec Lizardi Studio

Des composants déjà en mouvement.

Un peu d’ordre. Du caractère.

Une profondeur sensible.

Une navigation réactive.

Partez de ce que vous voulez créer

Boutons

Champs de saisie

Arrière-plans

Effets de texte

Graphiques

Icônes

Trente signes

Choisissez. Votre agent le construit.