Composants

grid

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

35 sur 35

Masonry flow

1532Masonry flowMise en pageUn mur de maçonnerie qui regroupe des carreaux de différentes hauteurs dans des colonnes, soulève chacun d'entre eux lorsqu'il défile et réinstalle la grille entière lorsque le nombre de colonnes change.

1552Blocks iconIcônesTrois blocs carrés disposés en L, sautillant les uns après les autres comme des pièces mises en place.

1568Layout dashboard iconIcônesQuatre tuiles de tableau de bord réparties en deux colonnes inégales, chacune respirant à tour de rôle de sorte que la grille ondule du coin supérieur gauche au coin inférieur droit.

Blinking grid pattern

1668Blinking grid patternArrière-plansUne grille carrée fine où les cellules dispersées disparaissent de haut en bas, chacune passant à une nouvelle cellule à la fin de son clignotement.

Blur reveal

1669Blur revealAnimationUn wrapper qui maintient son enfant flou et légèrement décalé jusqu'à ce qu'il entre pour la première fois dans la fenêtre, puis résout le flou et comble l'espace en un seul mouvement.

Cursor trail grid

1681Cursor trail gridArrière-plansUne grille de cellules délimitées qui s'allume sous le pointeur et se refroidit lentement une fois qu'il avance, laissant une traînée qui s'estompe.

1693Flickering glyph gridArrière-plansUne grille dense de caractères à espacement fixe où une poignée aléatoire échange de lettres et de couleurs à chaque tick, passant d'une nuance à l'autre au fur et à mesure.

Flickering square mesh

1694Flickering square meshArrière-plansUn maillage de toile de petits carrés où des cellules aléatoires sautent vers une nouvelle luminosité à chaque image, donnant une statique agitée qui ne se répète jamais.

Graph paper grid

1702Graph paper gridArrière-plansUne grille répétitive de lignes capillaires qui recouvrent son conteneur, s'estompant vers les bords, avec un petit groupe de cellules qui s'allument en une couleur d'accent et s'écoulent à nouveau.

Hex cell grid

1706Hex cell gridArrière-plansUn nid d'abeilles de cellules hexagonales coupées qui s'allument sous le pointeur et se refroidissent, laissant une traînée qui s'estompe.

Perspective floor grid

1731Perspective floor gridArrière-plansUn plan de grille s'éloigne de la caméra de sorte qu'il recule jusqu'à un horizon et glisse vers le spectateur sur une boucle continue à une cellule.

Pointer lit lattice

1733Pointer lit latticeArrière-plansUn treillis de toile dont les cellules s'illuminent au fur et à mesure que le pointeur passe, tiennent, puis se désintègrent, avec une pression envoyant un anneau de lumière s'étendant vers les coins les plus éloignés.

Scanning wire grid

1744Scanning wire gridArrière-plansUne fine grille métallique en perspective s'incline avec le pointeur tandis qu'une bande lumineuse la traverse en boucle, éclairant chaque ligne qu'elle traverse.

Shockwave dot grid

1746Shockwave dot gridArrière-plansUne grille de points qui se teinte vers le curseur et explose vers l'extérieur dans un anneau lorsque vous cliquez ou feuilletez dessus.

Tilted tile parallax

1753Tilted tile parallaxArrière-plansDes rangées de tuiles étiquetées sur une grille surdimensionnée inclinée glissent dans des directions opposées lorsque le pointeur se croise, chaque rangée arrivant avec son propre retard.

Warped tile tunnel

1761Warped tile tunnelArrière-plansUne toile de fond sombre recouverte de carrés brillants qui dépassent à travers une lentille, avec des anneaux de luminosité s'éloignant pour toujours du centre.

Bobble tile grid

1763Bobble tile gridAnimationUne grille de tuiles colorées qui s'éloignent du pointeur sur un ressort, rebondissant plus fort à mesure que le pointeur les traverse rapidement.

Iron filings field

1781Iron filings fieldAnimationUne grille carrée de petits tirets qui tournent tous pour pointer vers le pointeur, comme de la limaille de fer accrochée à un aimant glissé dessus.

Pixel Wake

