Alert Dialog: HextaUI and shadcn/ui
The HextaUI Alert dialog keeps the shadcn/ui names and theme tokens and installs with the same CLI. This page lists what differs, read from the source of both. The shadcn/ui side is its base-vega registry as of 2026-10-16.
At a glance
| Measure | HextaUI | shadcn/ui |
|---|---|---|
| Exported parts | 12 | 12 |
| Props the wrapper handles | 15 | 3 |
| Lines of source | 488 | 187 |
| npm dependencies | @base-ui/react@^1.8.0class-variance-authoritycn | cn |
| Built from | buttonsheettheme | button |
More source is not better on its own. Most of the extra lines in HextaUI handle states, motion and edge cases that you would otherwise write yourself.
Variants
| Prop | In both | Only HextaUI | Only shadcn/ui |
|---|---|---|---|
sizeAlertDialogHeader | – | defaultsm | – |
sizeAlertDialogFooter | – | defaultsm | – |
variantAlertDialogMedia | – | defaultdestructive | – |
The HextaUI version
Every state, the keyboard map and the API reference are on the component page.
8 of its examples also have a page of their own.
Switch one component
Run the add command with --overwrite to replace the shadcn/ui file in @/components/ui, then review the diff in git before you keep it. Imports stay the same, and components you don’t replace keep working.
pnpm dlx shadcn@latest add https://hextaui.com/r/alert-dialog.json --overwrite- Every prop in the table above is an addition, so call sites written for shadcn/ui don’t pass it yet.
- Check any part or variant listed only for shadcn/ui before you switch, and map it to the closest HextaUI one.