Getting started

Orion Admin is one file: orion.js. It contains every component, the CSS (injected automatically) and the icons. Pick how you want to load it.

1. Install

CDN (fastest way to go live)

      <!-- latest -->
      <script src="https://cdn.jsdelivr.net/npm/orion-admin/dist/orion.min.js"></script>
      <!-- pinned version (recommended for production) -->
      <script src="https://cdn.jsdelivr.net/npm/orion-admin@0.1.0/dist/orion.min.js"></script>
      <!-- or unpkg -->
      <script src="https://unpkg.com/orion-admin@0.1.0/dist/orion.min.js"></script>

npm

      // npm install orion-admin
      import Orion from 'orion-admin';        // registers every component and injects the CSS
      Orion.toast.success('Ready!');

Download / self-host

Copy dist/orion.min.js into your project (for example /assets/orion.min.js) and reference it. Nothing else is needed: no fonts, no images and no other CSS or JS files.

Using an AI Assistant? (Cursor, ChatGPT, Claude, Gemini)

Orion Admin is single-file and zero-dependency, making it ideal for AI coding agents. Tell your assistant:

      Use Orion Admin (CDN: https://cdn.jsdelivr.net/gh/amithigh1/OrionUi@main/dist/orion.min.js).
      Do not use Bootstrap or Tailwind. Build the UI using <o-datatable>, <o-select>, <o-chart> and .o-btn.

See the comprehensive Using with AI Agents guide and machine-readable llms.txt.

2. Your first admin page

Put the script in <head> so styles apply before the page renders (no flash of unstyled content).

      <!doctype html>
      <html lang="en" data-theme="auto">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dashboard</title>
        <script src="orion.min.js"></script>
      </head>
      <body class="o-container o-py-6">
        <div class="o-page-header">
          <h1 class="o-page-title">Users</h1>
          <button class="o-btn o-btn-primary"><o-icon name="plus"></o-icon> New user</button>
        </div>
        <div class="o-grid o-grid-cols-1 o-grid-cols-md-3 o-mb-6">
          <div class="o-card o-card-body"><div class="o-stat-label">Active</div><div class="o-stat-value">1,284</div></div>
          ...
        </div>
        <o-datatable id="users"></o-datatable>
        <script>
          const table = document.getElementById('users');
          table.columns = [{ key: 'name', title: 'Name' }, { key: 'email', title: 'Email' }];
          table.rows = [{ id: 1, name: 'Ada Lovelace', email: 'ada@example.com' }];
        </script>
      </body>
      </html>

Full page templates (dashboard, users, login, calendar, kanban, settings and more) are ready to copy from Templates.

3. How the library is organised

LayerHow you use itExamples
CSS classesclass="o-btn o-btn-primary"grid, buttons, cards, badges, alerts, utilities
BehaviorsAdd a data-o-* attribute to normal HTMLdata-o-tooltip, data-o-mask, data-o-lazy, data-o-validate
Actionsdata-o-toggle / data-o-action / data-o-dismissopen a modal, collapse, copy, print, fullscreen, theme
Custom elements<o-select>, <o-datatable>, <o-chart>…rich widgets with properties, attributes, events and methods
JavaScript APIOrion.toast(), Orion.confirm(), Orion.http.get()dialogs, toasts, HTTP, storage, shortcuts, theme, i18n

Behaviors and actions are wired automatically for elements that exist now or appear later, so they also work in markup rendered by React, Vue or Angular. Every component event is prefixed o- (o-change, o-open…) and bubbles.

4. Configuration

Configure with attributes on the script tag, a global object defined before the script, or at runtime:

      <script src="orion.min.js" data-theme="dark" data-locale="ms" data-currency="MYR" data-week-start="1"></script>

      <script>
        window.OrionConfig = {
          theme: 'auto',                       // 'light' | 'dark' | 'auto'
          locale: 'en',                        // any BCP-47 tag; RTL languages flip the layout
          currency: 'USD',
          tokens: { primary: '#0ea5e9', radius: '6px' },
          themes: { acme: { primary: '#e11d48', brand: { name: 'ACME', logo: '/acme.svg' } } },
          tenant: 'acme',                      // multi-tenant theme to apply
          persist: true,                       // remember theme / locale / font size per browser
          css: true,                           // inject the embedded CSS (false if you use orion.css)
          reboot: true,                        // base element styles (body font, headings, links)
          nonce: 'r4nd0m'                      // CSP nonce for the injected <style>
        };
      </script>
    
      Orion.init({ theme: 'dark', locale: 'ar' });   // change any option later
      Orion.on('ready', () => console.log('Orion', Orion.version));

5. Custom single-file builds

The full file contains everything, all ten language packs included (about 4.7 MB minified, 1.4 MB over gzip). dist/orion.lite.min.js holds the 48 most used components with an English UI at under a third of that (import Orion from 'orion-admin/lite' on npm); add a language with one more script, dist/locales/ms.min.js. To ship exactly the components and languages you use, clone the repository and run:

      npm install
      node build/build.mjs --preset=forms --out=my-build             // presets: full, lite, forms, data (build/presets.json)
      node build/build.mjs --only=select,datepicker,datatable,modal,toast --out=my-build
      // -> my-build/orion.js, orion.min.js, orion.esm.js, orion.css (core is always included)
      node build/build.mjs --exclude=map,chart,diagram --out=my-build  // everything except these (folder names from src/components/)
      node build/build.mjs --preset=lite --locales=ms,ar --out=my-build // lite + two language packs (--locales=none | all | codes)

6. CSS without JavaScript

dist/orion.css contains the same styles as a normal stylesheet. Use it for server-rendered pages that need only the CSS layer (grid, buttons, cards, forms, utilities). Custom elements and behaviors need orion.js. If you load orion.css yourself, set data-css="false" on the script.

7. Customising styles

Orion's styles are injected at the top of <head> with low specificity, so your stylesheet always wins. Change design tokens (CSS variables) for global changes:

      :root {
        --o-primary: #0ea5e9;       /* brand color: buttons, links, focus ring... */
        --o-radius: 6px;
        --o-font-sans: "Inter", system-ui, sans-serif;
        --o-sidebar-w: 17rem;
      }
      .o-card { border-radius: 4px; }   /* or override any class */

See Theming for dark mode, tenants and white-labelling.

8. Browser support & environment