VAULT // NEXTUI

Callout

Inline callout block with four semantic variants: info, warn, tip, and danger. Each renders a matching icon and left-accent color for inline documentation alerts.

$npx @voltenworks/shipui add callout --theme vault
Or install the base component for free:
Live Preview
Open full demo
voltenworks.com/shipui/vault/demo/components
VAULT // NEXT Setup GuideDesign tokens, component styles, and dependencies
Usage
TSX
<Callout variant="info">Requires Node.js 18 or later.</Callout>
Variants
<Callout variant="info">Requires Node.js 18 or later.</Callout>
<Callout variant="warn">This API will change in v2.</Callout>
<Callout variant="tip">Use the CLI for faster setup.</Callout>
<Callout variant="danger">This action cannot be undone.</Callout>
Source
TSX
import type * as React from 'react'
import { cn } from '@/lib/utils'

type CalloutVariant = 'info' | 'warn' | 'tip' | 'danger'

interface CalloutProps {
  variant?:   CalloutVariant
  children:   React.ReactNode
  className?: string
}

function CalloutIcon({ variant }: { variant: CalloutVariant }): React.JSX.Element {
  if (variant === 'info') {
    return (
      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
      </svg>
    )
  }
  if (variant === 'warn') {
    return (
      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
        <line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
      </svg>
    )
  }
  if (variant === 'tip') {
    return (
      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" /><polyline points="20 6 9 17 4 12" />
      </svg>
    )
  }
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" />
      <line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
    </svg>
  )
}

export function Callout({ variant = 'info', children, className }: CalloutProps): React.JSX.Element {
  return (
    <div className={cn('vault-callout', `vault-callout--${variant}`, className)}>
      <div className="vault-callout-icon">
        <CalloutIcon variant={variant} />
      </div>
      <div>{children}</div>
    </div>
  )
}
Preview in theme demoGet full theme, $29
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from VAULT // NEXT
VAULT // NEXTUI

Button

Dark docs-style button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link for internal hrefs and a plain anchor for external links.

View sourcePreview
VAULT // NEXTUI

Badge

Semantic status badge with six color variants: green, blue, yellow, red, purple, and muted. Suited for version tags, API status labels, and changelog markers.

View sourcePreview
VAULT // NEXTUI

Card

Feature card with icon, title, optional badge, and description. Accepts an accent prop for a highlighted border variant. Icon set: book, code, key, zap, layers, terminal, shield, cpu.

View sourcePreview
VAULT // NEXTUI

CodeBlock

Syntax-highlighted code block with a header showing the language or file title and a one-click copy button. Client component with clipboard feedback.

View sourcePreview