next 13 with shadcn ui badge example

In this tutorial, we will create badge in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use badge in next js 13 with shadcn ui you need to install npx shadcn-ui add badge.

npx shadcn-ui add badge

npx shadcn-ui@latest add

Next 13 with Shadcn UI Badge Example

1. Create next js 13 with shadcn ui simple badge using shadcn-ui Badge component.

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return <Badge>Badge</Badge>
}

next js 13 with shadcn ui simple badge

2. next js 13 with shadcn ui badge with variant="secondary".

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return <Badge variant="secondary">Secondary</Badge>
}

shadcn ui badge

3. next js 13 with shadcn ui outline badge.

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return <Badge variant="outline">Outline</Badge>
}

next 13 with shadcn ui outline badge

4. next js 13 with shadcn ui error destructive badge.

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return <Badge variant="destructive">Destructive</Badge>
}

next 13 with shadcn ui error badge

5. next js 13 with shadcn ui custom badge with success, warning.

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return (
    <div className="flex justify-center items-center  gap-4 mt-20">
      <Badge className="bg-green-600">success</Badge>
      <Badge className="bg-yellow-600">warning</Badge>
      <Badge className="bg-blue-600">primary</Badge>
    </div>
  )
}