Namespaced Components

Akar design pattern is to create primitives for each component, and allow user to construct or compose components however they want.

However, importing all the necessary components 1-by-1 can be quite an effort, and the user might sometimes accidentally leave out an important component.

How to use?

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

<script setup lang="ts">
import { ADialog, ADropdownMenu } from 'akar/namespaced';
</script>

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

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

<template>
  <ADialog.Root>
    <ADialog.Trigger>
      Trigger
    </ADialog.Trigger>
  </ADialog.Root>

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