Getting started

Add Asgard

From your EkkoJS project root:

ekko add @ekko/asgard

That records @ekko/asgard in your ekko.json and installs it into the store. No bundler config, no peer-dependency juggling.

Wrap your app

Asgard components read their colors from a ThemeProvider. Add one near the root of your app and feed it a theme:

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">Hello, Asgard</Button>
    </ThemeProvider>
  );
}

themes is a map of ~30 built-in palettes. Swap themes.nord for themes.dracula, themes.githubLight, themes.tokyoNight, etc., or pass your own object. See Theming.

With a rune page

In a ekko:rune app, drop components straight into a page, they render on the server and hydrate on the client:

00000000001
2
3
4
5
6
7
8
9
10
11
// pages/index.tsx
import { ThemeProvider, Alert } from "@ekko/asgard";
import { themes } from "@ekko/asgard/theme";
 
export default function Home() {
  return (
    <ThemeProvider theme={themes.nord}>
      <Alert severity="success" title="It works">You're rendering Asgard on the server.</Alert>
    </ThemeProvider>
  );
}

Imports

Components and hooks: @ekko/asgard
Themes and theme types: @ekko/asgard/theme

00000000001
2
import { Button, TextBox, DataTable, useTheme } from "@ekko/asgard";
import { themes, type Theme } from "@ekko/asgard/theme";

Theming, the palette system and custom themes.
Layout and Docking, build full app shells.
Components by category.

On this page

Add Asgard Wrap your app With a rune page Imports Next