XyraPanel uses Nuxt UI for most components. The official way to customize themes is via the app.config.ts file. Editing core files is possible but unsupported and makes updates harder.
Define global design tokens such as colors, fonts, and border radius:
export default defineAppConfig({
ui: {
colors: {
primary: "blue",
secondary: "purple",
success: "green",
error: "red",
warning: "yellow",
neutral: "zinc",
},
radius: "0.5rem",
font: {
body: "Inter, sans-serif",
heading: "Poppins, sans-serif",
},
},
});
All components automatically inherit these tokens unless overridden.
Override slots, variants, or defaultVariants for individual components:
export default defineAppConfig({
ui: {
button: {
slots: { base: "font-bold rounded-md px-4 py-2" },
variants: {
color: {
primary: "bg-primary text-inverted hover:bg-primary/75",
secondary: "bg-secondary text-inverted hover:bg-secondary/75",
},
variant: {
solid: "",
outline: "ring ring-primary/50 text-primary hover:bg-primary/10",
},
},
defaultVariants: { color: "primary", variant: "solid", size: "md" },
},
},
});