Overlays & Tooltips

Component Preview Tooltip

Hover a name to show a live miniature of a component.

Import

tsx

import { ComponentPreviewTooltip } from "@cronus-ui/ui";

bash

npx cronus-ui add component-preview-tooltip

Examples

Live preview

Pass a `preview` node (or `loadPreview` for a lazy module). The original Gaia version imported from a docs-only path — here the preview is explicit so the library stays framework-agnostic.

tsx

<ComponentPreviewTooltip
  componentName="goal-card"
  preview={
    <div className="w-56 rounded-2xl border border-border bg-surface-raised p-4">
      <p className="text-sm text-fg">Launch MVP</p>
      <div className="mt-3 h-2 rounded-full bg-surface-overlay">
        <div className="h-2 w-3/4 rounded-full bg-primary" />
      </div>
    </div>
  }
>
  <Button variant="outline">Hover me: Goal Card</Button>
</ComponentPreviewTooltip>

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

ComponentPreviewTooltipLabels

Prop	Type	Default	Description
`loading`*	`string`	—	—
`notFound`*	`string`	—	—
`preview`*	`string`	—	—

ComponentPreviewTooltipProps

Extends VariantProps<typeof componentPreviewTooltipVariants>

Prop	Type	Default	Description
`children`*	`ReactNode`	—	Contents of the component.
`componentName`	`string`	—	Accessible name for the preview surface.
`preview`	`ReactNode`	—	Ready-to-render preview. Preferred over `loadPreview`.
`loadPreview`	`() => Promise<{ default: ComponentType } \| ComponentType>`	—	Lazy-load a preview module when the tooltip opens.
`width`	`number`	`300`	—
`height`	`number`	`200`	—
`scale`	`number`	`0.8`	—
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	—
`className`	`string`	—	Additional class names merged onto the root.
`labels`	`Partial<ComponentPreviewTooltipLabels>`	—	Override default English strings.
`asChild`	`boolean`	—	Render as the child element via Slot.