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:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -am 'Add new feature'
4. Push to the branch: git push origin feature/my-feature
5. 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: [email protected]
• 🌐 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.