ebench-campus-components

A comprehensive, production-grade React UI component library designed for the eBench Campus platform (Admin, Student, Faculty, and Operations portals).

• 🎨 Dynamic CSS Semantic Theming (Instant Blue, Green, Purple, Orange presets + Dark mode)
• ⚡ Next.js & Vite Ready (Pre-configured with "use client", ESM, and full SSR compatibility)
• ♿ Accessible & Fully Typed (TypeScript definitions included for every component)
• 📦 Zero-Configuration Bundled Styles (All design tokens and styles in a single CSS file)

📦 Installation

In your consumer application (Admin or Student repo), install only this package:

npm install ebench-campus-components

Peer Dependencies: Requires react >= 18 and react-dom >= 18.

🚀 Quick Setup

1. Import Styles Globally

In your application root (src/main.tsx, src/App.tsx, or Next.js app/layout.tsx):

import "ebench-campus-components/styles.css";

2. Wrap with ThemeProvider

Wrap your app root with <ThemeProvider>:

"use client";

import React from "react";
import "ebench-campus-components/styles.css";
import { ThemeProvider } from "ebench-campus-components";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider defaultTheme="blue" storageKey="ebench-theme">
      {children}
    </ThemeProvider>
  );
}

🎨 Global Theming (Admin vs. Student)

Set your application's global theme in seconds without changing component code:

| Portal | Recommended Theme | Preset Value | | :--- | :--- | :--- | | Student Portal | Blue Theme | <ThemeProvider defaultTheme="blue"> | | Admin Portal | Green Theme | <ThemeProvider defaultTheme="green"> | | Faculty Portal | Purple Theme | <ThemeProvider defaultTheme="purple"> | | Admissions / Ops| Orange Theme | <ThemeProvider defaultTheme="orange"> |

In-App Theme Switcher Component

Allow users to toggle between presets dynamically:

import { ThemeSwitcher, useTheme } from "ebench-campus-components";

function Header() {
  const { theme, setTheme } = useTheme();

  return (
    <header className="flex justify-between items-center p-4 border-b">
      <h1 className="font-bold text-lg">eBench Portal</h1>
      <ThemeSwitcher />
    </header>
  );
}

📖 Component Catalog & Code Examples

1. Buttons

Supports primary, secondary, and danger variants, plus sizing and custom styling overrides:

import { Button } from "ebench-campus-components";

export function ButtonExamples() {
  return (
    <div className="flex gap-3">
      <Button variant="primary" size="md">Submit Exam</Button>
      <Button variant="secondary" size="md">Save Draft</Button>
      <Button variant="danger" size="sm">Cancel Registration</Button>
      <Button disabled>Disabled Action</Button>
    </div>
  );
}

2. Form Field & Input Field

Accessible input wrappers with floating labels, helper text, and validation error messages:

import { FormField, InputField } from "ebench-campus-components";

export function FormExamples() {
  return (
    <div className="space-y-4 max-w-sm">
      {/* Standard Form Field with helper or error */}
      <FormField
        label="Student Roll Number"
        placeholder="e.g. STU-2024-001"
        hint="Enter your 10-digit campus ID"
      />

      {/* Advanced InputField with clear button and status */}
      <InputField
        label="Official Email"
        type="email"
        placeholder="[email protected]"
        clearable
      />
    </div>
  );
}

3. Password Input (with Strength Meter)

Includes toggleable visibility and built-in password security requirements:

import { PasswordInput } from "ebench-campus-components";

export function PasswordExample() {
  return (
    <div className="max-w-sm">
      <PasswordInput
        label="Create Account Password"
        showStrength
        placeholder="Enter a secure password"
      />
    </div>
  );
}

4. OTP / PIN Input

Multi-box OTP verification with auto-focus, paste handling, and mask support:

import { OtpInput } from "ebench-campus-components";

export function OtpExample() {
  const handleComplete = (code: string) => {
    console.log("Verified OTP:", code);
  };

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">Enter 6-Digit Verification Code</label>
      <OtpInput length={6} size="md" onComplete={handleComplete} />
    </div>
  );
}

5. Cards (CustomCard, FlexibleCard, SimpleCard)

Versatile card layouts for metrics, course tiles, profiles, and dashboard sections:

import { CustomCard, Button } from "ebench-campus-components";

export function CardExample() {
  return (
    <CustomCard
      title="Advanced Mathematics 101"
      description="Prof. Jennifer Anderson • Room 302"
      topMeta="Batch 2024-2025"
      variant="elevated"
      interactive
      footer={
        <div className="flex justify-between items-center w-full">
          <span className="text-sm text-muted-foreground">32 Students Enrolled</span>
          <Button size="sm">View Course</Button>
        </div>
      }
    >
      <p className="text-sm">Next lecture begins Monday at 09:00 AM.</p>
    </CustomCard>
  );
}

6. Breadcrumbs

Breadcrumb navigation with icon support and auto-truncation:

import { AppBreadcrumb } from "ebench-campus-components";

export function BreadcrumbExample() {
  const items = [
    { label: "Dashboard", href: "/" },
    { label: "Academics", href: "/academics" },
    { label: "Gradebook", isCurrentPage: true },
  ];

  return <AppBreadcrumb items={items} />;
}

7. Pill Tabs Navigation

Modern pill-style tabs with badge counts and icons:

import { AppPillTabs } from "ebench-campus-components";
import { useState } from "react";

export function TabsExample() {
  const [activeTab, setActiveTab] = useState("all");

  const tabs = [
    { id: "all", label: "All Students", count: 120 },
    { id: "active", label: "Active", count: 114 },
    { id: "pending", label: "Pending Verification", count: 6 },
  ];

  return (
    <AppPillTabs
      items={tabs}
      activeId={activeTab}
      onChange={setActiveTab}
    />
  );
}

