Daris UI

Lightweight, zero-dependency, framework-agnostic UI library with delightful animations and optional developer humor mode.

Features

• Modal — Promise-based confirm dialogs with focus trap and backdrop
• Toast / Snackbar — Stacking notifications with 4 variants and positions
• Alert Banner — Inline dismissible alerts with animated collapse
• Button Enhancer — Ripple effects and loading states
• Theme System — CSS variables with light/dark presets and runtime switching
• Humor Mode — Optional witty messages and Easter eggs
• Accessible — ARIA roles, focus management, screen reader announcements
• Tiny — Under 15kb gzipped, zero dependencies
• Ultra-Customizable — Every visual property can be overridden via inline options
• Playground — Real-time visual configurator with live preview and code generation

Playground

Try the interactive playground to visually configure every component and get copy-paste-ready code:

npm run dev
# Open http://localhost:5173/playground/

The playground features:

• Live preview with light/dark background toggle
• Controls for every customization option
• Generated code that shows only non-default options
• Copy-to-clipboard with one click

Installation

npm install daris-ui

pnpm add daris-ui

yarn add daris-ui

CDN Usage

<link rel="stylesheet" href="https://unpkg.com/daris-ui/dist/style.css" />
<script src="https://unpkg.com/daris-ui/dist/daris-ui.iife.js"></script>
<script>
  const { modal, toast, alert, enhanceButtons, darisMood } = DarisUI;
</script>

Quick Start

import { modal, toast, alert, enhanceButtons, setTheme, darisMood } from 'daris-ui';

// Enhance buttons with ripple effect
enhanceButtons();

// Show a toast
toast.success('Saved successfully!');
toast.error('Something went wrong');
toast.warning('Check your input', { duration: 5000 });
toast.info('Update available', { position: 'bottom-left' });

// Open a confirm modal
const result = await modal.open({
  title: 'Delete item?',
  content: 'This action cannot be undone.',
  confirmText: 'Delete',
  cancelText: 'Cancel',
});

if (result.confirmed) {
  // User confirmed
}

// Create an inline alert
alert.create('Changes saved!', document.getElementById('container'), {
  variant: 'success',
  dismissible: true,
});

API Reference

toast

Options:

modal

Options:

alert

Options:

createButton(options?)

Create a fully configured button element.

Options:

enhanceButtons(options?)

Adds ripple effects to buttons with class du-btn or data-du-btn attribute.

setLoading(button, loading)

Toggle loading spinner state on a button element.

Advanced Customization

Override any visual property per-instance using inline style options:

toast.success('Custom styled!', {
  backgroundColor: '#1a1a2e',
  textColor: '#e0e0e0',
  borderColor: '#6366f1',
  borderWidth: '2px',
  borderRadius: '16px',
  shadow: '0 8px 32px rgba(99, 102, 241, 0.3)',
  fontFamily: '"Fira Code", monospace',
  progressBar: true,
  animation: 'bounce',
});

modal.open({
  title: 'Styled Modal',
  content: 'Fully customized appearance.',
  backgroundColor: '#0f172a',
  textColor: '#f1f5f9',
  overlayBlur: '4px',
  confirmColor: '#22c55e',
  animation: 'slideDown',
  headerBorder: true,
  footerBorder: true,
});

Theming

Daris UI uses CSS custom properties for all visual styling.

Presets

import { setPreset } from 'daris-ui';

setPreset('dark');  // Switch to dark theme
setPreset('light'); // Switch to light theme

Custom Theme

import { setTheme } from 'daris-ui';

setTheme({
  primary: '#6366f1',
  primaryHover: '#4f46e5',
  radius: '12px',
  fontFamily: 'Inter, sans-serif',
});

All available theme properties:

Humor Mode

import { darisMood } from 'daris-ui';

darisMood.enableHumor();  // Activate humor mode
darisMood.disableHumor(); // Deactivate

darisMood.isHumorEnabled(); // Check status

When enabled:

• Toasts include witty messages
• Playful console messages appear
• Trigger 10 rapid toasts for a hidden Easter egg

Humor mode is fully tree-shakeable and adds zero overhead when disabled.

Accessibility

• All modals use role="dialog" with aria-modal="true" and aria-labelledby
• Focus is trapped within open modals and restored on close
• Toasts use role="alert" with aria-atomic and are announced via a live region
• Alert banners use role="alert"
• Buttons support aria-busy during loading state
• All interactive elements have visible :focus-visible outlines
• prefers-reduced-motion disables all animations

Bundle Size

The full library is under 15kb gzipped. Individual components are tree-shakeable — import only what you need.

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge). ES2020 target.

Roadmap

• Interactive Playground / Emulator
• Ultra-customizable components (inline style overrides)
• Progress bars for toast and alert
• Custom toast action buttons
• Multiple animation variants
• Tooltip component
• Drawer / slide-over panel
• Plugin system
• Community themes

Contributing

1. Fork the repository
2. Create a feature branch
3. Write TypeScript strict code with ARIA support
4. Test with screen readers
5. Submit a pull request

License

MIT