opui-css 5.4.2 → 6.0.0-rc.1

package/skills/opui/references/accordion.md

@@ -0,0 +1,253 @@
+# Accordion
+
+Lets you show and hide content, on its own or as a group.
+
+- CSS: `opui-css/css/components/accordion.css` and `opui-css/css/components/card.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/accordion.md), [Astro](https://open-props-ui.netlify.app/astro/components/accordion.md), [React](https://open-props-ui.netlify.app/react/components/accordion.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/accordion.md), [Vue](https://open-props-ui.netlify.app/vue/components/accordion.md).
+
+## Accordion
+
+### Parts
+
+- `details.ui-accordion` (root): Container element.
+- `<summary>` (`AccordionSummary`): The always visible header.
+- `<svg class="ui-marker">`: The marker. In Astro, React, Svelte and Vue, `AccordionSummary` renders a chevron by default. Only `.ui-marker` animates.
+- `.ui-content` (`AccordionContent`): The collapsible content.
+- `.ui-actions` (`AccordionActions`): A group of actions, such as buttons.
+
+### Props and modifiers
+
+- `markerAnimation`: `"flip"` (`.ui-marker-animation-flip`), `"rotate"` (default), `"turn"` (`.ui-marker-animation-turn`). How the marker animates when the accordion opens. `rotate` turns it upside down, `flip` mirrors it, and `turn` gives a chevron that points to the inline end a quarter turn, so it points down when open.
+- `name`: `string`, `[name]`. Groups accordions so only one of them can be open at a time.
+- `open`: `boolean`, `[open]`. Whether the accordion is open.
+- `variant`: `"elevated"` (`.ui-elevated`), `"outlined"` (`.ui-outlined`), `"plain"` (default), `"tonal"` (`.ui-tonal`), `"transparent"` (`.ui-transparent`). The variant to use. The default `plain` accordion has the page surface and no border, like a Card. `transparent` has no surface, border or padding.
+
+### Slots
+
+- `default`: The accordion parts.
+
+### Notes
+
+- HTML: To group accordions, wrap them in a `.ui-card[role="group"]`. A variant on the group styles every accordion in it.
+- Astro, React, Svelte and Vue: Build it from `AccordionSummary`, `AccordionContent` and `AccordionActions`. To group accordions, wrap them in a `<Card role="group">`. Its `variant` styles every accordion in it.
+
+## AccordionSummary
+
+### Parts
+
+- `<summary>` (root): The always visible header.
+- `<svg class="ui-marker">` (slot `marker`): The marker. Renders a chevron by default. Only `.ui-marker` animates.
+
+### Slots
+
+- `default`: The summary text.
+
+## AccordionActions
+
+### Parts
+
+- `.ui-actions` (root): A group of actions, such as buttons.
+
+### Props and modifiers
+
+- `align`: `"end"` (default), `"start"` (`.ui-align-start`). Alignment for the actions.
+
+### Slots
+
+- `default`: The actions, such as buttons.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### accordion.css
+
+- `--_actions-gap`: Space between the buttons in `.ui-actions`.
+- `--_actions-margin-block-start`: Space above `.ui-actions`.
+- `--_actions-padding-block-end`: Bottom padding of `.ui-actions`. Defaults to `--_summary-padding-block`.
+- `--_actions-padding-inline`: Inline padding of `.ui-actions`. Defaults to `--_content-padding-inline`, and at least the focus ring's space.
+- `--_content-padding-block`: Block padding of `.ui-content`.
+- `--_content-padding-inline`: Inline padding of `.ui-content`. Defaults to `--_padding-inline`.
+- `--_divider-border-color`: Color of the border between items in a group. Defaults to `--ui-border-color`.
+- `--_ease`: Easing of the transitions. Defaults to `--ui-ease`.
+- `--_focus-ring-offset`: Offset of the `summary` focus ring. Inside the summary, except in `.ui-transparent`.
+- `--_group-radius`: Corner radius of the first and last item in a group. Defaults to `--ui-radius`.
+- `--_item-padding-inline`: Inline padding of the items in a group. `0` when the card is `.ui-transparent`.
+- `--_item-summary-padding-inline`: Inline padding of the item `summary` in a group. Defaults to `--_item-padding-inline`.
+- `--_margin-inline`: The inline margin. `0`, except in `.ui-transparent` outside a group.
+- `--_motion`: Motion multiplier for `--_duration`. `0` turns the transitions off.
+- `--_padding-inline`: Inline padding of `summary`, `.ui-content` and `.ui-actions`. `0` in `.ui-transparent`.
+- `--_radius`: The corner radius, also of the `summary` focus ring. Defaults to `--ui-radius`.
+- `--_summary-padding-block`: Block padding of `summary`.
+- `--_summary-padding-inline`: Inline padding of `summary`. Defaults to `--_padding-inline`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_border-width`, `--_duration`, `--_overflow` and `--_shadow`.
+
+### card.css
+
+- `--_ease`: Easing of the focus ring animation. Defaults to `--ui-ease`.
+- `--_elevated-bg-color`: Background of `.ui-elevated`. Defaults to `--ui-surface-elevated`.
+- `--_elevated-shadow`: Shadow of `.ui-elevated`. Defaults to `--ui-shadow-elevated`.
+- `--_motion`: Motion multiplier for the focus ring animation. `0` turns it off.
+- `--_outlined-border-color`: Border color of `.ui-outlined`. Defaults to `--ui-border-color`.
+- `--_padding`: Padding of the header, content and actions. `--ui-card-padding`, or `--ui-space-3` when a theme leaves it unset.
+- `--_surface-bg-color`: Background of default and `.ui-outlined` cards, and border color of `.ui-tonal` and `.ui-elevated` unless a theme sets `--ui-border-color-raised`. Defaults to `--ui-surface`.
+- `--_tonal-bg-color`: Background of `.ui-tonal`. Defaults to `--ui-surface-tonal`.
+
+Outputs: `--_bg-color`, `--_border-color`, `--_border-width`, `--_duration` and `--_shadow`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-color`, `--ui-border-color-on-raised`, `--ui-border-color-raised`, `--ui-border-width`, `--ui-card-padding`, `--ui-duration`, `--ui-ease`, `--ui-field-border-color-on-raised`, `--ui-focus-ring-color`, `--ui-focus-ring-inset`, `--ui-focus-ring-offset`, `--ui-focus-ring-style`, `--ui-focus-ring-width`, `--ui-font-size-body`, `--ui-font-size-caption`, `--ui-font-weight-bold`, `--ui-line-height-tight`, `--ui-motion`, `--ui-radius`, `--ui-shadow-elevated`, `--ui-shadow-surface`, `--ui-space-1`, `--ui-space-2`, `--ui-space-3`, `--ui-surface`, `--ui-surface-elevated`, `--ui-surface-tonal` and `--ui-text`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Basics
+
+```html
+<details class="ui-accordion">
+  <summary>
+    Accordion
+    <svg
+      aria-hidden="true"
+      class="ui-marker"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414"
+      />
+    </svg>
+  </summary>
+  <div class="ui-content">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
+      nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis
+      neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id
+      sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse
+      potenti. Cras ut ante in libero tempus sodales sed quis dolor.
+    </p>
+  </div>
+</details>
+```
+
+## Astro
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/astro"`
+
+- `AccordionSummary` named slots: `marker`. Fill one with `slot="marker"` on a child.
+
+### Example: Basics
+
+```astro
+---
+import { Accordion, AccordionContent, AccordionSummary } from "opui-css/astro"
+---
+
+<Accordion>
+  <AccordionSummary>Accordion</AccordionSummary>
+  <AccordionContent>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
+      nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis
+      neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id
+      sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse
+      potenti. Cras ut ante in libero tempus sodales sed quis dolor.
+    </p>
+  </AccordionContent>
+</Accordion>
+```
+
+## React
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/react"`
+
+- `AccordionSummary` slot props (`ReactNode`): `children` and `marker`.
+
+### Example: Basics
+
+```tsx
+import { Accordion, AccordionContent, AccordionSummary } from "opui-css/react"
+
+export default function Basics() {
+  return (
+    <Accordion>
+      <AccordionSummary>Accordion</AccordionSummary>
+      <AccordionContent>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+          sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero,
+          ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare.
+          Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit.
+          Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis
+          dolor.
+        </p>
+      </AccordionContent>
+    </Accordion>
+  )
+}
+```
+
+## Svelte
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/svelte"`
+
+- `AccordionSummary` slot snippets: `children` and `marker`.
+
+### Example: Basics
+
+```svelte
+<script lang="ts">
+  import {
+    Accordion,
+    AccordionContent,
+    AccordionSummary,
+  } from "opui-css/svelte"
+</script>
+
+<Accordion>
+  <AccordionSummary>Accordion</AccordionSummary>
+  <AccordionContent>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales,
+      nulla sit amet porttitor rhoncus, lacus ex vestibulum libero, ac mollis
+      neque ante id justo. Nam tempor euismod nisi ac ornare. Pellentesque id
+      sapien lacinia, venenatis est aliquam, dignissim elit. Suspendisse
+      potenti. Cras ut ante in libero tempus sodales sed quis dolor.
+    </p>
+  </AccordionContent>
+</Accordion>
+```
+
+## Vue
+
+`import { Accordion, AccordionActions, AccordionContent, AccordionSummary } from "opui-css/vue"`
+
+- `AccordionSummary` named slots: `marker`. Fill one with `<template #marker>`.
+
+### Example: Basics
+
+```vue
+<script setup lang="ts">
+import { Accordion, AccordionContent, AccordionSummary } from "opui-css/vue"
+</script>
+
+<template>
+  <Accordion>
+    <AccordionSummary>Accordion</AccordionSummary>
+    <AccordionContent>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+        sodales, nulla sit amet porttitor rhoncus, lacus ex vestibulum libero,
+        ac mollis neque ante id justo. Nam tempor euismod nisi ac ornare.
+        Pellentesque id sapien lacinia, venenatis est aliquam, dignissim elit.
+        Suspendisse potenti. Cras ut ante in libero tempus sodales sed quis
+        dolor.
+      </p>
+    </AccordionContent>
+  </Accordion>
+</template>
+```

