Docs
Avatar
Avatar
An image element with a fallback for representing the user.
<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@next add avatar
Install bits-ui:
Copy and paste the component source files linked at the top of this page into your project.
npm i bits-ui -D
Usage
<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>
On This Page