Avatar - shadcn-svelte

Docs

Avatar

An image element with a fallback for representing the user.

Component Source Primitive API Reference

	<script lang="ts">
  import * as Avatar from "@/components/ui/avatar";
</script>

<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>

	<script lang="ts">
  import * as Avatar from "@/components/ui/avatar";
</script>

<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>

Installation

	npx shadcn-svelte add avatar

Usage

	<script lang="ts">
  import * as Avatar from "$components/ui/avatar";
</script>

<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>

Aspect Ratio Badge

On This Page