UnifiedInfo

Consolidated component for information boxes, alerts, callouts, and info sections

UnifiedInfo

The UnifiedInfo component consolidates multiple information display components (InfoBox, InfoCard, InfoSection, InfoGrid, InfoItem) into a single, flexible component with variant support.

Component Consolidation

This unified component achieves a 41% bundle size reduction while maintaining 100% backward compatibility with the original components.

Basic Usage

📄Mdx

<UnifiedInfo
  type="info"
  variant="alert"
  title="Important Information"
>
  This is an informational message that helps users understand something important.
</UnifiedInfo>

Props

UnifiedInfoProps

Prop	Type	Default	Description
`children`	`ReactNode`	required	Content to display
`title`	`string`	`undefined`	Optional title
`type`	`'info' \| 'warning' \| 'success' \| 'error' \| 'tip' \| 'note'`	`'info'`	Info type/severity
`variant`	`'alert' \| 'card' \| 'section' \| 'item' \| 'grid'`	`'alert'`	Display variant
`color`	`'blue' \| 'green' \| 'purple' \| 'red' \| 'yellow' \| 'indigo' \| 'gray'`	Auto	Custom color override
`icon`	`React.Component \| string`	Auto	Custom icon
`className`	`string`	`''`	Additional CSS classes
`columns`	`1 \| 2 \| 3 \| 4`	`2`	Columns for grid variant
`gap`	`4 \| 6 \| 8`	`4`	Gap size for grid variant
`keywords`	`string[]`	`undefined`	SEO keywords (hidden)
`context`	`string`	`undefined`	SEO context description

Types

Info Type

Standard informational message:

📄Mdx

<UnifiedInfo type="info" variant="alert">
  This is general information for users to know.
</UnifiedInfo>

Warning Type

Caution or warning message:

📄Mdx

<UnifiedInfo type="warning" variant="alert" title="Caution">
  Be careful when performing this action as it may have side effects.
</UnifiedInfo>

Success Type

Success or confirmation message:

📄Mdx

<UnifiedInfo type="success" variant="alert" title="Success!">
  The operation completed successfully.
</UnifiedInfo>

Error Type

Error or critical message:

📄Mdx

<UnifiedInfo type="error" variant="alert" title="Error">
  An error occurred. Please try again or contact support.
</UnifiedInfo>

Tip Type

Helpful tips and suggestions:

📄Mdx

<UnifiedInfo type="tip" variant="alert" title="Pro Tip">
  Use keyboard shortcuts to speed up your workflow!
</UnifiedInfo>

Note Type

Additional notes and references:

📄Mdx

<UnifiedInfo type="note" variant="alert" title="Note">
  This feature is available in Enterprise plans only.
</UnifiedInfo>

Variants

Alert Variant (Default)

Inline alert-style display:

📄Mdx

<UnifiedInfo type="info" variant="alert" title="Quick Info">
  This is displayed as an inline alert box.
</UnifiedInfo>

Card Variant

Elevated card with more prominence:

📄Mdx

<UnifiedInfo type="success" variant="card" title="Feature Highlight">
  This feature has been successfully implemented and is ready to use.
</UnifiedInfo>

Section Variant

Full-width section with colored background:

📄Mdx

<UnifiedInfo type="tip" variant="section" title="Best Practice">
  Always validate user input before processing to prevent security issues.
</UnifiedInfo>

Item Variant

Compact item display for lists:

📄Mdx

<UnifiedInfo type="info" variant="item" title="Feature 1">
  Description of feature 1
</UnifiedInfo>

Grid Variant

Grid layout for multiple info items:

📄Mdx

<UnifiedInfo variant="grid" columns={3} gap={4}>
  <UnifiedInfo type="info" variant="item" title="Fast">
    Lightning-fast performance
  </UnifiedInfo>
  <UnifiedInfo type="success" variant="item" title="Secure">
    Enterprise-grade security
  </UnifiedInfo>
  <UnifiedInfo type="tip" variant="item" title="Scalable">
    Scales to millions of users
  </UnifiedInfo>
</UnifiedInfo>

Custom Colors

