Docs
   Avatar
Avatar
An image element with a fallback for representing the user.
								Loading...
  	<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar/index.js";
</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 "$lib/components/ui/avatar/index.js";
</script>
 
<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>
 Installation
	npx shadcn-svelte@latest add avatar
 Usage
	<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar";
</script>
 
<Avatar.Root>
  <Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
  <Avatar.Fallback>CN</Avatar.Fallback>
</Avatar.Root>
 On This Page