---
title: "Dependencies"
description: "Minimal dependencies for the library."
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-09-09"
last_update: "2026-09-09"
time_minutes: 2
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/js/dependencies"
---

# Dependencies

The library is written in **pure vanilla JavaScript** but is designed to integrate seamlessly with popular external libraries when available. The code gracefully handles the absence of these dependencies.

> [!CHECK] Why Vanilla JS?
>
> See <http://vanilla-js.com>

The library has minimal dependencies and works with:

- Modern browsers (ES6+).
- jQuery (for some form functions).
- Bootstrap (for UI components).
- Bootbox (for dialogs).
- Notyf (for notifications, optional)

## Useful Dependencies

### Bootstrap

Used for tab management and modal functionality:

- Tab initialization and navigation (`src/tabs.js`).
- Modal instance management.
- Bootstrap classes and data attributes.

### jQuery

Used for enhanced form field functionality:

- Select2 integration for improved select fields.
- Datepicker integration for date inputs.
- Dynamic field initialization.

### Notyf

Enhanced notifications (falls back to basic alerts):

- Toast notifications with icons.
- Configurable duration and positioning.
- Multiple notification types.

### Bootbox

Enhanced dialog boxes:

- Confirmation dialogs.
- Prompt dialogs for field editing.
- Customizable dialog options.

## Graceful Degradation

The library includes conditional checks to ensure functionality even when external dependencies are not available:

```javascript
// Example: jQuery availability check.
if (typeof window.jQuery !== 'function') {
    console.error('window or jQuery is not available.');
    return;
}

// Example: Bootstrap availability check.
if (typeof bootstrap !== 'undefined') {
    new bootstrap.Tab(element).show();
}
```

## Installation Recommendations

For full functionality, include these dependencies in your project:

```html
<!-- Bootstrap CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>

<!-- jQuery (for enhanced form features) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Font Awesome (for icons in the UI) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" rel="stylesheet" />

<!-- Optional: Bootbox for dialogs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.4/bootbox.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.4/bootbox.locales.min.js"></script>

<!-- Optional: Notyf for notifications -->
<link href="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.js"></script>
```



---
Last updated on 09/09/2026