Customization
@erikt/ui lives in a @layer. Any styles you write
outside of a layer beat it.
How it works
Everything @erikt/ui ships sits inside @layer ui. The
cascade ranks unlayered styles above every layer, so plain CSS
overrides any of it. No !important, no specificity
games.
/* erikt/ui internals, low priority */
@layer ui {
button {
border-radius: 8px;
}
}
/* your styles, always win */
button {
border-radius: 0;
}Overriding styles
Put your overrides in a plain stylesheet loaded after @erikt/ui. Any element or class it styles is fair game.
<link rel="stylesheet" href="ui.css" />
<link rel="stylesheet" href="your-styles.css" />
Or inline in a <style> tag, or inside your own
@layer as long as it is declared after
erikt/ui in the layer order.
Example
A default button next to one with border-radius: 0 from
a local override.
/* your-styles.css */
button {
border-radius: 0;
}
The same works for spacing, font sizes, colors, transitions, anything
else. Tokens like --ui-primary go further. Change one and
every component that reads it updates at once. See
Themes for the full list.