@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

``bash


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

`tsx
import { MessageBox } from '@aristobyte-ui/message-box';

export default function App() {
return (



);
}
`

📂 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

`tsx

Warning! Check your input.

``

📊 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