Hint

Component hint-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add hint

Usage

import { Hint, HintIcon } from "@/components/ui/hint"

<Hint>
  <HintIcon as={Info} />
  This is a helpful hint message
</Hint>

Features

Icon Support

The hint component supports custom icons through the as prop on HintIcon:

import { Info, HelpCircle, Lightbulb } from "lucide-react"
 
<Hint>
  <HintIcon as={Info} />
  Information hint
</Hint>
 
<Hint>
  <HintIcon as={HelpCircle} />
  Help hint
</Hint>
 
<Hint>
  <HintIcon as={Lightbulb} />
  Pro tip hint
</Hint>

State Variants

The hint component supports different states for various use cases:

• Normal: Default state for general information
• Error: Use hasError prop for validation errors
• Disabled: Use disabled prop for unavailable features

Examples

Basic Hints

Component hint-demo not found in registry.

Error State

Component hint-error not found in registry.

Disabled State

Component hint-disabled not found in registry.