Getting started

Overview

Foundations

Colors Themes Typography

Components

Basic Navigation Overlays Feedback & Data Content & Layout Forms Advanced Forms

Typography

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Font family

Docs

The kit uses Figtree from Google Fonts. Change it in one place with the --font-sans theme variable.

Aa

Figtree

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700

Headings

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Text colors

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This is primary text

This is secondary text

This is success text

This is warning text

This is danger text

This is info text

This is subtle text

This is muted text

This is default text

This is highlight text

This is emphasis text

<p class="text-primary">This is primary text</p>
<p class="text-secondary">This is secondary text</p>
<p class="text-success">This is success text</p>
<p class="text-warning">This is warning text</p>
<p class="text-danger">This is danger text</p>
<p class="text-info">This is info text</p>
<p class="text-subtle">This is subtle text</p>
<p class="text-muted">This is muted text</p>
<p class="text-default">This is default text</p>
<p class="text-highlight">This is highlight text</p>
<p class="text-emphasis">This is emphasis text</p>

Font sizes

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This is a sample text

This is a sample text

This is a sample text

This is a sample text

This is a sample text

This is a sample text

This is a sample text

<p class="text-xs">This is a sample text</p>
<p class="text-sm">This is a sample text</p>
<p class="text-base">This is a sample text</p>
<p class="text-lg">This is a sample text</p>
<p class="text-xl">This is a sample text</p>
<p class="text-2xl">This is a sample text</p>
<p class="text-3xl">This is a sample text</p>

Font weight

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This text is very thin.

This text is extra light.

This text is light.

This text is normal weight.

This text is medium weight.

This text is semi-bold.

This text is bold.

This text is extra bold.

This text is very heavy (black).

<p class="font-thin">This text is very thin.</p>
<p class="font-extralight">This text is extra light.</p>
<p class="font-light">This text is light.</p>
<p class="font-normal">This text is normal weight.</p>
<p class="font-medium">This text is medium weight.</p>
<p class="font-semibold">This text is semi-bold.</p>
<p class="font-bold">This text is bold.</p>
<p class="font-extrabold">This text is extra bold.</p>
<p class="font-black">This text is very heavy (black).</p>

Text alignment

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

text-left aligns text to the left.

text-center centers the text.

text-right aligns text to the right.

text-justify stretches text to align both left and right edges.

text-start aligns text to the start based on text direction.

text-end aligns text to the end based on text direction.

<p class="text-left"><span>text-left</span> aligns text to the left.</p>
<p class="text-center"><span>text-center</span> centers the text.</p>
<p class="text-right"><span>text-right</span> aligns text to the right.</p>
<p class="text-justify"><span>text-justify</span> stretches text to align both left and right edges.</p>
<p class="text-start"><span>text-start</span> aligns text to the start based on text direction.</p>
<p class="text-end"><span>text-end</span> aligns text to the end based on text direction.</p>

Text wrap

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

text-wrap - This text wraps onto the next line when it reaches the container width.

text-nowrap - This text stays on one line and does not wrap.

<p class="text-wrap border border-danger/40"><strong>text-wrap</strong> - This text wraps onto the next line when it reaches the container width.</p>
<p class="text-nowrap border border-danger/40"><strong>text-nowrap</strong> - This text stays on one line and does not wrap.</p>

Text transform

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Lowercase text

Uppercase text

Capitalized text

<p class="lowercase">Lowercase text</p>
<p class="uppercase">Uppercase text</p>
<p class="capitalize">Capitalized text</p>

Text decoration

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This text is underlined.

This text has an overline.

This text is crossed out.

This text has no decoration.

This link underlines on hover.

Underline with pink decoration

This text has a wavy underline.

This text has a bigger underline offset.

This text has a thicker underline.

<p class="underline">This text is underlined.</p>
<p class="overline">This text has an overline.</p>
<p class="line-through">This text is crossed out.</p>
<p class="no-underline">This text has no decoration.</p>
<p>This <a href="#" class="no-underline hover:underline">link underlines</a> on hover.</p>
<p class="underline decoration-pink-500">Underline with pink decoration</p>
<p class="underline decoration-wavy">This text has a wavy underline.</p>
<p class="underline underline-offset-8">This text has a bigger underline offset.</p>
<p class="underline decoration-4">This text has a thicker underline.</p>

