Hint

Highlight a note with an icon, a rich title, and optional collapsible content.

Stable

Introduced: v0.1.4
Supported through: Latest

Usage

<Hint icon="lucide:info">
  <HintTitle>Keep in mind</HintTitle>
  <HintContent>

    Titles and content support **Markdown**, JSX, and custom components.

  </HintContent>
</Hint>

Collapse

Click anywhere on the title to expand or collapse the content. A focused title also responds to Enter and Space. Links and controls inside custom title components keep their own actions.

The height transitions smoothly when toggled. Content stays mounted to preserve component state, and animations respect reduced motion preferences.

<Hint type="tip" icon="lucide:lightbulb" allowCollapse>
  <HintTitle>Starts collapsed</HintTitle>
  <HintContent>

    Setting `allowCollapse` without `collapsed` starts the hint collapsed.

  </HintContent>
</Hint>

<Hint type="info" icon="lucide:info" collapsed={false}>
  <HintTitle>Starts expanded</HintTitle>
  <HintContent>

    Setting `collapsed={false}` enables folding and starts the hint expanded.

  </HintContent>
</Hint>

allowCollapse	collapsed	Behavior
Omitted	Omitted	Always expanded, no toggle
Omitted	`true`	Collapsible, starts collapsed
Omitted	`false`	Collapsible, starts expanded
`true`	Omitted	Collapsible, starts collapsed
`true`	`true` / `false`	Collapsible, uses the supplied state
`false`	Any value	Always expanded, no toggle

Changing collapsed updates the displayed state.

Type

Use type to choose the hint's border, background, title, and icon colors. The default is default. All types support both light and dark themes.

Props

Hint Props5 properties

Property	Type	Default	Description
`icon`	`string`	`-`	A Lucide or Simple Icons name, such as lucide:info or simple:typescript.
`type`	`default \| info \| success \| warning \| danger \| error \| tip`	`default`	Hint colors. Error uses the same colors as danger.
`allowCollapse`	`boolean`	`collapsed !== undefined`	Whether the content can be collapsed. Explicit false disables folding.
`collapsed`	`boolean`	`undefined`	True means collapsed. When folding is enabled and this is omitted, the hint starts collapsed.
`children`	`React.ReactNode`	`-`	HintTitle and HintContent, including custom component children.