Components

REALM UI (@realmorg/ui) is a set of accessible components built with REALM and native HTML. Every component is a plain <custom-element> file you can read, copy and change. This site is built with them.

Preview

index.html

Create project

Deploy your new project in one click.

Name

Cancel

Deploy

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Components demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-narrow {
      width: min(100%, calc(var(--spacing) * 88));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/card.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/field.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/input.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/label.html"></import-element>

  <div class="demo-narrow">
    <ui-card>
      <ui-card-header>
        <ui-card-title level="2">Create project</ui-card-title>
        <ui-card-description>Deploy your new project in one click.</ui-card-description>
      </ui-card-header>
      <ui-card-content>
        <ui-field>
          <ui-label for="project-name">Name</ui-label>
          <ui-input id="project-name" placeholder="Name of your project"></ui-input>
        </ui-field>
      </ui-card-content>
      <ui-card-footer justify="between">
        <ui-button variant="outline">Cancel</ui-button>
        <ui-button>Deploy</ui-button>
      </ui-card-footer>
    </ui-card>
  </div>
</body>
</html>

Installation

REALM UI needs no installation. Load REALM, the theme and the component bundle from the jsDelivr CDN, once per page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>

<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/ui.html"></import-element>

To load less, import only the components you use instead of the bundle:

<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>
<import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/card.html"></import-element>

Each file imports the files it depends on, so sheet.html also loads dialog.html. A file is fetched once, however many files import it.

Pin an exact version (currently @realmorg/ui@2.0.0-alpha.2) in production, as described in Installation. The package contains:

File	Contents
`dist/theme.css`	Design tokens (colours, spacing, type, radius, shadows) with light and dark values
`dist/ui.html`	Every component in one file
`components/<name>.html`	One component (or a small family, such as tabs and tab panels) per file, with its dependencies imported at the top

To own a component, copy its file from components/ into your project and import your copy instead. Components depend on REALM, the theme tokens and the files they import at the top, such as button.html.

Conventions

Native first. Components wrap native elements: ui-button renders a <button>, ui-select a <select>, ui-dialog a <dialog>, popovers use the Popover API.
Attributes are props. Every attribute is declared with defineProps, typed and validated. Variants and sizes are attributes: <ui-button variant="outline" size="sm">.
Forms. Inputs are form-associated: they submit with their name, reset, validate, and follow <fieldset disabled>.
Events. Components emit native-named events where one fits (change, input, toggle, select, close, cancel), so onchange works on any page.
Styling. Inner elements are exposed with part, and every component reads the theme tokens. Variants are reactive CSS states you can also target from outside, such as ui-button:state(attr-variant-is-ghost).
Accessibility. Roles, labels, keyboard support and focus management follow the WAI-ARIA patterns. Each page lists them.

Theming

Override tokens on :root or any element. Dark mode follows the system, data-theme="dark" on <html> forces it, and data-theme="light" turns it off. Theming lists every token and has a theme builder.

:root {
  --radius: 0.375rem;
  --primary: oklch(0.55 0.2 260);
  --primary-foreground: oklch(0.98 0 0);
}

Components

Installation

Conventions

Theming

All components

Forms

Display

Overlays

Navigation

Layout

Chat and content