8. Dropdown Select (Single & Multi-Select)

Searchable, filterable select dropdowns with groups and tag chips:

import { SelectDropdown, MultiSelectDropdown } from "ebench-campus-components";
import { useState } from "react";

export function DropdownExample() {
  const [department, setDepartment] = useState("");
  const [courses, setCourses] = useState<string[]>([]);

  const departmentOptions = [
    { value: "cs", label: "Computer Science" },
    { value: "ee", label: "Electrical Engineering" },
    { value: "me", label: "Mechanical Engineering" },
  ];

  const courseOptions = [
    { value: "cs101", label: "Data Structures" },
    { value: "cs102", label: "Algorithms" },
    { value: "cs103", label: "Database Systems" },
  ];

  return (
    <div className="grid grid-cols-2 gap-4 max-w-lg">
      <SelectDropdown
        label="Department"
        placeholder="Select Department"
        options={departmentOptions}
        value={department}
        onChange={setDepartment}
      />

      <MultiSelectDropdown
        label="Electives"
        placeholder="Select Electives"
        options={courseOptions}
        value={courses}
        onChange={setCourses}
      />
    </div>
  );
}

9. Data Table & Status Badge

Full-featured data table with sorting, search filtering, and status badges:

import { DataTable, StatusBadge, DataTableColumn } from "ebench-campus-components";

type StudentRecord = {
  id: string;
  name: string;
  department: string;
  status: "active" | "inactive" | "pending";
};

const columns: DataTableColumn<StudentRecord>[] = [
  { key: "id", header: "Student ID" },
  { key: "name", header: "Full Name" },
  { key: "department", header: "Department" },
  {
    key: "status",
    header: "Status",
    render: (row) => (
      <StatusBadge
        variant={row.status === "active" ? "success" : row.status === "pending" ? "warning" : "default"}
      >
        {row.status.toUpperCase()}
      </StatusBadge>
    ),
  },
];

const data: StudentRecord[] = [
  { id: "STU-01", name: "Rahul Sharma", department: "Computer Science", status: "active" },
  { id: "STU-02", name: "Ananya Roy", department: "Electronics", status: "pending" },
];

export function TableExample() {
  return <DataTable data={data} columns={columns} searchable />;
}

10. Circular & Linear Progress

Visual progress meters for course completions, attendance, and exam scores:

import { CircularProgress, ProgressBar } from "ebench-campus-components";

export function ProgressExamples() {
  return (
    <div className="space-y-6 max-w-sm">
      {/* Circular Progress Gauge */}
      <div className="flex items-center gap-4">
        <CircularProgress value={78} size={90} strokeWidth={8} showValueLabel />
        <div>
          <h4 className="font-semibold text-sm">Attendance Ratio</h4>
          <p className="text-xs text-muted-foreground">Semester Benchmark: 75%</p>
        </div>
      </div>

      {/* Linear Progress Bar */}
      <ProgressBar value={64} label="Syllabus Completed" showPercentage />
    </div>
  );
}

11. Profile Avatar & Avatar Group

Single avatars and stacked avatar groups with initials fallback and status indicators:

import { ProfileAvatar, AvatarGroup } from "ebench-campus-components";

export function AvatarExamples() {
  const team = [
    { name: "John Doe", src: "/avatars/1.jpg" },
    { name: "Sarah Smith", initials: "SS" },
    { name: "Alex Kumar", initials: "AK" },
    { name: "Lisa Wong", initials: "LW" },
  ];

  return (
    <div className="flex items-center gap-6">
      <ProfileAvatar name="Prof. David Miller" size="md" status="online" />
      <AvatarGroup items={team} max={3} size="sm" />
    </div>
  );
}

12. Modal Dialog

Accessible overlay modal for confirmations, forms, and popups:

import { SimpleModal, Button } from "ebench-campus-components";
import { useState } from "react";

export function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Admission Policy</Button>
      
      <SimpleModal
        open={isOpen}
        onClose={() => setIsOpen(false)}
        title="Campus Admission Guidelines"
        description="Please review before proceeding."
        primaryAction={{
          label: "I Understand",
          onClick: () => setIsOpen(false),
        }}
        secondaryAction={{
          label: "Close",
          onClick: () => setIsOpen(false),
        }}
      >
        <p className="text-sm text-muted-foreground">
          All submitted candidate details will be verified by the registrar's office.
        </p>
      </SimpleModal>
    </>
  );
}

13. Toast Notifications

Alert notifications with ToastProvider and the useToast hook:

import { ToastProvider, useToast, Button } from "ebench-campus-components";

function ToastTrigger() {
  const { toast } = useToast();

  return (
    <Button
      onClick={() =>
        toast({
          title: "Exam Submitted",
          description: "Your responses have been saved securely.",
          variant: "success",
        })
      }
    >
      Submit Test
    </Button>
  );
}

export function ToastExample() {
  return (
    <ToastProvider>
      <ToastTrigger />
    </ToastProvider>
  );
}

14. Academic & Analytics Charts

Specialized chart widgets for campus dashboards:

import {
  ScoreProgressionChart,
  SubjectPerformanceTrend,
  CaseloadRiskBreakdown,
  SystemMetricChart,
} from "ebench-campus-components";

export function AnalyticsExample() {
  const scoreData = [
    { term: "Quiz 1", score: 68 },
    { term: "Midterm", score: 82 },
    { term: "Quiz 2", score: 88 },
    { term: "Final", score: 94 },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <ScoreProgressionChart
        title="Student Score Trajectory"
        data={scoreData}
        xKey="term"
        yKey="score"
      />
    </div>
  );
}

📄 License

© eBench Campus. All rights reserved.