Text

Typography

Styled text paragraph with size and color options.

Preview

Large paragraph text for introductions and summaries.

Default body text for regular content and descriptions.

Small muted text for captions and helper text.

Usage

example.jsx

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

export default function Example() {
  return <Text />;
}

Source Code

Copy this file into components/ui/text.jsx in your project.

text.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const sizes = {
  xs: "text-xs",
  sm: "text-sm",
  base: "text-base",
  lg: "text-lg",
  xl: "text-xl",
};

const Text = forwardRef(({ className, size = "base", muted, lead, as: Tag = "p", ...props }, ref) => (
  <Tag ref={ref}
    className={cn(sizes[size],
      muted && "text-muted-foreground",
      lead && "text-xl text-muted-foreground",
      className
    )}
    {...props}
  />
));
Text.displayName = "Text";

export { Text };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge