Styling

Akar are unstyled—and compatible with any styling solution—giving you complete control over styling.

Styling overview

Functional styles

You are in control of all aspects of styling, including functional styles. For example, by default, a Dialog Overlay won't cover the entire viewport. You're responsible for adding those styles, plus any presentation styles.

Classes

All components accept class attributes, just like normal component. This class will be passed through to the DOM element. You can use it in CSS as expected.

Teleported elements

Some elements, such as dialogs or popovers, are teleported to the body. When using scoped style to apply CSS, you will need to use deep selectors to target them.

Data attributes

When components are stateful, their state will be exposed in a data-state attribute. For example, when an Accordion Item is opened, it includes a data-state="open" attribute.

Styling with CSS

Styling a part

You can style a component part by targeting the class that you provide.

<script setup lang="ts">
import { AAccordionRoot, AAccordionItem, ... } from 'akar';
</script>

<template>
  <AAccordionRoot>
    <AAccordionItem class="AAccordionItem" value="item-1" />
    <!-- ... -->
  </AAccordionRoot>
</template>

<style>
.AAccordionItem {
  /* ... */
}
</style>

Styling a state

You can style a component state by targeting its data-state attribute.

.AccordionItem {
  border-bottom: 1px solid gainsboro;
}

.AccordionItem[data-state='open'] {
  border-bottom-width: 2px;
}

Scoped style

You can style a component using scoped style. Be wary of teleported elements, as they require the use of deep selectors to be targeted.

<script setup lang="ts">
import { ADropdownMenuRoot, ADropdownMenuItem, ... } from 'akar';
</script>

<template>
  <ADropdownMenuRoot>
    <!-- ... -->
    <ADropdownMenuPortal>
      <ADropdownMenuContent class="ADropdownMenuContent">
        <ADropdownMenuItem class="ADropdownMenuItem">An item</ADropdownMenuItem>
      </ADropdownMenuContent>
    </ADropdownMenuPortal>
  </ADropdownMenuRoot>
</template>

<style scoped>
:deep(.ADropdownMenuContent) {
  /* ... */
}

.ADropdownMenuItem {
  /* ... */
}
</style>

Styling with UnoCSS

The examples below are using UnoCSS, but you can use any library of your choice.

Styling a part

You can style a component part by targeting the class.

<script setup lang="ts">
import { AAccordionRoot, AAccordionItem, ... } from 'akar';
</script>

<template>
  <AAccordionRoot>
    <AAccordionItem class="border border-gray-400 rounded-2xl" value="item-1" />
    <!-- ... -->
  </AAccordionRoot>
</template>

Styling a state

With UnoCSS's powerful variant selector, you can style a component state by targeting its data-state attribute.

<script setup lang="ts">
import { AAccordionRoot, AAccordionItem, ... } from 'akar';
</script>

<template>
  <AAccordionRoot>
    <AAccordionItem
      class="
        border border-gray-400 rounded-2xl
        data-[state=open]:border-b-2 data-[state=open]:border-gray-800
      "
      value="item-1"
    />
    <!-- ... -->
  </AAccordionRoot>
</template>

Extending a primitive

Extending a primitive is done the same way you extend any Vue component.

custom-accordion.vue
<script setup lang="ts">
import { AAccordionItem, type AAccordionItemProps } from 'akar';

interface Props extends AAccordionItemProps {
  foo: string;
}

defineProps<Props>();
</script>

<template>
  <AAccordionItem v-bind="$props"><slot /></AAccordionItem>
</template>

Summary

Akar were designed to encapsulate accessibility concerns and other complex functionalities, while ensuring you retain complete control over styling.

For convenience, stateful components include a data-state attribute.