Jithvar UI - Professional React Component Library

A modern, enterprise-grade React component library with 34 production-ready components including 20 interactive data visualization charts, advanced form inputs, and data management tools.

📚 Documentation • 🎨 Live Demo • 💼 Jithvar Consultancy • 🐛 Report Bug • ✨ Request Feature

Built with ❤️ by Jithvar Consultancy Services - Your trusted partner for enterprise software development, UI/UX design, and digital transformation solutions.

🎯 Why Jithvar UI?

🚀 Features That Set Us Apart

✅ 34 Production-Ready Components - Comprehensive UI toolkit for modern web applications
✅ 20 Interactive Charts - Professional data visualization with React and TypeScript
✅ TypeScript First - 100% type-safe with complete IntelliSense support
✅ Zero Dependencies - Lightweight, pure React + SVG implementation (no external chart libraries)
✅ Tree Shakeable - Import only what you need, optimize your bundle size
✅ Responsive Design - Mobile-first approach, works beautifully on all screen sizes
✅ Interactive & Animated - Smooth transitions, hover tooltips, and engaging user experience
✅ Enterprise Ready - Battle-tested in production by Jithvar Consultancy Services
✅ SEO Optimized - Server-side rendering compatible for Next.js applications
✅ Accessible - WCAG compliant components with keyboard navigation support
✅ Customizable - Extensive theming and styling options to match your brand

💼 About Jithvar Consultancy Services

Jithvar UI is developed and maintained by Jithvar Consultancy Services, a leading provider of:

🎨 Custom Software Development - Enterprise web and mobile applications
📊 Data Visualization Solutions - Interactive dashboards and analytics platforms
🚀 Digital Transformation - Modernizing legacy systems with cutting-edge technology
💡 UI/UX Design Services - Beautiful, user-centric interface design
🔧 React & TypeScript Consulting - Expert guidance for your development team

Trusted by enterprises worldwide for delivering high-quality, scalable software solutions.

🌐 Visit Jithvar.com • 📧 Contact Us • 💼 Our Services

🚀 What's New in v1.1.0-beta.1

🆕 Enhanced JTable Features

✨ Custom API Parameter Mapping - Map table parameters to your API's expected names (e.g., pageSize → limit, page → offset)
🔄 Improved Skeleton Loading - Built-in skeleton loading within the table component itself
🎯 Better Floating Actions - Enhanced hover-based quick actions with improved positioning
🚫 Removed Search Mode Display - Cleaner filter interface without search mode indicators
📈 Performance Optimizations - Faster rendering and reduced bundle size

💻 Quick Example

import { JTable } from "jithvar-ui";

<JTable
  columns={columns}
  apiUrl="/api/users"
  apiParams={{
    page: "offset", // Custom mapping
    pageSize: "limit", // Your API's param names
    sortColumn: "sort_by",
    universalSearch: "q",
  }}
  floatingActions={{
    enabled: true,
    actions: [{ type: "copy" }, { type: "email" }, { type: "call" }],
  }}
/>;

📦 Components

📊 Charts (20)

Interactive data visualization components with tooltips and animations:

BarChart - Vertical/horizontal bars with 3D effects and gradients
PieChart - Circular proportional charts
DonutChart - Ring chart variant
LineChart - Multi-line trends with smooth curves
AreaChart - Filled area visualizations
GaugeChart - Needle-style progress indicators
ScatterPlot - X/Y correlation plots
BubbleChart - 3D data visualization (x, y, size)
RadarChart - Multi-axis spider/web charts
FunnelChart - Conversion funnel stages
HeatmapChart - Color-coded matrix (5 color schemes)
StackedBarChart - Vertical/horizontal stacked bars
WaterfallChart - Cumulative value changes
HistogramChart - Frequency distribution
CandlestickChart - Financial OHLC data
ComboChart - Mixed bar + line with dual Y-axes
BoxPlotChart - Statistical distribution
BulletChart - Performance vs target
GanttChart - Project timeline with dependencies
HeartbeatChart - Time-series with spike detection

