EzUX Showcase

The First Advanced Component Library designed for modern enterprise applications.

EzUX Showcase is a comprehensive demonstration platform for the EzUX library. It features advanced UI components including high-performance DataTables, Schedulers, Kanban boards, and complex layout systems, all optimized for enterprise-grade performance and developer experience.

✨ Key Features

• 🚀 Built with React 19 & Vite: Ultra-fast development and build times.
• 🧩 Advanced Enterprise Components:
  • EzLayout: AppShell supporting theming, multiple languages (including RTL), Light/Dark Mode, Sign In/Signout, Sidebar, Header, Footer, and Main content areas.
  • EzTable: High-performance DataTable with Excel-like Filter, Sort, Grouping, Pivot, CRUD operations, and Virtualization via TanStack Table.
  • EzScheduler: Advanced resource management with Day, Week, Month, and Timeline views, plus Group-by-Resources and workday configurations.
  • EzKanban: Drag-and-drop workflow management with swimlanes and timeline integration.
  • EzFlow: Customizable Drag-and-Drop Visual Workflow Designer.
  • EzTreeView: Tri-state TreeView capable of loading thousands of hierarchical nodes with customizable icons.
  • EzSignature: Digital signature capture with PDF export support.
• 🧭 Type-Safe Routing: Fully integrated with TanStack Router.
• 🎨 Modern Aesthetics: Sleek, responsive designs using Tailwind CSS 4.0.
• 🧪 E2E Testing: Robust test coverage with Playwright.
• 🌍 Enterprise Ready: Designed for i18n, RTL, and strict accessibility compliance.

🛠️ Technology Stack

• Framework: React 19
• Build Tool: Vite 8
• Routing: TanStack Router
• State & Data: TanStack Query & TanStack Store
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Testing: Playwright

🚀 Getting Started

Prerequisites

• Node.js (v24 or higher recommended)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/zee24-cmd/ezux_showcase.git
   cd ezux_showcase

2. Install dependencies:

   npm install

Development

Run the development server:

npm run dev

The app will be available at http://localhost:3001.

Build

Create a production-ready build:

npm run build

Testing

Run end-to-end tests:

npm run test:e2e

📂 Project Structure

• src/components: Reusable UI components and showcase wrappers.
• src/demos: Individual component demonstrations and complex use cases.
• src/routes: File-based routing structure.
• src/data: Mock data and factories for demonstrations.
• tests/: Playwright E2E test suites.

📄 License

This project is authored by Zeeshan Sayed. Contact for licensing details.

Built with ❤️ by Zeeshan Sayed