---
title: "Namespaced components"
description: "Import a whole primitive as an object (`Dialog.Root`) instead of listing every part."
canonical_url: "https://vinicunca.dev/akar/guides/namespaced-components"
---
# Namespaced components

> Import a whole primitive as an object (`Dialog.Root`) instead of listing every part.

Akar's design pattern is to create primitives for each component and let you [compose](https://vinicunca.dev/akar/guides/composition) 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.

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

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

```vue
<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>
```


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.