Overview

A Sanskrit word, "तत्त्व", meaning "Element", is a Library of custom HTML elements.

A set of custom HTML elements / Web Components to power various functionality for our projects. Powering functionality for our WordPress Blocks and Formats plugins.

Elements

Tatva provides a set of easy-to-use web components that work with any framework:

Element	Description
tatva-marker	Highlight/underline animation for text
tatva-pulse	Pulsing indicator for labels/badges
tatva-text-animation	Text reveal and animation effects
tatva-image-compare	Image comparison (before/after) slider
tatva-infotip	Small tooltip / infotip component

Requirements

Tatva uses Floating UI internally to power advanced and reliable element positioning (for example, in components like tatva-infotip):

<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.7.3"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.3"></script>

Installation

via CDN

<script type="module" src="https://unpkg.com/@lubusin/tatva/dist/index.js"></script>

via NPM

npm install @lubusin/tatva

Usage

Load All Components

// main.js
import '@lubusin/tatva/index.js';

Load a Single Component

import '@lubusin/tatva/tatva-marker.js';

Examples

Marker

<tatva-marker type="underline" color="#dc143c" animation animation-duration="5s">
  Highlighted text
</tatva-marker>

Pulse

<tatva-pulse
  position="superscript"
  size="0.75rem"
  color="#1e90ff"
  gap="8px"
  superscript-offset="-0.5em"
>
  Pro
</tatva-pulse>

Meet Your Artisans

LUBUS is a web design agency based in Mumbai.

License

Tatva is open-sourced licensed under the MIT License.