erikt/ui
A CSS reset and a small UI library in one stylesheet.
erikt/ui is somewhere between a CSS reset and a classless CSS project. It styles native HTML elements directly, so plain semantic markup looks decent with no extra work. A small set of opt-in class names covers the things HTML can't express on its own.
It takes a lot of inspiration from Pico CSS: the idea that a stylesheet should improve the browser's defaults rather than replace them. erikt/ui adds a richer component set and a theming layer on top of that.
Usage
Link the stylesheet from the CDN:
<link rel="stylesheet" href="https://esm.sh/@erikt/ui" />
<!-- Optional: theme -->
<style>
:root {
--ui-primary: light-dark(#111, #fefefe);
}
</style>You can also download the CSS file and host it yourself:
Download ui.cssOverview
erikt/ui styles native HTML elements directly, no class names required.
<fieldset role="group">
<input type="text" placeholder="Input" /> <button>Button</button>
</fieldset>UI, not layout
erikt/ui handles the look of interactive elements (buttons, inputs,
popovers) but deliberately stays out of the way of how you arrange
them on the page. CSS flex and grid are fast
to write, easy to read, and need no abstraction on top of them.
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
"
>
<input type="text" placeholder="First name" />
<input type="text" placeholder="Last name" />
<input type="email" placeholder="Email" style="grid-column: 1/-1" />
<button style="grid-column: 1/-1; justify-self: end">Submit</button>
</div>With Tailwind
erikt/ui and Tailwind work well together. erikt/ui handles component styles,
Tailwind handles layout and one-off utilities. There is no conflict
because erikt/ui wraps all its styles in @layer ui {},
which means any Tailwind utility class wins automatically without
needing !.
To get the layering right, declare the layer order before importing either library. This ensures Tailwind's reset sits below erikt/ui, and Tailwind's utilities sit above it:
/* main.css */
@layer theme, base, ui-reset, ui, components, utilities;
@import "https://esm.sh/@erikt/ui";
@import "tailwindcss";Philosophy
erikt/ui is also a personal testbed for modern CSS. New features like
anchor positioning, @starting-style, the Popover API, and
:has() are tried out here first. The aim is to see how
far CSS alone can get before JavaScript is needed.
Because of that, erikt/ui leans on newer browser features and isn't aimed at projects that need broad compatibility. It's more of a place to experiment than a production-ready toolkit.