# or
yarn add @zag-js/avatar @zag-js/svelte
```

## Anatomy

To set up the avatar correctly, you'll need to understand its anatomy and how we
name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.



## Usage

First, import the avatar package into your project

```jsx
import * as avatar from "@zag-js/avatar"
```

The avatar package exports two key functions:

- `machine` â The state machine logic for the avatar widget.
- `connect` â The function that translates the machine's state to JSX attributes
  and event handlers.

> You'll also need to provide a unique `id` to the `useMachine` hook. This is
> used to ensure that every part has a unique identifier.

Next, import the required hooks and functions for your framework and use the
avatar machine in your project ð¥

```svelte
<script lang="ts">
  import * as avatar from "@zag-js/avatar"
  import { useMachine, normalizeProps } from "@zag-js/svelte"

  const id = $props.id()
  const service = useMachine(avatar.machine, ({ id }))
  const api = $derived(avatar.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <span {...api.getFallbackProps()}>PA</span>
  <img alt="PA" src={src} {...api.getImageProps()} />
</div>
```

### Listening for loading status changes

When the image has loaded or failed to load, the `onStatusChange` callback is
invoked.

```jsx {2}
const service = useMachine(avatar.machine, {
  onStatusChange(details) {
    // details => { status: "error" | "loaded" }
  },
})
```

## Styling guide

Earlier, we mentioned that each avatar part has a `data-part` attribute added to
them to select and style them in the DOM.

```css
[data-scope="avatar"][data-part="root"] {
  /* Styles for the root part */
}

[data-scope="avatar"][data-part="image"] {
  /* Styles for the image part */
}

[data-scope="avatar"][data-part="fallback"] {
  /* Styles for the fallback part */
}
```

## Creating Component

Create your avatar component by abstracting the machine into your own component.

### Usage



### Implementation

Use the the `splitProps` utility to separate the machine's props from the
component's props.



## Methods and Properties

### Machine Context

The avatar machine exposes the following context properties:

**`onStatusChange`**
Type: `(details: StatusChangeDetails) => void`
Description: Functional called when the image loading status changes.

**`ids`**
Type: `Partial<{ root: string; image: string; fallback: string; }>`
Description: The ids of the elements in the avatar. Useful for composition.

**`id`**
Type: `string`
Description: The unique identifier of the machine.

**`getRootNode`**
Type: `() => ShadowRoot | Node | Document`
Description: A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

**`dir`**
Type: `"ltr" | "rtl"`
Description: The document's text/writing direction.

### Machine API

The avatar `api` exposes the following methods:

**`loaded`**
Type: `boolean`
Description: Whether the image is loaded.

**`setSrc`**
Type: `(src: string) => void`
Description: Function to set new src.

**`setLoaded`**
Type: `VoidFunction`
Description: Function to set loaded state.

**`setError`**
Type: `VoidFunction`
Description: Function to set error state.

### Data Attributes

**`Image`**

**`data-scope`**: avatar
**`data-part`**: image
**`data-state`**: "visible" | "hidden"

**`Fallback`**

**`data-scope`**: avatar
**`data-part`**: fallback
**`data-state`**: "hidden" | "visible"
an accessible carousel component that leverages native CSS Scroll Snap for
smooth, performant scrolling between slides.

## Resources


[Latest version: v1.33.1](https://www.npmjs.com/package/@zag-js/carousel)
[Logic Visualizer](https://zag-visualizer.vercel.app/carousel)
[Source Code](https://github.com/chakra-ui/zag/tree/main/packages/machines/carousel)



**Features**

- Uses native CSS Scroll Snap
- Supports horizontal and vertical orientations
- Supports alignment of slides (start, center or end alignment)
- Show multiple slides at a time
- Supports looping and auto-playing
- Supports custom spacing between slides

## Installation

To use the carousel machine in your project, run the following command in your
command line:

```bash
npm install @zag-js/carousel @zag-js/svelte