🎛️ Inputs (10)

Advanced form controls with validation and customization:

DatePicker - Single date selection with constraints
DateRangePicker - Predefined and custom date ranges
SearchableSelect - API-based searchable dropdown (single/multi)
RangeSlider - Dual-handle min/max value selector
Checkbox - Customizable checkbox component
CheckboxList - Multiple checkbox group
Radio - Single radio button
RadioGroup - Radio button group with orientation
ToggleButtons - Segmented control buttons
MaskInput - Formatted input (phone, SSN, credit card, etc.)

📐 Layout (2)

Organize and structure your UI:

Tabs - Tabbed content with multiple orientations
Collapse - Accordion-style collapsible panels

📋 Data (1)

Advanced data management:

JTable - Full-featured data table with server-side operations
- Pagination, sorting, filtering
- Row selection with bulk actions
- URL state management (shareable filters)
- Floating row actions
- Universal and column-specific search

🚨 Feedback (1)

User notifications and alerts:

JAlerts - Beautiful alert/modal dialogs (Better than SweetAlert!)
- Multiple types (success, error, warning, info, question)
- Custom buttons and inputs
- Toast notifications
- Animations and positioning

🚀 Installation

# npm
npm install jithvar-ui

# yarn
yarn add jithvar-ui

# pnpm
pnpm add jithvar-ui

Requirements

React: 17.0.0+ (including React 18 and React 19)
React DOM: 17.0.0+
Next.js (optional): 13.x - 15.x
Node.js: 14.0.0+

# React 18 (Recommended)
npm install react@18 react-dom@18

# React 19 (Latest)
npm install react@19 react-dom@19

🌳 Tree-Shaking: Import Only What You Need

Jithvar UI is fully tree-shakeable! Modern bundlers automatically remove unused components. Your bundle will only include what you import.

// ✅ Import only what you need - automatic tree-shaking
import { DatePicker } from "jithvar-ui"; // ~15 KB
import { JTable } from "jithvar-ui"; // ~45 KB
import { BarChart, LineChart } from "jithvar-ui"; // ~16 KB

// ❌ Avoid wildcard imports (bundles everything)
import * as JithvarUI from "jithvar-ui"; // ~350 KB

Bundle Size Comparison:

Single component: 8-15 KB (gzipped)
Data Table: ~45 KB (gzipped)
All 34 components: ~350 KB (gzipped)

📖 Read the full Tree-Shaking Guide

📖 Quick Start

Charts

import { BarChart, PieChart, LineChart } from "jithvar-ui";

// Bar Chart
<BarChart
  data={[
    { label: "Jan", value: 65 },
    { label: "Feb", value: 78 },
    { label: "Mar", value: 90 }
  ]}
  title="Monthly Sales"
  width={600}
  height={400}
/>

// Pie Chart
<PieChart
  data={[
    { label: "Product A", value: 45 },
    { label: "Product B", value: 30 },
    { label: "Product C", value: 25 }
  ]}
  title="Market Share"
/>

// Line Chart
<LineChart
  data={[
    { x: "Jan", y: 30 },
    { x: "Feb", y: 45 },
    { x: "Mar", y: 60 }
  ]}
  title="Revenue Trend"
/>

Date Pickers

import { DatePicker, DateRangePicker } from "jithvar-ui";
import { useState } from "react";

function MyApp() {
  const [date, setDate] = useState(null);
  const [range, setRange] = useState({ startDate: null, endDate: null });

  return (
    <div>
      {/* Single Date Selection */}
      <DatePicker
        value={date}
        onChange={setDate}
        placeholder="Select a date"
        minDate={new Date()} // Only future dates
      />

      {/* Date Range with Presets */}
      <DateRangePicker
        value={range}
        onChange={setRange}
        placeholder="Select date range"
        showPresets={true} // Yesterday, Last 7 days, etc.
      />
    </div>
  );
}

Data Table (JTable)

import { JTable } from "jithvar-ui";

