LAB // NEXTUI

Badge

Lab-aesthetic badge with green and blue pill variants for experiment tags and status markers.

$npx @voltenworks/shipui add badge --theme lab
Or install the base component for free:
Live Preview
Open full demo
voltenworks.com/shipui/lab/demo/components#02-badge
Usage
TSX
<Badge variant="green">Active</Badge>
Variants
<Badge variant="green">Active</Badge>
<Badge variant="blue">Pending</Badge>
Source
TSX
import { cn } from '@/lib/utils'

type BadgeVariant = 'blue' | 'green'

interface BadgeProps {
  children:   React.ReactNode
  variant?:   BadgeVariant
  className?: string
}

const VARIANT_CLASS: Record<BadgeVariant, string> = {
  blue:  'badge--blue',
  green: 'badge--green',
}

export function Badge({
  children,
  variant   = 'blue',
  className,
}: BadgeProps): React.JSX.Element {
  return (
    <span className={cn('badge', VARIANT_CLASS[variant], className)}>
      {children}
    </span>
  )
}
Preview in theme demoGet full theme, $29
Works withNext.js 15React 19Tailwind v4TypeScript 5
More from LAB // NEXT
LAB // NEXTUI

Button

Scientific dark-theme button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.

LAB // NEXTUI

Card

Feature card with an experiment code label, SVG icon (atom, grid, diamond, network, monitor, warning), description, and a colored pill tag.

LAB // NEXTUI

Text

Polymorphic text primitive with body, caption, label, and code variants styled for the LAB dark scientific palette.