Semantic Colors as Props and Adding Custom Semantic Colors

In this lesson, learn how to use the Nuxt UI semantic colors with the color prop. This prop exists on many components making it easy to control the colors of different UI elements. Even without the color prop, many components default to using certain semantic colors under the hood for a great first look even without further configuration.

Also learn how to add your own custom semantic colors in app.config.ts and nuxt.config.ts for type-safe customizations.

Links

• Nuxt UI Docs - Extend Colors
• Nuxt UI Docs - Button Color Prop