@aristobyte-ui/message-box

A fully typed, customizable MessageBox component for React, supporting multiple variants, types, border-radius options, and optional icons. Built with AristoByteUI design tokens and SCSS modules, leveraging the @aristobyte-ui/utils package for icons.

📦 Installation

# Install via Yarn
yarn add -D @aristobyte-ui/message-box

# Or via npm
npm install -D @aristobyte-ui/message-box

# Or via pnpm
pnpm add -D @aristobyte-ui/message-box

🛠 Usage

import { MessageBox } from "@aristobyte-ui/message-box";

export default function App() {
  return (
    <div>
      <MessageBox variant="success" type="solid" radius="md" withIcon>
        This is a success message!
      </MessageBox>
    </div>
  );
}

📂 Presets Available

• Variants: default, info, warning, success, error
• Types: solid, outline, outline-dashed, no-outline, glowing
• Radius options: none, sm, md, lg, full
• Icons: optional via withIcon or custom via customIcon prop

🔧 Example in a Package

<MessageBox variant="warning" type="outline-dashed" radius="lg" withIcon>
  Warning! Check your input.
</MessageBox>

📊 Why This Matters

• Performance-first: Lightweight CSS ensures fast rendering and smooth transitions.
• Fully typed: TypeScript-first API ensures predictable usage and IDE autocomplete.
• AristoByteUI ready: Seamlessly integrates with design tokens and SCSS modules.
• Flexible: Supports multiple variants, types, border-radius options, and optional icons.

🏆 Philosophy

• Modular architecture: MessageBox component is fully composable.
• Declarative styling: SCSS modules keep styles maintainable and scoped.
• Strict typing & runtime flexibility: Props fully typed while allowing runtime overrides.
• Developer experience optimized: Easy to use with predictable behavior and minimal boilerplate.

📜 License

MIT © AristoByte

🛡 Shields Showcase