Customization
@erikt/ui uses @layer to stay out of your way. Any styles you
write outside of a layer automatically win over @erikt/ui's defaults.
How it works
All @erikt/ui styles are scoped inside @layer ui. The CSS
cascade gives unlayered styles the highest priority, so you can override
anything simply by writing regular CSS — no !important, no
increased specificity needed.
/* erikt/ui internals — low priority */
@layer ui {
button {
border-radius: 8px;
}
}
/* your styles — always win */
button {
border-radius: 0;
}Overriding styles
Write your overrides in a plain stylesheet, after the @erikt/ui import. You can target any element or class @erikt/ui exposes.
<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
Here is a button with @erikt/ui's default styling next to one with
border-radius: 0 applied via a local override.
/* your-styles.css */
button {
border-radius: 0;
}
The same technique works for any property — spacing, font sizes,
colors, transitions, and so on. @erikt/ui's token system (CSS custom
properties like --ui-primary) gives you an additional
lever: changing a token updates every component that references it at
once. See Themes for details.