UI components

The template uses two complementary component libraries:

shadcn-vue

shadcn-vue provides customizable UI components built on Reka UI. Components are copied into your codebase (app/components/ui/) so you can modify them freely.

Features:

• Accessible (WAI-ARIA compliant)
• Customizable (in your codebase, not node_modules)
• Type-safe with TypeScript
• Auto-imported (no import statements needed)

Use for: Buttons, forms, dialogs, cards, tables, dropdowns, and general UI elements.

Adding shadcn-vue components

To add a shadcn-vue component that's not yet installed:

pnpm dlx shadcn-vue@latest add [component-name]

For example:

pnpm dlx shadcn-vue@latest add calendar

The component will be added to app/components/ui/ and automatically configured. The template includes common components pre-installed (buttons, forms, dialogs, tables, charts, etc.).

All components are auto-imported - no import statements needed.

Quick examples

Form with validation

<script setup>
import { z } from 'zod'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'

const schema = toTypedSchema(
  z.object({
    email: z.string().email(),
    password: z.string().min(8),
  })
)

const { handleSubmit, errors, defineField } = useForm({ validationSchema: schema })
const [email] = defineField('email')
const [password] = defineField('password')

const onSubmit = handleSubmit(values => console.log(values))
</script>

<template>
  <form @submit="onSubmit" class="space-y-4">
    <div>
      <Label for="email">Email</Label>
      <Input id="email" v-model="email" type="email" />
      <p v-if="errors.email" class="text-sm text-destructive">{{ errors.email }}</p>
    </div>
    <Button type="submit">Submit</Button>
  </form>
</template>

Toast notifications

<script setup>
import { toast } from 'vue-sonner'

const showToast = () => {
  toast.success('Success!', { description: 'Changes saved.' })
}
</script>

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

Icons

The template uses @nuxt/icon with Iconify:

<template>
  <Icon name="lucide:home" />
  <Icon name="lucide:settings" class="size-6 text-primary" />
</template>

Browse icons at lucide.dev or icon-sets.iconify.design.

Nuxt UI

Nuxt UI is an open-source component library built with Tailwind CSS and Reka UI. The template uses it for documentation, blog, and AI chat pages.

Used in:

• Documentation pages (app/components/docs/DocsPage.vue) - Page layouts, navigation, TOC
• Blog pages (app/pages/blog/index.vue) - Blog post listings and layouts
• AI chat (app/pages/ai/chat/[id].vue) - Chat interface and dashboard layouts

All Nuxt UI components are auto-imported and integrate seamlessly with Nuxt Content.

Additional resources

Component libraries:

• shadcn-vue documentation
• Nuxt UI documentation
• Reka UI documentation

Form validation & icons:

• vee-validate documentation
• @nuxt/icon documentation