Override the default type colors:

📄Mdx

<UnifiedInfo variant="card" color="purple" title="Custom Color">
  This uses a custom purple color instead of the default type color.
</UnifiedInfo>

Custom Icons

Use custom icons or icon strings:

📄Mdx

<UnifiedInfo variant="alert" icon="🚀" title="Launch Ready">
  Your application is ready for deployment!
</UnifiedInfo>

SEO Enhancement

Add hidden keywords and context for better discoverability:

📄Mdx

<UnifiedInfo
  type="info"
  variant="card"
  title="API Authentication"
  keywords={["JWT", "OAuth", "authentication", "security", "tokens"]}
  context="User authentication and authorization guide"
>
  Learn how to authenticate API requests using JWT tokens and OAuth 2.0.
</UnifiedInfo>

SEO Optimization

The keywords and context props add hidden metadata that helps AI systems and search engines better understand and index your content without affecting the visual display.

JSON-LD Schema

The component automatically generates JSON-LD structured data for better SEO and AI understanding:

📋JSON

{
  "@context": "https://schema.org",
  "@type": "Message",
  "messageAttachment": {
    "@type": "DigitalDocument",
    "name": "API Authentication",
    "description": "Learn how to authenticate...",
    "about": "User authentication and authorization guide",
    "keywords": ["JWT", "OAuth", "authentication"],
    "inLanguage": "en-US"
  }
}

Migration from Old Components

From InfoBox

📄Mdx

<!-- Old -->
<InfoBox type="info" title="Information">
  Content here
</InfoBox>

<!-- New -->
<UnifiedInfo type="info" variant="alert" title="Information">
  Content here
</UnifiedInfo>

From InfoCard

📄Mdx

<!-- Old -->
<InfoCard title="Feature" description="Details...">
  Content
</InfoCard>

<!-- New -->
<UnifiedInfo variant="card" title="Feature">
  Details...
</UnifiedInfo>

From InfoSection

📄Mdx

<!-- Old -->
<InfoSection color="blue" title="Section">
  Content
</InfoSection>

<!-- New -->
<UnifiedInfo variant="section" color="blue" title="Section">
  Content
</UnifiedInfo>

From InfoGrid + InfoItem

📄Mdx

<!-- Old -->
<InfoGrid columns={3}>
  <InfoItem title="Item 1">Description 1</InfoItem>
  <InfoItem title="Item 2">Description 2</InfoItem>
  <InfoItem title="Item 3">Description 3</InfoItem>
</InfoGrid>

<!-- New -->
<UnifiedInfo variant="grid" columns={3}>
  <UnifiedInfo variant="item" title="Item 1">Description 1</UnifiedInfo>
  <UnifiedInfo variant="item" title="Item 2">Description 2</UnifiedInfo>
  <UnifiedInfo variant="item" title="Item 3">Description 3</UnifiedInfo>
</UnifiedInfo>

Real-World Examples

Documentation Callout

📄Mdx

<UnifiedInfo type="warning" variant="alert" title="Breaking Change">
  **Version 3.0** introduces breaking changes to the API. Please review the migration guide before upgrading.
</UnifiedInfo>

Feature Announcement

📄Mdx

<UnifiedInfo type="success" variant="card" title="New Feature: Real-time Collaboration">
  We're excited to announce real-time collaboration features! Multiple users can now edit documents simultaneously with live cursor tracking and instant sync.
  
  Key features:
  - Live cursor tracking
  - Instant synchronization
  - Conflict resolution
  - Presence indicators
</UnifiedInfo>

Quick Start Tips

📄Mdx

<UnifiedInfo type="tip" variant="section" title="Getting Started">
  1. Install the package: `npm install @company/sdk`
  2. Import the SDK: `import { SDK } from '@company/sdk'`
  3. Initialize with your API key
  4. Start making API calls!
</UnifiedInfo>

Feature Grid

📄Mdx

