React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

StoreMessage

Message box component for displaying important information or notifications

Interactive Playground

Customize the message content and see the changes in real-time

This is an important message for the user.

Common Use Cases

Typical message box implementations

Information Message

Your account has been successfully created. Please check your email to verify your account.

Important Notice

Important: Your subscription will renew automatically on December 1st, 2024. You can cancel anytime from your account settings.

Terms & Conditions

By continuing, you agree to our Terms of Service and Privacy Policy.

Promotional Message

🎉 Limited time offer! Get 20% off your first purchase with code WELCOME20. Offer expires in 48 hours.

Multi-line Content

Before you proceed:

  • Make sure you have a stable internet connection
  • Ensure your payment information is up to date
  • Review your order details carefully

Short Notice

Free shipping on orders over $50!

Features

Key characteristics of the StoreMessage component

  • ✓Bordered Container: Displays content in a bordered box with rounded corners for visual separation
  • ✓Flexible Content: Accepts any React node as children, including text, HTML, and other components
  • ✓Theme Integration: Uses theme colors for consistent styling across all themes
  • ✓Responsive Padding: Includes comfortable padding (p-4) for readability
  • ✓Simple & Lightweight: Minimal component with no complex state or interactions

API Reference

Props

children

React.ReactNode - The message content to display. Can include text, HTML elements, or other React components

Usage Notes

  • Use StoreMessage to display important information, notices, or alerts to users
  • The component uses theme colors (border-fg-primary, text-fg-primary) for consistent styling
  • Content is styled with small body text (style-text-body-sm) for readability
  • Perfect for terms acceptance, promotional messages, or informational notices
  • Can contain rich content including links, lists, and formatted text