@shared-solid/alert

Framework-agnostic Alert component for React, SolidJS, and Remix.

Installation

npm install @shared-solid/alert
# or
yarn add @shared-solid/alert
# or
pnpm add @shared-solid/alert

Usage

React

import { ReactAlert } from '@shared-solid/alert/react';
import '@shared-solid/alert/style.css';

function App() {
  return (
    <div>
      <ReactAlert variant="success" title="Success!" description="Operation completed successfully" />
      <ReactAlert variant="error" title="Error!" description="Something went wrong" closable onClose={() => console.log('closed')} />
      <ReactAlert variant="warning" title="Warning!" description="Please review your input" />
      <ReactAlert variant="info" title="Info" description="Here's some useful information" />
    </div>
  );
}

SolidJS

import { Alert } from '@shared-solid/alert/solid';
import '@shared-solid/alert/style.css';

function App() {
  return (
    <div>
      <Alert variant="success" title="Success!" description="Operation completed successfully" />
      <Alert variant="error" title="Error!" description="Something went wrong" closable onClose={() => console.log('closed')} />
      <Alert variant="warning" title="Warning!" description="Please review your input" />
      <Alert variant="info" title="Info" description="Here's some useful information" />
    </div>
  );
}

Props

• variant: 'info' | 'success' | 'warning' | 'error' (default: 'info')
• title: string - Alert title
• description: string - Alert description
• closable: boolean (default: false)
• onClose: () => void - Close handler
• children: ReactNode - Alert content
• class: string - Additional CSS classes

Bundle Optimization

🚀 Optimized for production:

• React bundle: ~1KB JS + ~3.5KB CSS
• SolidJS bundle: ~13KB JS + ~3.5KB CSS
• Tree-shakable: Only load what you need
• Minified: Production-ready builds

CSS Files

• style.css - Alert styles (works for both React and SolidJS)

Examples

Success Alert

<ReactAlert variant="success" title="Success!" description="Your changes have been saved" />

Error Alert with Close

<ReactAlert variant="error" title="Error!" description="Failed to save changes" closable onClose={handleClose} />

Warning Alert

<ReactAlert variant="warning" title="Warning!" description="Please check your input" />

Info Alert

<ReactAlert variant="info" title="Info" description="This is a helpful tip" />