Eunomia
Named after the Greek spirit of good order, Eunomia brings structure and consistency to your interfaces: a library of accessible, framework-agnostic web components, built to work together.
Key concepts
The pillars of Eunomia.
Four ideas guide every design and every line of code in the library.
Atomic Design
Small components combine into larger ones, all the way up to full screens.
Web Components
Every element is a native custom element, so no framework is required to run it.
Accessibility
Every component ships with focus management, ARIA, and keyboard support built in.
Theming
Every component exposes its look as CSS custom properties, yours to override.
Web components
Framework-agnostic.
Every component is a custom element registered in the browser. Once imported, it works like any HTML tag, in Angular, React, Vue, or a plain static page.
// import once
import { EunomiaButton } from '@eunomia/elements';
<!-- use it anywhere -->
<eun-button variant="primary">
Confirm
</eun-button>
import { EunomiaButton } from '@eunomia/elements';
<!-- use it anywhere -->
<eun-button variant="primary">
Confirm
</eun-button>
Library
A set of components, pulled in as you need them.
Each one ships as a standard web component, themed automatically and built for accessibility from the start. There's no category to dig through first, just one flat list. Hover or tap a card below to see more.
The main action element, in every variant, size, and shape you need.
A text field with validation built in, ready to drop into any form.
A single or multi-choice field, with a searchable list when you need one.
Sorts related content into clear panels, with icons and badges if you want them.
A reusable dialog for confirmations and quick actions.
A pressed button that becomes a sliding switch, or its own filter.
A sliding side panel for extra content, without leaving the page.
The very component paging through this row of cards.
An inline banner for info, success, warning, or error messages.
A toggle for a setting that takes effect right away.
A segmented day, month, and year field, with a calendar popover for picking dates directly.
Icons
Icons, built right in.
Every component that shows an icon renders one of the 1473 Google Material Symbols by default, in four shapes: default, outline, round, and sharp.
Prefer your own icon set? Most components expose a slot instead of hard-coding the icon, so you can drop in any SVG, image, or custom element instead.
Installation
In three steps.
1
Install the Package
Available on npm, with no dependency on any particular framework.
2
Import the Component
Each component is imported on its own, so the bundle stays light.
3
Use the Tag
The custom element registers itself in the browser automatically.
# 1. install
npm install @eunomia/elements
// 2. import
import { EunomiaButton } from '@eunomia/elements';
<!-- 3. use -->
<eun-button>Confirm</eun-button>
npm install @eunomia/elements
// 2. import
import { EunomiaButton } from '@eunomia/elements';
<!-- 3. use -->
<eun-button>Confirm</eun-button>
Guides
Go further.
Practical, hands-on guides for everything that lives between components: wiring up drag and drop, rate-limiting a search field, formatting rich text, or letting a button open a dialog without writing a line of JavaScript. Start here whenever the answer isn't just a single tag.
Forms & validation
Composing a label, native constraints vs. custom validators, reading a submitted form.
Invoker Commands API
Wiring a button to another element's behavior declaratively, without a click handler.
Rate limiting
debounce and throttle, two framework-agnostic functions for controlling how often a callback runs.
Drag and drop
Reorder items in a list, table, or calendar by dragging them, with the mouse or the keyboard.
Polyfills
What's already handled for you, and when to reach for the Popover API or CSS Anchor Positioning polyfills.
Events
The naming convention behind every event a component dispatches, and how to listen for one.
Markdown-lite
The lightweight text formatting syntax behind the rich text editor's own toolbar.
Theming
A visual identity, without touching component code.
Every component exposes its colors, radii, and spacing as CSS custom properties. Pick one of 7 prebuilt themes, generate your own from two brand colors, or override a single component directly, like the buttons on the right: all three combine, and repaint instantly. Try any of them live from the theme switcher in this documentation's own toolbar.
eun-button {
--button-background: #1b7a4d;
--button-border-radius: 999px;
--button-shadow: 0 6px 16px rgba(27,122,77,.35);
}
--button-background: #1b7a4d;
--button-border-radius: 999px;
--button-shadow: 0 6px 16px rgba(27,122,77,.35);
}
Accessibility
Compliant by default, not by option.
Every component follows the W3C's WAI-ARIA authoring practices and France's RGAA guidelines: focus management, ARIA roles and states, and full keyboard support are built in from the start, not added later by the product team.
Native Semantics
Every component renders the right native HTML elements inside its shadow DOM.
Keyboard Navigation
Tab, Enter, Space, and the arrow keys work as expected on every interactive component.
Announced States
Loading, disabled, and error states are exposed through the right ARIA attributes.
Compliant Contrast
Default colors meet WCAG AA. Any theming choice you make is yours to verify against your own palette.
This is a best-effort, independent commitment: no certified accessibility audit has been performed yet. See the full
Credits
The tools behind Eunomia.
Nothing here was built alone. This site, and the library it documents, lean on tools other people spent years getting right — here's what's doing the heavy lifting behind the scenes.
The static site generator powering this documentation
The base class every Eunomia component extends
Generates the API tables on every component page from JSDoc
The language the entire library and its types are written in
Runs every component's test suite in a real Chromium browser
Compiles the theme engine's color scales and design tokens to CSS
Inter and JetBrains Mono typefaces
Google's icon set, powering eun-icon and the Icons page
Google Fonts is used under the