A fully-typed, modular, and flexible MessageBox component for AristoByteUI, supporting multiple variants, types, border-radius options, and optional icons.
npm install @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.
``bashInstall via Yarn
yarn add -D @aristobyte-ui/message-box
🛠 Usage
`tsx
import { MessageBox } from '@aristobyte-ui/message-box';export default function App() {
return (
This is a success message!
);
}
`📂 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.
``- 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.
- 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.
MIT © AristoByte