Customizability

Customizability is one of the core principles of this component library.

As discussed in the previous page, it is nearly impossible to think of all the use-cases that might be required for a component to work in. For that reason, it is needed for component libraries to embrace and enable customizability.

So, how is it done? Thanks to stitches and it's wonderful API, and also tokenization there are quite a few ways to do it.

Say we want to change a button's background color.

The CSS prop

Similarly to Chakra and MUIs sx-Prop, stitches, and, by extension, NeUI, brings the CSS prop. It works the same as you would otherwise define styling in CSSinJS but also provides token autocomplete.

Here's an example:

<NeuiButton
  css={{
    "$$button-color-primary": "$primary",
    backgroundColor: "$$button-color-primary",
    marginRight: 15,
  }}
>
  Button label
</NeuiButton>

The styled function

The above way is a good one to enable quick and singular overrides, the more legible way is composing the base component's styles in a way similar to styled components:

const StyledButton = styled(NeuiButton, {
    '$$button-color-primary': "$primary",
    backgroundColor: '$$button-color-primary',
    marginRight: 15,
})

<StyledButton>
    Button label
</StyledButton>

Both of these approaches have the big upside that any custom styles defined here will be added to the static stylesheet generated by stitches, so they don't add any runtime and performance cost.

For most use-cases, if we want to change the styling of components on runtime (like, for example, for an interaction), the recommended way would be to use Component Variants.

If you need to change single attributes, like for example animate a transform value, first look into our Motion components, if not you can still use the style function within components on runtime.

All of NeUI's components support both ways of doing things so you can take the approach that makes more sense for your use-case.

If you want more information about how the styling system works, please visit the Stitches Documentation.