Components
Foundations
Feedback
Typography
Styles for headings, paragraphs, lists, and more. Includes the chart font used across all data visualizations.
Installation
Install this component via the shadcn CLI.
npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/typography.jsonOr install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json
Preview
Interactive component demo.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
The king thought long and hard, and finally came up with a brilliant plan.
"After all," he said, "everyone enjoys a good joke."
- First item
- Second item
Chart Font — Geist Pixel Square
Used for axis labels, tooltips, and all chart text via var(--font-chart)
Earnings by Artist — $12,345.67
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — $€£¥ — Q1 Q2 Q3 Q4
Bar Chart · Line Chart · Heatmap · Pivot Table
Usage
How to use this component in your code.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<p className="leading-7">Paragraph text</p>
<blockquote className="border-l-2 pl-6 italic">Quote</blockquote>
<ul className="my-6 ml-6 list-disc">
<li>List item</li>
</ul>
{/* Chart font */}
<div style={{ fontFamily: 'var(--font-chart)' }}>
<p>Earnings by Artist — $12,345.67</p>
<p>0123456789 — Q1 Q2 Q3 Q4</p>
</div>