Line height

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This block uses no extra line spacing, causing the lines of text to appear very close together and making longer content harder to read.

This text uses a base font size with a fixed line height of 1.5, providing a compact but readable spacing suitable for UI copy and short content.

This paragraph applies a line height of 2rem, creating more vertical space between lines and improving overall clarity and readability for longer multiline text blocks.

This example uses a custom line height of 40px, resulting in more spacious line spacing that works well for large text, emphasis-heavy layouts, and prominent headings.

<p class="leading-none">This block uses no extra line spacing, causing the lines of text to appear very close together and making longer content harder to read.</p>
<p class="text-base/6">This text uses a base font size with a fixed line height of 1.5, providing a compact but readable spacing suitable for UI copy and short content.</p>
<p class="leading-8">This paragraph applies a line height of 2rem, creating more vertical space between lines and improving overall clarity and readability for longer multiline text blocks.</p>
<p class="leading-10">This example uses a custom line height of 40px, resulting in more spacious line spacing that works well for large text, emphasis-heavy layouts, and prominent headings.</p>

Letter spacing

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Letters are very tight.

Letters are a bit tight.

Letters have normal spacing.

Letters are spaced wider.

Letters are spaced even wider.

Letters are very widely spaced.

Letters have custom 5px spacing.

<p class="tracking-tighter">Letters are very tight.</p>
<p class="tracking-tight">Letters are a bit tight.</p>
<p class="tracking-normal">Letters have normal spacing.</p>
<p class="tracking-wide">Letters are spaced wider.</p>
<p class="tracking-wider">Letters are spaced even wider.</p>
<p class="tracking-widest">Letters are very widely spaced.</p>
<p class="tracking-[5px]">Letters have custom 5px spacing.</p>

Truncating text

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This is a short paragraph demonstrating text truncation in Tailwind when content overflows its container width.

<p class="truncate">This is a short paragraph demonstrating text truncation in Tailwind when content overflows its container width.</p>

Line clamp

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This example uses an even longer block of text to show how three lines of content can be displayed before truncation occurs. This approach is useful when you want to show more context while still maintaining consistent spacing and preventing excessively tall content blocks. 

<p class="line-clamp-3">
  This example uses an even longer block of text to show how three lines of
  content can be displayed before truncation occurs. This approach is useful
  when you want to show more context while still maintaining consistent
  spacing and preventing excessively tall content blocks.
</p>

List

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

list-disc
  • Apples are delicious and healthy.
  • Mountains offer breathtaking views.
  • Coding improves problem-solving skills.
list-decimal
  • First step: gather all ingredients.
  • Second step: preheat the oven.
  • Third step: mix and bake carefully.
list-none
  • Sunsets paint the sky beautifully.
  • Books open doors to new worlds.
  • Flowers brighten up any room.
<div>
  <span class="mb-3 font-mono text-xs font-medium text-muted">list-disc</span>
  <ul class="list-inside list-disc">
    <li>Apples are delicious and healthy.</li>
    <li>Mountains offer breathtaking views.</li>
    <li>Coding improves problem-solving skills.</li>
  </ul>
</div>

<div>
  <span class="mb-3 font-mono text-xs font-medium text-muted">list-decimal</span>
  <ul class="list-inside list-decimal">
    <li>First step: gather all ingredients.</li>
    <li>Second step: preheat the oven.</li>
    <li>Third step: mix and bake carefully.</li>
  </ul>
</div>

<div>
  <span class="mb-3 font-mono text-xs font-medium text-muted">list-none</span>
  <ul class="list-inside list-none">
    <li>Sunsets paint the sky beautifully.</li>
    <li>Books open doors to new worlds.</li>
    <li>Flowers brighten up any room.</li>
  </ul>
</div>

Vertical align

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

