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/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/[email protected]"></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.