How to Use Avatar in SvelteKit with Shadcn UI

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

Using Shadcn-Svelte, create a basic avatar with the Avatar.Image and Avatar.Fallback components in SvelteKit.

<script lang="ts">
  import * as Avatar from "$lib/components/ui/avatar";
  <Avatar.Image src="" alt="@shadcn" />
shadcn-svelte add avatar
Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,

Share link