This text is aligned to the baseline
This text is aligned to the top
This text is aligned to the middle
This text is aligned to the bottom
This text is aligned to the top of the parent element's font
This text is aligned to the bottom of the parent element's font 
<div class="relative mx-auto leading-none">
  <span class="inline-block h-8 w-0 align-baseline">
    <span class="absolute top-0 h-8 w-full border-t border-b border-dashed border-danger/40"></span>
    <span class="absolute top-0 h-4 w-full border-b border-dashed border-danger/30"></span>
  </span>
  <span class="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
    This text is aligned to the baseline</span
  >
</div>

<div class="relative mx-auto leading-none">
  <span class="inline-block h-8 w-0 align-top">
    <span class="absolute top-0 h-8 w-full border-t border-b border-dashed border-danger/30"></span>
    <span class="absolute top-0 h-4 w-full border-b border-dashed border-danger/40"></span>
  </span>
  <span class="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
    This text is aligned to the top</span
  >
</div>

<div class="relative mx-auto leading-none">
  <span class="inline-block h-8 w-0 align-middle">
    <span class="absolute top-0 h-8 w-full border-t border-b border-dashed border-danger/30"></span>
    <span class="absolute top-0 h-4 w-full border-b border-dashed border-danger/40"></span>
  </span>
  <span class="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
    This text is aligned to the middle</span
  >
</div>

<div class="relative mx-auto leading-none">
  <span class="inline-block h-8 w-0 align-bottom">
    <span class="absolute top-0 h-8 w-full border-t border-b border-dashed border-danger/30"></span>
    <span class="absolute top-0 h-4 w-full border-b border-dashed border-danger/40"></span>
  </span>
  <span class="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
    This text is aligned to the bottom</span
  >
</div>

<div class="relative mx-auto leading-none">
  <span class="inline-block h-8 w-0 align-text-top">
    <span class="absolute top-0 h-8 w-full border-t border-b border-dashed border-danger/30"></span>
    <span class="absolute top-0 h-4 w-full border-b border-dashed border-danger/40"></span>
  </span>
  <span class="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
    This text is aligned to the top of the parent element's font</span
  >
</div>

<div class="relative mx-auto leading-none">
  <span class="inline-block h-8 w-0 align-text-bottom">
    <span class="absolute top-0 h-8 w-full border-t border-b border-dashed border-danger/30"></span>
    <span class="absolute top-0 h-4 w-full border-b border-dashed border-danger/40"></span>
  </span>
  <span class="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
    This text is aligned to the bottom of the parent element's font</span
  >
</div>

Text shadow

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Extra extra small text shadow

Extra small text shadow

Small text shadow

Medium text shadow

Large text shadow

Large shadow with 20% opacity

Large shadow with 30% opacity

<p class="text-shadow-2xs">Extra extra small text shadow</p>
<p class="text-shadow-xs">Extra small text shadow</p>
<p class="text-shadow-sm">Small text shadow</p>
<p class="text-shadow-md">Medium text shadow</p>
<p class="text-shadow-lg">Large text shadow</p>
<p class="text-shadow-lg/20">Large shadow with 20% opacity</p>
<p class="text-shadow-lg/30">Large shadow with 30% opacity</p>

Gradient text

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Hello World

<h1 class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text font-extrabold text-transparent inline-block">Hello World</h1>

Responsive typography

Docs

Hummingbird's typography system is built on a solid foundation of sensible defaults, with a focus on readability and usability.

Responsive Heading

<h1 class="text-2xl md:text-4xl lg:text-5xl">Responsive Heading</h1>

Blockquote

Docs

Blockquote are used to highlight important quotations or excerpts within your content.

Basic blockquote

The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability. 

<blockquote class="relative p-4">
  <span class="text-subtle/50 absolute -start-3 -top-5 size-16 rotate-180 rtl:rotate-0">
    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M7 7.5H4c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zm6 0h-3c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zM12 12c1-1 1.5-2.5 1.5-4V6M6 12c1-1 1.5-2.5 1.5-4V6" stroke-width="1"/></svg>
  </span>
  <div class="relative z-1">
    <p class="text-lg">
      <em>
        The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability.
      </em>
    </p>
  </div>
