Skip to Content
ComponentsText

Text

Overview

Text is a design-system component intended for reusable, product-agnostic UI composition.

Import

import { Text, textVariants } from "@tesseract-nexus/tesserix-ui"

Exports

export { Text, textVariants } from './text'
export type { TextProps } from './text'

Props

export interface TextProps
  extends Omit<React.HTMLAttributes<HTMLElement>, "as">,
    VariantProps<typeof textVariants> {
  as?: TextElement
}

Variations

const textVariants = cva(
  "text-foreground",
  {
    variants: {
      size: {
        xs: "text-xs",
        sm: "text-sm",
        base: "text-base",
        lg: "text-lg",
        xl: "text-xl",
      },
      variant: {
        default: "text-foreground",
        muted: "text-muted-foreground",
        primary: "text-primary",
        secondary: "text-secondary-foreground",
        destructive: "text-destructive",
      },
      weight: {
        normal: "font-normal",
        medium: "font-medium",
        semibold: "font-semibold",
        bold: "font-bold",
      },
    },
    defaultVariants: {

Usage Patterns

Basic

import { Text, textVariants } from "@tesseract-nexus/tesserix-ui"
 
export function Example() {
  return <Text />
}

Do / Don’t

Do

// Compose with domain wrappers in product code
<Text className="w-full" />

Don’t

// Avoid one-off hardcoded values that bypass tokens
<Text className="bg-[#123456] text-[#fafafa] px-[13px]" />

Token / Theming Mapping

  • Color tokens: —primary, —secondary, —muted, —destructive, —foreground, —background
  • Shape tokens: —radius
  • Border/input tokens: —border, —input, —ring
  • Spacing and typography: Tailwind scale via design-system preset

Interaction Test Checklist

  1. Interaction: click/keyboard activation for primary paths.
  2. Focus: visible focus styles and logical tab order.
  3. Variants: core variants and sizes render correctly.
  4. Disabled/error states: behavior and ARIA attributes are correct.
  5. Regression: Storybook visual check for primary states.

Accessibility

  • Verify keyboard behavior for all interactive states.
  • Ensure labels and semantic roles are present in consuming screens.
  • Validate focus treatment and screen-reader output during QA.
TabsTextarea