/ avatar

Avatar

@kumiki/atelier/avatar

Layer 5 preview — styled Avatar with size vocabulary (sm/md/lg).

Source

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Attach to your own DOM

<script lang="ts">
  import { createAvatar } from '@kumiki/headless/avatar';
  const ctl = createAvatar({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Install

pnpm add @kumiki/components

Meaningful (alt = name)

<Avatar.Root name="Aiko Tanaka">
  <Avatar.Image src={user.photo} />
  <Avatar.Fallback />
</Avatar.Root>

Decorative (alt = "")

<Avatar.Root decorative>
  <Avatar.Image src={user.photo} />
  <Avatar.Fallback>{initials(user.name)}</Avatar.Fallback>
</Avatar.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Image with initials fallback

<script lang="ts">
  import { Tailwind as Avatar } from '@kumiki/atelier/avatar';
</script>

<Avatar.Root size="md">
  <Avatar.Image src="/u/123.jpg" alt="Akari Suzuki" />
  <Avatar.Fallback>AS</Avatar.Fallback>
</Avatar.Root>

This component, layer by layer

Keyboard

Test discipline