dyvix-ui

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

npm i dyvix-ui

Basic usage

Form Modal Engine

import { Modal } from 'dyvix-ui';

function ModalExample() {
  return (
    <Modal
      title="Register"
      type="form"
      animation="bubble" // bubble | fade | zoom | unfold | glitch | pulse | aurora | drop | flip | glide | drift | float | swing
      Id="register-modal"
      className="modal"
      theme="Singularity" // Singularity | Industrial | Ember | Frost | Blade | Neon | Aurora | Sunset | Ocean | Forest | Midnight | Crimson | Obsidian
      elements={[
        {
          type: 'text',
          placeholder: ['First Name', 'Last Name'],
          id: 'name',
          name: ['firstName', 'lastName'],
          amount: 2
        },
        {
          type: 'email',
          placeholder: 'Email',
          validation: ['email'],
          id: 'email',
          name: 'email',
          amount: 1
        },
        {
          type: 'password',
          placeholder: 'Password',
          validation: ['password'],
          id: 'password',
          name: 'password',
          amount: 1
        }
      ]}
      onSubmit={(data) => console.log(data)}
    />
  );
}

Global Notifications

import { DyvixToastContainer, dyvixToast } from 'dyvix-ui';

function ToastExample() {
  function notify() {
    dyvixToast.success('This is a new message');
  }

  return (
    <>
      <DyvixToastContainer
        position="top-right"
        duration={5000}
        animation="fade"
      />
      <button onClick={notify}>Notify</button>
    </>
  );
}

Dual-API Table support

Config-driven table mode includes an exclusive realtime multi-column sorting.

import {
  DyvixTable,
  DyvixTableHeader,
  DyvixTableBody,
  DyvixTableRow,
  DyvixTableHead,
  DyvixTableCell
} from 'dyvix-ui';

function Dual_API_Table_Example() {
  return (
    <>
      {/* Config-driven Mode */}
      <DyvixTable
        theme="Crimson"
        columns={[
          { key: 'name', label: 'Name', sortable: true },
          { key: 'type', label: 'Type' }
        ]}
        data={[
          { name: 'Lion', type: 'Wild' },
          { name: 'Hawk', type: 'Bird' }
        ]}
      />

      {/* Composable Mode */}
      <DyvixTable>
        <DyvixTableHeader>
          <DyvixTableRow>
            <DyvixTableHead>Name</DyvixTableHead>
            <DyvixTableHead>Type</DyvixTableHead>
          </DyvixTableRow>
        </DyvixTableHeader>
        <DyvixTableBody>
          <DyvixTableRow>
            <DyvixTableCell>Lion</DyvixTableCell>
            <DyvixTableCell>Wild</DyvixTableCell>
          </DyvixTableRow>
        </DyvixTableBody>
      </DyvixTable>
    </>
  );
}

Full Documentation & Live Demos: dyvix-ui.vercel.app

Contributing

Feel free to open meaningful issues and PRs. Check our contributing guide and open contribution trackers:

• Add new themes
• Add new animations