Getting Started with Nuxt UI

npx nuxi@latest module add ui

export default defineNuxtConfig({
  modules: ["@nuxt/ui"],
})

<template>
  <div class="flex gap-2">
    <UButton>Default</UButton>
    <UButton color="primary">Primary</UButton>
    <UButton color="success">Success</UButton>
    <UButton color="error" variant="outline">Error</UButton>
    <UButton color="warning" variant="soft">Warning</UButton>
  </div>
</template>

<script setup>
  const email = ref("")
</script>

<template>
  <UInput v-model="email" placeholder="Enter your email" icon="i-lucide-mail" />
</template>

<template>
  <UCard>
    <template #header>
      <h3 class="font-semibold">Card Title</h3>
    </template>

    <p>Card content goes here.</p>

    <template #footer>
      <UButton>Action</UButton>
    </template>
  </UCard>
</template>

<script setup lang="ts">
  import { z } from "zod"

  const schema = z.object({
    name: z.string().min(2, "Name must be at least 2 characters"),
    email: z.string().email("Invalid email address"),
  })

  const state = reactive({
    name: "",
    email: "",
  })

  async function onSubmit() {
    console.log("Form submitted:", state)
  }
</script>

<template>
  <UForm :schema="schema" :state="state" @submit="onSubmit">
    <UFormField label="Name" name="name">
      <UInput v-model="state.name" />
    </UFormField>

    <UFormField label="Email" name="email">
      <UInput v-model="state.email" type="email" />
    </UFormField>

    <UButton type="submit">Submit</UButton>
  </UForm>
</template>

<template>
  <div class="flex gap-4">
    <!-- Lucide icons (default) -->
    <UIcon name="i-lucide-home" />
    <UIcon name="i-lucide-settings" />

    <!-- Heroicons -->
    <UIcon name="i-heroicons-heart" />

    <!-- Material Design Icons -->
    <UIcon name="i-lucide-github" />

    <!-- Simple Icons (brand logos) -->
    <UIcon name="i-simple-icons-nuxt" />
  </div>
</template>

<template>
  <UButton icon="i-lucide-plus">Add Item</UButton>
  <UButton icon="i-lucide-trash" color="error" variant="ghost" />
  <UInput icon="i-lucide-search" placeholder="Search..." />
</template>

export default defineAppConfig({
  ui: {
    colors: {
      primary: "blue",
      secondary: "violet",
      success: "emerald",
      error: "red",
    },
  },
})

<script setup>
  const colorMode = useColorMode()

  function toggleDarkMode() {
    colorMode.preference = colorMode.value === "dark" ? "light" : "dark"
  }
</script>

<template>
  <UButton
    :icon="colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'"
    color="neutral"
    variant="ghost"
    @click="toggleDarkMode"
  />
</template>

<script setup>
  const colorMode = useColorMode()

  const themes = [
    { label: "Light", value: "light", icon: "i-lucide-sun" },
    { label: "Dark", value: "dark", icon: "i-lucide-moon" },
    { label: "System", value: "system", icon: "i-lucide-monitor" },
  ]
</script>

<template>
  <UDropdownMenu :items="themes">
    <UButton icon="i-lucide-palette" variant="ghost" />
  </UDropdownMenu>
</template>

<script setup>
  const items = [
    { label: "Home", icon: "i-lucide-home", to: "/" },
    { label: "Products", icon: "i-lucide-box", to: "/products" },
    { label: "About", icon: "i-lucide-info", to: "/about" },
    { label: "Contact", icon: "i-lucide-mail", to: "/contact" },
  ]
</script>

<template>
  <UNavigationMenu :items="items" />
</template>

<script setup>
  const items = [
    { label: "Home", to: "/" },
    { label: "Products", to: "/products" },
    { label: "Laptops", to: "/products/laptops" },
  ]
</script>

<template>
  <UBreadcrumb :items="items" />
</template>

<script setup>
  const isOpen = ref(false)
</script>

<template>
  <UButton @click="isOpen = true">Open Modal</UButton>

  <UModal v-model:open="isOpen">
    <template #header>
      <h3>Modal Title</h3>
    </template>

    <p>Modal content goes here.</p>

    <template #footer>
      <UButton @click="isOpen = false">Close</UButton>
    </template>
  </UModal>
</template>

<script setup>
  const toast = useToast()

  function showToast() {
    toast.add({
      title: "Success!",
      description: "Your changes have been saved.",
      color: "success",
    })
  }
</script>

<template>
  <UButton @click="showToast">Show Toast</UButton>
</template>

<script setup>
  const columns = [
    { key: "name", label: "Name" },
    { key: "email", label: "Email" },
    { key: "role", label: "Role" },
  ]

  const data = [
    { name: "Alice", email: "alice@example.com", role: "Admin" },
    { name: "Bob", email: "bob@example.com", role: "User" },
  ]
</script>

<template>
  <UTable :columns="columns" :rows="data" />
</template>

<template>
  <div class="flex gap-2">
    <UBadge>Default</UBadge>
    <UBadge color="success">Active</UBadge>
    <UBadge color="warning" variant="subtle">Pending</UBadge>
    <UBadge color="error" variant="outline">Inactive</UBadge>
  </div>
</template>