How to Use Badge in SvelteKit with Shadcn UI

In this tutorial, we will create Badge 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 Accordion you need to shadcn-svelte add badge.

npx shadcn-svelte@latest add badge

1. SvelteKit create basic badge using shadcn-svelte Badge component.

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
</script>

<Badge variant="outline">Badge</Badge>

You can use the badgeVariants helper to create a link that looks like a badge.

<script lang="ts">
  import { badgeVariants } from "$lib/components/ui/badge";
</script>
 
<a href="/dashboard" class={badgeVariants({ variant: "outline" })}>Badge</a>

2. SvelteKit with shadcn-svelte default, outlined, Destructive badge.

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
</script>

<div>
  <Badge>Badge</Badge>
  <Badge variant="outline">Badge</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
</div>

3. Create custom success badge using tailwind css class text-green-800, bg-green-300.

<script lang="ts">
  import { Badge } from "$lib/components/ui/badge";
</script>

<Badge class="text-green-800 bg-green-300">Sucess Badge</Badge>

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,