shadcn.io is an independent project built on shadcn/ui
The lightbulb is centered above Pro Tip. The description says to press Cmd+K to open the command palette. That cap does not listen for keys. Got it does not open a palette.
Center the icon for a tip that should pause the page. Put keys people will use on the real control. The palette is a Command. In React, Base UI does not bind that shortcut.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger render={<Button variant="outline" />}>
Show Tip
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader className="sm:place-items-center sm:text-center">
<div className="mb-2 flex size-12 items-center justify-center rounded-full bg-warning/10">
<LightbulbIcon aria-hidden="true" className="size-6 text-warning" />
</div>
<AlertDialogTitle>Pro Tip</AlertDialogTitle>
<AlertDialogDescription>
Use keyboard shortcuts to navigate faster. Press <Kbd>Cmd+K</Kbd> to
open the command palette.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction>Got it</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>FAQ
When should the icon be centered?
For messages worth pausing on: tips, milestones, announcements. Routine information reads faster with the icon beside the title.
Which colors suit a tip?
bg-warning/10 behind a text-warning icon, the theme's amber. Use info for general notes and success for completions; the tokens adapt to dark mode.
What size should the circle be?
size-12 with a size-6 icon inside, so the icon is half the circle's width.
How is the shortcut shown?
With the Kbd component inside AlertDialogDescription, which styles Cmd+K as a key and renders a kbd element.
Should the description be centered too?
Yes, AlertDialogHeader centers everything with sm:place-items-center sm:text-center. For long text, start-align it instead.
How often should tips appear?
Once per tip per person. Remember which tips were dismissed, and show each when it's relevant, not on every visit. On Base UI, AlertDialogAction is a plain button: control open and close the dialog in its handler, or use AlertDialogCancel for a button that only dismisses.
API Reference
Alert Dialog
No extra props in this demo. The rest is on the Alert Dialog page.
Button
Sets variant="outline". The rest is on the Button page.
Kbd
No extra props in this demo. The rest is on the Kbd page.
