import { Title } from "@/components/ui/title"

<Title size="2">Section heading</Title>

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

<Title size="3" asChild>
  <p>Title 3 rendered as a paragraph</p>
</Title>

npx shadcn@latest add https://solar-ui.com/r/title.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 titleVariants = cva(
  "font-sans text-default-12",
  {
    variants: {
      variant: {
        "1": "text-title-1 tracking-display-tight font-semibold",
        "2": "text-title-2 tracking-display-tight font-semibold",
        "3": "text-title-3 tracking-display-normal font-medium",
        "4": "text-title-4 tracking-display-normal font-medium",
        "5": "text-title-5 tracking-display-loose font-medium",
        "6": "text-title-6 tracking-display-loose font-medium",
      },
    },
    defaultVariants: {
      variant: "2",
    },
  }
)
 
const variantTagMap: Record<string, keyof React.JSX.IntrinsicElements> = {
  "1": "h1", "2": "h2", "3": "h3", "4": "h4", "5": "h5", "6": "h6",
}
 
type TitleProps = React.HTMLAttributes<HTMLHeadingElement> &
  VariantProps<typeof titleVariants> & { asChild?: boolean }
 
function Title({ className, variant = "2", asChild = false, ...props }: TitleProps) {
  const Tag = asChild ? Slot.Root : variantTagMap[variant ?? "2"]
  return (
    <Tag
      data-slot="title"
      data-size={variant}
      className={cn(titleVariants({ size }), className)}
      {...props}
    />
  )
}
 
export { Title, titleVariants }