Overlays

Tooltip, Popover, Alert dialog, Hover card, Context menu — all on Base UI portals.

stable

Source: src/components/ui/ Install: npx shadcn@latest add tooltip popover alert-dialog hover-card context-menu --yes

Rendered example — light + dark

Light

Right-click me

Dark

Right-click me

Recipes & props

A realistic usage snippet for this component. Imports come from @/components/ui/…. See the source file src/components/ui/ for the full API.

import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';

export function HelpTip() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="ghost">?</Button>} />
      <TooltipContent>Single source of truth lives in gallery.ts</TooltipContent>
    </Tooltip>
  );
}

Props API

ButtonProps

Prop	Type	Default	Description
`asChild` opt	`boolean`	`false`	—

CalloutProps

Prop	Type	Default	Description
`title`	`string`	—	—
`variant` opt	`'default' \| 'success' \| 'warning' \| 'error'`	`'default'`	—
`icon` opt	`React.ReactNode`	—	Optional icon node (e.g. a Lucide icon element) shown beside the title.

DataTableProps

Prop	Type	Default	Description
`columns`	`ColumnDef<TData, TValue>[]`	—	—
`data`	`TData[]`	—	—
`initialColumnVisibility` opt	`VisibilityState`	`{}`	Initial column visibility — column id to visible boolean.
`initialGlobalFilter` opt	`string`	`''`	Initial global filter string.
`height` opt	`string \| number`	`'500px'`	Height of the scroll container in CSS units. Defaults to '500px'.
`estimateRowSize` opt	`number`	`40`	Estimated row height in px for virtualization. Defaults to 40.
`syncToUrl` opt	`boolean \| { key: string }`	`false`	Sync filter/sort/visibility/sizing to URLSearchParams so views are shareable and survive page refresh. Pass `{ key: 'myTable' }` to namespace URL params when multiple DataTables share a page. Defaults to false (no URL syncing).

DividerProps

Prop	Type	Default	Description
`children` opt	`React.ReactNode`	—	Optional centered text label rendered between two rules.

MetricProps

Prop	Type	Default	Description
`value`	`string \| number`	—	—
`label` opt	`string`	—	—
`delta` opt	`{ value: number; /** Semantic trend direction. Controls col…`	—	—

ProgressBarProps

Prop	Type	Default	Description
`value`	`number`	—	Completion percentage, clamped to [0, 100].
`label` opt	`string`	—	Accessible name for screen readers.

TrackerProps

Prop	Type	Default	Description
`data`	`TrackerBlock[]`	—	—