Dyvix UI
Dyvix is an open source, modern, config-driven, animated component UI library. Beautiful by default, customizable by design.
## Features
- 🎨 **13 global themes** - `Singularity`, `Industrial`, `Ember`, `Frost`, `Blade`, `Neon`, `Aurora`, `Sunset`, `Ocean`, `Forest`, `Midnight`, `Crimson`, `Obsidian` (Component coverage varies between releases).
- ⚡ **Smart JSON Caching (SJC)** - Multi-tier (L1, L2, L3) system for near-zero latency delivery.
- ✨ **13 animation presets** - `fade`, `bubble`, `zoom`, `unfold`, `glitch`, `pulse`, `aurora`, `drop`, `flip`, `glide`, `drift`, `float`, `swing`.
- 🔧 **Config-driven & composable APIs** - Dual mode support where it makes sense.
- 🗂️ **Sortable tables** - Multi-column sorting.
- 🧩 **Modal engine** - JSON-driven with validation, presets, file upload, radio, and more.
- ♿ **Accessible** - ARIA attributes and keyboard navigation throughout.
- 📦 **37.9 kB packed** - Lean, headless-first architecture with zero bloat.
## Why Dyvix?
Unlike traditional component libraries, Dyvix focuses on config-driven workflows where they provide the most value, with optional animation and theme systems that can be customized without rewriting component logic.
# React
```bash
npm i dyvix-ui
```
## Basic usage
### Form Modal Engine
```jsx
import { Modal } from 'dyvix-ui';
function ModalExample() {
return (
console.log(data)}
/>
);
}
```
### Global Notifications
```jsx
import { DyvixToastContainer, dyvixToast } from 'dyvix-ui';
function ToastExample() {
function notify() {
dyvixToast.success('This is a new message');
}
return (
<>
);
}
```
### Dual-API Table support
Config-driven table mode includes an exclusive realtime multi-column sorting.
```jsx
import {
DyvixTable,
DyvixTableHeader,
DyvixTableBody,
DyvixTableRow,
DyvixTableHead,
DyvixTableCell
} from 'dyvix-ui';
function Dual_API_Table_Example() {
return (
<>
{/* Config-driven Mode */}
{/* Composable Mode */}
Name
Type
Lion
Wild
);
}
```
Full Documentation & Live Demos: [dyvix-ui.vercel.app](https://dyvix-ui.vercel.app/)
## Contributing
Feel free to open meaningful issues and PRs. Check our [contributing guide](CONTRIBUTING.md) and open contribution trackers:
- Add new [themes](https://github.com/younisdev/dyvix-ui/issues/14)
- Add new [animations](https://github.com/younisdev/dyvix-ui/issues/15)