║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Text description: Show your texts in different styles. 💅 lastUpdated: 09 Sep, 2025 links: source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Text.tsx

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.

<hr /> <br /> <ComponentShowcase name="text-headings" /> <br />

Props

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

<br />

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

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

<br /> <br />

Installation

<ComponentInstall> <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/text" /> <ComponentInstall.Manual>

1. Install dependencies:

npm install class-variance-authority

<br />

2. Copy the code 👇 into your project:

<ComponentSource name="text" />

</ComponentInstall.Manual> </ComponentInstall>

<br /> <br />

Paragraph

<ComponentShowcase name="typography-p" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║