ui-lib

component — 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.

  • text
  • typography
  • paragraph
  • prose
  • link
  • code

04 examples

Paragraph

Running text: Inter in the muted ink.

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 steps up to full ink to pull a phrase out of the running text.

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

With a link

Inline TextLink carries the ink underline every Link has at rest, and opens it on hover.

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

text.tsx

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

import { composeRenderProps } from "react-aria-components"
import { Link } from "@/components/link"
import { cn, tv } 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 Inter in
 * the muted ink; strong text steps up to full ink for emphasis.
 */

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

/**
 * What a TextLink adds to a `Link`, which is only the icon layout: the signal
 * and the resting underline are the Link's own base styles, so the prose link
 * and every other link cannot drift apart.
 */
export const textLinkStyles = tv({
  base: "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={composeRenderProps(className, (resolved) => cn(textLinkStyles(), resolved))}
    />
  )
}

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

export function Code({ className, ...props }: React.ComponentPropsWithoutRef<"code">) {
  return (
    <code
      {...props}
      className={cn(
        "rounded-(--q-radius-mark) bg-quebi-raised px-1.25 py-px font-mono text-[0.8125rem] text-quebi-fg",
        className,
      )}
    />
  )
}