package/skills/opui/references/anchor.md

@@ -0,0 +1,213 @@
+# Anchor
+
+A structural primitive to enable CSS Anchor Positioning on stuff.
+
+- CSS: `opui-css/css/components/anchor.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/anchor.md), [Astro](https://open-props-ui.netlify.app/astro/components/anchor.md), [React](https://open-props-ui.netlify.app/react/components/anchor.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/anchor.md), [Vue](https://open-props-ui.netlify.app/vue/components/anchor.md).
+
+## Anchor
+
+### Parts
+
+- `.ui-anchor` (root): Container element. Scopes the anchor to its content.
+- `& > :first-child`: The content the floating content is anchored to.
+- `.ui-floating` (`AnchorContent`): The floating content.
+
+### Props and modifiers
+
+- `id`: `string`. The id of the root. With `trigger="hover"`, the id of `AnchorContent`. Add `interestfor` with the same id to the trigger. Required with `trigger="hover"`.
+- `positionArea`: `string`, `--ui-anchor-position-area`, default `"self-start self-end"`. Any valid `position-area` value. Controls where the floating content is placed. The `self-` keywords follow the content's own direction, so the placement mirrors in a right-to-left part of a left-to-right page.
+- `trigger`: `"hover"` (`.ui-floating[popover="hint"]`). Shows the floating content on hover and focus with `popover="hint"`. Without it, the content always shows.
+
+### Slots
+
+- `default`: The content to anchor to, followed by `AnchorContent`.
+
+### Notes
+
+- HTML: To show on hover, give `.ui-floating` `popover="hint"` and an id. Add `interestfor` with that id to the trigger.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### anchor.css
+
+- `--_shift-x`: Horizontal shift of `.ui-floating`. Defaults to `0`.
+- `--_shift-y`: Vertical shift of `.ui-floating`. Defaults to `0`.
+
+## HTML
+
+### Example: Always visible
+
+```html
+<span class="ui-anchor" style="--ui-anchor-position-area: inline-end">
+  <button type="button" class="ui-button ui-outlined">Export</button>
+  <span class="ui-floating">
+    <div class="ui-card ui-tonal coach-mark">
+      <div class="ui-content">
+        <strong>New</strong> Export to PDF and CSV from the same menu.
+      </div>
+    </div>
+  </span>
+</span>
+
+<style>
+  .coach-mark {
+    font-size: var(--ui-font-size-body);
+    margin-inline-start: var(--ui-space-2);
+    max-inline-size: 220px;
+  }
+</style>
+```
+
+## Astro
+
+`import { Anchor, AnchorContent } from "opui-css/astro"`
+
+### Example: Always visible
+
+```astro
+---
+import {
+  Anchor,
+  AnchorContent,
+  Button,
+  Card,
+  CardContent,
+} from "opui-css/astro"
+---
+
+<Anchor positionArea="inline-end">
+  <Button variant="outlined">Export</Button>
+  <AnchorContent>
+    <Card variant="tonal" class="coach-mark">
+      <CardContent>
+        <strong>New</strong> Export to PDF and CSV from the same menu.
+      </CardContent>
+    </Card>
+  </AnchorContent>
+</Anchor>
+
+<style>
+  .coach-mark {
+    font-size: var(--ui-font-size-body);
+    margin-inline-start: var(--ui-space-2);
+    max-inline-size: 220px;
+  }
+</style>
+```
+
+## React
+
+`import { Anchor, AnchorContent } from "opui-css/react"`
+
+- Client components (`"use client"`): `Anchor`.
+
+### Example: Always visible
+
+```tsx
+import {
+  Anchor,
+  AnchorContent,
+  Button,
+  Card,
+  CardContent,
+} from "opui-css/react"
+
+export default function AlwaysVisible() {
+  return (
+    <>
+      <Anchor positionArea="inline-end">
+        <Button variant="outlined">Export</Button>
+        <AnchorContent>
+          <Card variant="tonal" className="coach-mark">
+            <CardContent>
+              <strong>New</strong> Export to PDF and CSV from the same menu.
+            </CardContent>
+          </Card>
+        </AnchorContent>
+      </Anchor>
+      <style>{`
+        .coach-mark {
+          font-size: var(--ui-font-size-body);
+          margin-inline-start: var(--ui-space-2);
+          max-inline-size: 220px;
+        }
+      `}</style>
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Anchor, AnchorContent } from "opui-css/svelte"`
+
+### Example: Always visible
+
+```svelte
+<script lang="ts">
+  import {
+    Anchor,
+    AnchorContent,
+    Button,
+    Card,
+    CardContent,
+  } from "opui-css/svelte"
+</script>
+
+<Anchor positionArea="inline-end">
+  <Button variant="outlined">Export</Button>
+  <AnchorContent>
+    <Card variant="tonal" class="coach-mark">
+      <CardContent>
+        <strong>New</strong> Export to PDF and CSV from the same menu.
+      </CardContent>
+    </Card>
+  </AnchorContent>
+</Anchor>
+
+<style>
+  :global {
+    .coach-mark {
+      font-size: var(--ui-font-size-body);
+      margin-inline-start: var(--ui-space-2);
+      max-inline-size: 220px;
+    }
+  }
+</style>
+```
+
+## Vue
+
+`import { Anchor, AnchorContent } from "opui-css/vue"`
+
+### Example: Always visible
+
+```vue
+<script setup lang="ts">
+import { Anchor, AnchorContent, Button, Card, CardContent } from "opui-css/vue"
+</script>
+
+<template>
+  <Anchor positionArea="inline-end">
+    <Button variant="outlined">Export</Button>
+    <AnchorContent>
+      <Card variant="tonal" class="coach-mark">
+        <CardContent>
+          <strong>New</strong> Export to PDF and CSV from the same menu.
+        </CardContent>
+      </Card>
+    </AnchorContent>
+  </Anchor>
+</template>
+
+<style>
+.coach-mark {
+  font-size: var(--ui-font-size-body);
+  margin-inline-start: var(--ui-space-2);
+  max-inline-size: 220px;
+}
+</style>
+```

package/skills/opui/references/avatar.md

@@ -0,0 +1,202 @@
+# Avatar
+
+Avatars show a person or entity as an image, initials or icon.
+
+- CSS: `opui-css/css/components/avatar.css`.
+- Full docs with every example: [HTML](https://open-props-ui.netlify.app/html/components/avatar.md), [Astro](https://open-props-ui.netlify.app/astro/components/avatar.md), [React](https://open-props-ui.netlify.app/react/components/avatar.md), [Svelte](https://open-props-ui.netlify.app/svelte/components/avatar.md), [Vue](https://open-props-ui.netlify.app/vue/components/avatar.md).
+
+## Avatar
+
+### Parts
+
+- `.ui-avatar` (root): Container element.
+- `<img>` (prop `src`, prop `alt`): The avatar image.
+
+### Props and modifiers
+
+- `alt`: `string`. Alternative text for the image. Required with `src`. Use an empty string when the name is shown next to it.
+- `as`: `"a" | "button" | "div"`, default `"div"`. The element to render. Defaults to `"a"` with `href`.
+- `disabled`: `boolean`. Disables a button avatar. A link avatar drops its `href` and gets `aria-disabled="true"` instead.
+- `href`: `string`. The link to use. Renders an `<a>`.
+- `shape`: `"circle"` (default), `"rounded"` (`.ui-rounded`), `"squared"` (`.ui-squared`), `"squircle"` (`.ui-squircle`). The shape of the avatar.
+- `size`: `"large"` (`.ui-large`), `"medium"` (default), `"small"` (`.ui-small`), `"x-small"` (`.ui-x-small`). The size of the element.
+- `src`: `string`. The image source. Replaces the content.
+- State (HTML): `button` (`button[disabled]`), `link` (`a[aria-disabled="true"]`). Disables a button avatar. A link avatar, which can't take `disabled`, drops its `href` and takes `aria-disabled="true"` instead.
+
+### Slots
+
+- `default`: Letters or an icon, when there's no image.
+
+## AvatarGroup
+
+### Parts
+
+- `.ui-avatar-group` (root): A group of overlapping avatars.
+
+### Slots
+
+- `default`: The avatars.
+
+### Notes
+
+- HTML: The root needs `role="group"` and an `aria-label`.
+
+## Component properties
+
+Set inputs on the component, inline or in your CSS. Outputs follow the variant and state, so never override them.
+
+### 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.
+- `--_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`.
+
+## Theme tokens
+
+The stylesheets read `--ui-border-width`, `--ui-border-width-thick`, `--ui-control-size`, `--ui-control-size-large`, `--ui-control-size-small`, `--ui-control-size-x-small`, `--ui-disabled-opacity`, `--ui-font-size-caption`, `--ui-font-size-large`, `--ui-font-size-small`, `--ui-icon-size`, `--ui-icon-size-large`, `--ui-icon-size-small`, `--ui-on-primary`, `--ui-primary`, `--ui-radius-round`, `--ui-radius-small`, `--ui-space-2` and `--ui-surface`. `theming.md` and `tokens.json` describe them.
+
+## HTML
+
+### Example: Image
+
+```html
+<div class="ui-avatar">
+  <img
+    src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?w=96&h=96&fit=crop&auto=format"
+    alt="Maya Lind"
+  />
+</div>
+
+<div class="ui-avatar">
+  <img
+    src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?w=96&h=96&fit=crop&auto=format"
+    alt="Omar Haddad"
+  />
+</div>
+
+<div class="ui-avatar">
+  <img
+    src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?w=96&h=96&fit=crop&auto=format"
+    alt="Priya Nair"
+  />
+</div>
+```
+
+## Astro
+
+`import { Avatar, AvatarGroup } from "opui-css/astro"`
+
+### Example: Image
+
+```astro
+---
+import { Avatar } from "opui-css/astro"
+---
+
+<Avatar
+  src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?w=96&h=96&fit=crop&auto=format"
+  alt="Maya Lind"
+/>
+
+<Avatar
+  src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?w=96&h=96&fit=crop&auto=format"
+  alt="Omar Haddad"
+/>
+
+<Avatar
+  src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?w=96&h=96&fit=crop&auto=format"
+  alt="Priya Nair"
+/>
+```
+
+## React
+
+`import { Avatar, AvatarGroup } from "opui-css/react"`
+
+### Example: Image
+
+```tsx
+import { Avatar } from "opui-css/react"
+
+export default function Image() {
+  return (
+    <>
+      <Avatar
+        src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?w=96&h=96&fit=crop&auto=format"
+        alt="Maya Lind"
+      />
+
+      <Avatar
+        src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?w=96&h=96&fit=crop&auto=format"
+        alt="Omar Haddad"
+      />
+
+      <Avatar
+        src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?w=96&h=96&fit=crop&auto=format"
+        alt="Priya Nair"
+      />
+    </>
+  )
+}
+```
+
+## Svelte
+
+`import { Avatar, AvatarGroup } from "opui-css/svelte"`
+
+### Example: Image
+
+```svelte
+<script lang="ts">
+  import { Avatar } from "opui-css/svelte"
+</script>
+
+<Avatar
+  src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?w=96&h=96&fit=crop&auto=format"
+  alt="Maya Lind"
+/>
+
+<Avatar
+  src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?w=96&h=96&fit=crop&auto=format"
+  alt="Omar Haddad"
+/>
+
+<Avatar
+  src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?w=96&h=96&fit=crop&auto=format"
+  alt="Priya Nair"
+/>
+```
+
+## Vue
+
+`import { Avatar, AvatarGroup } from "opui-css/vue"`
+
+### Example: Image
+
+```vue
+<script setup lang="ts">
+import { Avatar } from "opui-css/vue"
+</script>
+
+<template>
+  <Avatar
+    src="https://images.unsplash.com/photo-1614530606961-c4ce986825c1?w=96&h=96&fit=crop&auto=format"
+    alt="Maya Lind"
+  />
+
+  <Avatar
+    src="https://images.unsplash.com/photo-1672714413950-c9f7c5a45fa1?w=96&h=96&fit=crop&auto=format"
+    alt="Omar Haddad"
+  />
+
+  <Avatar
+    src="https://plus.unsplash.com/premium_photo-1675674458649-0c667500f3cc?w=96&h=96&fit=crop&auto=format"
+    alt="Priya Nair"
+  />
+</template>
+```