1.1.23 • Published 3d ago

ezux

Licence

MIT

Version

1.1.23

Deps

Vulns

Weekly

Summary Dependency Versions

ezUX | Premium React UI Kit for Enterprise Dashboards

Current release: 1.1.20

High-performance React components for building modern enterprise applications. Powered by TanStack (Table, Query, Virtual) and built with TypeScript.

View ezux-showcase on GitHub | Live Showcase

NPM Version License Build Status

Why ezUX?

ezUX is a comprehensive component library designed for developers who need to build complex enterprise dashboards quickly. It focuses on performance, type-safety, and flexibility by being TanStack-first.

Key Features

TanStack First Architecture: Leverage the power of TanStack Table, TanStack Query, and TanStack Virtual for maximum performance and flexible data handling.
Enterprise-Grade Components: Specialized components for complex UI needs: Scheduler, Kanban Board, Pivot Table, and Virtualized Tree View.
Full TypeScript Support: 100% type-safe components with exported types for a seamless developer experience.
High-Performance Data Grid: Handle 100k+ rows with ease using integrated row and column virtualization.
Modern Styling: Styled with Tailwind CSS v4 and CSS variables for easy theming and dark mode support.
Responsive Typography: Semantic typography tokens, mobile scaling, and touch-friendly controls from mobile to desktop.
Accessibility (A11Y): Built with WAI-ARIA patterns to ensure your dashboard is accessible to everyone.

Core Components

EzTable: High-performance React Data Grid with grouping, filtering, and pivot capabilities.
EzScheduler: Interactive Timeline Scheduler with drag-and-drop and resource grouping.
EzKanban: Advanced Kanban Board with swimlanes and timeline integration.
EzTreeView: Efficient Virtualized Tree for handling deep nesting and large datasets.
EzSignature: Type-safe electronic signature component with smooth canvas rendering and validation.
EzLayout: Responsive orchestration engine for complex enterprise UI layouts.

Prerequisites

ezux is styled using Tailwind CSS v4. The library deliberately does not bundle Tailwind to avoid bloating your application or causing version conflicts.

You must have Tailwind CSS v4 installed and configured in your consumer application to use ezux components.

EzUX is developed and typechecked with TypeScript 7. Published declarations are validated with a clean TypeScript 6.0.3 compiler for consumers whose toolchains have not migrated yet. The runtime peer requirements are React 19.2 and React DOM 19.2.

Installation

npm install ezux

Quick Start

import { EzLayout, EzTable, useEzTable } from 'ezux';

function App() {
  const tableRes = useEzTable({
    data: myData,
    columns: myColumns
  });

  return (
    <EzLayout>
       <EzTable {...tableRes} />
    </EzLayout>
  );
}

Advanced Table Features

EzTable supports powerful features like grouping, filtering, and batch editing out of the box.

import { EzTable, useEzTable } from 'ezux';

function UserDashboard() {
  const table = useEzTable({
    data: users,
    columns: [
      { accessorKey: 'name', header: 'Name' },
      { accessorKey: 'role', header: 'Role', enableGrouping: true },
      { accessorKey: 'status', header: 'Status', enableColumnFilter: true },
    ],
    enableGrouping: true,
    enableFiltering: true,
    editSettings: {
      allowEditing: true,
      mode: 'Batch',
      primaryKey: 'id'
    }
  });

  return <EzTable {...table} onBatchSave={(changes) => console.log(changes)} />;
}

Documentation

Visit the Live Showcase for full documentation and interactive examples.

Theme colors use semantic CSS variables. Zinc is the default theme, with Orange, Blue, Green, and Rose alternatives. Components expose responsive typography utilities such as ez-text-body, ez-text-label, and ez-text-caption; prefer semantic tokens over hardcoded color classes when extending components.