Customization

How to change what the kit looks like: the whole kit, one component everywhere, or a single use.

Your classes win

Every rule in the kit is wrapped in :where(), which has no specificity, and sits in the components cascade layer. So any class you add wins over it: a plain one, a breakpoint, a hover or a dark variant, written in Tailwind or in your own CSS. There is no merging to rely on.

tsx
<Chip active>default</Chip>
<Chip active className="px-6">wider</Chip>
<Chip active className="bg-primary text-white">primary</Chip>
<Chip active className="hover:bg-primary">hover only</Chip>
default
wider
primary
hover only

The whole kit

Colours, the border width and the radius are custom properties. Redeclare one after the kit's import and every component follows.

find out more

One component, everywhere

Every component has a class named after it, like .margo-chip or .margo-button, and so do its parts, like .margo-button-label. A rule in your stylesheet restyles that component across the whole app:

css
/* your stylesheet */
.margo-chip {
  padding-inline: 1rem;
  text-transform: none;
}

.margo-chip[data-margo-active="true"] {
  background-color: var(--margo-color-primary);
}

A variant of your own

className changes a single use. When the same change keeps coming back, I wrap the component once and use the wrapper instead:

tsx
import { Chip } from "margo-ui";

import type { ComponentProps } from "react";

export const Tag = ({ className, ...rest }: ComponentProps<typeof Chip>) => (
  <Chip {...rest} className={`px-4 normal-case ${className ?? ""}`} />
);