omarchy registry

Omarchy Swatch

A badge showing an Omarchy theme's accent color alongside its label.

bunx --bun shadcn@latest add yamz8/omarchy-shadcn-registry/omarchy-swatch

Preview

Tokyo NightCatppuccinEverforestGruvboxKanagawaNordRosé Pine

npm dependencies

Registry dependencies

badgeyamz8/omarchy-shadcn-registry/omarchy-palette

Source

registry/ui/omarchy-swatch.tsx

import * as React from "react"

import { Badge } from "@/components/ui/badge"
import { cn } from "cn"
import { getOmarchyTheme } from "@/lib/omarchy-palette"

function OmarchySwatch({
  theme,
  showLabel = true,
  className,
  ...props
}: Omit<React.ComponentProps<typeof Badge>, "children"> & {
  theme: string
  showLabel?: boolean
}) {
  const resolved = getOmarchyTheme(theme)

  return (
    <Badge
      variant="outline"
      data-omarchy-swatch={theme}
      className={cn("gap-2 font-mono", className)}
      {...props}
    >
      <span
        aria-hidden
        className="size-2.5 shrink-0 rounded-full ring-1 ring-border"
        style={{ backgroundColor: resolved?.accent ?? "var(--muted-foreground)" }}
      />
      {showLabel ? (resolved?.label ?? theme) : <span className="sr-only">{theme}</span>}
    </Badge>
  )
}

export { OmarchySwatch }