Code

import { Code } from "@/components/ui/code"

<p>Run <Code>npm install</Code> to get started.</p>

<Code>useState</Code>
<Code size="compact">asChild</Code>

<Code asChild>
  <kbd>Cmd+K</kbd>
</Code>

npx shadcn@latest add https://solar-ui.com/r/code.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 codeVariants = cva(
  "font-mono text-default-12",
  {
    variants: {
      variant: {
        default: "text-code font-normal",
        compact: "text-code-compact font-normal",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)
 
type CodeProps = React.HTMLAttributes<HTMLElement> &
  VariantProps<typeof codeVariants> & { asChild?: boolean }
 
function Code({ className, variant = "default", asChild = false, ...props }: CodeProps) {
  const Comp = asChild ? Slot.Root : "code"
  return (
    <Comp
      data-slot="code"
      data-size={variant}
      className={cn(codeVariants({ size }), className)}
      {...props}
    />
  )
}
 
export { Code, codeVariants }