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,