function UsersTable() {
  const columns = [
    { key: "id", label: "ID", sortable: true, width: "80px" },
    { key: "name", label: "Name", sortable: true, searchable: true },
    { key: "email", label: "Email", searchable: true },
    {
      key: "status",
      label: "Status",
      render: (value) => (
        <span
          style={{
            padding: "4px 8px",
            borderRadius: "4px",
            backgroundColor: value === "active" ? "#dcfce7" : "#fee2e2",
            color: value === "active" ? "#166534" : "#991b1b",
          }}
        >
          {value}
        </span>
      ),
    },
  ];

  return (
    <JTable
      columns={columns}
      apiUrl="/api/users"
      // Custom API parameter mapping
      apiParams={{
        page: "page",
        pageSize: "per_page",
        sortColumn: "sort_by",
        universalSearch: "search",
      }}
      // Features
      enableUniversalSearch={true}
      enableSelection={true}
      // Actions
      actions={[
        {
          icon: "👁️",
          tooltip: "View Details",
          onClick: (row) => console.log("View:", row),
          variant: "primary",
        },
      ]}
      // Floating actions (hover over cells)
      floatingActions={{
        enabled: true,
        actions: [
          {
            type: "copy",
            onClick: (row) => navigator.clipboard.writeText(row.name),
          },
          {
            type: "email",
            onClick: (row) => window.open(`mailto:${row.email}`),
          },
        ],
      }}
    />
  );
}

Form Inputs

import { SearchableSelect, RangeSlider, MaskInput, Checkbox } from "jithvar-ui";

function ContactForm() {
  const [country, setCountry] = useState(null);
  const [ageRange, setAgeRange] = useState([18, 65]);
  const [phone, setPhone] = useState("");
  const [subscribe, setSubscribe] = useState(false);

  const countries = [
    { value: "US", label: "United States" },
    { value: "CA", label: "Canada" },
    { value: "UK", label: "United Kingdom" },
  ];

  return (
    <form>
      {/* Searchable Dropdown */}
      <SearchableSelect
        options={countries}
        value={country}
        onChange={setCountry}
        placeholder="Select country"
        searchable={true}
      />

      {/* Range Slider */}
      <RangeSlider
        min={18}
        max={80}
        value={ageRange}
        onChange={setAgeRange}
        label="Age Range"
        showLabels={true}
      />

      {/* Masked Input */}
      <MaskInput
        mask="(999) 999-9999"
        value={phone}
        onChange={setPhone}
        placeholder="(555) 123-4567"
      />

      {/* Checkbox */}
      <Checkbox
        checked={subscribe}
        onChange={setSubscribe}
        label="Subscribe to newsletter"
      />
    </form>
  );
}

Alerts & Notifications

import { JAlerts } from "jithvar-ui";

function MyComponent() {
  const showSuccess = () => {
    JAlerts.success({
      title: 'Success!',
      message: 'Your data has been saved successfully.',
      duration: 3000 // Auto-close after 3 seconds
    });
  };

  const showConfirmation = async () => {
    const result = await JAlerts.confirm({
      title: 'Delete Item',
      message: 'Are you sure you want to delete this item?',
      confirmButton: 'Yes, Delete',
      cancelButton: 'Cancel',
      type: 'warning'
    });

    if (result.confirmed) {
      // User clicked "Yes, Delete"
      console.log('Item deleted');
    }
  };

  const showInput = async () => {
    const result = await JAlerts.input({
      title: 'Enter Your Name',
      message: 'Please provide your full name:',
      placeholder: 'John Doe',
      confirmButton: 'Submit'
    });

    if (result.confirmed) {
      console.log('User entered:', result.value);
    }
  };

  return (
    <div>
      <button onClick={showSuccess}>Show Success</button>
      <button onClick={showConfirmation}>Show Confirmation</button>
      <button onClick={showInput}>Show Input Dialog</button>
    </div>
  );
}

