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 addUsing Shadcn-Svelte, create a basic avatar with the Avatar.Image and Avatar.Fallback components in SvelteKit.
Svelte
<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>
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,
