Ontwerp Systeem

Het ontwerpsysteem van Nuxt UI gebruikt Tailwind CSS voor eenvoudige thema 's en eenvoudige aanpassing.

Tailwind CSS

Tailwind CSS maakt gebruik van een CSS-first configuratie, waarmee u uw ontwerptokens met de @theme direct in uw CSS kunt definiëren. Dit maakt uw thema draagbaar, onderhoudbaar en gemakkelijk aan te passen .

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  /* Your custom design tokens go here */
}

Controleer de Tailwind CSS-documentatie voor alle beschikbare aanpassingsopties voor themavariabelen.

Tailwind CSS v4 veranderde zijn Preflight zodat knoppen cursor: default gebruiken in plaats van cursor: pointer om de standaardwaarden van de browser te evenaren. Als u de aanwijzercursor wereldwijd wilt herstellen, voegt u deze basisstijlen toe aan uw CSS:

app/assets/css/main.css

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Lettertypen

Gebruik de themavariabelen --font-* om de lettertypefamilie utilities](https://tailwindcss.com/docs/font-family#customizing-your-theme) in uw project aan te passen.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

Hier gedefinieerde lettertypen worden automatisch geladen en geoptimaliseerd door de @nuxt/fonts module.

Kleuren

Gebruik de --color-* thema variabelen om customize uw colors of override standaard colors.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  /* Override default green color */
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;

  /* Define new custom color */
  --color-brand-50: #fef2f2;
  --color-brand-100: #fee2e2;
  --color-brand-200: #fecaca;
  --color-brand-300: #fca5a5;
  --color-brand-400: #f87171;
  --color-brand-500: #ef4444;
  --color-brand-600: #dc2626;
  --color-brand-700: #b91c1c;
  --color-brand-800: #991b1b;
  --color-brand-900: #7f1d1d;
  --color-brand-950: #450a0a;
}

Zorg ervoor dat u bij het toevoegen van aangepaste kleuren alle tinten van 50 tot 950 voor elke kleur definieert.

Breekpunten

Gebruik de --breakpoint-* thema variabelen om customize uw breakpoints.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --breakpoint-3xl: 1920px;
  --breakpoint-4xl: 2560px;
  --breakpoint-5xl: 3840px;
}

Motie

Gebruik de --ease-*-themavariabelen om de easing](https://tailwindcss.com/docs/transition-timing-function#customizing-your-theme) van de animaties en bewegingsovergangen in uw project aan te passen.

app/assets/css/main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

Animaties invoeren en afsluiten draaien op --ease-out, onbepaald laden van animaties op --ease-in-out, dus overschrijven deze twee retimes de bibliotheek.

Wanneer prefers-reduced-motion is ingesteld, vervagen overlays op hun plaats in plaats van schalen of glijden en worden bewegingsovergangen uitgeschakeld.

Color Systeem

Het kleursysteem van Nuxt UI is ontworpen rond semantic naming in plaats van specifieke kleurwaarden. Deze aanpak maakt uw gebruikersinterface beter onderhoudbaar en maakt het wisselen van thema 's eenvoudig.

Semantische kleuren

Nuxt UI biedt semantische kleuraliassen die de purpose van de kleur beschrijven. Elke alias wordt gedefinieerd op basis van een kleur uit uw @theme-configuratie, die elke kleur kan zijn die u definieert naast de default Tailwind CSS palette.

Kleur	Standaard	Omschrijving
`primary`	`green`	Belangrijkste CTA 's, actieve navigatie, merkelementen, belangrijke links
`secondary`	`blue`	Secundaire knoppen, alternatieve acties, complementaire UI-elementen
`success`	`green`	Succesberichten, voltooide staten, positieve bevestigingen
`info`	`blue`	Infoalerts, tooltips, helptekst, neutrale meldingen
`warning`	`yellow`	Waarschuwingsberichten, wachtende staten, aandachtspunten
`error`	`red`	Foutmeldingen, validatiefouten, destructieve acties
`neutral`	`slate`	Tekst, randen, achtergronden, uitgeschakelde staten

Deze semantische kleuren zijn beschikbaar in de color prop van Nuxt UI-componenten:

color

<template>
  <UButton color="primary">Save Changes</UButton>
</template>

Probeer het themamenu: prose-icon{name="i-lucide-palette" class="text-primary"} in de koptekst om direct te zien hoe verschillende kleurenschema 's de hele gebruikersinterface beïnvloeden, of open de theme editor om alles tegelijk aan te passen!

Runtime configuratie

U kunt deze kleuren tijdens runtime configureren in uw app.config.ts bestand onder de ui.colors-sleutel, waardoor dynamische thema-aanpassing mogelijk is zonder de server opnieuw op te starten:

app/app.config.ts

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      secondary: 'purple',
      neutral: 'zinc'
    }
  }
})

U kunt deze kleuren tijdens runtime configureren in uw vite.config.ts-bestand onder de ui.colors-sleutel, waardoor dynamische thema-aanpassing mogelijk is:

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'blue',
          secondary: 'purple',
          neutral: 'zinc'
        }
      }
    })
  ]
})

Je kunt alleen kleuren gebruiken die in je thema bestaan. Ofwel:

De standaard colors](https://tailwindcss.com/docs/colors) van [Tailwind gebruiken (zoals blue, green, zinc)
Definieer eerst aangepaste kleuren met de @theme-richtlijn (zoals brand in ons voorbeeld hierboven)

Kleuren uitbreiden

Mogelijk wilt u extra semantische kleuren definiëren die verder gaan dan de standaardwaarden, zoals het toevoegen van een tertiary-kleur:

Registreer eerst de nieuwe kleur in je nuxt.config.ts onder de ui.theme.colors toets:

nuxt.config.ts

export default defineNuxtConfig({
  ui: {
    theme: {
      colors: [
        'primary',
        'secondary',
        'tertiary',
        'info',
        'success',
        'warning',
        'error'
      ]
    }
  }
})

Wijs het vervolgens toe in uw app.config.ts onder de ui.colors-toets:

app/app.config.ts

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      secondary: 'purple',
      tertiary: 'indigo'
    }
  }
})

Registreer en wijs de nieuwe kleur toe in je vite.config.ts bestand:

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      theme: {
        colors: [
          'primary',
          'secondary',
          'tertiary',
          'info',
          'success',
          'warning',
          'error'
        ]
      },
      ui: {
        colors: {
          primary: 'blue',
          secondary: 'purple',
          tertiary: 'indigo'
        }
      }
    })
  ]
})

Gebruik ten slotte deze nieuwe kleur in componenten die de color prop of as een class ondersteunen:

<UButton color="tertiary">
  Special Action
</UButton>

Contribution

A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.

CSS Variables

Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.