Namespaced components

Akar's design pattern is to create primitives for each component and let you compose them however you want.

Importing every part one-by-one can be noisy, and it is easy to forget a required piece. akar/namespaced groups the parts under one object.

How to use?

First, you need to import the namespaced components via akar/namespaced in your Vue component.

<script setup lang="ts">
import { Dialog, DropdownMenu } from 'akar/namespaced'
</script>

Then, you can use all the relevant components within the namespace.

<script setup lang="ts">
import { Dialog } from 'akar/namespaced'
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>
      Trigger
    </Dialog.Trigger>
  </Dialog.Root>

  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      …
    </Dialog.Content>
  </Dialog.Portal>
</template>