⚡ Dev-Alert

A modern, framework-agnostic UI library with 30+ components - icons, toasts, modals, charts, preloaders, and more. Clean design, smooth animations, zero dependencies.

Features

• 🎨 40+ SVG Icons - Crisp, scalable icons with animations (spin, pulse, bounce, blink, float)
• 🔔 Toast Notifications - Stackable toasts with progress bars and hover-to-pause
• 💬 Alert Modals - Beautiful dialogs with animated icons and backdrop blur
• 📊 Charts - Bar, line, pie/donut charts and sparklines
• ⏳ Preloaders - 8 loader types (spinner, dots, bars, ring, ripple, square, cube, orbit)
• 🦴 Skeleton Loaders - Placeholder animations while content loads
• 🎉 Confetti - Celebration effects
• 📝 Form Elements - Toggles, inputs with validation, floating labels
• 🗂️ Layout - Tabs, accordion, modals, drawers, stepper
• 👤 Data Display - Avatars, timeline, empty states, stat cards
• 🔤 35+ Fonts - Gothic, handwritten, futuristic, monospace, modern
• ✨ Text Animations - Slide, fade, blur, typewriter, marquee
• 🌙 Dark Mode - Built-in theme switching
• ⌨️ Keyboard Shortcuts - Global hotkey handler
• 🎯 Framework Agnostic - Works with Vanilla JS, React, Vue, Laravel Blade
• 📦 Zero Dependencies - Lightweight and self-contained

Installation

npm install dev-alert

Or via CDN:

<link rel="stylesheet" href="https://unpkg.com/dev-alert/dist/deval.css">
<script src="https://unpkg.com/dev-alert/dist/deval.js"></script>

Quick Start

Vanilla JS

<link rel="stylesheet" href="node_modules/dev-alert/dist/deval.css">
<script src="node_modules/dev-alert/dist/deval.js"></script>

<script>
  // Toast notifications
  Deval.toast.success('Saved successfully!');
  Deval.toast.error('Something went wrong');

  // Alert modals
  Deval.alert.success('Profile updated!', { title: 'Success' });

  // Preloaders
  Deval.preloader.show({ type: 'spinner', text: 'Loading...' });
  setTimeout(() => Deval.preloader.hide(), 2000);

  // Charts
  Deval.chart.bar('#chart', [
    { label: 'Jan', value: 65 },
    { label: 'Feb', value: 85 }
  ]);

  // Icons
  Deval.renderIcon('home', '#icon-container', { size: 'lg', animation: 'pulse' });

  // Dark mode
  Deval.theme.toggle();
</script>

React

import { toast, alert, preloader, renderIcon } from 'dev-alert';
import 'dev-alert/dist/deval.css';

function App() {
  useEffect(() => {
    renderIcon('home', '#icon-container');
  }, []);

  const handleSave = () => {
    preloader.show({ type: 'dots', text: 'Saving...' });
    // ... save logic
    preloader.hide();
    toast.success('Saved!');
  };

  return (
    <div>
      <div id="icon-container"></div>
      <button onClick={handleSave}>Save</button>
    </div>
  );
}

Vue

<template>
  <div id="icon-container"></div>
  <button @click="save">Save</button>
</template>

<script setup>
import { onMounted } from 'vue';
import { toast, preloader, renderIcon } from 'dev-alert';
import 'dev-alert/dist/deval.css';

onMounted(() => renderIcon('home', '#icon-container'));

const save = () => {
  preloader.show({ type: 'spinner' });
  // ... save logic
  preloader.hide();
  toast.success('Saved!');
};
</script>

Laravel Blade

{{-- In layout --}}
<link rel="stylesheet" href="{{ asset('vendor/dev-alert/deval.css') }}">
<script src="{{ asset('vendor/dev-alert/deval.js') }}"></script>

{{-- In view --}}
<button onclick="Deval.toast.success('Done!')">Save</button>

@if(session('success'))
<script>Deval.toast.success('{{ session('success') }}')</script>
@endif

API Reference

Toast Notifications

Deval.toast.success(message, options);
Deval.toast.error(message, options);
Deval.toast.warning(message, options);
Deval.toast.info(message, options);
Deval.dismissAllToasts();

// Options: { title, duration: 5000, position: 'top-right', closable: true, showProgress: true }

Alert Modals

await Deval.alert.success(message, options);
await Deval.alert.error(message, options);
await Deval.alert.confirm(message, options); // Returns true/false

// Options: { title, confirmText: 'OK', cancelText: 'Cancel', showCancel: false }

