import { Display } from "@/components/ui/display"

<Display size="1">Hello world</Display>

<Display size="1">Display 1 — h1</Display>
<Display size="2">Display 2 — h2</Display>
<Display size="3">Display 3 — h3</Display>
<Display size="4">Display 4 — h4</Display>
<Display size="5">Display 5 — h5</Display>
<Display size="6">Display 6 — h6</Display>

<Display size="2" asChild>
  <p>Display 2 rendered as a paragraph</p>
</Display>

npx shadcn@latest add https://solar-ui.com/r/display.json

import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"
import * as React from "react"
 
import { cn } from "@/lib/utils"
 
const displayVariants = cva(
  "font-sans text-default-12",
  {
    variants: {
      variant: {
        "1": "text-display-1 tracking-display-tight font-semibold",
        "2": "text-display-2 tracking-display-tight font-semibold",
        "3": "text-display-3 tracking-display-normal font-medium",
        "4": "text-display-4 tracking-display-normal font-medium",
        "5": "text-display-5 tracking-display-loose font-medium",
        "6": "text-display-6 tracking-display-loose font-medium",
      },
    },
    defaultVariants: {
      variant: "1",
    },
  }
)
 
const variantTagMap: Record<string, keyof React.JSX.IntrinsicElements> = {
  "1": "h1", "2": "h2", "3": "h3", "4": "h4", "5": "h5", "6": "h6",
}
 
type DisplayProps = React.HTMLAttributes<HTMLHeadingElement> &
  VariantProps<typeof displayVariants> & { asChild?: boolean }
 
function Display({ className, variant = "1", asChild = false, ...props }: DisplayProps) {
  const Tag = asChild ? Slot.Root : variantTagMap[variant ?? "1"]
  return (
    <Tag
      data-slot="display"
      data-size={variant}
      className={cn(displayVariants({ size }), className)}
      {...props}
    />
  )
}
 
export { Display, displayVariants }