how to use avatar in sveltekit with shadcn ui

How to Use Avatar in SvelteKit with Shadcn UI

SvelteKit
September 22, 2023

In this tutorial, we will create avatar in SvelteKit with shadcn-svelte. Before we begin, you need to install and configure Shadcn UI in SvelteKit.

How to Install Shadcn UI in SvelteKit

To use Avatar you need to shadcn-svelte add avatar.

npx shadcn-svelte@latest add avatar
# or 
npx shadcn-svelte@latest add


SvelteKit create basic avatar using shadcn-svelte Avatar.Image, Avatar.Fallback component.

<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>
shadcn-svelte add avatar

shadcn-svelte add avatar