Customization

CSS

Customizing fronnt UI components via CSS is probably the most powerful customization possibility of fronnt UI. As the CSS is separated from the JS components and fronnt UI strictly follows BEM, styles have high cohesion, but low coupling.

It’s easy to overwrite styles by just adding them to your project (as long as they are imported after the default fronnt UI CSS) – No separate toolchain required!

It doesn’t matter how CSS is generated in your project, whether you use a preprocessor like SASS or write plain CSS by hand is up to you.

<script setup>
import { NNAlert } from "@fronntui/vue";
// import only CSS for the Alert component
import "@fronntui/styles/components/Alert.css";

// or import all styles globally (usually in your app.vue file)
// import "@fronntui/styles";

// or don't import styles at all 🙃
</script>

<template>
  <NNAlert variant="warning">This is a warning</NNAlert>
</template>

<div class="nn-alert nn-alert--warning">
  <div class="nn-alert__message">This is a warning</div>
</div>

.nn-alert {
  display: flex;
  gap: 1.25rem;
  padding: 1rem;
  border-radius: var(--nn-alert-border-radius);
  background: var(--nn-color-gray-50);
}

.nn-alert--warning {
  background: var(--nn-color-warning-50);
  color: var(--nn-color-warning);
}

.nn-alert__message {
  display: flex;
  align-items: center;
  flex: 1;
}

Props

Props are mostly used for passing data to fronnt UI components, but also provide a way to configure the components, such as choosing a specific variant.

If components feature different variants, which can be set via a prop, there will also be a CSS modifier class set on the rendered component markup, which makes it easy to customize the look and feel further.

Slots

Slots are used to display information in specific areas inside the component. Most of the time, this is simply the “content” of the component, but fronnt UI also exposes slots to allow overwriting complete areas of a component with your own markup (which of course can be styled exactly the way you want).