Componentnavigation0.5 KB gzipZero dependencies

Text

Typographic paragraph primitive with default, muted, small, lead and mono variants.

Preview

Live Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add text

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { Text } from "@/components/ui/text";

<Text variant="lead">Front-row seats, printed on demand.</Text>

Usage guidance

Use Text when a ticket stub surface needs Typographic paragraph primitive with default, muted, small, lead and mono variants. Keep props minimal and prefer composition with sibling stubs.

Avoid Text for long form flows or dense data grids where a dedicated layout block fits better.

Source code

text.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export interface TextProps {
  as?: "p" | "span" | "div";
  variant?: "default" | "muted" | "small" | "lead" | "mono";
  size?: "sm" | "md" | "lg";
  className?: string;
  children?: React.ReactNode;
}

const variantClasses: Record<"default" | "muted" | "small" | "lead" | "mono", string> = {
  default: "text-foreground",
  muted: "text-muted-foreground",
  small: "text-xs text-muted-foreground",
  lead: "text-lg leading-relaxed text-foreground",
  mono: "font-mono text-[10px] uppercase tracking-[0.15em] text-muted-foreground",
};

const sizeClasses: Record<"sm" | "md" | "lg", string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-base",
};

export function Text({ as = "p", variant = "default", size, className, children }: TextProps) {
  const Tag = as;

  return (
    <Tag
      className={cn(
        "animate-[fade-in_0.3s_ease-out_both] motion-reduce:animate-none",
        variantClasses[variant],
        size && sizeClasses[size],
        className
      )}
    >
      {children}
    </Tag>
  );
}

Props

Prop	Type	Description
as?	"p" \| "span" \| "div"
variant?	"default" \| "muted" \| "small" \| "lead" \| "mono"
size?	"sm" \| "md" \| "lg"
className?	string
children?	React.ReactNode