opui-css 5.4.3 → 6.0.0-rc.2

package/skills/opui/references/menu.md

@@ -0,0 +1,264 @@
+# Menu
+
+A popover list of actions or links.
+
+- CSS: `opui-css/css/components/list.css` and `opui-css/css/components/menu.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/menu.md), [Astro](https://open-props-ui.netlify.app/astro/components/menu.md), [React](https://open-props-ui.netlify.app/react/components/menu.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/menu.md), [Vue](https://open-props-ui.netlify.app/vue/components/menu.md).
+
+## Menu
+
+### Parts
+
+- `menu.ui-menu[popover]` (root): The menu surface, a popover anchored to its trigger.
+- `li.ui-heading`: A group heading. HTML and CSS only.
+- `<li>`: An item, holding a `<button>` or an `<a>` with `href`. Rendered from `items`, or a `ListItem` in the default slot.
+- `.ui-start`: Optional content at the start, such as an icon.
+- `.ui-text`: The label (`label` on an item).
+- `.ui-end`: Optional content at the end, such as a shortcut in a `<kbd>` (`shortcut` on an item).
+
+### Props and modifiers
+
+- `align`: `"end"` (`.ui-align-end`), `"start"` (default). Which edge of the trigger the menu lines up with.
+- Anchor position area (HTML): `--ui-anchor-position-area`, default `"self-block-end span-self-inline-end"`. Any valid `position-area` value. Overrides the side and alignment classes. The `self-` keywords follow the menu's own direction, so the placement mirrors in a right-to-left part of a left-to-right page.
+- `bordered`: `boolean`, `.ui-bordered`. Adds a border between the items.
+- `dense`: `boolean`, `.ui-dense`. Packs the items tighter.
+- `id`: `string`. The id of the menu, which the trigger's `commandfor` points at. Required.
+- `items`: `MenuItem[]`. The items, as `{ borderTop, color, disabled, href, keepOpen, label, shortcut }` objects. `borderTop` adds a border above the item, `color: "critical"` marks a destructive one, a disabled link has no `href`, and `keepOpen` keeps the menu open on click. Other keys go to the item's `<a>` or `<button>`.
+- Items (HTML): `borderTop` (`li.ui-border-top`), `close` (`li > button[command="hide-popover"]`), `critical` (`li.ui-critical`), `disabled` (`li > button[disabled], li > a[aria-disabled="true"]`). The item states. `close` closes the whole menu on click, also from a submenu, and only button items take it. A disabled link has no `href`.
+- `popover`: `"auto"` (default), `"manual"` (`[popover="manual"]`). The popover type. With `"manual"`, Esc and a click outside don't close the menu, and opening another menu doesn't either.
+- `side`: `"block-end"` (default), `"block-start"` (`.ui-block-start`), `"inline-end"` (`.ui-inline-end`), `"inline-start"` (`.ui-inline-start`). The side of the trigger the menu opens on.
+- Trigger (HTML): `button[commandfor][command="toggle-popover"]`. Opens the menu. `commandfor` is the menu id.
+
+### Slots
+
+- `default`: The items, such as `ListItem`s.
+
+### Notes
+
+- HTML: Items are built like `List` items: icons in `.ui-start`, the text in `.ui-text` and shortcuts in `.ui-end`. Open the menu with a button that has `commandfor` set to the menu id and `command="toggle-popover"`.
+- Astro and Vue: Attributes that aren't props go to the `<menu>`. Item keys that aren't listed go to the item's `<a>` or `<button>`, like `target` or `data-*`.
+- React: Attributes that aren't props go to the `<menu>`. Item keys that aren't listed go to the item's `<a>` or `<button>`, like `onClick`, `target` or `data-*`.
+- Svelte: Attributes that aren't props go to the `<menu>`. Item keys that aren't listed go to the item's `<a>` or `<button>`, like `onclick`, `target` or `data-*`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### list.css
+
+- `--_bg-color`: Background of the list and its items. Defaults to `--ui-surface-filled`, `.ui-transparent` and `.ui-tonal` set it.
+- `--_description-text-color`: Text color of the description paragraph in an item. `--ui-text-subtle`, and `--ui-on-selected` on a selected or current row when a theme sets it.
+- `--_divider-border-color`: Color of the lines between items in `.ui-bordered` and on `.ui-border-top`. Defaults to `--ui-border-color`, mixed with 20% `--ui-text-strong` in `.ui-tonal`.
+- `--_hover-bg-color`: Background of hovered items, from `--ui-primary`.
+- `--_item-ease`: Easing of the row transitions. Defaults to `--ui-ease`.
+- `--_item-gap`: Gap between the content of an item. Smaller in `.ui-dense`.
+- `--_item-padding-inline`: Horizontal padding of items, headings and options. `--ui-list-item-padding-inline`, or `--ui-space-3` when a theme leaves it unset.
+- `--_motion`: Motion multiplier for the row transitions of a `.ui-list`. `0` turns them off. A `Menu` and a `Select` read their own.
+- `--_radius`: The corner radius of a `.ui-list`. Defaults to `--ui-radius`, and `0` when the list is a direct child of a `Card`, `Accordion` or `Dialog`, which round and clip it themselves.
+- `--_selected-bg-color`: Background of selected and current items and options. `--ui-selected` when the theme sets it, otherwise `--ui-primary` at `--ui-state-selected-alpha-accent`, stronger than `--_hover-bg-color`. With more contrast it is `--_hover-bg-color`, so the text keeps 7:1, and the bar marks the row.
+- `--_selected-indicator-bg-color`: Color of the bar on the start edge of selected and current items and options, which marks them without relying on the fill. Defaults to `--ui-selected-strong`.
+- `--_selected-indicator-size`: Width of the bar on selected and current items. Defaults to `--ui-border-width-thick`.
+- `--_separator-gap`: Space around the lines between items in `.ui-bordered` and on `.ui-border-top`. Smaller in `.ui-dense`.
+- `--_start-image-size`: Width of a square image in `.ui-start`.
+- `--_start-size`: Maximum size of leading and trailing icons, and the indent of `.ui-inset` items. Smaller in `.ui-dense`.
+- `--_start-video-size`: Height of a video in `.ui-start`, which keeps a 16:9 ratio.
+
+Outputs: `--_item-duration` and `--_selected-shadow`.
+
+### menu.css
+
+- `--_bg-color`: The background. Defaults to `--ui-surface-elevated`.
+- `--_border-color`: The edge color. `--ui-border-color-raised` when a theme sets it, otherwise `--ui-border-color-on-raised`.
+- `--_border-width`: The border width. Defaults to `--ui-border-width`.
+- `--_divider-border-color`: Color of the item separators. Defaults to `--ui-border-color-on-raised`.
+- `--_max-block-size`: Maximum height.
+- `--_min-block-size`: Height a popover menu keeps when space is tight, unless its content is shorter. Needs `calc-size()`.
+- `--_min-inline-size`: Minimum width. A popover menu is also at least as wide as its invoker.
+- `--_motion`: Motion multiplier for the transitions. `0` turns them off.
+- `--_offset`: Gap between a popover menu and its invoker.
+- `--_radius`: The corner radius. Defaults to `--ui-menu-radius`, or `--ui-radius` when the theme doesn't set it.
+- `--_shadow`: The shadow. Defaults to `--ui-shadow-overlay`.
+
+Outputs: `--_duration`, `--_ease`, `--_ease-move`, `--_fit-max-block-size`, `--_hover-bg-color`, `--_margin-block`, `--_margin-inline`, `--_position-area`, `--_side` and `--_span`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-filled`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-border-width-thick`, `--ui-choice-size-small`, `--ui-control-size`, `--ui-control-size-small`, `--ui-disabled-opacity`, `--ui-duration-fast`, `--ui-duration-slow`, `--ui-ease`, `--ui-ease-enter`, `--ui-ease-exit`, `--ui-ease-move`, `--ui-field-border-color-on-filled`, `--ui-field-border-color-on-raised`, `--ui-focus-ring-inset`, `--ui-font-code`, `--ui-font-size-caption`, `--ui-font-size-small`, `--ui-font-weight-bold`, `--ui-font-weight-normal`, `--ui-icon-size`, `--ui-icon-size-small`, `--ui-line-height`, `--ui-list-item-padding-inline`, `--ui-menu-radius`, `--ui-motion`, `--ui-on-selected`, `--ui-palette-accent`, `--ui-palette-text`, `--ui-primary`, `--ui-radius`, `--ui-selected`, `--ui-selected-strong`, `--ui-shadow-overlay`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-6`, `--ui-state-hover-alpha-accent`, `--ui-state-selected-alpha-accent`, `--ui-surface-elevated`, `--ui-surface-filled`, `--ui-surface-tonal`, `--ui-switch-thumb-size-small`, `--ui-switch-track-block-size-small`, `--ui-switch-track-inline-size-small`, `--ui-text`, `--ui-text-strong` and `--ui-text-subtle`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<button
+  class="ui-button ui-outlined"
+  type="button"
+  command="toggle-popover"
+  commandfor="menu-basics-1"
+>
+  Options
+</button>
+<menu class="ui-menu" id="menu-basics-1" popover>
+  <li>
+    <button type="button" command="hide-popover" commandfor="menu-basics-1">
+      <div class="ui-text">
+        <p>Edit</p>
+      </div>
+      <div class="ui-end">
+        <kbd>Ctrl+E</kbd>
+      </div>
+    </button>
+  </li>
+  <li>
+    <button type="button" command="hide-popover" commandfor="menu-basics-1">
+      <div class="ui-text">
+        <p>Duplicate</p>
+      </div>
+      <div class="ui-end">
+        <kbd>Ctrl+D</kbd>
+      </div>
+    </button>
+  </li>
+  <li>
+    <button disabled type="button">
+      <div class="ui-text">
+        <p>Archive</p>
+      </div>
+    </button>
+  </li>
+  <li>
+    <a href="/guide/getting-started/">
+      <div class="ui-text">
+        <p>Help</p>
+      </div>
+    </a>
+  </li>
+  <li class="ui-border-top ui-critical">
+    <button type="button" command="hide-popover" commandfor="menu-basics-1">
+      <div class="ui-text">
+        <p>Delete</p>
+      </div>
+    </button>
+  </li>
+</menu>
+```
+
+## Astro
+
+`import { Menu } from "opui-css/astro"`
+
+### Example: Basics
+
+```astro
+---
+import { Button, Menu } from "opui-css/astro"
+---
+
+<Button command="toggle-popover" commandfor="menu-basics-1" variant="outlined">
+  Options
+</Button>
+<Menu
+  id="menu-basics-1"
+  items={[
+    { label: "Edit", shortcut: "Ctrl+E" },
+    { label: "Duplicate", shortcut: "Ctrl+D" },
+    { disabled: true, label: "Archive" },
+    { href: "/guide/getting-started/", label: "Help" },
+    { borderTop: true, color: "critical", label: "Delete" },
+  ]}
+/>
+```
+
+## React
+
+`import { Menu } from "opui-css/react"`
+
+- Client components (`"use client"`): `Menu`.
+
+### Example: Basics
+
+```tsx
+import { Button, Menu } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <>
+      <Button
+        command="toggle-popover"
+        commandfor="menu-basics-1"
+        variant="outlined"
+      >
+        Options
+      </Button>
+      <Menu
+        id="menu-basics-1"
+        items={[
+          { label: "Edit", shortcut: "Ctrl+E" },
+          { label: "Duplicate", shortcut: "Ctrl+D" },
+          { disabled: true, label: "Archive" },
+          { href: "/guide/getting-started/", label: "Help" },
+          { borderTop: true, color: "critical", label: "Delete" },
+        ]}
+      />
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Menu } from "opui-css/svelte"`
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { Button, Menu } from "opui-css/svelte"
+</script>
+
+<Button command="toggle-popover" commandfor="menu-basics-1" variant="outlined">
+  Options
+</Button>
+<Menu
+  id="menu-basics-1"
+  items={[
+    { label: "Edit", shortcut: "Ctrl+E" },
+    { label: "Duplicate", shortcut: "Ctrl+D" },
+    { disabled: true, label: "Archive" },
+    { href: "/guide/getting-started/", label: "Help" },
+    { borderTop: true, color: "critical", label: "Delete" },
+  ]}
+/>
+```
+
+## Vue
+
+`import { Menu } from "opui-css/vue"`
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Button, Menu } from "opui-css/vue"
+</script>
+
+<template>
+  <Button
+    command="toggle-popover"
+    commandfor="menu-basics-1"
+    variant="outlined"
+  >
+    Options
+  </Button>
+  <Menu
+    id="menu-basics-1"
+    :items="[
+      { label: 'Edit', shortcut: 'Ctrl+E' },
+      { label: 'Duplicate', shortcut: 'Ctrl+D' },
+      { disabled: true, label: 'Archive' },
+      { href: '/guide/getting-started/', label: 'Help' },
+      { borderTop: true, color: 'critical', label: 'Delete' },
+    ]"
+  />
+</template>
+```

package/skills/opui/references/message.md

@@ -0,0 +1,285 @@
+# Message
+
+Chat bubbles that group by sender, with attachments, reactions and a typing indicator.
+
+- CSS: `opui-css/css/components/message.css` and `opui-css/css/components/avatar.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/message.md), [Astro](https://open-props-ui.netlify.app/astro/components/message.md), [React](https://open-props-ui.netlify.app/react/components/message.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/message.md), [Vue](https://open-props-ui.netlify.app/vue/components/message.md).
+
+## Messages
+
+### Parts
+
+- `ol.ui-messages` (root): The conversation, an ordered list.
+- `li.ui-message` (`Message`): A message. Consecutive messages on the same side group into a run.
+
+### Slots
+
+- `default`: The messages, and any other `li` between them, such as a date `Divider`, which starts a new run.
+
+### Notes
+
+- Name the list with `aria-label`, such as the other person or the channel, so a screen reader knows which conversation it is.
+
+## Message
+
+### Parts
+
+- `li.ui-message` (root): A message.
+- `.ui-avatar` (slot `start`): The sender's `Avatar`, from the `start` slot, shown on the last message of a run.
+- `.ui-content` (slot `default`): The bubble.
+- `.ui-header` (prop `author`): The sender's name.
+- `.ui-footer` (prop `datetime`, prop `time`): The time, and content such as a read receipt.
+- `.ui-end` (slot `end`): Content after the time, such as a read receipt.
+- `.ui-bottom` (slot `bottom`): Reactions in a `ToggleGroup`, drawn as separate pills over the bottom edge of the bubble.
+
+### Props and modifiers
+
+- `author`: `string`. The sender, shown on the first message of a run and read by screen readers on every message.
+- `datetime`: `string`, `time[datetime]`. The machine-readable date and time of `time`.
+- `newAuthor`: `boolean`, `.ui-new-author`. Starts a new run when the author changes, for a group chat.
+- `outgoing`: `boolean`, `.ui-outgoing`. A message you sent. It aligns to the end in the primary color, and its author is visually hidden.
+- `time`: `string`. The time as shown, at the end of the bubble.
+- `typing`: `boolean`, `.ui-typing`. Shows animated dots instead of the content. The default slot becomes the status text for screen readers.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### message.css
+
+- `--_avatar-size`: Size of the avatar next to the bubble. Defaults to `--ui-control-size-small`.
+- `--_bg-color`: Background of the bubble. Defaults to `--ui-surface-tonal`, and `--ui-primary` with `.ui-outgoing`.
+- `--_max-inline-size`: Widest bubble. Defaults to `36rem`, or 85% of the list when that is narrower.
+- `--_motion`: Multiplies the typing animation. Defaults to `--ui-motion`, `0` under reduced motion.
+- `--_radius`: Radius of the bubble corners. Defaults to `--ui-radius`, larger with `corner-shape: squircle`.
+- `--_text-color`: Text color in the bubble. Defaults to `--ui-text-strong`, and `--ui-on-primary` with `.ui-outgoing`.
+- `--_tight-radius`: Radius of the corners inside a run. Defaults to `--ui-radius-small`.
+
+Outputs: `--_block-end-radius`, `--_block-start-radius`, `--_divider-gap`, `--_dot-image`, `--_font-size`, `--_selected-bg-color` and `--_size`.
+
+### avatar.css
+
+- `--_bg-color`: The background. Defaults to `--ui-primary`. An avatar with an `img` is always transparent.
+- `--_font-size`: The font size of initials. Set by the size classes.
+- `--_icon-size`: The maximum width of an `svg`. Set by `.ui-x-small` and `.ui-small`.
+- `--_margin`: How much avatars in a `.ui-avatar-group` overlap. Set on the group.
+- `--_outline-color`: The ring around each avatar in a `.ui-avatar-group`. Defaults to `--ui-surface`. Set on the group.
+- `--_outline-width`: Width of the ring around each avatar in a `.ui-avatar-group`. Set on the group.
+- `--_outlined-border-color`: The border of `.ui-outlined`. Defaults to `--ui-border-color`.
+- `--_size`: The width and height. Defaults to `--ui-control-size`, set by the size classes.
+- `--_text-color`: The text and icon color. Defaults to `--ui-on-primary`.
+- `--_tonal-bg-color`: The background of `.ui-tonal`. Defaults to `--ui-primary-tonal`, or the palette tint.
+- `--_tonal-text-color`: The text and icon color of `.ui-tonal`. Defaults to `--ui-on-primary-tonal`, or the palette text on the tint.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-width`, `--ui-button-size-x-small`, `--ui-contrast`, `--ui-control-size-small`, `--ui-font-size-caption`, `--ui-font-weight-semibold`, `--ui-motion`, `--ui-on-primary`, `--ui-on-selected`, `--ui-primary`, `--ui-radius`, `--ui-radius-round`, `--ui-radius-small`, `--ui-selected`, `--ui-selected-strong`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-space-7`, `--ui-state-selected-alpha-accent`, `--ui-surface`, `--ui-surface-tonal`, `--ui-text-strong` and `--ui-text-subtle`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<ol class="ui-messages" role="list" aria-label="Messages with Saga">
+  <li class="ui-message">
+    <div class="ui-avatar" aria-label="Saga Nyström" role="img">SN</div>
+    <div class="ui-content">
+      <p class="ui-header">Saga</p>
+      <p>Did you get a chance to look at the pricing proposal?</p>
+      <p class="ui-footer">
+        <time datetime="2026-10-08T14:02">14:02</time>
+      </p>
+    </div>
+  </li>
+  <li class="ui-message">
+    <div class="ui-avatar" aria-label="Saga Nyström" role="img">SN</div>
+    <div class="ui-content">
+      <p class="ui-header">Saga</p>
+      <p>No rush, Friday is fine.</p>
+      <p class="ui-footer">
+        <time datetime="2026-10-08T14:03">14:03</time>
+      </p>
+    </div>
+  </li>
+  <li class="ui-message ui-outgoing">
+    <div class="ui-content">
+      <p class="ui-header">You</p>
+      <p>Yes, looks good. I'd lead with the annual plan.</p>
+      <p class="ui-footer">
+        <time datetime="2026-10-08T14:18">14:18</time>
+      </p>
+    </div>
+  </li>
+  <li class="ui-message ui-outgoing">
+    <div class="ui-content">
+      <p class="ui-header">You</p>
+      <p>Can you add the Bergen Bikes case study too?</p>
+      <p class="ui-footer">
+        <time datetime="2026-10-08T14:19">14:19</time>
+        <span class="ui-end">Read</span>
+      </p>
+    </div>
+  </li>
+</ol>
+```
+
+## Astro
+
+`import { Message, Messages } from "opui-css/astro"`
+
+- `Message` named slots: `bottom`, `end` and `start`. Fill one with `slot="bottom"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { Avatar, Message, Messages } from "opui-css/astro"
+---
+
+<Messages aria-label="Messages with Saga">
+  <Message author="Saga" datetime="2026-10-08T14:02" time="14:02">
+    <Avatar aria-label="Saga Nyström" role="img" slot="start">SN</Avatar>
+    <p>Did you get a chance to look at the pricing proposal?</p>
+  </Message>
+  <Message author="Saga" datetime="2026-10-08T14:03" time="14:03">
+    <Avatar aria-label="Saga Nyström" role="img" slot="start">SN</Avatar>
+    <p>No rush, Friday is fine.</p>
+  </Message>
+  <Message author="You" datetime="2026-10-08T14:18" outgoing time="14:18">
+    <p>Yes, looks good. I'd lead with the annual plan.</p>
+  </Message>
+  <Message author="You" datetime="2026-10-08T14:19" outgoing time="14:19">
+    <p>Can you add the Bergen Bikes case study too?</p>
+    <Fragment slot="end">Read</Fragment>
+  </Message>
+</Messages>
+```
+
+## React
+
+`import { Message, Messages } from "opui-css/react"`
+
+- `Message` slot props (`ReactNode`): `bottom`, `children`, `end` and `start`.
+
+### Example: Basics
+
+```tsx
+import { Avatar, Message, Messages } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <Messages aria-label="Messages with Saga">
+      <Message
+        author="Saga"
+        datetime="2026-10-08T14:02"
+        start={
+          <Avatar aria-label="Saga Nyström" role="img">
+            SN
+          </Avatar>
+        }
+        time="14:02"
+      >
+        <p>Did you get a chance to look at the pricing proposal?</p>
+      </Message>
+      <Message
+        author="Saga"
+        datetime="2026-10-08T14:03"
+        start={
+          <Avatar aria-label="Saga Nyström" role="img">
+            SN
+          </Avatar>
+        }
+        time="14:03"
+      >
+        <p>No rush, Friday is fine.</p>
+      </Message>
+      <Message author="You" datetime="2026-10-08T14:18" outgoing time="14:18">
+        <p>Yes, looks good. I'd lead with the annual plan.</p>
+      </Message>
+      <Message
+        author="You"
+        datetime="2026-10-08T14:19"
+        end="Read"
+        outgoing
+        time="14:19"
+      >
+        <p>Can you add the Bergen Bikes case study too?</p>
+      </Message>
+    </Messages>
+  )
+}
+```
+
+## Svelte
+
+`import { Message, Messages } from "opui-css/svelte"`
+
+- `Message` slot snippets: `bottom`, `children`, `end` and `start`.
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import { Avatar, Message, Messages } from "opui-css/svelte"
+</script>
+
+<Messages aria-label="Messages with Saga">
+  <Message author="Saga" datetime="2026-10-08T14:02" time="14:02">
+    {#snippet start()}
+      <Avatar aria-label="Saga Nyström" role="img">SN</Avatar>
+    {/snippet}
+    <p>Did you get a chance to look at the pricing proposal?</p>
+  </Message>
+  <Message author="Saga" datetime="2026-10-08T14:03" time="14:03">
+    {#snippet start()}
+      <Avatar aria-label="Saga Nyström" role="img">SN</Avatar>
+    {/snippet}
+    <p>No rush, Friday is fine.</p>
+  </Message>
+  <Message author="You" datetime="2026-10-08T14:18" outgoing time="14:18">
+    <p>Yes, looks good. I'd lead with the annual plan.</p>
+  </Message>
+  <Message author="You" datetime="2026-10-08T14:19" outgoing time="14:19">
+    <p>Can you add the Bergen Bikes case study too?</p>
+    {#snippet end()}Read{/snippet}
+  </Message>
+</Messages>
+```
+
+## Vue
+
+`import { Message, Messages } from "opui-css/vue"`
+
+- `Message` named slots: `bottom`, `end` and `start`. Fill one with `<template #bottom>`.
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Avatar, Message, Messages } from "opui-css/vue"
+</script>
+
+<template>
+  <Messages aria-label="Messages with Saga">
+    <Message author="Saga" datetime="2026-10-08T14:02" time="14:02">
+      <template #start>
+        <Avatar aria-label="Saga Nyström" role="img">SN</Avatar>
+      </template>
+      <p>Did you get a chance to look at the pricing proposal?</p>
+    </Message>
+    <Message author="Saga" datetime="2026-10-08T14:03" time="14:03">
+      <template #start>
+        <Avatar aria-label="Saga Nyström" role="img">SN</Avatar>
+      </template>
+      <p>No rush, Friday is fine.</p>
+    </Message>
+    <Message author="You" datetime="2026-10-08T14:18" outgoing time="14:18">
+      <p>Yes, looks good. I'd lead with the annual plan.</p>
+    </Message>
+    <Message author="You" datetime="2026-10-08T14:19" outgoing time="14:19">
+      <p>Can you add the Bergen Bikes case study too?</p>
+      <template #end>Read</template>
+    </Message>
+  </Messages>
+</template>
+```