// Single Date Picker
<DatePicker
  value={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  minDate={new Date(2020, 0, 1)}
  maxDate={new Date()}
/>

// Date Range Picker with Predefined Ranges
<DateRangePicker
  startDate={startDate}
  endDate={endDate}
  onChange={(start, end) => {
    setStartDate(start);
    setEndDate(end);
  }}
/>

Searchable Select

import { SearchableSelect } from "jithvar-ui";

// Static Data
<SearchableSelect
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
  value={selected}
  onChange={setSelected}
  placeholder="Select an option"
/>

// API-based with Server Search
<SearchableSelect
  apiUrl="/api/users"
  searchKey="name"
  valueKey="id"
  labelKey="name"
  onChange={setSelected}
  minSearchLength={3}
  multiple
/>

Data Table

import { JTable } from "jithvar-ui";

<JTable
  apiUrl="/api/users"
  columns={[
    { key: "name", label: "Name", sortable: true, searchable: true },
    { key: "email", label: "Email", sortable: true },
    { key: "created_at", label: "Created", type: "date" },
  ]}
  enableRowSelection
  enableUrlState
  onRowSelect={(rows) => console.log(rows)}
/>;

Alerts & Notifications

import { JAlerts } from "jithvar-ui";

// Success Alert
JAlerts.success({
  title: "Success!",
  message: "Your action was completed successfully.",
  confirmButtonText: "Got it",
});

// Error Alert
JAlerts.error({
  title: "Error!",
  message: "Something went wrong. Please try again.",
});

// Confirmation Dialog
JAlerts.question({
  title: "Are you sure?",
  message: "This action cannot be undone.",
  confirmButtonText: "Yes, delete it",
  cancelButtonText: "Cancel",
  onConfirm: () => {
    // Delete action
  },
});

// Toast Notification
JAlerts.toast({
  message: "File uploaded successfully",
  type: "success",
  position: "top-right",
});

Form Inputs

import {
  RangeSlider,
  CheckboxList,
  RadioGroup,
  ToggleButtons,
  MaskInput
} from "jithvar-ui";

// Range Slider
<RangeSlider
  min={0}
  max={100}
  step={5}
  value={[20, 80]}
  onChange={(values) => console.log(values)}
/>

// Checkbox List
<CheckboxList
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
  value={selected}
  onChange={setSelected}
/>

// Radio Group
<RadioGroup
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
  value={selected}
  onChange={setSelected}
  orientation="horizontal"
/>

// Masked Input
<MaskInput
  mask="(999) 999-9999"
  value={phone}
  onChange={setPhone}
  placeholder="Phone Number"
/>

Layout Components

import { Tabs, Collapse } from "jithvar-ui";

// Tabs
<Tabs
  tabs={[
    { label: "Tab 1", content: <div>Content 1</div> },
    { label: "Tab 2", content: <div>Content 2</div> }
  ]}
  defaultActiveTab={0}
/>

// Collapse/Accordion
<Collapse
  items={[
    { title: "Section 1", content: <div>Content 1</div> },
    { title: "Section 2", content: <div>Content 2</div> }
  ]}
  allowMultiple={false}
/>

📚 Documentation

Run the Demo

See all components in action with our interactive demo:

git clone https://github.com/jithvar/jithvar-ui.git
cd jithvar-ui
npm install
npm run demo

Visit http://localhost:5173 to explore all components.

Component Categories

Category	Components	Description
📊 Charts	20 components	Interactive data visualization with tooltips and animations
🎛️ Inputs	10 components	Advanced form controls with validation
📐 Layout	2 components	Tabs and collapsible panels
📋 Data	1 component	Feature-rich data table
🚨 Feedback	1 component	Alerts and notifications

Advanced Features

JTable Data Table

✅ Server-side pagination - Handle millions of records
✅ Multi-column sorting - Sort by multiple columns
✅ Universal search - Search across all columns
✅ Column-specific filters - Date ranges, dropdowns, text search
✅ Range sliders - For numeric columns
✅ Row selection - Bulk actions with checkboxes
✅ URL state management - Shareable filtered results
✅ Floating row actions - Context-aware actions
✅ Responsive design - Mobile-friendly

Chart Features

✅ Interactive tooltips - Show values on hover
✅ Smooth animations - Engaging transitions
✅ Responsive sizing - Auto-scales to container
✅ Customizable colors - Match your brand
✅ Export capabilities - Save as image (coming soon)
✅ Accessibility - Screen reader friendly

🎨 Theming & Customization

All components support CSS modules and can be customized with CSS variables:

/* Override default colors */
.jv-button {
  --primary-color: #0070f3;
  --hover-color: #0051cc;
}

.jv-chart {
  --chart-color-1: #8884d8;
  --chart-color-2: #82ca9d;
  --chart-color-3: #ffc658;
}

🏗️ TypeScript Support

Jithvar UI is built with TypeScript and provides complete type definitions:

import type {
  ChartDataPoint,
  DateRange,
  SelectOption,
  JTableColumn,
  JAlertOptions,
} from "jithvar-ui";

const data: ChartDataPoint[] = [{ label: "Jan", value: 100 }];

const columns: JTableColumn[] = [
  { key: "name", label: "Name", sortable: true },
];

🌐 Next.js Integration

Jithvar UI works seamlessly with Next.js:

// app/page.tsx (Next.js 13+ App Router)
"use client";

import { BarChart, JAlerts } from "jithvar-ui";

export default function Page() {
  return (
    <div>
      <BarChart data={data} />
      <button onClick={() => JAlerts.success({ message: "Hello!" })}>
        Show Alert
      </button>
    </div>
  );
}

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch: git checkout -b feature/my-feature
Commit your changes: git commit -am 'Add new feature'
Push to the branch: git push origin feature/my-feature
Submit a pull request

📝 Changelog

See CHANGELOG.md for detailed release history.

📄 License

MIT License - see LICENSE file for details.

🌟 Support

🐛 Bug Reports: GitHub Issues
💬 Discussions: GitHub Discussions
📧 Email: contact@jithvar.com
🌐 Website: jithvar.com

🙏 Acknowledgments

Built with ❤️ by Jithvar Consultancy Services

Special thanks to all contributors and the React community!

⭐ Star us on GitHub • 📦 View on npm • 💼 Hire Us

Made with TypeScript, React, and dedication to quality.

Name		Name	Last commit message	Last commit date
Latest commit History 19 Commits
.github		.github
.vscode		.vscode
demo		demo
src		src
.gitignore		.gitignore
.npmignore		.npmignore
CHANGELOG.md		CHANGELOG.md
GETTING_STARTED.md		GETTING_STARTED.md
LICENSE		LICENSE
PRE_PUBLISH_CHECKLIST.md		PRE_PUBLISH_CHECKLIST.md
PUBLISHED_v1.1.0-beta.1.md		PUBLISHED_v1.1.0-beta.1.md
README.md		README.md
RELEASE_NOTES_v1.1.0-beta.1.md		RELEASE_NOTES_v1.1.0-beta.1.md
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

License

jithvar/jithvar-ui

Folders and files

Latest commit

History

Repository files navigation

Jithvar UI - Professional React Component Library

🎯 Why Jithvar UI?

🚀 Features That Set Us Apart

💼 About Jithvar Consultancy Services

🚀 What's New in v1.1.0-beta.1

🆕 Enhanced JTable Features

💻 Quick Example

📦 Components

📊 Charts (20)

🎛️ Inputs (10)

📐 Layout (2)

📋 Data (1)

🚨 Feedback (1)

🚀 Installation

Requirements

🌳 Tree-Shaking: Import Only What You Need

📖 Quick Start

Charts

Date Pickers

Data Table (JTable)

Form Inputs

Alerts & Notifications

Searchable Select

Data Table

Alerts & Notifications

Form Inputs

Layout Components

📚 Documentation

Run the Demo

Component Categories

Advanced Features

JTable Data Table

Chart Features

🎨 Theming & Customization

🏗️ TypeScript Support

🌐 Next.js Integration

🤝 Contributing

📝 Changelog

📄 License

🌟 Support

🙏 Acknowledgments

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages