Typography

Typography components and styles for consistent and visually appealing text across your application.

The Legend of the Golden Apple

Chapter 1: The Beginning

Long ago, in a land far away, there was a magical kingdom ruled by a kind and just king. The kingdom was full of riches, and the people were happy and content. But one day, a dark sorcerer cast a curse upon the land, causing the crops to wither and the rivers to dry up.

Chapter 2: The Quest

The king, in his wisdom, knew that the only way to break the curse was to find the legendary Golden Apple. The Golden Apple was said to be guarded by a fierce dragon in a far-off land, and whoever could retrieve it would be granted one wish.

Chapter 3: The Journey

The king called forth his bravest knight, Sir Cedric, to undertake the quest for the Golden Apple. Sir Cedric set out on his journey, facing many dangers and obstacles along the way.

Chapter 4: The Battle

Sir Cedric finally reached the dragon's lair, where he was met with a fierce battle. But Sir Cedric was brave and skilled, and he was able to defeat the dragon and retrieve the Golden Apple.

"With this Golden Apple, I wish for the curse to be lifted and for prosperity to return to our kingdom," Sir Cedric said as he returned to the king.

The king was overjoyed and bestowed many honors upon Sir Cedric, including:

  • Knight of the Realm
  • Duke of the Kingdom
  • Protector of the Golden Apple

The curse was lifted, and the kingdom returned to its former glory. Sir Cedric was hailed as a hero and his legend lived on for generations to come.

The End

tsx
export * from './default'
export * from './paragraph'
export * from './prose'
export * from './title'

Usage

tsx
import { H1, H2, H3, H4, H5, Paragraph } from '@nerdfish/ui'
tsx
<H1>The Legend of the Golden Apple</H1>
<H2>Chapter 1: The Beginning</H2>
<Paragraph>
  Long ago, in a land far away, there was a magical kingdom ruled by a kind
  and just king. The kingdom was full of riches, and the people were happy and
  content. But one day, a dark sorcerer cast a curse upon the land, causing
  the crops to wither and the rivers to dry up.
</Paragraph>
<H3>Chapter 2: The Quest</H3>
<Paragraph>
  The king, in his wisdom, knew that the only way to break the curse was to
  find the legendary Golden Apple. The Golden Apple was said to be guarded by
  a fierce dragon in a far-off land, and whoever could retrieve it would be
  granted one wish.
</Paragraph>
<H4>Chapter 3: The Journey</H4>
<Paragraph>
  The king called forth his bravest knight, Sir Cedric, to undertake the quest
  for the Golden Apple. Sir Cedric set out on his journey, facing many dangers
  and obstacles along the way.
</Paragraph>
<H5>Chapter 4: The Battle</H5>
<Paragraph>
  Sir Cedric finally reached the dragon's lair, where he was met with a fierce
  battle. But Sir Cedric was brave and skilled, and he was able to defeat the
  dragon and retrieve the Golden Apple.
</Paragraph>
<blockquote>
  "With this Golden Apple, I wish for the curse to be lifted and for
  prosperity to return to our kingdom," Sir Cedric said as he returned to the
  king.
</blockquote>
<Paragraph>
  The king was overjoyed and bestowed many honors upon Sir Cedric, including:
</Paragraph>
<ul>
  <li>Knight of the Realm</li>
  <li>Duke of the Kingdom</li>
  <li>Protector of the Golden Apple</li>
</ul>
<Paragraph>
  The curse was lifted, and the kingdom returned to its former glory. Sir
  Cedric was hailed as a hero and his legend lived on for generations to come.
</Paragraph>
<H3>The End</H3>

Prose

Chapter 1: The Beginning

Long ago, in a land far away, there was a magical kingdom ruled by a kind and just king. The kingdom was full of riches, and the people were happy and content. But one day, a dark sorcerer cast a curse upon the land, causing the crops to wither and the rivers to dry up.

Chapter 2: The Quest

The king, in his wisdom, knew that the only way to break the curse was to find the legendary Golden Apple. The Golden Apple was said to be guarded by a fierce dragon in a far-off land, and whoever could retrieve it would be granted one wish.

Chapter 3: The Journey

The king called forth his bravest knight, Sir Cedric, to undertake the quest for the Golden Apple. Sir Cedric set out on his journey, facing many dangers and obstacles along the way.

Chapter 4: The Battle

