Composants React UI minimalistes (42)
Des sections React épurées où l'espace fait le travail : pas de surcharge, typo nette, animations discrètes. Parfait pour les sites SaaS et portfolio qui veulent un rendu premium sans bruit. Copy-paste, Tailwind v4, responsive.
aboutAbout Parallax ImageLayout 2 colonnes avec image parallax au scroll, titre serif italic, stats clés et éléments décoratifs flottants animés en boucle.authLogin CenteredPage de connexion centree avec formulaire email/password, boutons sociaux et liens.authMagic LinkConnexion sans mot de passe par magic link avec animation d'envoi et confirmation visuelle.authRegisterPage d'inscription avec champs nom, email, password et confirmation.authSocial LoginPage de connexion centree sur les providers sociaux (Google, GitHub, Apple, Twitter).authTwo FactorPage d'authentification a deux facteurs avec saisie de code OTP a 6 chiffres et timer de reenvoi.authVerify EmailPage de verification d'email avec code OTP a 6 chiffres.bannersBanner GradientBanniere avec fond degrade anime et bouton de fermeture.bannersMaintenance ModeBanniere plein ecran de maintenance avec compte a rebours anime et illustration de construction.bannersNotification StackFlux de notifications animées simulant une activité en temps réel. Cards toast avec avatar, message et timestamp relatif. Loop automatique toutes les 2s avec AnimatePresence, idéal pour la preuve sociale live.before-afterBefore After SliderSlider draggable avant/après avec Framer Motion drag='x'. Clip-path animé lié à la position du handle. Auto-animation de présentation au mount (30%→70%→50%). Labels badge flottants.bentoBento Scroll RevealBento grid asymetrique en 6 cellules avec animations d'entree differenciees au scroll, scale, x, y selon la position. Hover lift avec accent border. Contenu mixte : stat, chart barres, tag cloud, quote.bentoBento Text ImageBento asymetrique alternant grands blocs texte et blocs visuels. Layout editorial premium.blogBlog Hover PreviewListe minimaliste de titres d'articles. Au hover, un preview card (image + extrait) apparait pres du curseur.blogBlog Interactive TOCArticle de blog avec table des matieres interactive en sidebar et surlignage au scroll.blogBlog Minimal ListListe ultra-minimale style Notion : date + titre + tag, sans images.breadcrumbBreadcrumb Dropdown NavFil d'Ariane avec menus deroulants sur chaque segment pour naviguer entre les pages soeurs.careersCareers Hover RevealListe de postes minimaliste. Au hover, un panneau se revele avec description, requirements et bouton postuler. Slide depuis la droite avec AnimatePresence.comparisonRadar ChartGraphique radar SVG comparant les features de plusieurs options. Visualisation multi-axes elegante.contactContact BookingSection reservation d'appel avec calendrier placeholder et choix de creneaux horaires.contactContact Calendar EmbedSection contact avec selecteur de creneaux horaires style calendrier. L'utilisateur choisit un jour et un horaire pour un rendez-vous.contactContact Map IntegratedSection contact avec carte Google Maps integree en fond et overlay d'informations.content-tabsContent Tabs PillTabs en pill/segment avec animation de slide, contenu texte avec stats et visuel a droite.developerDeveloper SDK ShowcaseVitrine SDK multi-langage avec onglets de code, badges de version et boutons d'installation par ecosysteme.faqFAQ AccordionFAQ classique en accordion avec animation d'ouverture/fermeture. Un seul item ouvert a la fois.featuresFeatures Icon GridGrille 3x2 d'icones avec texte, tres clean et aere. Style Apple/Stripe.featuresFeatures Spotlight PinSection features à deux colonnes : liste gauche scrollable avec indicateur actif (border-left accent, fond léger) et panneau droit sticky dont le visuel change dynamiquement via useScroll + AnimatePresence. Style Linear.app.footerFooter Dark MinimalFooter sombre ultra-minimaliste. Marque centree, socials et copyright. Ideal pour les portfolios et sites mono-page.heroHero Particle GridGrille de points en arriere-plan. Les points proches du curseur grossissent et brillent. Layout split avec texte a gauche.metricsMetrics Animated BarsBarres de progression horizontales qui se remplissent au scroll avec un spring physique (élastique). Chaque barre : label, description, pourcentage animé synchronisé. Layout split gauche (titre) / droite (barres).navbarNavbar DockNavigation style dock macOS fixee en bas. Les icones grossissent au hover avec effet de vague : les voisins grossissent aussi mais moins. useMotionValue + useSpring.newsletterNewsletter SpotlightSection newsletter avec spotlight radial qui suit la souris via useMotionTemplate. Dot-grid subtil en fond, glow sur l'input au focus, bouton avec spinner SVG anime puis checkmark au succes. Social proof avec avatars empiles.notificationNotification InboxPanneau de boite de reception de notifications avec filtres, marquer comme lu, tri par date et actions groupees.portfolioPortfolio Cursor FollowListe de projets avec image preview qui suit le curseur via useSpring. L'image apparait et disparait avec AnimatePresence. Interaction Awwwards-level.pricingPricing CalculatorCalculateur de prix interactif avec sliders (utilisateurs, stockage) qui mettent a jour le prix en temps reel avec transitions fluides.pricingPricing CardsGrille de 3 cartes de prix avec highlight sur la formule recommandee. Clean et lisible.pricingPricing Toggle MorphToggle mensuel/annuel avec slider spring physique (useSpring). Prix en crossfade vertical (AnimatePresence popLayout). Badge 'Save X%' pop au passage annuel. Cards 3 colonnes avec layout Framer et CTA whileHover.processProcess Path DrawSVG path qui se dessine entre les etapes au scroll (stroke-dashoffset anime via useScroll). Cercles numerotes relies par un trait.processProcess Sticky StepsLayout 2 colonnes : sidebar gauche sticky avec numero d'etape actif en crossfade (AnimatePresence) et barre de progression scroll-driven (scaleY). Droite : etapes qui se revelent au whileInView. Style Apple/Linear.servicesServices Scroll CardsCarousel de cards de services draggable horizontalement avec Framer Motion. Les cards hors viewport s'estompent en opacité et scale. Une barre de progression indique la position de défilement.timelineTimeline Draw PathTimeline verticale ou un path SVG sinueux se dessine progressivement au scroll (motion.path + pathLength lie a useScroll). Les jalons-cercles s'illuminent quand la ligne les atteint, les blocs texte font un reveal directionnel (x offset). Ambiance premium minimaliste, zero couleur tape-a-l-oeil.videoVideo Scroll PlayProgression simulee au scroll avec barre circulaire SVG qui se remplit. Le contenu change selon la progression.