1. Home
  2. Docs
  3. Components
  4. Typography
  5. Code

Code

Code component.

Usage

CodeExample.tsx
  1. 1
  2. 2
  3. 3
<P>
	We all know <Code>console.log()</Code> is the best way to debug.
</P>

Here's the <Code /> component in action.

We all know console.log() is the best way to debug.

Features

  • Drop-in replacement for the native <code> element.
  • Opts-in to your design system's typographic styles.

Source

code.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'


/**
 * A Code component.
 */
const Code = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => <code ref={ref} className={cn('code', className)} {...props} />)
Code.displayName = 'Code'


export { Code }

Styling

tailwind.css
  1. 1
  2. 2
  3. 3
:not(.pre) > .code {
	@apply bg-muted-200 text-muted-900 py-fluid-2 px-fluid-5 rounded-md;
}