Sir Cedric finally reached the dragon's lair, where he was met with a fierce battle. But Sir Cedric was brave and skilled, and he was able to defeat the dragon and retrieve the Golden Apple.

"With this Golden Apple, I wish for the curse to be lifted and for prosperity to return to our kingdom," Sir Cedric said as he returned to the king.

The king was overjoyed and bestowed many honors upon Sir Cedric, including:

  • Knight of the Realm
  • Duke of the Kingdom
  • Protector of the Golden Apple

The curse was lifted, and the kingdom returned to its former glory. Sir Cedric was hailed as a hero and his legend lived on for generations to come.

The End

tsx
/* eslint-disable react/no-unescaped-entities */
'use client'

export function TypographyProseExample() {
	return (
		<div className="prose">
			<h2>Chapter 1: The Beginning</h2>
			<p>
				Long ago, in a land far away, there was a magical kingdom ruled by a
				kind and just king. The kingdom was full of riches, and the people were
				happy and content. But one day, a dark sorcerer cast a curse upon the
				land, causing the crops to wither and the rivers to dry up.
			</p>
			<h3>Chapter 2: The Quest</h3>
			<p>
				The king, in his wisdom, knew that the only way to break the curse was
				to find the legendary Golden Apple. The Golden Apple was said to be
				guarded by a fierce dragon in a far-off land, and whoever could retrieve
				it would be granted one wish.
			</p>
			<h4>Chapter 3: The Journey</h4>
			<p>
				The king called forth his bravest knight, Sir Cedric, to undertake the
				quest for the Golden Apple. Sir Cedric set out on his journey, facing
				many dangers and obstacles along the way.
			</p>
			<h5>Chapter 4: The Battle</h5>
			<p>
				Sir Cedric finally reached the dragon's lair, where he was met with a
				fierce battle. But Sir Cedric was brave and skilled, and he was able to
				defeat the dragon and retrieve the Golden Apple.
			</p>
			<blockquote>
				"With this Golden Apple, I wish for the curse to be lifted and for
				prosperity to return to our kingdom," Sir Cedric said as he returned to
				the king.
			</blockquote>
			<p>
				The king was overjoyed and bestowed many honors upon Sir Cedric,
				including:
			</p>
			<ul>
				<li>Knight of the Realm</li>
				<li>Duke of the Kingdom</li>
				<li>Protector of the Golden Apple</li>
			</ul>
			<p>
				The curse was lifted, and the kingdom returned to its former glory. Sir
				Cedric was hailed as a hero and his legend lived on for generations to
				come.
			</p>
			<h3>The End</h3>
		</div>
	)
}

Title

Default

Primary

Secondary

Nerdfish

tsx
'use client'

import { H2 } from '@nerdfish/ui'

export function TypographyTitleExample() {
	return (
		<div className="flex flex-col">
			<H2>Default</H2>
			<H2 variant="primary">Primary</H2>
			<H2 variant="secondary">Secondary</H2>
			<H2 variant="brand">Nerdfish</H2>
		</div>
	)
}

Paragraph

Once upon a time, there was a young girl named Emily who loved nothing more than baking cakes. Her specialty was a rich, decadent chocolate cake that was always a hit with her family and friends. One day, Emily decided to enter her cake into a local baking competition. She spent hours perfecting the recipe and decorating the cake with intricate designs made from fondant. When the day of the competition arrived, Emily nervously presented her cake to the judges. After what felt like an eternity, the judges announced that Emily had won first place! Overwhelmed with joy, Emily hugged her cake tightly and knew that all of her hard work had paid off.

tsx
'use client'

import { Paragraph } from '@nerdfish/ui'

export function TypographyParagraphExample() {
	return (
		<div className="flex flex-col">
			<Paragraph>
				Once upon a time, there was a young girl named Emily who loved nothing
				more than baking cakes. Her specialty was a rich, decadent chocolate
				cake that was always a hit with her family and friends. One day, Emily
				decided to enter her cake into a local baking competition. She spent
				hours perfecting the recipe and decorating the cake with intricate
				designs made from fondant. When the day of the competition arrived,
				Emily nervously presented her cake to the judges. After what felt like
				an eternity, the judges announced that Emily had won first place!
				Overwhelmed with joy, Emily hugged her cake tightly and knew that all of
				her hard work had paid off.
			</Paragraph>
		</div>
	)
}