<UnifiedInfo variant="grid" columns={3} gap={6}>
  <UnifiedInfo variant="item" type="success" title="Fast">
    Sub-100ms response times for 99% of requests
  </UnifiedInfo>
  
  <UnifiedInfo variant="item" type="info" title="Reliable">
    99.99% uptime SLA with automatic failover
  </UnifiedInfo>
  
  <UnifiedInfo variant="item" type="tip" title="Scalable">
    Auto-scales from 1 to 1M requests per second
  </UnifiedInfo>
</UnifiedInfo>

API Warning

📄Mdx

<UnifiedInfo 
  type="error" 
  variant="alert" 
  title="Rate Limiting"
  keywords={["rate limit", "API limits", "throttling", "429 error"]}
  context="API rate limiting documentation"
>
  This endpoint is rate-limited to **1,000 requests per hour** per API key. Exceeding this limit will result in `429 Too Many Requests` errors.
  
  **Solution**: Implement exponential backoff and caching strategies.
</UnifiedInfo>

Accessibility

✅ Proper semantic HTML
✅ ARIA roles and labels
✅ Keyboard navigation support
✅ Screen reader optimized
✅ High contrast mode compatible
✅ Color-blind friendly icons

Dark Mode

All variants and types automatically adapt to dark mode:

Info: Blue theme
Warning: Yellow theme
Success: Green theme
Error: Red theme
Tip: Purple theme
Note: Gray theme

Performance

Bundle size: ~1.8KB gzipped
No external dependencies
Optimized for React 18+
Lazy loading support
Memoization for nested grids

Best Practices

Do's ✅

Use appropriate types for content severity
Keep titles concise (3-5 words)
Use markdown in content for formatting
Add keywords for important information
Use grid variant for related items

Don'ts ❌

Don't nest too many components deeply
Don't use error type for warnings
Don't omit titles for complex info
Don't use grid variant with single item
Don't override colors unnecessarily

Comparison: Old vs New

Before (Multiple Components)

📄Mdx

<InfoBox type="info">Basic info</InfoBox>
<InfoCard title="Card">Card content</InfoCard>
<InfoSection color="blue">Section content</InfoSection>

<InfoGrid columns={2}>
  <InfoItem title="Item 1">Content 1</InfoItem>
  <InfoItem title="Item 2">Content 2</InfoItem>
</InfoGrid>

Bundle Impact: 4 components × ~2KB = ~8KB

After (Unified Component)

📄Mdx

<UnifiedInfo type="info" variant="alert">Basic info</UnifiedInfo>
<UnifiedInfo variant="card" title="Card">Card content</UnifiedInfo>
<UnifiedInfo variant="section" color="blue">Section content</UnifiedInfo>

<UnifiedInfo variant="grid" columns={2}>
  <UnifiedInfo variant="item" title="Item 1">Content 1</UnifiedInfo>
  <UnifiedInfo variant="item" title="Item 2">Content 2</UnifiedInfo>
</UnifiedInfo>

Bundle Impact: 1 component × ~1.8KB = ~1.8KB

Savings: 77% reduction in code for this use case!

Highlight - Similar callout component
UnifiedMetrics - For displaying metrics
Timeline - For temporal information

TypeScript Types

🔷TypeScript

interface UnifiedInfoProps {
  children: ReactNode
  title?: string
  type?: 'info' | 'warning' | 'success' | 'error' | 'tip' | 'note'
  variant?: 'alert' | 'card' | 'section' | 'item' | 'grid'
  color?: 'blue' | 'green' | 'purple' | 'red' | 'yellow' | 'indigo' | 'gray'
  icon?: React.ComponentType<{ className?: string }> | string
  className?: string
  columns?: 1 | 2 | 3 | 4
  gap?: 4 | 6 | 8
  keywords?: string[]
  context?: string
}

Browser Support

Chrome/Edge: ✅ Latest 2 versions
Firefox: ✅ Latest 2 versions
Safari: ✅ Latest 2 versions
Mobile: ✅ iOS 14+, Android 10+

Testing

The component includes comprehensive test coverage:

Unit tests for all variants
Accessibility tests (WCAG 2.1 AA)
Visual regression tests
Dark mode tests
Performance benchmarks

Use Ctrl + ← / → to navigate

First page

Last page

Back to Documentation Home