Alert Dialog : HextaUI et shadcn/ui
Le Alert dialog de HextaUI garde les noms et les tokens de thème de shadcn/ui et s’installe avec la même CLI. Cette page liste ce qui diffère, lu dans le code des deux. Le côté shadcn/ui correspond à son registre base-vega au 2026-10-16.
En un coup d’œil
| Mesure | HextaUI | shadcn/ui |
|---|---|---|
| Parties exportées | 12 | 12 |
| Props gérées par l’enveloppe | 15 | 3 |
| Lignes de code | 488 | 187 |
| Dépendances npm | @base-ui/react@^1.8.0class-variance-authoritycn | cn |
| Construit avec | buttonsheettheme | button |
Plus de code n’est pas mieux en soi. La plupart des lignes en plus dans HextaUI gèrent des états, des animations et des cas limites que vous écririez sinon vous-même.
Variantes
| Prop | Dans les deux | Seulement HextaUI | Seulement shadcn/ui |
|---|---|---|---|
sizeAlertDialogHeader | – | defaultsm | – |
sizeAlertDialogFooter | – | defaultsm | – |
variantAlertDialogMedia | – | defaultdestructive | – |
La version HextaUI
Tous les états, les raccourcis clavier et la référence de l’API sont sur la page du composant.
8 de ses exemples ont aussi leur propre page.
Changer un composant
Lancez la commande add avec --overwrite pour remplacer le fichier shadcn/ui dans @/components/ui, puis relisez le diff dans git avant de le garder. Les imports restent les mêmes et les composants que vous ne remplacez pas continuent de fonctionner.
pnpm dlx shadcn@latest add https://hextaui.com/r/alert-dialog.json --overwrite- Chaque prop du tableau ci-dessus est un ajout, donc le code écrit pour shadcn/ui ne la passe pas encore.
- Avant de changer, vérifiez chaque partie ou variante listée seulement pour shadcn/ui et associez-la à l’équivalent HextaUI le plus proche.