Text

Show your texts in different styles. 💅

Headings

The Text component is a versatile React component that provides various heading styles. It leverages class-variance-authority for managing variants and allows for the customization of heading elements.


This is H1

This is H2

This is H3

This is H4

This is H5
This is H6

Props

className: Additional CSS classes to customize the component's styling.


as: Determines the heading and text style. Default is p. Variants include:

  • "h1", "h2", "h3", "h4", "h5", "h6", "p"


Installation

1. Install dependencies:

npm install class-variance-authority

2. Copy the code 👇 into your project:

import type { ElementType, HTMLAttributes } from "react";
import { type VariantProps, cva } from "class-variance-authority";
import { cn } from "@/lib/utils";
 
const textVariants = cva("font-head", {
  variants: {
    as: {
      p: "font-sans text-base",
      li: "font-sans text-base",
      a: "font-sans text-base hover:underline underline-offset-2 decoration-primary-500",
      h1: "text-5xl lg:text-6xl font-bold",
      h2: "text-3xl lg:text-4xl font-semibold",
      h3: "text-2xl font-medium",
      h4: "text-xl font-normal",
      h5: "text-lg font-normal",
      h6: "text-base font-normal",
    },
  },
  defaultVariants: {
    as: "p",
  },
});
 
interface TextProps
  extends Omit<HTMLAttributes<HTMLElement>, "className">,
    VariantProps<typeof textVariants> {
  className?: string;
}
 
export const Text = (props: TextProps) => {
  const { className, as, ...otherProps } = props;
  const Tag: ElementType = as || "p";
 
  return (
    <Tag className={cn(textVariants({ as }), className)} {...otherProps} />
  );
};



Paragraph


Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos, doloremque inventore nesciunt quo sequi veniam impedit alias libero dolorem tempore quia esse fugit fuga iste aliquam expedita molestias iusto?

Last Updated: 22 Oct, 2024