Some content inside a card with a header.
One stylesheet.
That's it.
Modern CSS has closed most of the gap that large UI libraries were
built to fill. erikt/ui covers the rest.
9.6 kB gzipped.
<link rel="stylesheet" href="https://esm.sh/@erikt/ui" />Account
Manage your account settings and preferences.
Privacy
Control who can see your data and activity.
Notifications
Choose what you want to be notified about.
Manage your public profile and personal details.
Recent actions and events will appear here.
Configure notifications, privacy, and preferences.
⌘K
⌃⇧P
⌃⇧P
| Name | Role | Status |
|---|---|---|
| Alice | Engineer | Active |
| Bob | Designer | Away |
Default
Primary
Secondary
Constructive
Destructive
Color 1
Color 2
Color 3
Color 4
Color 5
Color 6
Outline
erikt/ui responds to
prefers-color-scheme automatically.
Force a mode with
style="color-scheme: dark".
<button>Save changes</button>
<button class="outlined">Cancel</button>
<button class="ghost">Reset</button>
<label>
<svg data-prefix><!-- icon --></svg>
<input type="search" placeholder="Search..." />
</label>
<fieldset role="group">
<button class="ghost">Week</button>
<button class="ghost">Month</button>
<button class="ghost">Year</button>
</fieldset>
<article>
<header>Card title</header>
<p>Some content inside a card.</p>
<footer>
<button class="ghost">Cancel</button>
<button>Save</button>
</footer>
</article>Reset + UI in one import
Batteries included
@erikt/ui normalizes browser defaults and builds on top of them. You get a consistent baseline and a full component library from a single stylesheet.
No class soup
Just write HTML
Components map to native elements. A
<button> is a button, a
<dialog> is a dialog — no wrappers or utility
classes needed.
Works out of the box
Dark mode included
Responds to prefers-color-scheme automatically. Force a
mode on any element with
style="color-scheme: light" or
style="color-scheme: dark".