Code

Code formatted inline highlights specific programming language elements within the surrounding text.

variant

Installation

Copy-Paste the component code in a .tsx file.

import React from "react"
import { codeTheme, type CodeThemeProps } from "@tailus/themer"

export interface CodeProps extends React.HTMLAttributes<HTMLPreElement>, CodeThemeProps {}
export const Code = React.forwardRef<HTMLPreElement, CodeProps>(({
    intent = "gray",
    children,
    className,
    ...props
}, ref) => {
    return (
        <code ref={ref} className={codeTheme({ intent, className })} {...props}>
            {children}
        </code>
    )
})

Usage

Import the <Code/> and start building.

import { Code } from "@tailus-ui/typography";
const MyComponent = () => (
    <Code>variant</Code>
)

Reference

The Code component has the following props

Prop
Type
Default
intent
enum
gray

Examples

Intents

primarysecondaryaccentgrayneutral
 
const MyCodes = () => (
    <div>
        <Code intent="primary">primary</Code>
        <Code intent="secondary">secondary</Code>
        <Code intent="accent">accent</Code>
        <Code intent="gray">gray</Code>
        <Code intent="neutral">neutral</Code>
    </div>
)