38+ composants · React 18+ · Tailwind

Construisez des interfaces React, plus vite.

Une bibliothèque de composants Tailwind, typés de bout en bout, accessibles et prêts pour Next.js. Découvrez-les sur des scénarios réels, pas une simple grille de boutons.

Voir les scénarios Installation
TypeScript SSR / Next.js Dark mode natif Tree-shakeable
AL

Ada Lovelace

Lead Engineer

Actif
React TypeScript Tailwind
Profil complété80%
2 3

<Wizard /> — nouveau v0.35.0

38+
Composants prêts
1425
Tests unitaires
0
Dépendance UI tierce
ESM+CJS
Dual package

Pensée pour la production

Pas un thème jetable : des composants composables, accessibles et optimisés que vous gardez sous contrôle.

Tailwind brut, zéro CSS runtime

Classes Tailwind natives + CSS pré-compilé. Aucun moteur de style au runtime, aucun flash de style.

Composable & accessible

Pattern compound (Card, Tabs, Wizard…), rôles ARIA, navigation clavier et focus visibles inclus.

Typé de bout en bout

Chaque composant exporte son interface Props. Autocomplétion et sécurité de types dans tout votre IDE.

Compatible Next.js

Exports ESM/CJS propres, directive "use client" uniquement là où c'est nécessaire.

Dark mode natif

Chaque composant gère dark: sans configuration. Testez-le avec le bouton en haut à droite. 🌙

Tree-shakeable

sideEffects: false — n'importez que ce que vous utilisez, le bundle reste léger.

Démo interactive

Des scénarios réels, pas des fragments

Cliquez, naviguez, ouvrez. Chaque démo est vivante — et le code React qui la produit est à un clic.

Créez votre compte — composant <Wizard />

    Pourquoi c'est puissant

    • ▸ Navigation linéaire/non-linéaire, étapes cliquables une fois atteintes.
    • ▸ Statut par étape (active / complétée / à venir / erreur) géré pour vous.
    • ▸ Mode contrôlé pour brancher votre validation par étape.
    • ▸ Hook useWizard() pour des contrôles 100% custom.

    Une boîte à outils complète

    Boutons, badges, avatars, formulaires, feedback… tout est déjà là, cohérent et accessible.

    Button

    Badge & Chip

    solid soft outlined dot React ✕

    Avatar

    AL KT JD +5

    Checkbox & Radio

    ProgressBar & Skeleton

    Banner & Tooltip

    Nouvelle version 0.36.0 disponible.
    Tooltip accessible 👋

    Prêt en 3 étapes

    Configurez le registre, installez, importez les styles. C'est tout.

    1

    Configurer .npmrc 

    @synertech:registry=https://gitlab.com/api/v4/projects/77616026/packages/npm/
//gitlab.com/.../npm/:_authToken=${GITLAB_NPM_TOKEN}
    2

    Installer

    pnpm add @synertech/ui
    3

    Importer & utiliser

    import "@synertech/ui/styles.css";
import { Button } from "@synertech/ui";

    Construisez plus vite, sans rogner sur la qualité.

    Une base de composants cohérente, testée et maintenue pour toutes vos applications Synertech.

    Explorer Storybook Revoir les scénarios