Preloaders

const loader = Deval.preloader.show({ 
  type: 'spinner',  // spinner, dots, dots-pulse, bars, ring, ripple, square, orbit, bar
  text: 'Loading...',
  theme: 'light',   // light, dark, transparent
  color: 'info'     // info, success, error, warning
});
loader.hide();
loader.setText('Almost done...');

// Inline loader
Deval.preloader.render('#container', 'spinner', { size: 'lg' });

Charts

Deval.chart.bar('#container', [{ label: 'Jan', value: 65 }], { height: 200 });
Deval.chart.line('#container', data, { width: 400, height: 200 });
Deval.chart.pie('#container', data, { size: 200, donut: true, centerLabel: 'Total' });
Deval.chart.sparkline('#container', [10, 20, 30], { type: 'success' });

Icons

Deval.renderIcon(name, container, { 
  size: 'md',        // xs, sm, md, lg, xl
  color: 'success',  // success, error, warning, info, muted
  animation: 'spin', // spin, pulse, bounce, shake, blink, float, wiggle, heartbeat
  interactive: true
});
Deval.getIconNames(); // Returns all icon names

Theme

Deval.theme.init();        // Initialize (auto-detects preference)
Deval.theme.toggle();      // Toggle dark/light
Deval.theme.set('dark');   // Set specific theme
Deval.theme.get();         // Get current theme

More Components

// Snackbar
Deval.snackbar.show('Item deleted', { actionText: 'Undo', onAction: () => {} });

// Progress
Deval.progress.linear('#el', { value: 50, type: 'success' });
Deval.progress.circular('#el', { value: 75, size: 80 });

// Skeleton
Deval.skeleton.group('#el', 'card'); // card, list, text

// Confetti
Deval.confetti.show();

// Tooltip & Popover
Deval.tooltip.create('#el', 'Tooltip text', 'top');
Deval.popover.create('#el', { title: 'Title', content: 'Content' });

// Dropdown & Context Menu
Deval.dropdown.create('#trigger', [{ icon: 'edit', text: 'Edit', onClick: () => {} }]);
Deval.contextMenu.create('#area', menuItems);

// Tabs & Accordion
Deval.tabs.create('#el', [{ label: 'Tab 1', content: '<p>Content</p>' }]);
Deval.accordion.create('#el', [{ title: 'Section', content: 'Content' }]);

// Modal & Drawer
Deval.modal.show({ title: 'Title', content: 'Content', footer: '<button>OK</button>' });
Deval.drawer.show({ title: 'Menu', content: 'Content', position: 'left' });

// Stepper
const stepper = Deval.stepper.create('#el', [{ label: 'Step 1' }, { label: 'Step 2' }]);
stepper.next(); stepper.prev();

// Avatar
Deval.avatar.create('#el', { name: 'John Doe', status: 'online' });
Deval.avatar.group('#el', users, { max: 4 });

// Timeline
Deval.timeline.create('#el', [{ title: 'Event', time: '2h ago', type: 'success' }]);

// Stat Card
Deval.stat.create('#el', { label: 'Revenue', value: '$45k', trend: { value: '+20%', direction: 'up' } });

// Clipboard
Deval.clipboard.createButton('#el', 'npm install dev-alert');

// Keyboard Shortcuts
Deval.keyboard.register('ctrl+s', () => save(), 'Save');

// Text Animation
Deval.textAnimate.animate('#el', { animation: 'typewriter', duration: 2000 });
Deval.textAnimate.marquee('#el', 'Scrolling text...', { speed: 15 });

// Toggle
Deval.toggle.create('#el', { label: 'Dark mode', onChange: (v) => {} });

CSS Classes

Buttons

<button class="deval-btn deval-btn--primary">Primary</button>
<button class="deval-btn deval-btn--success">Success</button>
<button class="deval-btn deval-btn--danger">Danger</button>
<button class="deval-btn deval-btn--outline">Outline</button>
<button class="deval-btn deval-btn--loading">Loading</button>

Badges

<span class="deval-badge deval-badge--success">Active</span>
<span class="deval-badge deval-badge--error">Offline</span>

Fonts

<p class="deval-font-gothic deval-text-3xl">Gothic Text</p>
<p class="deval-font-lobster deval-text-2xl">Handwritten</p>
<p class="deval-font-orbitron">Futuristic</p>
<p class="deval-font-fira">Monospace Code</p>

Browser Support

Chrome, Firefox, Safari, Edge (last 2 versions)

License

MIT