shadcn badge

Author: StackOverflowIsBetterThanAnyAI

package-lock.json

@@ -9,6 +9,8 @@
         "lint": "eslint"
     },
     "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "fetch-loading": "^0.0.7",
         "next": "15.5.2",

package.json

@@ -44,11 +44,18 @@ html {
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
     --color-background: var(--background);
-    --color-foreground: var(--foreground);
     --color-card: var(--card);
     --color-card-foreground: var(--card-foreground);
+    --color-destructive: var(--destructive);
+    --color-foreground: var(--foreground);
     --color-muted-foreground: var(--muted-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
 }
 
 :root {
@@ -57,7 +64,14 @@ html {
     --foreground: oklch(0.141 0.005 285.823);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.141 0.005 285.823);
+    --accent: oklch(0.967 0.001 286.375);
+    --accent-foreground: oklch(0.21 0.006 285.885);
+    --destructive: oklch(0.577 0.245 27.325);
     --muted-foreground: oklch(0.552 0.016 285.938);
+    --primary: oklch(0.21 0.006 285.885);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
 }
 
 @layer base {

src/app/globals.css

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { FetchLoading } from 'fetch-loading'
-import fetchFeedItems from '@/api/fetchFeedItems'
+import { Badge } from '@/components/ui/badge'
 import {
     Card,
     CardContent,
@@ -11,6 +11,7 @@ import {
     CardHeader,
     CardTitle,
 } from '@/components/ui/card'
+import fetchFeedItems from '@/api/fetchFeedItems'
 
 const Feed = () => {
     const PAGE_SIZE = 10
@@ -68,7 +69,7 @@ const Feed = () => {
                                 <p>{item.body}</p>
                             </CardContent>
                             <CardFooter>
-                                <p>Post #{item.id}</p>
+                                <Badge variant="outline">Post #{item.id}</Badge>
                             </CardFooter>
                         </Card>
                     ))}

src/components/feed/Feed.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+    'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+    {
+        variants: {
+            variant: {
+                default:
+                    'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+                secondary:
+                    'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+                destructive:
+                    'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+                outline:
+                    'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    }
+)
+
+function Badge({
+    className,
+    variant,
+    asChild = false,
+    ...props
+}: React.ComponentProps<'span'> &
+    VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+    const Comp = asChild ? Slot : 'span'
+
+    return (
+        <Comp
+            data-slot="badge"
+            className={cn(badgeVariants({ variant }), className)}
+            {...props}
+        />
+    )
+}
+
+export { Badge, badgeVariants }