Customization

Modify the look and feel of Universal UI to fit your needs.

Universal UI provides two main ways to globally customize the look and feel of your application; through the UniversalUIConfigProvider and the tailwind.config.js plugin.

Customize theme with UniversalUIConfigProvider

The UniversalUIConfigProvider allows you to customize the look and feel of Universal UI by overriding the behavior of all components.

import { UniversalUIConfigProvider } from "@parssa/universal-ui";

const config = {
  components: {
    // overrides for all buttons
    button: "shadow-none",
    // styling based on the props of Text
    text: ({ variant }) =>
      ({
        h1: "text-5xl",
        h6: "tracking-widest text-xs font-mono"
      }[variant] ?? "")
  }
};

const App = () => {
  return <UniversalUIConfigProvider config={config}>{/* ... */}</UniversalUIConfigProvider>;
};

The values of the components are either strings, or functions that provide the props of the component, and should return a string.

This is useful when needing to override the behavior of a component based on the props passed to it.

Customize primitives with tailwind.config.js

Universal UI provides a robust tailwind.config.js plugin that allows you to customize the look and feel of Universal UI by overriding the default colors and spacing.

// You can use the default tailwind colors, or define your own
const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    universalUI: {
      themes: [
        {
          name: "brand", // Custom brand colors, from uicolors.app
          colors: {
            50: "#effcfc",
            100: "#d7f5f6",
            200: "#b4eaed",
            300: "#80dae0",
            400: "#45c0cb",
            500: "#2aa4b0",
            600: "#268594",
            700: "#236774",
            800: "#265864",
            900: "#234b56",
            950: "#12303a"
          }
        },
        {
          name: "error", // Replacing error color with Tailwind red
          colors: colors.red
        }
      ]
    }
  }
};

The universalUI key is used to configure the Universal UI plugin. The themes key is used to define the color pallettes that can be used in your application.

We recommend using the uicolors website to generate the color pallettes.

Previous

Installation

Next

Button