Customize NH-UI to match your brand with powerful theming options.
Theme Editor
Colors
Primary Color
#FF5500Secondary Color
#00D9B5Typography
Base Font Size
16pxSpacing
Border Radius
8pxDark Mode
const { heroui } = require("@heroui/react");
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@noiseheroes/ui/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
],
darkMode: "class",
plugins: [heroui({
themes: {
light: {
colors: {
primary: {
DEFAULT: "#FF5500",
foreground: "#FFFFFF",
},
secondary: {
DEFAULT: "#00D9B5",
foreground: "#000000",
},
},
},
dark: {
colors: {
primary: {
DEFAULT: "#FF5500",
foreground: "#FFFFFF",
},
secondary: {
DEFAULT: "#00D9B5",
foreground: "#000000",
},
},
},
},
layout: {
fontSize: {
base: "16px",
},
borderRadius: {
small: "4px",
medium: "8px",
large: "12px",
},
},
})],
};Preview Components
Sample Card
This card demonstrates your custom border radius and theme settings.
You can also customize NH-UI using CSS variables for dynamic theming:
:root {
--nh-primary: #FF5500;
--nh-secondary: #00D9B5;
--nh-radius-small: 4px;
--nh-radius-medium: 8px;
--nh-radius-large: 12px;
--nh-font-size-base: 16px;
}
.dark {
--nh-background: #000000;
--nh-foreground: #FFFFFF;
}