Typography

Preview

Typography

TypeScript

The quick brown fox jumps over the lazy dog.

Installation

bash

1npx shadcn@latest add https://fysk.dev/r/typography.json

Usage

tsx

1import { Typography } from "@/components/ui"
2
3<Typography variant="h1">Heading</Typography>
4<Typography variant="p">Body text.</Typography>

CSS Approach

If you want to style an entire block of HTML (like content from a CMS or Markdown), you can use the CSS-based approach.

Copy the following CSS into your global stylesheet (e.g., globals.css):

css

1.fysk-typography {
2  @apply text-foreground transition-colors duration-300;
3}
4
5.fysk-typography h1 {
6@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
7}
8
9.fysk-typography h2 {
10@apply scroll-m-20 border-b border-border pb-2 text-3xl font-semibold tracking-tight mt-6 transition-colors first:mt-0;
11}
12
13.fysk-typography h3 {
14@apply scroll-m-20 text-2xl font-medium tracking-tight mt-4;
15}
16
17.fysk-typography h4 {
18@apply scroll-m-20 text-xl font-normal tracking-tight mt-2;
19}
20
21.fysk-typography p {
22@apply leading-7 text-foreground/75 [&:not(:first-child)]:mt-2 tracking-wide;
23}
24
25.fysk-typography blockquote {
26@apply mt-6 border-l-2 pl-6 italic text-foreground/75;
27}
28
29.fysk-typography ul {
30@apply my-6 ml-6 list-disc [&>li]:mt-2 text-foreground/75;
31}
32
33.fysk-typography code {
34@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground/75;
35}
36
37.fysk-typography table {
38@apply w-full border-collapse border border-border mt-6 text-sm overflow-hidden rounded-lg;
39}
40
41.fysk-typography thead {
42@apply bg-muted/50;
43}
44
45.fysk-typography th {
46@apply border border-border p-3 text-left font-semibold;
47}
48
49.fysk-typography td {
50@apply border border-border p-3 text-foreground/80;
51}
52
53.fysk-typography tr:nth-child(even) {
54@apply bg-muted/20;
55}
56
57.fysk-typography strong {
58@apply font-semibold text-foreground/75;
59}
60
61.fysk-typography small {
62@apply text-sm font-medium leading-none text-foreground/75;
63}

Add the .fysk-typography class to the parent container of your content:

tsx

1<div className="fysk-typography">
2  <h1>My Content</h1>
3  <p>This whole block is styled automatically.</p>
4  <table>
5    <thead><tr><th>Prop</th><th>Value</th></tr></thead>
6    <tbody><tr><td>Status</td><td>Active</td></tr></tbody>
7  </table>
8</div>

Examples

Default

Standard body and heading layout.

Component

TypeScript

The Chronicles

Once upon a time...

Advanced Variants

Showcasing lists, blockquotes, and inline code.

Component

TypeScript

Heading 2

Heading 3

Heading 4

Lead paragraph text.

Large text.

Small text.

Item one
Item two
Item three

Check theconfig.tsfile.

Features

Semantic HTML: Dynamically switches the underlying HTML element (e.g., h1, p, blockquote, code) based on the selected variant.
Responsive Sizing: Heading variants come with pre-configured fluid typography (e.g., h1 transitions between sizes on mobile/desktop).
Data Driven Lists: The `list` variant accepts a `data` array prop for cleaner JSX when rendering bullet points.
Consistent Spacing: Built-in margin handling for standard document flow (e.g., `:not(:first-child)` logic for paragraphs and headers).

Props

Prop	Type	Default	Description
`variant`	`string`	`"p"`	Visual style and semantic mapping.
`as`	`ElementType`	-	Manual override for the underlying HTML element.
`data`	`React.Node[]`	-	Array of items to render when `variant="list"`.

Accepts all standard HTML attributes for the underlying element.