Asgard

Asgard is the official component suite for EkkoJS, a batteries-included React component library for ekko:rune apps. Buttons, tables, pickers, overlays, a full layout engine and an IDE-grade docking system, all accessible, themeable, and server-rendered.

00000000001
2
3
4
5
6
7
8
9
10
import { ThemeProvider, Button } from "@ekko/asgard";
import { themes } from "@ekko/asgard/theme";
 
export default function App() {
  return (
    <ThemeProvider theme={themes.nord}>
      <Button variant="filled">Get started</Button>
    </ThemeProvider>
  );
}

What's inside

Area	Components
Inputs & forms	Button, TextBox, Select, Checkbox, Radio, Switch, Slider, Upload
Pickers	ColorPicker, Calendar, TimePicker, DateTimeInput
Data display	DataTable, TreeView, Card, Accordion, Typography, ProgressBar
Feedback & overlays	Alert, Toast, Popups, Tooltip, Drawer, FloatingPanel, FeatureTour
Navigation & chrome	Ribbon, Toolbar, Breadcrumb, Stepper, ContextMenu, SideBar
Layout	Grid, Splitter, SDiv
Docking	DockHost, TabHost, SplitContainer, SideBar

Highlights

Themeable to the core. One ThemeProvider, ~30 built-in palettes (Nord, Dracula, Tokyo Night,

Catppuccin, GitHub, and more) or your own. See Theming.

Accessible. Keyboard navigation, focus management and ARIA roles are built in.
Server-rendered. Components render on the server with ekko:rune and hydrate cleanly.
App-grade. A real layout system and a dockable workspace

for IDE-style UIs, not just widgets.

Getting started, add Asgard and render your first component.
Theming, pick a palette or build your own.
Components, browse by category.

On this page

What's inside Highlights Next