Guides, References & Tips
Theming
Color palettes, dark mode, CSS variables, design tokens, typography, and font pairing. — 9 articles
- GuideThemingFeatured
Customize Theme Colors
Configure semantic color palettes, per-role shades, and neutral tones for your brand.
- GuideThemingFeatured
Dark Mode Theming
Build polished dual-mode themes with independent light and dark color configurations.
- ReferenceTheming
Color Palette Reference
Complete reference of all available color palettes with shade values and pairing tips.
- ReferenceTheming
CSS Variables Reference
Full list of CSS custom properties for colors, radius, typography, and spacing.
- GuideTheming
Typography & Font Pairing
Choose, pair, and apply fonts in Nuxt UI applications for cohesive typography.
- GuideTheming
Export & Share Themes
Export themes as app.config.ts, CSS variables, or JSON and share with your team.
- Quick TipTheming
Use Your Brand Hex Color
Turn one brand hex value into a full palette and make it your primary color.
- Quick TipTheming
Change the Border Radius
One CSS variable controls the corner rounding of every component.
- GuideThemingFeatured
Migrate Your Theme to v4
Move a Nuxt UI v2 or v3 theme to v4: colors, tokens, and component overrides.
Components
Styling individual Nuxt UI components, variants, sizes, and customization patterns. — 2 articles
- ReferenceComponents
Component Styling Cheat Sheet
Quick reference for customizing Nuxt UI components with variants, colors, and sizes.
- Quick TipComponents
Restyle One Component
Change one component everywhere with app.config, or once with the ui prop.
Tailwind CSS
Tailwind CSS v4 integration, theming changes, utilities, and migration guidance. — 1 articles
Best Practices
Accessibility, design systems, performance, and WCAG contrast guidance. — 3 articles
- GuideBest PracticesFeatured
Building a Design System
Build a consistent, scalable design system using Nuxt UI design tokens.
- GuideBest Practices
Accessible Color Contrast
Ensure your theme colors meet WCAG 2.2 contrast requirements.
- GuideBest Practices
Nuxt UI vs shadcn-vue Theming
How colors, dark mode, radius, and overrides compare between the two.