Display

Text

Typographic primitives for body copy: a muted paragraph, an inline text link, emphasized strong text, and inline code. Styled with the quebi design system.

texttypographyparagraphproselinkcode

Paragraph

Muted body copy that scales down at the sm breakpoint.

Quebi pairs your roster against the brief and surfaces the strongest matches in seconds, so you spend your time on conversations instead of spreadsheets.

With emphasis

Strong brightens to white to pull a phrase out of muted body text.

Every match ships with a confidence score and a short rationale you can forward to the client untouched.

With a link

Inline TextLink uses the brand-teal underline treatment.

Need the full breakdown? Read the matching methodology or jump straight into a new search.

Inline code

Code wraps identifiers and snippets within prose.

Set the QUEBI_API_KEY environment variable, then call quebi match to run a search from the CLI.

Source

Copy this into your project. Resolve its dependencies from the registryDependencies in the component's API entry.

import { tv } from "tailwind-variants"
import { Link } from "@/components/link"
import { cn } from "@/lib/utils"

/**
 * Text — quebi design system
 *
 * Typographic primitives for body copy: a paragraph (`Text`), an inline
 * `TextLink`, emphasized `Strong`, and inline `Code`. Body copy is muted;
 * strong text brightens to white for emphasis. Restyled onto quebi tokens.
 */

export function Text({ className, ...props }: React.ComponentPropsWithoutRef<"p">) {
  return (
    <p
      data-slot="text"
      {...props}
      className={cn("font-sans text-base/6 text-quebi-fg-muted sm:text-sm/6", className)}
    />
  )
}

export const textLinkStyles = tv({
  base: "text-quebi-brand underline decoration-quebi-brand/40 transition-colors duration-150 ease-out hover:text-quebi-brand-hover hover:decoration-quebi-brand-hover has-data-[slot=icon]:inline-flex has-data-[slot=icon]:items-center has-data-[slot=icon]:gap-x-1",
})

export function TextLink({ className, ...props }: React.ComponentPropsWithoutRef<typeof Link>) {
  return <Link {...props} className={cn(textLinkStyles(), className)} />
}

export function Strong({ className, ...props }: React.ComponentPropsWithoutRef<"strong">) {
  return <strong {...props} className={cn("font-medium text-white", className)} />
}

export function Code({ className, ...props }: React.ComponentPropsWithoutRef<"code">) {
  return (
    <code
      {...props}
      className={cn(
        "rounded-quebi-sm border border-cyan-500/10 bg-quebi-bg px-1 py-0.5 font-mono text-sm font-medium text-white sm:text-[0.8125rem]",
        className,
      )}
    />
  )
}