A clean, elegant UI kit for Academic Conferences, LMS, eBooks & Portals
Use this as your stable CDN: host once, reuse everywhere. Include the same bundle in any future project (yours or others).
<link rel="stylesheet" href="https://symposiax.co.in/ui/dist/ganitara-ui.min.css"> <link id="themeLink" rel="stylesheet" href="https://symposiax.co.in/ui/themes/theme-ocean.css"> <link rel="stylesheet" href="https://symposiax.co.in/ui/themes/dark.css"> <!-- optional --> <script defer src="https://symposiax.co.in/ui/dist/ganitara-ui.min.js"></script> <!-- optional -->
Install / Host (recommended setup)
Put these files on your website once. Reuse everywhere.
- Host the UI files at https://symposiax.co.in/ui/ (already done).
- Keep URLs stable so all portals include the same CDN links.
- In each project, paste the include snippet (above) and pick a theme.
Folder structure
/ui/
/dist/
ganitara-ui.min.css
ganitara-ui.min.js (optional)
/themes/
theme-ocean.css
theme-slate.css
theme-aurora.css
dark.css (optional)Project include (example)
<link rel="stylesheet" href="https://symposiax.co.in/ui/dist/ganitara-ui.min.css">
<link rel="stylesheet" href="https://symposiax.co.in/ui/themes/theme-slate.css">
<link rel="stylesheet" href="https://symposiax.co.in/ui/themes/dark.css"> <!-- optional -->
<script defer src="https://symposiax.co.in/ui/dist/ganitara-ui.min.js"></script> <!-- optional -->Tip (production)
Use the .min files. They—re smaller and faster.
Rule
Do not load Bootstrap/Tailwind alongside Ganitara UI. Mixing causes conflicts and duplicate CSS.
Themes & Dark Mode
Per-project palettes from day 1 (blue/teal default). Optional dark.
Choose a theme
Set data-theme on <html>:
<html data-theme="ocean">Best practice Keep themes small: only override tokens.
Enable dark mode
Toggle data-mode="dark":
<html data-theme="ocean" data-mode="dark">This page includes a Light/Dark toggle in the navbar.
What you get (v1)
Enough to cover conference portals, admin dashboards, proceedings, LMS & certificates.
Tokens & Utilities
Typography, spacing, radius, shadows, container, grid, and helpful utilities.
Components
Buttons, forms, cards, badges, tables, navbar, tabs, pagination, alerts, modals.
Signature pages
Hero + blobs, proceedings list & detail, reader layout, LMS quiz + progress cards.
Important
This is a UI kit, not a full JS framework. JS is tiny and optional.
Proceedings citation tabs
JS optionalAPA (placeholder): Author, A. (2026). Title. Proceedings—
IEEE (placeholder): A. Author, —Title,— in Proc. —
@inproceedings{key, title={Title}, year={2026} }