✨ Triva UI

A modern, customizable, and elegant UI component library
Build stunning interfaces effortlessly with beautifully styled, reusable React components.

🎨 Beautiful by default – Clean, accessible designs out of the box
⚙️ Fully customizable – Easily adapt styles and behavior to your needs
⚡ Built for speed – Lightweight components using MUI and Framer Motion

Version

📖 Live Storybook

Check out the interactive component documentation on Storybook:

👉 View triva-ui in Storybook

Implemented Technologies

Compatible With

• React >=16.8.0
• Typescript

Installation

You can install React Web Theme via npm:

  npm install triva-ui

Components

📚 List of components

• 🔧 Triva Modal
• 🔧 Triva Option Menu

TUIPagination

TUISearch

TUITable

TUITextField

📋 Triva Modal

The TrivaModal is a customizable and animated dialog box component built with React, MUI, and Framer Motion. It's ideal for creating modal with title , close icon or action buttons with smooth animations and flexible positioning.

🧠 Usage

import { TrivaModal } from "triva-ui";

<TrivaModal
  onClose={() => {}}
  primaryAction={<button>Agree</button>}
  secondaryAction={<button>Cancel</button>}
  size="md"
  title="Sample Modal"
>
    <h1>Modal information<h1>
</TrivaModal>;

📋 Triva Option Menu

The TrivaOptionMenu is a customizable and animated dropdown menu component built with React, MUI, and Framer Motion. It's ideal for creating context menus or action dropdowns with smooth animations and flexible positioning.

🧠 Usage

import { TrivaOptionMenu } from 'triva-ui';

const actions = [
  { label: "Edit", callback: () => console.log("Edit clicked") },
  { label: "Delete", callback: () => console.log("Delete clicked") },
];

<TrivaOptionMenu
  position="bottom-right" // or "bottom-left"
  actions={actions}
/>;

Hooks

useToggle

A custom hook which handles a boolean state variable and perform the toogle change of that

  const [ value, handleToggle ] = useToggle(false);

This hook will return an array which will have values like below index 0 :: boolean value which represent the value index 1 :: callback function which handles the toogle feature of that value. This function will not return anything.