A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.

Nuxt Ark UI

npm versionnpm downloadsLicenseNuxt

Ark UI integration for Nuxt. Get fully customizable, accessible and unstyled UI components

Ark UI documentation for Vue:


  • ⛰  Automatic dynamic imports (no global components)
  • 🚠  Fully type safe
  • 🌲  Configurable component prefix (defaults to Ark)

Quick Setup

  1. Add nuxt-ark-ui dependency to your project
# Using pnpm
pnpm add -D nuxt-ark-ui

# Using yarn
yarn add --dev nuxt-ark-ui

# Using npm
npm install --save-dev nuxt-ark-ui
  1. Add nuxt-ark-ui to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-ark-ui"],

That's it! You can now use Ark UI in your Nuxt app without import the components ✨


  <div class="container mx-auto flex justify-center">
    <div class="w-full max-w-md px-2 py-16 sm:px-0">
      <ArkTabs v-slot="{ selectedValue }" default-value="Popular">
        <ArkTabList class="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
            v-for="category in Object.keys(categories)"
                'w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700',
                'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
                selectedValue === category
                  ? 'bg-white shadow'
                  : 'text-blue-100 hover:bg-white/[0.12] hover:text-white',
              {{ category }}
        <div class="mt-2">
            v-for="([key, posts], idx) in Object.entries(categories)"
              'rounded-xl bg-white p-3',
              'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
                v-for="post in posts"
                class="relative rounded-md p-3 hover:bg-gray-100"
                <h3 class="text-sm font-medium leading-5">
                  {{ post.title }}

                  class="mt-1 flex space-x-1 text-xs font-normal leading-4 text-gray-500"
                  <li>{{ }}</li>
                  <li>{{ post.commentCount }} comments</li>
                  <li>{{ post.shareCount }} shares</li>
                    'absolute inset-0 rounded-md',
                    'ring-blue-400 focus:z-10 focus:outline-none focus:ring-2',

<script setup lang="ts">
import { ref } from "vue";
const categories = ref({
  Recent: [
      id: 1,
      title: "Does drinking coffee make you smarter?",
      date: "5h ago",
      commentCount: 5,
      shareCount: 2,
  Popular: [
      id: 1,
      title: "Is tech making coffee better or worse?",
      date: "Jan 7",
      commentCount: 29,
      shareCount: 16,
  Trending: [
      id: 1,
      title: "Ask Me Anything: 10 answers to your questions about coffee",
      date: "2d ago",
      commentCount: 9,
      shareCount: 5,



  • Type: string
  • Default: Ark

Components prefix


# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release