dyvix-ui

Dyvix UI

Dyvix is an open source, modern, config-driven, animated component UI library. Beautiful by default, customizable by design.

Features

• 🎨 Multiple themes - Singularity, Blade, Neon, Aurora, Sunset, Ocean, Forest, Midnight.
• ⚡ Smart JSON Caching (SJC) - Multi-tier (L1, L2, L3) system for near-zero latency delivery.
• ✨ Rich animations - bubble, fade, zoom, unfold, glitch.
• 🔧 Config-driven components - Flexible props for forms, modals, toasts
• ♿ Accessible - Built with accessibility in mind
• 📦 Lightweight - Minimal dependencies

React

npm i dyvix-ui

Basic usage

import { Modal } from 'dyvix-ui'

function ModalExample()
{

  return(
        <Modal
          title="Register"
          type="form"
          animation="bubble" // bubble | fade | zoom | unfold | glitch
          Id="register-modal"
          className="modal"
          theme='Singularity' // Singularity | Industrial | Ember | Frost | Blade
          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)}
        />
    )
}

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

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

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

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