</blockquote>

Blockquote with attribution

"There is nothing either good or bad, but thinking makes it so."

William Shakespeare 
<blockquote class="border-s-4 border-primary bg-primary-lighter p-4 sm:p-6 rounded-e-lg">
  <p class="text-lg font-medium">
    <em>
      "There is nothing either good or bad, but thinking makes it so."
    </em>
  </p>
  <footer class="mt-4 flex items-center gap-3 text-sm text-muted">
    <div class="h-px w-6 bg-primary"></div>
    William Shakespeare
  </footer>
</blockquote>

Testimonial blockquote

The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability.

Avatar

John Doe

CEO, Example Inc.

<blockquote class="max-w-3xl mx-auto p-4">
  <div class="flex items-center justify-center text-subtle/50">
    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M7 7.5H4c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zm6 0h-3c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zM12 12c1-1 1.5-2.5 1.5-4V6M6 12c1-1 1.5-2.5 1.5-4V6" stroke-width="1"/></svg>
  </div>
  <p class="text-lg text-center">
    <em>
      The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability.
    </em>
  </p>
  <footer class="mt-4 flex items-center justify-center gap-3">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_4.webp" alt="Avatar" class="rounded-full" />
    </div>
    <div>
      <p class="text-sm font-medium mb-0">John Doe</p>
      <p class="text-xs text-muted mb-0">CEO, Example Inc.</p>
    </div>
  </footer>
</blockquote>

Rating blockquote

"The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability."

Avatar

John Doe

CEO, Example Inc.

<blockquote class="max-w-3xl mx-auto p-4">
  <div class="flex justify-center gap-1 text-warning mb-4">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z" stroke-width="0.4" stroke="currentColor"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z" stroke-width="0.4" stroke="currentColor"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z" stroke-width="0.4" stroke="currentColor"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z" stroke-width="0.4" stroke="currentColor"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2L9.19 8.63L2 9.24l5.46 4.73L5.82 21z" stroke-width="0.4" stroke="currentColor"/></svg>
  </div>
  <p class="text-lg text-center">
    <em>
      "The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability."
    </em>
  </p>
  <footer class="mt-4 text-center gap-3">
    <div class="avatar avatar-lg">
      <img src="/images/avatar/avatar_4.webp" alt="Avatar" class="rounded-full" />
    </div>
      <p class="text-sm font-medium mt-2 mb-0">John Doe</p>
      <p class="text-xs text-muted mb-0">CEO, Example Inc.</p>
  </footer>
</blockquote>

Center alignment

The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability. 

<blockquote class="relative text-center p-4">
  <span class="text-subtle/50 absolute -start-3 -top-5 size-16 rotate-180 rtl:rotate-0">
    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M7 7.5H4c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zm6 0h-3c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zM12 12c1-1 1.5-2.5 1.5-4V6M6 12c1-1 1.5-2.5 1.5-4V6" stroke-width="1"/></svg>
  </span>
  <div class="relative z-1">
    <p class="text-lg">
      <em>
        The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability.
      </em>
    </p>
  </div>
</blockquote>

Right alignment

The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability. 

<blockquote class="relative text-end p-4">
  <span class="text-subtle/50 absolute -start-3 -top-5 size-16 rotate-180 rtl:rotate-0">
    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M7 7.5H4c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zm6 0h-3c-.3 0-.5-.2-.5-.5V4c0-.3.2-.5.5-.5h3c.3 0 .5.2.5.5v3c0 .3-.2.5-.5.5zM12 12c1-1 1.5-2.5 1.5-4V6M6 12c1-1 1.5-2.5 1.5-4V6" stroke-width="1"/></svg>
  </span>
  <div class="relative z-1">
    <p class="text-lg">
      <em>
        The journey of building great products starts with simple ideas, thoughtful design decisions, and a strong focus on user experience and long-term usability.
      </em>
    </p>
  </div>
</blockquote>
Previous Themes Next Basic