Core Components

Essential Nuxt UI components for building interfaces.

Button

<template>
  <UButton>Default</UButton>
  <UButton color="primary">
    Primary
  </UButton>
  <UButton variant="outline">
    Outline
  </UButton>
  <UButton size="lg" icon="i-heroicons-rocket-launch">
    Launch
  </UButton>
  <UButton :loading="isLoading">
    Submit
  </UButton>
</template>

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

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

  <UModal v-model="isOpen">
    <UCard>
      <template #header>
        Modal Title
      </template>

      <p>Modal content goes here</p>

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

<script setup>
const items = [
  [{ label: 'Profile', icon: 'i-heroicons-user' }],
  [{ label: 'Settings', icon: 'i-heroicons-cog' }],
  [{ label: 'Logout', icon: 'i-heroicons-arrow-right-on-rectangle' }]
]
</script>

<template>
  <UDropdown :items="items">
    <UButton>Menu</UButton>
  </UDropdown>
</template>

<template>
  <UTooltip text="This is a tooltip">
    <UButton>Hover me</UButton>
  </UTooltip>
</template>

Card

<template>
  <UCard>
    <template #header>
      <h3>Card Header</h3>
    </template>

    <p>Card body content</p>

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

These core components cover most UI needs. Mix and match to build your interface!

Theming

Customize Nuxt UI to match your brand.

Forms

Handle forms elegantly with Nuxt UI form components.