Styling Guide

Style headless components with data-ai-* attributes, slots, and optional base CSS.

data-ai-* attributes

Components expose semantic hooks instead of bundled Tailwind. Example selectors:

[data-ai-message][data-role="user"] { align-self: flex-end; }
[data-ai-message][data-role="assistant"] { align-self: flex-start; }
[data-ai-tool][data-status="approval-requested"] { font-weight: 600; }
[data-ai-prompt-input][data-loading] { opacity: 0.8; }

Optional base CSS

Enable aiElements.defaultStyles: true in nuxt.config.ts to load ai-elements.css (messages, tools, code blocks, workflow nodes, markdown tables).

Slots

Override any section without reimplementing logic. AiMessage slots: avatar, reasoning, tool-calls, content, sources, actions.

<AiMessage v-bind="msg">
  <template #content="{ content, isStreaming }">
    <div class="rounded-xl bg-zinc-100 px-4 py-2">
      <AiStreamingCursor v-if="isStreaming" />
    </div>
  </template>
</AiMessage>

Tailwind in docs / apps

The docs site uses Tailwind on top of headless components. Your design system stays in your app — the module only provides structure and AI SDK glue.