A collection of responsive typography components built for shadcn/ui, featuring headings (H1-H6), paragraphs, blockquotes, and specialized text variants (Lead, Large, Small, Muted, Code). Each component supports responsive sizing, custom styling through className props, and optional rendering through Radix UI's Slot primitive for flexible composition.

Benefit

These components are highly useful as they allow you to define and style your typography at once and reuse it consistently throughout your entire project. This approach promotes design consistency and maintainability. Additionally, you can further customize the styles to suit your specific needs.

How To Use

Install

Run this command in your terminal to install the component:

Import

You can now import this component anywhere you need to use it.

import {
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  P,
  Code,
  Large,
  Lead,
  Muted,
  Small,
  BlockQuote,
  Title,
} from '@/components/ui/bloom/typography'

Preview

Open in

Typography

Heading 1 - The Quick Brown Fox

Heading 2 - Jumps Over The Lazy Dog

Heading 3 - Pack My Box With Five Dozen Liquor Jugs

Heading 4 - The Five Boxing Wizards Jump Quickly

Heading 5 - How Vexingly Quick Daft Zebras Jump

Heading 6 - The Quick Onyx Goblin Jumps

This is a regular paragraph with some text. It demonstrates the base typography style. The paragraph includes proper line height and spacing that adjusts responsively.

This is a block quote that showcases how quotations look. It includes proper styling with a left border and italic text that adjusts based on screen size.

Here is some text with a code snippet embedded within it. Below are different text variations:

This is lead text that stands out from regular paragraphs

This is large text for emphasis

This is small text for less emphasis

This is muted text for secondary information

Accepted Props

These components accept all the standard props relevant to their corresponding HTML elements—for example, H1 accepts props for an <h1>, H2 for an <h2>, P for a <p>, and Code for a <code> element. Additionally, they support the asChild prop, allowing you to apply the respective styling without rendering the actual HTML tag. This is useful when you want the styling of a h1 without wrapping your content in an <h1> element.