django/shadcn-ui

Typography

Styles for headings, paragraphs, lists and inline text.

The Joke Tax

The king's subjects were not amused. They grumbled and complained, but the king was firm.

Installation

uvx django_shadcn@latest add typography

Usage

<c-typography.h1>Taxing Laughter</c-typography.h1>
<c-typography.p>The king thought long and hard.</c-typography.p>

shadcn/ui documents typography as utility classes rather than shipping a component. There is no per-file equivalent of a prose wrapper in a Django template, so each style is its own subcomponent here. The classes are the ones from the original page, unchanged.

Examples

h1

Taxing Laughter: The Joke Tax Chronicles 

<c-typography.h1>Taxing Laughter</c-typography.h1>

h2

The People of the Kingdom 

<c-typography.h2>The People of the Kingdom</c-typography.h2>

h3

The Joke Tax 

<c-typography.h3>The Joke Tax</c-typography.h3>

h4

People stopped telling jokes 

<c-typography.h4>People stopped telling jokes</c-typography.h4>

Paragraph

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax. 

<c-typography.p>The king repealed the joke tax.</c-typography.p>

Blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." 
<c-typography.blockquote>After all, he said.</c-typography.blockquote>

List

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners: 20 gold coins
<c-typography.list>
  <li>1st level of puns: 5 gold coins</li>
  <li>2nd level of jokes: 10 gold coins</li>
</c-typography.list>

Inline code

django-cotton 
<c-typography.code>django-cotton</c-typography.code>

Lead

A modal dialog that interrupts the user with important content and expects a response. 

<c-typography.lead>A modal dialog.</c-typography.lead>

Large

Are you absolutely sure? 
<c-typography.large>Are you absolutely sure?</c-typography.large>

Small

Email address 
<c-typography.small>Email address</c-typography.small>

Muted

Enter your email address. 

<c-typography.muted>Enter your email address.</c-typography.muted>