Paragraph

Elevate your page content with a customizable Paragraph component. Designed for React and Next.js applications, this component allows you to style and adjust paragraphs using Tailwind CSS. Learn how to create flexible, responsive, and consistent paragraphs to improve your website’s readability and design.

Paragraph preview

1. Setup codes

Create a new component components/ui/typography/Paragraph.tsx

jsx
import React from "react";

import { cn } from "@/utils/cn";

const Paragraph = ({ children, className }: { children: React.ReactNode; className?: string }) => {
  return <p className={cn("text-base", className)}>{children}</p>;
};

export default Paragraph;

2. Usages

Now we can use Paragraph component in any where in your app

jsx
import Paragraph from "../typography/Paragraph";

...

<Paragraph className="mb-4">
  Elevate your page content with a customizable Paragraph component. Designed for React and Next.js applications, this component allows you to style and adjust paragraphs using Tailwind CSS
</Paragraph>

The UI like that