Dyvix UI

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

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"
          Class="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