Omarchy Swatch

ui

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

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

Preview

CatppuccinCatppuccin LatteEtherealEverforestFlexoki LightGruvboxHackermanKanagawaLast HorizonLumonLupineMatte BlackMiasmaNordOsaka JadeRetro 82RistrettoRose PineSolitudeTokyo NightVantablackWhite

Dependencies

npm
cn
registry
badge, yamz8/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 }