1793Pixel WakeCurseurUne grille grossière de cellules s'allume sous le pointeur et se refroidit derrière lui, laissant un sillage en blocs sur le panneau.

Tilt Spotlight Grid

1817Tilt Spotlight GridCartesUne grille de capacités dans laquelle la carte survolée s'incline vers le pointeur et s'allume tandis que toutes les autres cartes s'assombrissent et rétrécissent.

Tilting cube field

1818Tilting cube fieldAnimationUne grille de cubes creux qui se penchent vers le pointeur dans un rayon d’atténuation, errent d’eux-mêmes lorsqu’ils sont laissés seuls et clignotent vers l’extérieur en anneaux en un clic.

Activity cell heatmap

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.

Edge Faded Plot Grid

1853Edge Faded Plot GridGraphiquesUne toile de fond d'intrigue composée de règles en pointillés qui s'estompent sur les bords, avec une ligne de base en surbrillance et une bande lumineuse qui les parcourt.

Dot matrix status pill

1950Dot matrix status pillMessages d’étatUn bouton de pilule dont le côté gauche est une grille de cinq points sur cinq jouant un court motif de boucle pour chaque état, avec la légende changeant par étape.

Bar wave matrix

2112Bar wave matrixArrière-plansUne grille de barres courtes où chaque barre glisse le long de sa propre piste, et le déphasage d'une rangée à l'autre transforme l'ensemble de la grille en une onde progressive.

Compass bar grid

2127Compass bar gridAnimationUne grille de barres courtes qui tournent toutes pour pointer vers le pointeur, de sorte que le champ se lit comme de la limaille de fer trouvant un aimant.

Pulse grid mesh

2210Pulse grid meshArrière-plansUn treillis métallique carré qui gonfle vers l'extérieur en anneaux lents à partir du milieu, le plus brillant au centre et disparaît avant d'atteindre les bords.

Rubber sheet panel

2218Rubber sheet panelAnimationUn panneau qui se comporte comme du caoutchouc étiré : le pointeur l'attrape, les points voisins traînent et le lâchent le ramène avec une oscillation.

Tile reveal swap

2252Tile reveal swapAnimationDeux panneaux échangent leurs places tuile par tuile, chaque tuile tournant et évoluant au fur et à mesure qu'elle se retourne, dans un ordre orienté à partir du centre, des bords ou d'une spirale.

Channel tile row

2313Channel tile rowBoutonsUne rangée de tuiles d'icônes carrées sous une petite légende, où chaque tuile passe à sa propre couleur réservée en survol.

Reactive bento panels

2409Reactive bento panelsMise en pageUne grille bento de panneaux qui brillent au pointeur, s'inclinent en 3D, dérivent vers le curseur et éclatent de particules et d'ondulations au clic.

Ripple Origin Grid

2415Ripple Origin GridMise en pageUne grille de tuiles colorées qui s'illuminent selon une ondulation rayonnant vers l'extérieur à partir d'une tuile choisie, chronométrée en fonction de la distance par rapport à cette tuile.

Shared layout card expand

2427Shared layout card expandSuperpositionsUne grille de cartes où cliquer sur une carte la transforme en un grand panneau de détails, et passer directement à une autre carte recible la même redistribution au lieu de se fermer puis de se rouvrir.

Spoke area chart

2436Spoke area chartGraphiquesUn tracé polaire où les rayons étiquetés portent une série sous la forme d'une forme fermée translucide sur une grille polygonale, avec une lecture qui s'aligne sur le rayon le plus proche.

Vertex Dot Radar

2460Vertex Dot RadarGraphiquesUne carte polaire en série unique qui épingle un point solide sur chaque coin de l'axe afin que chaque valeur mesurée se lit comme un point plutôt que comme une silhouette.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Activity cell heatmap
Une 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.
Bar wave matrix
Une grille de barres courtes où chaque barre glisse le long de sa propre piste, et le déphasage d'une rangée à l'autre transforme l'ensemble de la grille en une onde progressive.
Blinking grid pattern
Une grille carrée fine où les cellules dispersées disparaissent de haut en bas, chacune passant à une nouvelle cellule à la fin de son clignotement.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)