Back to Components
Feedback
Callout
Information callout box with tip, info, warning, and danger variants. Supports collapsible content.
PropsUsage ExampleVariations
Pro Tip
Use keyboard shortcuts to speed up your workflow. Press Cmd+K to open the command palette.
Note
This feature is available on all paid plans.
Caution
This action will affect all team members. Make sure everyone is notified before proceeding.
Danger
Deleting your account is permanent and cannot be undone.
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/callout.tsx
Installation
Using shadcn CLI
npx shadcn add callout --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Feedback Components
Alert Banner
Full-width dismissible banner for announcements with icon and close button.
Announcement Banner
Dismissible banner with icon, message, and optional action button.
Badge
Small badge component with multiple style variants for labels or tags.
Badge Group
Grouped badges for displaying multiple status labels or tags.
Empty State
Centered empty state placeholder with icon, text, and optional action.
Inline Alert
Contextual alert component for inline feedback with icon, title, and action support.